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

@{
    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-4 mt-2">
        <div class="flex flex-col gap-3">
            
            <!-- Game Card 1: Basic Pick 10 (Dynamic Language) -->
            <div class="card-red relative w-full h-[110px] rounded-2xl overflow-hidden shadow-lg transform hover:scale-[1.01] transition-all duration-200 cursor-pointer animate__animated animate__slideInUp">
                <!-- Glowing effect circle inside card background -->
                <div class="absolute -left-4 -top-4 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
                <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-black/10 rounded-full blur-xl"></div>

                <div class="absolute inset-0 grid grid-cols-10 items-center px-3 text-white">
                    <!-- Left: Module and Ball component -->
                    <div class="col-span-3 flex flex-col items-start justify-center pl-2">
                        <div class="relative">
                            <div class="text-[13px] font-black italic tracking-wider text-white">@Lang.Basic</div>
                            <div class="text-[14px] font-black italic tracking-wider text-yellow-300 -mt-1">Pick</div>
                            <!-- Yellow number style ball -->
                            <div class="absolute left-10 top-2 w-7 h-7 bg-gradient-to-br from-yellow-300 to-yellow-500 rounded-full border border-white flex items-center justify-center shadow-md">
                                <span class="text-red-700 font-extrabold text-xs">10</span>
                            </div>
                        </div>
                    </div>

                    <!-- Center: Dynamic text layer aligned for Translation -->
                    <div class="col-span-4 flex flex-col items-center justify-center text-center">
                        <div class="text-[10px] uppercase font-bold text-gray-200 tracking-wider">@Lang.jackpot_prize</div>
                        <div class="text-2xl font-black text-yellow-400 mt-0.5" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3)">100.000<span class="text-xs font-normal text-white"> @Lang.v2_htg</span></div>
                        <div class="text-[9px] text-gray-200 mt-1 flex gap-1">@Lang.next_round <span class="font-bold text-white">05:00</span></div>
                    </div>

                    <!-- Right: Illustration from image overlay & button -->
                    <div class="col-span-3 flex flex-col items-center justify-end h-full pb-2 relative">
                        <img src="/LotteryV2/img/gold.png" alt="Chest" class="absolute -top-1 right-2 w-14 h-14 object-contain animate__animated animate__pulse animate__infinite animate__slow">
                        <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-red-700 font-extrabold px-3 py-1.5 rounded-xl text-[10px] shadow-md hover:from-yellow-200 hover:to-yellow-300" onclick="changeGame()" id="MEGA_LOTO_ID" value="@Constants.MEGA_LOTO">@Lang.play</button>
                    </div>
                </div>
            </div>

            <!-- Card 2 and 3 commented out by user previously -->
             <!-- Game Card 2: Millionair (Dynamic Language) -->
            @* <div class="card-blue relative w-full h-[110px] rounded-2xl overflow-hidden shadow-lg transform hover:scale-[1.01] transition-all duration-200 cursor-pointer animate__animated animate__slideInUp animate__delay-1s">
                <div class="absolute -left-4 -top-4 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
                
                <div class="absolute inset-0 grid grid-cols-10 items-center px-3 text-white">
                    <!-- Left: Millionair text content -->
                    <div class="col-span-3 flex items-center h-full relative">
                        <!-- Left Illustration overlapping -->
                        <img src="/LotteryV2/img/m1.png" alt="Icon" class="absolute -left-1 bottom-0 h-[85px] object-contain">
                        <div class="pl-12 text-[14px] font-black italic tracking-wider text-white mt-1">Millionair</div>
                    </div>

                    <div class="col-span-4 flex flex-col items-center justify-center text-center">
                        <div class="text-[10px] uppercase font-bold text-gray-200 tracking-wider">Jackpot Prize</div>
                        <div class="text-2xl font-black text-yellow-400 mt-0.5" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3)">500.000<span class="text-xs font-normal text-white"> HTG</span></div>
                        <div class="text-[9px] text-gray-200 mt-1 flex gap-1">Next round <span class="font-bold text-white">05:00</span></div>
                    </div>

                    <div class="col-span-3 flex flex-col items-center justify-end h-full pb-2 relative">
                        <!-- Assuming multiple icons overlay, can absolute them. m1 was cash illustration downloaded earlier -->
                        <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-red-700 font-extrabold px-3 py-1.5 rounded-xl text-[10px] shadow-md hover:from-yellow-200 hover:to-yellow-300">Play now</button>
                    </div>
                </div>
            </div> *@

            <!-- Game Card 3: Mega Bet -->
            @* <div class="card-orange relative w-full h-[110px] rounded-2xl overflow-hidden shadow-lg transform hover:scale-[1.01] transition-all duration-200 cursor-pointer animate__animated animate__slideInUp animate__delay-2s">
                <div class="absolute -left-4 -top-4 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
                
                <div class="absolute inset-0 grid grid-cols-10 items-center px-3 text-white">
                    <!-- Left: Standard dynamic texts with overlay red car if any layout overlaps -->
                    <div class="col-span-3 flex flex-col items-start justify-center pl-2">
                        <div class="relative">
                            <div class="text-[13px] font-black italic tracking-wider text-white">MEGA</div>
                            <div class="text-[14px] font-black italic tracking-wider text-red-200 -mt-1">Bet</div>
                            <div class="absolute left-10 top-1 flex">
                                <span class="w-5 h-5 rounded-full bg-white text-gray-800 text-[10px] font-bold flex items-center justify-center border border-gray-300 -mr-1 shadow-sm">88</span>
                                <span class="w-5 h-5 rounded-full bg-red-500 text-white text-[10px] font-bold flex items-center justify-center border border-white shadow-sm">99</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-span-4 flex flex-col items-center justify-center text-center">
                        <div class="text-[10px] uppercase font-bold text-gray-200 tracking-wider">Jackpot Prize</div>
                        <div class="text-2xl font-black text-yellow-400 mt-0.5" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3)">800.000<span class="text-xs font-normal text-white"> HTG</span></div>
                        <div class="text-[9px] text-gray-200 mt-1 flex gap-1">Next round <span class="font-bold text-white">05:00</span></div>
                    </div>

                    <div class="col-span-3 flex flex-col items-center justify-end h-full pb-2 relative">
                        <!-- illustration3 is Red Car, absolute positioned overlay at the top edge of back section layout -->
                        <img src="/LotteryV2/img/illustration3.png" alt="Car" class="absolute -top-1 -right-1 w-16 h-12 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.5 rounded-xl text-[10px] shadow-md hover:from-yellow-200 hover:to-yellow-300">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;
        }
</script>