@php
    $open = $encounter->status === 'open';
    $diagnoses = $encounter->diagnoses->sortByDesc('is_primary')->sortBy('diagnosis_type');
    $activeAllergies = $allergies->where('is_active', true);
    $activeProblems = $problems->where('status', 'active');
@endphp

<x-app-layout title="{{ $encounter->encounter_no }}">
    <x-page-header
        title="{{ $encounter->encounter_no }}"
        subtitle="{{ $patient->full_name }} · {{ $encounter->encounter_type_label }}@if ($encounter->department) · {{ $encounter->department->name }}@endif"
        icon="stethoscope"
        :back="route('encounters.index')"
        backLabel="Encounters">
        <x-slot:meta>
            <x-status-badge field="encounter_status" :value="$encounter->status" size="sm" dot />
            <x-status-badge field="encounter_type" :value="$encounter->encounter_type" size="sm" />
            @if ($encounter->visit?->priority && $encounter->visit->priority !== 'routine')
                <x-status-badge field="priority" :value="$encounter->visit->priority" size="sm" />
            @endif
            @if ($patient->isRestricted())
                <span class="inline-flex items-center gap-1 text-xs font-medium text-amber-700">
                    <x-icon name="lock" size="xs" /> Restricted record
                </span>
            @endif
        </x-slot:meta>

        <x-slot:actions>
            @can('patients.view')
                <a href="{{ route('patients.show', $patient) }}" class="hms-btn-secondary">
                    <x-icon name="users" size="sm" />
                    Patient record
                </a>
            @endcan

            @if ($can['amend'])
                <a href="{{ route('encounters.edit', $encounter) }}" class="hms-btn-secondary">
                    <x-icon name="edit" size="sm" />
                    Amend narrative
                </a>
            @endif

            @can('prescriptions.create')
                <a href="{{ route('prescriptions.create', ['patient_id' => $patient->id, 'encounter_id' => $encounter->id]) }}"
                   class="hms-btn-secondary">
                    <x-icon name="pill" size="sm" />
                    Write prescription
                </a>
            @endcan

            @can('encounters.close')
                @if ($open)
                    <button type="button" class="hms-btn-primary"
                            x-on:click="$dispatch('open-modal', 'encounter-close')">
                        <x-icon name="document-check" size="sm" />
                        Close encounter
                    </button>
                @endif
            @endcan
        </x-slot:actions>
    </x-page-header>

    @if ($patient->isRestricted())
        <div class="mb-6">
            <x-alert type="warning" title="Restricted record">
                Access to this record is limited. You are seeing it because your account holds the restricted-access
                permission, and this access has been logged.
            </x-alert>
        </div>
    @endif

    {{-- ------------------------------------------------------------- context --}}
    <x-card class="mb-6">
        <dl class="grid gap-x-6 gap-y-4 sm:grid-cols-2 lg:grid-cols-4">
            <div>
                <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Patient</dt>
                <dd class="mt-0.5">
                    <div class="flex items-center gap-2">
                        <span class="font-medium text-slate-900">{{ $patient->full_name }}</span>
                        @if ($patient->isRestricted())
                            <x-icon name="lock" size="xs" class="text-amber-600" />
                        @endif
                    </div>
                    <div class="font-mono text-xs text-slate-500">{{ $patient->medical_record_number }}</div>
                    <div class="text-xs text-slate-500">
                        {{ $patient->age_display }}
                        @if ($patient->gender) · {{ $patient->gender_label }} @endif
                    </div>
                </dd>
            </div>

            <div>
                <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Clinician</dt>
                <dd class="mt-0.5 text-sm text-slate-800">
                    {{ $encounter->doctor?->name ?? 'Unassigned' }}
                    <div class="text-xs text-slate-400">
                        Opened by {{ $encounter->createdBy?->name ?? 'system' }}
                    </div>
                </dd>
            </div>

            <div>
                <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Attendance</dt>
                <dd class="mt-0.5 text-sm text-slate-800">
                    @if ($encounter->visit)
                        <span class="font-mono text-xs">{{ $encounter->visit->visit_no }}</span>
                        @if ($encounter->visit->token_number)
                            <span class="ml-1 inline-flex h-6 min-w-6 items-center justify-center rounded bg-brand-50 px-1.5 font-mono text-xs font-semibold text-brand-700">
                                {{ $encounter->visit->token_number }}
                            </span>
                        @endif
                        <div class="mt-0.5">
                            <x-status-badge field="visit_status" :value="$encounter->visit->status" size="sm" dot />
                        </div>
                    @else
                        <span class="text-slate-400">Not tied to a visit</span>
                    @endif
                </dd>
            </div>

            <div>
                <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Timeline</dt>
                <dd class="mt-0.5 text-sm text-slate-800">
                    Started {{ $encounter->started_at?->format('d M Y H:i') ?? '—' }}
                    <div class="text-xs text-slate-400">
                        @if ($encounter->closed_at)
                            Closed {{ $encounter->closed_at->format('d M Y H:i') }}
                        @else
                            Still open
                        @endif
                    </div>
                </dd>
            </div>
        </dl>

        @if ($encounter->visit && $can['clinical'])
            <div class="mt-4 flex flex-wrap gap-2 border-t border-slate-200 pt-3">
                @can('queue.view')
                    <a href="{{ route('queue.index', ['date' => $encounter->visit->visit_date?->toDateString()]) }}"
                       class="hms-link text-xs">Queue board</a>
                @endcan

                <a href="{{ route('patients.clinical', $patient) }}" class="hms-link text-xs">Clinical hub</a>

                @can('medications.view')
                    <span class="text-xs text-slate-400">
                        Prescribing and the medication list live in the E-Prescription module once the encounter is
                        closed.
                    </span>
                @endcan
            </div>
        @endif
    </x-card>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="space-y-6 lg:col-span-2">
            {{-- ------------------------------------------------------- narrative --}}
            <x-card id="narrative" title="Clinical narrative" icon="document-text">
                <x-slot:header>
                    The story of this consultation. @if ($open) It stays editable until the encounter is closed. @else It is frozen — the encounter has been closed. @endif
                </x-slot:header>

                <x-slot:actions>
                    @if ($can['amend'])
                        <a href="{{ route('encounters.edit', $encounter) }}" class="hms-link text-xs">Amend</a>
                    @endif
                </x-slot:actions>

                <dl class="space-y-5">
                    @foreach ([
                        'Presenting complaint' => $encounter->chief_complaint,
                        'History of presenting illness' => $encounter->history_of_presenting_illness,
                        'Review of systems' => $encounter->review_of_systems,
                        'Physical examination' => $encounter->physical_examination,
                        'Plan' => $encounter->plan,
                    ] as $label => $value)
                        <div>
                            <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">{{ $label }}</dt>
                            <dd class="mt-1 whitespace-pre-line text-sm text-slate-700">
                                {{ filled($value) ? $value : '—' }}
                            </dd>
                        </div>
                    @endforeach
                </dl>

                @unless (filled($encounter->chief_complaint) || filled($encounter->history_of_presenting_illness) || filled($encounter->physical_examination) || filled($encounter->plan))
                    <div class="mt-4 rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-800">
                        Nothing has been written into the narrative yet.
                        @if ($can['amend'])
                            <a href="{{ route('encounters.edit', $encounter) }}" class="font-medium underline">Write it up</a>.
                        @endif
                    </div>
                @endunless
            </x-card>

            {{-- ---------------------------------------------------------- vitals --}}
            @if ($can['vitals'])
                <x-card id="vitals" title="Observations" icon="activity" flush>
                    <x-slot:header>Vital signs taken during this encounter, most recent first.</x-slot:header>

                    <x-slot:actions>
                        @if ($can['vitalsRecord'])
                            <button type="button" class="hms-btn-primary hms-btn-sm"
                                    x-on:click="$dispatch('open-modal', 'vitals-record')">
                                <x-icon name="plus" size="xs" />
                                Record observations
                            </button>
                        @endif
                    </x-slot:actions>

                    @if ($vitals->isEmpty())
                        <div class="px-5 py-10 text-center">
                            <p class="text-sm text-slate-500">No observations recorded for this encounter yet.</p>
                            @if ($can['vitalsRecord'])
                                <button type="button" class="hms-btn-secondary hms-btn-sm mt-3"
                                        x-on:click="$dispatch('open-modal', 'vitals-record')">
                                    <x-icon name="plus" size="xs" />
                                    Record the first set
                                </button>
                            @endif
                        </div>
                    @else
                        <div class="overflow-x-auto">
                            <table class="hms-table">
                                <thead>
                                    <tr>
                                        <th>Taken</th>
                                        <th>Temp</th>
                                        <th>Pulse</th>
                                        <th>BP</th>
                                        <th>RR</th>
                                        <th>SpO₂</th>
                                        <th>Weight / BMI</th>
                                        <th>Pain</th>
                                        <th>Source</th>
                                        <th>By</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($vitals as $vital)
                                        <tr class="{{ $vital->is_abnormal ? 'bg-amber-50/60' : '' }}">
                                            <td class="whitespace-nowrap text-xs text-slate-600">
                                                {{ $vital->recorded_at?->format('d M H:i') }}
                                                @if ($vital->is_abnormal)
                                                    <div class="mt-0.5">
                                                        <x-status-badge label="Outside range" color="amber" size="sm" />
                                                    </div>
                                                @endif
                                            </td>
                                            <td class="text-sm text-slate-800">
                                                {{ $vital->temperature !== null ? number_format((float) $vital->temperature, 1).'°C' : '—' }}
                                            </td>
                                            <td class="text-sm text-slate-800">{{ $vital->pulse ?? '—' }}</td>
                                            <td class="whitespace-nowrap text-sm text-slate-800">
                                                @if ($vital->bp_systolic && $vital->bp_diastolic)
                                                    {{ $vital->bp_systolic }}/{{ $vital->bp_diastolic }}
                                                    <span class="text-xs text-slate-400">({{ $vital->mean_arterial_pressure }})</span>
                                                @else
                                                    —
                                                @endif
                                            </td>
                                            <td class="text-sm text-slate-800">{{ $vital->respiratory_rate ?? '—' }}</td>
                                            <td class="text-sm text-slate-800">{{ $vital->spo2 ? $vital->spo2.'%' : '—' }}</td>
                                            <td class="whitespace-nowrap text-sm text-slate-800">
                                                @if ($vital->weight_kg)
                                                    {{ number_format((float) $vital->weight_kg, 1) }} kg
                                                    @if ($vital->bmi)
                                                        <div class="text-xs text-slate-400">
                                                            BMI {{ $vital->bmi }} · {{ $vital->bmi_category }}
                                                        </div>
                                                    @endif
                                                @else
                                                    —
                                                @endif
                                            </td>
                                            <td class="text-sm text-slate-800">
                                                {{ $vital->pain_score !== null ? $vital->pain_score.'/10' : '—' }}
                                            </td>
                                            <td>
                                                <x-status-badge :label="$vital->source_label" :color="$vital->source_color" size="sm" />
                                            </td>
                                            <td class="text-xs text-slate-500">{{ $vital->recordedBy?->name ?? '—' }}</td>
                                            <td>
                                                @if ($can['vitalsRecord'] && $open)
                                                    <div class="flex justify-end">
                                                        <form method="POST"
                                                              action="{{ route('encounters.vitals.destroy', [$encounter, $vital]) }}"
                                                              onsubmit="return confirm('Remove this set of observations?')">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="hms-btn-ghost hms-btn-sm text-red-600 hover:bg-red-50">
                                                                <x-icon name="trash" size="xs" />
                                                            </button>
                                                        </form>
                                                    </div>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </x-card>
            @endif

            {{-- ------------------------------------------------------- diagnoses --}}
            @if ($can['diagnoses'])
                <x-card id="diagnoses" title="Diagnoses" icon="clipboard-check" flush>
                    <x-slot:header>Coded against ICD-10 for the claim that follows. A diagnosis stays revisable after the encounter closes.</x-slot:header>

                    <x-slot:actions>
                        @if ($can['diagnosesCreate'])
                            <button type="button" class="hms-btn-primary hms-btn-sm"
                                    x-on:click="$dispatch('open-modal', 'diagnosis-add')">
                                <x-icon name="plus" size="xs" />
                                Add diagnosis
                            </button>
                        @endif
                    </x-slot:actions>

                    @if ($diagnoses->isEmpty())
                        <div class="px-5 py-10 text-center">
                            <p class="text-sm text-slate-500">No diagnosis has been recorded for this encounter.</p>
                            @if ($can['diagnosesCreate'])
                                <button type="button" class="hms-btn-secondary hms-btn-sm mt-3"
                                        x-on:click="$dispatch('open-modal', 'diagnosis-add')">
                                    <x-icon name="plus" size="xs" />
                                    Record the first
                                </button>
                            @endif
                        </div>
                    @else
                        <div class="overflow-x-auto">
                            <table class="hms-table">
                                <thead>
                                    <tr>
                                        <th>Code</th>
                                        <th>Diagnosis</th>
                                        <th>Type</th>
                                        <th>Certainty</th>
                                        <th>Onset</th>
                                        <th>By</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($diagnoses as $diagnosis)
                                        <tr>
                                            <td class="whitespace-nowrap font-mono text-xs text-slate-700">
                                                {{ $diagnosis->code_text ?? $diagnosis->icd10Code?->code ?? '—' }}
                                            </td>
                                            <td>
                                                <div class="flex flex-wrap items-center gap-1.5">
                                                    <span class="font-medium text-slate-800">{{ $diagnosis->description }}</span>
                                                    @if ($diagnosis->is_primary)
                                                        <x-status-badge label="Primary" color="red" size="sm" />
                                                    @endif
                                                    @if ($diagnosis->is_chronic)
                                                        <x-status-badge label="Chronic" color="purple" size="sm" />
                                                    @endif
                                                </div>
                                                @if ($diagnosis->notes)
                                                    <div class="mt-0.5 text-xs text-slate-500">{{ $diagnosis->notes }}</div>
                                                @endif
                                            </td>
                                            <td>
                                                <x-status-badge :label="$diagnosis->diagnosis_type_label"
                                                                :color="$diagnosis->diagnosis_type_color" size="sm" />
                                            </td>
                                            <td>
                                                <x-status-badge :label="$diagnosis->certainty_label"
                                                                :color="$diagnosis->certainty_color" size="sm" />
                                            </td>
                                            <td class="text-xs text-slate-500">
                                                {{ $diagnosis->onset_date?->format('d M Y') ?? '—' }}
                                            </td>
                                            <td class="text-xs text-slate-500">
                                                {{ $diagnosis->diagnosedBy?->name ?? '—' }}
                                                <div class="text-slate-400">{{ $diagnosis->diagnosed_at?->format('d M Y') }}</div>
                                            </td>
                                            <td>
                                                @if ($can['diagnosesEdit'])
                                                    <div class="flex items-center justify-end gap-1">
                                                        <button type="button" class="hms-btn-ghost hms-btn-sm"
                                                                x-on:click="$dispatch('open-modal', 'diagnosis-edit-{{ $diagnosis->id }}')">
                                                            <x-icon name="edit" size="xs" />
                                                        </button>
                                                        <form method="POST"
                                                              action="{{ route('encounters.diagnoses.destroy', [$encounter, $diagnosis]) }}"
                                                              onsubmit="return confirm('Remove this diagnosis from the encounter?')">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="hms-btn-ghost hms-btn-sm text-red-600 hover:bg-red-50">
                                                                <x-icon name="trash" size="xs" />
                                                            </button>
                                                        </form>
                                                    </div>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </x-card>
            @endif

            {{-- ----------------------------------------------------------- notes --}}
            @if ($can['notes'])
                <x-card id="notes" title="Clinical notes" icon="document-text">
                    <x-slot:header>SOAP and progress documentation. A signed note is locked and stands as written.</x-slot:header>

                    <x-slot:actions>
                        @if ($can['notesCreate'])
                            <button type="button" class="hms-btn-primary hms-btn-sm"
                                    x-on:click="$dispatch('open-modal', 'note-add')">
                                <x-icon name="plus" size="xs" />
                                Write a note
                            </button>
                        @endif
                    </x-slot:actions>

                    @if ($notes->isEmpty())
                        <p class="text-sm text-slate-500">No notes have been written for this encounter.</p>
                    @else
                        <ol class="space-y-5">
                            @foreach ($notes as $note)
                                @php $editable = $can['notesEdit'] && ! $note->is_locked && $note->status !== 'signed'; @endphp
                                <li class="rounded-lg border border-slate-200 p-4">
                                    <div class="flex flex-wrap items-start justify-between gap-3">
                                        <div>
                                            <div class="flex flex-wrap items-center gap-2">
                                                <x-status-badge :label="$note->note_type_label" :color="$note->note_type_color" size="sm" />
                                                <x-status-badge field="note_status" :value="$note->status" size="sm" />
                                                @if ($note->is_locked)
                                                    <span class="inline-flex items-center gap-1 text-xs text-slate-400">
                                                        <x-icon name="lock" size="xs" /> locked
                                                    </span>
                                                @endif
                                            </div>
                                            <div class="mt-1 text-xs text-slate-500">
                                                {{ $note->author?->name ?? 'Unknown author' }}
                                                · {{ $note->authored_at?->format('d M Y H:i') }}
                                                @if ($note->signed_at)
                                                    <span class="text-slate-400">
                                                        · signed by {{ $note->signedBy?->name ?? '—' }}
                                                        {{ $note->signed_at->format('d M Y H:i') }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="flex items-center gap-1">
                                            @if ($editable)
                                                <button type="button" class="hms-btn-secondary hms-btn-sm"
                                                        x-on:click="$dispatch('open-modal', 'note-edit-{{ $note->id }}')">
                                                    <x-icon name="edit" size="xs" />
                                                    Edit
                                                </button>
                                            @endif

                                            @if ($can['notesSign'] && ! $note->is_locked && $note->status !== 'signed')
                                                <form method="POST" action="{{ route('encounters.notes.sign', [$encounter, $note]) }}"
                                                      onsubmit="return confirm('Sign this note? A signed note can no longer be edited.')">
                                                    @csrf
                                                    @method('PATCH')
                                                    <button type="submit" class="hms-btn-secondary hms-btn-sm">
                                                        <x-icon name="fingerprint" size="xs" />
                                                        Sign
                                                    </button>
                                                </form>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="mt-3 space-y-3">
                                        @foreach ([
                                            'Subjective' => $note->subjective,
                                            'Objective' => $note->objective,
                                            'Assessment' => $note->assessment,
                                            'Plan' => $note->plan,
                                        ] as $label => $value)
                                            @if (filled($value))
                                                <div>
                                                    <div class="text-xs font-medium uppercase tracking-wide text-slate-400">{{ $label }}</div>
                                                    <div class="mt-0.5 whitespace-pre-line text-sm text-slate-700">{{ $value }}</div>
                                                </div>
                                            @endif
                                        @endforeach

                                        @if (filled($note->content))
                                            <div class="whitespace-pre-line text-sm text-slate-700">{{ $note->content }}</div>
                                        @endif
                                    </div>
                                </li>
                            @endforeach
                        </ol>
                    @endif
                </x-card>
            @endif
        </div>

        {{-- ------------------------------------------------------------ aside --}}
        <div class="space-y-6">
            @if ($can['clinical'])
                <x-card title="Allergies" icon="warning" flush>
                    <x-slot:header>
                        Carried on the patient, not the encounter. {{ $activeAllergies->count() }} active.
                    </x-slot:header>

                    @if ($allergies->isEmpty())
                        <div class="px-5 py-6 text-center text-sm text-slate-500">
                            No allergies recorded.
                        </div>
                    @else
                        <ul class="divide-y divide-slate-100">
                            @foreach ($allergies as $allergy)
                                <li class="flex items-start justify-between gap-3 px-5 py-3 {{ $allergy->is_active ? '' : 'opacity-60' }}">
                                    <div class="min-w-0">
                                        <div class="flex flex-wrap items-center gap-1.5">
                                            <span class="font-medium text-slate-800">{{ $allergy->allergen }}</span>
                                            <x-status-badge :label="$allergy->severity_label"
                                                            :color="$allergy->severity_color" size="sm" />
                                            @unless ($allergy->is_active)
                                                <x-status-badge label="Resolved" color="gray" size="sm" />
                                            @endunless
                                        </div>
                                        <div class="text-xs text-slate-500">
                                            {{ $allergy->allergen_type_label }}
                                            @if ($allergy->reaction) · {{ $allergy->reaction }} @endif
                                        </div>
                                    </div>

                                    @if ($can['allergies'])
                                        <form method="POST"
                                              action="{{ route('patients.allergies.destroy', [$patient, $allergy]) }}"
                                              onsubmit="return confirm('Remove {{ $allergy->allergen }} from the allergy list?')">
                                            @csrf
                                            @method('DELETE')
                                            <input type="hidden" name="encounter_id" value="{{ $encounter->id }}">
                                            <button type="submit" class="hms-btn-ghost hms-btn-sm text-red-600 hover:bg-red-50">
                                                <x-icon name="trash" size="xs" />
                                            </button>
                                        </form>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    @endif

                    @if ($can['allergies'])
                        <x-slot:footer>
                            <button type="button" class="hms-btn-secondary hms-btn-sm"
                                    x-on:click="$dispatch('open-modal', 'allergy-add')">
                                <x-icon name="plus" size="xs" />
                                Record an allergy
                            </button>
                        </x-slot:footer>
                    @endif
                </x-card>

                <x-card title="Problems" icon="clipboard-list" flush>
                    <x-slot:header>The standing problem list. {{ $activeProblems->count() }} active.</x-slot:header>

                    @if ($problems->isEmpty())
                        <div class="px-5 py-6 text-center text-sm text-slate-500">
                            Nothing on the problem list.
                        </div>
                    @else
                        <ul class="divide-y divide-slate-100">
                            @foreach ($problems as $problem)
                                <li class="px-5 py-3">
                                    <div class="flex flex-wrap items-center gap-1.5">
                                        <span class="font-medium text-slate-800">{{ $problem->description }}</span>
                                        <x-status-badge :label="$problem->status_label" :color="$problem->status_color" size="sm" />
                                        @if ($problem->priority !== 'routine')
                                            <x-status-badge field="priority" :value="$problem->priority" size="sm" />
                                        @endif
                                    </div>
                                    <div class="text-xs text-slate-500">
                                        @if ($problem->onset_date)
                                            Since {{ $problem->onset_date->format('M Y') }}
                                        @endif
                                        @if ($problem->resolved_date)
                                            · resolved {{ $problem->resolved_date->format('M Y') }}
                                        @endif
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    @endif

                    @if ($can['problems'])
                        <x-slot:footer>
                            <button type="button" class="hms-btn-secondary hms-btn-sm"
                                    x-on:click="$dispatch('open-modal', 'problem-add')">
                                <x-icon name="plus" size="xs" />
                                Add a problem
                            </button>
                        </x-slot:footer>
                    @endif
                </x-card>

                <x-card title="The patient's record" icon="book-open">
                    <p class="text-sm text-slate-600">
                        Past history, the full problem list, allergies and every recorded observation live on the
                        patient's clinical hub.
                    </p>
                    <div class="mt-3">
                        <a href="{{ route('patients.clinical', $patient) }}" class="hms-btn-secondary hms-btn-sm">
                            <x-icon name="book-open" size="xs" />
                            Open the clinical hub
                        </a>
                    </div>
                </x-card>
            @else
                <x-card title="Clinical panels" icon="lock">
                    <p class="text-sm text-slate-600">
                        Your account does not hold the clinical permissions for this encounter's standing record. The
                        encounter itself is shown to you for the purpose your role holds.
                    </p>
                </x-card>
            @endif
        </div>
    </div>

    {{-- -------------------------------------------------------------- modals --}}
    @if ($can['vitalsRecord'] && $open)
        <x-modal name="vitals-record" maxWidth="2xl">
            <form method="POST" action="{{ route('encounters.vitals.store', $encounter) }}" class="p-6">
                @csrf

                <h2 class="text-lg font-semibold text-slate-900">Record observations</h2>
                <p class="mt-1 text-sm text-slate-500">
                    Fill in whatever was measured — a single temperature is a valid set.
                </p>

                <div class="mt-5 grid gap-4 sm:grid-cols-3">
                    <x-form.input type="datetime-local" name="recorded_at" label="Taken at"
                                  :value="old('recorded_at', now()->format('Y-m-d\TH:i'))" />

                    <x-form.select name="source" label="Source" :options="$vitalSources" required
                                   :value="old('source', 'manual')" />

                    <x-form.input type="number" step="0.1" name="temperature" label="Temperature (°C)"
                                  :value="old('temperature')" placeholder="36.8" />

                    <x-form.input type="number" name="pulse" label="Pulse (bpm)" :value="old('pulse')" placeholder="76" />
                    <x-form.input type="number" name="respiratory_rate" label="Respiratory rate" :value="old('respiratory_rate')" placeholder="16" />
                    <x-form.input type="number" name="spo2" label="SpO₂ (%)" :value="old('spo2')" placeholder="98" />

                    <x-form.input type="number" name="bp_systolic" label="BP systolic" :value="old('bp_systolic')" placeholder="120" />
                    <x-form.input type="number" name="bp_diastolic" label="BP diastolic" :value="old('bp_diastolic')" placeholder="78" />
                    <x-form.input type="number" name="blood_glucose" label="Blood glucose (mmol/L)"
                                  step="0.1" :value="old('blood_glucose')" placeholder="5.2" />

                    <x-form.input type="number" step="0.1" name="weight_kg" label="Weight (kg)" :value="old('weight_kg')" />
                    <x-form.input type="number" step="0.1" name="height_cm" label="Height (cm)" :value="old('height_cm')" />
                    <x-form.input type="number" name="pain_score" label="Pain score (0–10)" min="0" max="10"
                                  :value="old('pain_score')" />

                    <x-form.input type="number" name="gcs" label="GCS (3–15)" min="3" max="15" :value="old('gcs')" />
                    <x-form.input type="number" name="urine_output_ml" label="Urine output (ml)" :value="old('urine_output_ml')" />

                    <div class="sm:col-span-3">
                        <x-form.textarea name="notes" label="Notes" rows="2" :value="old('notes')"
                                         placeholder="Anything about how the reading was taken…" />
                    </div>
                </div>

                @error('temperature')
                    <p class="hms-error mt-3">{{ $message }}</p>
                @enderror

                <div class="mt-6 flex items-center justify-end gap-2 border-t border-slate-200 pt-4">
                    <button type="button" class="hms-btn-secondary" x-on:click="$dispatch('close-modal', 'vitals-record')">Cancel</button>
                    <button type="submit" class="hms-btn-primary">Save observations</button>
                </div>
            </form>
        </x-modal>
    @endif

    @if ($can['diagnosesCreate'])
        <x-modal name="diagnosis-add" maxWidth="2xl">
            <form method="POST" action="{{ route('encounters.diagnoses.store', $encounter) }}" class="p-6"
                  x-data="icdFinder({ url: '{{ route('icd10.search') }}', term: @js(old('code_text')), selected: null })">
                @csrf

                <h2 class="text-lg font-semibold text-slate-900">Record a diagnosis</h2>
                <p class="mt-1 text-sm text-slate-500">
                    Search the ICD-10 catalogue, or write the diagnosis in your own words.
                </p>

                <div class="mt-5 grid gap-4 sm:grid-cols-2">
                    <div class="relative sm:col-span-2">
                        <label for="dx-code-search" class="hms-label">Find a code</label>
                        <input id="dx-code-search" type="text" x-model="term" @input.debounce.300ms="search()"
                               @focus="open = results.length > 0" autocomplete="off" class="hms-input"
                               placeholder="Start typing a diagnosis or an ICD-10 code…">

                        <input type="hidden" name="icd10_code_id" :value="selected ? selected.id : ''">
                        <input type="hidden" name="code_text" :value="selected ? selected.code : ''">

                        <div x-show="open" x-cloak @click.outside="open = false"
                             class="absolute z-20 mt-1 max-h-64 w-full overflow-y-auto rounded-lg border border-slate-200 bg-white shadow-lg">
                            <template x-for="item in results" :key="item.id">
                                <button type="button" @click="choose(item)"
                                        class="flex w-full items-start gap-3 px-4 py-2 text-left hover:bg-slate-50">
                                    <span class="font-mono text-xs text-brand-700" x-text="item.code"></span>
                                    <span class="min-w-0 flex-1 text-sm text-slate-700" x-text="item.description"></span>
                                </button>
                            </template>
                        </div>

                        <p class="hms-hint" x-show="selected" x-cloak>
                            Selected <span class="font-mono" x-text="selected ? selected.code : ''"></span>
                            — <span x-text="selected ? selected.description : ''"></span>
                            <button type="button" class="hms-link ml-1 text-xs" @click="clear()">clear</button>
                        </p>
                        <p class="hms-hint" x-show="term.trim().length >= 2 && ! loading && results.length === 0 && ! selected" x-cloak>
                            Nothing in the catalogue matches that — describe the diagnosis below instead.
                        </p>
                    </div>

                    <div class="sm:col-span-2">
                        <x-form.input name="description" label="Diagnosis" :value="old('description')"
                                      placeholder="Leave blank to use the code's own wording" />
                    </div>

                    <x-form.select name="diagnosis_type" label="Type" :options="$diagnosisTypes" required
                                   :value="old('diagnosis_type', 'primary')" />

                    <x-form.select name="certainty" label="Certainty" :options="$certainties" required
                                   :value="old('certainty', 'provisional')" />

                    <x-form.input type="date" name="onset_date" label="Onset" :value="old('onset_date')"
                                  max="{{ today()->toDateString() }}" />

                    <div></div>

                    <div class="sm:col-span-2">
                        <x-form.textarea name="notes" label="Notes" rows="2" :value="old('notes')" />
                    </div>

                    <div>
                        <x-form.checkbox name="is_primary" value="1" label="Primary diagnosis"
                                         hint="Only one diagnosis per encounter is primary; this displaces the current one."
                                         :checked="old('is_primary')" />
                    </div>

                    <div>
                        <x-form.checkbox name="is_chronic" value="1" label="Chronic condition"
                                         :checked="old('is_chronic')" />
                    </div>
                </div>

                @error('description')
                    <p class="hms-error mt-3">{{ $message }}</p>
                @enderror

                <div class="mt-6 flex items-center justify-end gap-2 border-t border-slate-200 pt-4">
                    <button type="button" class="hms-btn-secondary" x-on:click="$dispatch('close-modal', 'diagnosis-add')">Cancel</button>
                    <button type="submit" class="hms-btn-primary">Record diagnosis</button>
                </div>
            </form>
        </x-modal>
    @endif

    @if ($can['diagnosesEdit'])
        @foreach ($diagnoses as $diagnosis)
            <x-modal name="diagnosis-edit-{{ $diagnosis->id }}" maxWidth="2xl">
                <form method="POST" action="{{ route('encounters.diagnoses.update', [$encounter, $diagnosis]) }}" class="p-6"
                      x-data="icdFinder({
                          url: '{{ route('icd10.search') }}',
                          term: @js($diagnosis->icd10Code ? $diagnosis->icd10Code->code.' — '.$diagnosis->icd10Code->description : ''),
                          selected: @js($diagnosis->icd10Code ? ['id' => $diagnosis->icd10Code->id, 'code' => $diagnosis->icd10Code->code, 'description' => $diagnosis->icd10Code->description] : null),
                      })">
                    @csrf
                    @method('PUT')

                    <h2 class="text-base font-semibold text-slate-800">Amend diagnosis</h2>

                    <div class="mt-4 grid gap-4 sm:grid-cols-2">
                        <div class="relative sm:col-span-2">
                            <label for="dx-edit-search-{{ $diagnosis->id }}" class="hms-label">Find a code</label>
                            <input id="dx-edit-search-{{ $diagnosis->id }}" type="text" x-model="term"
                                   @input.debounce.300ms="search()" @focus="open = results.length > 0"
                                   autocomplete="off" class="hms-input">

                            <input type="hidden" name="icd10_code_id" :value="selected ? selected.id : ''">
                            <input type="hidden" name="code_text" :value="selected ? selected.code : ''">

                            <div x-show="open" x-cloak @click.outside="open = false"
                                 class="absolute z-20 mt-1 max-h-64 w-full overflow-y-auto rounded-lg border border-slate-200 bg-white shadow-lg">
                                <template x-for="item in results" :key="item.id">
                                    <button type="button" @click="choose(item)"
                                            class="flex w-full items-start gap-3 px-4 py-2 text-left hover:bg-slate-50">
                                        <span class="font-mono text-xs text-brand-700" x-text="item.code"></span>
                                        <span class="min-w-0 flex-1 text-sm text-slate-700" x-text="item.description"></span>
                                    </button>
                                </template>
                            </div>
                        </div>

                        <div class="sm:col-span-2">
                            <x-form.input name="description" label="Diagnosis" :value="$diagnosis->description"
                                          :id="'dx-edit-description-'.$diagnosis->id" />
                        </div>

                        <x-form.select name="diagnosis_type" label="Type" :options="$diagnosisTypes" required
                                       :value="$diagnosis->diagnosis_type" :id="'dx-edit-type-'.$diagnosis->id" />

                        <x-form.select name="certainty" label="Certainty" :options="$certainties" required
                                       :value="$diagnosis->certainty" :id="'dx-edit-certainty-'.$diagnosis->id" />

                        <x-form.input type="date" name="onset_date" label="Onset"
                                      :value="$diagnosis->onset_date?->toDateString()"
                                      max="{{ today()->toDateString() }}" :id="'dx-edit-onset-'.$diagnosis->id" />

                        <div></div>

                        <div class="sm:col-span-2">
                            <x-form.textarea name="notes" label="Notes" rows="2" :value="$diagnosis->notes"
                                             :id="'dx-edit-notes-'.$diagnosis->id" />
                        </div>

                        <div>
                            <x-form.checkbox name="is_primary" value="1" label="Primary diagnosis"
                                             :checked="$diagnosis->is_primary"
                                             :id="'dx-edit-primary-'.$diagnosis->id" />
                        </div>

                        <div>
                            <x-form.checkbox name="is_chronic" value="1" label="Chronic condition"
                                             :checked="$diagnosis->is_chronic"
                                             :id="'dx-edit-chronic-'.$diagnosis->id" />
                        </div>
                    </div>

                    <div class="mt-6 flex items-center justify-end gap-2 border-t border-slate-200 pt-4">
                        <button type="button" class="hms-btn-secondary" x-on:click="$dispatch('close-modal', 'diagnosis-edit-{{ $diagnosis->id }}')">Cancel</button>
                        <button type="submit" class="hms-btn-primary">Save changes</button>
                    </div>
                </form>
            </x-modal>
        @endforeach
    @endif

    @if ($can['notesCreate'])
        <x-modal name="note-add" maxWidth="2xl">
            <form method="POST" action="{{ route('encounters.notes.store', $encounter) }}" class="p-6">
                @csrf

                <h2 class="text-lg font-semibold text-slate-900">Write a note</h2>
                <p class="mt-1 text-sm text-slate-500">
                    A SOAP note, a progress note, or a single free-text entry — fill in what applies.
                </p>

                <div class="mt-5 grid gap-4 sm:grid-cols-2">
                    <x-form.select name="note_type" label="Note type" :options="$noteTypes" required
                                   :value="old('note_type', 'soap')" />

                    <x-form.input type="datetime-local" name="authored_at" label="Authored at"
                                  :value="old('authored_at', now()->format('Y-m-d\TH:i'))" />

                    <x-form.textarea name="subjective" label="Subjective" rows="3" :value="old('subjective')" />
                    <x-form.textarea name="objective" label="Objective" rows="3" :value="old('objective')" />
                    <x-form.textarea name="assessment" label="Assessment" rows="3" :value="old('assessment')" />
                    <x-form.textarea name="plan" label="Plan" rows="3" :value="old('plan')" />

                    <div class="sm:col-span-2">
                        <x-form.textarea name="content" label="Free text" rows="3" :value="old('content')"
                                         hint="For narrative that does not fit the SOAP headings." />
                    </div>

                    @if ($can['notesSign'])
                        <div class="sm:col-span-2">
                            <x-form.checkbox name="sign" value="1" label="Sign this note now"
                                             hint="A signed note is locked and can no longer be edited."
                                             :checked="old('sign')" />
                        </div>
                    @endif
                </div>

                @error('subjective')
                    <p class="hms-error mt-3">{{ $message }}</p>
                @enderror

                <div class="mt-6 flex items-center justify-end gap-2 border-t border-slate-200 pt-4">
                    <button type="button" class="hms-btn-secondary" x-on:click="$dispatch('close-modal', 'note-add')">Cancel</button>
                    <button type="submit" class="hms-btn-primary">Save note</button>
                </div>
            </form>
        </x-modal>
    @endif

    @if ($can['notesEdit'])
        @foreach ($notes as $note)
            @continue($note->is_locked || $note->status === 'signed')
            <x-modal name="note-edit-{{ $note->id }}" maxWidth="2xl">
                <form method="POST" action="{{ route('encounters.notes.update', [$encounter, $note]) }}" class="p-6">
                    @csrf
                    @method('PUT')

                    <h2 class="text-base font-semibold text-slate-800">Amend draft note</h2>

                    <div class="mt-4 grid gap-4 sm:grid-cols-2">
                        <x-form.select name="note_type" label="Note type" :options="$noteTypes" required
                                       :value="$note->note_type" :id="'note-edit-type-'.$note->id" />

                        <x-form.input type="datetime-local" name="authored_at" label="Authored at"
                                      :value="$note->authored_at?->format('Y-m-d\TH:i')"
                                      :id="'note-edit-authored-'.$note->id" />

                        <x-form.textarea name="subjective" label="Subjective" rows="3" :value="$note->subjective"
                                         :id="'note-edit-subjective-'.$note->id" />
                        <x-form.textarea name="objective" label="Objective" rows="3" :value="$note->objective"
                                         :id="'note-edit-objective-'.$note->id" />
                        <x-form.textarea name="assessment" label="Assessment" rows="3" :value="$note->assessment"
                                         :id="'note-edit-assessment-'.$note->id" />
                        <x-form.textarea name="plan" label="Plan" rows="3" :value="$note->plan"
                                         :id="'note-edit-plan-'.$note->id" />

                        <div class="sm:col-span-2">
                            <x-form.textarea name="content" label="Free text" rows="3" :value="$note->content"
                                             :id="'note-edit-content-'.$note->id" />
                        </div>
                    </div>

                    <div class="mt-6 flex items-center justify-end gap-2 border-t border-slate-200 pt-4">
                        <button type="button" class="hms-btn-secondary" x-on:click="$dispatch('close-modal', 'note-edit-{{ $note->id }}')">Cancel</button>
                        <button type="submit" class="hms-btn-primary">Save changes</button>
                    </div>
                </form>
            </x-modal>
        @endforeach
    @endif

    @if ($can['allergies'])
        <x-modal name="allergy-add" maxWidth="lg">
            <form method="POST" action="{{ route('patients.allergies.store', $patient) }}" class="p-6">
                @csrf
                <input type="hidden" name="encounter_id" value="{{ $encounter->id }}">

                <h2 class="text-lg font-semibold text-slate-900">Record an allergy</h2>
                <p class="mt-1 text-sm text-slate-500">
                    Allergies sit on the patient's record and are checked on every future prescription.
                </p>

                <div class="mt-5 space-y-4">
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-form.input name="allergen" label="Allergen" required :value="old('allergen')"
                                      placeholder="Penicillin, peanut, latex…" />

                        <x-form.select name="allergen_type" label="Type" :options="$allergenTypes" required
                                       :value="old('allergen_type', 'drug')" />

                        <x-form.input name="reaction" label="Reaction" :value="old('reaction')"
                                      placeholder="Rash, swelling, anaphylaxis…" />

                        <x-form.select name="severity" label="Severity" :options="$severities" required
                                       :value="old('severity', 'moderate')" />

                        <x-form.input type="date" name="onset_date" label="Noted on" :value="old('onset_date')"
                                      max="{{ today()->toDateString() }}" />
                    </div>

                    <x-form.textarea name="notes" label="Notes" rows="2" :value="old('notes')" />

                    <x-form.checkbox name="is_active" value="1" label="Currently active"
                                     hint="Uncheck when the allergy has been disproved; the record is kept."
                                     :checked="old('is_active', true)" />
                </div>

                <div class="mt-6 flex items-center justify-end gap-2 border-t border-slate-200 pt-4">
                    <button type="button" class="hms-btn-secondary" x-on:click="$dispatch('close-modal', 'allergy-add')">Cancel</button>
                    <button type="submit" class="hms-btn-primary">Save allergy</button>
                </div>
            </form>
        </x-modal>
    @endif

    @if ($can['problems'])
        <x-modal name="problem-add" maxWidth="lg">
            <form method="POST" action="{{ route('patients.problems.store', $patient) }}" class="p-6">
                @csrf
                <input type="hidden" name="encounter_id" value="{{ $encounter->id }}">

                <h2 class="text-lg font-semibold text-slate-900">Add a problem</h2>

                <div class="mt-5 space-y-4">
                    <x-form.textarea name="description" label="Problem" rows="2" required :value="old('description')"
                                     placeholder="Type 2 diabetes mellitus, hypertension…" />

                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-form.select name="status" label="Status" :options="$problemStatuses" required
                                       :value="old('status', 'active')" />

                        <x-form.select name="priority" label="Priority" :options="$priorities" required
                                       :value="old('priority', 'routine')" />

                        <x-form.input type="date" name="onset_date" label="Onset" :value="old('onset_date')"
                                      max="{{ today()->toDateString() }}" />

                        <x-form.input type="date" name="resolved_date" label="Resolved" :value="old('resolved_date')" />
                    </div>

                    <x-form.textarea name="notes" label="Notes" rows="2" :value="old('notes')" />
                </div>

                <div class="mt-6 flex items-center justify-end gap-2 border-t border-slate-200 pt-4">
                    <button type="button" class="hms-btn-secondary" x-on:click="$dispatch('close-modal', 'problem-add')">Cancel</button>
                    <button type="submit" class="hms-btn-primary">Save problem</button>
                </div>
            </form>
        </x-modal>
    @endif

    @can('encounters.close')
        @if ($open)
            <x-modal name="encounter-close" max-width="md">
                <form method="POST" action="{{ route('encounters.close', $encounter) }}" class="p-6">
                    @csrf
                    @method('PATCH')

                    <h2 class="text-lg font-semibold text-slate-900">Close this encounter?</h2>
                    <p class="mt-1 text-sm text-slate-500">
                        The narrative becomes read-only and the record stands as written. Diagnoses can still be added or
                        revised afterwards; further narrative comes as a progress note.
                        @if ($encounter->visit)
                            If this is the last open encounter on visit {{ $encounter->visit->visit_no }}, the visit is
                            completed and the queue entry closed.
                        @endif
                    </p>

                    <div class="mt-6 flex justify-end gap-2">
                        <button type="button" class="hms-btn-secondary" x-on:click="$dispatch('close-modal', 'encounter-close')">Cancel</button>
                        <button type="submit" class="hms-btn-primary">Close encounter</button>
                    </div>
                </form>
            </x-modal>
        @endif
    @endcan

    @push('scripts')
        <script>
            window.icdFinder = (config) => ({
                term: config.term || '',
                results: [],
                open: false,
                loading: false,
                selected: config.selected || null,

                async search() {
                    const term = this.term.trim();

                    if (term.length < 2) {
                        this.results = [];
                        this.open = false;
                        return;
                    }

                    this.loading = true;

                    try {
                        const url = new URL(config.url, window.location.origin);
                        url.searchParams.set('q', term);

                        const response = await fetch(url, { headers: { Accept: 'application/json' } });
                        if (! response.ok) throw new Error('unavailable');

                        const data = await response.json();
                        this.results = data.results || [];
                        this.open = true;
                    } catch (error) {
                        this.results = [];
                        this.open = false;
                    } finally {
                        this.loading = false;
                    }
                },

                choose(item) {
                    this.selected = item;
                    this.term = item.code + ' — ' + item.description;
                    this.results = [];
                    this.open = false;
                },

                clear() {
                    this.selected = null;
                    this.term = '';
                    this.results = [];
                },
            });
        </script>
    @endpush
</x-app-layout>