fix giờ mà chỉnh sửa lịch

website/Areas/LotteryV2/Views/Home/Index.cshtml

@@ -58,7 +58,7 @@
                             <span class="text-[22px] font-black text-[#FBF3A7] leading-none" style="text-shadow: 0 4px 8px rgba(0,0,0,0.3)">1.000.000</span>
                             <span class="text-[8px] font-bold text-white uppercase opacity-90 mt-1">HTG</span>
                         </div>
-                        <div class="text-[10px] text-white/90 font-medium whitespace-nowrap mt-1">@Lang.next : <span class="font-black text-yellow-300 countdown-timer">00:00:00</span></div>
+                        <div class="text-[10px] text-white/90 font-medium whitespace-nowrap mt-1">@Lang.next : <span class="font-black text-yellow-300 countdown-timer" data-target-hour="20">00:00:00</span></div>
                     </div>
 
                     <!-- Right: Action Section (4 columns) -->
@@ -105,7 +105,7 @@
                             <span class="text-[23px] font-black text-[#FBF3A7] leading-none" style="text-shadow: 0 4px 8px rgba(0,0,0,0.3)">30.000.000</span>
                             <span class="text-[8px] font-bold text-white uppercase opacity-90 mt-1">HTG</span>
                         </div>
-                        <div class="text-[10px] text-white/90 font-medium whitespace-nowrap mt-1">@Lang.next : <span class="font-black text-yellow-300 countdown-timer">00:00:00</span></div>
+                        <div class="text-[10px] text-white/90 font-medium whitespace-nowrap mt-1">@Lang.next : <span class="font-black text-yellow-300 countdown-timer" data-target-hour="23">00:00:00</span></div>
                     </div>
 
                     <!-- Right: Action Section (4 columns) -->
@@ -152,7 +152,7 @@
                             <span class="text-[23px] font-black text-[#FBF3A7] leading-none" style="text-shadow: 0 4px 8px rgba(0,0,0,0.3)">800.000</span>
                             <span class="text-[8px] font-bold text-white uppercase opacity-90 mt-1">HTG</span>
                         </div>
-                        <div class="text-[10px] text-white/90 font-medium whitespace-nowrap mt-1">@Lang.next : <span class="font-black text-yellow-300 countdown-timer">00:00:00</span></div>
+                        <div class="text-[10px] text-white/90 font-medium whitespace-nowrap mt-1">@Lang.next : <span class="font-black text-yellow-300 countdown-timer" data-target-hour="20">00:00:00</span></div>
                     </div>
 
                     <!-- Right: Action Section (4 columns) -->
@@ -177,7 +177,6 @@
     }
 
     function startCountdown() {
-        const targetHour = 20; // 20:00 (8 PM) Haiti time
         const timeZone = 'America/Port-au-Prince';
         const timers = document.querySelectorAll('.countdown-timer');
 
@@ -190,16 +189,18 @@
             const elapsedMs = moment().diff(startBrowser);
             const now = baseServer.clone().add(elapsedMs, 'milliseconds'); // Haiti time
 
-            let target = now.clone().hour(targetHour).minute(0).second(0).millisecond(0);
-            if (now.isSameOrAfter(target)) target.add(1, 'day');
+            timers.forEach(t => {
+                const targetHour = parseInt(t.dataset.targetHour || '20', 10);
+                let target = now.clone().hour(targetHour).minute(0).second(0).millisecond(0);
+                if (now.isSameOrAfter(target)) target.add(1, 'day');
 
-            const dur = moment.duration(target.diff(now));
-            const h = Math.max(0, Math.floor(dur.asHours()));
-            const m = Math.max(0, dur.minutes());
-            const s = Math.max(0, dur.seconds());
+                const dur = moment.duration(target.diff(now));
+                const h = Math.max(0, Math.floor(dur.asHours()));
+                const m = Math.max(0, dur.minutes());
+                const s = Math.max(0, dur.seconds());
 
-            const timeStr = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
-            timers.forEach(t => t.innerText = timeStr);
+                t.innerText = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+            });
         }
 
         update();

website/Areas/Millions/Views/Home/GameHome.cshtml

