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;

@section Styles {
    <link rel="stylesheet" href="/Millions/css/buy-ticket.css" />
    <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="main-container animate__animated animate__fadeIn bg-[#F5F5F5] h-screen flex flex-col font-bricolage overflow-hidden max-w-[414px] mx-auto relative">
        <!-- Header -->
        <div class="w-full py-3 px-4 text-white flex items-center justify-between sticky top-0 z-[60]" style="background: @themeColor;">
            <button onclick="location.href='@Url.Action("GameHome", "Home")'" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-white/20 transition-all">
                <i class="fa-solid fa-arrow-left text-[20px]"></i>
            </button>
            <span class="font-[800] text-[18px] absolute left-1/2 -translate-x-1/2 whitespace-nowrap">
                @gameTitle
            </span>
            <div class="w-8"></div>
        </div>

        <!-- Sticky Term Info sub-header -->
        <div class="p-4 py-2.5 bg-white flex items-center justify-between shadow-sm sticky top-[52px] z-50">
            <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", System.Globalization.CultureInfo.InvariantCulture)</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>

        <!-- Scrollable Content Area -->
        <div class="flex-1 overflow-y-auto 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", System.Globalization.CultureInfo.InvariantCulture);
                            }
                            
                            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 id="bsPaymentBtn" onclick="bsShowPayment()" 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>
}
else
{
<!-- ==================== Basic Pick 10 / Odd-Even GAME UI ==================== -->
<div class="main-container animate__animated animate__fadeIn bg-[#F5F5F5] h-screen flex flex-col font-bricolage overflow-hidden max-w-[414px] mx-auto relative">
    <!-- Header -->
    <div class="w-full bg-[#0062FF] py-3 px-4 text-white flex items-center justify-between sticky top-0 z-[60]">
        <button onclick="location.href='@Url.Action("GameHome", "Home")'" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-white/20 transition-all">
            <i class="fa-solid fa-arrow-left text-[20px]"></i>
        </button>
        <span class="font-[800] text-[18px] absolute left-1/2 -translate-x-1/2 whitespace-nowrap">
            @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 }
        </span>
        <div class="w-8"></div>
    </div>

    <!-- Sticky Term Info sub-header -->
    <div class="p-4 py-2.5 bg-white flex items-center justify-between shadow-sm sticky top-[52px] z-50">
        <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", System.Globalization.CultureInfo.InvariantCulture)</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>

    <!-- Ticket Scrollable List Area -->
    <div id="ticketContainer" class="p-4 flex flex-col gap-6 flex-1 overflow-y-auto bg-[#F5F5F5] pb-6">
        @for (int i = 1; i <= 2; i++)
        {
            <div class="ticket-card relative group active:bg-gray-50 transition-colors cursor-pointer animate__animated animate__fadeIn">
                <button onclick="removeEntry(this)" class="absolute -right-2 top-2 w-7 h-7 bg-[#0062FF] text-white rounded-full flex items-center justify-center text-[11px] shadow-sm z-[10] hover:bg-red-600 transition-all border-2 border-white">
                    <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-start gap-4">
                        <div class="grid grid-cols-5 gap-y-1 gap-x-2 flex-1">
                            @for (int j = 0; j < (Model.termType == Constants.PIC10_BASIC_CODE ? 10 : (Model.termType == Constants.Millions_CODE ? 6 : 15)); j++)
                            {
                                <div class="ball-circle ball-empty"></div>
                            }
                        </div>
                        <div class="w-[108px] 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-2 py-2 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-2 py-2 rounded-xl font-black text-[13px] shadow-sm active:scale-95 transition-all">
                                    <i class="fa-solid fa-pencil text-[12px]"></i> @Lang.millions_edit
                                 </button>
                                 <button onclick="clearTicket(this)" class="w-full bg-[#A855F7] text-white flex items-center justify-center gap-2 py-2 rounded-xl font-black text-[13px] shadow-sm active:scale-95 transition-all">
                                    <i class="fa-solid fa-trash-can text-[12px]"></i> @Lang.millions_delete
                                 </button>
                             </div>
                        </div>
                    </div>
                </div>
            </div>
        }

        <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="p-4 bg-white border-t border-gray-200 z-[70] shadow-[0px_-4px_10px_rgba(0,0,0,0.03)] sticky bottom-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="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 onclick="preparePayment()" 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>
}

