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?.fullName ?? "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 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-xs 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>
             <button class="btn-pulse border border-white/50 rounded-xl py-2 px-3 flex items-center justify-center gap-1 text-xs font-extrabold bg-white/10 hover:bg-white/20 transition-all">
                 <span>🎫</span> @Lang.my_ticket
             </button>
        </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" style="background-image: url('/LotteryV2/img/wavy_border.svg'); background-size: 100% 100%; background-repeat: no-repeat; height: 114px;">
        <!-- Inner Absolute centering to match SVG border limits correctly -->
        <div class="absolute inset-0 flex items-start justify-between px-6 pt-6 text-gray-800">
             <div class="flex items-center gap-2">
                 <div class="bg-red-50 p-1.5 rounded-lg text-[#EE0033]">
                     <img src="/LotteryV2/img/icon_calendar.svg" alt="Calendar" class="w-5 h-5">
                 </div>
                 <div>
                     <div class="text-[10px] text-gray-400 font-bold">@Lang.next_draw</div>
                     <div class="text-xs font-black text-gray-800" id="draw-date">Friday, Mar 20, 2026</div>
                 </div>
             </div>
             
             <!-- Timer Boxes -->
             <div class="flex gap-3 text-center">
                 <div class="flex flex-col"><span class="text-xl font-black text-gray-800" id="countdown-hours">00</span><span class="text-[8px] text-gray-400 font-extrabold uppercase mt-0.5">@Lang.hours</span></div>
                 <div class="text-gray-400 font-bold pt-1">:</div>
                 <div class="flex flex-col"><span class="text-xl font-black text-gray-800" id="countdown-minutes">00</span><span class="text-[8px] text-gray-400 font-extrabold uppercase mt-0.5">@Lang.mins</span></div>
                 <div class="text-gray-400 font-bold pt-1">:</div>
                 <div class="flex flex-col"><span class="text-xl font-black text-gray-800" id="countdown-seconds">00</span><span class="text-[8px] text-gray-400 font-extrabold uppercase mt-0.5">@Lang.seconds</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-3 pb-40 relative z-10 mt-[5px]">
        
        <!-- Game item 1: Basic Pick 10 -->
        <div class="w-full bg-[#E11D48] p-3.5 rounded-2xl relative overflow-hidden card-shadow text-white border border-white/10 filter brightness-105 cursor-pointer transform active:scale-[0.98] transition-all" onclick="checkTerm('@Constants.PIC10_BASIC_CODE')">
            <div class="absolute -left-6 -top-6 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
            <div class="grid grid-cols-10 items-center">
                <div class="col-span-3 flex flex-col items-start">
                    <div class="text-[12px] font-black italic tracking-wider">@Lang.basic_account</div>
                    <div class="text-xs font-black italic tracking-wider text-yellow-300 -mt-0.5 flex items-center gap-1">
                        <span>Pick</span>
                        <img src="/LotteryV2/img/ball_10.png" alt="10" class="w-5 h-5 object-contain">
                    </div>
                </div>
                <div class="col-span-4 flex flex-col items-center text-center">
                    <div class="text-[12px] uppercase font-bold text-white/80">@Lang.jackpot_prize</div>
                    <div class="text-xl font-extrabold text-[#FBF3A7] tracking-wider">100.000 <span class="text-[10px] font-bold">@Lang.v2_htg</span></div>
                    <div class="text-[10px] mt-1 flex gap-1 items-center">@Lang.next_round <span class="font-bold text-yellow-300">05:00</span></div>
                </div>
                <div class="col-span-3 flex flex-col justify-end items-center h-full relative">
                    <img src="/LotteryV2/img/gold_chest.png" alt="Chest" class="w-14 h-14 object-contain filter drop-shadow-md">
                    <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-red-700 font-extrabold px-3 py-1 rounded-xl text-[12px] shadow-sm mt-1">@Lang.play</button>
                </div>
            </div>
        </div>

        <!-- Game item 2: Big/Small -->
        <div class="w-full p-3.5 rounded-2xl relative overflow-hidden card-shadow text-white border border-white/10 cursor-pointer transform active:scale-[0.98] transition-all" style="background-color: rgb(38 163 30);" onclick="checkTerm('@Constants.PIC10_BIGSMALL_CODE')">
            <div class="absolute -left-6 -top-6 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
            <div class="grid grid-cols-10 items-center">
                <div class="col-span-3 flex flex-col items-start">
                    <div class="text-[12px] font-black italic tracking-wide">@Lang.small_big</div>
                    <div class="flex items-center gap-1 mt-1">
                        <img src="/LotteryV2/img/ball_88.png" alt="88" class="w-5 h-5 object-contain">
                    </div>
                </div>
                <div class="col-span-4 flex flex-col items-center text-center">
                    <div class="text-[12px] uppercase font-bold text-white/80">@Lang.jackpot_prize</div>
                    <div class="text-xl font-extrabold text-[#FBF3A7] tracking-wider">100 <span class="text-[10px] font-bold">@Lang.v2_htg</span></div>
                    <div class="text-[10px] mt-1 flex gap-1 items-center">@Lang.next_round <span class="font-bold text-yellow-300">05:00</span></div>
                </div>
                <div class="col-span-3 flex flex-col justify-end items-center h-full relative">
                    <img src="/LotteryV2/img/gold_bag.png" alt="Bag" class="w-14 h-14 object-contain filter drop-shadow-md">
                    <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-emerald-800 font-extrabold px-3 py-1 rounded-xl text-[12px] shadow-sm mt-1">@Lang.play</button>
                </div>
            </div>
        </div>

        <!-- Game item 3: @Lang.odd_even -->
        <div class="w-full p-3.5 rounded-2xl relative overflow-hidden card-shadow text-white border border-white/10 cursor-pointer transform active:scale-[0.98] transition-all" style="background-color: rgb(213 45 233);" onclick="checkTerm('@Constants.PIC10_ODDEVEN_CODE')">
            <div class="absolute -left-6 -top-6 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
            <div class="grid grid-cols-10 items-center">
                <div class="col-span-3 flex flex-col items-start">
                    <div class="text-[12px] font-black italic tracking-wide">@Lang.odd_even</div>
                    <div class="flex items-center gap-1 mt-1">
                        <img src="/LotteryV2/img/ball_3.png" alt="3" class="w-4 h-4 object-contain">
                        <img src="/LotteryV2/img/ball_20.png" alt="20" class="w-5 h-5 object-contain -ml-1">
                    </div>
                </div>
                <div class="col-span-4 flex flex-col items-center text-center">
                    <div class="text-[12px] uppercase font-bold text-white/80">@Lang.jackpot_prize</div>
                    <div class="text-xl font-extrabold text-[#FBF3A7] tracking-wider">200 <span class="text-[10px] font-bold">@Lang.v2_htg</span></div>
                    <div class="text-[10px] mt-1 flex gap-1 items-center">@Lang.next_round <span class="font-bold text-yellow-300">05:00</span></div>
                </div>
                <div class="col-span-3 flex flex-col justify-end items-center h-full relative">
                    <img src="/LotteryV2/img/gold_wallet.png" alt="Wallet" class="w-14 h-14 object-contain filter drop-shadow-md">
                    <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-blue-800 font-extrabold px-3 py-1 rounded-xl text-[12px] shadow-sm mt-1">@Lang.play</button>
                </div>
            </div>
        </div>

    </div>

    <!-- Banner Info Section centered red text bar -->
    <div class="fixed bottom-[74px] left-1/2 -translate-x-1/2 w-full max-w-[414px] bg-[#EE0033] text-white py-2 text-center text-[12px] 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-[18px] 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');
            }

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

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