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

@model LotteryWebApp.Models.HomeIndex_ViewModel
@{
    ViewData["Title"] = "LotteryV2 - Buy Ticket";
    Layout = "~/Areas/LotteryV2/Views/Shared/_Layout.cshtml";
    var currentTerm = Model.listTerm?.FirstOrDefault();
}
@using LotteryWebApp.Languages;
@using LotteryWebApp.Common;

<link rel="stylesheet" href="/LotteryV2/css/buy-ticket.css" />

<link rel="stylesheet" href="/LotteryV2/css/buy-ticket.css" />

@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.v2_big_small : Lang.v2_odd_even;
    var prizeAmount = isBigSmall ? "100" : "200";
    
    <!-- ==================== 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.v2_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">
                    @* Mock data for results *@
                    @for(int r=0; r<5; r++) {
                        var resTitle = isBigSmall ? (r % 2 == 0 ? "Big" : "Small") : (r % 2 == 0 ? "Odd" : "Even");
                        var resColor = isBigSmall ? (resTitle == "Big" ? "#A2FF00" : "#FF4157") : (resTitle == "Odd" ? "#FFC700" : "#B33BD0");
                        <div class="flex flex-col items-center justify-center min-h-[56px] flex-1 rounded-lg py-1.5 border border-gray-200" style="background: linear-gradient(136deg, #FFFAE6 0%, #FFE588 100%);">
                            <span class="text-[10px] font-bold text-black whitespace-nowrap opacity-70">Mar @(16+r)</span>
                            <span class="text-[18px] font-black leading-tight" style="-webkit-text-stroke: 0.5px #000; color: @resColor;">@resTitle</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="/LotteryV2/img/bigsmall/light_effect_1.png" class="absolute top-0 left-0 w-full opacity-60 pointer-events-none" alt="" />
                    <img src="/LotteryV2/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-[30px] 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="/LotteryV2/img/bigsmall/ball_42_dark.png" class="w-12 h-12 relative z-[1]" alt="42" />
                                <img src="/LotteryV2/img/bigsmall/ball_88_big.png" class="w-16 h-16 relative z-[2]" alt="88" />
                                <img src="/LotteryV2/img/bigsmall/ball_54_dark.png" class="w-12 h-12 relative z-[1]" alt="54" />
                            } else {
                                <img src="/LotteryV2/img/oddeven/ball_3.png" class="w-12 h-12 relative z-[1]" alt="3" />
                                <img src="/LotteryV2/img/oddeven/ball_1.png" class="w-16 h-16 relative z-[2]" alt="1" />
                                <img src="/LotteryV2/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.v2_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="/LotteryV2/img/bigsmall/light_effect_1.png" class="absolute top-0 left-0 w-full opacity-60 pointer-events-none" alt="" />
                    <img src="/LotteryV2/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-[22px] 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="/LotteryV2/img/bigsmall/ball_5_blue.png" class="w-12 h-12 relative z-[1]" alt="5" />
                                <img src="/LotteryV2/img/bigsmall/ball_1_big.png" class="w-16 h-16 relative z-[2]" alt="1" />
                                <img src="/LotteryV2/img/bigsmall/ball_8_pink.png" class="w-12 h-12 relative z-[1]" alt="8" />
                            } else {
                                <img src="/LotteryV2/img/oddeven/ball_66.png" class="w-12 h-12 relative z-[1]" alt="66" />
                                <img src="/LotteryV2/img/oddeven/ball_68.png" class="w-16 h-16 relative z-[2]" alt="68" />
                                <img src="/LotteryV2/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.v2_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-[12px] font-medium text-gray-500">@Lang.v2_you_choose</span>
                    <span id="choiceDisplay" class="text-[32px] font-[800] leading-tight" style="-webkit-text-stroke: 1px #000;">—</span>
                </div>
                <div class="flex flex-col items-center">
                    <span class="text-[12px] font-medium text-gray-500">@Lang.v2_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">
                    <span class="text-[12px] text-gray-500 font-bold uppercase">@Lang.v2_estimated_ticket_price</span>
                    <div class="flex items-baseline gap-1">
                        <span id="bsTotalPrice" class="text-[28px] font-black text-black">50</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.v2_payment
                </button>
            </div>
        </div>
    </div>
}
else
{
<!-- ==================== CLASSIC 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-[#EE0033] 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) { @Lang.v2_buy_classic_pick_10 }
            else { @Lang.v2_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-[#EE0033] 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.v2_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]">
        @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-[#999] text-white rounded-full flex items-center justify-center text-[11px] shadow-sm z-[10] hover:bg-red-500 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 bg-[#EE0033] 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.v2_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 : 15); j++)
                            {
                                <div class="ball-circle ball-empty"></div>
                            }
                        </div>
                        <div class="w-20 action-area flex flex-col gap-2">
                             <button onclick="randomizeTicket(this)" class="rand-btn bg-green-main text-white flex items-center justify-center gap-2 w-20 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="bg-[#2B83F2] text-white flex items-center justify-center gap-2 w-20 py-1.5 rounded-lg font-bold text-[12px] shadow-sm active:scale-95 transition-all">
                                    <i class="fa-solid fa-pen text-[10px]"></i> @Lang.v2_edit
                                 </button>
                                 <button onclick="clearTicket(this)" class="bg-[#EE0033] text-white flex items-center justify-center gap-2 w-20 py-1.5 rounded-lg font-bold text-[12px] shadow-sm active:scale-95 transition-all">
                                    <i class="fa-solid fa-trash-can text-[10px]"></i> @Lang.v2_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-green-main text-white font-black text-md py-2.5 px-6 rounded-xl shadow-md border-b-[4px] border-[#129A30] active:translate-y-[1px] active:border-b-[1px] transition-all flex items-center justify-center gap-2">
                @Lang.v2_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)]">
        <div class="flex items-center justify-between">
            <div class="flex flex-col">
                <span class="text-[12px] text-gray-500 font-bold uppercase">@Lang.v2_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-[#EE0033]">HTG</span>
                </div>
            </div>
            <button onclick="preparePayment()" class="bg-[#EE0033] 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.v2_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 max-w-[414px] h-full bg-white flex flex-col animate__animated animate__fadeInRight animate__faster border-x shadow-2xl relative">
        <!-- Header đồng bộ tuyệt đối -->
        <div class="w-full bg-[#EE0033] 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) { @Lang.v2_buy_classic_pick_10 }
                else if (Model.termType == Constants.PIC10_BIGSMALL_CODE) { @Lang.v2_big_small }
                else { @Lang.v2_odd_even }
            </span>
            <div class="w-8"></div>
        </div>

        <!-- Content Area -->
        <div class="flex-1 overflow-y-auto p-5 space-y-5 bg-gray-50 pb-72">
            <!-- Phần Round Info từ Model -->
            <div class="flex items-center justify-end gap-1 mb-2 px-1">
                <span class="text-[12px] font-bold text-gray-400">@Lang.v2_round</span>
                <span class="text-[16px] font-black text-brown-main">#@(currentTerm?.id ?? "12459")</span>
            </div>

            <div class="flex justify-between items-center px-1">
                 <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 List -->
            <div id="summaryTicketList" class="flex flex-col gap-4">
                 <!-- Populated dynamically via JS -->
            </div>

            <!-- Dates Section -->
            <div class="grid grid-cols-2 gap-4 mt-8 pt-6 border-t border-dashed border-gray-300">
                 <div class="space-y-1">
                     <span class="text-[11px] font-black text-[#EE0033] 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-[#EE0033] 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_start, out drawDate);
                             if (isValidDate) {
                                @drawDate.ToString("dddd MMM dd, yyyy", System.Globalization.CultureInfo.InvariantCulture)
                             } else {
                                @:N/A
                             }
                         }
                     </div>
                 </div>
            </div>

            <!-- Totals Section -->
            <div class="mt-10 px-2 space-y-2">
                 <div class="flex justify-between items-center">
                     <span class="text-[14px] font-bold text-gray-400">@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-gray-400">@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-[#EE0033]">HTG</span>
                     </div>
                 </div>
            </div>
            
            <!-- Scalloped edge visual separator filler -->
            <div class="w-full h-8 flex overflow-hidden opacity-5 mt-4">
                 @for(int i=0; i<30; i++) {
                     <div class="w-4 h-4 rounded-full bg-black -mt-2 shrink-0"></div>
                 }
            </div>
        </div>

        <div class="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)] absolute bottom-0 w-full left-0 z-[70]">
            <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-[#EE0033] 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.v2_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('/LotteryV2/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="/LotteryV2/img/modal/otp_coins.png" class="w-full object-contain" />
                </div>

                <!-- Red Header Section -->
                <div class="relative w-full pt-4 pb-4 bg-[#EE0033] 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.v2_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="/LotteryV2/img/modal/otp_shield.png" alt="Success" class="w-[90px] object-contain" style="mix-blend-mode: multiply;">
                    </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.v2_ticket</span>
                            <div id="otpTicketTypeContainer" class="flex justify-start">
                                <img id="otpTicketTypeImg" src="/LotteryV2/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.v2_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.v2_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-[#EE0033]/50 transition-all outline-none shadow-inner otp-slot"
                                   placeholder="-">
                        }
                    </div>
        
                    <!-- Timer & Resend -->
                    <div class="flex flex-col items-center gap-1 mt-0">
                        <span id="otpTimer" class="text-[15px] font-black text-[#EE0033] font-bricolage">60s</span>
                        <button id="resendOtpBtn" onclick="sendOtpRequest()" disabled class="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.v2_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.v2_cancel</button>
                        <button 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">@Lang.v2_confirm</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@section Scripts {
    <script>

        const maxBalls = @(Model.termType == Constants.PIC10_BASIC_CODE ? 10 : (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 = [];

        function editFullTicket(btn) {
            activeTicketCard = $(btn).closest('.ticket-card');
            activeBall = null;
            selectedNumbers = [];
            activeTicketCard.find('.ball-filled').each(function() {
                var num = $(this).text().trim();
                if(num) selectedNumbers.push(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");
                updateSelectionCount();
            } else {
                title.text("Pick Number");
                countArea.addClass('hidden');
                confirmBtn.removeClass('hidden').text("@Lang.confirm");
                selectedNumbers = [activeBall.text().trim()];
                updateSelectionCount(); 
            }

            for (var i = 1; i <= 80; i++) {
                var formatted = i.toString().padStart(2, '0');
                var isSelected = selectedNumbers.includes(formatted);
                
                var btnClass = isSelected 
                    ? 'bg-[#EE0033] text-white shadow-md scale-105' 
                    : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-100';
                
                var btn = $(`<button class="num-btn h-10 rounded-lg font-black text-sm transition-all focus:outline-none ${btnClass}">${formatted}</button>`);
                
                btn.click(function(e) {
                    e.preventDefault();
                    var picked = $(this).text().trim();
                    if (isMulti) {
                        if (selectedNumbers.includes(picked)) {
                            selectedNumbers = selectedNumbers.filter(n => n !== picked);
                            $(this).removeClass('bg-[#EE0033] text-white shadow-md scale-105').addClass('bg-white text-gray-700 border border-gray-100');
                        } else if (selectedNumbers.length < maxBalls) {
                            selectedNumbers.push(picked);
                            $(this).addClass('bg-[#EE0033] text-white shadow-md scale-105').removeClass('bg-white text-gray-700 border border-gray-100');
                        }
                    } else {
                        grid.find('.num-btn').removeClass('bg-[#EE0033] text-white shadow-md scale-105').addClass('bg-white text-gray-700 border border-gray-100');
                        selectedNumbers = [picked];
                        $(this).addClass('bg-[#EE0033] text-white shadow-md scale-105').removeClass('bg-white text-gray-700 border border-gray-100');
                    }
                    updateSelectionCount();
                });
                
                grid.append(btn);
            }

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

        function updateSelectionCount() {
            var count = selectedNumbers.length;
            $("#selectionCount").text(count);
            $("#maxSelectionCount").text(maxBalls);
            var isValid = activeTicketCard ? (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');
            }
        }

        // All immediate jQuery event bindings must wait for DOM + jQuery to be ready
        document.addEventListener("DOMContentLoaded", function() {
            // Click on a filled ball to edit single number
            $(document).on('click', '.ball-filled', function() {
                activeBall = $(this);
                activeTicketCard = null;
                openNumberPicker(false);
            });

            // Confirm button handler
            $(document).off('click', '#confirmBtn').on('click', '#confirmBtn', function(e) {
                e.preventDefault();
                if (selectedNumbers.length === 0) return;

                if (activeTicketCard && activeTicketCard.length > 0) {
                    // Multi mode: Update the entire ticket card
                    selectedNumbers.sort((a, b) => parseInt(a) - parseInt(b));
                    
                    var balls = activeTicketCard.find('.ball-circle, .ball-empty, .ball-filled');
                    
                    balls.each(function(index) {
                        if (index < selectedNumbers.length) {
                            $(this).removeClass('ball-empty').addClass('ball-filled').text(selectedNumbers[index]);
                            $(this).addClass('animate__animated animate__pulse');
                            setTimeout(() => $(this).removeClass('animate__animated animate__pulse'), 500);
                        }
                    });

                    activeTicketCard.find('.rand-btn').hide();
                    activeTicketCard.find('.edit-delete-group').removeClass('hidden').show();
                    
                    updateTotalPrice();
                } else if (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);
                }

                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" : "50");
            $("#totalPrice").text(filledTickets * pricePerTicket);
        }

        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-[#999] text-white rounded-full flex items-center justify-center text-[11px] shadow-sm z-[10] hover:bg-red-500 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 bg-[#EE0033] 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.v2_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-20 action-area flex flex-col gap-2">
                                 <button onclick="randomizeTicket(this)" class="rand-btn bg-green-main text-white flex items-center justify-center gap-2 w-20 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="bg-[#2B83F2] text-white flex items-center justify-center gap-2 w-20 py-1.5 rounded-lg font-bold text-[12px] shadow-sm active:scale-95 transition-all">
                                         <i class="fa-solid fa-pen text-[10px]"></i> @Lang.v2_edit
                                     </button>
                                     <button onclick="clearTicket(this)" class="bg-[#EE0033] text-white flex items-center justify-center gap-2 w-20 py-1.5 rounded-lg font-bold text-[12px] shadow-sm active:scale-95 transition-all">
                                         <i class="fa-solid fa-trash-can text-[10px]"></i> @Lang.v2_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" : "50")";
                        tickets.push({
                            code: selectedNumbers.join(','),
                            money: itemPrice
                        });
                    }
                });

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

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

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

            // Gọi ConfirmTicketData API (giống nhau cho tất cả loại game)
            // Pick 10: code = "21,26,40,47,48,52,67,69,71,74"
            // Big/Small: code = "B" hoặc "S"
            // Odd/Even: code = "O" hoặc "E"
            console.log("[DEBUG] ConfirmTicketData request:", JSON.stringify(requestData));
            $.ajax({
                url: subDomain + '@Url.Action("ConfirmTicketData", "Home")',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(requestData),
                success: function(data) {
                    console.log("[DEBUG] ConfirmTicketData response:", JSON.stringify(data));
                    if (btn) {
                        btn.innerHTML = originalText;
                        btn.disabled = false;
                    }
                    if (data.responseCode === "0") {
                        showOrderSummary(data, tickets);
                    } else {
                        showNotification(data.responseMessage || "Confirmation failed", "warning");
                    }
                },
                error: function(err) {
                    console.error("[DEBUG] ConfirmTicketData AJAX Error:", err);
                    if (btn) {
                        btn.innerHTML = originalText;
                        btn.disabled = false;
                    }
                    console.error("AJAX Error:", err);
                    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-lg" style="background: radial-gradient(circle at 30% 30%, #444, #000);">${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" 
                             style="background: linear-gradient(90deg, #EE0033 0%, rgba(238, 0, 51, 0.4) 70%, rgba(238, 0, 51, 0.05) 100%); border: 1px solid rgba(238, 0, 51, 0.1);">
                            ${contentHtml}
                        </div>
                        <div class="w-24 shrink-0 bg-white border border-gray-200 rounded-2xl p-2.5 flex items-center justify-between shadow-sm">
                            <div class="flex items-baseline gap-0.5">
                                <span class="text-[16px] font-black text-black">${t.money}</span>
                                <span class="text-[10px] font-black text-[#EE0033]">HTG</span>
                            </div>
                        </div>
                    </div>
                `;
                summaryList.append(itemHtml);
            });

            $("#summaryTotalCount").text(displayTickets.length);
            const totalMoney = apiData.totalMoneyPayment || apiData.totalMoney || "0";
            $("#summaryTotalAmount").text(parseFloat(totalMoney).toLocaleString('en-US'));

            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", "warning");
                    }
                },
                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("");
            $("#otp1").focus();
            
            // Map game type to readable name & image
            let gameTypeStr = "@Model.termType";
            let displayName = "Classic Pick 10";
            let imgSrc = "";
            
            if (gameTypeStr === "@Constants.PIC10_BIGSMALL_CODE") {
                displayName = "Big / Small";
                // Detect if current selection is Big or Small from summary
                let firstTicket = $("#summaryTicketList .flex.items-center span.font-black").first().text().trim();
                if (firstTicket.toLowerCase().includes("big")) imgSrc = "/LotteryV2/img/big_text.png";
                else if (firstTicket.toLowerCase().includes("small")) imgSrc = "/LotteryV2/img/small_text.png";
            } else if (gameTypeStr === "@Constants.PIC10_ODDEVEN_CODE") {
                displayName = "Odd / Even";
                let firstTicket = $("#summaryTicketList .flex.items-center span.font-black").first().text().trim();
                if (firstTicket.toLowerCase().includes("odd")) imgSrc = "/LotteryV2/img/odd_text.png";
                else if (firstTicket.toLowerCase().includes("even")) imgSrc = "/LotteryV2/img/even_text.png";
            }
            
            $("#otpTicketTypeContainer").find("span").remove();
            if (imgSrc) {
                $("#otpTicketTypeImg").attr("src", imgSrc).show();
            } else {
                $("#otpTicketTypeImg").hide();
                if ($("#otpTicketTypeContainer").find("span").length === 0) {
                    $("#otpTicketTypeContainer").append(`<span class='text-[17px] font-[900] text-purple-700 italic'>${displayName}</span>`);
                }
            }
            
            $("#otpTotalAmount").text($("#summaryTotalAmount").text());
            startOtpTimer(60);
        }

        // Add backspace support for OTP inputs
        $("#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").prop("disabled", true);
            clearInterval(otpInterval);
            
            otpInterval = setInterval(() => {
                timeLeft--;
                $("#otpTimer").text(timeLeft + "s");
                if (timeLeft <= 0) {
                    clearInterval(otpInterval);
                    $("#resendOtpBtn").prop("disabled", false);
                    $("#otpTimer").text("");
                }
            }, 1000);
        }

        function moveToNext(el, nextId) {
            if (el.value.length >= 1) {
                if (nextId) document.getElementById(nextId).focus();
            }
        }

        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", "warning");
                    }
                }
            });
        }

        function showReceiptSuccess(transId, amount, phone) {
            // Setup data dynamically
            $("#receiptAmount").text(amount + " HTG");
            if(phone) $("#receiptPhone").text(phone);
            
            let gameTypeStr = "@Model.termType";
            let displayName = "@Lang.v2_classic_pick_10";
            if (gameTypeStr === "@Constants.PIC10_BIGSMALL_CODE") displayName = "@Lang.v2_big_small";
            else if (gameTypeStr === "@Constants.PIC10_ODDEVEN_CODE") displayName = "@Lang.v2_odd_even";
            
            $("#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 = "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
            };

            // STEP 1: Confirm OTP API
            $.ajax({
                url: subDomain + '@Url.Action("ConfirmOTP", "Home")',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ otp: otpCode }),
                success: function(otpResp) {
                    // Check if OTP validation succeeds
                    if (otpResp.responseCode === "0" || otpResp.responseCode === 200 || otpResp.responseCode === "0000") {
                        
                        // STEP 2: Confirm Buying Ticket API
                        $.ajax({
                            url: subDomain + '@Url.Action("ConfirmBuyingTicket", "Home")',
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify(finalData),
                            success: function(buyResp) {
                                $(btn).prop('disabled', false).html(originalText);
                                
                                if (buyResp.responseCode === "0" || buyResp.responseCode === "0000") {
                                    // Open Figma styled success modal!
                                    showReceiptSuccess(buyResp.transId || currentTransId, $("#summaryTotalAmount").text(), "@(Model.userStatus?.msisdn ?? "-")");
                                } else {
                                    showNotification(buyResp.responseMessage || "Payment failed", "warning");
                                }
                            },
                            error: function() {
                                $(btn).prop('disabled', false).html(originalText);
                                showNotification("Network error occurred during payment completion.", "warning");
                            }
                        });

                    } else {
                        $(btn).prop('disabled', false).html(originalText);
                        showNotification(otpResp.responseMessage || "Invalid OTP code", "warning");
                    }
                },
                error: function() {
                    $(btn).prop('disabled', false).html(originalText);
                    showNotification("Network error while validating OTP.", "warning");
                }
            });
        }

        function showNotification(message, type = 'success') {
            const msgEl = $("#notificationMessage");
            const iconEl = $("#notificationModal img");
            
            msgEl.text(message);
            
            // Toggle icon based on type (warning or success)
            const warningIcon = '/LotteryV2/img/modal/warning_icon.png';
            const successIcon = '/LotteryV2/img/modal/success_icon.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 (type === 'warning' || type === '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");
        }

        // ==================== 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.v2_select";
        const langSelected = "@Lang.v2_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';
                }
            }
        }

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

    <!-- Number Picker Modal (Premium Design) -->
    <div id="numberPickerModal" class="fixed inset-0 bg-black/60 z-[200] hidden items-center justify-center p-4 backdrop-blur-sm transition-all">
        <div class="modal-content bg-white w-full max-w-[360px] rounded-3xl overflow-hidden shadow-2xl animate__animated animate__zoomIn animate__faster">
            <div class="p-5 bg-[#EE0033] text-white flex justify-between items-center">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center">
                        <i class="fa-solid fa-hashtag text-sm"></i>
                    </div>
                    <h3 class="font-black text-lg uppercase tracking-tight" id="modalTitle">Pick Number</h3>
                </div>
                <button onclick="closeNumberPicker()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-white/20 transition-all">
                    <i class="fa-solid fa-xmark text-xl"></i>
                </button>
            </div>
            <div class="p-3 bg-gray-50 flex items-center justify-center border-b selection-count-area hidden">
                <span class="text-[12px] font-bold text-gray-500 uppercase">Selected: <span id="selectionCount" class="text-[#EE0033]">0</span>/<span id="maxSelectionCount">10</span></span>
            </div>
            <div class="p-4 grid grid-cols-6 gap-2 max-h-[450px] overflow-y-auto bg-gray-50" id="numberGrid">
                 <!-- 1-80 populated via JS -->
            </div>
            <div class="p-4 bg-white border-t flex flex-col gap-2">
                 <button id="confirmBtn" class="hidden w-full py-3 bg-[#EE0033] text-white rounded-xl font-black text-md active:bg-[#CC002D] transition-all uppercase tracking-wide shadow-lg">
                     @Lang.confirm
                 </button>
                 <button onclick="closeNumberPicker()" class="w-full py-3 bg-gray-100 text-gray-700 rounded-xl font-black text-[14px] active:bg-gray-200 transition-all uppercase tracking-wide">
                     @Lang.v2_back
                 </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-3 mt-1">
                <img src="/LotteryV2/img/modal/success_icon.png" class="w-[100px] 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-[#EE0033] 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) -->
            <div class="absolute top-0 inset-x-0 h-[150px] pointer-events-none opacity-40 mix-blend-multiply" style="background: url('/LotteryV2/img/modal/otp_glitter.png') no-repeat top center; background-size: cover;"></div>
            
            <h2 class="text-[#534A4A] font-[800] text-[19px] tracking-tight relative z-10 w-full text-center mt-1">@Lang.v2_payment_successfully</h2>
            
            <!-- Ticket / Success Graphic -->
            <div class="relative w-full flex justify-center mt-2 mb-0 z-10">
                <div class="relative w-[100px] flex items-center justify-center">
                    <div class="absolute inset-0 bg-green-400 blur-2xl opacity-20 rounded-full scale-125"></div>
                    <img src="/LotteryV2/img/modal/otp_shield.png" alt="Success" class="w-full drop-shadow-xl z-20" style="mix-blend-mode: multiply;" />
                </div>
            </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.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.v2_your_choice</span>
                <span class="text-[#EE0033] 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-1 relative z-10 px-1">
                <span class="text-[#534A4A] font-bold text-[14px]">@Lang.payment</span>
                <span class="text-[#EE0033] 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.v2_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-[#EE0033]">♥️</span></div>
            
            <!-- Action Button -->
            <button onclick="location.href='@Url.Action("GameHome", "Home", new { termType = Model.termType })'" class="w-full bg-[#EE0033] 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>
}