@model LotteryWebApp.Models.HomeIndex_ViewModel
@{
    ViewData["Title"] = "Millions - More";
    ViewData["ActiveTab"] = "More";
    Layout = "~/Areas/Millions/Views/Shared/_Layout.cshtml";
    string SubText(string key) => Lang.ResourceManager.GetString(key, System.Globalization.CultureInfo.CurrentUICulture) ?? key;
}
@using LotteryWebApp.Languages;
@using LotteryWebApp.Common;

<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 font-bricolage" 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: Reward History -->
        <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/RewardHistory'">
            <div class="flex items-center gap-4">
                <i class="fa-solid fa-gift text-[#4A4A4A] text-[20px] w-6 text-center"></i>
                <span class="text-[#212121] font-bold text-[13px]">Reward History</span>
            </div>
            <i class="fa-solid fa-chevron-right text-gray-400 text-sm opacity-80"></i>
        </div>

        <!-- Item: Millions Subscription (Only visible if currently subscribed) -->
        <div id="subCancelMenuItem" class="@(ViewBag.IsSub == true ? "flex" : "hidden") items-center justify-between py-[18px] border-b-2 border-dashed border-gray-100 transition-colors">
            <div class="flex items-center gap-4">
                <div class="w-6 flex items-center justify-center text-[#0062FF]">
                    <i class="fa-solid fa-ticket text-[20px]"></i>
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="text-[#212121] font-bold text-[13px]">@SubText("sub_million_package_name")</span>
                        <span class="text-[10px] font-extrabold text-[#0062FF] bg-[#0062FF]/10 px-2 py-0.5 rounded-full uppercase">@SubText("sub_million_active_badge")</span>
                    </div>
                    <span class="text-[11px] text-[#797979]">5 HTG/@SubText("sub_million_benefit_daily_short")</span>
                </div>
            </div>
            <button type="button" onclick="openCancelSubModal()" class="text-[12px] font-bold text-[#e53935] bg-red-50 hover:bg-red-100 active:scale-95 transition-all px-3 py-1.5 rounded-lg border border-red-200 cursor-pointer">
                @SubText("sub_million_cancel_btn")
            </button>
        </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>

<!-- Cancel Subscription Modal -->
<div id="cancelSubModal" class="fixed inset-0 z-[100] flex items-center justify-center hidden px-6 font-bricolage" style="background: rgba(5, 0, 60, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);">
    <div class="relative w-full max-w-[343px] bg-white rounded-[24px] overflow-hidden flex flex-col p-6 animate__animated animate__zoomIn animate__faster shadow-2xl">
        <!-- Close button in top-right -->
        <button type="button" onclick="closeCancelSubModal()" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-500 transition-colors text-sm cursor-pointer">
            <i class="fa-solid fa-xmark"></i>
        </button>

        <!-- Confirm View -->
        <div id="cancelSubConfirmView" class="w-full flex flex-col items-center pt-2">
            <div class="w-16 h-16 rounded-full bg-red-50 border-4 border-red-100 flex items-center justify-center text-[#e53935] text-2xl mb-4">
                <i class="fa-solid fa-bell-slash"></i>
            </div>
            <h3 class="text-[#0a1f44] font-[800] text-[20px] leading-tight text-center mb-2">
                @SubText("sub_million_cancel_confirm_title")
            </h3>
            <p class="text-[#4a4a4a] text-[13px] leading-relaxed text-center mb-6 px-1">
                @SubText("sub_million_cancel_confirm_desc")
            </p>
            <button type="button" id="confirmCancelSubBtn" onclick="executeCancelSub()" class="w-full bg-[#e53935] hover:bg-[#d32f2f] text-white font-[800] text-[16px] py-3 rounded-[14px] shadow-[0_4px_12px_rgba(229,57,53,0.3)] active:scale-95 transition-all flex items-center justify-center gap-2 cursor-pointer">
                <span>@SubText("sub_million_cancel_confirm_yes")</span>
                <i id="cancelSpinner" class="fa-solid fa-spinner fa-spin hidden"></i>
            </button>
            <button type="button" onclick="closeCancelSubModal()" class="mt-2.5 w-full py-2.5 rounded-[14px] text-gray-600 bg-gray-100 hover:bg-gray-200 active:scale-95 font-bold text-[14px] transition-all text-center cursor-pointer">
                @SubText("sub_million_cancel_keep")
            </button>
        </div>

        <!-- Result View -->
        <div id="cancelSubResultView" class="w-full flex-col items-center pt-2 hidden">
            <div id="cancelResultSuccessIcon" class="w-16 h-16 rounded-full bg-emerald-50 border-4 border-emerald-100 flex items-center justify-center text-emerald-600 text-2xl mb-4 hidden">
                <i class="fa-solid fa-check"></i>
            </div>
            <div id="cancelResultFailIcon" class="w-16 h-16 rounded-full bg-red-50 border-4 border-red-100 flex items-center justify-center text-[#e53935] text-2xl mb-4 hidden">
                <i class="fa-solid fa-exclamation"></i>
            </div>
            <h3 id="cancelResultTitle" class="text-[#0a1f44] font-[800] text-[20px] leading-tight text-center mb-2"></h3>
            <p id="cancelResultMessage" class="text-[#4a4a4a] text-[13px] leading-relaxed text-center mb-6 px-1"></p>
            <button type="button" onclick="closeCancelSubModal()" class="w-full bg-[#0062FF] hover:bg-[#0052d9] text-white font-[800] text-[16px] py-3 rounded-[14px] shadow-lg active:scale-95 transition-all cursor-pointer">
                @Lang.v2_close
            </button>
        </div>
    </div>
