@model LotteryWebApp.Models.HomeIndex_ViewModel
@{
    ViewData["Title"] = "Millions - More";
    ViewData["ActiveTab"] = "More";
    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/more.css" />

@functions {
    public string FormatMoney(string amount) {
        if (string.IsNullOrEmpty(amount)) return "0";
        var clean = new string(amount.Where(c => char.IsDigit(c)).ToArray());
        if (long.TryParse(clean, out long val)) {
            return val.ToString("#,##0", new System.Globalization.CultureInfo("vi-VN")).Replace(",", ".");
        }
        return amount;
    }
}

<div class="main-container animate__animated animate__fadeIn min-h-screen relative flex flex-col pb-24 overflow-x-hidden" style="background-color: #EAEAEA !important;">
    
    <!-- User Profile Header (Center Aligned, Red Background) -->
    <div class="w-full bg-[#0062FF] flex flex-col items-center justify-center pt-8 pb-6 px-6 relative z-10 border-none m-0">
        <!-- Avatar Ring -->
        <div class="w-[88px] h-[88px] bg-[#EAEAEA] rounded-full flex items-center justify-center border-4 border-[#FFF9CB] shadow-lg mb-3 overflow-hidden">
            <img src="/Millions/img/avatar.png" class="w-full h-full object-cover" onerror="this.outerHTML='<i class=\'fa-solid fa-user text-gray-500 text-4xl\'></i>'" />
        </div>
        <!-- Info -->
        <span class="font-bold text-lg text-white tracking-wide">@(Model?.profile?.fullName ?? "User")</span>
        <span class="text-sm text-white font-medium tracking-wide mb-2">@(Model?.profile?.users ?? "0000000000")</span>

        <!-- Coin Display (Matching GameHome aesthetic) -->
        <div class="flex items-center gap-1.5 mt-1 bg-black/10 px-4 py-1 rounded-full border border-white/10 backdrop-blur-sm">
            <img src="/Millions/img/gold_coin.png" class="w-5 h-5 object-contain" onerror="this.style.display='none'" />
            <span class="text-[22px] font-black text-[#FBF3A7]" style="text-shadow: 0 1px 2px rgba(0,0,0,0.2)">@FormatMoney(Model?.userStatus?.bet_coin)</span>
            <span class="text-[10px] font-bold text-[#FBF3A7] uppercase mt-1.5">@Lang.millions_htg</span>
        </div>
    </div>

    <!-- Menu List (White Full Container) -->
    <div class="w-full bg-white flex flex-col px-6 pt-2 pb-6 relative z-10 m-0 border-none">
        
        <!-- Item: Winning Account
        <div class="flex items-center justify-between py-[18px] border-b-2 border-dashed border-gray-100 cursor-pointer transition-colors active:bg-gray-50">
            <div class="flex items-center gap-4">
                <img src="/Millions/img/gold_coin.png" class="w-6 h-6 object-contain" onerror="this.outerHTML='<i class=\'fa-solid fa-sack-dollar text-[#4A4A4A] text-[20px] w-6 text-center\'></i>'" />
                <span class="text-[#212121] font-bold text-[13px]">@Lang.winning_account</span>
            </div>
            <span class="font-extrabold text-[15px] text-[#212121]">@(Model?.userStatus?.cash_coin ?? "0") HTG</span>
        </div> -->

        <!-- Item: Profile -->
        <div class="flex items-center justify-between py-[18px] border-b-2 border-dashed border-gray-100 cursor-pointer transition-colors active:bg-gray-50" onclick="window.location.href='/Millions/Home/Profile'">
            <div class="flex items-center gap-4">
                <i class="fa-regular fa-user text-[#4A4A4A] text-[20px] w-6 text-center"></i>
                <span class="text-[#212121] font-bold text-[13px]">@Lang.profile</span>
            </div>
            <i class="fa-solid fa-chevron-right text-gray-400 text-sm opacity-80"></i>
        </div>

        <!-- Item: How to play Pick 10 
        <div class="flex items-center justify-between py-[18px] border-b-2 border-dashed border-gray-100 cursor-pointer transition-colors active:bg-gray-50" onclick="window.location.href='/Millions/Home/HowToPlay'">
            <div class="flex items-center gap-4">
                <i class="fa-regular fa-circle-question text-[#4A4A4A] text-[20px] w-6 text-center"></i>
                <span class="text-[#212121] font-bold text-[13px]">@Lang.how_to_play_pick10</span>
            </div>
            <i class="fa-solid fa-chevron-right text-gray-400 text-sm opacity-80"></i>
        </div>
        -->

        <!-- Item: Change Lang 
        <div class="flex items-center justify-between py-[18px] border-b-2 border-dashed border-gray-100 cursor-pointer transition-colors active:bg-gray-50" onclick="toggleLanguage()">
            <div class="flex items-center gap-4">
                <i class="fa-solid fa-language text-[#1689FC] text-[22px] w-6 text-center shadow-blue-500 drop-shadow-sm"></i>
                <span class="text-[#212121] font-bold text-[13px]">@Lang.change_language</span>
            </div>
            <i class="fa-solid fa-chevron-right text-gray-400 text-sm opacity-80"></i>
        </div>
        -->



        <!-- Item: Contact Us -->
        <div class="flex items-center justify-between py-[18px] cursor-pointer transition-colors active:bg-gray-50">
            <div class="flex items-center gap-4">
                <i class="fa-solid fa-phone-volume text-[#4A4A4A] text-[18px] w-6 text-center" style="transform: rotate(-15deg);"></i>
                <span class="text-[#212121] font-bold text-[13px]">@Lang.contact_us</span>
            </div>
            <div class="flex items-center gap-3">
                <span class="font-extrabold text-[15px] text-[#0062FF]">191</span>
                <i class="fa-solid fa-chevron-right text-gray-400 text-sm opacity-80"></i>
            </div>
        </div>

        <!-- Log out Button -->
        <div class="mt-6 w-full px-1">
            <a href="@Url.Action("Logout", "Home", new { area = "Millions" })" class="w-full flex items-center justify-center bg-[#f00b39] text-white font-bold text-[18px] py-[14px] rounded-[10px] shadow-[0_5px_15px_rgba(238,0,51,0.2)] hover:bg-red-700 transition-colors cursor-pointer no-underline active:scale-95 duration-150">
                @Lang.logout
            </a>
        </div>

        <!-- Item: Change Language Flags -->
        <div class="mt-8 flex items-center justify-center w-full px-1">
            <div class="flex items-center gap-2 bg-gray-100 p-1.5 rounded-xl w-full">
                @{
                    var currentLang = System.Threading.Thread.CurrentThread.CurrentCulture.Name;
                }
                <a href="javascript:void(0)" onclick="setLanguage('fr')" class="flex flex-1 justify-center items-center gap-2 px-3 py-2 rounded-lg transition-all @(currentLang == "fr" ? "bg-white shadow-sm border border-gray-200" : "opacity-60 hover:opacity-100")">
                    <img src="/img/en_flag.png" alt="English" class="w-7 h-auto drop-shadow-sm" />
                    <span class="text-[13px] font-bold text-gray-700">English</span>
                </a>
                <a href="javascript:void(0)" onclick="setLanguage('en')" class="flex flex-1 justify-center items-center gap-2 px-3 py-2 rounded-lg transition-all @(currentLang != "fr" ? "bg-white shadow-sm border border-gray-200" : "opacity-60 hover:opacity-100")">
                    <img src="/img/Flag_of_Haiti.png" alt="Natcom" class="w-7 h-auto drop-shadow-sm" />
                    <span class="text-[13px] font-bold text-gray-700">Natcom</span>
                </a>
            </div>
        </div>
    </div>
    
    <!-- Real scalloped edge using CSS mask trick below the white box -->
    <div class="w-full relative z-10 scalloped-bottom"></div>

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



<script>

    function setLanguage(newLang) {
        fetch(subDomain + '/Home/SetCulture?lang=' + newLang)
            .then(response => {
                location.reload();
            })
            .catch(error => {
                location.reload();
            });
    }
</script>