@model LotteryWebApp.Models.UserTicketHistoryModel
@using LotteryWebApp.Languages
@using LotteryWebApp.Common
@{
    ViewData["Title"] = "Millions - History";
    Layout = "~/Areas/Millions/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="/Millions/css/site.css" />
    <link rel="stylesheet" href="/Millions/css/results.css" />
    <link rel="stylesheet" href="/Millions/css/history.css" />
}

<div class="main-container results-container animate__animated animate__fadeIn pb-40 relative">
    <!-- Header Group: Static at Top -->
    <div class="fixed top-0 left-0 md:left-1/2 md:-translate-x-1/2 w-full md:max-w-[430px] z-[100] bg-[#0062FF]">
        <!-- Header -->
        <div class="results-top-header">
            <a href="/Millions/Home/GameHome" class="back-btn">
                <i class="fa-solid fa-arrow-left"></i>
            </a>
            <h1 class="font-bricolage">@Lang.history</h1>
        </div>

        <!-- Status Filters inside a white card-like container -->
        <div class="history-tabs-container bg-white rounded-t-[30px] px-4 pt-4 pb-1">
            <div class="status-filters">
                <div class="status-filter @(Model.status == Constants.ALL_DATA ? "active" : "")" 
                     onclick="changeStatus('@Constants.ALL_DATA', this)">@Lang.millions_all</div>
                <div class="status-filter @(Model.status == Constants.NOT_DRAW_CODE ? "active" : "")" 
                     onclick="changeStatus('@Constants.NOT_DRAW_CODE', this)">@Lang.millions_waiting</div>
                <div class="status-filter @(Model.status == Constants.WIN_CODE ? "active" : "")" 
                     onclick="changeStatus('@Constants.WIN_CODE', this)">@Lang.millions_win</div>
                <div class="status-filter @(Model.status == Constants.DRAWN_CODE ? "active" : "")" 
                     onclick="changeStatus('@Constants.DRAWN_CODE', this)">@Lang.millions_not_win</div>
            </div>
        </div>
    </div>

    <!-- Ticket List Container (spaced below fixed header) -->
    <div id="history-list-container"
         class="history-items-list bg-white rounded-t-[30px] px-4 pt-4 mt-[130px] pb-[120px] min-h-[calc(100vh-130px)] shadow-sm">
        <partial name="_TermUserTicketHistory" model="Model" />
    </div>

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

    <!-- Custom Notification Modal -->
    <div id="notificationModal" class="fixed inset-0 z-[300] flex items-center justify-center hidden px-6 font-bricolage" style="background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);">
        <div class="w-full max-w-[343px] min-h-[420px] bg-white rounded-[24px] overflow-hidden flex flex-col items-center p-8 animate__animated animate__zoomIn animate__faster shadow-2xl border border-white/50">
            <div class="w-full flex justify-center mb-8 mt-4">
                <img src="/Millions/img/modal/fail_icon.png" class="w-[160px] h-auto object-contain" alt="Notificaton icon" />
            </div>
            <div class="px-2 text-center mb-10 flex-1 flex items-center justify-center">
                <p id="notificationMessage" class="text-black font-[800] text-[20px] leading-snug"></p>
            </div>
            <div class="w-full">
                <button onclick="closeNotificationModal()" class="w-full bg-[#0062FF] text-white font-[800] text-[18px] py-[12px] rounded-[16px] shadow-lg active:scale-95 transition-all">
                    @Lang.login
                </button> 
            </div>
        </div>
    </div>
