@php
    $targetFieldId = $targetFieldId ?? request('target', 'department');
@endphp

<div
    data-modal-stack-panel
    data-modal-stack-title="Add department"
    data-modal-stack-subtitle="Saved departments appear in the employee dropdown immediately."
    data-modal-stack-size="sm"
>
    <form method="post" action="{{ route('loan.employees.departments.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>
            <x-input-label for="department_quick_name" value="Department name" :required="true" />
            <x-text-input id="department_quick_name" name="name" type="text" class="mt-1 block w-full" :value="old('name')" required autofocus />
            <x-input-error class="mt-2" :messages="$errors->get('name')" />
        </div>
        <div>
            <x-input-label for="department_quick_code" value="Code (optional)" />
            <x-text-input id="department_quick_code" name="code" type="text" class="mt-1 block w-full" :value="old('code')" />
        </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 department</button>
        </div>
    </form>
</div>