@extends('layouts.dashboard')
@section('title', 'Create Staff Account')
@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">
                <h2 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">Create Staff Account</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Provision a new account with regional system
                    permissions.</p>
            </div>

            <form method="POST" action="{{ route('users.store') }}" class="p-8 space-y-10" autocomplete="off"
                id="createUserForm" onsubmit="return validateManagerSelection(event)">
                @csrf
                @if ($isSP)
                    <input type="hidden" name="manager_id" id="manager_id" required value="{{ old('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') }}"
                                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') }}"
                                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 {{ old('staff_type') ? '' : 'selected' }}>Select Staff
                                        Type</option>
                                    <option value="direct" {{ old('staff_type') === 'direct' ? 'selected' : '' }}>Direct
                                    </option>
                                    <option value="Franchise" {{ old('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') }}"
                                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', today()->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') }}"
                                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') }}" 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>
                        <div>
                            <label
                                class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">Password
                                <span class="text-rose-500">*</span></label>
                            <input type="password" name="password" required 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">
                        </div>
                        <div>
                            <label
                                class="block text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">Confirm
                                Password <span class="text-rose-500">*</span></label>
                            <input type="password" name="password_confirmation" required 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') == $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 (shown/hidden by JS for SP) --}}
                        @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
                                    <span class="text-rose-500">*</span></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') == $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
                                    <span class="text-rose-500">*</span></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') == $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
                                    <span class="text-rose-500">*</span></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') == $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>
                            {{-- city_id field removed --}}

                        @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
                                    <span class="text-rose-500">*</span></label>
                                <div class="relative">
                                    <select name="district_id" required
                                        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') == $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="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">—</span>
                                    <button type="button" onclick="openManagerPopup()"
                                        class="text-xs text-[#FFB531] hover:underline font-semibold">Change</button>
                                </div>
                            </div>
                        @endif

                        {{-- RM: city removed, district inherited from SD scope --}}

                    </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">Create
                        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 city removed from all roles
            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']; // city removed
                const show = geoFields[slug] || [];
                all.forEach(f => {
                    const el = document.getElementById('field_' + f);
                    const input = document.getElementById(f + '_id');
                    const isVisible = show.includes(f);

                    if (el) el.classList.toggle('hidden', !isVisible);
                    if (input) {
                        input.required = isVisible;

                        if (!isVisible) {
                            input.value = '';
                        }
                    }
                });
            }

            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;
                    // Reset district
                    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 => {
                            districtSelect.innerHTML += `<option value="${d.id}">${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 stateEl = document.getElementById('state_id');
                const districtEl = document.getElementById('district_id');
                const stateId = stateEl ? stateEl.value : '';
                const districtId = districtEl ? districtEl.value : '';

                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
                });
                // no geography filter show all users above this role

                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 validation error
            document.addEventListener('DOMContentLoaded', function() {
                const roleSelect = document.getElementById('role_id');
                if (roleSelect.value) {
                    const slug = roleSlugMap[roleSelect.value] || '';
                    updateGeoFields(slug);
                    const oldManager = document.getElementById('manager_id').value;
                    if (oldManager) {
                        document.getElementById('managerDisplay').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();

                    // Highlight the manager display box in red
                    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');
                        }
                    }

                    // Show error message
                    let errEl = document.getElementById('managerError');
                    if (!errEl) {
                        errEl = document.createElement('p');
                        errEl.id = 'managerError';
                        errEl.className = 'mt-1.5 text-xs text-red-500 font-semibold';
                        errEl.textContent = 'Please select a Reporting Manager.';
                        // Append inside managerDisplay so it appears below the box within the grid cell
                        document.getElementById('managerDisplay').appendChild(errEl);
                    }

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

@endsection