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

@model LotteryWebApp.Models.HomeIndex_ViewModel
@{
    ViewData["Title"] = "Millions - Buy Ticket";
    Layout = "~/Areas/Millions/Views/Shared/_Layout.cshtml";
    var currentTerm = Model.listTerm?.FirstOrDefault();
}
@using LotteryWebApp.Languages;
@using LotteryWebApp.Common;
@using Microsoft.AspNetCore.Http;
@{
    var isFreeTicketMode = Context.Request.Query["freeTicketMode"] == "1"
        && Model.termType == Constants.Millions_CODE;
    var freeTicketPromotionCode = isFreeTicketMode
        ? Context.Session.GetString("Millions.FreeTicket.PromotionCode")
        : null;
    var hasFreeTicketPromotion = isFreeTicketMode
        && !string.IsNullOrWhiteSpace(freeTicketPromotionCode);
}

@section Styles {
    <link rel="stylesheet" href="/Millions/css/buy-ticket.css" asp-append-version="true" />
    <style>
        /* BuyTicket has its own bottom bar; avoid global navbar padding gap */
        body.millions-bg { padding-bottom: 0 !important; }
        body.millions-bg .main-container { padding-bottom: 0 !important; }
    </style>
}

@if (Model.termType == Constants.PIC10_BIGSMALL_CODE || Model.termType == Constants.PIC10_ODDEVEN_CODE)
{
    var isBigSmall = Model.termType == Constants.PIC10_BIGSMALL_CODE;
    var themeColor = isBigSmall ? "#0A9800" : "#AA3DC8";
    var gameTitle = isBigSmall ? Lang.millions_big_small : Lang.millions_odd_even;
    var prizeAmount = isBigSmall ? "100.000" : "200.000";
    
    <!-- ====== CARD SELECTION GAME UI (BIG/SMALL or ODD/EVEN) ====== -->
    <div class="millions-buy-ticket-page main-container animate__animated animate__fadeIn overflow-hidden">
        <!-- Header -->
        <div class="header">
            <button onclick="location.href='@Url.Action("GameHome", "Home")'" class="back-btn" type="button">
                <i class="fa-solid fa-arrow-left"></i>
            </button>
            <div class="header-title">@gameTitle</div>
        </div>

        <div class="content-card">
        <!-- Sticky Term Info sub-header -->
        <div class="ticket-subheader">
            <div class="flex items-center justify-between">
            <div class="flex items-center gap-2 border border-[#E5E7EB] rounded-lg px-3 py-1.5 bg-gray-50">
                <i class="fa-regular fa-calendar text-[[@themeColor]] text-sm" style="color: @themeColor"></i>
                <span class="text-[12px] font-bold text-gray-700">@DateTime.Now.ToString("dddd, MMM dd, yyyy", new System.Globalization.CultureInfo("en-US"))</span>
            </div>
            <div class="flex items-center gap-1 ml-4 flex-1 justify-end">
                <span class="text-[12px] font-bold text-gray-400">@Lang.millions_round</span>
                <span class="text-[18px] font-black text-brown-main">#@(currentTerm?.id ?? "123")</span>
            </div>
            </div>
        </div>

        <!-- Scrollable Content Area -->
        <div class="ticket-scroll-area bg-white pb-40" id="bsContent">
            <!-- Results for the last 5 days -->
            <div class="px-5 pt-4 pb-2">
                <h3 class="text-[17px] font-bold text-black text-center mb-3">Results for the last 5 days</h3>
                <div id="last5Results" class="flex justify-between gap-1.5 px-1">
                    @{
                        var pastTerms = ViewBag.PastTerms as List<LotteryWebApp.Service.Term> ?? new List<LotteryWebApp.Service.Term>();
                        foreach (var term in pastTerms) {
                            var rawResult = (term.result ?? "").Trim().ToUpper();
                            var dateStr = "--";
                            DateTime dt;
                            if (DateTime.TryParse(term.date_random, out dt)) {
                                dateStr = dt.ToString("MMM dd", new System.Globalization.CultureInfo("en-US"));
                            }
                            
                            var resKey = rawResult;
                            var resTitle = rawResult;
                            if (isBigSmall) {
                                if (rawResult == "S") { resKey = "Small"; resTitle = Lang.Small; }
                                else if (rawResult == "B") { resKey = "Big"; resTitle = Lang.Big; }
                            } else {
                                if (rawResult == "O") { resKey = "Odd"; resTitle = Lang.Odd; }
                                else if (rawResult == "E") { resKey = "Even"; resTitle = Lang.Even; }
                            }
                            
                            var resColor = "";
                            var bgStyle = "background: linear-gradient(136deg, #FFFAE6 0%, #FFE588 100%);";
                            var textStyle = "-webkit-text-stroke: 0.5px #000;";

                            if (resKey == "NA" || string.IsNullOrEmpty(rawResult)) {
                                bgStyle = "background: #EAEAEA;";
                                resTitle = "";
                                textStyle = "";
                            } else {
                                if (isBigSmall) {
                                    resColor = resKey == "Big" ? "#A2FF00" : "#FF4157";
                                } else {
                                    resColor = resKey == "Odd" ? "#FFC700" : "#B33BD0";
                                }
                                textStyle += $" color: {resColor};";
                            }
                            
                            <div class="flex flex-col items-center justify-center min-h-[64px] flex-1 rounded-lg py-1.5 border border-gray-200" style="@bgStyle">
                                <span class="text-[11px] font-bold text-black whitespace-nowrap opacity-70">@dateStr</span>
                                <span class="text-[22px] font-black leading-tight" style="@textStyle">@resTitle</span>
                            </div>
                        }
                        
                        for(int r = pastTerms.Count; r < 5; r++) {
                            <div class="flex flex-col items-center justify-center min-h-[64px] flex-1 rounded-lg py-1.5 border border-gray-200" style="background: #EAEAEA; opacity: 0.7;">
                                <span class="text-[11px] font-bold text-black whitespace-nowrap opacity-70">--</span>
                                <span class="text-[22px] font-black leading-tight" style="color: transparent;"></span>
                            </div>
                        }
                    }
                </div>
            </div>

            <!-- Selection Cards -->
            <!-- Selection Cards -->
            <div class="px-5 pt-4 flex gap-3 h-[245px]">
                <!-- Card 1 (Big or Odd) -->
                <div id="cardBig" onclick="selectBigSmall('big')" class="bigsmall-card flex-1 rounded-2xl relative cursor-pointer transition-all duration-300 active:scale-[0.97] border-2 border-transparent overflow-hidden flex flex-col" style="background: linear-gradient(180deg, #FFF7DB 0%, #FFEEB3 100%);">
                    <img src="/Millions/img/bigsmall/light_effect_1.png" class="absolute top-0 left-0 w-full opacity-60 pointer-events-none" alt="" />
                    <img src="/Millions/img/bigsmall/light_effect_2.png" class="absolute bottom-12 left-0 w-full opacity-60 pointer-events-none" alt="" />
                    <div class="flex flex-col items-center pt-4 pb-3 px-3 relative z-10 h-full justify-between">
                        <div class="flex flex-col items-center w-full">
                            <div class="h-[34px] flex items-center justify-center">
                                <div class="text-[40px] font-[800] leading-none" style="-webkit-text-stroke: 1px #000; text-shadow: 1px 2px 2px rgba(0,0,0,0.15); color: @(isBigSmall ? "#A2FF00" : "#FFC700");">@(isBigSmall ? "Big" : "Odd")</div>
                            </div>
                            <div class="text-[11px] font-medium text-gray-500 mt-1 h-[28px] text-center leading-tight">
                                @(isBigSmall ? "13 number from" : "Odd numbers") <br/> <b>@(isBigSmall ? "41-80" : "1, 3, 5, 7, 9")</b>
                            </div>
                        </div>
                        <div class="flex items-center justify-center -space-x-2 my-2">
                            @if (isBigSmall) {
                                <img src="/Millions/img/bigsmall/ball_42_dark.png" class="w-12 h-12 relative z-[1]" alt="42" />
                                <img src="/Millions/img/bigsmall/ball_88_big.png" class="w-16 h-16 relative z-[2]" alt="88" />
                                <img src="/Millions/img/bigsmall/ball_54_dark.png" class="w-12 h-12 relative z-[1]" alt="54" />
                            } else {
                                <img src="/Millions/img/oddeven/ball_3.png" class="w-12 h-12 relative z-[1]" alt="3" />
                                <img src="/Millions/img/oddeven/ball_1.png" class="w-16 h-16 relative z-[2]" alt="1" />
                                <img src="/Millions/img/oddeven/ball_19.png" class="w-12 h-12 relative z-[1]" alt="19" />
                            }
                        </div>
                        <button class="bigsmall-btn w-full py-2.5 rounded-xl font-black text-[15px] transition-all shadow-md" style="background: @themeColor; color: white;">@Lang.millions_select</button>
                    </div>
                </div>

                <!-- Card 2 (Small or Even) -->
                <div id="cardSmall" onclick="selectBigSmall('small')" class="bigsmall-card flex-1 rounded-2xl relative cursor-pointer transition-all duration-300 active:scale-[0.97] border-2 border-transparent overflow-hidden flex flex-col" style="background: linear-gradient(180deg, #FFF7DB 0%, #FFEEB3 100%);">
                    <img src="/Millions/img/bigsmall/light_effect_1.png" class="absolute top-0 left-0 w-full opacity-60 pointer-events-none" alt="" />
                    <img src="/Millions/img/bigsmall/light_effect_2.png" class="absolute bottom-12 left-0 w-full opacity-60 pointer-events-none" alt="" />
                    <div class="flex flex-col items-center pt-4 pb-3 px-3 relative z-10 h-full justify-between">
                        <div class="flex flex-col items-center w-full">
                            <div class="h-[34px] flex items-center justify-center">
                                <div class="text-[40px] font-[800] leading-none italic" style="-webkit-text-stroke: 1px #000; text-shadow: 1px 2px 2px rgba(0,0,0,0.15); color: @(isBigSmall ? "#FF4157" : "#B33BD0");">@(isBigSmall ? "Small" : "Even")</div>
                            </div>
                            <div class="text-[11px] font-medium text-gray-500 mt-1 h-[28px] text-center leading-tight">
                                @(isBigSmall ? "13 number from" : "Even numbers") <br/> <b>@(isBigSmall ? "01-40" : "0, 2, 4, 6, 8")</b>
                            </div>
                        </div>
                        <div class="flex items-center justify-center -space-x-2 my-2">
                            @if (isBigSmall) {
                                <img src="/Millions/img/bigsmall/ball_5_blue.png" class="w-12 h-12 relative z-[1]" alt="5" />
                                <img src="/Millions/img/bigsmall/ball_1_big.png" class="w-16 h-16 relative z-[2]" alt="1" />
                                <img src="/Millions/img/bigsmall/ball_8_pink.png" class="w-12 h-12 relative z-[1]" alt="8" />
                            } else {
                                <img src="/Millions/img/oddeven/ball_66.png" class="w-12 h-12 relative z-[1]" alt="66" />
                                <img src="/Millions/img/oddeven/ball_68.png" class="w-16 h-16 relative z-[2]" alt="68" />
                                <img src="/Millions/img/oddeven/ball_88.png" class="w-12 h-12 relative z-[1]" alt="88" />
                            }
                        </div>
                        <button class="bigsmall-btn w-full py-2.5 rounded-xl font-black text-[15px] transition-all shadow-md"
								style="background: @themeColor; color: white;">@Lang.millions_select</button>
                    </div>
                </div>
            </div>

            <!-- You Choose + Prize Section -->
            <div class="px-5 pt-6 flex flex-col items-center gap-4">
                <div class="flex flex-col items-center">
                    <span class="text-[15px] font-medium text-black">@Lang.millions_you_choose</span>
                    <span id="choiceDisplay" class="text-[42px] font-[800] leading-tight" style="-webkit-text-stroke: 1px #000;">—</span>
                </div>
                <div class="flex flex-col items-center">
                    <span class="text-[18px] font-medium text-black">@Lang.millions_prize_if_win</span>
                    <div class="flex items-baseline gap-1">
                        <span class="text-[28px] font-black text-black">@prizeAmount</span>
                        <span class="text-[14px] font-black text-[#E56B23]">HTG</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Action Bar -->
        <div class="p-4 bg-white border-t border-gray-200 z-[70] shadow-[0px_-4px_10px_rgba(0,0,0,0.03)] absolute bottom-0 w-full left-0">
            <div class="flex items-center justify-between">
                <div class="flex flex-col">
                    <div class="flex items-center gap-1.5 mb-0.5">
                        <span class="text-[11px] text-black font-black uppercase">@Lang.total_ticket:</span>
                        <span id="bsTotalTicketCount" class="text-[12px] font-black text-black">0</span>
                    </div>
                    <span class="text-[11px] text-black font-black uppercase">@Lang.millions_estimated_ticket_price</span>
                    <div class="flex items-baseline gap-1">
                        <span id="bsTotalPrice" class="text-[28px] font-black text-black">0</span>
                        <span class="text-[13px] font-black" style="color: @themeColor">HTG</span>
                    </div>
                </div>
                <button type="button" id="bsPaymentBtn" onpointerdown="armPaymentClick(event)" onkeydown="armPaymentKey(event)" onclick="bsShowPayment(event)" class="text-white text-[20px] font-black px-10 py-3.5 rounded-xl shadow-lg active:scale-95 transition-all" style="background: @themeColor;">
                    @Lang.millions_payment
                </button>
            </div>
        </div>
        </div>
    </div>
}
else
{
<!-- ====== Basic Pick 10 / Odd-Even GAME UI ====== -->
<div class="millions-buy-ticket-page main-container animate__animated animate__fadeIn overflow-hidden">
    <!-- Header -->
    <div class="header">
        <button onclick="location.href='@Url.Action("GameHome", "Home")'" class="back-btn" type="button">
            <i class="fa-solid fa-arrow-left"></i>
        </button>
        <div class="header-title">
            @if (Model.termType == Constants.PIC10_BASIC_CODE) { <text>Basic Pick 10</text> }
            else if (Model.termType == Constants.Millions_CODE) { <text>Millions</text> }
            else { @Lang.millions_odd_even }
        </div>
    </div>

    <div class="content-card">
    <!-- Sticky Term Info sub-header -->
    <div class="ticket-subheader">
        <div class="flex items-center justify-between">
        <div class="flex items-center gap-2 border border-[#E5E7EB] rounded-lg px-3 py-1.5 bg-gray-50">
            <i class="fa-regular fa-calendar text-[#0062FF] text-sm"></i>
            <span class="text-[12px] font-bold text-gray-700">@DateTime.Now.ToString("dddd, MMM dd, yyyy", new System.Globalization.CultureInfo("en-US"))</span>
        </div>
        <div class="flex items-center gap-1 ml-4 flex-1 justify-end">
            <span class="text-[12px] font-bold text-gray-400">@Lang.millions_round</span>
            <span class="text-[18px] font-black text-brown-main">#@(currentTerm?.id ?? "12459")</span>
        </div>
        </div>
    </div>

    <!-- Ticket Scrollable List Area -->
    <div id="ticketContainer" class="ticket-scroll-area p-4 flex flex-col gap-6 bg-[#F5F5F5] pb-6">
        @for (int i = 1; i <= (isFreeTicketMode ? 1 : 2); i++)
        {
            <div class="ticket-card relative group active:bg-gray-50 transition-colors cursor-pointer animate__animated animate__fadeIn">
                @if (!isFreeTicketMode)
                {
                    <button onclick="removeEntry(this)" class="absolute -right-2 top-2 w-7 h-7 bg-[#FF0000] text-white rounded-full flex items-center justify-center text-[11px] shadow-sm z-[10] hover:bg-red-700 transition-all border-2 border-red-600">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                }
                <div class="absolute left-2 top-4 w-9 h-9 rounded-full border-[3px] border-white flex items-center justify-center text-white font-black text-sm shadow-md ticket-index">@i</div>
                <div class="flex flex-col gap-1 pl-8">
                    <span class="text-[16px] font-extrabold text-[#333]">@Lang.millions_select_10_lucky_numbers</span>
                    <div class="flex items-center gap-4">
                        <div class="grid grid-cols-6 gap-y-2 gap-x-1 flex-1">
                            @for (int j = 0; j < (Model.termType == Constants.PIC10_BASIC_CODE ? 10 : (Model.termType == Constants.Millions_CODE ? 6 : 15)); j++)
                            {
                                var isMbBall = Model.termType == Constants.Millions_CODE && j == 5;
                                <div class="relative w-fit">
                                    <div class="ball-circle ball-empty@(isMbBall ? " ball-mb-circle" : "")"></div>
                                    @if (isMbBall)
                                    {
                                        <div class="absolute -bottom-[6px] -right-[4px] bg-[#FFD700] text-black text-[8.5px] font-black px-[2.5px] py-[1.5px] rounded-[3px] shadow-sm leading-none z-10 border border-[#EAA800]">MB</div>
                                    }
                                </div>
                            }
                        </div>
                        <div class="w-[90px] action-area flex flex-col gap-2">
                             <button onclick="randomizeTicket(this)" class="rand-btn w-full bg-[#2B83F2] text-white flex items-center justify-center gap-1.5 py-1.5 rounded-xl font-extrabold text-[11px] shadow-sm active:scale-95 transition-all">
                                <i class="fa-solid fa-arrows-rotate text-[10px]"></i> @Lang.Random
                             </button>
                             <div class="edit-delete-group hidden flex flex-col gap-2">
                                 <button onclick="editFullTicket(this)" class="w-full bg-[#16A34A] text-white flex items-center justify-center gap-1.5 py-1.5 rounded-xl font-black text-[12px] shadow-sm active:scale-95 transition-all">
                                    <img src="/Millions/img/icons/icon_edit.png" onerror="this.style.display='none'" class="w-[16px] h-[16px] object-contain"> @Lang.millions_edit
                                 </button>
                                 <button onclick="clearTicket(this)" class="w-full bg-[#A855F7] text-white flex items-center justify-center gap-1.5 py-1.5 rounded-xl font-black text-[12px] shadow-sm active:scale-95 transition-all">
                                    <img src="/Millions/img/icons/icon_delete.png" onerror="this.style.display='none'" class="w-[16px] h-[16px] object-contain"> @Lang.millions_delete
                                 </button>
                             </div>
                        </div>
                    </div>
                </div>
            </div>
        }

        @if (!isFreeTicketMode)
        {
            <div class="w-full pt-2" id="addButtonWrapper">
                <button onclick="addNewTicket()" class="w-fit min-w-[220px] mx-auto bg-[#2B83F2] text-white font-black text-md py-2.5 px-6 rounded-xl shadow-md border-b-[4px] border-[#1F66D6] active:translate-y-[1px] active:border-b-[1px] transition-all flex items-center justify-center gap-2">
                    @Lang.millions_add_more_ticket
                </button>
            </div>
        }
        <div class="h-4"></div>
    </div>

    <!-- Bottom Action Bar -->
    <div class="ticket-bottom-bar p-4 bg-white border-t border-gray-200 z-[70] shadow-[0px_-4px_10px_rgba(0,0,0,0.03)]">
        <div class="flex items-center justify-between">
            <div class="flex flex-col">
                <div class="flex items-center gap-1.5 mb-0.5">
                    <span class="text-[11px] text-black font-black uppercase">@Lang.total_ticket:</span>
                    <span id="totalTicketCount" class="text-[12px] font-black text-black">0</span>
                </div>
                <span class="text-[11px] text-black font-black uppercase">@Lang.millions_estimated_ticket_price</span>
                <div class="flex items-baseline gap-1">
                    <span id="totalPrice" class="text-[28px] font-black text-black">0</span>
                    <span class="text-[13px] font-black text-[#0062FF]">HTG</span>
                </div>
            </div>
            <button type="button" onpointerdown="armPaymentClick(event)" onkeydown="armPaymentKey(event)" onclick="preparePayment(event)" class="bg-[#0062FF] text-white text-[20px] font-black px-10 py-3.5 rounded-xl shadow-[0px_6px_15px_rgba(238,0,51,0.25)] active:scale-95 transition-all">
                @Lang.millions_payment
            </button>
        </div>
    </div>
</div>
</div>
}

