LotteryV2/website/Areas/Millions/Views/Home/Rule.cshtml

@model LotteryWebApp.Models.HomeIndex_ViewModel
@{
    ViewData["Title"] = "Millions - @Lang.rule_title";
    ViewData["ActiveTab"] = "Rule";
    Layout = "~/Areas/Millions/Views/Shared/_Layout.cshtml";
}
@using LotteryWebApp.Languages;

<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="/Millions/css/site.css" />
<link rel="stylesheet" href="/Millions/css/rule.css" />

<!-- Add custom font Bricolage Grotesque to match Figma styling -->
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;700;800;900&display=swap" rel="stylesheet">

<div class="main-container animate__animated animate__fadeIn h-screen relative flex flex-col font-bricolage overflow-hidden" style="background-color: #F5F5F5 !important;">
    
    <!-- Fixed Header & Tabs Group -->
    <div class="fixed top-0 left-0 md:left-1/2 md:-translate-x-1/2 w-full md:max-w-[414px] z-[100] bg-white shadow-md">
        <!-- Header Block (Red) -->
        <div class="w-full bg-[#0062FF] h-[52px] flex items-center justify-between px-4 relative">
            <!-- Back Button -->
            <button onclick="window.history.back()" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-white/20 transition-colors z-10 text-white cursor-pointer">
                <i class="fa-solid fa-arrow-left text-[20px]"></i>
            </button>
            <!-- Title -->
            <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                <span class="text-white text-[24px] font-bold tracking-wide drop-shadow-sm">@Lang.rule_title</span>
            </div>
        </div>

        <!-- Tabs Block Container -->
        <div class="w-full bg-white flex items-center justify-center px-2 pt-3 pb-1 relative shadow-sm transition-all border-b border-gray-100">
            <!-- Tab 1 -->
            <div class="flex flex-col items-center gap-1 cursor-pointer flex-1 group" onclick="switchFAQTab('basic')">
                <span id="tab-basic-label" class="text-[14px] font-bold text-[#534A4A] transition-colors whitespace-nowrap">Millions</span>
                <div id="tab-basic-bar" class="w-full h-[3px] bg-[#0062FF] mt-1 drop-shadow-sm transition-all rounded-t-sm"></div>
            </div>
        </div>
    </div>

    <!-- Main Scrollable Area -->
    <div class="flex-grow overflow-y-auto mt-[96px] pb-32 custom-scrollbar px-4" id="rule-scroll-container">
        <div class="max-w-[380px] mx-auto"> <!-- Wrapper to shrink content width -->

            <!-- Active Tab Content -->
            <div id="tab-content-basic" class="w-full animate__animated animate__fadeIn">
                
                <div class="rule-header-red">@Lang.rule_general_info</div>
                
                <div class="rule-table-grid pb-2">
                    <div class="font-[800]">@Lang.rule_item</div>
                    <div class="font-[800]">@Lang.rule_regulation_draw</div>
                    
                    <div>@Lang.rule_time</div>
                    <div>@Lang.rule_20_30_daily</div>
                    
                    <div>@Lang.rule_ticket_closure</div>
                    <div>@Lang.rule_20_00_daily</div>
                    
                    <div>@Lang.rule_total_numbers</div>
                    <div>@Lang.rule_01_80</div>
        
                    <div>@Lang.rule_numbers_drawn</div>
                    <div>@Lang.rule_20_per_draw</div>
        
                    <div>@Lang.rule_purchase_channels</div>
                    <div>@Lang.rule_ussd_web_app</div>
        
                    <div>@Lang.rule_result_channel</div>
                    <div>@Lang.rule_web_app</div>
        
                    <div>@Lang.rule_duplicate_allowed</div>
                    <div>@Lang.rule_yes</div>
        
                    <div>@Lang.rule_identical_allowed</div>
                    <div>@Lang.rule_yes</div>
                </div>
        
                <div class="rule-header-red">@Lang.rule_game_1_title</div>
        
                <!-- Card Mockup inside Rule -->
                <div class="play-card bg-[#E11D48] relative mx-3 mt-4 mb-4 h-[90px] rounded-2xl overflow-hidden border border-white/20 shadow-lg cursor-pointer transition-all active:scale-[0.98]" onclick="window.location.href='/Millions/Home/GameHome'">
                    <!-- 1. Design-accurate Staggered Ellipses -->
                    <img src="/Millions/img/decorations/ellipse_1183.png" class="absolute -left-[60px] -top-[100px] w-[180px] h-[180px] pointer-events-none z-10 mix-blend-screen opacity-90 scale-y-[-1]" alt="highlight">
                    <img src="/Millions/img/decorations/ellipse_1181.png" class="absolute -right-[50px] -top-[20px] w-[160px] h-[160px] pointer-events-none z-10 mix-blend-screen opacity-90" alt="highlight">

                    <div class="w-full h-full flex items-center justify-between pl-3 pr-2 relative z-10">
                        <div class="flex flex-col items-center justify-center pt-2">
                            <span class="text-[14px] font-black italic text-white drop-shadow-md leading-[1.1] text-center" style="font-family: 'Montserrat', sans-serif;">@Html.Raw(Lang.rule_basic_pick)</span>
                            <img src="/Millions/img/ball_10.png" class="w-7 h-7 object-contain drop-shadow-md -mt-2 -mr-8 border-2 border-[#E11D48] rounded-full bg-[#E11D48]">
                        </div>
        
                        <div class="flex flex-col items-center mt-0.5 ml-4">
                            <span class="text-[10px] font-[800] text-white tracking-widest uppercase drop-shadow">@Lang.rule_jackpot_prize</span>
                            <div class="flex items-start gap-1 mt-0.5">
                                <span class="text-[28px] font-[900] text-white leading-none tracking-tight drop-shadow-md">30.000.000</span>
                                <span class="text-[7px] font-[800] text-white bg-transparent border border-white/60 rounded px-[2px] mt-1 shadow-sm leading-tight">HTG</span>
                            </div>
                            <div class="text-[9px] text-white/90 mt-0.5">@Lang.rule_next_round <span class="font-[900] text-white ml-0.5 drop-shadow">05:00</span></div>
                        </div>
        
                        <div class="flex flex-col items-center justify-center h-full py-2 w-[80px] gap-1">
                            <img src="/Millions/img/play_chest.png" class="h-[46px] w-auto object-contain drop-shadow-lg">
                            <div class="w-full yellow-button text-center rounded-[10px] py-[4px] text-[10px] font-[900] px-2 z-20 active:scale-95 transition-transform text-[#212121] border-2 border-white shadow-lg" style="background: linear-gradient(180deg, #FFE95B 0%, #ECA600 100%);">@Lang.rule_play_now</div>
                        </div>
                    </div>
                </div>
        
                <!-- @Lang.rule_how_to_play Section -->
                <div class="rule-section-title">
                    <span class="icon">&#9670;</span> @Lang.rule_how_to_play
                </div>
                
                <div class="rule-table-grid desc-grid pb-4">
                    <div class="font-[800]">@Lang.rule_item</div>
                    <div class="font-[800]">@Lang.rule_description</div>
                    
                    <div>@Lang.rule_ticket_price</div>
                    <div>@Lang.rule_10_htg</div>
                    
                    <div>@Lang.rule_selection_method</div>
                    <div>@Html.Raw(Lang.rule_choose_10)</div>
                    
                    <div>@Lang.rule_winning_rule</div>
                    <div>@Html.Raw(Lang.rule_10_taken_from)</div>
                    
                    <div>Drawn numbers as the<br>official</div>
                    <div></div>
        
                    <div>@Lang.rule_objective</div>
                    <div>@Lang.rule_match_as_many</div>
                </div>
        
                <!-- @Lang.rule_jackpot_rule Section -->
                <div class="rule-section-title mt-2">
                    <span class="icon">&#9670;</span> @Lang.rule_jackpot_rule
                </div>
        
                <div class="flex justify-center mt-4 mb-4">
                     <img src="/Millions/img/play_chest.png" class="h-[120px] object-contain drop-shadow-xl" alt="Chest" />
                </div>
        
                <div class="text-[11px] font-semibold text-[#212121] px-3 mb-3">@Html.Raw(Lang.rule_match_all_10)</div>
                
                <div class="px-3 flex flex-wrap gap-2 mb-4 justify-start">
                    <div class="ball-green">1</div>
                    <div class="ball-green">4</div>
                    <div class="ball-green">5</div>
                    <div class="ball-green">12</div>
                    <div class="ball-green">24</div>
                    <div class="ball-green">28</div>
                    <div class="ball-green">30</div>
                    <div class="ball-green">37</div>
                    <div class="ball-green">46</div>
                    <div class="ball-green">49</div>
                </div>
        
                <div class="rule-table-grid pb-2">
                    <div class="font-[800]">@Lang.rule_condition</div>
                    <div class="font-[800]">@Lang.rule_prize_pool</div>
                    
                    <div>@Html.Raw(Lang.rule_if_le_10)</div>
                    <div>@Html.Raw(Lang.rule_each_receives)</div>
                    
                    <div class="mt-2">@Html.Raw(Lang.rule_if_gt_10)</div>
                    <div class="mt-2">@Html.Raw(Lang.rule_shared_equally)</div>
                </div>
        
                <!-- @Lang.rule_standard_prize -->
                <div class="rule-section-title mt-4">
                    <span class="icon">&#9670;</span> @Lang.rule_standard_prize
                </div>
        
                <div class="rule-table-grid pb-2">
                    <div class="font-[800]">@Lang.rule_numbers_matches</div>
                    <div class="font-[800]">@Lang.rule_prize_pool_htg</div>
                    
                    <div>9</div>
                    <div>@Html.Raw(Lang.rule_prize_12k)</div>
                    
                    <div>8</div>
                    <div>@Html.Raw(Lang.rule_prize_600)</div>
                    
                    <div>7</div>
                    <div>@Html.Raw(Lang.rule_prize_160)</div>
                    
                    <div>6</div>
                    <div>@Html.Raw(Lang.rule_prize_20)</div>
                    
                    <div>5</div>
                    <div>@Html.Raw(Lang.rule_prize_5)</div>
                </div>
        
            </div>
        
            <!-- Other tabs removed as per request -->
        </div> <!-- End max-width wrapper -->
    </div> <!-- End Scroll Container -->
