<div>
    <form wire:submit="save">
        <x-card>
            <p class="text-sm text-slate-600">
                Enter your details exactly as they appear on your academic and identity documents.
            </p>

            <div class="mt-6 space-y-5">

                <div class="grid gap-5 sm:grid-cols-2">
                    <x-input wire:model.blur="first_name" name="first_name" label="First name" required
                             :error="$errors->first('first_name')" autocomplete="given-name" />
                    <x-input wire:model.blur="last_name" name="last_name" label="Last name" required
                             :error="$errors->first('last_name')" autocomplete="family-name" />
                </div>

                <x-input wire:model.blur="middle_name" name="middle_name" label="Middle name"
                         :error="$errors->first('middle_name')" hint="Optional" autocomplete="additional-name" />

                <div class="grid gap-5 sm:grid-cols-2">
                    <x-input wire:model.blur="date_of_birth" name="date_of_birth" type="date"
                             label="Date of birth" required :error="$errors->first('date_of_birth')" />

                    <x-select wire:model.blur="gender" name="gender" label="Gender" required
                              placeholder="Select" :options="$genders" :error="$errors->first('gender')" />
                </div>

                <div class="grid gap-5 sm:grid-cols-2">
                    <x-input wire:model.blur="nationality" name="nationality" label="Nationality" required
                             :error="$errors->first('nationality')" />

                    <x-select wire:model.blur="marital_status" name="marital_status" label="Marital status"
                              placeholder="Select"
                              :options="['single' => 'Single', 'married' => 'Married', 'divorced' => 'Divorced', 'widowed' => 'Widowed']"
                              :error="$errors->first('marital_status')" />
                </div>

                {{-- Identity document: conditional fields (PRD 14) --}}
                <fieldset class="rounded-lg border border-slate-200 p-4">
                    <legend class="px-1 text-sm font-medium text-slate-800">Identity document</legend>

                    <div class="mt-2 flex flex-wrap gap-4">
                        @foreach (['national_id' => 'National ID', 'passport' => 'Passport'] as $value => $label)
                            <label class="flex items-center gap-2 text-sm text-slate-700">
                                <input type="radio" wire:model.live="identity_type" value="{{ $value }}"
                                       class="h-4 w-4 border-slate-300 text-brand-700 focus:ring-brand-700">
                                {{ $label }}
                            </label>
                        @endforeach
                    </div>

                    <div class="mt-4">
                        @if ($identity_type === 'national_id')
                            <x-input wire:model.blur="national_id" name="national_id"
                                     label="National ID number" required
                                     hint="As printed on your NIRA card, e.g. CM90123456ABCD"
                                     :error="$errors->first('national_id')" />
                        @else
                            <x-input wire:model.blur="passport_number" name="passport_number"
                                     label="Passport number" required
                                     :error="$errors->first('passport_number')" />
                        @endif
                    </div>
                </fieldset>

                {{-- Disability: conditional detail --}}
                <fieldset class="rounded-lg border border-slate-200 p-4">
                    <legend class="px-1 text-sm font-medium text-slate-800">Accessibility</legend>
                    <p class="mt-1 text-xs text-slate-500">
                        This helps us provide the right support. It does not affect your admission decision.
                    </p>

                    <div class="mt-3">
                        <x-select wire:model.live="disability_status" name="disability_status"
                                  label="Do you have a disability we should know about?"
                                  :options="['none' => 'No', 'yes' => 'Yes', 'prefer_not_to_say' => 'Prefer not to say']"
                                  :error="$errors->first('disability_status')" />
                    </div>

                    @if ($disability_status === 'yes')
                        <div class="mt-4">
                            <x-textarea wire:model.blur="disability_details" name="disability_details"
                                        label="What support would help?" required rows="3"
                                        :error="$errors->first('disability_details')">{{ $disability_details }}</x-textarea>
                        </div>
                    @endif
                </fieldset>
            </div>
        </x-card>

        <div class="mt-6 flex flex-wrap items-center justify-between gap-3">
            <x-button :href="route('applicant.dashboard')" variant="ghost">Save &amp; finish later</x-button>

            <x-button type="submit" size="lg" wire:loading.attr="disabled">
                <span wire:loading.remove wire:target="save">Save &amp; Continue</span>
                <span wire:loading wire:target="save">Saving…</span>
            </x-button>
        </div>
    </form>
</div>
