@extends('layouts.dashboard')
@section('title', 'Edit User')
@section('content')
@php $isSP = auth()->user()->role->slug === 'sp'; @endphp

<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 mt-10 mb-12">

    @if($errors->any())
    <div class="mb-6 rounded-lg bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/30 p-4">
        <p class="text-sm font-semibold text-red-700 dark:text-red-400 mb-2">Please fix the following errors:</p>
        <ul class="list-disc list-inside space-y-1">
            @foreach($errors->all() as $error)
            <li class="text-xs text-red-600 dark:text-red-400">{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="bg-white dark:bg-[#121212] rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800/60 overflow-hidden">
        <div class="px-8 py-6 border-b border-gray-100 dark:border-gray-800 bg-gray-50/40 dark:bg-[#181818]/40">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">Edit Staff Account</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Update account details and regional system permissions.</p>
                </div>
                <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs font-semibold text-gray-500 dark:text-gray-400 tracking-wider uppercase">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0"/></svg>
                    {{ $user->employee_code }}
                </span>
            </div>
        </div>

        <form method="POST" action="{{ route('users.update', $user) }}" class="p-8 space-y-10" autocomplete="off" id="editUserForm" onsubmit="return validateManagerSelection(event)">
            @csrf
            @method('PUT')
            @if($isSP)
                <input type="hidden" name="manager_id" id="manager_id" value="{{ old('manager_id', $user->manager_id) }}">
            @endif

            {{-- PROFILE --}}
            <div class="space-y-6">
                <div class="flex items-center gap-3 pb-2 border-b border-gray-100 dark:border-gray-800/50">
                    <span class="h-5 w-1 rounded-full bg-[#FFB531]"></span>
                    <h3 class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">Profile & Account Credentials</h3>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-5">
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">Name <span class="text-rose-500">*</span></label>
                        <input type="text" name="name" required placeholder="John Doe" value="{{ old('name', $user->name) }}"
                            class="w-full px-3.5 py-2 rounded-xl border {{ $errors->has('name') ? 'border-red-400' : 'border-gray-200 dark:border-gray-800' }} bg-white dark:bg-[#1a1a1a] text-gray-900 dark:text-white placeholder-gray-400 shadow-xs transition-all focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">Designation <span class="text-rose-500">*</span></label>
                        <input type="text" name="designation" required placeholder="State Director" value="{{ old('designation', $user->designation) }}"
                            class="w-full px-3.5 py-2 rounded-xl border {{ $errors->has('designation') ? 'border-red-400' : 'border-gray-200 dark:border-gray-800' }} bg-white dark:bg-[#1a1a1a] text-gray-900 dark:text-white placeholder-gray-400 shadow-xs transition-all focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">Staff Type <span class="text-rose-500">*</span></label>
                        <div class="relative">
                            <select name="staff_type" required class="w-full px-3.5 py-2 rounded-xl border {{ $errors->has('staff_type') ? 'border-red-400' : 'border-gray-200 dark:border-gray-800' }} bg-white dark:bg-[#1a1a1a] text-gray-900 dark:text-white shadow-xs transition-all focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 focus:outline-none appearance-none cursor-pointer">
                                <option value="" disabled>Select Staff Type</option>
                                <option value="direct"    {{ old('staff_type', $user->staff_type) === 'direct'    ? 'selected' : '' }}>Direct</option>
                                <option value="Franchise" {{ old('staff_type', $user->staff_type) === 'Franchise' ? 'selected' : '' }}>Franchise</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></div>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">Phone Number</label>
                        <input type="text" name="phone" placeholder="+91 00000 00000" value="{{ old('phone', $user->phone) }}"
                            class="w-full px-3.5 py-2 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#1a1a1a] text-gray-900 dark:text-white placeholder-gray-400 shadow-xs transition-all focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">Joining Date</label>
                        <input type="date" name="joining_date" value="{{ old('joining_date', $user->joining_date ? \Carbon\Carbon::parse($user->joining_date)->format('Y-m-d') : '') }}"
                            class="w-full px-3.5 py-2 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#1a1a1a] text-gray-900 dark:text-white placeholder-gray-400 shadow-xs transition-all focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">Email Address <span class="text-rose-500">*</span></label>
                        <input type="email" name="email" required autocomplete="off" placeholder="name@company.com" value="{{ old('email', $user->email) }}"
                            class="w-full px-3.5 py-2 rounded-xl border {{ $errors->has('email') ? 'border-red-400' : 'border-gray-200 dark:border-gray-800' }} bg-white dark:bg-[#1a1a1a] text-gray-900 dark:text-white placeholder-gray-400 shadow-xs transition-all focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 focus:outline-none">
                        @error('email')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">Employee Code <span class="normal-case text-gray-400">(Optional)</span></label>
                        <input type="text" name="employee_code" placeholder="OE001" value="{{ old('employee_code', $user->employee_code) }}"
                            maxlength="5" pattern="OE[0-9]{3}" title="Use OE followed by exactly 3 digits, for example OE001" oninput="this.value = this.value.toUpperCase()"
                            class="w-full px-3.5 py-2 rounded-xl border {{ $errors->has('employee_code') ? 'border-red-400' : 'border-gray-200 dark:border-gray-800' }} bg-white dark:bg-[#1a1a1a] text-gray-900 dark:text-white placeholder-gray-400 shadow-xs transition-all focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 focus:outline-none">
                        <p class="mt-1 text-xs text-gray-400">Leave empty or use OE followed by 3 digits, for example OE001.</p>
                        @error('employee_code')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                    </div>

                    {{-- Password fields: optional on edit --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">New Password</label>
                        <input type="password" name="password" autocomplete="new-password" placeholder="••••••••"
                            class="w-full px-3.5 py-2 rounded-xl border {{ $errors->has('password') ? 'border-red-400' : 'border-gray-200 dark:border-gray-800' }} bg-white dark:bg-[#1a1a1a] text-gray-900 dark:text-white placeholder-gray-400 shadow-xs transition-all focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 focus:outline-none">
                        <p class="mt-1 text-xs text-gray-400">Leave blank to keep current password.</p>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">Confirm New Password</label>
                        <input type="password" name="password_confirmation" autocomplete="new-password" placeholder="••••••••"
                            class="w-full px-3.5 py-2 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#1a1a1a] text-gray-900 dark:text-white placeholder-gray-400 shadow-xs transition-all focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 focus:outline-none">
                    </div>
                </div>
            </div>

            {{-- ROLE & GEOGRAPHY --}}
            <div class="space-y-6">
                <div class="flex items-center gap-3 pb-2 border-b border-gray-100 dark:border-gray-800/50">
                    <span class="h-5 w-1 rounded-full bg-[#FFB531]"></span>
                    <h3 class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">System Access Hierarchy & Scope</h3>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="hierarchyGrid">

                    {{-- Role --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">System Role Assignment <span class="text-rose-500">*</span></label>
                        <div class="relative">
                            <select name="role_id" id="role_id" required
                                class="w-full px-3.5 py-2 rounded-xl border {{ $errors->has('role_id') ? 'border-red-400' : 'border-gray-200 dark:border-gray-800' }} bg-white dark:bg-[#1a1a1a] text-gray-900 dark:text-white shadow-xs transition-all focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 focus:outline-none appearance-none cursor-pointer">
                                <option value="">Select Role</option>
                                @foreach($roles as $role)
                                    <option value="{{ $role->id }}" data-slug="{{ $role->slug }}" {{ old('role_id', $user->role_id) == $role->id ? 'selected' : '' }}>{{ $role->name }}</option>
                                @endforeach
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></div>
                        </div>
                    </div>

                    {{-- SP/VP: Geography fields --}}
                    @if(in_array(auth()->user()->role->slug, ['sp', 'vp'], true))
                    <div id="field_country" class="hidden">
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">Country</label>
                        <div class="relative">
                            <select name="country_id" id="country_id" class="w-full px-3.5 py-2 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#1a1a1a] text-gray-900 dark:text-white shadow-xs transition-all focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 focus:outline-none appearance-none cursor-pointer">
                                <option value="">Select Country</option>
                                @foreach($countries as $c)<option value="{{ $c->id }}" {{ old('country_id', $user->country_id) == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>@endforeach
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></div>
                        </div>
                    </div>
                    <div id="field_state" class="hidden">
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">State</label>
                        <div class="relative">
                            <select name="state_id" id="state_id" class="w-full px-3.5 py-2 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#1a1a1a] text-gray-900 dark:text-white shadow-xs transition-all focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 focus:outline-none appearance-none cursor-pointer">
                                <option value="">Select State</option>
                                @foreach($states as $s)<option value="{{ $s->id }}" {{ old('state_id', $user->state_id) == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>@endforeach
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></div>
                        </div>
                    </div>
                    <div id="field_district" class="hidden">
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">District</label>
                        <div class="relative">
                            <select name="district_id" id="district_id" class="w-full px-3.5 py-2 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#1a1a1a] text-gray-900 dark:text-white shadow-xs transition-all focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 focus:outline-none appearance-none cursor-pointer">
                                <option value="">Select District</option>
                                @foreach($districts as $d)<option value="{{ $d->id }}" {{ old('district_id', $user->district_id) == $d->id ? 'selected' : '' }}>{{ $d->name }}</option>@endforeach
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></div>
                        </div>
                    </div>
                    @endif

                    {{-- SD: District only --}}
                    @if(auth()->user()->role->slug == 'sd')
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">District</label>
                        <div class="relative">
                            <select name="district_id" class="w-full px-3.5 py-2 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#1a1a1a] text-gray-900 dark:text-white shadow-xs transition-all focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 focus:outline-none appearance-none cursor-pointer">
                                <option value="">Select District</option>
                                @foreach($districts as $d)<option value="{{ $d->id }}" {{ old('district_id', $user->district_id) == $d->id ? 'selected' : '' }}>{{ $d->name }}</option>@endforeach
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></div>
                        </div>
                    </div>
                    @endif

                    {{-- SP: Manager display badge --}}
                    @if($isSP)
                    <div id="managerDisplay" class="{{ old('manager_id', $user->manager_id) ? '' : 'hidden' }}">
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">Reports To <span class="text-rose-500">*</span></label>
                        <div class="flex items-center gap-3 px-4 py-2.5 rounded-xl border border-[#FFB531] bg-amber-50 dark:bg-amber-900/10">
                            <span class="h-2 w-2 rounded-full bg-[#FFB531] flex-shrink-0"></span>
                            <span id="managerName" class="text-sm font-semibold text-gray-900 dark:text-white flex-1">
                                {{ $user->manager ? $user->manager->name . ' (' . strtoupper($user->manager->role->slug ?? '') . ')' : 'Click to select' }}
                            </span>
                            <button type="button" onclick="openManagerPopup()" class="text-xs text-[#FFB531] hover:underline font-semibold">Change</button>
                        </div>
                    </div>
                    @endif

                </div>
            </div>

            {{-- Actions --}}
            <div class="pt-6 border-t border-gray-100 dark:border-gray-800/80 flex items-center gap-3 justify-end">
                <a href="{{ route('users.index') }}" class="px-5 py-2.5 rounded-xl bg-gray-50 dark:bg-gray-800/40 border border-gray-200/60 dark:border-gray-700/50 text-gray-700 dark:text-gray-300 font-semibold text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-all active:scale-[0.98]">Cancel</a>
                <button type="submit" class="px-6 py-2.5 rounded-xl bg-[#FFB531] hover:bg-[#e09e26] text-gray-900 font-bold text-sm shadow-md transition-all active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-[#FFB531]/50">Update User</button>
            </div>
        </form>
    </div>
</div>

@if($isSP)
{{-- MANAGER PICKER MODAL --}}
<div id="managerModal" class="fixed inset-0 z-50 hidden items-center justify-center p-4">
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closeManagerPopup()"></div>
    <div class="relative bg-white dark:bg-[#1a1a1a] rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 w-full max-w-md z-10">
        <div class="flex items-center justify-between p-5 border-b border-gray-100 dark:border-gray-800">
            <div>
                <h3 class="text-base font-bold text-gray-900 dark:text-white" id="popupTitle">Select Manager</h3>
                <p class="text-xs text-gray-400 mt-0.5" id="popupSubtitle">Choose who this user reports to</p>
            </div>
            <button type="button" onclick="closeManagerPopup()" class="text-gray-400 hover:text-gray-600 dark:hover:text-white">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="px-3 pt-3 pb-1">
            <div class="relative">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11A6 6 0 111 11a6 6 0 0116 0z"/></svg>
                <input type="text" id="managerSearch" placeholder="Search by name or role..."
                    class="w-full pl-9 pr-4 py-2 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-[#121212] text-sm text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/20 transition-all"
                    oninput="filterManagerList(this.value)">
            </div>
        </div>
        <div class="p-2 max-h-72 overflow-y-auto" id="managerList">
            <p class="text-sm text-gray-400 text-center py-6">Loading...</p>
        </div>
    </div>
</div>

<script>
const isSP = true;
const managersUrl         = "{{ route('users.managers') }}";
const districtsByStateUrl = "{{ route('districts.by-state') }}";

// Map role_id -> slug from select options
const roleSlugMap = {};
document.querySelectorAll('#role_id option[data-slug]').forEach(opt => {
    roleSlugMap[opt.value] = opt.dataset.slug;
});

// Geography fields to show per role slug
const geoFields = {
    vp:  ['country'],
    sd:  ['country', 'state'],
    rm:  ['country', 'state', 'district'],
    bdm: ['country', 'state', 'district'],
    bde: ['country', 'state', 'district'],
};

const popupTitles = {
    sd:  { title: 'Select Vice President',    sub: 'Showing all Vice Presidents' },
    rm:  { title: 'Select Reporting Manager', sub: 'Showing all State Directors and Vice Presidents' },
    bdm: { title: 'Select Reporting Manager', sub: 'Showing all Regional Managers, State Directors and Vice Presidents' },
    bde: { title: 'Select Reporting Manager', sub: 'Showing all Regional Managers, State Directors and Vice Presidents' },
};

function updateGeoFields(slug) {
    const all  = ['country', 'state', 'district'];
    const show = geoFields[slug] || [];
    all.forEach(f => {
        const el = document.getElementById('field_' + f);
        if (el) el.classList.toggle('hidden', !show.includes(f));
    });
}

document.getElementById('role_id').addEventListener('change', function () {
    const slug = roleSlugMap[this.value] || '';
    updateGeoFields(slug);

    // Reset manager when role changes
    document.getElementById('manager_id').value = '';
    const display = document.getElementById('managerDisplay');
    if (display) display.classList.add('hidden');

    if (slug === 'vp' || slug === '' || slug === 'sp') return;

    if (display) {
        display.classList.remove('hidden');
        document.getElementById('managerName').textContent = 'Click to select';
    }
});

// State → District cascade
const stateSelect    = document.getElementById('state_id');
const districtSelect = document.getElementById('district_id');

if (stateSelect && districtSelect) {
    stateSelect.addEventListener('change', async function () {
        const stateId = this.value;
        districtSelect.innerHTML = '<option value="">Loading...</option>';

        if (!stateId) {
            districtSelect.innerHTML = '<option value="">Select District</option>';
            return;
        }

        try {
            const res  = await fetch(districtsByStateUrl + '?state_id=' + stateId, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            });
            const data = await res.json();

            districtSelect.innerHTML = '<option value="">Select District</option>';
            data.forEach(d => {
                const selected = d.id == {{ $user->district_id ?? 'null' }} ? ' selected' : '';
                districtSelect.innerHTML += `<option value="${d.id}"${selected}>${d.name}</option>`;
            });

            if (data.length === 0) {
                districtSelect.innerHTML = '<option value="">No districts found for this state</option>';
            }
        } catch (e) {
            districtSelect.innerHTML = '<option value="">Failed to load districts</option>';
        }
    });
}

async function openManagerPopup() {
    const roleId = document.getElementById('role_id').value;
    const slug   = roleSlugMap[roleId] || '';
    if (!slug || slug === 'vp') return;

    const titles = popupTitles[slug] || { title: 'Select Manager', sub: 'Choose who this user reports to' };
    document.getElementById('popupTitle').textContent    = titles.title;
    document.getElementById('popupSubtitle').textContent = titles.sub;
    document.getElementById('managerList').innerHTML = '<p class="text-sm text-gray-400 text-center py-6">Loading...</p>';
    document.getElementById('managerSearch').value = '';
    allManagers = [];

    const modal = document.getElementById('managerModal');
    modal.classList.remove('hidden');
    modal.classList.add('flex');

    const params = new URLSearchParams({ role: slug });

    try {
        const res  = await fetch(managersUrl + '?' + params.toString(), {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        });
        const data = await res.json();
        renderManagerList(data);
    } catch (e) {
        document.getElementById('managerList').innerHTML = '<p class="text-sm text-red-400 text-center py-6">Failed to load. Please try again.</p>';
    }
}

let allManagers = [];

function renderManagerList(managers) {
    allManagers = managers;
    renderFilteredList(managers);
}

function filterManagerList(query) {
    const q = query.toLowerCase().trim();
    const filtered = q
        ? allManagers.filter(m =>
            m.name.toLowerCase().includes(q) ||
            m.role_name.toLowerCase().includes(q)
          )
        : allManagers;
    renderFilteredList(filtered);
}

function renderFilteredList(managers) {
    const list = document.getElementById('managerList');
    if (!managers.length) {
        list.innerHTML = '<p class="text-sm text-gray-400 text-center py-6">No managers found.</p>';
        return;
    }
    list.innerHTML = managers.map(m => `
        <button type="button" onclick="selectManager(${m.id}, '${m.name.replace(/'/g, "\\'")} (${m.role_name})')"
            class="w-full flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-amber-50 dark:hover:bg-amber-900/10 hover:border-[#FFB531] border border-transparent transition-all text-left group">
            <div class="h-8 w-8 rounded-full bg-[#FFB531]/20 flex items-center justify-center text-sm font-bold text-[#996515] flex-shrink-0">
                ${m.name.charAt(0).toUpperCase()}
            </div>
            <div class="flex-1 min-w-0">
                <span class="text-sm font-semibold text-gray-900 dark:text-white block">${m.name}</span>
                <span class="text-xs text-gray-400">${m.role_name}</span>
            </div>
            <svg class="w-4 h-4 ml-auto text-gray-300 group-hover:text-[#FFB531] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        </button>
    `).join('');
}

function selectManager(id, name) {
    document.getElementById('manager_id').value = id;
    document.getElementById('managerName').textContent = name;
    document.getElementById('managerDisplay').classList.remove('hidden');

    // Clear error state
    const box = document.getElementById('managerDisplay').querySelector('.flex');
    if (box) {
        box.classList.remove('border-red-400', 'bg-red-50', 'dark:bg-red-900/10');
        box.classList.add('border-[#FFB531]', 'bg-amber-50', 'dark:bg-amber-900/10');
    }
    const errEl = document.getElementById('managerError');
    if (errEl) errEl.remove();

    closeManagerPopup();
}

function closeManagerPopup() {
    const modal = document.getElementById('managerModal');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}

// Restore state on page load
document.addEventListener('DOMContentLoaded', function () {
    const roleSelect = document.getElementById('role_id');
    if (roleSelect.value) {
        const slug = roleSlugMap[roleSelect.value] || '';
        updateGeoFields(slug);

        // Show manager display if a manager is already set
        const managerId = document.getElementById('manager_id').value;
        if (managerId) {
            const display = document.getElementById('managerDisplay');
            if (display) display.classList.remove('hidden');
        }
    }
});

function validateManagerSelection(e) {
    if (!isSP) return true;

    const roleId = document.getElementById('role_id').value;
    const slug   = roleSlugMap[roleId] || '';

    // VP doesn't need popup manager is auto-set to SP
    if (!slug || slug === 'vp' || slug === 'sp' || slug === '') return true;

    const managerId = document.getElementById('manager_id').value;
    if (!managerId) {
        e.preventDefault();

        const display = document.getElementById('managerDisplay');
        if (display) {
            display.classList.remove('hidden');
            const box = display.querySelector('.flex');
            if (box) {
                box.classList.add('border-red-400', 'bg-red-50', 'dark:bg-red-900/10');
                box.classList.remove('border-[#FFB531]', 'bg-amber-50', 'dark:bg-amber-900/10');
            }
        }

        let errEl = document.getElementById('managerError');
        if (!errEl) {
            errEl = document.createElement('p');
            errEl.id = 'managerError';
            errEl.className = 'mt-1 text-xs text-red-500 font-semibold';
            errEl.textContent = 'Please select a Reporting Manager.';
            document.getElementById('managerDisplay').after(errEl);
        }

        document.getElementById('managerDisplay').scrollIntoView({ behavior: 'smooth', block: 'center' });
        return false;
    }
    return true;
}
</script>
@endif

@endsection