</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();
        }

        var systemUpgrading = false;
        function showNotification(message, code) {
            $("#notificationMessage").text(message);
            const $btn = $("#notificationModal button");
            if (code === "-2" || (message && message.includes("System is upgrading"))) {
                systemUpgrading = true;
                $btn.text("@Lang.login");
            } else {
                systemUpgrading = false;
                $btn.text("OK");
            }
            $("#notificationModal").removeClass("hidden").addClass("flex");
        }

        function closeNotificationModal() {
            $("#notificationModal").addClass("hidden").removeClass("flex");
            if (systemUpgrading) {
                window.location.href = subDomain + "/Account/Login";
            }
        }

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

            fetch(subDomain + `/Millions/Home/TermUserTicketHistory?termType=${currentTermType}&status=${currentStatus}&seqPage=${currentSeqPage}`)
                .then(response => {
                    if (!response.ok) throw new Error('Network response was not ok');
                    return response.text();
                })
                .then(html => {
                    try {
                        const json = JSON.parse(html);
                        if (json.responseCode === "-2" || (json.responseMessage && json.responseMessage.includes("System is upgrading"))) {
                            showNotification(json.responseMessage || "System is upgrading", "-2");
                            return;
                        }
                    } catch (e) {
                        // Not JSON, likely HTML partial
                    }
                    container.innerHTML = html;
                    container.style.opacity = "1";
                    updatePaginationUI();
                })
                .catch(error => {
                    console.error("Error loading history:", error);
                    container.style.opacity = "1";
                    if (error.message && (error.message.includes("System is upgrading") || error.message.includes("-2"))) {
                        showNotification(error.message, "-2");
                    }
                });
        }

        function updatePaginationUI() {
            const pageDisplay = document.getElementById("pageDisplay");
            const prevBtn = document.getElementById("prevPage");
            const nextBtn = document.getElementById("nextPage");
            
            if (pageDisplay) {
                pageDisplay.innerText = `${currentSeqPage} / ${totalPages}`;
            }
            if (prevBtn) prevBtn.disabled = currentSeqPage <= 1;
            if (nextBtn) nextBtn.disabled = currentSeqPage >= totalPages;
        }

        function showTicketDetail(billCode, money, moneyWin, date, channel, payMethod, ticketCode, gameId, drawTime, ticketId) {
            document.getElementById('detailBillCode').innerText = '#' + (billCode || '-');
            document.getElementById('detailTicketCode').innerText = '#' + (ticketId || '-');
            document.getElementById('detailMoney').innerText = formatMoneyV2(money || '0') + ' HTG';
            document.getElementById('detailMoneyWin').innerText = formatMoneyV2(moneyWin || '0') + ' HTG';
            document.getElementById('detailDate').innerText = date || '-';
            document.getElementById('detailDrawTime').innerText = drawTime || '-';
            document.getElementById('detailChannel').innerText = channel || 'App';
            
            // Logic for Game Name and Color
            let gameName = "@Lang.millions_classic_pick_10";
            let gameColor = "#0062FF"; // Red
            
            if (gameId === "31") {
                gameName = "@Lang.millions_big_small";
                gameColor = "#00A3FF"; // Blue
            } else if (gameId === "32") {
                gameName = "@Lang.millions_odd_even";
                gameColor = "#9333EA"; // Purple
            }
            
            const gameEl = document.getElementById('detailGameName');
            gameEl.innerText = gameName;
            gameEl.style.color = gameColor;

            let payMethodText = "Main Account";
            if(payMethod == "1") payMethodText = "Wallet";
            else if(payMethod == "0") payMethodText = "Main Account";

            document.getElementById('detailPaymentMethod').innerText = payMethodText;

            // Render Numbers
            const container = document.getElementById('detailBallsContainer');
            container.innerHTML = '';
            if (ticketCode) {
                const balls = ticketCode.split(/[;,]/).filter(x => x.trim() !== '');
                balls.forEach(val => {
                    let ballVal = val.trim();
                    let displayVal = ballVal;
                    let isLabel = false;
                    switch(ballVal.toUpperCase()) {
                        case 'B': displayVal = 'Big'; isLabel = true; break;
                        case 'S': displayVal = 'Small'; isLabel = true; break;
                        case 'O': displayVal = 'Odd'; isLabel = true; break;
                        case 'E': displayVal = 'Even'; isLabel = true; break;
                    }

                    const div = document.createElement('div');
                    if (isLabel) {
                        div.className = "bg-[#0062FF] text-white px-4 py-1 rounded-full font-black text-[12px] shadow-sm uppercase tracking-wider";
                    } else {
                        div.className = "w-8 h-8 rounded-full flex items-center justify-center text-white text-[12px] font-black shadow-md";
                        div.style.background = "linear-gradient(135deg, #FF3D63 0%, #E3132D 60%, #BA0F21 100%)";
                        div.style.border = "1px solid rgba(255, 255, 255, 0.3)";
                    }
                    div.innerText = displayVal;
                    container.appendChild(div);
                });
            }
            
            const modal = document.getElementById('ticketDetailModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }

        function closeDetailModal() {
            const modal = document.getElementById('ticketDetailModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }
    </script>
}

<!-- Ticket Detail Modal -->
<div id="ticketDetailModal" class="fixed inset-0 z-[200] bg-black/60 hidden items-center justify-center p-4 font-bricolage backdrop-blur-sm">
    <div class="w-full max-w-[380px] bg-white rounded-[28px] overflow-hidden flex flex-col items-center px-6 py-8 shadow-2xl relative animate__animated animate__zoomIn animate__faster">
        <button onclick="closeDetailModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors">
            <i class="fas fa-times text-xl"></i>
        </button>
        
        <div class="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mb-4">
            <i class="fas fa-receipt text-3xl text-[#0062FF]"></i>
        </div>
        
        <h2 class="text-[20px] font-black text-gray-800 mb-2 uppercase tracking-tight">@Lang.millions_ticket_detail</h2>
        
        <!-- Ticket Numbers Display -->
        <div id="detailBallsContainer" class="flex flex-wrap justify-center gap-2 mb-6 mt-2 max-w-full">
            <!-- Dynamic balls here -->
        </div>

        <div class="w-full space-y-4">
            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.millions_game</span>
                <span id="detailGameName" class="font-black">Pick 10</span>
            </div>
            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.millions_bill_code</span>
                <span id="detailBillCode" class="font-black text-gray-800">#</span>
            </div>
            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.millions_ticket_code</span>
                <span id="detailTicketCode" class="font-black text-gray-800">#</span>
            </div>
            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.millions_money_ticket</span>
                <span id="detailMoney" class="font-black text-gray-800">0 HTG</span>
            </div>
            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.millions_money_win</span>
                <span id="detailMoneyWin" class="font-black text-[#0A9800]">0 HTG</span>
            </div>
            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.millions_purchase_date</span>
                <span id="detailDate" class="font-black text-gray-800">-</span>
            </div>
            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.millions_draw_date</span>
                <span id="detailDrawTime" class="font-black text-gray-800">-</span>
            </div>
            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.millions_channel</span>
                <span id="detailChannel" class="font-black text-gray-800">-</span>
            </div>
            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.millions_payment_method</span>
                <span id="detailPaymentMethod" class="font-black text-gray-800">-</span>
            </div>
        </div>
        
        <button onclick="closeDetailModal()" class="w-full bg-[#0062FF] text-white font-black text-[16px] py-3.5 rounded-2xl shadow-lg mt-8 active:scale-95 transition-all uppercase tracking-widest">
            @Lang.millions_close
        </button>
    </div>
</div>