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

@model LotteryWebApp.Models.HomeIndex_ViewModel
@{
    ViewData["Title"] = "LotteryV2 - Game Home";
    Layout = "~/Areas/LotteryV2/Views/Shared/_Layout.cshtml";
}
@using LotteryWebApp.Languages;
@using LotteryWebApp.Controllers;
@using LotteryWebApp.Common;


<div class="main-container animate__animated animate__fadeIn bg-[#F5F5F5] min-h-screen">
    <!-- Top Account Profile Bar / Backgound Red header -->
    <div class="w-full bg-[#EE0033] p-4 text-white rounded-b-0xl shadow-md">
        <!-- Row 1: Profile Info -->
        <div class="flex items-center gap-4">
            <div class="w-16 h-16 rounded-full border-2 border-white/60 overflow-hidden bg-[#FFE] shadow-sm">
                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Ngan" alt="Avatar" class="w-full h-full object-cover">
            </div>
            <div>
                <div class="font-bold text-sm tracking-wide opacity-90">@(Model?.profile?.users ?? "User")</div>
                <div class="flex items-center gap-1 mt-0.5">
                    <span class="text-3xl font-black text-[#FBF3A7]" style="text-shadow: 0 1px 2px rgba(0,0,0,0.2)">@(Model?.userStatus?.bet_coin ?? "0")</span>
                    <span class="text-xs font-bold text-[#FBF3A7] uppercase mt-1">@Lang.v2_htg</span>
                </div>
            </div>
        </div>

        <!-- Row 2: Pill Actions Full Width Split -->
        <div class="grid grid-cols-2 gap-3 mt-4">
             <a onclick="checkTerm('@Constants.PIC10_BASIC_CODE')" class="btn-pulse border border-white/50 rounded-xl py-2 px-3 flex items-center justify-center gap-1 text-xr font-extrabold bg-white/10 hover:bg-white/20 transition-all text-white no-underline">
                 <span class="text-yellow-300 text-xl">⚡</span> @Lang.quick_pick
             </a>
             <a href="/LotteryV2/Home/Results" class="btn-pulse border border-white/50 rounded-xl py-2 px-3 flex items-center justify-center gap-1 text-xr font-extrabold bg-white/10 hover:bg-white/20 transition-all text-white no-underline">
                <span class="text-yellow-300 text-xl">🎫</span> @Lang.results
             </a>
        </div>

        <!-- Row 3: Withdraw Button Full Width -->
        <div class="w-full mt-3">
             <button onclick="location.href='@Url.Action("TransferWinMoney", "Home")'" class="btn-pulse w-full text-black font-black py-3 rounded-2xl text-[18px] flex items-center justify-center gap-2 shadow-lg transition-all" style="background: linear-gradient(118deg, #19EF4B 0%, #C0FF4B 100%);">
                 <span>@Lang.tranfer_win_money</span>
                 <img src="/LotteryV2/img/gold_wallet.png" alt="Wallet" class="w-6 h-6 object-contain">
             </button>
        </div>
    </div>

    <!-- Countdown Timer Bar with Scalloped bottom divider background -->
    <div class="relative w-full overflow-hidden" style="background-image: url('/LotteryV2/img/wavy_border.svg'); background-size: 102% 100%; background-position: center; background-repeat: no-repeat; height: 114px;">
        <!-- Top border red line -->
        <div class="absolute top-0 left-0 w-full h-[1.5px] bg-[#EE0033]"></div>
        
        <div class="flex items-center justify-between px-5 pt-7 relative z-10">
             <!-- Left: Draw Date -->
             <div class="flex items-center gap-1 flex-1 min-w-0">
                 <div class="w-8 h-8 flex-shrink-0">
                     <img src="/LotteryV2/img/calendar_icon_3d.png" alt="Calendar" class="w-full h-full object-contain" onerror="this.src='/LotteryV2/img/icon_calendar.svg'">
                 </div>
                 <div class="flex flex-col min-w-0">
                     <span class="text-[11px] text-[#A1A1A1] font-bold leading-none mb-1">Next Pick 10 draw</span>
                     <span class="text-[12px] font-[900] text-black tracking-tight leading-none" id="draw-date">Friday, Mar 20, 2026</span>
                 </div>
             </div>

             <!-- Middle: Dashed Divider -->
             <div class="h-10 w-px border-l border-dashed border-gray-300 mx-2"></div>
             
             <!-- Right: Timer -->
             <div class="flex gap-3.5 shrink-0">
                 <div class="flex flex-col items-center">
                     <span class="text-[12px] text-black font-semibold">@Lang.hours</span>
                     <span class="text-[26px] font-[1000] text-black leading-none font-bricolage" id="countdown-hours">82</span>
                 </div>
                 <div class="flex flex-col items-center">
                    <span class="text-[12px] text-black font-semibold">@Lang.Minutes</span>
                     <span class="text-[26px] font-[1000] text-black leading-none font-bricolage" id="countdown-minutes">50</span>
                 </div>
                 <div class="flex flex-col items-center">
                    <span class="text-[12px] text-black font-semibold">@Lang.Secs</span>
                     <span class="text-[26px] font-[1000] text-black leading-none font-bricolage" id="countdown-seconds">55</span>
                 </div>
             </div>
        </div>
    </div>

    <!-- Anti-forgery token for AJAX -->
    @Html.AntiForgeryToken()

    <!-- Card list items with accurate illustrations -->
    <div class="px-3 flex flex-col gap-2 pb-40 relative z-10 mt-[14px]">
        
        <!-- Game item 1: Basic Pick 10 -->
        <div class="relative w-full h-[120px] rounded-2xl overflow-hidden shadow-xl font-bricolage transition-all duration-300 active:scale-[0.98] cursor-pointer card-red" onclick="checkTerm('@Constants.PIC10_BASIC_CODE')">
            <!-- 1. Premium Gradient Border -->
            <div class="absolute inset-0 rounded-2xl border-[1.5px] border-white/40 pointer-events-none z-20"></div>
            
            <!-- 2. Decorative Highlights -->
            <img src="/LotteryV2/img/decorations/ellipse_1183.png" class="absolute -left-[80px] -top-[130px] w-[220px] h-[220px] pointer-events-none z-10 mix-blend-screen scale-y-[-1]" alt="highlight">
            <img src="/LotteryV2/img/decorations/ellipse_1181.png" class="absolute -right-[60px] -top-[20px] w-[200px] h-[200px] pointer-events-none z-10 mix-blend-screen" alt="highlight">

            <div class="absolute inset-0 grid grid-cols-10 items-center px-3 z-20 gap-0">
                <!-- Left: Basic Pick + Ball (3 columns) -->
                <div class="col-span-3 flex items-center h-full pl-1 relative">
                    <!-- Text Layout -->
                    <div class="flex flex-col items-center leading-[0.85] relative z-10 font-UTM_Futura_Extra">
                        <span class="text-white font-[900] text-[16px] drop-shadow-md">@Lang.Basic</span>
                        <span class="font-[900] text-[30px] drop-shadow-lg leading-[0.9]" style="background: linear-gradient(180deg, #FFFFFF 20%, #FFF307 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">@Lang.Pick</span>
                        
                        <!-- Floating Bubbles (Matching Image) -->
                        <div class="absolute top-[-4px] right-[-4px] w-2.5 h-2.5 bg-white rounded-full shadow-sm"></div>
                        <div class="absolute top-[18px] right-[-6px] w-2 h-2 bg-yellow-400 rounded-full shadow-sm"></div>
                        <div class="absolute bottom-[-6px] left-[10px] w-1.5 h-1.5 bg-white rounded-full opacity-80"></div>
                    </div>

                    <!-- Single Ball 10 (Yellow) -->
                    <div class="relative w-[36px] h-[36px] flex-shrink-0 -ml-18 aspect-square z-20">
                        <div class="w-full h-full bg-[#FFDE59] rounded-full border-[2.5px] border-white flex items-center justify-center shadow-lg">
                            <span class="text-black font-[900] text-[18px] leading-none mb-0.5">10</span>
                        </div>
                        <!-- Extra decorative dot overlapping ball -->
                        <div class="absolute top-1 -left-1 w-2 h-2 bg-white rounded-full shadow-sm"></div>
                    </div>
                </div>

                <!-- Center: Jackpot info (4 columns) -->
                <div class="col-span-4 flex flex-col items-center justify-center text-center">
                    <div class="text-[14px] font-bold text-white mb-0.5 whitespace-nowrap opacity-90">@Lang.jackpot_prize</div>
                    <div class="flex items-start gap-0.5">
                        <span class="text-[26px] font-black text-[#FBF3A7] leading-none" style="text-shadow: 0 4px 8px rgba(0,0,0,0.3)">100.000</span>
                        <span class="text-[9px] font-bold text-white uppercase opacity-90 mt-1">@Lang.v2_htg</span>
                    </div>
                    <div class="text-[12px] text-white/90 font-medium whitespace-nowrap mt-1">@Lang.next_round <span class="font-black text-yellow-300 ml-1 countdown-timer">00:00:00</span></div>
                </div>

                <!-- Right: Action Section (3 columns) -->
                <div class="col-span-3 flex flex-col items-center justify-end h-full pb-3.5 relative">
                    <img src="/LotteryV2/img/gold_chest.png" alt="Chest" class="absolute bottom-[38px] w-18 h-20 object-contain filter drop-shadow-lg z-10">
                    <button class="text-black font-black px-3 w-full py-1.5 rounded-[12px] text-[13px] shadow-xl border border-white/50 hover:brightness-110 active:scale-95 transition-all relative z-0" style="background: linear-gradient(180deg, #FFF385 0%, #EFAD19 100%);">@Lang.rule_play_now</button>
                </div>
            </div>
        </div>

        <!-- Game item 2: Big/Small -->
        <div class="relative w-full h-[120px] rounded-2xl overflow-hidden shadow-xl font-bricolage transition-all duration-300 active:scale-[0.98] cursor-pointer card-shadow text-white border border-white/10" style="background-color: rgb(38 163 30);" onclick="checkTerm('@Constants.PIC10_BIGSMALL_CODE')">
            <!-- 1. Premium Gradient Border -->
            <div class="absolute inset-0 rounded-2xl border-[1.5px] border-white/40 pointer-events-none z-20"></div>
            
            <!-- 2. Decorative Highlights -->
            <img src="/LotteryV2/img/decorations/ellipse_1183.png" class="absolute -left-[80px] -top-[130px] w-[220px] h-[220px] pointer-events-none z-10 mix-blend-screen scale-y-[-1]" alt="highlight">
            <img src="/LotteryV2/img/decorations/ellipse_1181.png" class="absolute -right-[60px] -top-[20px] w-[200px] h-[200px] pointer-events-none z-10 mix-blend-screen" alt="highlight">

            <div class="absolute inset-0 grid grid-cols-10 items-center px-3 z-20 gap-0">
                <!-- Left: Big/Small + Ball (3 columns) -->
                <div class="col-span-3 flex items-center h-full pl-1 relative">
                    <!-- Text Layout -->
                    <div class="flex flex-col items-center leading-[0.85] relative z-10 font-UTM_Futura_Extra">
                        <span class="text-white font-[900] text-[16px] drop-shadow-md">@Lang.Small</span>
                        <span class="font-[900] text-[30px] drop-shadow-lg leading-[0.9]" style="background: linear-gradient(180deg, #FFFFFF 20%, #89FF77 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">@Lang.Big</span>
                        
                        <!-- Decorative dots (Bubbles) -->
                         <div class="absolute -top-1 -right-1 w-2.5 h-2.5 bg-white/40 rounded-full blur-[1px]"></div>
                         <div class="absolute top-1/2 -right-5 w-2 h-2 bg-white rounded-full shadow-sm opacity-90"></div>
                         <div class="absolute -bottom-2 left-6 w-1.5 h-1.5 bg-yellow-200 rounded-full opacity-80"></div>
                         <div class="absolute top-2 -left-2 w-1.5 h-1.5 bg-white/60 rounded-full"></div>
                    </div>

                    <!-- Single Ball 88 -->
                    <div class="relative w-[48px] h-[48px] flex-shrink-0 -ml-18 mt-1 aspect-square z-20">
                        <img src="/LotteryV2/img/ball_88.png" alt="88" class="w-full h-full object-contain filter drop-shadow-[0_4px_10px_rgba(0,0,0,0.5)]">
                        <!-- Extra small decorative white dot near ball -->
                        <div class="absolute -top-1 -right-1 w-2.5 h-2.5 bg-white rounded-full shadow-sm"></div>
                        <div class="absolute -bottom-1 left-0 w-1.5 h-1.5 bg-white/50 rounded-full"></div>
                    </div>
                </div>

                <!-- Center: Jackpot info (4 columns) -->
                <div class="col-span-4 flex flex-col items-center justify-center text-center">
                    <div class="text-[14px] font-bold text-white mb-0.5 whitespace-nowrap opacity-90">@Lang.jackpot_prize</div>
                    <div class="flex items-start gap-0.5">
                        <span class="text-[26px] font-black text-[#FBF3A7] leading-none" style="text-shadow: 0 4px 8px rgba(0,0,0,0.3)">100</span>
                        <span class="text-[9px] font-bold text-white uppercase opacity-90 mt-1">@Lang.v2_htg</span>
                    </div>
                    <div class="text-[12px] text-white/90 font-medium whitespace-nowrap mt-1">@Lang.next_round <span class="font-black text-yellow-300 ml-1 countdown-timer">00:00:00</span></div>
                </div>

                <!-- Right: Action Section (3 columns) -->
                <div class="col-span-3 flex flex-col items-center justify-end h-full pb-3.5 relative">
                    <img src="/LotteryV2/img/gold_bag.png" alt="Bag" class="absolute bottom-[38px] w-18 h-20 object-contain filter drop-shadow-lg z-10">
                    <button class="text-black font-black px-3 w-full py-1.5 rounded-[12px] text-[13px] shadow-xl border border-white/50 hover:brightness-110 active:scale-95 transition-all relative z-0" style="background: linear-gradient(180deg, #FFF385 0%, #EFAD19 100%);">@Lang.rule_play_now</button>
                </div>
            </div>
        </div>

        <!-- Game item 3: @Lang.odd_even -->
        <div class="relative w-full h-[120px] rounded-2xl overflow-hidden shadow-xl font-bricolage transition-all duration-300 active:scale-[0.98] cursor-pointer card-shadow text-white border border-white/10" style="background-color: rgb(213 45 233);" onclick="checkTerm('@Constants.PIC10_ODDEVEN_CODE')">
            <!-- 1. Premium Gradient Border -->
            <div class="absolute inset-0 rounded-2xl border-[1.5px] border-white/40 pointer-events-none z-20"></div>
            
            <!-- 2. Decorative Highlights -->
            <img src="/LotteryV2/img/decorations/ellipse_1183.png" class="absolute -left-[80px] -top-[130px] w-[220px] h-[220px] pointer-events-none z-10 mix-blend-screen scale-y-[-1]" alt="highlight">
            <img src="/LotteryV2/img/decorations/ellipse_1181.png" class="absolute -right-[60px] -top-[20px] w-[200px] h-[200px] pointer-events-none z-10 mix-blend-screen" alt="highlight">

            <div class="absolute inset-0 grid grid-cols-10 items-center px-3 z-20 gap-0">
                <!-- Left: Odd/Even + Balls (3 columns) -->
                <div class="col-span-3 flex items-center h-full pl-1 relative">
                    <!-- Text Layout -->
                    <div class="flex flex-col items-center leading-[0.85] relative z-10 font-UTM_Futura_Extra">
                        <span class="text-white font-[900] text-[16px] drop-shadow-md">@Lang.Odd</span>
                        <span class="font-[900] text-[30px] drop-shadow-lg leading-[0.9]" style="background: linear-gradient(180deg, #FFFFFF 20%, #F29CFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">@Lang.Even</span>
                        
                        <!-- Decorative dots (Bubbles) -->
                         <div class="absolute -top-2 -right-2 w-3 h-3 bg-white/30 rounded-full blur-[1px]"></div>
                         <div class="absolute top-1/2 -right-5 w-2 h-2 bg-yellow-300 rounded-full shadow-sm"></div>
                         <div class="absolute -top-1 -left-1 w-1.5 h-1.5 bg-white/50 rounded-full"></div>
                         <div class="absolute -bottom-2 right-2 w-1.5 h-1.5 bg-white rounded-full opacity-80"></div>
                    </div>

                    <!-- Balls Overlapping -->
                    <div class="relative w-[60px] h-[60px] flex-shrink-0 -ml-18 -mt-1 aspect-square z-20">
                        <!-- Ball 3 (Yellow) -->
                        <div class="absolute left-0 top-0 w-8 h-8 rounded-full shadow-lg z-0">
                             <img src="/LotteryV2/img/ball_3.png" alt="3" class="w-full h-full object-contain">
                        </div>
                        <!-- Ball 20 (Pink/Magenta) -->
                        <div class="absolute left-4 top-3 w-9 h-9 rounded-full shadow-xl z-10">
                             <img src="/LotteryV2/img/ball_20.png" alt="20" class="w-full h-full object-contain border-2 border-white/20 rounded-full">
                        </div>
                        <!-- Small highlight dot near ball -->
                        <div class="absolute -top-1 right-2 w-1.5 h-1.5 bg-white rounded-full shadow-sm opacity-90"></div>
                    </div>
                </div>

                <!-- Center: Jackpot info (4 columns) -->
                <div class="col-span-4 flex flex-col items-center justify-center text-center">
                    <div class="text-[14px] font-bold text-white mb-0.5 whitespace-nowrap opacity-90">@Lang.jackpot_prize</div>
                    <div class="flex items-start gap-0.5">
                        <span class="text-[26px] font-black text-[#FBF3A7] leading-none" style="text-shadow: 0 4px 8px rgba(0,0,0,0.3)">200</span>
                        <span class="text-[9px] font-bold text-white uppercase opacity-90 mt-1">@Lang.v2_htg</span>
                    </div>
                    <div class="text-[12px] text-white/90 font-medium whitespace-nowrap mt-1">@Lang.next_round <span class="font-black text-yellow-300 ml-1 countdown-timer">00:00:00</span></div>
                </div>

                <!-- Right: Action Section (3 columns) -->
                <div class="col-span-3 flex flex-col items-center justify-end h-full pb-3.5 relative">
                    <img src="/LotteryV2/img/gold_wallet.png" alt="Wallet" class="absolute bottom-[38px] w-18 h-20 object-contain filter drop-shadow-lg z-10">
                    <button class="text-black font-black px-3 w-full py-1.5 rounded-[12px] text-[13px] shadow-xl border border-white/50 hover:brightness-110 active:scale-95 transition-all relative z-0" style="background: linear-gradient(180deg, #FFF385 0%, #EFAD19 100%);">@Lang.rule_play_now</button>
                </div>
            </div>
        </div>

    </div>

    <!-- Banner Info Section centered red text bar -->
    <div class="fixed bottom-[74px] left-0 md:left-1/2 md:-translate-x-1/2 w-full md:max-w-[414px] bg-[#EE0033] text-white py-2 text-center text-[13px] font-bold tracking-wide z-40 flex flex-col items-center justify-center overflow-hidden h-auto shadow-md">
         <div class="flex flex-col items-center w-full animate-slide-up">
             <!-- Row 1 -->
             <div class="opacity-90">@Lang.have_chance_to_get</div>
             <!-- Row 2 -->
             <div class="text-[20px] font-black text-[#FBF3A7] mt-0.5">
                  @Lang.jackpot_today_htg
             </div>
         </div>
    </div>

    <!-- Custom Notification Modal (Branded design from Profile) -->
    <div id="notificationModal" class="fixed inset-0 z-[100] flex items-center justify-center hidden px-6 font-bricolage" style="background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);">
        <div class="w-full max-w-[343px] min-h-[480px] bg-white rounded-[24px] overflow-hidden flex flex-col items-center p-8 animate__animated animate__zoomIn animate__faster shadow-2xl">
            <!-- Alert Icon -->
            <div class="w-full flex justify-center mb-8 mt-6">
                <img src="/LotteryV2/img/modal/fail_icon.png" class="w-[180px] h-auto object-contain" alt="Notificaton icon" />
            </div>

            <!-- Message Area -->
            <div class="px-2 text-center mb-10 flex-1 flex items-center justify-center">
                <p id="notificationMessage" class="text-black font-[800] text-[22px] leading-snug">
                    <!-- Message content -->
                </p>
            </div>

            <!-- Action Button -->
            <div class="w-full">
                <button onclick="closeNotificationModal()" class="w-full bg-[#EE0033] text-white font-[800] text-[20px] py-[12px] rounded-[14px] shadow-lg active:scale-95 transition-all">
                    @Lang.try_again
                </button> 
            </div>
        </div>
    </div>

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