@@ -290,7 +290,7 @@
         }
 
         function startCountdown() {
-            const targetHour = 20;
+            const targetHour = 23;
             const now = new Date();
             let target = new Date();
             target.setHours(targetHour, 0, 0, 0);

website/Areas/Millions/Views/Home/JackpotResults.cshtml

@@ -70,15 +70,10 @@
                     <span id="dateRangeLabel" class="text-xs font-bold text-black whitespace-nowrap">@fromDisplay - @toDisplay</span>
                     <img src="/Millions/assets/icons/chevron-down-2.svg" alt="" class="w-3 h-3 ml-auto"/>
                 </button>
+                <input type="hidden" id="fromInput" name="fromFormatted" value="@fromFormatted"/>
+                <input type="hidden" id="toInput" name="toFormatted" value="@toFormatted"/>
                 <div id="dateRangePanel" class="date-range-panel">
-                    <div class="row">
-                        <label>From</label>
-                        <input type="date" id="fromInput" name="fromFormatted" value="@fromFormatted" class="date-input"/>
-                    </div>
-                    <div class="row">
-                        <label>To</label>
-                        <input type="date" id="toInput" name="toFormatted" value="@toFormatted" class="date-input"/>
-                    </div>
+                    <input type="text" id="jackpotDateRange" class="date-range-picker-input" readonly/>
                 </div>
             </div>
             <button type="submit" class="bg-[#0062ff] rounded-lg w-8 h-8 flex items-center justify-center shrink-0">
@@ -93,17 +88,52 @@
                 var panel = document.getElementById('dateRangePanel');
                 var fromInput = document.getElementById('fromInput');
                 var toInput = document.getElementById('toInput');
+                var pickerInput = document.getElementById('jackpotDateRange');
+                var label = document.getElementById('dateRangeLabel');
+                var picker = null;
                 if (!toggle || !panel) return;
 
                 function openPanel() {
                     panel.classList.add('open');
                     toggle.classList.add('open');
+                    if (picker) {
+                        picker.redraw();
+                    }
                 }
                 function closePanel() {
                     panel.classList.remove('open');
                     toggle.classList.remove('open');
                 }
 
+                function formatDateForDisplay(date) {
+                    return flatpickr.formatDate(date, "d/m/Y");
+                }
+
+                function formatDateForRequest(date) {
+                    return flatpickr.formatDate(date, "Y-m-d");
+                }
+
+                function getDateFromRequestValue(value) {
+                    return flatpickr.parseDate(value, "Y-m-d");
+                }
+
+                function setRangeText(fromDate, toDate) {
+                    if (label) {
+                        label.textContent = formatDateForDisplay(fromDate) + " - " + formatDateForDisplay(toDate);
+                    }
+                }
+
+                function syncRangeFields(selectedDates) {
+                    if (!selectedDates || selectedDates.length === 0) return;
+
+                    var fromDate = selectedDates[0];
+                    var toDate = selectedDates.length > 1 ? selectedDates[1] : selectedDates[0];
+
+                    fromInput.value = formatDateForRequest(fromDate);
+                    toInput.value = formatDateForRequest(toDate);
+                    setRangeText(fromDate, toDate);
+                }
+
                 toggle.addEventListener('click', function(e) {
                     e.stopPropagation();
                     if (panel.classList.contains('open')) {
@@ -121,27 +151,33 @@
                     }
                 });
 
-                function autoCloseIfComplete() {
-                    if (fromInput && toInput && fromInput.value && toInput.value) {
-                        closePanel();
-                    }
-                }
-
-                // Init Flatpickr on both date inputs (fully styled calendar)
                 if (window.flatpickr) {
-                    var fpOpts = {
+                    var fromDate = getDateFromRequestValue(fromInput.value);
+                    var toDate = getDateFromRequestValue(toInput.value);
+                    setRangeText(fromDate, toDate);
+
+                    picker = flatpickr(pickerInput, {
+                        mode: "range",
                         dateFormat: "Y-m-d",
+                        defaultDate: [fromDate, toDate],
                         disableMobile: true,
+                        inline: true,
                         appendTo: panel,
-                        static: false,
-                        positionElement: toggle,
-                        onChange: function() { autoCloseIfComplete(); }
-                    };
-                    flatpickr(fromInput, fpOpts);
-                    flatpickr(toInput, fpOpts);
-                } else {
-                    if (fromInput) fromInput.addEventListener('change', autoCloseIfComplete);
-                    if (toInput) toInput.addEventListener('change', autoCloseIfComplete);
+                        monthSelectorType: "dropdown",
+                        onChange: function(selectedDates) {
+                            syncRangeFields(selectedDates);
+                            if (selectedDates.length === 2) {
+                                closePanel();
+                            }
+                        },
+                        onClose: function(selectedDates, dateStr, instance) {
+                            syncRangeFields(selectedDates);
+                            if (selectedDates.length === 1) {
+                                instance.setDate([selectedDates[0], selectedDates[0]], false);
+                                setRangeText(selectedDates[0], selectedDates[0]);
+                            }
+                        }
+                    });
                 }
             })();
         </script>

