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

<div
    data-modal-stack-panel
    data-modal-stack-title="Add pay group"
    data-modal-stack-subtitle="Saved pay groups appear in the employee dropdown immediately."
    data-modal-stack-size="sm"
>
    <form method="post" action="{{ route('loan.employees.pay_groups.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="pay_group_quick_code" value="Code" :required="true" />
            <x-text-input id="pay_group_quick_code" name="code" type="text" class="mt-1 block w-full" :value="old('code')" required autofocus placeholder="e.g. main" />
            <p class="mt-1 text-xs text-slate-500">Short unique code (letters, numbers, dashes).</p>
            <x-input-error class="mt-2" :messages="$errors->get('code')" />
        </div>
        <div>
            <x-input-label for="pay_group_quick_name" value="Pay group name" :required="true" />
            <x-text-input id="pay_group_quick_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="pay_group_quick_description" value="Description (optional)" />
            <textarea id="pay_group_quick_description" 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 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 pay group</button>
        </div>
    </form>
</div>