@php
    $patientOptions = collect($patients)->map(fn ($patient) => [
        'value' => (string) $patient->id,
        'label' => $patient->fullName().' ('.$patient->patient_number.')',
        'search' => trim($patient->fullName().' '.$patient->patient_number.' '.($patient->phone ?? '').' '.($patient->email ?? '')),
    ])->all();
@endphp

<x-app-layout title="New ambulance call">
    <div class="mx-auto max-w-xl space-y-4">
        <div>
            <p class="text-sm text-slate-500">
                <a href="{{ route('care.specialty.show', 'ambulance') }}" class="text-indigo-600 hover:text-indigo-800">Ambulance</a>
                <span class="text-slate-300">/</span>
                New call
            </p>
            <h1 class="mt-1 text-xl font-semibold text-slate-900">Log a new call</h1>
            <p class="mt-1 text-sm text-slate-500">Creates a dispatch board entry — not a desk walk-in queue ticket for Call next.</p>
        </div>

        @if (session('error'))
            <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ session('error') }}</div>
        @endif

        <form method="POST" action="{{ route('care.specialty.ambulance.new-call.store') }}" class="space-y-4 rounded-2xl border border-slate-200 bg-white p-6">
            @csrf

            <div>
                <label class="block text-sm font-medium text-slate-700">Branch</label>
                <select name="branch_id" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}" @selected(old('branch_id', $defaultBranch) == $branch->id)>{{ $branch->name }}</option>
                    @endforeach
                </select>
                @error('branch_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">Patient</label>
                <x-searchable-select
                    name="patient_id"
                    :options="$patientOptions"
                    :selected="old('patient_id')"
                    :required="true"
                    placeholder="Search name, number, phone…"
                    empty-label="Select patient…"
                />
                @error('patient_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                <p class="mt-1 text-xs text-slate-500">Register the patient first if they are not in the system yet.</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">Call nature / reason</label>
                <input type="text" name="reason" value="{{ old('reason') }}" placeholder="e.g. Chest pain, trauma pickup, facility transfer"
                       class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                @error('reason')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">Scene / pickup location</label>
                <input type="text" name="location" value="{{ old('location') }}" placeholder="Address or landmark"
                       class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                @error('location')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">Notes</label>
                <textarea name="notes" rows="3" class="mt-1 w-full rounded-lg border-slate-300 text-sm">{{ old('notes') }}</textarea>
                @error('notes')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>

            <div class="flex flex-wrap gap-3">
                <button type="submit" class="btn-primary">Log call</button>
                <a href="{{ route('care.specialty.show', 'ambulance') }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm text-slate-600">Cancel</a>
            </div>
        </form>
    </div>
</x-app-layout>