@php
    $modalAppointment = $modalAppointment ?? $appointment;
    $modalId = $modalId ?? 'status-appointment-modal-' . $modalAppointment->id;
    $formId = 'status-appointment-form-' . $modalAppointment->id;
@endphp

<x-ui.modal :id="$modalId" title="Update Appointment Status" description="Change the appointment status and add an optional note." size="md">
    <form id="{{ $formId }}" method="POST" action="{{ route('admin.appointments.status.update', $modalAppointment) }}" class="space-y-4">
        @csrf
        @method('PATCH')

        <div class="grid gap-2">
            @foreach ($statusOptions as $statusValue => $statusLabel)
                <label class="flex cursor-pointer items-center justify-between rounded-lg border border-booklio-border bg-white px-4 py-3 transition hover:border-blue-200 hover:bg-blue-50/40">
                    <span class="text-sm font-bold text-booklio-dark">{{ $statusLabel }}</span>
                    <input type="radio" name="status" value="{{ $statusValue }}" class="h-4 w-4 border-booklio-border text-booklio-primary focus:ring-booklio-primary" @checked(old('status', $modalAppointment->status_value) === $statusValue)>
                </label>
            @endforeach
        </div>

        <x-form.textarea name="status_note" label="Status Note" placeholder="Add a short internal note..." />
    </form>

    <x-slot:footer>
        <x-ui.button variant="secondary" data-modal-close>Cancel</x-ui.button>
        <x-ui.button type="submit" form="{{ $formId }}">Update Status</x-ui.button>
    </x-slot:footer>
</x-ui.modal>