@section Scripts {
    <script>
        function showNotification(message) {
            $("#notificationMessage").text(message);
            $("#notificationModal").removeClass("hidden").addClass("flex");
        }

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

        let isCheckingTerm = false;

        function checkTerm(termType) {
            if (isCheckingTerm) return;
            isCheckingTerm = true;

            // Get anti-forgery token from the page
            var token = $('input[name="__RequestVerificationToken"]').val();
            
            // Show loading or disable buttons if needed
            $.ajax({
                url: subDomain + '/LotteryV2/Home/TermResult',
                type: 'POST',
                data: {
                    __RequestVerificationToken: token,
                    termType: termType
                },
                success: function (res) {
                    if (res.responseCode === "0") {
                        if (res.listTerm && res.listTerm.length > 0) {
                            var status = res.listTerm[0].status;
                            if (status === "0" || status === "1") {
                                location.href = subDomain + '/LotteryV2/Home/BuyTicket?termType=' + termType;
                                return;
                            } else if (status === "2") {
                                showNotification("@Lang.v2_game_locked");
                            } else if (status === "3") {
                                showNotification("@Lang.v2_updating_results");
                            } else {
                                showNotification("@Lang.v2_game_locked");
                            }
                        } else {
                            showNotification("@Lang.no_results_found");
                        }
                    } else if (res.responseCode === "401") {
                        window.location.href = subDomain + "/Account/Login";
                        return;
                    } else {
                        showNotification(res.responseMessage || "@Lang.error_happened");
                    }
                    isCheckingTerm = false;
                },
                error: function (err) {
                    showNotification("@Lang.error_happened");
                    isCheckingTerm = false;
                }
            });
        }

        function startCountdown() {
            const targetHour = 20; // 20:00 (8h tối)
            const now = new Date();
            let target = new Date();
            target.setHours(targetHour, 0, 0, 0);

            if (now >= target) {
                target.setDate(target.getDate() + 1);
            }

            // Định dạng ngày hiển thị (VD: Friday, Mar 20, 2026)
            const options = { weekday: 'long', month: 'short', day: 'numeric', year: 'numeric' };
            const dateText = target.toLocaleDateString('en-US', options);
            document.getElementById('draw-date').innerText = dateText;

            function updateTime() {
                const current = new Date();
                const diff = target - current;

                if (diff <= 0) {
                    target.setDate(target.getDate() + 1);
                    const updatedDateText = target.toLocaleDateString('en-US', options);
                    document.getElementById('draw-date').innerText = updatedDateText;
                    updateTime();
                    return;
                }

                const hours = Math.floor((diff / (1000 * 60 * 60)));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);

                document.getElementById('countdown-hours').innerText = hours.toString().padStart(2, '0');
                document.getElementById('countdown-minutes').innerText = minutes.toString().padStart(2, '0');
                document.getElementById('countdown-seconds').innerText = seconds.toString().padStart(2, '0');

                // Update all card timers
                const timeStr = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                document.querySelectorAll('.countdown-timer').forEach(t => t.innerText = timeStr);
            }

            updateTime();
            setInterval(updateTime, 1000);
        }

        document.addEventListener('DOMContentLoaded', startCountdown);
    </script>
}