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-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_Pick10">@Lang.rule_play_now</button>
                    </div>
                </div>
            </div>

            <!-- Card 2 and 3 commented out by user previously -->
            <!-- Game Card 2: Millions -->
            <div class="card-blue 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 animate__delay-1s"
                 onclick="goMillionsGameHome('@Constants.Millions_CODE')">
                <!-- 1. Premium Gradient Border -->
                <div class="absolute inset-0 rounded-2xl border-[1.5px] border-white/30 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 z-10">
                        <img src="/LotteryV2/img/m1.png" alt="Icon" class="absolute left-[-2px] bottom-[-8px] h-[105px] object-contain z-10">
                        
                        <!-- 2 quả bóng trang trí -->
                        <img src="/LotteryV2/img/ball_86.png" class="absolute left-[-12px] top-[15px] w-[32px] h-[32px] object-contain z-0 drop-shadow-md transform -rotate-[15deg]">
                        <img src="/LotteryV2/img/ball_88.png" class="absolute left-[63px] top-[40px] w-[26px] h-[26px] object-contain z-0 drop-shadow-md transform rotate-[10deg]">
                        
                        <!-- Chấm bi trang trí -->
                        <div class="absolute left-[38px] top-[18px] w-1.5 h-1.5 bg-[#fff04c] rounded-full z-20"></div>
                        <div class="absolute left-[18px] bottom-[15px] w-[9px] h-[9px] bg-white rounded-full z-20"></div>
                        <div class="absolute left-[45px] bottom-[22px] w-[6px] h-[6px] bg-white rounded-full z-20"></div>
                        
                        <div class="absolute left-[8px] bottom-[22px] z-30 text-[18px] font-black italic tracking-widest text-[#d5fbff] leading-none" style="text-shadow: -1.5px -1.5px 0 #00459c, 1.5px -1.5px 0 #00459c, -1.5px 1.5px 0 #00459c, 1.5px 1.5px 0 #00459c, 0px 3px 0px #002251, 0 4px 5px rgba(0,0,0,0.4);">
                            @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)">30.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-3 relative px-1 group z-20">
                        <!-- Ghép 2 ảnh: Dola xếp sau, Icon vàng xếp trước và căn giữa tuyệt đối theo nút -->
                        <div class="absolute bottom-[30px] left-1/2 transform -translate-x-1/2 w-[70px] h-[72px] pointer-events-none group-active:scale-95 transition-transform z-10">
                            <img src="/LotteryV2/img/millionair_guy.png" alt="Dola" class="absolute top-0 right-[-6px] w-[56px] h-[56px] object-contain filter drop-shadow-md z-0">
                            <img src="/LotteryV2/img/play_millionair.png" alt="Money" class="absolute bottom-1 left-[-6px] w-[62px] h-[62px] object-contain filter drop-shadow-lg z-10">
                        </div>
                        
                        <button class="bg-gradient-to-b from-[#ffef7c] via-[#fed444] to-[#fdb514] text-black font-black px-2 w-full max-w-[90px] py-[6px] rounded-full text-[14px] shadow-[0_4px_10px_rgba(0,0,0,0.25)] border-[1.5px] border-white/60 group-hover:brightness-110 group-active:scale-95 transition-all relative z-0 flex items-center justify-center"
                                onclick="event.stopPropagation(); goMillionsGameHome('@Constants.Millions_CODE')">
                            @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 goMillionsGameHome(termType) {
        location.href = subDomain + '@Url.Action("GameHome", "Home", new { area = "Millions" })?termType=' + termType;
    }

    function startCountdown() {
        const targetHour = 20; // 20:00 (8 PM) Haiti time
        const timeZone = 'America/Port-au-Prince';
        const timers = document.querySelectorAll('.countdown-timer');

        // Server time string has no offset => must be interpreted in Haiti timezone
        const serverTimeStr = '@Model.serverTime.ToString("yyyy-MM-ddTHH:mm:ss")';
        const startBrowser = moment();
        const baseServer = moment.tz(serverTimeStr, 'YYYY-MM-DDTHH:mm:ss', timeZone);

        function update() {
            const elapsedMs = moment().diff(startBrowser);
            const now = baseServer.clone().add(elapsedMs, 'milliseconds'); // Haiti time

            let target = now.clone().hour(targetHour).minute(0).second(0).millisecond(0);
            if (now.isSameOrAfter(target)) target.add(1, 'day');

            const dur = moment.duration(target.diff(now));
            const h = Math.max(0, Math.floor(dur.asHours()));
            const m = Math.max(0, dur.minutes());
            const s = Math.max(0, dur.seconds());

            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>