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

<!-- Add custom font Bricolage Grotesque to match Figma styling -->
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;700;800&display=swap" rel="stylesheet">
<!-- Flatpickr for premium calendar -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.js"></script>
<link rel="stylesheet" href="/Millions/css/results.css" />
<style>
    .font-bricolage { font-family: 'Bricolage Grotesque', sans-serif; }
</style>

<div class="main-container animate__animated animate__fadeIn min-h-screen relative flex flex-col pb-24 font-bricolage" style="background-color: #EAEAEA !important;">
    
    <!-- Header (Red Background) - Fixed -->
    <div class="fixed top-0 left-1/2 -translate-x-1/2 w-full max-w-[414px] bg-[#0062FF] h-[52px] flex items-center justify-between px-4 z-[100] shadow-sm">
        <!-- Back Button -->
        <button onclick="window.location.href='/Millions/Home/More'" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-white/20 transition-colors z-10 text-white">
            <i class="fa-solid fa-arrow-left text-[24px]"></i>
        </button>
        <!-- Title -->
        <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
            <span class="font-bold text-[32px] text-white tracking-wide">@Lang.profile</span>
        </div>
    </div>

    <!-- Header Spacer (~52px) -->
    <div class="h-[52px]"></div>

    <!-- Content Form -->
    <div class="w-full flex flex-col items-center px-5 py-6 gap-3 flex-1 overflow-x-hidden">
        
        <!-- Phone Number Field (Disabled State) -->
        <div class="w-full flex flex-col gap-2">
            <label class="font-bold text-[#534A4A] text-[14px]">@Lang.phone_number</label>
            <div class="w-full bg-[#C9C9C9] rounded-[8px] h-[50px] px-3 flex items-center shadow-inner">
                <span class="font-[800] text-[20px] text-black w-full tracking-wide">@(Model?.profile?.users ?? "509XXXXXXXX")</span>
            </div>
        </div>

        <!-- Name Field -->
        <div class="w-full flex flex-col gap-2 mt-2">
            <label class="font-bold text-[#534A4A] text-[14px]">@Lang.name</label>
            <div class="w-full bg-transparent border border-[#8F8F8F] rounded-[8px] h-[50px] px-3 flex items-center">
                <input type="text" id="txtFullName" class="w-full bg-transparent font-[800] text-[20px] text-black outline-none tracking-wide" value="@(Model?.profile?.fullName ?? "User")" />
            </div>
        </div>

        <div class="w-full flex flex-col gap-2 mt-2">
            <label class="font-bold text-[#534A4A] text-[14px]">@Lang.dateOfBirth</label>
            @{
                string birthdayVal = Model?.profile?.birthday ?? "2000-01-01";
                if (birthdayVal.Contains("/")) {
                    try {
                        var parts = birthdayVal.Split('/');
                        if (parts.Length == 3) { birthdayVal = $"{parts[2]}-{parts[1]}-{parts[0]}"; }
                    } catch { birthdayVal = "2000-01-01"; }
                }
            }
            <div class="w-full bg-transparent rounded-[8px] flex items-center justify-between relative cursor-pointer" onclick="document.getElementById('txtBirthday')._flatpickr.open()">
                <input type="text" id="txtBirthday" class="w-full bg-transparent font-[800] text-[20px] text-black outline-none tracking-wide flex-1" 
                       value="@birthdayVal" readonly />
                <i class="fa-regular fa-calendar text-[#534A4A] text-[20px] pointer-events-none absolute right-3"></i>
            </div>
        </div>


        <!-- Update Button -->
        <div class="w-full flex justify-center mt-8">
            <button id="btnUpdateProfile" onclick="updateProfile(this)" class="w-[300px] max-w-full bg-[#0062FF] text-white font-[800] text-[20px] py-[10px] rounded-[12px] shadow-[0px_3px_8px_rgba(0,0,0,0.25)] hover:bg-red-700 active:scale-95 transition-all">
                @Lang.update
            </button>
        </div>

    </div>

</div>

<!-- Success Modal Overlay -->
<div id="successModal" class="fixed inset-0 z-[100] flex items-center justify-center hidden px-6 translate-y-0" style="background: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%);">
    <div class="w-full max-w-[343px] min-h-[520px] bg-white rounded-[20px] overflow-hidden flex flex-col items-center p-8 animate__animated animate__zoomIn animate__faster">
        <div class="w-full flex flex-col items-center mb-5 mt-4">
            <div class="relative w-full max-w-[343px] flex items-center justify-center">
                <img src="/Millions/img/modal/success_header.png" class="w-[280px] h-auto object-contain" />
            </div>
        </div>
        <div class="px-5 text-center mb-10 mt-5">
            <p class="text-black font-[700] text-[20px] font-bricolage leading-tight">
                @Lang.update_successful
            </p>
        </div>
        <div class="w-full mt-auto">
            <button onclick="closeModalAndReload('/Millions/Home/More')" class="w-full bg-[#0062FF] text-white font-[800] text-[20px] py-[10px] rounded-[12px] shadow-[0px_3px_8px_rgba(0,0,0,0.25)] hover:bg-red-700 active:scale-95 transition-all font-bricolage">
                @Lang.back_to_homepage
            </button>
        </div>
    </div>
