@model LotteryWebApp.Models.HomeIndex_ViewModel
@{
    ViewData["Title"] = Lang.millions_transfer;
    Layout = "~/Areas/Millions/Views/Shared/_Layout.cshtml";
}
@using LotteryWebApp.Languages;
@functions {
    public string FormatMoney(string amount) {
        if (string.IsNullOrEmpty(amount)) return "0";
        var clean = new string(amount.Where(c => char.IsDigit(c)).ToArray());
        if (long.TryParse(clean, out long val)) {
            return val.ToString("#,##0", new System.Globalization.CultureInfo("vi-VN")).Replace(",", ".");
        }
        return amount;
    }
}

@section Styles {
    <link rel="stylesheet" href="/Millions/css/transfer-win-money.css" />
}

<div class="millions-transfer-page animate__animated animate__fadeIn overflow-x-hidden">
    <div class="header">
        <a href="javascript:history.back()" class="back-btn" aria-label="Back">
            <i class="fa-solid fa-arrow-left"></i>
        </a>
        <div class="header-title">@Lang.millions_transfer</div>
    </div>

    <div class="content-card">
        <div class="content-inner">
            <div class="max-w-[414px] mx-auto w-full">
        <!-- Account Card Section (Matching Figma: Frame 69) -->
        <div class="relative w-full bg-[#0062FF] rounded-[12px] overflow-hidden shadow-xl mb-4 pl-8 pr-5 py-2 flex flex-col justify-between" style="border: 4px solid transparent; border-image: linear-gradient(175deg, rgba(255,255,255,0.2) 0%, rgba(255,199,0,0.4) 100%) 1; border-radius: 12px; aspect-ratio: 383/92;">
            <!-- Decorative Elements (positions from Figma: card 383×92) -->
            <div class="absolute inset-0 pointer-events-none overflow-hidden rounded-[12px]">
                <!-- Golden Ribbon: Figma x:232.58 y:19.11 w:202.23 h:113.29 → right:0, top:20.8%, w:52.8% -->
                <img src="/Millions/img/transfer_card_bg_v2.png" alt="" class="absolute z-0" style="right: -10%; top: 20%; width: 53%; height: auto;" />
                
                <!-- Coin 2 (top-right): Figma x:336 y:11 w:27 h:26 → right:5.2%, top:12% -->
                <img src="/Millions/img/transfer/coin_2.png" alt="" class="absolute z-10 animate-float" style="right: 5%; top: 12%; width: 7%;" />
                <!-- Coin 1 (mid-right): Figma x:309 y:51 w:28 h:25 → right:12%, top:55% -->
                <img src="/Millions/img/transfer/coin_1.png" alt="" class="absolute z-10 animate-float" style="right: 12%; top: 55%; width: 7.4%; animation-delay: 0.5s;" />
                <!-- Coin 3 (small, left of ribbon): Figma x:272 y:27 w:18 h:12 → right:24.3%, top:29% -->
                <img src="/Millions/img/transfer/coin_3.png" alt="" class="absolute z-10 animate-pulse" style="right: 24%; top: 29%; width: 4.7%;" />
                
                <!-- Lights: Figma w:800 h:43, full-bleed glow overlays -->
                <img src="/Millions/img/transfer/light_1.png" alt="" class="absolute z-[1]" style="top: -23%; left: -55%; width: 210%; opacity: 0.7;" />
                <img src="/Millions/img/transfer/light_2.png" alt="" class="absolute z-[1]" style="bottom: -23%; left: -55%; width: 210%; opacity: 0.7;" />
            </div>

            <!-- Account Label -->
            <p class="relative z-10 text-white font-bold text-[16px] tracking-normal" style="font-family: 'Bricolage Grotesque', sans-serif;">@Lang.millions_account_name</p>
            
            <!-- Balance Row -->
            <div class="relative z-10 flex items-end gap-2">
                <span id="currentBetCoin" class="font-[800] text-[40px] leading-[1.2]" style="background: linear-gradient(179deg, rgba(255,255,255,1) 0%, rgba(240,201,63,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: 'Bricolage Grotesque', sans-serif;">@FormatMoney(Model?.userStatus?.bet_coin)</span>
                <span class="text-white font-[800] text-[20px] uppercase pb-[6px]" style="font-family: 'Bricolage Grotesque', sans-serif;">htg</span>
            </div>
        </div>

        <!-- Selection Area (Horizontal Cards) -->
        <div class="mb-4">
            <h2 class="text-[#534A4A] font-[900] text-[18px] mb-2 pl-1">@Lang.millions_choose_account</h2>
            <div class="flex gap-3">
            <!-- Basic Account Option -->
            <div id="selectBasic" onclick="selectChannel(1)" class="channel-card flex-1 bg-white h-[68px] rounded-[18px] border-2 border-[#0062FF] shadow-md flex items-center px-3 gap-2 cursor-pointer relative">
                <!-- Selected Icon -->
                <div class="check-icon absolute -top-2 -right-1 bg-white rounded-full">
                    <i class="fa-solid fa-circle-check text-[#00AF1B] text-[20px]"></i>
                </div>
                <span class="text-[#0062FF] font-[900] text-[15px] leading-tight flex-1">@Lang.Basic<br />@Lang.Account</span>
                <img src="/Millions/img/transfer_basic_icon.png" alt="Basic" class="w-12 h-10 object-contain" />
            </div>
            <!-- Natcash Card -->
            <div id="selectNatcash" onclick="selectChannel(2)" class="channel-card flex-1 bg-white h-[68px] rounded-[18px] border border-gray-100 shadow-sm flex items-center px-3 gap-2 cursor-pointer relative overflow-visible">
                <!-- Selected Icon (Hidden by default) -->
                <div class="check-icon absolute -top-2 -right-1 bg-white rounded-full hidden">
                    <i class="fa-solid fa-circle-check text-[#00AF1B] text-[20px]"></i>
                </div>
                <div class="flex-1 overflow-hidden h-full flex items-center">
                    <img src="/Millions/img/transfer_other_card.png" alt="Natcash" class="w-full h-full object-contain" />
                </div>
            </div>
            </div>
        </div>

        <!-- Form Fields Area -->
        <div class="flex flex-col gap-1.5">
            <!-- Sender Phone -->
            <div class="flex flex-col gap-1.5">
                <label class="text-[#534A4A] font-[900] text-[15px] px-1 capitalize">@Lang.millions_sender_phone</label>
                <div class="relative w-full group">
                    <input type="text" readonly value="@(Model?.userStatus?.msisdn ?? "0")" class="w-full bg-gray-100 border border-gray-300 text-[#534A4A] text-[17px] font-[800] rounded-[18px] py-3 px-5 outline-none transition-all cursor-not-allowed" />
                    <div class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400">
                        <i class="fa-solid fa-lock text-[20px] opacity-40"></i>
                    </div>
                </div>
            </div>

            <!-- Receiver Phone (Mandatory same as sender) -->
            <div class="flex flex-col gap-1.5">
                <label class="text-[#534A4A] font-[900] text-[15px] px-1 capitalize">@Lang.millions_receiver_phone</label>
                <div class="relative w-full">
                    <input id="receiverPhone" type="tel" readonly value="@(Model?.userStatus?.msisdn ?? "0")" class="w-full bg-gray-100 border border-gray-300 text-[#534A4A] text-[17px] font-[800] rounded-[18px] py-3 px-5 outline-none transition-all cursor-not-allowed" />
                    <div class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400">
                        <i class="fa-solid fa-lock text-[20px] opacity-40"></i>
                    </div>
                </div>
            </div>

            <!-- Amount -->
            <div class="flex flex-col gap-1.5">
                <label class="text-[#534A4A] font-[900] text-[15px] px-1 capitalize">@Lang.millions_amount_htg</label>
                <div class="relative w-full">
                    <input id="transferAmount" type="number" value="5000" placeholder="5,000" class="w-full bg-white border border-gray-300 focus:border-[#0062FF] focus:ring-2 focus:ring-[#0062FF]/10 text-[#0062FF] text-[17px] font-[800] rounded-[18px] py-3 px-5 outline-none transition-all placeholder:text-gray-300" />
                    <span class="absolute right-5 top-1/2 -translate-y-1/2 text-gray-400 font-black">HTG</span>
                </div>
                <!-- Shortcut Buttons -->
                <div class="flex gap-2 mt-0.5">
                    <button onclick="setAmount(10, this)" class="amt-btn flex-1 py-1.5 border border-gray-300 rounded-lg text-[14px] font-black transition-all bg-white text-[#534A4A] flex items-center justify-center gap-1 shadow-sm">
                        10
                        <i class="fa-solid fa-circle-check text-[#00AF1B] text-[14px] hidden"></i>
                    </button>
                    <button onclick="setAmount(1000, this)" class="amt-btn flex-1 py-1.5 border border-gray-300 rounded-lg text-[14px] font-black transition-all bg-white text-[#534A4A] flex items-center justify-center gap-1 shadow-sm">
                        1.000
                        <i class="fa-solid fa-circle-check text-[#00AF1B] text-[14px] hidden"></i>
                    </button>
                    <button id="defaultAmt" onclick="setAmount(5000, this)" class="amt-btn flex-1 py-1.5 border-2 border-white bg-[#0062FF] rounded-lg text-[14px] font-black text-white transition-all flex items-center justify-center gap-1 shadow-md">
                        5.000
                        <i class="fa-solid fa-circle-check text-white text-[14px]"></i>
                    </button>
                </div>

                <!-- Fee Section (Newly placed on a new line) -->
                <div class="mt-3 flex flex-col gap-0.5 px-1">
                    <span class="text-gray-500 font-bold text-[13px]">@Lang.millions_fee</span>
                    <span class="text-black font-black text-[24px] leading-none">@Lang.millions_free</span>
                </div>
            </div>
        </div>

        <!-- Main Action Button -->
        <div class="mt-4">
            <button id="btnContinue" class="btn-premium btn-premium-red w-full text-white font-[900] text-[17px] py-4 rounded-[22px] active:scale-95 transition-all uppercase tracking-wide">
                @Lang.millions_continue
            </button>
        </div>
            </div>
        </div>
    </div>

    <!-- Success Modal Overlay -->
    <div id="successModal" class="transfer-success-overlay fixed inset-0 z-[110] flex items-center justify-center hidden px-4">
        <div class="transfer-success-card animate__animated animate__zoomIn animate__faster relative">
            <div class="transfer-success-body">
                <div class="transfer-success-hero">
                    <div class="transfer-success-deco" aria-hidden="true">
                        <span class="d1"></span><span class="d2"></span><span class="d3"></span><span class="d4"></span>
                        <span class="dash dash-1"></span><span class="dash dash-2"></span><span class="dash dash-3"></span>
                        <i class="fa-solid fa-star spark spark-1"></i>
                        <i class="fa-solid fa-star spark spark-2"></i>
                    </div>
                    <div class="transfer-success-ring">
                        <i class="fa-solid fa-check" aria-hidden="true"></i>
                    </div>
                </div>

                <h2 class="transfer-success-title">@Lang.success</h2>
                <p class="transfer-success-sub">@Lang.millions_payment_successfully</p>

                <div class="transfer-success-panel">
                    <div class="transfer-success-row">
                        <div class="transfer-success-row-icon"><i class="fa-solid fa-credit-card" aria-hidden="true"></i></div>
                        <span class="transfer-success-row-label">@Lang.amount_transfered</span>
                        <span id="successAmount" class="transfer-success-row-value transfer-success-row-value--accent">5.000 HTG</span>
                    </div>
                    <div class="transfer-success-row">
                        <div class="transfer-success-row-icon"><i class="fa-solid fa-user" aria-hidden="true"></i></div>
                        <span class="transfer-success-row-label">@Lang.sender</span>
                        <span id="successSender" class="transfer-success-row-value">50940236545</span>
                    </div>
                    <div class="transfer-success-row">
                        <div class="transfer-success-row-icon"><i class="fa-solid fa-user" aria-hidden="true"></i></div>
                        <span class="transfer-success-row-label">@Lang.receiver</span>
                        <span id="successReceiver" class="transfer-success-row-value">50940236545</span>
                    </div>
                    <div class="transfer-success-row">
                        <div class="transfer-success-row-icon"><i class="fa-solid fa-tag" aria-hidden="true"></i></div>
                        <span class="transfer-success-row-label">@Lang.fee</span>
                        <span class="transfer-success-row-value">0 HTG</span>
                    </div>
                </div>

                <div class="transfer-success-time">
                    <div class="transfer-success-row-icon"><i class="fa-regular fa-clock" aria-hidden="true"></i></div>
                    <span class="transfer-success-time-label">@Lang.time</span>
                    <span id="successTime" class="transfer-success-time-value">08/01/2022 - 10:00:20</span>
                </div>

                <div class="transfer-success-illustration" aria-hidden="true">
                    <svg viewBox="0 0 140 88" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 44h18M6 52h12" stroke="#0062FF" stroke-width="2.2" stroke-linecap="round"/>
                        <path d="M24 36c2-8 10-10 18-8l52 12c8 2 12 8 10 16l-6 14c-2 6-8 8-16 6L32 66c-8-2-12-10-8-30z" stroke="#0062FF" stroke-width="2.2" fill="none" stroke-linejoin="round"/>
                        <rect x="38" y="40" width="40" height="24" rx="4" transform="rotate(-10 58 52)" stroke="#0062FF" stroke-width="2" fill="#fff"/>
                        <text x="54" y="58" transform="rotate(-10 58 52)" fill="#0062FF" font-size="17" font-weight="800" font-family="system-ui,Segoe UI,sans-serif">$</text>
                        <circle cx="108" cy="60" r="17" fill="#0062FF"/>
                        <path d="M102 60l5 5 11-12" stroke="#fff" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </div>
            <div class="transfer-success-actions">
                <button type="button" class="transfer-success-btn-continue" onclick="window.location.href = (typeof subDomain !== 'undefined' ? subDomain : '') + '@Url.Action("TransferWinMoney", "Home", new { area = "Millions" })';">
                    @Lang.millions_continue
                </button>
                <button type="button" class="transfer-success-btn-close" onclick="window.location.href = (typeof subDomain !== 'undefined' ? subDomain : '') + '@Url.Action("GameHome", "Home", new { area = "Millions" })';">
                    @Lang.close
                </button>
            </div>
        </div>
    </div>

    <!-- Failure Modal Overlay -->
    <div id="failureModal" class="transfer-success-overlay fixed inset-0 z-[110] flex items-center justify-center hidden px-4">
        <div class="transfer-fail-card animate__animated animate__zoomIn animate__faster relative w-full max-w-[370px]">
            <div class="transfer-fail-header">
                <div class="transfer-fail-header-deco" aria-hidden="true"></div>
                <div class="transfer-fail-icon-wrap">
                    <div class="transfer-fail-icon-circle">
                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </div>
                    <div class="transfer-fail-icon-warn">
                        <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
            <div class="transfer-fail-body">
                <h2 class="transfer-fail-title">@Lang.fail_exclamation</h2>
                <p id="failErrorMessage" class="transfer-fail-msg">@Lang.millions_enter_valid_amount</p>
                <div class="transfer-fail-divider" aria-hidden="true"><span></span></div>
                <div class="transfer-fail-illustration" aria-hidden="true">
                    <svg viewBox="0 0 140 88" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M18 52h22M18 60h14" stroke="#0062FF" stroke-width="2" stroke-linecap="round"/>
                        <path d="M36 42c2-7 9-9 16-7l46 10c7 2 11 7 9 14l-5 12c-2 5-7 7-14 5L40 64c-7-2-11-8-8-26z" stroke="#0062FF" stroke-width="2" fill="none" stroke-linejoin="round"/>
                        <path d="M78 38c8-6 18-8 26-4" stroke="#0062FF" stroke-width="2" stroke-linecap="round"/>
                        <circle cx="96" cy="28" r="14" stroke="#0062FF" stroke-width="2" fill="#fff"/>
                        <path d="M92 28h8M96 24v8" stroke="#0062FF" stroke-width="1.8" stroke-linecap="round"/>
                        <path d="M88 22l4-6 3 5M104 20l6-2-2 6" stroke="#0062FF" stroke-width="1.5" stroke-linecap="round" opacity="0.7"/>
                    </svg>
                </div>
            </div>
            <div id="failureModalStandardActions" class="transfer-success-actions">
                <button type="button" class="transfer-success-btn-continue" onclick="window.location.href = (typeof subDomain !== 'undefined' ? subDomain : '') + '@Url.Action("TransferWinMoney", "Home", new { area = "Millions" })';">
                    @Lang.millions_continue
                </button>
                <button type="button" class="transfer-success-btn-close" onclick="window.location.href = (typeof subDomain !== 'undefined' ? subDomain : '') + '@Url.Action("GameHome", "Home", new { area = "Millions" })';">
                    @Lang.close
                </button>
            </div>
            <div id="failureModalUpgradeActions" class="transfer-success-actions is-hidden">
                <button type="button" class="transfer-success-btn-close" onclick="window.location.href = (typeof subDomain !== 'undefined' ? subDomain : '') + '/Account/Login';">
                    @Lang.login
                </button>
            </div>
        </div>
    </div>


    <!-- OTP Modal Overlay -->
    <div id="otpModal" class="fixed inset-0 z-[120] flex items-center justify-center hidden px-6" style="background: rgba(0,0,0,0.7);">
        <!-- Glitter/Sparkles Overlay -->
        <img src="/Millions/img/modal/otp_glitter.png" class="absolute pointer-events-none opacity-60 w-full max-w-[500px]" />

        <div class="w-full max-w-[360px] bg-white rounded-[32px] overflow-visible flex flex-col items-center animate__animated animate__zoomIn animate__faster relative border-4 border-[#FFCD1D]/10" style="box-shadow: 0 0 25px rgba(229, 107, 35, 0.6);">
            
            <!-- Gold Coins on Top -->
            <img src="/Millions/img/modal/otp_coins.png" class="absolute -top-12 -right-2 w-32 z-30 pointer-events-none drop-shadow-lg" />

            <!-- Red Header -->
            <div class="w-full bg-[#0062FF] pt-5 pb-4 px-6 rounded-t-[32px] flex justify-center border-b-4 border-white/20">
                <h3 class="text-white font-[900] text-[22px] tracking-tight text-center">@Lang.millions_confirm_transaction</h3>
            </div>

            <div class="relative z-10 w-full flex flex-col items-center p-6 py-6 pb-8">
                
                <!-- Shield Icon -->
                <div class="flex flex-col items-center gap-1 mb-2">
                    <img src="/Millions/img/modal/transfer_coins_exchange.png" class="w-[168px] max-w-[85vw] h-auto object-contain drop-shadow-md" alt="" />
                    <span class="text-[#534A4A] font-bold text-[14px]">@Lang.millions_convert</span>
                </div>

                <!-- Conversion Display Area -->
                <div class="flex items-center justify-center gap-2 mb-4">
                    <span id="displayAmountCoins" class="text-[#0062FF] font-[900] text-[24px]">100</span>
                    <span class="text-black font-[900] text-[24px]">@Lang.millions_coins</span>
                    <i class="fa-solid fa-arrow-right text-gray-800 text-[20px] mx-1"></i>
                    <span id="displayAmountHTG" class="text-[#0062FF] font-[900] text-[24px]">100</span>
                    <span class="text-black font-[900] text-[24px]">@Lang.millions_htg</span>
                </div>

                <p class="text-[#534A4A] font-bold text-[14px] text-center px-4 mb-6 leading-tight">@Lang.millions_enter_otp_proceed</p>
                
                <!-- OTP Inputs Area -->
                <div class="flex gap-2 mb-4" id="otpInputs">
                    <input type="tel" maxlength="1" pattern="[0-9]" inputmode="numeric" oninput="handleOtpInput(this)" onkeydown="handleOtpKeydown(event, this)" placeholder="-"
                           class="otp-digit w-[42px] h-[48px] bg-[#757575] text-white rounded-[10px] text-center text-[26px] font-[900] outline-none transition-all placeholder:text-white/60 shadow-inner" />
                    <input type="tel" maxlength="1" pattern="[0-9]" inputmode="numeric" oninput="handleOtpInput(this)" onkeydown="handleOtpKeydown(event, this)" placeholder="-"
                           class="otp-digit w-[42px] h-[48px] bg-[#757575] text-white rounded-[10px] text-center text-[26px] font-[900] outline-none transition-all placeholder:text-white/60 shadow-inner" />
                    <input type="tel" maxlength="1" pattern="[0-9]" inputmode="numeric" oninput="handleOtpInput(this)" onkeydown="handleOtpKeydown(event, this)" placeholder="-"
                           class="otp-digit w-[42px] h-[48px] bg-[#757575] text-white rounded-[10px] text-center text-[26px] font-[900] outline-none transition-all placeholder:text-white/60 shadow-inner" />
                    <input type="tel" maxlength="1" pattern="[0-9]" inputmode="numeric" oninput="handleOtpInput(this)" onkeydown="handleOtpKeydown(event, this)" placeholder="-"
                           class="otp-digit w-[42px] h-[48px] bg-[#757575] text-white rounded-[10px] text-center text-[26px] font-[900] outline-none transition-all placeholder:text-white/60 shadow-inner" />
                    <input type="tel" maxlength="1" pattern="[0-9]" inputmode="numeric" oninput="handleOtpInput(this)" onkeydown="handleOtpKeydown(event, this)" placeholder="-"
                           class="otp-digit w-[42px] h-[48px] bg-[#757575] text-white rounded-[10px] text-center text-[26px] font-[900] outline-none transition-all placeholder:text-white/60 shadow-inner" />
                    <input type="tel" maxlength="1" pattern="[0-9]" inputmode="numeric" oninput="handleOtpInput(this)" onkeydown="handleOtpKeydown(event, this)" placeholder="-"
                           class="otp-digit w-[42px] h-[48px] bg-[#757575] text-white rounded-[10px] text-center text-[26px] font-[900] outline-none transition-all placeholder:text-white/60 shadow-inner" />
                </div>
                
                <!-- OTP Error Message -->
                <p id="otpError" class="text-[#0062FF] font-bold text-[14px] text-center mb-4 hidden animate__animated animate__shakeX"></p>

                <!-- Timer & Resend Display -->
                <div class="flex flex-col items-center justify-center mb-6 gap-2">
                    <span id="otpTimer" class="text-[#0062FF] font-[900] text-[18px]">60s</span>
                    <button id="resendOtpBtn" onclick="sendOtpRequest()" class="hidden text-[15px] font-black text-[#0A9800] underline decoration-solid underline-offset-[4px] hover:text-[#087a00] transition-all font-bricolage">@Lang.millions_request_new_otp</button>
                </div>
                
                <!-- Action Buttons -->
                <div class="w-full flex gap-4">
                    <button onclick="closeOtpModal()" class="btn-premium flex-1 bg-[#757575] text-white font-[900] py-2.5 rounded-[16px] active:scale-95 transition-all text-[13px]">@Lang.cancel</button>
                    <button id="btnConfirmTransfer" disabled class="btn-premium flex-1 bg-[#0A9800] text-white font-[900] py-2.5 rounded-[16px] active:scale-95 transition-all text-[13px] disabled:opacity-50 disabled:grayscale disabled:cursor-not-allowed">@Lang.confirm</button>
                </div>
            </div>
        </div>
    </div>

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