website/Areas/Millions/Views/Home/Results.cshtml

@@ -37,17 +37,14 @@
             <h1 class="font-bricolage">@Lang.results</h1>
         </div>
 
-        <!-- Selection Bar: Side-by-side dates and search -->
+        <!-- Selection Bar: Date range and search -->
         <div class="selection-bar bg-white rounded-t-[30px] px-4 pt-4 pb-2">
             <div class="flex gap-3">
-                <div class="date-pick-input flex-1 cursor-pointer relative bg-white border border-gray-200 rounded-lg p-2 flex items-center gap-2">
+                <div class="date-range-input flex-1 cursor-pointer relative bg-white border border-gray-200 rounded-lg p-2 flex items-center gap-2">
                     <img src="/Millions/img/icon_calendar.svg" class="w-5 h-5" />
-                    <input type="text" id="fromDate" value="@Model.fromDate" class="bg-transparent border-none outline-none font-bold text-[13px] w-full ml-1 cursor-pointer" readonly />
-                    <i class="fas fa-caret-down text-gray-400"></i>
-                </div>
-                <div class="date-pick-input flex-1 cursor-pointer relative bg-white border border-gray-200 rounded-lg p-2 flex items-center gap-2">
-                    <img src="/Millions/img/icon_calendar.svg" class="w-5 h-5" />
-                    <input type="text" id="toDate" value="@Model.toDate" class="bg-transparent border-none outline-none font-bold text-[13px] w-full ml-1 cursor-pointer" readonly />
+                    <input type="text" id="dateRange" class="bg-transparent border-none outline-none font-bold text-[13px] w-full ml-1 cursor-pointer" readonly />
+                    <input type="hidden" id="fromDate" value="@Model.fromDate" />
+                    <input type="hidden" id="toDate" value="@Model.toDate" />
                     <i class="fas fa-caret-down text-gray-400"></i>
                 </div>
                 <button id="btnSearch" class="btn-search-red !w-12 !h-12 flex items-center justify-center bg-[#0062FF] text-white rounded-xl shadow-md" onclick="triggerSearch()">
@@ -110,18 +107,58 @@
             { code: '@Constants.Millions_CODE', name: 'Millions', color: '#0062FF' }
         ];
 