</div>

<!-- Failure Modal Overlay -->
<div id="failureModal" class="fixed inset-0 z-[100] flex items-center justify-center hidden px-6 translate-y-0" style="background: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%);">
    <div class="w-full max-w-[343px] min-h-[520px] bg-white rounded-[20px] overflow-hidden flex flex-col items-center p-8 animate__animated animate__zoomIn animate__faster">
        <div class="w-full flex flex-col items-center mb-8 mt-10">
            <div class="relative w-full max-w-[343px] flex items-center justify-center">
                <img src="/Millions/img/modal/fail_icon.png" class="w-[200px] h-auto object-contain" />
            </div>
        </div>
        <div class="px-5 text-center mb-10 mt-5">
            <p id="failErrorMessage" class="text-black font-[700] text-[20px] font-bricolage leading-tight">
                @Lang.update_profile_error
            </p>
        </div>
        <div class="w-full mt-auto">
            <button onclick="closeFailureModal()" class="w-full bg-[#0062FF] text-white font-[800] text-[20px] py-[10px] rounded-[12px] shadow-[0px_3px_8_rgba(0,0,0,0.25)] hover:bg-red-700 active:scale-95 transition-all font-bricolage">
                @Lang.try_again
            </button>
        </div>
    </div>
</div>

<partial name="_BottomNavbar" />

<script>

    function initBrandedFlatpickr(selector, yearStart, yearEnd) {
        flatpickr(selector, {
            dateFormat: "Y-m-d",
            altInput: true,
            altFormat: "d/m/Y",
            altInputClass: "w-full bg-transparent font-[800] text-[20px] text-black outline-none tracking-wide cursor-pointer",
            disableMobile: true,
            monthSelectorType: "dropdown",
            onReady: function (selectedDates, dateStr, instance) {
                const yearInput = instance.calendarContainer.querySelector(".numInput.cur-year");
                if (yearInput) {
                    const yearSelect = document.createElement("select");
                    yearSelect.className = "flatpickr-monthDropdown-months cur-year-select";
                    yearSelect.style.cssText = "appearance:none; font-weight:800; border:none; background:transparent; color:white; cursor:pointer; margin-left:4px; outline:none; font-family:inherit; font-size:inherit;";

                    for (let y = yearEnd; y >= yearStart; y--) {
                        const opt = document.createElement("option");
                        opt.value = y;
                        opt.text = y;
                        opt.style.color = "#333";
                        if (y === instance.currentYear) opt.selected = true;
                        yearSelect.appendChild(opt);
                    }

                    yearSelect.addEventListener("change", function () {
                        instance.changeYear(parseInt(this.value));
                    });

                    yearInput.style.display = "none";
                    yearInput.parentNode.appendChild(yearSelect);
                    
                    instance.set("onChange", function(d, s, i) {
                        yearSelect.value = i.currentYear;
                    });
                }
            }
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        initBrandedFlatpickr("#txtBirthday", 1940, 2026);
    });

    function updateProfile(btn) {
        var fullName = $("#txtFullName").val();
        var birthday = $("#txtBirthday").val(); 

        if (fullName == "") {
            showFailureModal("@Lang.enter_name");
            return;
        }

        // Prevent double-click
        var $btn = $(btn);
        var originalText = $btn.html();
        $btn.prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin mr-2"></i> ...');

        $.ajax({
            url: subDomain + "/Millions/Home/UserUpdateProfile",
            type: "POST",
            data: {
                fullName: fullName,
                birthday: birthday
            },
            success: function (response) {
                $btn.prop('disabled', false).html(originalText);
                if (response.status == "0") {
                    showSuccessModal();
                } else {
                    showFailureModal(response.message || "Update failed", response.status);
                }
            },
            error: function (error) {
                $btn.prop('disabled', false).html(originalText);
                showFailureModal("An error occurred during network request");
            }
        });
    }

    function showSuccessModal() {
        $("#successModal").removeClass("hidden").addClass("flex");
    }

    var systemUpgrading = false;
    function showFailureModal(message, code) {
        $("#failErrorMessage").text(message);
        const $btn = $("#failureModal button");
        if (code === "-2" || (message && message.includes("System is upgrading"))) {
            systemUpgrading = true;
            $btn.text("@Lang.login");
        } else {
            systemUpgrading = false;
            $btn.text("@Lang.try_again");
        }
        $("#failureModal").removeClass("hidden").addClass("flex");
    }

    function closeModalAndReload(url) {
        $("#successModal").addClass("hidden").removeClass("flex");
        window.location.href = url;
    }

    function closeFailureModal() {
        $("#failureModal").addClass("hidden").removeClass("flex");
        if (systemUpgrading) {
            window.location.href = subDomain + "/Account/Login";
        }
    }
</script>