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

@model LotteryWebApp.Models.HomeIndex_ViewModel
@{
    ViewData["Title"] = "Millions - Kết quả Jackpot";
    Layout = "~/Areas/Millions/Views/Shared/_Layout.cshtml";
}
@using System
@using System.Globalization
@using LotteryWebApp.Languages;
@using LotteryWebApp.Controllers;
@using LotteryWebApp.Common;

@section Styles {
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/Millions/css/all.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css"/>
    <link rel="stylesheet" href="/Millions/css/jackpot.css"/>
    <style>
        /* Mega Jackpot amount — spiral grow & shrink */
        .mega-jackpot-spiral {
            display: inline-block;
            transform-origin: center center;
            animation: megaJackpotSpiral 1.8s ease-in-out infinite;
            will-change: transform;
        }
        @@keyframes megaJackpotSpiral {
            0% {
                transform: scale(0.25) rotate(0deg);
            }
            30% {
                transform: scale(1.15) rotate(360deg);
            }
            65% {
                transform: scale(1.15) rotate(360deg);
            }
            100% {
                transform: scale(0.25) rotate(720deg);
            }
        }
    </style>
}

<div class="main-content h-dvh w-full max-w-[430px] mx-auto bg-[#0062ff] relative overflow-hidden font-bricolage">

    <!-- Header gradient -->
    <div class="header-bg absolute inset-x-0 top-0 h-[160px] flex items-start justify-between px-3 pt-4 z-0">
        <button onclick="location.href=subDomain + '@Url.Action("GameHome", "Home", new { area = "Millions" })';" class="js-back w-6 h-6 flex items-center justify-center">
            <img src="/Millions/assets/icons/arrow-left.svg" alt="Back" class="w-6 h-6"/>
        </button>
        <p class="text-white text-base font-bold">@Lang.millions_jackpot_results_title</p>
        <span class="w-6 h-6"></span>
    </div>

    <!-- White rounded body (overlaps header, scrollable) -->
    <div class="absolute inset-x-0 top-[56px] bottom-0 bg-white rounded-t-[40px] flex flex-col gap-3 px-3 pt-4 pb-[96px] overflow-y-auto hide-scrollbar z-10" style="box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);">

        <!-- Date filter + search -->
        @{
            var fromFormatted = ViewBag.FromFormatted as string;
            var toFormatted = ViewBag.ToFormatted as string;
            var fromDisplay = DateTime.ParseExact(fromFormatted, "yyyy-MM-dd", CultureInfo.InvariantCulture).ToString("dd/MM/yyyy");
            var toDisplay = DateTime.ParseExact(toFormatted, "yyyy-MM-dd", CultureInfo.InvariantCulture).ToString("dd/MM/yyyy");
        }
        <form id="jackpotFilterForm" method="get" action="@Url.Action("JackpotResults", "Home", new { area = "Millions" })" class="flex items-center justify-between gap-3 shrink-0">
            <input type="hidden" name="termType" value="@Model.termType"/>
            <div class="relative flex-1">
                <button type="button" id="dateRangeToggle" class="date-range-toggle">
                    <img src="/Millions/assets/icons/calendar.png" alt="" class="w-5 h-5"/>
                    <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">
                    <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">
                <img src="/Millions/assets/icons/search.svg" alt="" class="w-4 h-4"/>
            </button>
        </form>

        <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
        <script>
            (function() {
                var toggle = document.getElementById('dateRangeToggle');
                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')) {
                        closePanel();
                    } else {
                        openPanel();
                    }
                });

                panel.addEventListener('click', function(e) { e.stopPropagation(); });

                document.addEventListener('click', function(e) {
                    if (!panel.contains(e.target) && !toggle.contains(e.target)) {
                        closePanel();
                    }
                });

                if (window.flatpickr) {
                    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,
                        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>

        <!-- Mega Jackpot banner -->
        <div class="mega-banner relative rounded-[12px] overflow-hidden px-4 py-3 border-2 border-white/70 flex flex-col shrink-0">
            <span class="mega-glow" style="left:-79px; top:-101px;"></span>
            <span class="mega-glow" style="right:-78px; top:9px;"></span>
            <span class="mega-glow" style="right:-107px; top:20px;"></span>
            <p class="mega-title relative inline-block text-white text-[22px] font-futura leading-none">
                <img src="/Millions/assets/icons/crown.png" alt="" class="absolute -top-[5px] left-[26px] w-[12px] h-auto rotate-[10deg] pointer-events-none"/>
                @Lang.millions_mega_jackpot
            </p>
            <p class="text-white text-xs mt-2">@Lang.millions_estimate_jackpot_prize</p>
            <p class="leading-none mt-1 flex items-start" style="margin-bottom:18px;">
                <span class="mega-amount mega-jackpot-spiral text-[40px] font-condensed text-gold-gradient tracking-tight leading-none">@Utils.FormatMoney(Model.bolet ?? "30000000")</span>
                <span class="mega-jackpot-spiral text-gold-gradient text-sm font-bold uppercase ml-1">@Lang.v2_htg</span>
            </p>
            <p class="text-white text-[10px] mt-1">@Lang.millions_be_the_next_millionaire</p>
            <img src="/Millions/assets/images/crown-balls.png" alt="" class="absolute right-2 top-1/2 -translate-y-1/2 w-44 h-auto pointer-events-none"/>
        </div>

        <!-- List heading -->
        <div class="px-2 shrink-0">
            <div class="flex items-center justify-between font-bold">
                <p class="text-sm text-black">@Lang.millions_list_jackpot_results</p>
                <p class="text-xs text-[#0062ff]">@string.Format(Lang.millions_total_draws, Model.listTerm?.Count ?? 0)</p>
            </div>

            <!-- Results list -->
            <div class="flex flex-col gap-2 pb-2">

                @if (Model.listTerm != null && Model.listTerm.Count > 0)
                {
                    foreach (var term in Model.listTerm)
                    {
                        var balls = !string.IsNullOrEmpty(term.result) ? term.result.Split(',') : new string[0];
                        var mainBalls = new string[5];
                        var mbBall = "0";
                        for (int i = 0; i < 5; i++)
                        {
                            mainBalls[i] = i < balls.Length ? balls[i].Trim() : "0";
                        }
                        if (balls.Length >= 6)
                        {
                            mbBall = balls[5].Trim();
                        }

                        string dayOfWeek = "";
                        string datePart = "";
                        string timePart = "";
                        DateTime drawDt;
                        if (!string.IsNullOrEmpty(term.date_random) &&
                            DateTime.TryParseExact(term.date_random, "dd/MM/yyyy HH:mm:ss", CultureInfo.InvariantCulture, DateTimeStyles.None, out drawDt))
                        {
                            dayOfWeek = drawDt.ToString("dddd", new CultureInfo("en-US"));
                            dayOfWeek = char.ToUpper(dayOfWeek[0]) + dayOfWeek.Substring(1);
                            datePart = drawDt.ToString("dd/MM/yyyy");
                            timePart = drawDt.ToString("HH:mm");
                        }

                        <a href="@Url.Action("JackpotDetail", "Home", new { area = "Millions", id = term.id, termType = Model.termType })" class="result-card bg-white rounded-xl flex items-center justify-between px-3 py-2 gap-2">
                            <div class="flex flex-col gap-0.5 items-start shrink-0">
                                <span class="bg-[#0062ff] text-white text-[10px] font-bold rounded px-1 py-0.5">@Lang.millions_draw_no_short@term.seq</span>
                                <span class="text-xs text-[#8e8e93]">@dayOfWeek</span>
                                <span class="text-[8px] font-bold text-[#8e8e93]">@datePart</span>
                                <span class="text-[8px] font-bold text-[#8e8e93]">@timePart</span>
                            </div>
                            <div class="grid grid-cols-3 gap-1">
                                @for (int i = 0; i < 5; i++)
                                {
                                    <div class="ball ball-blue ball-mini">@mainBalls[i]</div>
                                }
                                <div class="relative">
                                    <img src="/Millions/assets/icons/crown.png" alt="" class="absolute -top-2.5 -right-1 w-4 h-auto rotate-[15deg] pointer-events-none z-0"/>
                                    <div class="ball ball-mb ball-mini relative z-10">@mbBall</div>
                                    <span class="absolute -bottom-1 -right-1 bg-[#ee0033] text-white text-[6px] font-bold px-1 rounded z-20">MB</span>
                                </div>
                            </div>
                            <div class="flex flex-col gap-0.5 items-start shrink-0">
                                <span class="text-xs font-bold text-black">@Lang.millions_jackpot</span>
                                <p class="leading-none">
                                    <span class="text-base font-extrabold text-[#002bff]">@Utils.FormatMoney(term.bolet ?? term.money_winner ?? "0")</span><span class="text-[10.32px] font-extrabold text-black align-top">@Lang.v2_htg</span>
                                </p>
                                @if (!string.IsNullOrEmpty(term.split))
                                {
                                    <span class="text-[8px] text-black">@string.Format(Lang.millions_subscribers_won, term.split)</span>
                                }
                            </div>
                            <img src="/Millions/assets/icons/chevron-right.svg" alt="" class="w-2 h-3 shrink-0"/>
                        </a>
                    }
                }

            </div>

            <!-- Note -->
            <div class="flex items-center gap-2 bg-[#e6f0ff] rounded-lg px-3 py-2 mb-2 shrink-0">
                <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="#0062ff"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 5a1.25 1.25 0 1 1 0 2.5A1.25 1.25 0 0 1 12 7Zm1 10h-2v-6h2v6Z"/></svg>
                <p class="text-[10px] font-bold text-[#0062ff]">@Lang.millions_note_results_updated</p>
            </div>
        </div>
    </div>

    @{
        ViewData["ActiveTab"] = "Home";
    }
    @await Html.PartialAsync("~/Areas/Millions/Views/Shared/_BottomNavbar.cshtml")

</div>

@section Scripts {
    <script src="/Millions/js/all.min.js"></script>
}