@php
    $targetFieldId = $targetFieldId ?? request('target', 'salary_class_id');
    $selectedPayGroupId = old('pay_group_id', request('pay_group_id'));
    $payGroups = $payGroups ?? collect();
@endphp

<div
    data-modal-stack-panel
    data-modal-stack-title="Add salary class"
    data-modal-stack-subtitle="Define basic pay for this class. Allowances can be added later in payroll settings."
    data-modal-stack-size="md"
>
    <form method="post" action="{{ route('loan.employees.salary_classes.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="salary_class_quick_pay_group_id" value="Pay group" class="mb-0" :required="true" />
                @if ($canQuickCreatePayGroup ?? false)
                    @include('loan.employees.partials.add-lookup-button', [
                        'modalKey' => 'pay_group',
                        'label' => 'pay group',
                        'target' => 'salary_class_quick_pay_group_id',
                        'createUrl' => route('loan.employees.pay_groups.create', ['modal' => 1, 'target' => 'salary_class_quick_pay_group_id']),
                        'refreshUrl' => route('loan.accounting.payroll.lookups.pay_groups'),
                    ])
                @endif
            </div>
            <select id="salary_class_quick_pay_group_id" name="pay_group_id" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                <option value="">Select pay group</option>
                @foreach ($payGroups as $group)
                    <option value="{{ $group->id }}" @selected((string) $selectedPayGroupId === (string) $group->id)>{{ $group->name }}</option>
                @endforeach
            </select>
            <x-input-error class="mt-2" :messages="$errors->get('pay_group_id')" />
        </div>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <x-input-label for="salary_class_quick_code" value="Class code" :required="true" />
                <x-text-input id="salary_class_quick_code" name="code" type="text" class="mt-1 block w-full" :value="old('code')" required />
                <x-input-error class="mt-2" :messages="$errors->get('code')" />
            </div>
            <div>
                <x-input-label for="salary_class_quick_basic_salary" value="Basic salary (KES)" :required="true" />
                <x-text-input id="salary_class_quick_basic_salary" name="basic_salary" type="number" step="0.01" min="0.01" class="mt-1 block w-full" :value="old('basic_salary')" required />
                <x-input-error class="mt-2" :messages="$errors->get('basic_salary')" />
            </div>
        </div>
        <div>
            <x-input-label for="salary_class_quick_name" value="Class name" :required="true" />
            <x-text-input id="salary_class_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 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 salary class</button>
        </div>
    </form>
</div>