@php
    $activeAllergies = $allergies->where('is_active', true);
    $activeProblems = $problems->where('status', 'active');
    $openEncounters = $openEncounters ?? collect();
    $latestOpen = $openEncounters->first();
    $canIcd = auth()->user()->can('icd10.view');
    $recordLink = auth()->user()->can('patients.view') ? route('patients.show', $patient) : null;
    $lastSeen = $encounters->first()?->started_at;
@endphp

<x-app-layout :title="$patient->full_name . ' · clinical record'">
    <x-page-header
        :title="$patient->full_name"
        subtitle="The standing clinical record — allergies, problems, past history and current treatment."
        icon="stethoscope"
        :back="$recordLink"
        backLabel="Patient record">
        <x-slot:meta>
            <span class="font-mono text-xs text-slate-600">{{ $patient->medical_record_number }}</span>
            <span class="text-xs text-slate-500">{{ $patient->age_display }} · {{ $patient->gender_label }}</span>
            @if ($patient->patient_category !== 'general')
                <x-status-badge field="patient_category" :value="$patient->patient_category" 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
                </span>
            @endif
        </x-slot:meta>

        <x-slot:actions>
            @if ($can['encountersCreate'])
                @if ($latestOpen)
                    <a href="{{ route('encounters.show', $latestOpen) }}" class="hms-btn-secondary">
                        <x-icon name="stethoscope" size="sm" />
                        Resume {{ $latestOpen->encounter_no }}
                    </a>
                @else
                    <a href="{{ route('encounters.create', ['patient_id' => $patient->id]) }}" class="hms-btn-primary">
                        <x-icon name="plus" size="sm" />
                        Open encounter
                    </a>
                @endif
            @endif
        </x-slot:actions>
    </x-page-header>

    @if ($patient->isRestricted())
        <x-alert type="warning" title="Restricted record" class="mb-6">
            This patient is flagged as <strong>{{ $patient->category_label }}</strong>. Access is limited to staff cleared
            for this category, and every view has been written to the access trail.
        </x-alert>
    @endif

    <div class="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
        <x-stat-card label="Active allergies" :value="$activeAllergies->count()" icon="exclamation"
                     :tone="$activeAllergies->isEmpty() ? 'slate' : 'red'" href="#allergies"
                     :hint="$activeAllergies->isEmpty() ? 'None on file' : 'Read before prescribing'" />
        <x-stat-card label="Active problems" :value="$activeProblems->count()" icon="clipboard-list" tone="indigo"
                     href="#problems" :hint="$activeProblems->isEmpty() ? 'None active' : 'On the problem list'" />
        <x-stat-card label="Encounters" :value="$encounters->count()" icon="document-text" tone="brand"
                     :hint="$lastSeen ? 'Last ' . $lastSeen->format('d M Y') : 'Never seen here'" />
        <x-stat-card label="Open now" :value="$openEncounters->count()" icon="activity"
                     :tone="$openEncounters->isEmpty() ? 'slate' : 'amber'"
                     :hint="$openEncounters->isEmpty() ? 'No live record' : 'Still being written'" />
    </div>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="space-y-6 lg:col-span-2">
            {{-- ------------------------------------------------------ allergies --}}
            <x-card id="allergies" flush>
                <x-slot:header>
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <div>
                            <h2 class="text-sm font-semibold text-slate-800">
                                Allergies
                                @if ($activeAllergies->isNotEmpty())
                                    <span class="ml-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">
                                        {{ $activeAllergies->count() }} active
                                    </span>
                                @endif
                            </h2>
                            <p class="text-xs text-slate-500">What must never be given, and what happened last time.</p>
                        </div>
                        @if ($can['allergies'])
                            <button type="button" class="hms-btn-secondary hms-btn-sm"
                                    x-on:click="$dispatch('open-modal', 'allergy-add')">
                                <x-icon name="plus" size="xs" /> Add allergy
                            </button>
                        @endif
                    </div>
                </x-slot:header>

                @if ($allergies->isEmpty())
                    <x-empty-state icon="check"
                                   title="No known allergies"
                                   message="Nothing has been recorded against this patient. Ask again at each visit — an answer that changes is the point." />
                @else
                    <div class="overflow-x-auto">
                        <table class="hms-table">
                            <thead>
                                <tr>
                                    <th>Allergen</th>
                                    <th>Type</th>
                                    <th>Reaction</th>
                                    <th>Severity</th>
                                    <th>Since</th>
                                    <th>Status</th>
                                    @if ($can['allergies'])<th class="text-right">Actions</th>@endif
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($allergies as $allergy)
                                    <tr>
                                        <td>
                                            <div class="font-medium text-slate-800">{{ $allergy->allergen }}</div>
                                            @if ($allergy->notes)
                                                <div class="max-w-xs truncate text-xs text-slate-500">{{ $allergy->notes }}</div>
                                            @endif
                                        </td>
                                        <td class="text-xs text-slate-600">{{ $allergy->allergen_type_label }}</td>
                                        <td class="text-xs text-slate-600">{{ $allergy->reaction ?: '—' }}</td>
                                        <td><x-status-badge field="severity" :value="$allergy->severity" size="sm" /></td>
                                        <td class="text-xs text-slate-500">
                                            {{ $allergy->onset_date?->format('M Y') ?? '—' }}
                                        </td>
                                        <td>
                                            @if ($allergy->is_active)
                                                <x-status-badge label="Active" color="red" size="sm" dot />
                                            @else
                                                <x-status-badge label="Resolved" color="gray" size="sm" />
                                            @endif
                                        </td>
                                        @if ($can['allergies'])
                                            <td class="text-right">
                                                <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', 'allergy-edit-{{ $allergy->id }}')">
                                                        <x-icon name="edit" size="xs" />
                                                    </button>
                                                    <form method="POST"
                                                          action="{{ route('patients.allergies.destroy', [$patient, $allergy]) }}"
                                                          onsubmit="return confirm('Remove {{ $allergy->allergen }} from the allergy list?')">
                                                        @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>
                                            </td>
                                        @endif
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </x-card>

            {{-- -------------------------------------------------------- problems --}}
            <x-card id="problems" flush>
                <x-slot:header>
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <div>
                            <h2 class="text-sm font-semibold text-slate-800">Problem list</h2>
                            <p class="text-xs text-slate-500">The running list of what is being managed, and since when.</p>
                        </div>
                        @if ($can['problems'])
                            <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 problem
                            </button>
                        @endif
                    </div>
                </x-slot:header>

                @if ($problems->isEmpty())
                    <x-empty-state icon="clipboard-list"
                                   title="No problems listed"
                                   message="Long-running conditions recorded here follow the patient between visits." />
                @else
                    <div class="overflow-x-auto">
                        <table class="hms-table">
                            <thead>
                                <tr>
                                    <th>Problem</th>
                                    <th>Code</th>
                                    <th>Priority</th>
                                    <th>Onset</th>
                                    <th>Status</th>
                                    @if ($can['problems'])<th class="text-right">Actions</th>@endif
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($problems as $problem)
                                    <tr>
                                        <td>
                                            <div class="font-medium text-slate-800">{{ $problem->description }}</div>
                                            @if ($problem->notes)
                                                <div class="max-w-xs truncate text-xs text-slate-500">{{ $problem->notes }}</div>
                                            @endif
                                        </td>
                                        <td class="font-mono text-xs text-slate-600">
                                            {{ $problem->icd10Code?->code ?? '—' }}
                                        </td>
                                        <td>
                                            @if ($problem->priority !== 'routine')
                                                <x-status-badge field="priority" :value="$problem->priority" size="sm" />
                                            @else
                                                <span class="text-xs text-slate-400">Routine</span>
                                            @endif
                                        </td>
                                        <td class="text-xs text-slate-500">
                                            {{ $problem->onset_date?->format('M Y') ?? '—' }}
                                            @if ($problem->resolved_date)
                                                <div class="text-slate-400">to {{ $problem->resolved_date->format('M Y') }}</div>
                                            @endif
                                        </td>
                                        <td><x-status-badge field="problem_status" :value="$problem->status" size="sm" dot /></td>
                                        @if ($can['problems'])
                                            <td class="text-right">
                                                <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', 'problem-edit-{{ $problem->id }}')">
                                                        <x-icon name="edit" size="xs" />
                                                    </button>
                                                    <form method="POST"
                                                          action="{{ route('patients.problems.destroy', [$patient, $problem]) }}"
                                                          onsubmit="return confirm('Remove this problem from the list?')">
                                                        @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>
                                            </td>
                                        @endif
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </x-card>

            {{-- ------------------------------------------------------- histories --}}
            <x-card id="histories" flush>
                <x-slot:header>
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <div>
                            <h2 class="text-sm font-semibold text-slate-800">Past history</h2>
                            <p class="text-xs text-slate-500">Medical, surgical, family and social background.</p>
                        </div>
                        @if ($can['histories'])
                            <button type="button" class="hms-btn-secondary hms-btn-sm"
                                    x-on:click="$dispatch('open-modal', 'history-add')">
                                <x-icon name="plus" size="xs" /> Add history
                            </button>
                        @endif
                    </div>
                </x-slot:header>

                @if ($histories->isEmpty())
                    <x-empty-state icon="book-open"
                                   title="Nothing recorded"
                                   message="Past illness, surgery, family history and social background all belong here." />
                @else
                    <ul class="divide-y divide-slate-100">
                        @foreach ($histories as $history)
                            <li class="flex flex-wrap items-start justify-between gap-3 px-4 py-3">
                                <div class="min-w-0">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <x-status-badge field="history_type" :value="$history->history_type" size="sm" />
                                        <x-status-badge field="problem_status" :value="$history->status" size="sm" />
                                    </div>
                                    <p class="mt-1.5 text-sm text-slate-800">{{ $history->description }}</p>
                                    @if ($history->notes)
                                        <p class="mt-1 text-xs text-slate-500">{{ $history->notes }}</p>
                                    @endif
                                    <p class="mt-1 text-xs text-slate-400">
                                        {{ $history->onset_date?->format('d M Y') ?? 'Onset unknown' }}
                                        @if ($history->resolution_date)
                                            · resolved {{ $history->resolution_date->format('d M Y') }}
                                        @endif
                                        @if ($history->recordedBy)
                                            · recorded by {{ $history->recordedBy->name }}
                                        @endif
                                    </p>
                                </div>
                                @if ($can['histories'])
                                    <div class="flex items-center gap-1">
                                        <button type="button" class="hms-btn-ghost hms-btn-sm"
                                                x-on:click="$dispatch('open-modal', 'history-edit-{{ $history->id }}')">
                                            <x-icon name="edit" size="xs" />
                                        </button>
                                        <form method="POST"
                                              action="{{ route('patients.histories.destroy', [$patient, $history]) }}"
                                              onsubmit="return confirm('Remove this history entry?')">
                                            @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
                            </li>
                        @endforeach
                    </ul>
                @endif
            </x-card>

            {{-- ------------------------------------------------------ diagnoses --}}
            @if ($can['diagnoses'])
                <x-card flush>
                    <x-slot:header>
                        <div>
                            <h2 class="text-sm font-semibold text-slate-800">Recent diagnoses</h2>
                            <p class="text-xs text-slate-500">The last 20 conclusions recorded across encounters.</p>
                        </div>
                    </x-slot:header>

                    @if ($diagnoses->isEmpty())
                        <x-empty-state icon="document-check"
                                       title="No diagnoses recorded"
                                       message="Diagnoses are entered from the encounter they were reached in." />
                    @else
                        <div class="overflow-x-auto">
                            <table class="hms-table">
                                <thead>
                                    <tr>
                                        <th>Diagnosis</th>
                                        <th>Code</th>
                                        <th>Type</th>
                                        <th>Certainty</th>
                                        <th>When</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($diagnoses as $diagnosis)
                                        <tr>
                                            <td>
                                                <div class="font-medium text-slate-800">{{ $diagnosis->description }}</div>
                                                @if ($diagnosis->is_chronic)
                                                    <x-status-badge label="Chronic" color="purple" size="sm" />
                                                @endif
                                                @if ($diagnosis->encounter)
                                                    <a href="{{ route('encounters.show', $diagnosis->encounter) }}"
                                                       class="font-mono text-xs text-brand-700 hover:underline">
                                                        {{ $diagnosis->encounter->encounter_no }}
                                                    </a>
                                                @endif
                                            </td>
                                            <td class="font-mono text-xs text-slate-600">{{ $diagnosis->code_text ?? '—' }}</td>
                                            <td>
                                                <x-status-badge field="diagnosis_type" :value="$diagnosis->diagnosis_type" size="sm" />
                                                @if ($diagnosis->is_primary)
                                                    <x-status-badge label="Primary" color="red" size="sm" />
                                                @endif
                                            </td>
                                            <td><x-status-badge field="certainty" :value="$diagnosis->certainty" size="sm" /></td>
                                            <td class="text-xs text-slate-500">
                                                {{ $diagnosis->diagnosed_at?->format('d M Y') ?? '—' }}
                                                @if ($diagnosis->diagnosedBy)
                                                    <div class="text-slate-400">{{ $diagnosis->diagnosedBy->name }}</div>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </x-card>
            @endif

            {{-- -------------------------------------------------- prescriptions --}}
            @if ($can['medications'])
                <x-card flush>
                    <x-slot:header>
                        <div class="flex flex-wrap items-center justify-between gap-2">
                            <div>
                                <h2 class="text-sm font-semibold text-slate-800">Medication still open</h2>
                                <p class="text-xs text-slate-500">
                                    Prescriptions not yet fully dispensed. Prescribing itself belongs to the E-Prescription module.
                                </p>
                            </div>

                            <div class="flex items-center gap-2">
                                @can('prescriptions.view')
                                    <a href="{{ route('prescriptions.index', ['q' => $patient->medical_record_number]) }}"
                                       class="hms-btn-secondary hms-btn-sm">
                                        <x-icon name="pill" size="xs" />
                                        All scripts
                                    </a>
                                @endcan
                                @can('prescriptions.create')
                                    <a href="{{ route('prescriptions.create', ['patient_id' => $patient->id]) }}"
                                       class="hms-btn-primary hms-btn-sm">
                                        <x-icon name="plus" size="xs" />
                                        Write prescription
                                    </a>
                                @endcan
                            </div>
                        </div>
                    </x-slot:header>

                    @if ($prescriptions->isEmpty())
                        <x-empty-state icon="pill"
                                       title="Nothing outstanding"
                                       message="No prescription is waiting to be dispensed." />
                    @else
                        <ul class="divide-y divide-slate-100">
                            @foreach ($prescriptions as $prescription)
                                <li class="px-4 py-3">
                                    <div class="flex flex-wrap items-center justify-between gap-2">
                                        <div class="flex flex-wrap items-center gap-2">
                                            @can('prescriptions.view')
                                                <a href="{{ route('prescriptions.show', $prescription) }}"
                                                   class="font-mono text-xs font-medium text-slate-700 hover:text-brand-700 hover:underline">
                                                    {{ $prescription->prescription_no }}
                                                </a>
                                            @else
                                                <span class="font-mono text-xs font-medium text-slate-700">{{ $prescription->prescription_no }}</span>
                                            @endcan
                                            <x-status-badge field="prescription_status" :value="$prescription->status" size="sm" />
                                            @if ($prescription->is_controlled)
                                                <x-status-badge label="Controlled" color="rose" size="sm" />
                                            @endif
                                        </div>
                                        <span class="text-xs text-slate-500">
                                            {{ $prescription->prescribed_at?->format('d M Y H:i') }}
                                            @if ($prescription->prescribedBy)
                                                · {{ $prescription->prescribedBy->name }}
                                            @endif
                                        </span>
                                    </div>
                                    <ul class="mt-2 space-y-1">
                                        @foreach ($prescription->items as $item)
                                            <li class="flex flex-wrap items-baseline gap-x-2 text-xs text-slate-600">
                                                <span class="font-medium text-slate-800">{{ $item->drug_name }}</span>
                                                <span>{{ $item->dose }} {{ $item->dose_unit }}</span>
                                                <span class="text-slate-400">{{ $item->route_label }}</span>
                                                <span>{{ $item->frequency }}</span>
                                                @if ($item->duration)
                                                    <span class="text-slate-400">× {{ $item->duration }}</span>
                                                @endif
                                                <span class="text-slate-400">· {{ $item->quantity }} {{ $item->quantity_unit }}</span>
                                                @if ($item->is_stat)
                                                    <x-status-badge label="STAT" color="red" size="sm" />
                                                @endif
                                                @if ($item->is_prn)
                                                    <x-status-badge label="PRN" color="amber" size="sm" />
                                                @endif
                                            </li>
                                        @endforeach
                                    </ul>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </x-card>
            @endif

            {{-- ---------------------------------------------------------- vitals --}}
            @if ($can['vitals'])
                <x-card id="vitals" flush>
                    <x-slot:header>
                        <div class="flex flex-wrap items-center justify-between gap-2">
                            <div>
                                <h2 class="text-sm font-semibold text-slate-800">Recent observations</h2>
                                <p class="text-xs text-slate-500">The last 20 sets recorded, newest first.</p>
                            </div>
                            @if ($can['vitalsRecord'] && $openEncounters->isNotEmpty())
                                <button type="button" class="hms-btn-secondary hms-btn-sm"
                                        x-on:click="$dispatch('open-modal', 'vitals-record')">
                                    <x-icon name="plus" size="xs" /> Record observations
                                </button>
                            @endif
                        </div>
                    </x-slot:header>

                    @if ($vitals->isEmpty())
                        <x-empty-state icon="activity"
                                       title="No observations yet"
                                       message="Vitals are charted against an open encounter.">
                            @if ($can['vitalsRecord'] && $latestOpen)
                                <x-slot:actions>
                                    <a href="{{ route('encounters.show', $latestOpen) }}#vitals" class="hms-btn-primary hms-btn-sm">
                                        Chart on {{ $latestOpen->encounter_no }}
                                    </a>
                                </x-slot:actions>
                            @endif
                        </x-empty-state>
                    @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</th>
                                        <th>By</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($vitals as $vital)
                                        <tr @class(['bg-amber-50/60' => $vital->is_abnormal])>
                                            <td class="whitespace-nowrap text-xs text-slate-600">
                                                {{ $vital->recorded_at?->format('d M Y H:i') }}
                                                @if ($vital->encounter)
                                                    <a href="{{ route('encounters.show', $vital->encounter) }}#vitals"
                                                       class="block font-mono text-xs text-brand-700 hover:underline">
                                                        {{ $vital->encounter->encounter_no }}
                                                    </a>
                                                @endif
                                            </td>
                                            <td class="text-slate-800">
                                                {{ $vital->temperature !== null ? number_format((float) $vital->temperature, 1) . '°C' : '—' }}
                                            </td>
                                            <td class="text-slate-800">{{ $vital->pulse ?? '—' }}</td>
                                            <td class="text-slate-800">
                                                {{ $vital->bp_systolic && $vital->bp_diastolic ? $vital->bp_systolic . '/' . $vital->bp_diastolic : '—' }}
                                            </td>
                                            <td class="text-slate-800">{{ $vital->respiratory_rate ?? '—' }}</td>
                                            <td class="text-slate-800">{{ $vital->spo2 !== null ? $vital->spo2 . '%' : '—' }}</td>
                                            <td class="text-slate-800">
                                                {{ $vital->weight_kg !== null ? number_format((float) $vital->weight_kg, 1) . ' kg' : '—' }}
                                                @if ($vital->bmi !== null)
                                                    <span class="block text-xs text-slate-400">BMI {{ $vital->bmi }}</span>
                                                @endif
                                            </td>
                                            <td class="text-xs text-slate-500">
                                                {{ $vital->recordedBy?->name ?? '—' }}
                                                @if ($vital->is_abnormal)
                                                    <x-status-badge label="Outside range" color="amber" size="sm" />
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </x-card>
            @endif

            {{-- ------------------------------------------- laboratory & imaging --}}
            @if ($can['labs'])
                <x-card id="diagnostics" flush>
                    <x-slot:header>
                        <div class="flex flex-wrap items-center justify-between gap-2">
                            <div>
                                <h2 class="text-sm font-semibold text-slate-800">Laboratory &amp; imaging</h2>
                                <p class="text-xs text-slate-500">The last 8 diagnostic requests on this chart, newest first.</p>
                            </div>
                            <div class="flex items-center gap-3">
                                @can('lab-orders.create')
                                    <a href="{{ route('lab-orders.create', ['patient_id' => $patient->id]) }}"
                                       class="hms-btn-secondary hms-btn-sm">
                                        <x-icon name="plus" size="xs" /> Request tests
                                    </a>
                                @endcan
                            </div>
                        </div>
                    </x-slot:header>

                    @if ($labOrders->isEmpty())
                        <x-empty-state icon="flask"
                                       title="No diagnostics yet"
                                       message="Laboratory and imaging requests appear here from the moment they are placed." />
                    @else
                        <div class="overflow-x-auto">
                            <table class="hms-table">
                                <thead>
                                    <tr>
                                        <th>Request</th>
                                        <th>Tests</th>
                                        <th>Results</th>
                                        <th>Status</th>
                                        <th class="text-right"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($labOrders as $order)
                                        @php
                                            $lines = $order->items;
                                            $verified = $lines->where('status', 'verified')->count();
                                            $criticals = $lines->filter(
                                                fn ($i) => in_array($i->flag, ['critical_high', 'critical_low'], true)
                                                    || $i->radiologyReport?->is_critical,
                                            );
                                        @endphp
                                        <tr @class(['bg-red-50/60' => $criticals->isNotEmpty()])>
                                            <td class="whitespace-nowrap">
                                                <a href="{{ route('lab-orders.show', $order) }}"
                                                   class="font-mono text-xs font-medium text-brand-700 hover:underline">
                                                    {{ $order->order_no }}
                                                </a>
                                                <span class="block text-xs text-slate-500">
                                                    {{ $order->ordered_at?->format('d M Y H:i') }}
                                                    @if ($order->orderedBy) · {{ $order->orderedBy->name }} @endif
                                                </span>
                                            </td>
                                            <td class="max-w-xs">
                                                <span class="block truncate text-sm text-slate-700">
                                                    {{ $lines->pluck('test_name')->implode(', ') ?: '—' }}
                                                </span>
                                                <span class="mt-0.5 block">
                                                    <x-status-badge field="lab_department" :value="$order->department" size="sm" />
                                                </span>
                                            </td>
                                            <td class="whitespace-nowrap text-sm">
                                                @if ($lines->isEmpty())
                                                    <span class="text-slate-400">—</span>
                                                @else
                                                    <span class="text-slate-700">{{ $verified }}/{{ $lines->count() }} verified</span>
                                                    @if ($criticals->isNotEmpty())
                                                        <span class="ml-1 inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700">
                                                            critical ×{{ $criticals->count() }}
                                                        </span>
                                                    @endif
                                                    @if ($order->released_at)
                                                        <span class="ml-1 text-xs text-emerald-600">released</span>
                                                    @endif
                                                @endif
                                            </td>
                                            <td><x-status-badge field="lab_order_status" :value="$order->status" size="sm" dot /></td>
                                            <td class="text-right">
                                                <a href="{{ route('lab-orders.show', $order) }}" class="hms-btn-secondary hms-btn-sm">Open</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </x-card>
            @endif

            {{-- ------------------------------------------------------ encounters --}}
            @if ($can['encounters'])
                <x-card flush>
                    <x-slot:header>
                        <div class="flex flex-wrap items-center justify-between gap-2">
                            <div>
                                <h2 class="text-sm font-semibold text-slate-800">Encounters</h2>
                                <p class="text-xs text-slate-500">The last 10 clinical records opened for this patient.</p>
                            </div>
                            <a href="{{ route('encounters.index', ['patient_id' => $patient->id]) }}" class="hms-link text-xs">
                                All encounters
                            </a>
                        </div>
                    </x-slot:header>

                    @if ($encounters->isEmpty())
                        <x-empty-state icon="stethoscope"
                                       title="Never seen"
                                       message="No clinical record has been opened for this patient yet." />
                    @else
                        <div class="overflow-x-auto">
                            <table class="hms-table">
                                <thead>
                                    <tr>
                                        <th>Encounter</th>
                                        <th>Type</th>
                                        <th>Clinician</th>
                                        <th>Started</th>
                                        <th>Status</th>
                                        <th class="text-right"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($encounters as $encounter)
                                        <tr>
                                            <td class="font-mono text-xs text-slate-700">{{ $encounter->encounter_no }}</td>
                                            <td>
                                                <x-status-badge field="encounter_type" :value="$encounter->encounter_type" size="sm" />
                                            </td>
                                            <td class="text-xs text-slate-600">
                                                {{ $encounter->doctor?->name ?? 'Unassigned' }}
                                                <div class="text-slate-400">{{ $encounter->department?->name }}</div>
                                            </td>
                                            <td class="text-xs text-slate-500">{{ $encounter->started_at?->format('d M Y H:i') }}</td>
                                            <td><x-status-badge field="encounter_status" :value="$encounter->status" size="sm" dot /></td>
                                            <td class="text-right">
                                                <a href="{{ route('encounters.show', $encounter) }}"
                                                   class="hms-btn-secondary hms-btn-sm">Open</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </x-card>
            @endif
        </div>

        <div class="space-y-6">
            <x-card title="Patient" icon="users">
                <div class="flex items-start gap-3">
                    <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-brand-50 text-sm font-semibold text-brand-700">
                        {{ Str::of($patient->first_name)->substr(0, 1)->upper() }}{{ Str::of($patient->last_name)->substr(0, 1)->upper() }}
                    </span>
                    <div class="min-w-0">
                        @if ($recordLink)
                            <a href="{{ $recordLink }}" class="font-medium text-slate-900 hover:text-brand-700">
                                {{ $patient->full_name }}
                            </a>
                        @else
                            <span class="font-medium text-slate-900">{{ $patient->full_name }}</span>
                        @endif
                        <div class="font-mono text-xs text-slate-500">{{ $patient->medical_record_number }}</div>
                        <div class="mt-1 text-xs text-slate-500">
                            {{ $patient->age_display }} · {{ $patient->gender_label }}
                        </div>
                        @if ($patient->blood_group_display && $patient->blood_group !== 'unknown')
                            <div class="mt-1 text-xs text-slate-600">
                                Blood group <span class="font-medium">{{ $patient->blood_group_display }}</span>
                            </div>
                        @endif
                    </div>
                </div>
            </x-card>

            @if ($openEncounters->isNotEmpty())
                <x-card title="Live records" icon="activity">
                    <ul class="space-y-3">
                        @foreach ($openEncounters as $entry)
                            <li class="text-sm">
                                <a href="{{ route('encounters.show', $entry) }}"
                                   class="font-mono text-xs font-medium text-brand-700 hover:underline">
                                    {{ $entry->encounter_no }}
                                </a>
                                <div class="text-xs text-slate-500">
                                    {{ $entry->encounter_type_label }}
                                    · started {{ $entry->started_at?->diffForHumans() }}
                                </div>
                            </li>
                        @endforeach
                    </ul>
                    <p class="mt-3 text-xs text-slate-500">
                        Observations and notes recorded from here land on the open encounter.
                    </p>
                </x-card>
            @endif

            <x-card title="About this record" icon="info">
                <ul class="space-y-2 text-xs text-slate-600">
                    <li class="flex gap-2">
                        <x-icon name="dot" size="sm" class="mt-0.5 shrink-0 text-brand-500" />
                        Allergies, problems and past history follow the patient between visits; everything else belongs to an encounter.
                    </li>
                    <li class="flex gap-2">
                        <x-icon name="dot" size="sm" class="mt-0.5 shrink-0 text-brand-500" />
                        Panels you are not entitled to see are not loaded at all, so nothing here leaks beyond your role.
                    </li>
                    <li class="flex gap-2">
                        <x-icon name="dot" size="sm" class="mt-0.5 shrink-0 text-brand-500" />
                        Opening this page is written to the patient's access trail.
                    </li>
                </ul>
            </x-card>
        </div>
    </div>

    {{-- ------------------------------------------------------------- modals --}}
    @if ($can['allergies'])
        <x-modal name="allergy-add" maxWidth="lg">
            <form method="POST" action="{{ route('patients.allergies.store', $patient) }}">
                @csrf

                <div class="space-y-4 p-6">
                    <h2 class="text-base font-semibold text-slate-800">Record an allergy</h2>
                    <p class="text-sm text-slate-500">
                        An allergy is a safety fact — it is never inferred. Record only what was observed or reported.
                    </p>

                    <x-form.input name="allergen" label="Allergen" required :value="old('allergen')"
                                  placeholder="Penicillin, peanuts, latex…" />
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-form.select name="allergen_type" label="Type" required :options="$allergenTypes"
                                       :value="old('allergen_type', 'drug')" />
                        <x-form.select name="severity" label="Severity" required :options="$severities"
                                       :value="old('severity', 'moderate')" />
                    </div>
                    <x-form.input name="reaction" label="Reaction" :value="old('reaction')"
                                  placeholder="Rash, swelling, anaphylaxis…" />
                    <x-form.input name="onset_date" label="First noticed" type="date"
                                  :value="old('onset_date')" max="{{ today()->toDateString() }}" />
                    <x-form.textarea name="notes" label="Notes" rows="2" :value="old('notes')" />
                    <x-form.checkbox name="is_active" value="1" label="Still active"
                                     hint="Untick when the allergy has been disproved — the record stays either way."
                                     :checked="old('is_active', true)" />
                </div>

                <div class="flex items-center justify-end gap-2 border-t border-slate-200 bg-slate-50 px-6 py-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>

        @foreach ($allergies as $allergy)
            <x-modal name="allergy-edit-{{ $allergy->id }}" maxWidth="lg">
                <form method="POST" action="{{ route('patients.allergies.update', [$patient, $allergy]) }}">
                    @csrf
                    @method('PUT')

                    <div class="space-y-4 p-6">
                        <h2 class="text-base font-semibold text-slate-800">Edit allergy</h2>

                        <x-form.input name="allergen" label="Allergen" required :value="$allergy->allergen"
                                      :id="'allergen-' . $allergy->id" />
                        <div class="grid gap-4 sm:grid-cols-2">
                            <x-form.select name="allergen_type" label="Type" required :options="$allergenTypes"
                                           :value="$allergy->allergen_type" :id="'allergen-type-' . $allergy->id" />
                            <x-form.select name="severity" label="Severity" required :options="$severities"
                                           :value="$allergy->severity" :id="'severity-' . $allergy->id" />
                        </div>
                        <x-form.input name="reaction" label="Reaction" :value="$allergy->reaction"
                                      :id="'reaction-' . $allergy->id" />
                        <x-form.input name="onset_date" label="First noticed" type="date"
                                      :value="$allergy->onset_date?->toDateString()" max="{{ today()->toDateString() }}"
                                      :id="'onset-' . $allergy->id" />
                        <x-form.textarea name="notes" label="Notes" rows="2" :value="$allergy->notes"
                                         :id="'notes-' . $allergy->id" />
                        <x-form.checkbox name="is_active" value="1" label="Still active"
                                         :checked="$allergy->is_active" :id="'active-' . $allergy->id" />
                    </div>

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

    @if ($can['problems'])
        <x-modal name="problem-add" maxWidth="lg">
            <form method="POST" action="{{ route('patients.problems.store', $patient) }}"
                  @if ($canIcd)
                      x-data="icdFinder({ url: '{{ route('icd10.search') }}', term: @js(old('description')), selected: null })"
                  @endif>
                @csrf

                <div class="space-y-4 p-6">
                    <h2 class="text-base font-semibold text-slate-800">Add to the problem list</h2>
                    <p class="text-sm text-slate-500">
                        This list is for conditions that persist — hypertension, diabetes, asthma — not for the findings of a single visit.
                    </p>

                    @if ($canIcd)
                        <div class="relative" @click.outside="open = false">
                            <label for="problem-code-search" class="hms-label">Find a code</label>
                            <input id="problem-code-search" type="text" class="hms-input"
                                   placeholder="Search the ICD-10 catalogue…"
                                   x-model="term"
                                   @input.debounce.300ms="search()"
                                   @focus="if (results.length) open = true">
                            <input type="hidden" name="icd10_code_id" :value="selected ? selected.id : ''">
                            <p class="hms-hint" x-show="loading" x-cloak>Searching…</p>
                            <div x-show="open && results.length" x-cloak
                                 class="absolute z-20 mt-1 max-h-64 w-full overflow-y-auto rounded-md border border-slate-200 bg-white shadow-lg">
                                <template x-for="item in results" :key="item.id">
                                    <button type="button"
                                            class="flex w-full items-baseline gap-2 px-3 py-2 text-left text-sm hover:bg-brand-50"
                                            @click="choose(item)">
                                        <span class="font-mono text-xs text-brand-700" x-text="item.code"></span>
                                        <span class="text-slate-700" x-text="item.description"></span>
                                    </button>
                                </template>
                            </div>
                            <p class="hms-hint" x-show="selected" x-cloak>
                                Coded as <span class="font-mono" x-text="selected ? selected.code : ''"></span>.
                                <button type="button" class="hms-link text-xs" @click="clear()">Clear the code</button>
                            </p>
                        </div>
                    @endif

                    <x-form.textarea name="description" label="Problem" required rows="2" :value="old('description')"
                                     placeholder="Essential hypertension…" />
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-form.select name="status" label="Status" required :options="$problemStatuses"
                                       :value="old('status', 'active')" />
                        <x-form.select name="priority" label="Priority" required :options="$priorities"
                                       :value="old('priority', 'routine')" />
                    </div>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-form.input name="onset_date" label="Onset" type="date" :value="old('onset_date')"
                                      max="{{ today()->toDateString() }}" />
                        <x-form.input name="resolved_date" label="Resolved" type="date" :value="old('resolved_date')"
                                      hint="Filled in for you when the status is set to resolved." />
                    </div>
                    <x-form.textarea name="notes" label="Notes" rows="2" :value="old('notes')" />
                </div>

                <div class="flex items-center justify-end gap-2 border-t border-slate-200 bg-slate-50 px-6 py-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>

        @foreach ($problems as $problem)
            <x-modal name="problem-edit-{{ $problem->id }}" maxWidth="lg">
                <form method="POST" action="{{ route('patients.problems.update', [$patient, $problem]) }}">
                    @csrf
                    @method('PUT')

                    <div class="space-y-4 p-6">
                        <h2 class="text-base font-semibold text-slate-800">Edit problem</h2>

                        <x-form.textarea name="description" label="Problem" required rows="2"
                                         :value="$problem->description" :id="'problem-desc-' . $problem->id" />
                        <div class="grid gap-4 sm:grid-cols-2">
                            <x-form.select name="status" label="Status" required :options="$problemStatuses"
                                           :value="$problem->status" :id="'problem-status-' . $problem->id" />
                            <x-form.select name="priority" label="Priority" required :options="$priorities"
                                           :value="$problem->priority" :id="'problem-priority-' . $problem->id" />
                        </div>
                        <div class="grid gap-4 sm:grid-cols-2">
                            <x-form.input name="onset_date" label="Onset" type="date"
                                          :value="$problem->onset_date?->toDateString()"
                                          max="{{ today()->toDateString() }}" :id="'problem-onset-' . $problem->id" />
                            <x-form.input name="resolved_date" label="Resolved" type="date"
                                          :value="$problem->resolved_date?->toDateString()"
                                          :id="'problem-resolved-' . $problem->id" />
                        </div>
                        <x-form.textarea name="notes" label="Notes" rows="2" :value="$problem->notes"
                                         :id="'problem-notes-' . $problem->id" />

                        @if ($problem->icd10Code)
                            <p class="text-xs text-slate-500">
                                Coded as <span class="font-mono">{{ $problem->icd10Code->code }}</span>
                                — {{ $problem->icd10Code->description }}. The code cannot be changed here; remove the
                                entry and add it again to recode it.
                            </p>
                        @endif
                    </div>

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

    @if ($can['histories'])
        <x-modal name="history-add" maxWidth="lg">
            <form method="POST" action="{{ route('patients.histories.store', $patient) }}">
                @csrf

                <div class="space-y-4 p-6">
                    <h2 class="text-base font-semibold text-slate-800">Add past history</h2>

                    <x-form.select name="history_type" label="Kind of history" required :options="$historyTypes"
                                   :value="old('history_type', 'medical')" />
                    <x-form.textarea name="description" label="Detail" required rows="3" :value="old('description')"
                                     placeholder="Appendicectomy 2019 at Kenyatta National Hospital…" />
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-form.input name="onset_date" label="From" type="date" :value="old('onset_date')"
                                      max="{{ today()->toDateString() }}" />
                        <x-form.input name="resolution_date" label="To" type="date" :value="old('resolution_date')" />
                    </div>
                    <x-form.select name="status" label="Status" required :options="$problemStatuses"
                                   :value="old('status', 'resolved')" />
                    <x-form.textarea name="notes" label="Notes" rows="2" :value="old('notes')" />
                </div>

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

        @foreach ($histories as $history)
            <x-modal name="history-edit-{{ $history->id }}" maxWidth="lg">
                <form method="POST" action="{{ route('patients.histories.update', [$patient, $history]) }}">
                    @csrf
                    @method('PUT')

                    <div class="space-y-4 p-6">
                        <h2 class="text-base font-semibold text-slate-800">Edit history entry</h2>

                        <x-form.select name="history_type" label="Kind of history" required :options="$historyTypes"
                                       :value="$history->history_type" :id="'history-type-' . $history->id" />
                        <x-form.textarea name="description" label="Detail" required rows="3"
                                         :value="$history->description" :id="'history-desc-' . $history->id" />
                        <div class="grid gap-4 sm:grid-cols-2">
                            <x-form.input name="onset_date" label="From" type="date"
                                          :value="$history->onset_date?->toDateString()"
                                          max="{{ today()->toDateString() }}" :id="'history-from-' . $history->id" />
                            <x-form.input name="resolution_date" label="To" type="date"
                                          :value="$history->resolution_date?->toDateString()"
                                          :id="'history-to-' . $history->id" />
                        </div>
                        <x-form.select name="status" label="Status" required :options="$problemStatuses"
                                       :value="$history->status" :id="'history-status-' . $history->id" />
                        <x-form.textarea name="notes" label="Notes" rows="2" :value="$history->notes"
                                         :id="'history-notes-' . $history->id" />
                    </div>

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

    @if ($can['vitalsRecord'] && $openEncounters->isNotEmpty())
        <x-modal name="vitals-record" maxWidth="2xl">
            <form method="POST"
                  :action="'{{ url('/encounters') }}/' + encounter + '/vitals'"
                  x-data="vitalForm(@js((string) $latestOpen?->id))">
                @csrf

                <div class="space-y-4 p-6">
                    <h2 class="text-base font-semibold text-slate-800">Record observations</h2>
                    <p class="text-sm text-slate-500">
                        Charted against an open encounter. Values outside the adult resting range are flagged for
                        the clinician to read.
                    </p>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            <label for="vitals-encounter" class="hms-label">Encounter <span class="text-red-500">*</span></label>
                            <select id="vitals-encounter" class="hms-input pr-10" x-model="encounter" required>
                                @foreach ($openEncounters as $entry)
                                    <option value="{{ $entry->id }}">
                                        {{ $entry->encounter_no }} — {{ $entry->encounter_type_label }}
                                        ({{ $entry->started_at?->format('d M H:i') }})
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <x-form.input name="recorded_at" label="Taken at" type="datetime-local"
                                      :value="now()->format('Y-m-d\TH:i')" max="{{ now()->format('Y-m-d\TH:i') }}" />
                        <x-form.select name="source" label="Source" required :options="$vitalSources"
                                       :value="'manual'" />
                    </div>

                    <div class="grid gap-4 sm:grid-cols-3">
                        <x-form.input name="temperature" label="Temperature (°C)" type="number" step="0.1"
                                      min="25" max="45" />
                        <x-form.input name="pulse" label="Pulse (bpm)" type="number" min="20" max="250" />
                        <x-form.input name="respiratory_rate" label="Respiratory rate (/min)" type="number"
                                      min="5" max="80" />
                        <x-form.input name="bp_systolic" label="BP systolic (mmHg)" type="number" min="40" max="300" />
                        <x-form.input name="bp_diastolic" label="BP diastolic (mmHg)" type="number" min="20" max="200" />
                        <x-form.input name="spo2" label="SpO₂ (%)" type="number" min="50" max="100" />
                        <x-form.input name="weight_kg" label="Weight (kg)" type="number" step="0.1" min="0.5" max="400" />
                        <x-form.input name="height_cm" label="Height (cm)" type="number" step="0.1" min="20" max="250"
                                      hint="BMI is worked out from weight and height." />
                        <x-form.input name="blood_glucose" label="Blood glucose (mmol/L)" type="number" step="0.1"
                                      min="0" max="60" />
                        <x-form.input name="pain_score" label="Pain score (/10)" type="number" min="0" max="10" />
                        <x-form.input name="gcs" label="GCS (/15)" type="number" min="3" max="15" />
                        <x-form.input name="urine_output_ml" label="Urine output (ml)" type="number" min="0" max="5000" />
                    </div>

                    <x-form.textarea name="notes" label="Notes" rows="2"
                                     placeholder="Site of the reading, patient position, anything unusual…" />
                </div>

                <div class="flex items-center justify-end gap-2 border-t border-slate-200 bg-slate-50 px-6 py-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

    @push('scripts')
        @if ($can['problems'] && $canIcd)
            <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>
        @endif

        @if ($can['vitalsRecord'] && $openEncounters->isNotEmpty())
            <script>
                window.vitalForm = (initial) => ({
                    encounter: initial,
                });
            </script>
        @endif
    @endpush
</x-app-layout>