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;

@section Styles {
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/LotteryV2/css/site.css" />
}

<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?.cash_coin ?? "0")</span>
                    <span class="text-xs font-bold text-[#FBF3A7] uppercase mt-1">htg</span>
                </div>
            </div>
        </div>

        <!-- Row 2: Pill Actions Full Width Split -->
        <div class="grid grid-cols-2 gap-3 mt-4">
             <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 class="text-yellow-300 text-xl">⚡</span> @Lang.quick_pick
             </button>
             <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 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>

    <!-- 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">
            <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">HTG</span></div>
                    <div class="text-[8px] 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 transform active:scale-95 transition-all 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" style="background-color: rgb(38 163 30);">
            <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">HTG</span></div>
                    <div class="text-[8px] 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 transform active:scale-95 transition-all 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" style="background-color: rgb(213 45 233);">
            <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">HTG</span></div>
                    <div class="text-[8px] 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 transform active:scale-95 transition-all 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">
                  100.000 HTG today !
             </div>
         </div>
    </div>

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

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

            // Nếu giờ hiện tại đã qua 20h tối, mốc đếm ngược sẽ nhảy sang 20h tối ngày mai
            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>
}