-        function initBrandedFlatpickr(selector, yearStart, yearEnd) {
+        function formatDateForDisplay(date) {
+            return flatpickr.formatDate(date, "d/m/Y");
+        }
+
+        function formatDateForRequest(date) {
+            return flatpickr.formatDate(date, "Y-m-d");
+        }
+
+        function getDateFromRequestValue(value) {
+            return flatpickr.parseDate(value, "Y-m-d");
+        }
+
+        function setRangeText(fromDate, toDate) {
+            document.getElementById("dateRange").value = `${formatDateForDisplay(fromDate)} - ${formatDateForDisplay(toDate)}`;
+        }
+
+        function syncRangeFields(selectedDates) {
+            if (selectedDates.length === 0) return;
+
+            const fromDate = selectedDates[0];
+            const toDate = selectedDates.length > 1 ? selectedDates[1] : selectedDates[0];
+
+            document.getElementById("fromDate").value = formatDateForRequest(fromDate);
+            document.getElementById("toDate").value = formatDateForRequest(toDate);
+            setRangeText(fromDate, toDate);
+        }
+
+        function initBrandedRangePicker(selector, yearStart, yearEnd) {
             const inputEl = document.querySelector(selector);
-            const wrapper = inputEl.closest('.date-pick-input');
-            
+            const wrapper = inputEl.closest('.date-range-input');
+            const fromDate = getDateFromRequestValue(document.getElementById("fromDate").value);
+            const toDate = getDateFromRequestValue(document.getElementById("toDate").value);
+
+            setRangeText(fromDate, toDate);
+
             flatpickr(selector, {
+                mode: "range",
                 dateFormat: "Y-m-d",
-                altInput: true,
-                altFormat: "M d, Y",
-                altInputClass: "bg-transparent border-none outline-none font-bold text-[13px] w-full ml-1 cursor-pointer",
+                defaultDate: [fromDate, toDate],
                 disableMobile: true,
                 monthSelectorType: "dropdown",
                 appendTo: wrapper,
+                onChange: function (selectedDates) {
+                    syncRangeFields(selectedDates);
+                },
+                onClose: function (selectedDates, dateStr, instance) {
+                    syncRangeFields(selectedDates);
+                    if (selectedDates.length === 1) {
+                        instance.setDate([selectedDates[0], selectedDates[0]], false);
+                        setRangeText(selectedDates[0], selectedDates[0]);
+                    }
+                },
                 onReady: function (selectedDates, dateStr, instance) {
                     instance.calendarContainer.style.zIndex = "9999";
                     const yearInput = instance.calendarContainer.querySelector(".numInput.cur-year");
@@ -148,8 +185,7 @@
         }
 
         document.addEventListener('DOMContentLoaded', function() {
-            initBrandedFlatpickr("#fromDate", 2020, 2030);
-            initBrandedFlatpickr("#toDate", 2020, 2030);
+            initBrandedRangePicker("#dateRange", 2020, 2030);
             triggerSearch(); // Initial load for all games
         });
 

website/Languages/Lang.fr.resx

@@ -1835,7 +1835,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>How much does a ticket cost?</value>
   </data>
   <data name="millions_redeem_rewards" xml:space="preserve">
-    <value>Redeem Rewards</value>
+    <value>Draw winning</value>
   </data>
   <data name="millions_mega_jackpot" xml:space="preserve">
     <value>Mega Jackpot</value>

website/wwwroot/Millions/css/jackpot.css

@@ -23,10 +23,10 @@
 .date-range-panel {
     position: absolute;
     top: calc(100% + 6px); left: 0;
-    min-width: 280px;
+    width: min(330px, calc(100vw - 32px));
     background: #fff;
     border-radius: 14px;
-    padding: 14px;
+    padding: 8px;
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18),
                 0 0 0 1px rgba(0, 98, 255, 0.08);
     z-index: 50;
@@ -54,6 +54,14 @@
 }
 .date-range-panel .row + .row { margin-top: 10px; }
 
+.date-range-picker-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
 .date-input {
     width: 100%;
     font-size: 13px; font-weight: 600;
@@ -241,6 +249,8 @@
     position: relative !important;
     top: auto !important;
     left: auto !important;
-    margin: 8px auto 0;
+    margin: 0 auto;
     width: 100% !important;
+    box-shadow: none !important;
+    padding: 0 !important;
 }

website/wwwroot/Millions/css/results.css

@@ -72,7 +72,8 @@
     align-items: center;
 }
 
-.date-pick-input {
+.date-pick-input,
+.date-range-input {
     flex: 1;
     background: white;
     border: 1px solid #D1D5DB;
@@ -89,16 +90,11 @@
 }
 
 /* Ensure flatpickr calendar stays within container bounds */
-.date-pick-input .flatpickr-calendar {
+.date-pick-input .flatpickr-calendar,
+.date-range-input .flatpickr-calendar {
     left: 0 !important;
     right: auto !important;
-    max-width: 300px;
-}
-
-/* For the second (right-side) date input, align calendar to the right */
-.date-pick-input:nth-child(2) .flatpickr-calendar {
-    left: auto !important;
-    right: 0 !important;
+    max-width: min(330px, calc(100vw - 32px));
 }
 
 .btn-search-red {
@@ -306,6 +302,17 @@
     border-color: #0062FF !important;
     color: #fff !important;
 }
+.flatpickr-day.startRange,
+.flatpickr-day.endRange {
+    background: #0062FF !important;
+    border-color: #0062FF !important;
+    color: #fff !important;
+}
+.flatpickr-day.inRange {
+    background: rgba(0, 98, 255, 0.12) !important;
+    border-color: transparent !important;
+    box-shadow: -5px 0 0 rgba(0, 98, 255, 0.12), 5px 0 0 rgba(0, 98, 255, 0.12) !important;
+}
 .flatpickr-months .flatpickr-month {
     background: #0062FF;
     color: #fff;