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

@model LotteryWebApp.Models.TermResultHistoryModel
@{
    ViewData["Title"] = "LotteryV2 - Results History";
    Layout = "~/Areas/LotteryV2/Views/Shared/_Layout.cshtml";
    ViewData["ActiveTab"] = "Results";
}
@using LotteryWebApp.Languages;

@section Styles {
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Flatpickr for premium calendar -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <link rel="stylesheet" href="/LotteryV2/css/site.css" />
    <link rel="stylesheet" href="/LotteryV2/css/results.css" />
}

<div class="main-container results-container animate__animated animate__fadeIn pb-40 relative">
    <!-- Header Group: Fixed at Top -->
    <div class="fixed top-0 left-1/2 -translate-x-1/2 w-full max-w-[414px] z-[100] bg-[#F3F4F6] pb-2 shadow-md">
        <!-- Header: Matches Figma (Right Image) -->
        <div class="results-top-header">
            <a href="javascript:history.back()" class="back-btn">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="font-bricolage">@Lang.results</h1>
        </div>

        <!-- Selection Bar: Side-by-side dates and search -->
        <div class="selection-bar bg-white/50 backdrop-blur-sm 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">
                    <img src="/LotteryV2/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="/LotteryV2/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 />
                    <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-[#EE0033] text-white rounded-xl shadow-md" onclick="triggerSearch()">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>

        <!-- Column Headers (Time & Results) -->
        <div class="px-4 mt-2">
            <div class="flex gap-3">
                <div class="flex-1 bg-white rounded-xl py-2 text-center text-[11px] font-black text-gray-800 shadow-sm border border-gray-100">
                    @Lang.time
                </div>
                <div class="flex-[2] bg-white rounded-xl py-2 text-center text-[11px] font-black text-[#EE0033] shadow-sm border border-gray-100">
                    @Lang.results
                </div>
            </div>
        </div>
    </div>

    <!-- Spacer to push content down below fixed header (~180px) -->
    <div class="h-[180px]"></div>

    <!-- Result List Container -->
    <div id="results-list-container" class="results-items-list px-4 min-h-[300px]">
        <partial name="_TermResultHistoryV2" model="Model" />
    </div>

    <!-- Bottom Promo Bar (Matches Bottom message with yellow text) -->
    <div class="fixed bottom-[74px] left-1/2 -translate-x-1/2 w-full max-w-[414px] bg-[#EE0033] text-white py-2 text-center text-[12px] font-bold tracking-wide z-40 flex flex-col items-center justify-center overflow-hidden h-auto shadow-md">
         <div class="flex flex-col items-center w-full animate-slide-up">
             <!-- Row 1 -->
             <div class="opacity-90">@Lang.have_chance_to_get</div>
             <!-- Row 2 -->
             <div class="text-[18px] font-black text-[#FBF3A7] mt-0.5">
                  @Lang.jackpot_today_htg
             </div>
         </div>
    </div>

    <!-- Shared Bottom Navbar -->
    <partial name="_BottomNavbar" />
</div>

@section Scripts {
    <script>

        function initBrandedFlatpickr(selector, yearStart, yearEnd) {
            const container = document.querySelector(".results-container") || document.querySelector(".main-container");
            flatpickr(selector, {
                dateFormat: "Y-m-d", // Actual value used for search
                altInput: true,
                altFormat: "M d, Y", // Premium display format
                altInputClass: "bg-transparent border-none outline-none font-bold text-[13px] w-full ml-1 cursor-pointer",
                disableMobile: "true",
                monthSelectorType: "dropdown",
                appendTo: container,
                onReady: function (selectedDates, dateStr, instance) {
                    const yearInput = instance.calendarContainer.querySelector(".numInput.cur-year");
                    if (yearInput) {
                        const yearSelect = document.createElement("select");
                        yearSelect.className = "flatpickr-monthDropdown-months cur-year-select";
                        yearSelect.style.cssText = "appearance:none; font-weight:800; border:none; background:transparent; color:white; cursor:pointer; margin-left:4px; outline:none; font-family:inherit; font-size:inherit;";

                        for (let y = yearEnd; y >= yearStart; y--) {
                            const opt = document.createElement("option");
                            opt.value = y;
                            opt.text = y;
                            opt.style.color = "#333";
                            if (y === instance.currentYear) opt.selected = true;
                            yearSelect.appendChild(opt);
                        }

                        yearSelect.addEventListener("change", function () {
                            instance.changeYear(parseInt(this.value));
                        });

                        yearInput.style.display = "none";
                        yearInput.parentNode.appendChild(yearSelect);
                        
                        instance.set("onChange", function(d, s, i) {
                            yearSelect.value = i.currentYear;
                        });
                    }
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            initBrandedFlatpickr("#fromDate", 2020, 2030);
            initBrandedFlatpickr("#toDate", 2020, 2030);
        });

        function triggerSearch() {
            const fromDate = document.getElementById("fromDate").value;
            const toDate = document.getElementById("toDate").value;
            const termType = "@Model.termType";
            const btn = document.getElementById("btnSearch");
            const container = document.getElementById("results-list-container");

            // UI Feedback: Loading state
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            container.style.opacity = "0.5";

            // AJAX Call to TermResultHistory
            fetch(subDomain + `/LotteryV2/Home/TermResultHistory?termType=${termType}&fromDate=${fromDate}&toDate=${toDate}`)
                .then(response => response.text())
                .then(html => {
                    container.innerHTML = html;
                    container.style.opacity = "1";
                    btn.disabled = false;
                    btn.innerHTML = '<i class="fas fa-search"></i>';
                })
                .catch(error => {
                    console.error('Error fetching results:', error);
                    container.style.opacity = "1";
                    btn.disabled = false;
                    btn.innerHTML = '<i class="fas fa-search"></i>';
                    alert('Error fetching draw results. Please try again.');
                });
        }

        function switchMainTab(type, el) {
            const btns = el.parentElement.querySelectorAll('.tab-btn');
            btns.forEach(b => {
                b.style.color = '#1F2937';
                b.style.border = 'none';
                b.classList.remove('active');
            });
            el.style.color = '#EE0033';
            el.style.border = '1.5px solid #EE0033';
            el.classList.add('active');
        }
    </script>
}