<!-- 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="w-full bg-[#0062FF] py-3 px-4 text-white flex items-center justify-between sticky top-0 z-[60]">
            <button onclick="hideOrderSummary()" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-white/20 transition-all">
                <i class="fa-solid fa-arrow-left text-[20px]"></i>
            </button>
            <span class="font-[800] text-[18px] absolute left-1/2 -translate-x-1/2 whitespace-nowrap">
                @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 }
            </span>
            <div class="w-8"></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", System.Globalization.CultureInfo.InvariantCulture)
                          </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", System.Globalization.CultureInfo.InvariantCulture)
                                  } 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>

    <!-- 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 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>
        
                    <!-- 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)));

        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 1-80
            var numbers = [];
            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");
                // Single mode logic is handled by setting selectedNumbers previously or here
            }
            
            updateSelectionCount(); 
            liveUpdateTicket();

            // Focus card
            if (activeTicketCard && activeTicketCard.length) {
                var container = $("#ticketContainer");
                var scrollPos = activeTicketCard.offset().top - container.offset().top + container.scrollTop();
                container.stop().animate({ scrollTop: scrollPos - 15 }, 500);
            }

            // Populate Grid
            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';
                
                grid.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>`);
            }

            // Cleanup old listeners and add new one to the grid (event delegation)
            grid.off('click', '.num-btn').on('click', '.num-btn', function(e) {
                e.preventDefault();
                var $btn = $(this);
                var picked = $btn.text().trim();
                
                if (isMultiMode) {
                    if (selectedNumbers.includes(picked)) {
                        // Remove
                        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 {
                        // Add
                        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();
                } else {
                    // Single Select mode
                    var exists = false;
                    if (activeTicketCard) {
                        activeTicketCard.find('.ball-filled').each(function() {
                            if (activeBall && this !== activeBall[0] && $(this).text().trim() === picked) {
                                exists = true;
                            }
                        });
                    }
                    if (exists) {
                        if (typeof showNotification === "function") {
                            showNotification("Number already selected", "warning");
                        }
                        return;
                    }
                    grid.find('.num-btn').removeClass('bg-[#0062FF] text-white shadow-md scale-105 active-num').addClass('bg-white text-gray-700 border border-gray-100');
                    selectedNumbers = [picked];
                    $btn.addClass('bg-[#0062FF] text-white shadow-md scale-105 active-num').removeClass('bg-white text-gray-700 border border-gray-100');
                }
                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 pick numbers
            $(document).on('click', '.ball-filled, .ball-empty', function() {
                isMultiMode = false;
                activeBall = $(this);
                activeTicketCard = activeBall.closest('.ticket-card');
                
                var val = activeBall.text().trim();
                selectedNumbers = val ? [val] : [];
                
                openNumberPicker(false);
            });

            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) {
                    // Collect and sort for final storage/display (lottery numbers are usually sorted)
                    var finalSorted = selectedNumbers.filter(n => n !== null && n !== "").sort((a, b) => parseInt(a) - parseInt(b));
                    
                    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');
                // 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 = @(Model.termType == Constants.PIC10_BASIC_CODE ? "10" : (Model.termType == Constants.Millions_CODE ? "20" : "50"));
            $("#totalPrice").text(formatMoneyV2(filledTickets * pricePerTicket));
            $("#totalTicketCount").text(filledTickets);
        }

        function addNewTicket() {
            var container = $("#ticketContainer");
            var wrapper = $("#addButtonWrapper");
            var currentIndex = $(".ticket-card").length + 1;
            
            var ballsHtml = '';
            for (var i = 0; i < maxBalls; i++) {
                ballsHtml += '<div class="ball-circle ball-empty"></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-[#0062FF] text-white rounded-full flex items-center justify-center text-[11px] shadow-sm z-[10] hover:bg-red-600 transition-all border-2 border-white">
                        <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-start gap-4">
                            <div class="grid grid-cols-5 gap-y-1 gap-x-2 flex-1">
                                ${ballsHtml}
                            </div>
                            <div class="w-[108px] 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-2 py-2 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-2 py-2 rounded-xl font-black text-[13px] shadow-sm active:scale-95 transition-all">
                                         <i class="fa-solid fa-pencil text-[12px]"></i> @Lang.millions_edit
                                     </button>
                                     <button onclick="clearTicket(this)" class="w-full bg-[#A855F7] text-white flex items-center justify-center gap-2 py-2 rounded-xl font-black text-[13px] shadow-sm active:scale-95 transition-all">
                                         <i class="fa-solid fa-trash-can text-[12px]"></i> @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 ---
        function preparePayment(event) {
            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() {
                    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;
                }
            }

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

            const btn = event ? event.currentTarget : null;
            const originalText = btn ? btn.innerHTML : "@Lang.millions_payment";
            if (btn) {
                btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Loading...';
                btn.disabled = true;
            }


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

                    if (btn) {
                        btn.innerHTML = originalText;
                        btn.disabled = false;
                    }
                    if (data.responseCode === "0") {
                        showOrderSummary(data, tickets);
                    } else {
                        showNotification(data.responseMessage || "Confirmation failed", data.responseCode);
                    }
                },
                error: function(err) {

                    if (btn) {
                        btn.innerHTML = originalText;
                        btn.disabled = false;
                    }

                    showNotification("Network error occurred.", "warning");
                }
            });
        }

        let currentTransId = null;

        function showOrderSummary(apiData, localTickets) {
            currentTransId = apiData.transId;
            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) {
                    let numbersBalls = '';
                    numbers.forEach(n => {
                        numbersBalls += `<div class="w-7 h-7 rounded-full flex items-center justify-center text-white text-[11px] font-black shadow-[0_4px_10px_rgba(186,15,33,0.3)]" style="background: linear-gradient(135deg, #FF3D63 0%, #E3132D 60%, #BA0F21 100%); 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>`;
                    });
                    contentHtml = `<div class="grid grid-cols-5 gap-y-2 relative z-10 px-2 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(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.totalMoneyPayment || apiData.totalMoney || "0";
            $("#summaryTotalAmount").text(formatMoneyV2(totalMoney));

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

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

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

            // Trigger SendOTP API
            $.ajax({
                url: subDomain + '@Url.Action("SendOTP", "Home")',
                type: 'POST',
                success: function(data) {
                    $(btn).prop('disabled', false).html(originalText);
                    
                    if (data.responseCode === "0") {
                        showOtpModal();
                    } else {
                        showNotification(data.responseMessage || "Failed to send OTP", data.responseCode);
                    }
                },
                error: function() {
                    $(btn).prop('disabled', false).html(originalText);
                    showNotification("Network error occurred.", "warning");
                }
            });
        }

        let otpInterval;
        function showOtpModal() {
            hideOrderSummary();
            $("#otpModal").removeClass("hidden").addClass("flex");
            $("#otpInputs input").val("");
            $("#otpConfirmBtn").prop('disabled', true);
            $("#otpError").addClass("hidden").text("");
            $("#otp1").focus();
            
            // 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());
            startOtpTimer(60);
        }

        // 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 6" : "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) {
            let otpCode = "";
            $("#otpInputs input").each(function() {
                otpCode += $(this).val();
            });
            
            if (otpCode.length < 6) {
                showNotification("Please enter full 6-digit OTP", "warning");
                return;
            }

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

            const finalData = {
                transIdByTicket: currentTransId,
                paymentCode: otpCode
            };

            // Call the unified backend action that verifies OTP and then buys the ticket
            $.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");
                             $("#otpInputs input").val("");
                             $("#otp1").focus();
                        }
                    }
                },
                error: function() {
                    $(btn).prop('disabled', false).html(originalText);
                    showNotification("Network error occurred during payment completion.", "warning");
                }
            });
        }

        var systemUpgrading = false;
        function showNotification(message, code) {
            const msgEl = $("#notificationMessage");
            const iconEl = $("#notificationModal img");
            const btnEl = $("#notificationModal button");
            
            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-3 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-9 h-9 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-1 px-2 grid grid-cols-10 gap-1.5 h-[160px] overflow-y-auto bg-gray-50 border-b" id="numberGrid">
                 <!-- 1-80 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>
            
            <!-- Action Button -->
            <button onclick="location.href='@Url.Action("GameHome", "Home", new { termType = Model.termType })'" 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 mt-4 relative z-10 uppercase tracking-wide">
                @Lang.back_to_homepage
            </button> 
        </div>
    </div>
}