</div>

<script>

    function switchFAQTab(tabId) {
        // Simple mock tab visual switcher for now matching the exact styling requested
        ['basic', 'smallbig', 'oddeven'].forEach(t => {
            document.getElementById(`tab-${t}-label`).classList.remove('text-[#534A4A]');
            document.getElementById(`tab-${t}-label`).classList.add('text-[#909090]');
            
            let bar = document.getElementById(`tab-${t}-bar`);
            if(bar) {
                bar.classList.remove('bg-[#0062FF]', 'drop-shadow-sm', 'h-[3px]', 'rounded-t-sm');
                bar.classList.add('bg-transparent', 'h-0.5');
            }
            
            let desc = document.getElementById(`tab-${t}-desc`);
            if(desc) {
                desc.classList.remove('text-[#534A4A]');
                desc.classList.add('text-[#909090]');
            }
            
            // Hide content
            let content = document.getElementById(`tab-content-${t.replace('_','')}`);
            if(content) {
                content.classList.add('hidden');
            }
        });

        // activate target
        document.getElementById(`tab-${tabId}-label`).classList.remove('text-[#909090]');
        document.getElementById(`tab-${tabId}-label`).classList.add('text-[#534A4A]');
        
        let targetBar = document.getElementById(`tab-${tabId}-bar`);
        if(targetBar) {
            targetBar.classList.remove('bg-transparent', 'h-0.5');
            targetBar.classList.add('bg-[#0062FF]', 'drop-shadow-sm', 'h-[3px]', 'rounded-t-sm');
        }
        
        let currentDesc = document.getElementById(`tab-${tabId}-desc`);
        if(currentDesc) {
            currentDesc.classList.remove('text-[#909090]');
            currentDesc.classList.add('text-[#534A4A]');
        }
        
        // Show content (the id for content is tab-content-basic, tab-content-smallbig, tab-content-oddeven)
        let activeContentId = `tab-content-${tabId.replace('_','')}`;
        let currentContent = document.getElementById(activeContentId);
        if(currentContent) {
            currentContent.classList.remove('hidden');
        }
        
        // Reset scroll position when switching tabs
        let scrollCont = document.getElementById('rule-scroll-container');
        if(scrollCont) scrollCont.scrollTop = 0;
    }
</script>

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