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

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

@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">
    <link rel="stylesheet" href="/LotteryV2/css/site.css" />
    <link rel="stylesheet" href="/LotteryV2/css/results.css" />
    <link rel="stylesheet" href="/LotteryV2/css/history.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-0 md:left-1/2 md:-translate-x-1/2 w-full md:max-w-[414px] z-[100] bg-[#F3F4F6] pb-2 shadow-md">
        <!-- Header -->
        <div class="results-top-header">
            <a href="/LotteryV2/Home/GameHome" class="back-btn">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="font-bricolage">@Lang.history</h1>
        </div>

        <!-- Game Tabs -->
        <div class="history-game-tabs !mt-0 pt-3 scale-95 origin-top">
            <div class="game-tab @(Model.termType == Constants.PIC10_BASIC_CODE ? "active" : "")" 
                 onclick="changeGame('@Constants.PIC10_BASIC_CODE', this)">@Lang.v2_classic_pick_10</div>
            <div class="game-tab @(Model.termType == Constants.PIC10_BIGSMALL_CODE ? "active" : "")" 
                 onclick="changeGame('@Constants.PIC10_BIGSMALL_CODE', this)">@Lang.v2_big_small</div>
            <div class="game-tab @(Model.termType == Constants.PIC10_ODDEVEN_CODE ? "active" : "")" 
                 onclick="changeGame('@Constants.PIC10_ODDEVEN_CODE', this)">@Lang.v2_odd_even</div>
        </div>

        <!-- Status Filters -->
        <div class="status-filters !mt-1">
            <div class="status-filter @(Model.status == Constants.ALL_DATA ? "active" : "")" 
                 onclick="changeStatus('@Constants.ALL_DATA', this)">@Lang.v2_all</div>
            <div class="status-filter @(Model.status == Constants.NOT_DRAW_CODE ? "active" : "")" 
                 onclick="changeStatus('@Constants.NOT_DRAW_CODE', this)">@Lang.v2_waiting</div>
            <div class="status-filter @(Model.status == Constants.WIN_CODE ? "active" : "")" 
                 onclick="changeStatus('@Constants.WIN_CODE', this)">@Lang.v2_win</div>
            <div class="status-filter @(Model.status == Constants.DRAWN_CODE ? "active" : "")" 
                 onclick="changeStatus('@Constants.DRAWN_CODE', this)">@Lang.v2_not_win</div>
        </div>
    </div>

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

    <!-- Ticket List Container -->
    <div id="history-list-container" class="history-items-list px-4 mt-2">
        <partial name="_TermUserTicketHistory" model="Model" />
    </div>

    <!-- Pagination (Optional but good to have if supported) -->
    @if (Model.totalPage != null && int.Parse(Model.totalPage) > 1) {
        <div class="flex justify-center gap-4 pb-40">
             <button onclick="changePage(currentSeqPage - 1)" class="p-2 px-4 bg-white rounded-lg shadow-sm font-bold text-gray-500 disabled:opacity-30" id="prevPage">Prev</button>
             <span class="p-2 font-bold text-[#EE0033]" id="pageDisplay">@Model.seqPage / @Model.totalPage</span>
             <button onclick="changePage(currentSeqPage + 1)" class="p-2 px-4 bg-white rounded-lg shadow-sm font-bold text-gray-500 disabled:opacity-30" id="nextPage">Next</button>
        </div>
    }

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

@section Scripts {
    <script>

        let currentTermType = '@Model.termType';
        let currentStatus = '@Model.status';
        let currentSeqPage = parseInt('@Model.seqPage');
        let totalPages = parseInt('@Model.totalPage' || '1');

        function changeGame(type, el) {
            if (currentTermType === type) return;
            currentTermType = type;
            currentSeqPage = 1;
            
            document.querySelectorAll('.game-tab').forEach(t => t.classList.remove('active'));
            el.classList.add('active');
            
            loadHistory();
        }

        function changeStatus(status, el) {
            if (currentStatus === status) return;
            currentStatus = status;
            currentSeqPage = 1;

            document.querySelectorAll('.status-filter').forEach(t => t.classList.remove('active'));
            el.classList.add('active');

            loadHistory();
        }

        function changePage(page) {
            if (page < 1 || page > totalPages) return;
            currentSeqPage = page;
            loadHistory();
        }

        function loadHistory() {
            const container = document.getElementById("history-list-container");
            container.style.opacity = "0.5";

            fetch(subDomain + `/LotteryV2/Home/TermUserTicketHistory?termType=${currentTermType}&status=${currentStatus}&seqPage=${currentSeqPage}`)
                .then(response => response.text())
                .then(html => {
                    container.innerHTML = html;
                    container.style.opacity = "1";
                    updatePaginationUI();
                })
                .catch(error => {
                    container.style.opacity = "1";
                });
        }

        function updatePaginationUI() {
            const pageDisplay = document.getElementById("pageDisplay");
            const prevBtn = document.getElementById("prevPage");
            const nextBtn = document.getElementById("nextPage");
            
            if (pageDisplay) {
                // Total pages might have changed after filter
                // We'd need to get it from the partial view or another API call
                // For now, assume it's stable or handled by the server
                pageDisplay.innerText = `${currentSeqPage} / ${totalPages}`;
            }
            if (prevBtn) prevBtn.disabled = currentSeqPage <= 1;
            if (nextBtn) nextBtn.disabled = currentSeqPage >= totalPages;
        }
    </script>
}