@model FixConnect.PL.ViewModels.WorkerProfileViewModel
@using FixConnect.DAL.Data.Enums
@{
    ViewData["Title"] = "My Profile";
    Layout = "_WorkerLayout";
}

<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />

<script id="tailwind-config">
    tailwind.config = {
        darkMode: "class",
        theme: {
            extend: {
                "colors": {
                    "surface-container-low": "#f2f4f6",
                    "surface-variant": "#e0e3e5",
                    "surface": "#f7f9fb",
                    "outline": "#737688",
                    "primary-container": "#0052ff",
                    "on-primary-container": "#dfe3ff",
                    "on-surface": "#191c1e",
                    "surface-container-lowest": "#ffffff",
                    "background": "#f7f9fb",
                    "primary": "#003ec7",
                    "secondary": "#5d5e62",
                    "outline-variant": "#c3c5d9",
                    "surface-container-high": "#e6e8ea"
                },
                "spacing": {
                    "gutter": "24px",
                    "stack-md": "24px",
                    "container-margin": "32px",
                    "stack-lg": "48px"
                },
                "fontFamily": {
                    "label-md": ["Plus Jakarta Sans"],
                    "headline-lg": ["Plus Jakarta Sans"],
                    "body-md": ["Plus Jakarta Sans"],
                    "headline-md": ["Plus Jakarta Sans"],
                    "display-xl": ["Plus Jakarta Sans"],
                    "caption": ["Plus Jakarta Sans"],
                    "body-lg": ["Plus Jakarta Sans"]
                }
            }
        }
    }
</script>

<style>
    .glass-panel {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    .btn-primary {
        background: linear-gradient(135deg, #003ec7 0%, #0052ff 100%);
    }

        .btn-primary:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 82, 255, 0.2), 0 4px 6px -2px rgba(0, 82, 255, 0.1);
            transform: translateY(-1px);
        }
    /* Hide scrollbar for a cleaner look in dropdowns */
    ::-webkit-scrollbar {
        width: 6px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: #e0e3e5;
        border-radius: 4px;
    }
</style>

