@php
    $isEdit = $vaccine !== null;
    $action = $isEdit ? route('vaccines.update', $vaccine) : route('vaccines.store');
    $method = $isEdit ? 'PUT' : 'POST';
    $routeSelect = ['' => 'Default (intramuscular)'] + $routeOptions;
    $siteSelect = ['' => 'No default site'] + $siteOptions;
    $typeSelect = ['' => 'Unspecified'] + $typeOptions;
@endphp

<x-app-layout title="{{ $isEdit ? 'Edit vaccine' : 'Add a vaccine' }}">
    <x-page-header
        :title="$isEdit ? 'Edit '.$vaccine->name : 'Add a vaccine'"
        subtitle="The course definition drives scheduling — how many doses, and the interval that books the next one."
        icon="shield-check"
        :back="route('vaccines.index')"
        backLabel="Vaccine catalogue">
    </x-page-header>

    <div class="grid gap-6 xl:grid-cols-[1fr_20rem]">
        <form method="POST" action="{{ $action }}" class="space-y-6">
            @csrf
            @if ($method !== 'POST')
                @method($method)
            @endif

            <x-card title="Identity" icon="shield-check">
                <div class="grid gap-4 sm:grid-cols-2">
                    <x-form.input name="code" label="Code" required :value="old('code', $vaccine?->code)"
                                  placeholder="e.g. KE-EPI-BCG" />
                    <x-form.input name="name" label="Name" required :value="old('name', $vaccine?->name)"
                                  placeholder="e.g. Bacillus Calmette–Guérin" />
                    <x-form.input name="short_name" label="Short name" :value="old('short_name', $vaccine?->short_name)"
                                  placeholder="e.g. BCG" />
                    <x-form.input name="manufacturer" label="Manufacturer" :value="old('manufacturer', $vaccine?->manufacturer)" />
                    <div class="sm:col-span-2">
                        <x-form.input name="disease_prevented" label="Disease prevented" required
                                      :value="old('disease_prevented', $vaccine?->disease_prevented)"
                                      placeholder="e.g. Tuberculosis (severe childhood forms)" />
                    </div>
                    <x-form.select name="vaccine_type" label="Vaccine type" :options="$typeSelect"
                                   :value="old('vaccine_type', $vaccine?->vaccine_type)" />
                    <x-form.checkbox name="is_government_supplied" label="Government supplied"
                                     :checked="(bool) old('is_government_supplied', $vaccine?->is_government_supplied ?? false)"
                                     hint="Part of the national (EPI/SHA) programme — free at the desk." />
                </div>
            </x-card>

            <x-card title="Course and administration" icon="calendar">
                <div class="grid gap-4 sm:grid-cols-3">
                    <x-form.input type="number" name="doses_required" label="Doses in the course" required min="1" max="10"
                                  :value="old('doses_required', $vaccine?->doses_required ?? 1)" />
                    <x-form.input type="number" name="interval_days" label="Interval between doses (days)" min="1"
                                  :value="old('interval_days', $vaccine?->interval_days)"
                                  hint="Required when the course is more than one dose." />
                    <x-form.input type="number" step="0.01" name="dose_volume_ml" label="Dose volume (ml)" min="0" max="20"
                                  :value="old('dose_volume_ml', $vaccine?->dose_volume_ml)" />
                    <x-form.select name="route" label="Route" :options="$routeSelect"
                                   :value="old('route', $vaccine?->route)" />
                    <x-form.select name="site" label="Default site" :options="$siteSelect"
                                   :value="old('site', $vaccine?->site)" />
                    <x-form.input name="schedule_age_label" label="Schedule age label"
                                  :value="old('schedule_age_label', $vaccine?->schedule_age_label)"
                                  placeholder="e.g. Birth / 6 weeks / 9 months" />
                    <x-form.input type="number" name="min_age_days" label="Minimum age (days)"
                                  :value="old('min_age_days', $vaccine?->min_age_days)" />
                    <x-form.input type="number" name="max_age_days" label="Maximum age (days)"
                                  :value="old('max_age_days', $vaccine?->max_age_days)" />
                    <x-form.input name="storage_conditions" label="Storage conditions"
                                  :value="old('storage_conditions', $vaccine?->storage_conditions ?? '+2C to +8C')" />
                </div>
            </x-card>

            <x-card title="More" icon="note">
                <div class="grid gap-4 sm:grid-cols-2">
                    <x-form.input type="number" step="0.01" name="price" label="Price (Kshs)" min="0"
                                  :value="old('price', $vaccine?->price ?? 0)" />
                    <x-form.textarea name="notes" label="Notes" rows="3" :value="old('notes', $vaccine?->notes)" />
                </div>
            </x-card>

            <div class="flex items-center justify-end gap-3">
                <a href="{{ route('vaccines.index') }}" class="hms-btn-ghost">Cancel</a>
                <button type="submit" class="hms-btn-primary">
                    <x-icon name="check" size="sm" />
                    {{ $isEdit ? 'Save changes' : 'Add to the catalogue' }}
                </button>
            </div>
        </form>

        <div class="space-y-6">
            <x-card title="Why the interval matters" icon="info">
                <p class="text-xs leading-relaxed text-slate-600">
                    When a dose is recorded, the desk books the next one automatically: administered date plus
                    this interval. Leave it blank only for single-dose vaccines — a multi-dose course without
                    an interval cannot schedule its own follow-ons.
                </p>
            </x-card>
        </div>
    </div>
</x-app-layout>