@section Scripts {
    <script>
        function setAmount(val, el) {
            $("#transferAmount").val(val);
            
            // Update active state visuals
            $(".amt-btn").removeClass("border-2 border-white bg-[#0062FF] text-white shadow-md").addClass("border-gray-300 bg-white text-[#534A4A] shadow-sm");
            $(".amt-btn i").addClass("hidden").removeClass("text-white").addClass("text-[#00AF1B]"); // reset icons
            
            $(el).removeClass("border-gray-300 bg-white text-[#534A4A] shadow-sm").addClass("border-2 border-white bg-[#0062FF] text-white shadow-md");
            $(el).find("i").removeClass("hidden").removeClass("text-[#00AF1B]").addClass("text-white"); // show current check icon in white
        }

        // Logic removed as fields are read-only

        let timerInterval;
        let isProcessing = false;
        let selectedChannel = 1; // 1 = Basic, 2 = Natcash

        function selectChannel(id) {
            selectedChannel = id;
            
            // Reset both
            $(".channel-card").removeClass("border-2 border-[#0062FF] shadow-md").addClass("border border-gray-100 shadow-sm");
            $(".channel-card .check-icon").addClass("hidden");
            
            // Activate selected
            if (id === 1) {
                $("#selectBasic").removeClass("border-gray-100 shadow-sm").addClass("border-2 border-[#0062FF] shadow-md");
                $("#selectBasic .check-icon").removeClass("hidden");
            } else {
                $("#selectNatcash").removeClass("border-gray-100 shadow-sm").addClass("border-2 border-[#0062FF] shadow-md");
                $("#selectNatcash .check-icon").removeClass("hidden");
            }
        }

        $("#btnContinue").on("click", function() {
            if (isProcessing) return; // Prevent double-click
            const rawAmount = $("#transferAmount").val();
            const amount = parseFloat(unformatMoneyV2(rawAmount)) || 0;
            const phone = $("#receiverPhone").val();
            const winMoney = parseFloat(unformatMoneyV2("@(Model?.userStatus?.bet_coin ?? "0")")) || 0;
            
            if(amount <= 0) {
                showFailureModal("@Html.Raw(Lang.millions_enter_valid_amount)");
                return;
            }

            if(amount > winMoney) {
                showFailureModal("@Html.Raw(Lang.millions_insufficient_balance)");
                return;
            }

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

            // Call sendotp API
            $.ajax({
                url: subDomain + "/Millions/Home/SendOTP",
                type: "POST",
                data: { phone: phone, amount: unformatMoneyV2(rawAmount), channelPayment: selectedChannel },
                success: function(res) {
                    $btn.prop('disabled', false).html(originalText);
                    isProcessing = false;
                    if(res.responseCode == "0" || res.responseCode == 0) {
                        openOtpModal();
                    } else {
                        showFailureModal(res.message || "Failed to send OTP", res.responseCode);
                    }
                },
                error: function() {
                    $btn.prop('disabled', false).html(originalText);
                    isProcessing = false;
                    showFailureModal("Network error while sending OTP");
                }
            });
        });

        function openOtpModal() {
            // Clear previous OTP values
            $(".otp-digit").val("");
            $("#btnConfirmTransfer").prop('disabled', true);
            
            // Set display amounts
            const amt = $("#transferAmount").val();
            const formattedAmt = formatMoneyV2(amt);
            $("#displayAmountCoins").text(formattedAmt);
            $("#displayAmountHTG").text(formattedAmt);

            $("#otpModal").removeClass("hidden").addClass("flex");
            resetTimer();
            $(".otp-digit").first().focus();
        }

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

        // OTP input: enforce single digit, auto-advance
        function handleOtpInput(el) {
            // Allow only single digit
            el.value = el.value.replace(/[^0-9]/g, '').slice(0, 1);
            
            if (el.value.length === 1) {
                const next = $(el).next('.otp-digit');
                if (next.length) {
                    next.focus();
                }
            }

            // Check if all 6 digits filled
            var filled = 0;
            $(".otp-digit").each(function() { if ($(this).val().length >= 1) filled++; });
            $("#btnConfirmTransfer").prop('disabled', filled < 6);

            // Clear error when typing and reset color to red
            $("#otpError").addClass("hidden").text("").removeClass("text-[#0A9800]").addClass("text-[#0062FF] animate__shakeX");
        }

        // OTP backspace: move to previous input
        function handleOtpKeydown(e, el) {
            if (e.key === 'Backspace') {
                if (el.value.length === 0) {
                    const prev = $(el).prev('.otp-digit');
                    if (prev.length) {
                        prev.focus();
                    }
                }
            }
        }

        function resetTimer() {
            let seconds = 60;
            clearInterval(timerInterval);
            $("#otpTimer").removeClass("hidden").text("60s");
            $("#resendOtpBtn").addClass("hidden");
            // Keep confirm disabled until OTP is filled — don't re-enable here
            
            timerInterval = setInterval(() => {
                seconds--;
                $("#otpTimer").text(seconds + "s");
                if (seconds <= 0) {
                    clearInterval(timerInterval);
                    $("#otpTimer").addClass("hidden");
                    $("#resendOtpBtn").removeClass("hidden");
                    // Disable confirm when timer expired
                    $("#btnConfirmTransfer").prop('disabled', true).addClass('opacity-50');
                }
            }, 1000);
        }

        function sendOtpRequest() {
            const $btn = $("#resendOtpBtn");
            const originalText = $btn.text();
            $btn.prop('disabled', true).text("...");

            $.ajax({
                url: subDomain + "/Millions/Home/SendOTP",
                type: 'POST',
                success: function(data) {
                    $btn.prop('disabled', false).text(originalText);
                    if (data.responseCode === "0" || data.responseCode === 0) {
                        resetTimer();
                        $("#otpError").removeClass("text-[#0062FF] animate__shakeX").addClass("text-[#0A9800]").text("@Lang.millions_otp_sent_successfully").removeClass("hidden");
                        $(".otp-digit").val("").first().focus();
                    } else {
                        if (data.responseCode === "-2" || (data.responseMessage && data.responseMessage.includes("System is upgrading"))) {
                             closeOtpModal();
                             showFailureModal(data.responseMessage || "System is upgrading", data.responseCode);
                        } else {
                             $("#otpError").removeClass("text-[#0A9800]").addClass("text-[#0062FF] animate__shakeX").text(data.responseMessage || "Failed to resend OTP").removeClass("hidden");
                        }
                    }
                },
                error: function() {
                    $btn.prop('disabled', false).text(originalText);
                    $("#otpError").text("Network error occurred.").removeClass("hidden");
                }
            });
        }

        $("#btnConfirmTransfer").on("click", function() {
            if (isProcessing) return; // Prevent double-click

            let otp = "";
            $(".otp-digit").each(function() { otp += $(this).val(); });
            
            if(otp.length < 6) {
                showFailureModal("Please enter 6-digit OTP");
                return;
            }

            // Lock button + show loading
            isProcessing = true;
            const $btn = $(this);
            const originalText = $btn.html();
            $btn.prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin mr-2"></i> ...');
            
            // Call the unified backend action that verifies OTP and then transfers
            $.ajax({
                url: subDomain + "/Millions/Home/ConfirmTransfer",
                type: "POST",
                data: {
                    otp: otp,
                    phone: $("#receiverPhone").val(),
                    amount: unformatMoneyV2($("#transferAmount").val()),
                    channelPayment: selectedChannel
                },
                success: function(res) {
                    $btn.prop('disabled', false).html(originalText);
                    isProcessing = false;

                    if(res.responseCode == "0" || res.responseCode == 0) {
                        closeOtpModal();
                        
                        // Update balance in UI immediately
                        if(res.userStatus && res.userStatus.bet_coin) {
                           $("#currentBetCoin").text(formatMoneyV2(res.userStatus.bet_coin));
                        }

                        // Populate Success Modal Fields
                        const transferAmt = $("#transferAmount").val();
                        $("#successAmount").text(formatMoneyV2(transferAmt) + " HTG");
                        $("#successSender").text("@(Model?.userStatus?.msisdn ?? "0")");
                        $("#successReceiver").text($("#receiverPhone").val());
                        
                        const now = new Date();
                        const pad = (n) => n.toString().padStart(2, '0');
                        const formattedTime = `${pad(now.getDate())}/${pad(now.getMonth() + 1)}/${now.getFullYear()} - ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
                        $("#successTime").text(formattedTime);

                        $("#successModal").removeClass("hidden").addClass("flex");
                    } else {
                        if (res.responseCode === "-2" || (res.message && res.message.includes("System is upgrading"))) {
                             closeOtpModal();
                             showFailureModal(res.message || "System is upgrading", res.responseCode);
                        } else {
                             $("#otpError").text(res.message || "Invalid OTP").removeClass("hidden");
                             $(".otp-digit").val("");
                             $(".otp-digit").first().focus();
                        }
                    }
                },
                error: function() {
                    $btn.prop('disabled', false).html(originalText);
                    isProcessing = false;
                    showFailureModal("Network error while confirming transfer");
                }
            });
        });

        function showFailureModal(message, code) {
            $("#failErrorMessage").html(message);
            if (code === "-2" || (message && message.includes("System is upgrading"))) {
                $("#failureModalStandardActions").addClass("is-hidden");
                $("#failureModalUpgradeActions").removeClass("is-hidden");
            } else {
                $("#failureModalStandardActions").removeClass("is-hidden");
                $("#failureModalUpgradeActions").addClass("is-hidden");
            }
            $("#failureModal").removeClass("hidden").addClass("flex");
        }
    </script>
}