</div>

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

    function openCancelSubModal() {
        $('#cancelSubResultView').addClass('hidden').removeClass('flex');
        $('#cancelSubConfirmView').removeClass('hidden').addClass('flex');
        $('#cancelSubModal').removeClass('hidden').addClass('flex');
    }

    function closeCancelSubModal() {
        $('#cancelSubModal').addClass('hidden').removeClass('flex');
    }

    function showCancelResult(isSuccess, message) {
        $('#cancelSubConfirmView').addClass('hidden').removeClass('flex');
        if (isSuccess) {
            $('#cancelResultSuccessIcon').removeClass('hidden');
            $('#cancelResultFailIcon').addClass('hidden');
            $('#cancelResultTitle').text('@Html.Raw(SubText("sub_million_cancel_success_title"))');
        } else {
            $('#cancelResultSuccessIcon').addClass('hidden');
            $('#cancelResultFailIcon').removeClass('hidden');
            $('#cancelResultTitle').text('Failed');
        }
        $('#cancelResultMessage').text(message);
        $('#cancelSubResultView').removeClass('hidden').addClass('flex');
    }

    function executeCancelSub() {
        var $btn = $('#confirmCancelSubBtn');
        $btn.prop('disabled', true).addClass('opacity-70');
        $('#cancelSpinner').removeClass('hidden');

        $.ajax({
            url: subDomain + '/Millions/Home/CancelSub',
            type: 'POST',
            data: {
                __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val()
            },
            success: function (res) {
                if (res && res.responseCode === "0") {
                    $('#subCancelMenuItem').addClass('hidden').removeClass('flex');
                    showCancelResult(true, "@Html.Raw(SubText("sub_million_cancel_success_desc"))");
                } else if (res && res.responseCode === "@Code.SESSION_EXPIRED") {
                    window.location.href = subDomain + "/Account/Login";
                } else {
                    var msg = (res && res.responseMessage) || "@Html.Raw(SubText("sub_million_cancel_fail"))";
                    showCancelResult(false, msg);
                }
            },
            error: function () {
                showCancelResult(false, "@Html.Raw(SubText("sub_million_cancel_fail"))");
            },
            complete: function () {
                $btn.prop('disabled', false).removeClass('opacity-70');
                $('#cancelSpinner').addClass('hidden');
            }
        });
    }

    $(document).ready(function () {
        $('#cancelSubModal').on('click', function(e) {
            if (e.target === this) closeCancelSubModal();
        });

        // Sync subscription status with backend API
        $.ajax({
            url: subDomain + '/Millions/Home/CheckSub',
            type: 'POST',
            global: false,
            data: {
                __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val()
            },
            success: function (res) {
                if (res && res.responseCode === "0") {
                    if (res.isSub === true) {
                        $('#subCancelMenuItem').removeClass('hidden').addClass('flex');
                    } else {
                        $('#subCancelMenuItem').addClass('hidden').removeClass('flex');
                    }
                }
            }
        });
    });
</script>
}