@php
    $targetFieldId = $targetFieldId ?? request('target', 'branch');
    $regionOptions = $regions ?? collect();
    $selectedRegionId = old('loan_region_id', session('selected_region'));
@endphp

<div
    data-modal-stack-panel
    data-modal-stack-title="Add branch"
    data-modal-stack-subtitle="Saved branches appear in the employee dropdown immediately."
    data-modal-stack-size="md"
>
    <form method="post" action="{{ route('loan.employees.branches.store') }}" class="space-y-4" data-modal-stack-form>
        @csrf
        <input type="hidden" name="_modal_stack" value="1">
        <input type="hidden" name="modal_target" value="{{ $targetFieldId }}">
        @include('loan.partials.modal-validation-alert')
        <div>
            <div class="flex items-center gap-2">
                <x-input-label for="employee_branch_region_id" value="Region" class="mb-0" :required="true" />
                <x-loan.modal-stack-trigger
                    :url="route('loan.employees.regions.create', ['modal' => 1, 'target' => 'loan_region_id'])"
                    target="loan_region_id"
                    :refresh-url="route('loan.lookups.regions')"
                    class="!h-7 !w-7 !rounded-md !border-indigo-200 !bg-indigo-50 !text-sm !text-indigo-700 hover:!bg-indigo-100"
                    title="Add region"
                />
            </div>
            <select id="loan_region_id" 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="employee_branch_name" value="Branch name" :required="true" />
                <x-text-input id="employee_branch_name" 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="employee_branch_code" value="Code (optional)" />
                <x-text-input id="employee_branch_code" name="code" type="text" class="mt-1 block w-full" :value="old('code')" />
            </div>
            <div>
                <x-input-label for="employee_branch_phone" value="Phone (optional)" />
                <x-phone-input id="employee_branch_phone" name="phone" :value="old('phone')" />
            </div>
        </div>
        <div>
            <x-input-label for="employee_branch_address" value="Address (optional)" />
            <x-text-input id="employee_branch_address" name="address" type="text" class="mt-1 block w-full" :value="old('address')" />
        </div>
        <div class="flex items-center justify-end gap-2 pt-1">
            <button type="button" class="rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50" data-modal-stack-close>Cancel</button>
            <button type="submit" class="rounded-lg bg-[#2f4f4f] px-3 py-2 text-sm font-semibold text-white hover:bg-[#264040]">Add branch</button>
        </div>
    </form>
</div>