@php
    $modalOpen = $modalOpen ?? [
        'department' => false,
        'region' => false,
        'branch' => false,
    ];
    $deferredModalOpen = $deferredModalOpen ?? [
        'department' => false,
        'region' => false,
        'branch' => false,
    ];
    $regionOptions = $regions ?? collect();
    $selectedRegionId = old('loan_region_id', session('selected_region'));
@endphp

<x-platform.modal
    id="employee-lookup-modal-department"
    :show="$modalOpen['department'] ?? false"
    size="sm"
    variant="center"
    :nested="true"
    title="Add department"
    subtitle="Saved departments appear in the employee dropdown immediately."
    title-id="add-dept-modal-title"
>
    <form method="post" action="{{ route('loan.employees.departments.store') }}" class="space-y-4">
        @csrf
        <input type="hidden" name="_modal" value="department">
        <div>
            <x-input-label for="department_name_modal" value="Department name" :required="true" />
            <x-text-input id="department_name_modal" name="name" type="text" class="mt-1 block w-full" :value="old('name')" required />
            <x-input-error class="mt-2" :messages="$errors->get('name')" />
        </div>
        <div>
            <x-input-label for="department_code_modal" value="Code (optional)" />
            <x-text-input id="department_code_modal" name="code" type="text" class="mt-1 block w-full" :value="old('code')" />
        </div>
        <div class="flex items-center gap-3 pt-1">
            <x-primary-button>Add department</x-primary-button>
            <button type="button" data-platform-modal-close class="text-sm text-slate-600 hover:text-slate-800">Cancel</button>
        </div>
    </form>
</x-platform.modal>

<x-platform.modal
    id="employee-lookup-modal-region"
    :show="$modalOpen['region'] ?? false"
    size="sm"
    variant="center"
    :nested="true"
    title="Add region"
    subtitle="Saved regions appear in the branch dropdown immediately."
    title-id="add-region-modal-title"
>
    <form method="post" action="{{ route('loan.employees.regions.store') }}" class="space-y-4">
        @csrf
        <input type="hidden" name="_modal" value="region">
        <input type="hidden" name="return_to_branch" value="1">
        <div>
            <x-input-label for="region_name_modal" value="Region name" :required="true" />
            <x-text-input id="region_name_modal" name="name" type="text" class="mt-1 block w-full" :value="old('name')" required />
            <x-input-error class="mt-2" :messages="$errors->get('name')" />
        </div>
        <div>
            <x-input-label for="region_code_modal" value="Code (optional)" />
            <x-text-input id="region_code_modal" name="code" type="text" class="mt-1 block w-full" :value="old('code')" />
            <x-input-error class="mt-2" :messages="$errors->get('code')" />
        </div>
        <div>
            <x-input-label for="region_description_modal" value="Description (optional)" />
            <textarea id="region_description_modal" name="description" rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('description') }}</textarea>
        </div>
        <div class="flex items-center gap-3 pt-1">
            <x-primary-button>Add region</x-primary-button>
            <button type="button" data-platform-modal-close class="text-sm text-slate-600 hover:text-slate-800">Cancel</button>
        </div>
    </form>
</x-platform.modal>

<x-platform.modal
    id="employee-lookup-modal-branch"
    :show="$modalOpen['branch'] ?? false"
    size="sm"
    variant="center"
    :nested="true"
    title="Add branch"
    subtitle="Saved branches appear in the employee dropdown immediately."
    title-id="add-branch-modal-title"
>
    <form method="post" action="{{ route('loan.employees.branches.store') }}" class="space-y-4">
        @csrf
        <input type="hidden" name="_modal" value="branch">
        <div>
            <div class="flex items-center gap-2">
                <x-input-label for="branch_region_modal" value="Region" class="mb-0" :required="true" />
                @include('loan.employees.partials.add-lookup-button', ['modalKey' => 'region', 'label' => 'region'])
            </div>
            <select id="branch_region_modal" name="loan_region_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" required>
                <option value="">Select region</option>
                @foreach ($regionOptions as $region)
                    <option value="{{ $region->id }}" @selected((string) $selectedRegionId === (string) $region->id)>{{ $region->name }}</option>
                @endforeach
            </select>
            <x-input-error class="mt-2" :messages="$errors->get('loan_region_id')" />
        </div>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <x-input-label for="branch_name_modal" value="Branch name" :required="true" />
                <x-text-input id="branch_name_modal" name="name" type="text" class="mt-1 block w-full" :value="old('name')" required />
                <x-input-error class="mt-2" :messages="$errors->get('name')" />
            </div>
            <div>
                <x-input-label for="branch_code_modal" value="Code (optional)" />
                <x-text-input id="branch_code_modal" name="code" type="text" class="mt-1 block w-full" :value="old('code')" />
            </div>
            <div>
                <x-input-label for="branch_phone_modal" value="Phone (optional)" />
                <x-phone-input id="branch_phone_modal" name="phone" :value="old('phone')" />
            </div>
        </div>
        <div>
            <x-input-label for="branch_address_modal" value="Address (optional)" />
            <x-text-input id="branch_address_modal" name="address" type="text" class="mt-1 block w-full" :value="old('address')" />
        </div>
        <div class="flex items-center gap-3 pt-1">
            <x-primary-button>Add branch</x-primary-button>
            <button type="button" data-platform-modal-close class="text-sm text-slate-600 hover:text-slate-800">Cancel</button>
        </div>
    </form>
</x-platform.modal>

@foreach (['department', 'region', 'branch'] as $lookupKey)
    @if ($deferredModalOpen[$lookupKey] ?? false)
        <span data-deferred-modal-open="employee-lookup-modal-{{ $lookupKey }}" hidden aria-hidden="true"></span>
    @endif
@endforeach