<div class="max-w-[1440px] mx-auto p-4 md:p-8 lg:p-container-margin relative z-10">

    @if (TempData["Error"] != null)
    {
        <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-800 rounded-xl font-body-md flex items-center gap-2 shadow-sm">
            <span class="material-symbols-outlined text-red-600">error</span>
            @TempData["Error"]
        </div>
    }
    @if (TempData["Success"] != null)
    {
        <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-xl font-body-md flex items-center gap-2 shadow-sm">
            <span class="material-symbols-outlined text-emerald-600">check_circle</span>
            @TempData["Success"]
        </div>
    }

    <div class="relative bg-surface-container-lowest rounded-2xl border border-surface-variant/50 p-6 md:p-10 mb-8 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.02)]">
        <div class="flex flex-col md:flex-row items-start md:items-center gap-6">

            <div class="relative group shrink-0">
                <div class="w-24 h-24 md:w-32 md:h-32 rounded-2xl overflow-hidden border-2 border-surface shadow-md">
                    <img src="@(Model.PhotoUrl ?? "/uploads/ProfilePictures/default.png")" class="w-full h-full object-cover" alt="@Model.FullName Profile" />
                </div>
                @if (Model.AvailabilityStatus == AvailabilityStatus.Available.ToString())
                {
                    <div class="absolute -bottom-2 -right-2 bg-green-500/10 backdrop-blur-sm border border-green-200 text-green-700 px-2 py-0.5 rounded-full flex items-center gap-1 shadow-sm">
                        <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                        <span class="font-caption text-[10px] font-bold uppercase tracking-wider">Available</span>
                    </div>
                }
            </div>

            <div class="flex-1 space-y-2">
                <div class="flex items-center gap-3">
                    <h1 class="font-display-xl text-headline-lg md:text-display-xl text-on-surface">@Model.FullName</h1>
                    @if (Model.IsVerified)
                    {
                        <span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;" title="Verified Pro">verified</span>
                    }
                </div>
                <p class="font-body-lg text-body-lg text-secondary">
                    @Model.SpecialtyName <span class="text-surface-variant mx-2">|</span> @Model.Email
                </p>
                <div class="flex flex-wrap items-center gap-4 pt-2">
                    <div class="flex items-center gap-1 text-on-surface">
                        <span class="material-symbols-outlined text-amber-500 text-lg" style="font-variation-settings: 'FILL' 1;">star</span>
                        <span class="font-label-md text-label-md">@Model.AvgRating.ToString("0.0") / 5</span>
                        <span class="font-caption text-caption text-secondary ml-1">(@Model.Reviews.Count Reviews)</span>
                    </div>
                    <div class="flex items-center gap-1 text-secondary">
                        <span class="material-symbols-outlined text-lg">task_alt</span>
                        <span class="font-caption text-caption">@Model.CompletedJobsCount Completed Jobs</span>
                    </div>
                </div>
            </div>

            <div class="flex flex-row md:flex-col gap-3 w-full md:w-auto mt-4 md:mt-0 shrink-0">
                <a asp-action="EditProfile" class="flex-1 md:flex-none btn-primary text-white font-label-md text-label-md py-2.5 px-6 rounded-lg transition-all shadow-md flex items-center justify-center gap-2 decoration-none">
                    <span class="material-symbols-outlined text-sm">edit</span>
                    Edit Profile
                </a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">

        <div class="md:col-span-8 space-y-gutter">

            @if (!Model.IsVerified)
            {
                <div class="glass-panel p-4 rounded-xl border @(Model.HasPendingVerification ? "border-amber-200 bg-amber-50" : "border-blue-200 bg-blue-50") flex items-center gap-3">
                    <span class="material-symbols-outlined @(Model.HasPendingVerification ? "text-amber-500" : "text-blue-500")">
                        @(Model.HasPendingVerification ? "pending_actions" : "gpp_maybe")
                    </span>
                    <div class="font-body-md text-sm text-on-surface">
                        @if (Model.HasPendingVerification)
                        {
                            <span>⏳ Your verification is under review.</span>
                        }
                        else
                        {
                            <span>
                                🔒 Not verified yet. <a asp-action="EditProfile" class="text-primary font-bold hover:underline">Upload your ID to get verified.</a>
                            </span>
                        }
                    </div>
                </div>
            }

            @if (!string.IsNullOrEmpty(Model.Bio))
            {
                <section class="glass-panel rounded-2xl border border-surface-variant p-6 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.02)]">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="font-headline-md text-headline-md text-on-surface">About Me</h2>
                    </div>
                    <p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">
                        @Model.Bio
                    </p>
                </section>
            }

            <section class="glass-panel rounded-2xl border border-surface-variant p-6 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.02)]">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="font-headline-md text-headline-md text-on-surface">Portfolio (@Model.PortfolioItems.Count / 10)</h2>
                    @if (Model.PortfolioItems.Count < 10)
                    {
                        <button type="button" class="text-primary hover:text-primary-container bg-primary/10 px-3 py-1.5 rounded-lg flex items-center gap-1 font-label-md text-sm transition-colors" onclick="document.getElementById('addPortfolioModal').classList.remove('hidden')">
                            <span class="material-symbols-outlined text-[18px]">add_circle</span> Add Item
                        </button>
                    }
                </div>

                @if (!Model.PortfolioItems.Any())
                {
                    <div class="text-center py-8 text-secondary font-body-md text-sm border-2 border-dashed border-outline-variant rounded-xl">
                        No portfolio items yet. Show off your best work!
                    </div>
                }
                else
                {
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        @foreach (var item in Model.PortfolioItems)
                        {
                            <div class="border border-surface-variant rounded-xl overflow-hidden bg-surface-container-lowest shadow-sm flex flex-col">
                                @if (!string.IsNullOrEmpty(item.ImageUrl))
                                {
                                    <img src="@item.ImageUrl" class="w-full h-32 object-cover" alt="@item.Title" />
                                }
                                else
                                {
                                    <div class="w-full h-32 bg-surface-container flex items-center justify-center text-secondary">
                                        <span class="material-symbols-outlined text-4xl">image</span>
                                    </div>
                                }
                                <div class="p-4 flex-1 flex flex-col">
                                    <p class="font-label-md text-label-md text-on-surface mb-1">@item.Title</p>
                                    <p class="font-caption text-caption text-secondary line-clamp-2 mb-3 flex-1">@item.Description</p>

                                    <div class="flex gap-2 mt-auto pt-3 border-t border-surface-variant/50">
                                        <button type="button" class="flex-1 py-1.5 border border-outline text-on-surface rounded hover:bg-surface-container font-label-md text-xs transition-colors"
                                                onclick="openEditModal(@item.ItemId, '@Html.Raw(item.Title.Replace("'", "\\'"))', '@Html.Raw(item.Description?.Replace("'", "\\'") ?? "")', '@item.ImageUrl')">
                                            Edit
                                        </button>
                                        <form asp-action="DeletePortfolioItem" method="post" onsubmit="return confirm('Delete this item?')" class="flex-1">
                                            <input type="hidden" name="itemId" value="@item.ItemId" />
                                            <button type="submit" class="w-full py-1.5 border border-red-200 text-red-600 rounded hover:bg-red-50 font-label-md text-xs transition-colors">
                                                Delete
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                }
            </section>

            <section class="glass-panel rounded-2xl border border-surface-variant p-6 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.02)]">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="font-headline-md text-headline-md text-on-surface">Client Reviews</h2>
                    <span class="font-label-md text-label-md text-secondary">@Model.Reviews.Count Reviews</span>
                </div>

                @if (!Model.Reviews.Any())
                {
                    <p class="text-center py-6 text-secondary font-body-md text-sm">No reviews yet.</p>
                }
                else
                {
                    <div class="space-y-6">
                        @foreach (var r in Model.Reviews)
                        {
                            <div class="border-b border-surface-variant/50 pb-6 last:border-0 last:pb-0">
                                <div class="flex justify-between items-start mb-3">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 rounded-full bg-primary/10 text-primary font-headline-md text-lg flex items-center justify-center font-bold">
                                            @(!string.IsNullOrEmpty(r.CustomerName) ? r.CustomerName.Substring(0, 1).ToUpper() : "U")
                                        </div>
                                        <div>
                                            <p class="font-label-md text-label-md text-on-surface">@r.CustomerName</p>
                                            <div class="flex items-center gap-1 text-amber-500 mt-0.5">
                                                <span class="font-bold text-sm">@r.AvgRating.ToString("0.0")</span>
                                                <span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span>
                                            </div>
                                        </div>
                                    </div>
                                    @if (r.SuggestWorker)
                                    {
                                        <span class="bg-green-100 text-green-700 border border-green-200 px-2 py-1 rounded-md flex items-center gap-1 font-caption text-xs">
                                            <span class="material-symbols-outlined text-[14px]">thumb_up</span> Recommends
                                        </span>
                                    }
                                </div>

                                @if (!string.IsNullOrEmpty(r.Comment))
                                {
                                    <p class="font-body-md text-sm text-on-surface-variant italic mb-3">"@r.Comment"</p>
                                }

                                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-3 bg-surface-container-low p-3 rounded-lg border border-surface-variant/50">
                                    @{
                                        void TailwindRatingBar(string label, int val, string icon)
                                        {
                                            <div>
                                                <div class="flex justify-between mb-1">
                                                    <span class="font-caption text-[11px] text-secondary flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">@icon</span> @label</span>
                                                    <span class="font-caption text-[11px] font-bold text-on-surface">@val/5</span>
                                                </div>
                                                <div class="w-full bg-surface-variant rounded-full h-1.5">
                                                    <div class="bg-amber-500 h-1.5 rounded-full" style="width: @(val * 20)%"></div>
                                                </div>
                                            </div>
                                        }
                                    }
                                    @{
                                        TailwindRatingBar("Accuracy", r.AccuracyRating, "track_changes");
                                    }
                                    @{
                                        TailwindRatingBar("Commitment", r.CommitmentRating, "calendar_clock");
                                    }
                                    @{
                                        TailwindRatingBar("Price", r.PriceRating, "payments");
                                    }
                                </div>
                            </div>
                        }
                    </div>
                }
            </section>
        </div>

        <div class="md:col-span-4 space-y-gutter">

            <section class="glass-panel rounded-2xl border border-surface-variant p-6 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.02)]">
                <div class="flex items-center gap-2 mb-4">
                    <span class="material-symbols-outlined text-primary">toggle_on</span>
                    <h2 class="font-headline-md text-lg text-on-surface font-bold">Set Availability</h2>
                </div>
                <div class="flex flex-col gap-2">
                    @foreach (var status in Enum.GetValues<AvailabilityStatus>())
                    {
                        var isActive = Model.AvailabilityStatus == status.ToString();
                        var colors = status switch
                        {
                            AvailabilityStatus.Available => isActive ? "bg-green-600 text-white border-green-700 shadow-md" : "bg-surface border-outline hover:bg-green-50 hover:text-green-700",
                            AvailabilityStatus.Busy => isActive ? "bg-amber-500 text-white border-amber-600 shadow-md" : "bg-surface border-outline hover:bg-amber-50 hover:text-amber-700",
                            AvailabilityStatus.Offline => isActive ? "bg-secondary text-white border-secondary shadow-md" : "bg-surface border-outline hover:bg-surface-container-high",
                            _ => "bg-surface"
                        };

                        <form asp-action="ToggleAvailability" method="post" class="w-full">
                            <input type="hidden" name="status" value="@((int)status)" />
                            <button type="submit" class="w-full py-2.5 rounded-lg border font-label-md text-sm transition-all duration-200 @colors flex items-center justify-center gap-2">
                                @if (isActive)
                                {
                                    <span class="material-symbols-outlined text-[16px]">check_circle</span>
                                }
                                @status.ToString()
                            </button>
                        </form>
                    }
                </div>
            </section>

            <section class="glass-panel rounded-2xl border border-surface-variant p-6 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.02)]">
                <div class="flex items-center gap-2 mb-4">
                    <span class="material-symbols-outlined text-on-surface">map</span>
                    <h2 class="font-headline-md text-lg font-bold text-on-surface">Service Areas</h2>
                </div>

                <div class="flex flex-wrap gap-2 mb-4" id="regionTags">
                    @foreach (var region in Model.WorkingRegions)
                    {
                        <form asp-action="RemoveRegion" method="post" class="inline-block">
                            <input type="hidden" name="regionName" value="@region" />
                            <span class="bg-primary/10 text-primary font-caption text-xs px-2.5 py-1.5 rounded-lg border border-primary/20 flex items-center gap-1.5 group transition-colors hover:bg-red-50 hover:text-red-600 hover:border-red-200 cursor-default">
                                @region
                                <button type="submit" class="opacity-70 hover:opacity-100 flex items-center" title="Remove Area">
                                    <span class="material-symbols-outlined text-[14px]">close</span>
                                </button>
                            </span>
                        </form>
                    }
                    @if (!Model.WorkingRegions.Any())
                    {
                        <span class="text-caption text-secondary italic">No areas selected.</span>
                    }
                </div>

                <div class="relative">
                    <div class="flex items-center border border-outline rounded-lg bg-surface focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/20 transition-all">
                        <span class="material-symbols-outlined text-secondary pl-3 text-[20px]">search</span>
                        <input type="text" id="regionSearch" class="w-full bg-transparent border-none text-sm font-body-md px-2 py-2.5 focus:ring-0 outline-none" placeholder="Search to add area..." autocomplete="off" />
                    </div>
                    <div id="regionResults" class="absolute w-full mt-1 bg-surface-container-lowest border border-outline-variant rounded-lg shadow-xl max-h-48 overflow-y-auto hidden z-20 divide-y divide-surface-variant/50"></div>
                </div>

                <div class="h-32 mt-4 rounded-lg overflow-hidden bg-surface-container relative border border-outline-variant/50">
                    <div class="absolute inset-0 flex items-center justify-center bg-surface-variant/20">
                        <img src="https://lh3.googleusercontent.com/aida-public/AB6AXuBIe24TtfpxW1yHQpMuMKzzK-TQZxYQfqhOSE1wbZhDeRbN6yqey5y5sdOA7dXy9lg1AiZ2pOMQ87dgap01BSTNwNXl0SeyHcovpD_JulLvAak4PgLZOEpyHdbF0T9B63ERLek2zSus-tv6WMDFb6D_wanjvhAgO60dVbxkolWYA0i3UhTWRfeyfqZc-YjAYkEm_7Wawfy5Jz_9LTMbeBezWdq76ImIdOG2R6xa2NiUPqmBKHPoGZ1hPalmRutuvnHzGH7xmQan1-cK" class="w-full h-full object-cover opacity-50 mix-blend-multiply" alt="Map representation" />
                        <div class="absolute w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center animate-pulse">
                            <div class="w-3 h-3 bg-primary rounded-full"></div>
                        </div>
                    </div>
                </div>
            </section>

            <div class="grid grid-cols-2 gap-4">
                <div class="glass-panel rounded-xl border border-surface-variant p-4 flex flex-col items-center justify-center text-center shadow-sm">
                    <span class="material-symbols-outlined text-primary mb-1 text-3xl" style="font-variation-settings: 'FILL' 1;">task_alt</span>
                    <span class="font-headline-md text-headline-md text-on-surface">@Model.CompletedJobsCount</span>
                    <span class="font-caption text-caption text-secondary">Jobs Completed</span>
                </div>
                <div class="glass-panel rounded-xl border border-surface-variant p-4 flex flex-col items-center justify-center text-center shadow-sm">
                    <span class="material-symbols-outlined text-amber-500 mb-1 text-3xl" style="font-variation-settings: 'FILL' 1;">workspace_premium</span>
                    <span class="font-headline-md text-headline-md text-on-surface">Top 5%</span>
                    <span class="font-caption text-caption text-secondary text-xs">Platform Rank</span>
                </div>
            </div>

            <section class="glass-panel rounded-2xl border border-surface-variant p-6 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.02)]">
                <h2 class="font-headline-md text-lg text-on-surface font-bold mb-3 flex items-center gap-2">
                    <span class="material-symbols-outlined">translate</span> Languages
                </h2>
                <div class="space-y-2">
                    <div class="flex justify-between items-center bg-surface-container-low px-3 py-2 rounded-lg">
                        <span class="font-body-md text-sm text-on-surface">English</span>
                        <span class="font-caption text-xs text-primary bg-primary/10 px-2 py-0.5 rounded">Native</span>
                    </div>
                    <div class="flex justify-between items-center bg-surface-container-low px-3 py-2 rounded-lg">
                        <span class="font-body-md text-sm text-on-surface">Arabic</span>
                        <span class="font-caption text-xs text-secondary bg-surface-variant px-2 py-0.5 rounded">Fluent</span>
                    </div>
                </div>
            </section>

        </div>
    </div>
</div>

<div id="addPortfolioModal" class="fixed inset-0 z-50 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity" onclick="document.getElementById('addPortfolioModal').classList.add('hidden')"></div>
    <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <div class="relative transform overflow-hidden rounded-xl bg-surface-container-lowest text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg border border-surface-variant">
                <form asp-action="AddPortfolioItem" method="post" enctype="multipart/form-data">
                    <div class="px-6 py-4 border-b border-surface-variant flex justify-between items-center bg-surface-container-low">
                        <h3 class="font-headline-md text-lg font-bold text-on-surface" id="modal-title">Add Portfolio Item</h3>
                        <button type="button" class="text-secondary hover:text-on-surface transition-colors" onclick="document.getElementById('addPortfolioModal').classList.add('hidden')">
                            <span class="material-symbols-outlined">close</span>
                        </button>
                    </div>
                    <div class="px-6 py-5 space-y-4">
                        <div>
                            <label class="block font-label-md text-sm text-on-surface mb-1">Title</label>
                            <input name="Title" class="w-full px-3 py-2 border border-outline-variant rounded-lg focus:border-primary focus:ring-1 focus:ring-primary outline-none" required />
                        </div>
                        <div>
                            <label class="block font-label-md text-sm text-on-surface mb-1">Description</label>
                            <textarea name="Description" rows="3" class="w-full px-3 py-2 border border-outline-variant rounded-lg focus:border-primary focus:ring-1 focus:ring-primary outline-none resize-none"></textarea>
                        </div>
                        <div>
                            <label class="block font-label-md text-sm text-on-surface mb-1">Image Upload</label>
                            <input name="ImageFile" type="file" accept="image/*" class="w-full px-3 py-2 border border-outline-variant rounded-lg text-sm file:mr-4 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20" />
                        </div>
                    </div>
                    <div class="px-6 py-4 border-t border-surface-variant bg-surface-container flex justify-end gap-3">
                        <button type="button" class="px-4 py-2 text-sm font-label-md text-secondary bg-surface border border-outline-variant rounded-lg hover:bg-surface-variant transition-colors" onclick="document.getElementById('addPortfolioModal').classList.add('hidden')">Cancel</button>
                        <button type="submit" class="px-4 py-2 text-sm font-label-md text-white bg-primary rounded-lg hover:bg-primary/90 transition-colors shadow-sm">Save Item</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div id="editPortfolioModal" class="fixed inset-0 z-50 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity" onclick="document.getElementById('editPortfolioModal').classList.add('hidden')"></div>
    <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <div class="relative transform overflow-hidden rounded-xl bg-surface-container-lowest text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg border border-surface-variant">
                <form asp-action="UpdatePortfolioItem" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="ItemId" id="editItemId" />
                    <div class="px-6 py-4 border-b border-surface-variant flex justify-between items-center bg-surface-container-low">
                        <h3 class="font-headline-md text-lg font-bold text-on-surface">Edit Portfolio Item</h3>
                        <button type="button" class="text-secondary hover:text-on-surface transition-colors" onclick="document.getElementById('editPortfolioModal').classList.add('hidden')">
                            <span class="material-symbols-outlined">close</span>
                        </button>
                    </div>
                    <div class="px-6 py-5 space-y-4">
                        <div>
                            <label class="block font-label-md text-sm text-on-surface mb-1">Title</label>
                            <input name="Title" id="editTitle" class="w-full px-3 py-2 border border-outline-variant rounded-lg focus:border-primary focus:ring-1 focus:ring-primary outline-none" required />
                        </div>
                        <div>
                            <label class="block font-label-md text-sm text-on-surface mb-1">Description</label>
                            <textarea name="Description" id="editDescription" rows="3" class="w-full px-3 py-2 border border-outline-variant rounded-lg focus:border-primary focus:ring-1 focus:ring-primary outline-none resize-none"></textarea>
                        </div>
                        <div>
                            <label class="block font-label-md text-sm text-on-surface mb-1">Current Image</label>
                            <div id="editCurrentImage" class="mb-3 border border-dashed border-outline-variant rounded-lg p-2 bg-surface-container-low inline-block"></div>

                            <label class="block font-caption text-xs text-secondary mb-1">Upload new image (leave empty to keep current)</label>
                            <input name="ImageFile" type="file" accept="image/*" class="w-full px-3 py-2 border border-outline-variant rounded-lg text-sm file:mr-4 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20" />
                        </div>
                    </div>
                    <div class="px-6 py-4 border-t border-surface-variant bg-surface-container flex justify-end gap-3">
                        <button type="button" class="px-4 py-2 text-sm font-label-md text-secondary bg-surface border border-outline-variant rounded-lg hover:bg-surface-variant transition-colors" onclick="document.getElementById('editPortfolioModal').classList.add('hidden')">Cancel</button>
                        <button type="submit" class="px-4 py-2 text-sm font-label-md text-white bg-primary rounded-lg hover:bg-primary/90 transition-colors shadow-sm">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // Vanilla JS Modal Open Logic
    function openEditModal(itemId, title, description, imageUrl) {
        document.getElementById('editItemId').value = itemId;
        document.getElementById('editTitle').value = title;
        document.getElementById('editDescription').value = description || '';

        const imgDiv = document.getElementById('editCurrentImage');
        if (imageUrl) {
            imgDiv.innerHTML = `<img src="${imageUrl}" class="h-20 w-auto object-cover rounded shadow-sm border border-outline-variant" />`;
        } else {
            imgDiv.innerHTML = '<span class="text-secondary text-sm italic">No current image</span>';
        }

        document.getElementById('editPortfolioModal').classList.remove('hidden');
    }

    // Region Search & AJAX Post script
    const searchInput = document.getElementById('regionSearch');
    const resultsBox = document.getElementById('regionResults');

    searchInput.addEventListener('input', async function () {
        const query = this.value.trim();
        if (query.length < 1) {
            resultsBox.classList.add('hidden');
            return;
        }

        try {
            const res = await fetch(`/Worker/SearchRegions?q=${encodeURIComponent(query)}`);
            const data = await res.json();

            resultsBox.innerHTML = '';

            if (data.length === 0) {
                resultsBox.classList.add('hidden');
                return;
            }

            data.forEach(r => {
                const item = document.createElement('button');
                item.type = 'button';
                item.className = 'w-full text-left px-4 py-2.5 text-sm font-body-md text-on-surface hover:bg-primary/5 hover:text-primary transition-colors flex items-center gap-2';
                item.innerHTML = `<span class="material-symbols-outlined text-[16px]">location_on</span> ${r.regionName}`;
                item.onclick = () => addRegion(r.regionId, r.regionName);
                resultsBox.appendChild(item);
            });

            resultsBox.classList.remove('hidden');
        } catch (error) {
            console.error("Error fetching regions", error);
        }
    });

    // Hide Dropdown if clicked outside
    document.addEventListener('click', function (e) {
        if (!resultsBox.contains(e.target) && e.target !== searchInput) {
            resultsBox.classList.add('hidden');
        }
    });

    // Add Region AJAX
    function addRegion(regionId, regionName) {
        resultsBox.classList.add('hidden');
        searchInput.value = '';

        fetch('/Worker/AddRegion', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ regionId })
        }).then(res => {
            if (res.ok) location.reload();
        });
    }
</script>