@{
    ViewData["Title"] = "LotteryV2 - Trang Chủ";
}
@using LotteryWebApp.Languages;
@using LotteryWebApp.Controllers;
@using LotteryWebApp.Common;

<!-- Tailwind CSS isolated loaded specifically for this Page -->
<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">
    <div class="relative w-full flex flex-col items-center pt-3">
        <a href="@Url.Action("ChooseApp", "Account", new { area = "" })" class="absolute left-4 top-4 z-20 w-10 h-10 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center text-white border border-white/20 hover:bg-white/30 transition-all shadow-lg active:scale-90">
            <i class="fas fa-chevron-left text-lg"></i>
        </a>

        <!-- Logo -->
        <div class="w-56 z-10 filter drop-shadow-md">
            <img src="/LotteryV2/img/logo.png" alt="Logo" class="w-full h-auto object-contain">
        </div>
        
        <!-- Banner Illustration sits absolute layered or under -->
        <div class="w-full -mt-12">
            <img src="/LotteryV2/img/top_banner.png" alt="Top Banner" class="w-full h-auto object-cover">
        </div>
    </div>

    <!-- Game List Section -->
    <div class="px-3 -mt-24 relative z-30">
        <div class="flex flex-col gap-3">
            <!-- Game Card 1: Basic Pick 10 -->
            <div class="relative w-full h-[120px] rounded-2xl overflow-hidden shadow-2xl transform active:scale-[0.98] transition-all duration-300 cursor-pointer animate__animated animate__slideInUp card-red" onclick="changeGame()">
                <!-- 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 opacity-90 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 opacity-90" alt="highlight">

                <div class="absolute inset-0 grid grid-cols-12 items-center px-3 z-20 gap-0">
                    <!-- Left: Basic Pick + Ball (4 columns) -->
                    <div class="col-span-4 flex items-center gap-1 pl-1">
                        <div class="flex flex-col leading-none">
                            <!-- <span class="text-white font-black italic text-[14px]">@Lang.Basic</span> -->
                            <span class="text-yellow-400 font-black italic text-[22px] -mt-1 shadow-sm">@Lang.Pick</span>
                        </div>
                        <div class="w-8 h-8 bg-gradient-to-br from-yellow-300 to-yellow-500 rounded-full border-[2px] border-white flex items-center justify-center shadow-xl transform rotate-12 flex-shrink-0">
                            <span class="text-red-700 font-black text-xl">10</span>
                        </div>
                    </div>

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

                    <!-- Right: Action Section (4 columns) -->
                    <div class="col-span-4 flex flex-col items-center justify-end h-full pb-4 relative cursor-pointer group">
                        <img src="/LotteryV2/img/gold.png" alt="Chest" class="absolute bottom-[40px] w-16 h-18 object-contain filter drop-shadow-lg z-10 group-active:scale-95 transition-transform">
                        <button class="bg-gradient-to-b from-yellow-300 to-white text-black font-black px-2 w-full max-w-[110px] py-1.5 rounded-[12px] text-[13px] shadow-xl border border-white/50 group-hover:brightness-110 group-active:scale-95 transition-all relative z-0" id="MEGA_LOTO_ID" value="@Constants.MEGA_LOTO">@Lang.rule_play_now</button>
                    </div>
                </div>
            </div>

            <!-- Card 2 and 3 commented out by user previously -->
            <!-- Game Card 2: Millionair - Blurred/Faded State -->
            <div class="card-blue relative w-full h-[120px] rounded-2xl overflow-hidden shadow-md opacity-25 grayscale blur-[1px] pointer-events-none animate__animated animate__slideInUp animate__delay-1s">
                <!-- 1. Premium Gradient Border -->
                <div class="absolute inset-0 rounded-2xl border-[1.5px] border-white/20 pointer-events-none z-20"></div>
                
                <!-- 2. Decorative Highlights -->
                <div class="absolute -left-[70px] -top-[108px] w-[193px] h-[193px] bg-gradient-to-br from-white/30 to-transparent rounded-full blur-3xl pointer-events-none"></div>

                <div class="absolute inset-0 grid grid-cols-12 items-center px-3 z-20 gap-0 text-white">
                    <!-- Left: Millionair text content (4 columns) -->
                    <div class="col-span-4 flex items-center h-full relative pl-1">
                         <img src="/LotteryV2/img/m1.png" alt="Icon" class="absolute -left-2 bottom-0 h-[90px] object-contain z-0 opacity-80">
                         <div class="relative z-10 text-[14px] font-black italic tracking-wider text-white drop-shadow-lg leading-tight pl-2">@Lang.millionair</div>
                    </div>

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

                    <!-- Right: Action Section (4 columns) -->
                    <div class="col-span-4 flex flex-col items-center justify-end h-full pb-4 relative px-1">
                        <img src="/LotteryV2/img/money_bag_large.png" alt="Money Bag" class="absolute bottom-[40px] w-16 h-18 object-contain filter drop-shadow-lg z-10">
                        <button class="bg-gradient-to-b from-yellow-300 to-white text-black font-black px-2 w-full max-w-[110px] py-1.5 rounded-[12px] text-[13px] shadow-xl border border-white/50 group-hover:brightness-110 group-active:scale-95 transition-all relative z-0">@Lang.rule_play_now</button>
                    </div>
                </div>
            </div>

            <!-- Game Card 3: Mega Bet - Blurred/Faded State -->
            <div class="card-orange relative w-full h-[120px] rounded-2xl overflow-hidden shadow-md opacity-25 grayscale blur-[1px] pointer-events-none animate__animated animate__slideInUp animate__delay-2s">
                 <!-- 1. Premium Gradient Border -->
                 <div class="absolute inset-0 rounded-2xl border-[1.5px] border-white/20 pointer-events-none z-20"></div>

                 <!-- 2. Decorative Highlights -->
                 <div class="absolute -left-[70px] -top-[108px] w-[193px] h-[193px] bg-gradient-to-br from-white/30 to-transparent rounded-full blur-3xl pointer-events-none"></div>

                 <div class="absolute inset-0 grid grid-cols-12 items-center px-3 z-20 gap-0 text-white">
                    <!-- Left: Mega Bet text content (4 columns) -->
                    <div class="col-span-4 flex flex-col items-start justify-center pl-2">
                        <div class="relative">
                            <div class="text-[14px] font-black italic tracking-wider text-white">@Lang.MEGA</div>
                            <div class="text-[15px] font-black italic tracking-wider text-red-200 -mt-1">@Lang.Bet</div>
                            <div class="absolute left-10 top-1 flex shadow-lg">
                                <span class="w-6 h-6 rounded-full bg-white text-gray-800 text-[11px] font-bold flex items-center justify-center border border-gray-300 -mr-1">88</span>
                                <span class="w-6 h-6 rounded-full bg-red-500 text-white text-[11px] font-bold flex items-center justify-center border border-white">99</span>
                            </div>
                        </div>
                    </div>

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

                    <!-- Right: Action Section (4 columns) -->
                    <div class="col-span-4 flex flex-col items-center justify-end h-full pb-4 relative px-1">
                        <img src="/LotteryV2/img/illustration3.png" alt="Car" class="absolute bottom-[40px] w-16 h-18 object-contain filter drop-shadow-lg z-10 orientation-flip">
                        <button class="bg-gradient-to-b from-yellow-300 to-white text-black font-black px-2 w-full max-w-[110px] py-1.5 rounded-[12px] text-[13px] shadow-xl border border-white/50 group-hover:brightness-110 group-active:scale-95 transition-all relative z-0">@Lang.rule_play_now</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script>
    function changeGame() {
        var termType = $("#MEGA_LOTO_ID").val();
        location.href = subDomain + '@Url.Action("GameHome", "Home", new { area = "LotteryV2" })?termType=' + termType;
    }

    function startCountdown() {
        const targetHour = 20; // 20:00 (8 PM)
        const timers = document.querySelectorAll('.countdown-timer');
        
        function update() {
            const now = new Date();
            let target = new Date();
            target.setHours(targetHour, 0, 0, 0);
            
            if (now >= target) {
                target.setDate(target.getDate() + 1);
            }
            
            const diff = target - now;
            const h = Math.floor(diff / (1000 * 60 * 60));
            const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const s = Math.floor((diff % (1000 * 60)) / 1000);
            
            const timeStr = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
            timers.forEach(t => t.innerText = timeStr);
        }
        
        update();
        setInterval(update, 1000);
    }
    document.addEventListener('DOMContentLoaded', startCountdown);
</script>