<div>
    <form wire:submit="save">
        <x-card>
            <p class="text-sm text-slate-600">
                Choose up to {{ count($choices) }} programmes in order of preference, from those open for
                <strong class="text-slate-900">{{ $application->intake->name }}</strong>.
            </p>

            <div class="mt-6 grid gap-5 sm:grid-cols-2">
                <x-select wire:model.blur="campus" label="Preferred campus" placeholder="No preference"
                          :options="$campuses->mapWithKeys(fn ($c) => [$c => $c])->all()"
                          :error="$errors->first('campus')" />

                <x-select wire:model.blur="study_mode" label="Preferred study mode" placeholder="No preference"
                          :options="$modes" :error="$errors->first('study_mode')" />
            </div>
        </x-card>

        @error('choices')
            <x-alert type="danger" class="mt-5">{{ $message }}</x-alert>
        @enderror

        <div class="mt-6 space-y-5">
            @foreach ($choices as $number => $programmeId)
                <x-card wire:key="choice-{{ $number }}">
                    <div class="flex items-center justify-between gap-4">
                        <h2 class="text-base font-semibold text-slate-900">
                            Choice {{ $number }}
                            @if ($number === 1)
                                <span class="ml-1 text-xs font-normal text-red-600">Required</span>
                            @else
                                <span class="ml-1 text-xs font-normal text-slate-400">Optional</span>
                            @endif
                        </h2>
                    </div>

                    <div class="mt-4">
                        <x-select wire:model.live="choices.{{ $number }}"
                                  label="Programme"
                                  placeholder="Select a programme"
                                  :error="$errors->first('choices.'.$number)">
                            <option value="">Select a programme</option>
                            @foreach ($grouped as $school => $programmes)
                                <optgroup label="{{ $school }}">
                                    @foreach ($programmes as $programme)
                                        <option value="{{ $programme->id }}" @selected((string) $programmeId === (string) $programme->id)>
                                            {{ $programme->name }} ({{ $programme->durationLabel() }})
                                        </option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </x-select>
                    </div>

                    {{-- Advisory eligibility feedback (PRD 16) --}}
                    @if (isset($eligibility[$number]))
                        @php $result = $eligibility[$number]; @endphp

                        <div class="mt-4">
                            @if ($result->isEligible() && ! $result->isIndeterminate())
                                <x-alert type="success">
                                    <p class="font-medium">You appear eligible</p>
                                    <p class="mt-0.5 text-xs">Final eligibility is confirmed by our admissions team.</p>
                                </x-alert>
                            @elseif ($result->isIndeterminate())
                                <x-alert type="info">
                                    <p class="font-medium">{{ $result->summary() }}</p>
                                    <p class="mt-0.5 text-xs">
                                        We could not check every requirement from the qualifications you have entered.
                                    </p>
                                </x-alert>
                            @else
                                <x-alert type="warning">
                                    <p class="font-medium">Requirements may not be met</p>
                                    <ul class="mt-1.5 list-disc space-y-0.5 pl-4 text-xs">
                                        @foreach ($result->unmetRequired() as $check)
                                            <li>{{ $check['description'] }}</li>
                                        @endforeach
                                    </ul>
                                    <p class="mt-2 text-xs">
                                        You may still apply — our admissions team reviews every application individually.
                                    </p>
                                </x-alert>
                            @endif
                        </div>
                    @endif
                </x-card>
            @endforeach
        </div>

        <div class="mt-6 flex flex-wrap items-center justify-between gap-3">
            <x-button type="button" wire:click="previousStep" variant="outline">Back</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>