<!-- Payment channel selection -->
<div id="paymentChannelModal" class="hidden fixed inset-0 z-[140] bg-black/70 backdrop-blur-[3px] items-center justify-center p-4 font-bricolage">
    <div class="relative w-full max-w-[370px] overflow-hidden rounded-[32px] bg-[#F8F9FC] shadow-[0_28px_70px_rgba(0,0,0,0.35)] animate__animated animate__zoomIn animate__faster">
        <div class="relative overflow-hidden bg-gradient-to-br from-[#0062FF] to-[#003FA8] px-6 pb-7 pt-6 text-white">
            <div class="absolute -right-8 -top-10 h-32 w-32 rounded-full bg-white/10"></div><div class="absolute -bottom-12 -left-8 h-28 w-28 rounded-full bg-black/10"></div>
            <button type="button" onclick="hidePaymentChannelModal()" class="absolute right-4 top-4 z-10 flex h-9 w-9 items-center justify-center rounded-full bg-white/15 text-white transition hover:bg-white/25 active:scale-90" aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
            <div class="relative z-[1] flex items-center gap-4"><div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-white text-[25px] text-[#0062FF] shadow-lg"><i class="fa-solid fa-wallet"></i></div><div><h2 class="text-[21px] font-black leading-tight">@Lang.payment_method_title</h2><p class="mt-1 text-[13px] font-semibold text-white/80">@Lang.payment_method_subtitle</p></div></div>
        </div>
        <div class="space-y-3 p-5">
            <button type="button" onclick="selectPaymentChannel('@Constants.BASIC_WALLET_TICKET')" class="group flex w-full items-center gap-4 rounded-[20px] border-2 border-transparent bg-white p-4 text-left shadow-[0_5px_18px_rgba(31,41,55,0.07)] transition hover:-translate-y-0.5 hover:border-[#0062FF] active:scale-[0.98]">
                <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[#E7F0FF] text-[21px] text-[#0062FF]"><i class="fa-solid fa-mobile-screen-button"></i></span><span class="min-w-0 flex-1"><span class="block text-[16px] font-black text-[#171A24]">@Lang.payment_main_account</span><span class="mt-0.5 block text-[12px] font-semibold text-gray-500">@Lang.payment_main_account_desc</span></span><span class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition group-hover:bg-[#0062FF] group-hover:text-white"><i class="fa-solid fa-chevron-right text-[12px]"></i></span>
            </button>
            
            <button type="button" onclick="selectPaymentChannel('@Constants.NATCASH_WALLET_TICKET')" class="group flex w-full items-center gap-4 rounded-[20px] border-2 border-transparent bg-white p-4 text-left shadow-[0_5px_18px_rgba(31,41,55,0.07)] transition hover:-translate-y-0.5 hover:border-[#0A9800] active:scale-[0.98]">
                <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[#E7F8E6] text-[21px] text-[#0A9800]"><i class="fa-solid fa-wallet"></i></span><span class="min-w-0 flex-1"><span class="flex items-center gap-2 text-[16px] font-black text-[#171A24]">@Lang.payment_wallet <span class="rounded-full bg-[#E7F8E6] px-2 py-0.5 text-[9px] font-black text-[#0A9800]">PIN</span></span><span class="mt-0.5 block text-[12px] font-semibold text-gray-500">@Lang.payment_wallet_desc</span></span><span class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition group-hover:bg-[#0A9800] group-hover:text-white"><i class="fa-solid fa-chevron-right text-[12px]"></i></span>
            </button>
            <p class="pt-1 text-center text-[11px] font-semibold text-gray-400"><i class="fa-solid fa-shield-halved mr-1 text-[#0A9800]"></i>@Lang.payment_security_message</p>
        </div>
    </div>
</div>

<!-- Order Summary Screen (from Figma) -->
<div id="orderSummaryModal" class="hidden fixed inset-0 z-[150] bg-black/60 flex items-center justify-center p-0 font-bricolage backdrop-blur-[2px]">
        <div class="w-full h-full bg-white flex flex-col animate__animated animate__fadeInRight animate__faster shadow-2xl relative lg:max-w-[414px]">
        <!-- Header đồng bộ tuyệt đối -->
        <div class="buy-ticket-modal-header sticky top-0 z-[60]">
            <button onclick="hideOrderSummary()" class="back-btn" type="button">
                <i class="fa-solid fa-arrow-left"></i>
            </button>
            <div class="header-title">
                @if (Model.termType == Constants.PIC10_BASIC_CODE) { <text>Basic Pick 10</text> }
                else if (Model.termType == Constants.Millions_CODE) { <text>Millions</text> }
                else if (Model.termType == Constants.PIC10_BIGSMALL_CODE) { @Lang.millions_big_small }
                else { @Lang.millions_odd_even }
            </div>
        </div>

        <!-- Content Area: Split into scrollable list and static summary -->
        <div class="flex-1 flex flex-col min-h-0 bg-gray-50">
            <!-- Scrollable Ticket List -->
            <div class="flex-1 overflow-y-auto p-5 pb-2">
                <div class="flex justify-between items-center px-1 mb-3">
                     <span class="text-[14px] font-bold text-gray-800">Selected Tickets</span>
                     <span class="text-[14px] font-bold text-gray-800">@Lang.price</span>
                </div>

                <!-- Ticket List -->
                <div id="summaryTicketList" class="flex flex-col gap-4">
                     <!-- Populated dynamically via JS -->
                </div>
            </div>

            <!-- Static Summary Info (Dates & Totals) -->
            <div class="shrink-0 bg-white p-5 space-y-4 border-t border-gray-100 shadow-[0px_-10px_20px_rgba(0,0,0,0.03)]">
                 <!-- Dates Section -->
                 <div class="grid grid-cols-2 gap-4">
                      <div class="space-y-1">
                          <span class="text-[11px] font-black text-[#0062FF] block text-center uppercase tracking-tight">@Lang.date_purchase</span>
                          <div class="bg-white border border-gray-100 rounded-xl py-2.5 px-2 text-center font-black text-[11px] text-gray-700 shadow-sm">
                              @DateTime.Now.ToString("dddd MMM dd, yyyy", new System.Globalization.CultureInfo("en-US"))
                          </div>
                      </div>
                      <div class="space-y-1">
                          <span class="text-[11px] font-black text-[#0062FF] block text-center uppercase tracking-tight">@Lang.draw_date</span>
                          <div class="bg-white border border-gray-100 rounded-xl py-2.5 px-2 text-center font-black text-[11px] text-gray-700 shadow-sm" id="summaryResultDate">
                              @{
                                  DateTime drawDate;
                                  bool isValidDate = DateTime.TryParse(currentTerm?.date_end, out drawDate);
                                  if (isValidDate) {
                                     @drawDate.ToString("dddd MMM dd, yyyy", new System.Globalization.CultureInfo("en-US"))
                                  } else {
                                     @:N/A
                                  }
                              }
                          </div>
                      </div>
                 </div>

                 <!-- Totals Section -->
                 <div class="space-y-1 px-1">
                      <div class="flex justify-between items-center">
                          <span class="text-[14px] font-bold text-black">@Lang.total_ticket</span>
                          <span id="summaryTotalCount" class="text-[16px] font-black text-black">0</span>
                      </div>
                      <div class="flex justify-between items-center">
                          <span class="text-[14px] font-bold text-black">@Lang.total_money</span>
                          <div class="flex items-baseline gap-1">
                              <span id="summaryTotalAmount" class="text-[32px] font-black text-black">0</span>
                              <span class="text-[16px] font-black text-[#0062FF]">HTG</span>
                          </div>
                      </div>
                 </div>
            </div>
        </div>

        <div class="shrink-0 p-4 bg-white border-t border-gray-100 grid grid-cols-2 gap-4 pb-8 shadow-[0px_-4px_20px_rgba(0,0,0,0.05)]">
            <button onclick="hideOrderSummary()" class="bg-[#FFB000] text-white py-2.5 rounded-2xl font-black text-[18px] shadow-lg shadow-orange-200 active:scale-95 transition-all uppercase tracking-wide">
                @Lang.reorder
            </button>
            <button id="finalPaymentBtn" onclick="confirmCheckout(this)" class="bg-[#0062FF] text-white py-2.5 rounded-2xl font-black text-[18px] shadow-lg shadow-red-200 active:scale-95 transition-all uppercase tracking-wide">
                @Lang.millions_payment
            </button>
        </div>
    </div>
</div>

<!-- Payment source selection -->
<div id="paymentSourceModal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-[190] hidden items-center justify-center p-4 font-bricolage">
    <div class="bg-white w-full max-w-[350px] rounded-[28px] overflow-hidden shadow-2xl animate__animated animate__zoomIn animate__faster">
        <div class="bg-[#0062FF] px-5 py-4 text-white text-center relative">
            <h2 class="text-[19px] font-black">@Lang.millions_choose_account</h2>
            <button type="button" onclick="hidePaymentSourceModal()" class="absolute right-3 top-3 w-9 h-9 rounded-full bg-white/15 flex items-center justify-center">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>
        <div class="p-5 grid gap-3">
            <button type="button" onclick="selectPaymentSource('@Constants.BASIC_WALLET_TICKET', this)" class="payment-source-button w-full border-2 border-[#0062FF] rounded-2xl px-4 py-4 flex items-center gap-4 text-left active:scale-[0.98] transition-all">
                <span class="w-11 h-11 rounded-full bg-[#0062FF]/10 text-[#0062FF] flex items-center justify-center"><i class="fa-solid fa-mobile-screen-button text-xl"></i></span>
                <span class="font-black text-[16px] text-gray-800">@Lang.basic_account</span>
            </button>
            <button type="button" onclick="selectPaymentSource('@Constants.NATCASH_WALLET_TICKET', this)" class="payment-source-button w-full border-2 border-[#0A9800] rounded-2xl px-4 py-4 flex items-center gap-4 text-left active:scale-[0.98] transition-all">
                <span class="w-11 h-11 rounded-full bg-[#0A9800]/10 text-[#0A9800] flex items-center justify-center"><i class="fa-solid fa-wallet text-xl"></i></span>
                <span class="font-black text-[16px] text-gray-800">@Lang.NatCash</span>
            </button>
        </div>
    </div>
</div>

    <!-- OTP Verification Modal (V2 Design Overhaul - Matching Figma) -->
    <div id="otpModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-[200] hidden items-center justify-center p-4">
        
        <!-- Outer container to hold the modal + external overflowing elements (like stars/glitter) -->
        <div class="relative w-full max-w-[360px] mt-6 animate__animated animate__zoomIn animate__faster">
            
            <!-- Glitter effect (external to the white box) -->
            <div class="absolute -top-[100px] -left-[10px] w-[380px] h-[160px] mix-blend-screen pointer-events-none z-0 overflow-visible opacity-90" style="background: url('/Millions/img/modal/otp_glitter.png') no-repeat center center; background-size: contain;"></div>

            <!-- The White Box -->
            <div class="bg-white rounded-[32px] w-full relative z-10 shadow-[0px_0px_30px_rgba(255,255,255,0.15)] pb-5 border border-yellow-500/20">
                
                <!-- Floating Coins from Figma -->
                <div class="absolute -top-[40px] -right-[10px] z-[80] w-[120px] pointer-events-none drop-shadow-2xl">
                    <img src="/Millions/img/modal/otp_coins.png" class="w-full object-contain" />
                </div>

                <!-- Red Header Section -->
                <div class="relative w-full pt-4 pb-4 bg-[#0062FF] rounded-t-[32px] flex flex-col items-center justify-center z-20" style="border-bottom-left-radius: 50% 20px; border-bottom-right-radius: 50% 20px;">
                    <h2 class="text-white text-[17px] sm:text-[20px] font-[900] uppercase tracking-wide relative z-10 font-bricolage drop-shadow-md text-center px-4 leading-tight w-[80%] mr-auto">@Lang.millions_confirm_purchase</h2>
                </div>
                
                <!-- Modal Body Content -->
                <div class="relative px-6 pt-3 flex flex-col items-center gap-3 z-10">
                    
                    <!-- Shield Icon: mix-blend-mode multiply to remove the white square background -->
                    <div class="relative w-full flex justify-center mb-0 mt-1">
                        <img src="/Millions/img/modal/otp_shield.png" alt="Success" class="w-[90px] object-contain">
                    </div>
        
                    <!-- Info Rows (Aligned exactly like screenshot) -->
                    <div class="w-full flex flex-col gap-2 items-center mt-0">
                        <!-- Ticket Info -->
                        <div class="grid grid-cols-[90px_auto] items-center gap-3 w-full justify-center">
                            <span class="text-[15px] font-bold text-[#555] text-right font-bricolage">@Lang.millions_ticket</span>
                            <div id="otpTicketTypeContainer" class="flex justify-start">
                                <img id="otpTicketTypeImg" src="/Millions/img/even_text.png" class="h-6 object-contain drop-shadow-sm" />
                            </div>
                        </div>

                        <!-- Amount Info -->
                        <div class="grid grid-cols-[90px_auto] items-center gap-3 w-full justify-center">
                            <span class="text-[15px] font-bold text-[#555] text-right font-bricolage">@Lang.millions_amount</span>
                            <div class="flex items-baseline gap-1.5 justify-start">
                                <span id="otpTotalAmount" class="text-[22px] font-[900] text-black leading-none tracking-tight">1.000</span>
                                <span class="text-[15px] font-[900] text-[#F37021] font-bricolage">HTG</span>
                            </div>
                        </div>
                    </div>
        
                    <p id="paymentCodeInstruction" class="text-[14px] font-bold text-[#555] text-center px-4 leading-snug mt-0 font-bricolage">@Lang.millions_otp_instruction</p>
        
                    <!-- 6-Slots OTP Grid (Large Gray Blocks) -->
                    <div class="flex items-center justify-center gap-2 w-full mt-1 px-2" id="otpInputs">
                        @for (int i = 1; i <= 6; i++)
                        {
                            <input type="tel" maxlength="1" id="otp@(i)" 
                                   oninput="moveToNext(this, '@(i < 6 ? "otp" + (i + 1) : "")')" 
                                   class="w-[42px] h-[48px] bg-[#757575] rounded-[10px] text-white text-[26px] font-bold text-center appearance-none focus:bg-[#555] focus:scale-[1.03] focus:ring-2 focus:ring-[#0062FF]/50 transition-all outline-none shadow-inner otp-slot"
                                   placeholder="-">
                        }
                    </div>
                    <div id="walletPinContainer" class="hidden w-full mt-1 px-2">
                        <div class="relative">
                            <i class="fa-solid fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-[#0A9800]"></i>
                            <input id="walletPinInput" type="password" inputmode="numeric" autocomplete="off"
                                   oninput="this.value = this.value.replace(/[^0-9]/g, ''); updateWalletPinState()"
                                   class="h-[52px] w-full rounded-[14px] border-2 border-gray-200 bg-gray-50 pl-11 pr-12 text-center text-[22px] font-black tracking-[0.3em] text-gray-800 outline-none transition focus:border-[#0A9800] focus:bg-white focus:ring-4 focus:ring-green-100"
                                   placeholder="••••">
                            <button type="button" onclick="toggleWalletPinVisibility()" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 active:scale-90" aria-label="Show PIN"><i id="walletPinEye" class="fa-solid fa-eye"></i></button>
                        </div>
                    </div>
        
                    <!-- OTP Error Message -->
                    <p id="otpError" class="text-[#0062FF] font-bold text-[14px] text-center mb-1 hidden animate__animated animate__shakeX"></p>

                    <!-- Timer & Resend -->
                    <div class="flex flex-col items-center gap-1 mt-0">
                        <span id="otpTimer" class="text-[15px] font-black text-[#0062FF] font-bricolage">60s</span>
                        <button id="resendOtpBtn" onclick="sendOtpRequest()" class="hidden text-[14px] font-black text-[#0A9800] underline decoration-solid underline-offset-[3px] transition-all hover:text-[#087a00] disabled:opacity-40 disabled:no-underline font-bricolage">@Lang.millions_request_new_otp</button>
                    </div>
        
                    <!-- Action Buttons: Cancel / Confirm -->
                    <div class="grid grid-cols-2 gap-3 w-full mt-2">
                        <button onclick="hideOtpModal()" class="bg-[#FF0000] text-white py-[12px] rounded-[16px] font-[900] text-[17px] shadow-[0_8px_15px_rgba(255,0,0,0.2)] active:scale-95 transition-all tracking-wide">@Lang.millions_cancel</button>
                        <button id="otpConfirmBtn" disabled onclick="finalizePurchase(this)" class="bg-[#0A9800] text-white py-[12px] rounded-[16px] font-[900] text-[17px] shadow-[0_8px_15px_rgba(10,152,0,0.2)] active:scale-95 transition-all tracking-wide disabled:opacity-50 disabled:grayscale disabled:cursor-not-allowed">@Lang.millions_confirm</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@section Scripts {
    <script>

        const maxBalls = @(Model.termType == Constants.PIC10_BASIC_CODE ? 10 : (Model.termType == Constants.Millions_CODE ? 6 : (Model.termType == Constants.PIC10_BIGSMALL_CODE ? 13 : 15)));
        const isFreeTicketMode = @(isFreeTicketMode ? "true" : "false");
        const hasFreeTicketPromotion = @(hasFreeTicketPromotion ? "true" : "false");
        const freeTicketPromotionCode = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(freeTicketPromotionCode));

        function reindexTickets() {
            $(".ticket-card").each(function(index) {
                $(this).find(".ticket-index").text(index + 1);
            });
        }

        function removeEntry(btn) {
            var card = $(btn).closest('.ticket-card');
            card.addClass('animate__animated animate__fadeOutRight animate__faster');
            setTimeout(function() {
                card.remove();
                reindexTickets();
                updateTotalPrice();
            }, 300);
        }

        function randomizeTicket(btn) {
            var icon = $(btn).find('i');
            icon.addClass('fa-spin');
            
            var card = $(btn).closest('.ticket-card');
            var balls = card.find('.ball-circle');
            
            // Generate unique random numbers
            var numbers = [];
            if ("@Model.termType" === "@Constants.Millions_CODE") {
                // First 5 standard balls (1-70)
                while(numbers.length < 5){
                    var r = Math.floor(Math.random() * 70) + 1;
                    if(numbers.indexOf(r) === -1) numbers.push(r);
                }
                numbers.sort((a, b) => a - b);
                
                // 6th Mega Ball (1-24)
                var mb = Math.floor(Math.random() * 24) + 1;
                numbers.push(mb);
            } else {
                while(numbers.length < maxBalls){
                    var r = Math.floor(Math.random() * 80) + 1;
                    if(numbers.indexOf(r) === -1) numbers.push(r);
                }
                numbers.sort((a, b) => a - b);
            }
            
            // Update balls with staggered animation
            balls.each(function(index) {
                var ball = $(this);
                setTimeout(function() {
                    var formattedNum = numbers[index].toString().padStart(2, '0');
                    ball.removeClass('ball-empty').addClass('ball-filled').text(formattedNum);
                    ball.addClass('animate__animated animate__flipInY');
                    
                    if(index === maxBalls - 1) {
                        setTimeout(() => {
                            icon.removeClass('fa-spin');
                            // Replace button with Edit/Delete group
                            $(btn).hide();
                            card.find('.edit-delete-group').removeClass('hidden').addClass('animate__animated animate__fadeInRight animate__faster');
                            updateTotalPrice();
                        }, 300);
                    }
                }, index * 40);
            });
        }

        function clearTicket(btn) {
            var card = $(btn).closest('.ticket-card');
            var balls = card.find('.ball-circle');
            
            balls.removeClass('ball-filled animate__animated animate__flipInY shadow-inner').addClass('ball-empty').text('');
            
            // Hide Edit/Delete group and show Rand button
            card.find('.edit-delete-group').addClass('hidden');
            card.find('.rand-btn').show().addClass('animate__animated animate__fadeInLeft animate__faster');
            
            updateTotalPrice();
        }

        // Open Number Picker Modal
        var activeBall = null;
        var activeTicketCard = null;
        var selectedNumbers = []; // For Edit mode, this will be an array of fixed size with nulls
        var isMultiMode = false;

        function editFullTicket(btn) {
            isMultiMode = true;
            activeTicketCard = $(btn).closest('.ticket-card');
            activeBall = null;
            
            // Initialize fixed slots for slot-based editing
            selectedNumbers = new Array(maxBalls).fill(null);
            let existing = [];
            activeTicketCard.find('.ball-filled').each(function() {
                var num = $(this).text().trim();
                if(num) existing.push(num);
            });
            
            // Initial fill from left to right
            existing.forEach((num, idx) => {
                if(idx < maxBalls) selectedNumbers[idx] = num;
            });

            openNumberPicker(true);
        }

        function openNumberPicker(isMulti) {
            var modal = $("#numberPickerModal");
            var grid = $("#numberGrid");
            var title = $("#modalTitle");
            var countArea = $(".selection-count-area");
            var confirmBtn = $("#confirmBtn");
            
            grid.empty();
            if (isMulti) {
                title.text("Edit Ticket");
                countArea.removeClass('hidden');
                confirmBtn.removeClass('hidden').text("@Lang.confirm");
            } else {
                title.text("Pick Number");
                countArea.addClass('hidden');
                confirmBtn.removeClass('hidden').text("@Lang.confirm");
            }
            
            updateSelectionCount(); 
            liveUpdateTicket();

            // Focus card: append a tall spacer so even the last ticket can scroll up
            // above the number-picker sheet (a flex column container does not honor
            // padding-bottom as scrollable space), then bring the card to the top.
            if (activeTicketCard && activeTicketCard.length) {
                var container = $("#ticketContainer");
                $("#editScrollSpacer").remove();
                container.append('<div id="editScrollSpacer" aria-hidden="true" style="height:100vh;flex-shrink:0;"></div>');
                var scrollPos = activeTicketCard.offset().top - container.offset().top + container.scrollTop();
                container.stop().animate({ scrollTop: scrollPos - 15 }, 500);
            }

            var isMillions = "@Model.termType" === "@Constants.Millions_CODE";
            
            if (isMillions) {
                // Millions Split UI: 1-70 (cols-7) | Divider | 1-24 (cols-3)
                var splitHtml = `
                    <div class="flex gap-3 h-full">
                         <!-- Left: Standard (1-70) -->
                         <div class="flex-1 flex flex-col h-full min-w-0">
                              <span class="text-[10px] font-black text-blue-600 mb-1 uppercase tracking-wider shrink-0">Standard (1-70)</span>
                              <div class="flex-1 overflow-y-auto grid grid-cols-7 gap-1 pr-1 pb-2" id="standardGrid" style="scrollbar-width: thin; scrollbar-color: #0062FF transparent;"></div>
                         </div>
                         <!-- Divider -->
                         <div class="w-[1px] bg-gray-300 self-stretch my-1 shrink-0"></div>
                         <!-- Right: Mega Ball (1-24) -->
                         <div class="w-[105px] flex flex-col h-full shrink-0">
                              <span class="text-[10px] font-black text-red-600 mb-1 uppercase tracking-wider shrink-0 text-center">Mega (1-24)</span>
                              <div class="flex-1 overflow-y-auto grid grid-cols-3 gap-1 pl-1 pb-2" id="megaGrid" style="scrollbar-width: thin; scrollbar-color: #E3132D transparent;"></div>
                         </div>
                    </div>
                `;
                grid.append(splitHtml);
                
                var standardContainer = $("#standardGrid");
                var megaContainer = $("#megaGrid");
                
                // Populate Standard (1-70)
                for (var i = 1; i <= 70; i++) {
                    var formatted = i.toString().padStart(2, '0');
                    var isSelected = selectedNumbers.slice(0, 5).includes(formatted);
                    var btnClass = isSelected 
                        ? 'bg-[#0062FF] text-white shadow-sm' 
                        : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-100';
                    
                    standardContainer.append(`<button type="button" class="std-num-btn w-[26px] h-[26px] rounded-full font-black text-[9.5px] transition-all flex items-center justify-center ${btnClass}">${formatted}</button>`);
                }
                
                // Populate Mega (1-24)
                for (var i = 1; i <= 24; i++) {
                    var formatted = i.toString().padStart(2, '0');
                    var isSelected = selectedNumbers[5] === formatted;
                    var btnClass = isSelected 
                        ? 'bg-[#E3132D] text-white shadow-sm' 
                        : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-100';
                    
                    megaContainer.append(`<button type="button" class="mega-num-btn w-[26px] h-[26px] rounded-full font-black text-[9.5px] transition-all flex items-center justify-center ${btnClass}">${formatted}</button>`);
                }
                
                // Standard Grid Click Handler
                standardContainer.on('click', '.std-num-btn', function(e) {
                    e.preventDefault();
                    var $btn = $(this);
                    var picked = $btn.text().trim();
                    
                    if (isMultiMode) {
                        var stdSelected = selectedNumbers.slice(0, 5);
                        if (stdSelected.includes(picked)) {
                            // Deselect
                            let idx = selectedNumbers.indexOf(picked);
                            if (idx !== -1 && idx < 5) selectedNumbers[idx] = null;
                            $btn.removeClass('bg-[#0062FF] text-white shadow-sm').addClass('bg-white text-gray-700 border border-gray-100');
                        } else {
                            // Select standard ball (first empty slot in 0-4)
                            let emptyIdx = -1;
                            for (var k = 0; k < 5; k++) {
                                if (selectedNumbers[k] === null) {
                                    emptyIdx = k;
                                    break;
                                }
                            }
                            if (emptyIdx !== -1) {
                                selectedNumbers[emptyIdx] = picked;
                                $btn.addClass('bg-[#0062FF] text-white shadow-sm').removeClass('bg-white text-gray-700 border border-gray-100');
                            }
                        }
                        liveUpdateTicket();
                    }
                    updateSelectionCount();
                });
                
                // Mega Grid Click Handler
                megaContainer.on('click', '.mega-num-btn', function(e) {
                    e.preventDefault();
                    var $btn = $(this);
                    var picked = $btn.text().trim();
                    
                    if (isMultiMode) {
                        if (selectedNumbers[5] === picked) {
                            // Deselect Mega Ball
                            selectedNumbers[5] = null;
                            $btn.removeClass('bg-[#E3132D] text-white shadow-sm').addClass('bg-white text-gray-700 border border-gray-100');
                        } else {
                            // Overwrite Mega Ball
                            selectedNumbers[5] = picked;
                            megaContainer.find('.mega-num-btn').removeClass('bg-[#E3132D] text-white shadow-sm').addClass('bg-white text-gray-700 border border-gray-100');
                            $btn.addClass('bg-[#E3132D] text-white shadow-sm').removeClass('bg-white text-gray-700 border border-gray-100');
                        }
                        liveUpdateTicket();
                    }
                    updateSelectionCount();
                });
                
            } else {
                // Default Pick 10 UI: 1-80 Grid
                var normalHtml = `<div class="grid grid-cols-10 gap-1.5 w-full pb-2 h-full overflow-y-auto" id="normalGrid"></div>`;
                grid.append(normalHtml);
                var normalContainer = $("#normalGrid");
                
                for (var i = 1; i <= 80; i++) {
                    var formatted = i.toString().padStart(2, '0');
                    var isSelected = selectedNumbers.includes(formatted);
                    
                    var btnClass = isSelected 
                        ? 'bg-[#0062FF] text-white shadow-md scale-105 active-num' 
                        : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-100';
                    
                    normalContainer.append(`<button type="button" class="num-btn w-8 h-8 rounded-full font-black text-[11px] transition-all focus:outline-none flex items-center justify-center ${btnClass}">${formatted}</button>`);
                }
                
                normalContainer.on('click', '.num-btn', function(e) {
                    e.preventDefault();
                    var $btn = $(this);
                    var picked = $btn.text().trim();
                    
                    if (isMultiMode) {
                        if (selectedNumbers.includes(picked)) {
                            let idx = selectedNumbers.indexOf(picked);
                            if (idx !== -1) selectedNumbers[idx] = null;
                            $btn.removeClass('bg-[#0062FF] text-white shadow-md scale-105 active-num').addClass('bg-white text-gray-700 border border-gray-100');
                        } else {
                            let firstEmpty = selectedNumbers.indexOf(null);
                            if (firstEmpty !== -1) {
                                selectedNumbers[firstEmpty] = picked;
                                $btn.addClass('bg-[#0062FF] text-white shadow-md scale-105 active-num').removeClass('bg-white text-gray-700 border border-gray-100');
                            }
                        }
                        liveUpdateTicket();
                    }
                    updateSelectionCount();
                });
            }

            modal.removeClass('hidden').addClass('flex');
            modal.find('.modal-content').removeClass('animate__zoomOut').addClass('animate__zoomIn');
        }

        function updateSelectionCount() {
            var count = selectedNumbers.filter(n => n !== null && n !== "").length;
            $("#selectionCount").text(count);
            $("#maxSelectionCount").text(maxBalls);
            var isValid = isMultiMode ? (count === maxBalls) : (count === 1);
            if (isValid) {
                $("#confirmBtn").prop('disabled', false).removeClass('opacity-50 cursor-not-allowed').addClass('cursor-pointer');
            } else {
                $("#confirmBtn").prop('disabled', true).addClass('opacity-50 cursor-not-allowed').removeClass('cursor-pointer');
            }
        }

        function liveUpdateTicket() {
            if (!activeTicketCard) return;
            var balls = activeTicketCard.find('.ball-circle');
            
            if (isMultiMode) {
                // Update Ticket Card balls
                for(var i=0; i < maxBalls; i++){
                    var val = selectedNumbers[i];
                    if (i < balls.length) {
                        var tBall = $(balls[i]);
                        if (val) {
                            tBall.removeClass('ball-empty').addClass('ball-filled').text(val);
                        } else {
                            tBall.removeClass('ball-filled').addClass('ball-empty').text('');
                        }
                    }
                }
                
                // Toggle Rand/Edit button visibility
                if (selectedNumbers.filter(n => n !== null && n !== "").length > 0) {
                     activeTicketCard.find('.rand-btn').hide();
                     activeTicketCard.find('.edit-delete-group').removeClass('hidden').show();
                } else {
                     activeTicketCard.find('.rand-btn').show();
                     activeTicketCard.find('.edit-delete-group').addClass('hidden');
                }
                
                updateTotalPrice();
            }
        }

        // All immediate jQuery event bindings must wait for DOM + jQuery to be ready
        document.addEventListener("DOMContentLoaded", function() {
            // Click on a ball (filled or empty) to edit the full ticket
            $(document).on('click', '.ball-filled, .ball-empty', function() {
                editFullTicket(this);
            });

            updateTotalPrice();

            // Confirm button handler
            $(document).off('click', '#confirmBtn').on('click', '#confirmBtn', function(e) {
                e.preventDefault();
                // Check non-null count
                var count = selectedNumbers.filter(n => n !== null && n !== "").length;
                if (count === 0) return;

                if (isMultiMode && activeTicketCard && activeTicketCard.length > 0) {
                    // Double check validation for Mega Ball before confirming
                    if ("@Model.termType" === "@Constants.Millions_CODE") {
                        var mbVal = selectedNumbers[5];
                        if (mbVal) {
                            var mbValInt = parseInt(mbVal);
                            if (mbValInt < 1 || mbValInt > 24) {
                                showNotification("🎱 @Lang.millions_megaball_invalid_title\n@Lang.millions_megaball_invalid_desc", "warning");
                                return;
                            }
                        }
                    }

                    // Keep exact selected order, do not sort!
                    var finalSorted = [];
                    if ("@Model.termType" === "@Constants.Millions_CODE") {
                        var first5 = selectedNumbers.slice(0, 5).filter(n => n !== null && n !== "");
                        var mb = selectedNumbers[5];
                        finalSorted = first5;
                        if (mb) finalSorted.push(mb);
                    } else {
                        finalSorted = selectedNumbers.filter(n => n !== null && n !== "");
                    }
                    
                    var balls = activeTicketCard.find('.ball-circle');
                    balls.removeClass('ball-filled').addClass('ball-empty').text('');

                    finalSorted.forEach((num, index) => {
                        if (index < balls.length) {
                            $(balls[index]).removeClass('ball-empty').addClass('ball-filled').text(num);
                            $(balls[index]).addClass('animate__animated animate__pulse');
                            setTimeout(() => $(balls[index]).removeClass('animate__animated animate__pulse'), 500);
                        }
                    });

                    activeTicketCard.find('.rand-btn').hide();
                    activeTicketCard.find('.edit-delete-group').removeClass('hidden').show();
                    
                    updateTotalPrice();
                } else if (!isMultiMode && activeBall && activeBall.length > 0) {
                    // Single mode: Update only the active ball
                    activeBall.text(selectedNumbers[0]).removeClass('ball-empty').addClass('ball-filled');
                    activeBall.addClass('animate__animated animate__pulse');
                    setTimeout(() => activeBall.removeClass('animate__animated animate__pulse'), 500);
                    
                    var card = activeBall.closest('.ticket-card');
                    var filledBalls = card.find('.ball-filled').length;
                    if (filledBalls > 0) {
                        card.find('.rand-btn').hide();
                        card.find('.edit-delete-group').removeClass('hidden').show();
                    } else {
                        card.find('.rand-btn').show();
                        card.find('.edit-delete-group').addClass('hidden');
                    }
                    
                    updateTotalPrice();
                }

                closeNumberPicker();
            });
        });

        function closeNumberPicker() {
            var modal = $("#numberPickerModal");
            modal.find('.modal-content').removeClass('animate__zoomIn').addClass('animate__zoomOut');
            setTimeout(() => {
                modal.removeClass('flex').addClass('hidden');
                // Remove the temporary scroll spacer
                $("#editScrollSpacer").remove();
                // Reset state
                activeBall = null;
                activeTicketCard = null;
            }, 200);
        }

        function updateTotalPrice() {
            var filledTickets = 0;
            $(".ticket-card").each(function() {
                if ($(this).find(".ball-filled").length === maxBalls) {
                    filledTickets++;
                }
            });
            const pricePerTicket = hasFreeTicketPromotion
                ? 0
                : @(Model.termType == Constants.PIC10_BASIC_CODE ? "10" : (Model.termType == Constants.Millions_CODE ? "20" : "50"));
            $("#totalPrice").text(formatMoneyV2(filledTickets * pricePerTicket));
            $("#totalTicketCount").text(filledTickets);
        }

        function addNewTicket() {
            if (isFreeTicketMode) return;

            var container = $("#ticketContainer");
            var wrapper = $("#addButtonWrapper");
            var currentIndex = $(".ticket-card").length + 1;
            
            var ballsHtml = '';
            var isMillions = @(Model.termType == Constants.Millions_CODE ? "true" : "false");
            for (var i = 0; i < maxBalls; i++) {
                var isMbBall = isMillions && i === 5;
                var mbIndicator = isMbBall ? '<div class="absolute -bottom-[6px] -right-[4px] bg-[#FFD700] text-black text-[8.5px] font-black px-[2.5px] py-[1.5px] rounded-[3px] shadow-sm leading-none z-10 border border-[#EAA800]">MB</div>' : '';
                ballsHtml += '<div class="relative w-fit"><div class="ball-circle ball-empty' + (isMbBall ? ' ball-mb-circle' : '') + '"></div>' + mbIndicator + '</div>';
            }

            var ticketHtml = `
                <div class="ticket-card relative group active:bg-gray-50 transition-colors cursor-pointer animate__animated animate__fadeInUp animate__faster">
                    <button onclick="removeEntry(this)" class="absolute -right-2 top-1 w-7 h-7 bg-[#FF0000] text-white rounded-full flex items-center justify-center text-[11px] shadow-sm z-[10] hover:bg-red-700 transition-all border-2 border-red-600">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                    <div class="absolute left-2 top-4 w-9 h-9 rounded-full border-[3px] border-white flex items-center justify-center text-white font-black text-sm shadow-md ticket-index">${currentIndex}</div>
                    <div class="flex flex-col gap-1 pl-8">
                        <span class="text-[16px] font-extrabold text-[#333]">@Lang.millions_select_10_lucky_numbers</span>
                        <div class="flex items-center gap-4">
                            <div class="grid grid-cols-6 gap-y-2 gap-x-1 flex-1">
                                ${ballsHtml}
                            </div>
                            <div class="w-[90px] action-area flex flex-col gap-2">
                                 <button onclick="randomizeTicket(this)" class="rand-btn w-full bg-[#2B83F2] text-white flex items-center justify-center gap-1.5 py-1.5 rounded-xl font-extrabold text-[11px] shadow-sm active:scale-95 transition-all">
                                     <i class="fa-solid fa-arrows-rotate text-[10px]"></i> @Lang.Random
                                 </button>
                                 <div class="edit-delete-group hidden flex flex-col gap-2">
                                     <button onclick="editFullTicket(this)" class="w-full bg-[#16A34A] text-white flex items-center justify-center gap-1.5 py-1.5 rounded-xl font-black text-[12px] shadow-sm active:scale-95 transition-all">
                                         <img src="/Millions/img/icons/icon_edit.png" onerror="this.style.display='none'" class="w-[16px] h-[16px] object-contain"> @Lang.millions_edit
                                     </button>
                                     <button onclick="clearTicket(this)" class="w-full bg-[#A855F7] text-white flex items-center justify-center gap-1.5 py-1.5 rounded-xl font-black text-[12px] shadow-sm active:scale-95 transition-all">
                                         <img src="/Millions/img/icons/icon_delete.png" onerror="this.style.display='none'" class="w-[16px] h-[16px] object-contain"> @Lang.millions_delete
                                     </button>
                                 </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            $(ticketHtml).insertBefore(wrapper);
            container.animate({ scrollTop: container.prop("scrollHeight") }, 300);
        }

        // --- Order Summary Modal Logic ---
        // --- Payment Preparation & Order Summary Logic ---

        let pendingPaymentRequest = null;

        let pendingTickets = [];
        let currentChannelPayment = '@Constants.BASIC_WALLET_TICKET';
        let isPreparingCheckout = false;
        let isSendingOtp = false;
        let isFinalizingPurchase = false;
        let paymentClickArmedAt = 0;

        function armPaymentClick(event) {
            if (event && event.isTrusted === true) paymentClickArmedAt = Date.now();
        }

        function armPaymentKey(event) {
            if (event && event.isTrusted === true && (event.key === "Enter" || event.key === " ")) {
                paymentClickArmedAt = Date.now();
            }
        }


        function preparePayment(event) {
            // Never prepare or confirm a ticket during page initialization.
            // A trusted pointer/key action on this button must immediately precede the click.
            const hasFreshPaymentIntent = paymentClickArmedAt > 0
                && Date.now() - paymentClickArmedAt <= 1500;
            paymentClickArmedAt = 0;
            if (!event || event.type !== "click" || event.isTrusted !== true || !hasFreshPaymentIntent) return;

            const isBSMode = @(Model.termType == Constants.PIC10_BIGSMALL_CODE || Model.termType == Constants.PIC10_ODDEVEN_CODE ? "true" : "false");
            const tickets = [];

            if (isBSMode) {
                if (!bsChoice) {
                    showNotification("Please select a choice first.", "warning");
                    return;
                }
                
                let bsCode = "";
                if ('@Model.termType' === '@Constants.PIC10_BIGSMALL_CODE') {
                    bsCode = (bsChoice === 'big') ? "B" : "S";
                } else {
                    bsCode = (bsChoice === 'big') ? "O" : "E"; // Odd = O, Even = E
                }

                tickets.push({
                    code: bsCode,
                    money: "50"
                });
            } else {
                $(".ticket-card").each(function() {
                    if (isFreeTicketMode && tickets.length >= 1) return false;

                    const balls = $(this).find(".ball-filled");
                    if (balls.length === maxBalls) {
                        const selectedNumbers = [];
                        balls.each(function() { selectedNumbers.push($(this).text().trim()); });
                        const itemPrice = "@(Model.termType == Constants.PIC10_BASIC_CODE ? "10" : (Model.termType == Constants.Millions_CODE ? "20" : "50"))";
                        tickets.push({
                            code: selectedNumbers.join(','),
                            money: itemPrice
                        });
                    }
                });

                if (tickets.length === 0) {
                    showNotification("@Lang.millions_ticket_not_valid", "warning");
                    return;
                }
            }


            pendingPaymentRequest = {
                gameId: "@Model.termType",
                ticket: tickets
            };

            showOrderSummary(null, tickets);

            pendingTickets = tickets;
            if (hasFreeTicketPromotion) {
                selectPaymentChannel('@Constants.BASIC_WALLET_TICKET');
                return;
            }
            $("#paymentChannelModal").removeClass("hidden").addClass("flex");
        }

        function hidePaymentChannelModal() {
            $("#paymentChannelModal").removeClass("flex").addClass("hidden");
        }

        function selectPaymentChannel(channelPayment) {
            if (isPreparingCheckout) return;
            isPreparingCheckout = true;

            currentChannelPayment = channelPayment;
            hidePaymentChannelModal();

            const requestData = {
                gameId: isFreeTicketMode ? "@Constants.Millions_CODE" : "@Model.termType",
                ticket: pendingTickets,
                channelPayment: channelPayment,
                promotionCode: isFreeTicketMode ? freeTicketPromotionCode : null
            };

            $.ajax({
                url: subDomain + '@Url.Action("ConfirmTicketData", "Home")',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(requestData),
                success: function(data) {

                    if (data.responseCode === "0" || data.responseCode === "0000") {
                        showOrderSummary(data, pendingTickets);
                    } else {
                        showNotification(data.responseMessage || "Confirmation failed", data.responseCode);
                    }
                },
                error: function(err) {

                    showNotification("Network error occurred.", "warning");
                },
                complete: function() {
                    isPreparingCheckout = false;
                }
            });

        }

        let currentTransId = null;

        function showOrderSummary(apiData, localTickets) {
            currentTransId = apiData ? apiData.transId : null;
            const summaryModal = $("#orderSummaryModal");
            const summaryList = $("#summaryTicketList");
            summaryList.empty();

            const displayTickets = (apiData && apiData.ticket) ? apiData.ticket : (localTickets || []);
            if (!displayTickets || !Array.isArray(displayTickets)) {
                console.warn("No tickets found to display in summary.");
                return;
            }

            displayTickets.forEach((t, index) => {
                const numbers = t.code.split(',');
                let contentHtml = '';
                
                if (numbers.length > 1) {
                    const isMillionsGame = "@Model.termType" === "@Constants.Millions_CODE";
                    let numbersBalls = '';
                    numbers.forEach((n, ni) => {
                        var isMbBall = isMillionsGame && ni === numbers.length - 1;
                        var ballBg = isMbBall
                            ? 'background: radial-gradient(circle at 50% 50%, #0062ff 0%, #0062ff 60%, #0149f0 75%, #0231e0 85%, #0218d1 92%, #0300c2 100%); box-shadow: inset 0 0 6px 2px rgba(0,24,209,0.5), 0 4px 10px rgba(2,24,209,0.3);'
                            : 'background: linear-gradient(135deg, #FF3D63 0%, #E3132D 60%, #BA0F21 100%); box-shadow: 0 4px 10px rgba(186,15,33,0.3);';
                        numbersBalls += `<div class="w-7 h-7 rounded-full flex items-center justify-center text-white text-[11px] font-black" style="${ballBg} border: 1px solid rgba(255, 255, 255, 0.3); text-shadow: 0px 1px 2px rgba(0,0,0,0.1); transition: transform 0.2s;">${n.trim()}</div>`;
                    });
                    var summaryGridCols = isMillionsGame ? 'grid-cols-6' : 'grid-cols-5';
                    contentHtml = `<div class="grid ${summaryGridCols} gap-y-2 gap-x-1 relative z-10 px-1 justify-items-center">${numbersBalls}</div>`;
                } else {
                    const isBS = @(Model.termType == Constants.PIC10_BIGSMALL_CODE ? "true" : "false");
                    const isFirstChoice = (numbers[0] === 'B' || numbers[0] === 'O');
                    const label = isFirstChoice ? (isBS ? "Big" : "Odd") : (isBS ? "Small" : "Even");
                    const color = isFirstChoice ? (isBS ? "#A2FF00" : "#FFC700") : (isBS ? "#FF4157" : "#B33BD0");
                    contentHtml = `<div class="w-full flex justify-center"><span class="text-[28px] font-black italic uppercase" style="-webkit-text-stroke: 1px #000; color: ${color};">${label}</span></div>`;
                }

                const itemHtml = `
                    <div class="flex items-center gap-3">
                        <div class="flex-1 rounded-2xl p-3 relative overflow-hidden flex flex-col gap-2 min-h-[80px] justify-center shadow-sm" 
                             style="background: white; border: 1.5px solid #0062FF;">
                            ${contentHtml}
                        </div>
                        <div class="w-24 shrink-0 bg-white border border-gray-200 rounded-2xl p-2.5 flex items-center justify-center shadow-sm">
                            <div class="flex items-baseline gap-0.5">
                                <span class="text-[20px] font-black text-black">${formatMoneyV2(hasFreeTicketPromotion ? 0 : t.money)}</span>
                                <span class="text-[12px] font-black text-[#0062FF]">HTG</span>
                            </div>
                        </div>
                    </div>
                `;
                summaryList.append(itemHtml);
            });

            $("#summaryTotalCount").text(displayTickets.length);

            const totalMoney = apiData
                ? (apiData.totalMoneyPayment || apiData.totalMoney || "0")
                : displayTickets.reduce((sum, ticket) => sum + (parseInt(ticket.money, 10) || 0), 0);

            const totalMoney = hasFreeTicketPromotion
                ? "0"
                : (apiData.totalMoneyPayment || apiData.totalMoney || "0");

            $("#summaryTotalAmount").text(formatMoneyV2(totalMoney));

            summaryModal.removeClass("hidden").addClass("flex");
        }

        function hideOrderSummary() {
            $("#orderSummaryModal").removeClass("flex").addClass("hidden");
        }

        function confirmCheckout(btn) {

            if (!pendingPaymentRequest) {
                showNotification("@Lang.millions_ticket_not_valid", "warning");
                return;
            }

            if (isSendingOtp) return;

            if (currentChannelPayment === '@Constants.NATCASH_WALLET_TICKET') {
                showOtpModal(true);
                return;
            }

            isSendingOtp = true;
            const originalText = $(btn).html();
            $(btn).prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin mr-2"></i>Processing...');


            $("#paymentSourceModal").removeClass("hidden").addClass("flex");
        }

        function hidePaymentSourceModal() {
            $("#paymentSourceModal").removeClass("flex").addClass("hidden");
        }

        function selectPaymentSource(paymentSource, btn) {
            const originalText = $(btn).html();
            const sourceButtons = $(".payment-source-button");
            sourceButtons.prop('disabled', true);
            $(btn).html('<i class="fa-solid fa-spinner fa-spin mr-2"></i>Processing...');

            $.ajax({
                url: subDomain + '@Url.Action("PrepareTicketPayment", "Home")',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    paymentSource: paymentSource,
                    ticketData: pendingPaymentRequest
                }),
                success: function(data) {
                    sourceButtons.prop('disabled', false);
                    $(btn).html(originalText);
                    if (data.responseCode !== "0") {
                        showNotification(data.responseMessage || "Confirmation failed", data.responseCode);
                        return;
                    }

                    currentTransId = data.transId;

                    if (paymentSource === '@Constants.NATCASH_WALLET_TICKET') {
                        if (data.redirectUrl) {
                            window.location.href = data.redirectUrl;
                        } else {
                            showNotification(data.responseMessage || "Unable to open wallet payment.", "warning");
                        }
                        return;
                    }

                    sendOtpAfterTicketConfirmation();
                },
                error: function() {
                    sourceButtons.prop('disabled', false);
                    $(btn).html(originalText);
                    showNotification("Network error occurred.", "warning");
                }
            });
        }

        function sendOtpAfterTicketConfirmation() {
            $.ajax({
                url: subDomain + '@Url.Action("SendOTP", "Home")',
                type: 'POST',
                success: function(data) {
                    if (data.responseCode === "0") {

                        hidePaymentSourceModal();
                        showOtpModal();

                        showOtpModal(false);

                    } else {
                        showNotification(data.responseMessage || "Failed to send OTP", data.responseCode);
                    }
                },
                error: function() {
                    showNotification("Network error occurred.", "warning");
                },
                complete: function() {
                    isSendingOtp = false;
                }
            });
        }

        let otpInterval;
        function showOtpModal(isWalletPin) {
            hideOrderSummary();
            $("#otpModal").removeClass("hidden").addClass("flex");
            $("#otpInputs input").val("");
            $("#walletPinInput").val("").attr("type", "password");
            $("#walletPinEye").attr("class", "fa-solid fa-eye");
            $("#otpConfirmBtn").prop('disabled', true);
            $("#otpError").addClass("hidden").text("");
            
            // Map game type to readable name & image
            let gameTypeStr = "@Model.termType";
            let displayName = gameTypeStr === "@Constants.Millions_CODE" ? "@Lang.millions" : "Basic Pick 10";
            let imgSrc = "";
            
            if (gameTypeStr === "@Constants.PIC10_BIGSMALL_CODE") {
                // Get the specific choice from summary
                let firstTicketText = $("#summaryTicketList").find("span.font-black").first().text().trim();
                if (firstTicketText) {
                    displayName = firstTicketText.charAt(0).toUpperCase() + firstTicketText.slice(1).toLowerCase(); // Normalize to "Big" or "Small"
                } else {
                    displayName = "Big / Small";
                }
            } else if (gameTypeStr === "@Constants.PIC10_ODDEVEN_CODE") {
                let firstTicketText = $("#summaryTicketList").find("span.font-black").first().text().trim();
                if (firstTicketText) {
                    displayName = firstTicketText.charAt(0).toUpperCase() + firstTicketText.slice(1).toLowerCase(); // Normalize to "Odd" or "Even"
                } else {
                    displayName = "Odd / Even";
                }
            }
            
            // Determine color based on game type
            let typeColorClass = "text-purple-700"; // default
            if (gameTypeStr === "@Constants.PIC10_BASIC_CODE") typeColorClass = "text-[#0062FF]";
            else if (gameTypeStr === "@Constants.Millions_CODE") typeColorClass = "text-[#0062FF]";
            else if (gameTypeStr === "@Constants.PIC10_BIGSMALL_CODE") typeColorClass = "text-[#0A9800]";
            else if (gameTypeStr === "@Constants.PIC10_ODDEVEN_CODE") typeColorClass = "text-[#9333ea]";

            // Hide image for now and use the beautiful text style as requested
            $("#otpTicketTypeImg").hide();
            $("#otpTicketTypeContainer").find("span").remove();
            $("#otpTicketTypeContainer").append(`<span class='text-[17px] font-[900] ${typeColorClass} italic'>${displayName}</span>`);
            
            $("#otpTotalAmount").text($("#summaryTotalAmount").text());
            if (isWalletPin) {
                $("#paymentCodeInstruction").text('@Html.Raw(Lang.payment_wallet_pin_instruction.Replace("'", "\\'"))');
                $("#otpInputs").addClass("hidden");
                $("#walletPinContainer").removeClass("hidden");
                $("#otpTimer, #resendOtpBtn").addClass("hidden");
                clearInterval(otpInterval);
                $("#walletPinInput").focus();
            } else {
                $("#paymentCodeInstruction").text('@Html.Raw(Lang.millions_otp_instruction.Replace("'", "\\'"))');
                $("#walletPinContainer").addClass("hidden");
                $("#otpInputs").removeClass("hidden");
                startOtpTimer(60);
                $("#otp1").focus();
            }
        }

        function updateWalletPinState() {
            $("#otpConfirmBtn").prop('disabled', $("#walletPinInput").val().length === 0);
            $("#otpError").addClass("hidden").text("");
        }

        function toggleWalletPinVisibility() {
            const input = $("#walletPinInput");
            const showPin = input.attr("type") === "password";
            input.attr("type", showPin ? "text" : "password");
            $("#walletPinEye").attr("class", showPin ? "fa-solid fa-eye-slash" : "fa-solid fa-eye");
            input.focus();
        }

        // Add backspace support for OTP inputs
        $("#otpInputs input").on("keyup", function() {
            let otp = "";
            $("#otpInputs input").each(function() { otp += $(this).val(); });
            $("#otpConfirmBtn").prop('disabled', otp.length < 6);
        });

        $("#otpInputs input").on("keydown", function(e) {
            if (e.key === "Backspace" && this.value.length === 0) {
                $(this).prev('input').focus();
            }
        });

        function hideOtpModal() {
            $("#otpModal").removeClass("flex").addClass("hidden");
            clearInterval(otpInterval);
        }

        function startOtpTimer(seconds) {
            let timeLeft = seconds;
            $("#resendOtpBtn").addClass("hidden");
            $("#otpTimer").removeClass("hidden").text(timeLeft + "s");
            clearInterval(otpInterval);
            
            otpInterval = setInterval(() => {
                timeLeft--;
                $("#otpTimer").text(timeLeft + "s");
                if (timeLeft <= 0) {
                    clearInterval(otpInterval);
                    $("#otpTimer").addClass("hidden");
                    $("#resendOtpBtn").removeClass("hidden");
                }
            }, 1000);
        }

        function moveToNext(el, nextId) {
            if (el.value.length >= 1) {
                if (nextId) document.getElementById(nextId).focus();
            }
            
            let otp = "";
            $("#otpInputs input").each(function() { otp += $(this).val(); });
            $("#otpConfirmBtn").prop('disabled', otp.length < 6);

            // Clear error when typing
            $("#otpError").addClass("hidden").text("");
        }

        function sendOtpRequest() {
            // Re-trigger SendOTP
            $.ajax({
                url: subDomain + '@Url.Action("SendOTP", "Home")',
                type: 'POST',
                success: function(data) {
                    if (data.responseCode === "0") {
                        startOtpTimer(60);
                        showNotification("OTP has been resent.", "success");
                    } else {
                        showNotification(data.responseMessage || "Failed to resend OTP", data.responseCode);
                    }
                }
            });
        }

        function showReceiptSuccess(transId, amount, phone, totalTickets, drawDate) {
            // Setup data dynamically
            $("#receiptAmount").text(formatMoneyV2(amount) + " HTG");
            if(phone) $("#receiptPhone").text(phone);
            if(totalTickets) $("#receiptTotalTickets").text(totalTickets);
            if(drawDate) $("#receiptDrawDate").text(drawDate);
            
            let gameTypeStr = "@Model.termType";
            let displayName = "Basic Pick 10";
            if (gameTypeStr === "@Constants.PIC10_BIGSMALL_CODE") displayName = "@Lang.millions_big_small";
            else if (gameTypeStr === "@Constants.PIC10_ODDEVEN_CODE") displayName = "@Lang.millions_odd_even";
            else if (gameTypeStr === "@Constants.Millions_CODE") displayName = "Millions";
            
            $("#receiptGameType").text("@Lang.buy " + displayName);
            $("#receiptTicketCode").text("#" + transId);
            
            let choiceText = "-";
            if (gameTypeStr === "@Constants.PIC10_BIGSMALL_CODE" || gameTypeStr === "@Constants.PIC10_ODDEVEN_CODE") {
                choiceText = $("#summaryTicketList .flex.items-center span.font-black").first().text().trim();
            } else {
                choiceText = gameTypeStr === "@Constants.Millions_CODE" ? "Millions" : "PICK 10";
            }
            $("#receiptChoice").text(choiceText);
            
            // Format current date "dd/MM/yyyy - HH:mm:ss"
            let now = new Date();
            let ds = now.getDate().toString().padStart(2, '0') + '/' + (now.getMonth() + 1).toString().padStart(2, '0') + '/' + now.getFullYear() + ' - ' + now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0') + ':' + now.getSeconds().toString().padStart(2, '0');
            $("#receiptTime").text(ds);

            hideOtpModal();
            $("#receiptSuccessModal").removeClass("hidden").addClass("flex");
        }

        function finalizePurchase(btn) {
            if (isFinalizingPurchase) return;

            const isWalletPayment = currentChannelPayment === '@Constants.NATCASH_WALLET_TICKET';
            let otpCode = isWalletPayment ? $("#walletPinInput").val().trim() : "";
            if (!isWalletPayment) {
                $("#otpInputs input").each(function() { otpCode += $(this).val(); });
            }
            
            if ((isWalletPayment && otpCode.length === 0) || (!isWalletPayment && otpCode.length < 6)) {
                showNotification(isWalletPayment ? '@Html.Raw(Lang.payment_wallet_pin_instruction.Replace("'", "\\'"))' : "Please enter full 6-digit OTP", "warning");
                return;
            }

            isFinalizingPurchase = true;
            const originalText = $(btn).html();
            $(btn).prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin mr-2"></i> ...');

            if (isWalletPayment) {
                submitFinalPurchase(btn, originalText, true, otpCode);
                return;
            }

            // Confirm the OTP first. The final purchase API is called only after
            // this request succeeds for the current prepared transaction.
            $.ajax({
                url: subDomain + '@Url.Action("ConfirmOTP", "Home")',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    otp: otpCode,
                    transIdByTicket: currentTransId
                }),
                success: function(otpResult) {
                    if (otpResult.responseCode === "0" || otpResult.responseCode === "0000") {
                        submitFinalPurchase(btn, originalText, false, null);
                        return;
                    }

                    $(btn).prop('disabled', false).html(originalText);
                    isFinalizingPurchase = false;
                    $("#otpError").text(otpResult.responseMessage || "Invalid OTP").removeClass("hidden");
                    $("#otpInputs input").val("");
                    $("#otp1").focus();
                },
                error: function() {
                    $(btn).prop('disabled', false).html(originalText);
                    isFinalizingPurchase = false;
                    showNotification("Network error occurred during OTP verification.", "warning");
                }
            });
        }

        function submitFinalPurchase(btn, originalText, isWalletPayment, walletPin) {
            const finalData = {
                transIdByTicket: currentTransId,
                gameId: isFreeTicketMode ? "@Constants.Millions_CODE" : "@Model.termType",
                paymentCode: null,
                walletPin: isWalletPayment ? walletPin : null,
                channelPayment: currentChannelPayment
            };

            // This final API is unreachable until ConfirmOTP succeeds (or a wallet PIN is supplied).
            $.ajax({
                url: subDomain + '@Url.Action("ConfirmBuyingTicketV2", "Home")',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(finalData),
                success: function(res) {
                    $(btn).prop('disabled', false).html(originalText);
                    
                    if (res.responseCode === "0" || res.responseCode === "0000") {
                        // Success: Show receipt Modal
                        showReceiptSuccess(res.orderId || currentTransId, $("#summaryTotalAmount").text(), "@(Model.userStatus?.msisdn ?? "-")", $("#summaryTotalCount").text(), "@(currentTerm?.date_random ?? "-")");
                    } else {
                        if (res.responseCode === "-2" || (res.responseMessage && res.responseMessage.includes("System is upgrading"))) {
                             hideOtpModal();
                             showNotification(res.responseMessage || "System is upgrading", res.responseCode);
                        } else {
                             $("#otpError").text(res.responseMessage || "Invalid OTP").removeClass("hidden");
                             if (isWalletPayment) {
                                 $("#walletPinInput").val("").focus();
                             } else {
                                 $("#otpInputs input").val("");
                                 $("#otp1").focus();
                             }
                        }
                    }
                },
                error: function() {
                    $(btn).prop('disabled', false).html(originalText);
                    showNotification("Network error occurred during payment completion.", "warning");
                },
                complete: function() {
                    isFinalizingPurchase = false;
                }
            });
        }

        var systemUpgrading = false;
        function showNotification(message, code) {
            const msgEl = $("#notificationMessage");
            const iconEl = $("#notificationModal img");
            const btnEl = $("#notificationModal button");
            
            if (message && message.includes("\n")) {
                msgEl.html(message.replace(/\n/g, '<br/>'));
            } else {
                msgEl.text(message);
            }
            
            if (code === "-2" || (message && message.includes("System is upgrading"))) {
                systemUpgrading = true;
                btnEl.text("@Lang.login");
            } else {
                systemUpgrading = false;
                btnEl.text("OK");
            }

            // Toggle icon based on type (warning or success)
            const warningIcon = '/Millions/img/modal/warning_icon.png';
            const successIcon = '/Millions/img/modal/success_icon_v2.png';
            const fallbackWarning = 'https://cdn-icons-png.flaticon.com/512/564/564619.png';
            const fallbackSuccess = 'https://cdn-icons-png.flaticon.com/512/190/190411.png';

            if (code === "-2" || code === "warning" || code === "error") {
                iconEl.attr('src', warningIcon);
                iconEl.attr('onerror', `this.src='${fallbackWarning}'`);
            } else {
                iconEl.attr('src', successIcon);
                iconEl.attr('onerror', `this.src='${fallbackSuccess}'`);
            }

            $("#notificationModal").removeClass("hidden").addClass("flex");
        }

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

        // ====== CARD SELECTION GAME LOGIC (BIG/SMALL / ODD/EVEN) ======
        var bsChoice = null; // 'big' or 'small' (reused as 'odd' or 'even')
        const isBigSmall = @(Model.termType == Constants.PIC10_BIGSMALL_CODE ? "true" : "false");
        const themeColor = isBigSmall ? "#0A9800" : "#AA3DC8";
        const labelBig = isBigSmall ? "Big" : "Odd";
        const labelSmall = isBigSmall ? "Small" : "Even";
        const colorBig = isBigSmall ? "#A2FF00" : "#FFC700";
        const colorSmall = isBigSmall ? "#FF4157" : "#B33BD0";

        // Loclized text from resources
        const langSelect = "@Lang.millions_select";
        const langSelected = "@Lang.millions_selected";

        function selectBigSmall(choice) {
            bsChoice = choice;
            var cardBig = document.getElementById('cardBig');
            var cardSmall = document.getElementById('cardSmall');
            var choiceDisplay = document.getElementById('choiceDisplay');

            if (!cardBig || !cardSmall) return;

            if (choice === 'big') {
                // Highlight Big/Odd card with theme glow
                cardBig.style.border = '2px solid ' + themeColor;
                cardBig.style.boxShadow = '0px 0px 12px 0px ' + (isBigSmall ? 'rgba(162, 255, 0, 1)' : 'rgba(179, 59, 208, 0.6)');
                cardBig.querySelector('.bigsmall-btn').textContent = langSelected;
                cardBig.querySelector('.bigsmall-btn').style.background = '#333';

                // Reset Small/Even card
                cardSmall.style.border = '2px solid transparent';
                cardSmall.style.boxShadow = 'none';
                cardSmall.querySelector('.bigsmall-btn').textContent = langSelect;
                cardSmall.querySelector('.bigsmall-btn').style.background = themeColor;

                // Update display
                if (choiceDisplay) {
                    choiceDisplay.textContent = labelBig;
                    choiceDisplay.style.color = colorBig;
                    choiceDisplay.style.webkitTextStroke = '1px #000';
                }
            } else {
                // Highlight Small/Even card with theme glow
                cardSmall.style.border = '2px solid ' + themeColor;
                cardSmall.style.boxShadow = '0px 0px 12px 0px ' + (isBigSmall ? 'rgba(162, 255, 0, 1)' : 'rgba(179, 59, 208, 0.6)');
                cardSmall.querySelector('.bigsmall-btn').textContent = langSelected;
                cardSmall.querySelector('.bigsmall-btn').style.background = '#333';

                // Reset Big/Odd card
                cardBig.style.border = '2px solid transparent';
                cardBig.style.boxShadow = 'none';
                cardBig.querySelector('.bigsmall-btn').textContent = langSelect;
                cardBig.querySelector('.bigsmall-btn').style.background = themeColor;

                // Update display
                if (choiceDisplay) {
                    choiceDisplay.textContent = labelSmall;
                    choiceDisplay.style.color = colorSmall;
                    choiceDisplay.style.webkitTextStroke = '1px #000';
                }
            }
            $("#bsTotalTicketCount").text(1);
            $("#bsTotalPrice").text(formatMoneyV2(50));
        }

        function bsShowPayment(e) {
            preparePayment(e);
        }
    </script>

    <!-- Number Picker Modal (Refined Bottom Sheet) -->
    <div id="numberPickerModal" class="fixed inset-0 bg-black/10 z-[200] hidden items-end justify-center p-0 transition-all">
        <div class="modal-content bg-white w-full md:max-w-[414px] mx-auto shadow-2xl animate__animated animate__slideInUp animate__faster rounded-t-[20px] overflow-hidden">
            <div class="px-4 py-1.5 bg-[#0062FF] text-white flex justify-between items-center relative">
                <div class="flex flex-col">
                    <h3 class="font-black text-[15px] uppercase tracking-wide" id="modalTitle">@Lang.Pick_Number</h3>
                    <div class="selection-count-area">
                        <span class="text-[10px] font-bold text-white/80 uppercase">Selected: <span id="selectionCount" class="text-white">0</span>/<span id="maxSelectionCount">10</span></span>
                    </div>
                </div>
                <button onclick="closeNumberPicker()" class="w-8 h-8 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 transition-all">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>
            
            <style>
                #numberGrid::-webkit-scrollbar { width: 3px; }
                #numberGrid::-webkit-scrollbar-track { background: transparent; }
                #numberGrid::-webkit-scrollbar-thumb { background: #FFD700; border-radius: 10px; }
                #numberGrid { scrollbar-width: thin; scrollbar-color: #FFD700 transparent; }
            </style>
            <div class="p-2 h-[220px] overflow-hidden bg-gray-50 border-b" id="numberGrid">
                 <!-- Populated via JS -->
            </div>
            <div class="p-3 bg-white border-t flex gap-3">
                 <button onclick="closeNumberPicker()" class="flex-1 py-1 bg-gray-100 text-gray-600 rounded-lg font-black text-[12px] active:bg-gray-200 transition-all uppercase">
                     @Lang.millions_back
                 </button>
                 <button id="confirmBtn" class="hidden flex-[2] py-2 bg-[#0062FF] text-white rounded-lg font-black text-[13px] active:bg-[#CC002D] transition-all uppercase shadow-md">
                     @Lang.confirm
                 </button>
            </div>
        </div>
    </div>
    <div id="notificationModal" class="fixed inset-0 z-[300] bg-black/60 flex items-center justify-center hidden px-4 font-bricolage backdrop-blur-sm">
        <div class="w-full max-w-[360px] bg-white rounded-[32px] overflow-hidden flex flex-col items-center px-6 pt-5 pb-6 animate__animated animate__zoomIn animate__faster shadow-2xl relative border border-white/50">
            <!-- Alert Icon -->
            <div class="w-full flex justify-center mb-2 mt-0">
                <img src="/Millions/img/modal/success_icon_v2.png" class="w-full max-w-[240px] h-auto object-contain" alt="Notificaton icon" onerror="this.src='https://cdn-icons-png.flaticon.com/512/190/190411.png'" />
            </div>

            <!-- Message Area -->
            <div class="px-2 text-center mb-5">
                <p id="notificationMessage" class="text-black font-[800] text-[17px] leading-snug">
                    <!-- Message content -->
                </p>
            </div>

            <!-- Action Button -->
            <div class="w-full">
                <button onclick="closeNotificationModal()" class="w-full bg-[#0062FF] text-white font-[900] text-[18px] py-[13px] rounded-[18px] shadow-[0_8px_20px_rgba(238,0,51,0.25)] active:scale-95 transition-all uppercase tracking-wide">
                    OK
                </button> 
            </div>
        </div>
    </div>

    <!-- Beautiful Success Receipt Modal (Matches Figma 161:3722) -->
    <div id="receiptSuccessModal" class="fixed inset-0 z-[300] bg-black/80 hidden items-center justify-center px-4 font-bricolage backdrop-blur-md">
        <div class="w-full max-w-[360px] bg-[#F9F9F9] rounded-[32px] overflow-hidden flex flex-col items-center px-6 pt-4 pb-5 shadow-2xl relative animate__animated animate__zoomIn animate__faster border border-white/50">
            <!-- Confetti/Celebration background effect (Subtle removed) -->
            
            <h2 class="text-[#534A4A] font-[800] text-[19px] tracking-tight relative z-10 w-full text-center mt-1">@Lang.millions_payment_successfully</h2>
            
            <!-- Ticket / Success Graphic -->
            <div class="relative w-full flex justify-center mt-2 mb-0 z-10 px-4">
                <img src="/Millions/img/modal/success_icon_v2.png" alt="Success" class="w-full h-auto object-contain">
            </div>

            <h3 class="text-[#0A9800] font-[900] text-[20px] uppercase tracking-wide relative z-10">@Lang.success</h3>

            <div class="w-full h-px border-t-[2px] border-dashed border-gray-300 my-3 relative z-10"></div>
            
            <div class="w-full flex justify-between items-center mb-2 relative z-10 px-1">
                <span class="text-[#534A4A] font-bold text-[14px]">@Lang.phone_number</span>
                <span class="font-black text-[14px] text-gray-800" id="receiptPhone">-</span>
            </div>
            <div class="w-full flex justify-between items-center mb-2 relative z-10 px-1">
                <span class="text-[#534A4A] font-bold text-[14px]">@Lang.millions_your_choice</span>
                <span class="text-[#0062FF] font-[900] text-[15px] uppercase" id="receiptChoice">-</span>
            </div>
            
            <div class="w-full flex justify-between items-center mb-2 relative z-10 px-1">
                <span class="text-[#534A4A] font-bold text-[14px]">@Lang.ticket_code</span>
                <span class="font-black text-[13px] text-gray-800" id="receiptTicketCode">#</span>
            </div>
            <div class="w-full flex justify-between items-center mb-2 relative z-10 px-1">
                <span class="text-[#534A4A] font-bold text-[14px]">@Lang.total_ticket</span>
                <span class="font-black text-[14px] text-gray-800" id="receiptTotalTickets">-</span>
            </div>
            <div class="w-full flex justify-between items-center mb-2 relative z-10 px-1">
                <span class="text-[#534A4A] font-bold text-[14px]">@Lang.millions_draw_date</span>
                <span class="font-black text-[14px] text-gray-800" id="receiptDrawDate">-</span>
            </div>
            <div class="w-full flex justify-between items-center mb-1 relative z-10 px-1">
                <span class="text-[#534A4A] font-bold text-[14px]">@Lang.total_payment</span>
                <span class="text-[#0062FF] font-[900] text-[15px]" id="receiptAmount">0 HTG</span>
            </div>

            <div class="w-full h-px border-t-[2px] border-dashed border-gray-300 my-3 relative z-10"></div>
            
            <div class="w-full flex justify-between items-center mb-2 relative z-10 px-1">
                <span class="text-[#534A4A] font-bold text-[14px]">@Lang.time</span>
                <span class="font-bold text-[13px] text-gray-600" id="receiptTime">00:00:00</span>
            </div>
            
            <div class="w-full flex justify-start items-center relative z-10 px-1 mt-1">
                <span class="text-[#534A4A] font-bold text-[13px] italic text-gray-500" id="receiptGameType">@Lang.millions_buy_ticket_label</span>
            </div>
            
            <div class="text-[#534A4A] font-[900] text-[18px] relative z-10 text-center mt-3">@Lang.thank_you <span class="text-[#0062FF]">♥️</span></div>
            
            <div class="w-full flex gap-2.5 mt-4 relative z-10">
                <button type="button" onclick="window.location.href = subDomain + '@Url.Action("BuyTicket", "Home", new { termType = Model.termType })';" class="flex-1 min-w-0 border-2 border-[#0062FF] bg-white text-[#0062FF] font-[900] text-[15px] py-3 rounded-[18px] active:scale-95 transition-all uppercase tracking-wide shadow-sm">
                    @Lang.millions_continue
                </button>
                <button type="button" onclick="window.location.href = subDomain + '@Url.Action("GameHome", "Home", new { termType = Model.termType })';" class="flex-1 min-w-0 bg-[#0062FF] text-white font-[900] text-[15px] py-3 rounded-[18px] shadow-[0_8px_20px_rgba(0,98,255,0.25)] active:scale-95 transition-all uppercase tracking-wide">
                    @Lang.close
                </button>
            </div>
        </div>
    </div>
}