@extends('layouts.app')
@section('title', 'Visit ' . $visit->visit_number)

@section('styles')
@include('partials._encounter-styles')
@endsection

@section('content')
@php
    $readOnly = in_array($visit->status, ['completed','cancelled','discharged']);
    $user = auth()->user();
    $isAdmin = $user->hasAnyRole('Super Admin','Hospital Admin');
    $isClinical = $user->hasAnyRole('Clinician','Nurse');
    $isTriageNurse = $user->hasRole('Triage Nurse');
    $isReception = $user->hasAnyRole('Receptionist', 'Triage Nurse');
    $isPharmacy = $user->hasRole('Pharmacy User');

    $canEditTriage = !$readOnly && ($isAdmin || $isClinical || $isTriageNurse || $isReception);
    $canEditConsultation = !$readOnly && ($isAdmin || $isClinical);
    $canViewConsultation = $canEditConsultation || $isReception || $isTriageNurse;
    $canEditDiagnosis = !$readOnly && ($isAdmin || $isClinical);
    $canEditPrescriptions = !$readOnly && ($isAdmin || $isClinical);
    $canDeletePrescription = $isAdmin || $isClinical || $isReception || $isPharmacy;
    $canEditLab = !$readOnly && ($isAdmin || $isClinical || $isReception);
    $canEditImaging = !$readOnly && ($isAdmin || $isClinical || $isReception);
    $canEditBilling = !$readOnly && ($isAdmin || $isClinical || $isReception);

    // Direct lab/imaging encounter flags. These visits skip triage and
    // clinical consultation; the encounter UI hides those sections entirely.
    // For a direct lab encounter, only the Lab section is visible (plus
    // billing/payments). For a direct imaging encounter, only Imaging.
    $isDirectLab       = $visit->visit_type === 'direct_lab';
    $isDirectRadiology = $visit->visit_type === 'direct_radiology';
    $isDirect          = $isDirectLab || $isDirectRadiology;
@endphp

<div class="enc-page">

{{-- Flash warning --}}
@if(session('warning'))
<div class="bg-amber-50 border border-amber-300 rounded-lg px-4 py-3 mb-3 flex items-center gap-3">
    <svg class="w-5 h-5 text-amber-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
    <p class="text-sm text-amber-800">{{ session('warning') }}</p>
</div>
@endif

{{-- ═══ DIRECT ENCOUNTER BANNER ═══
     Shown on direct_lab and direct_radiology encounters. Reminds staff
     this is a walk-in test request — no consultation, vitals, or notes.
     If clinical care is needed after the test, the patient closes this
     visit and a new OPD visit is opened. --}}
@if($isDirect)
<div style="background:linear-gradient(90deg,{{ $isDirectLab ? '#ccfbf1 0%,#f0fdfa' : '#f3e8ff 0%,#faf5ff' }} 100%);border:1px solid {{ $isDirectLab ? '#5eead4' : '#d8b4fe' }};border-left:4px solid {{ $isDirectLab ? '#0d9488' : '#7c3aed' }};border-radius:8px;padding:12px 18px;margin-bottom:14px;display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap">
    <svg style="width:22px;height:22px;color:{{ $isDirectLab ? '#0d9488' : '#7c3aed' }};flex-shrink:0;margin-top:1px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    <div style="flex:1;min-width:200px">
        <p style="font-size:13px;font-weight:700;color:{{ $isDirectLab ? '#134e4a' : '#581c87' }};margin:0">
            Direct {{ $isDirectLab ? 'Lab' : 'Imaging' }} Encounter — No Consultation
        </p>
        <p style="font-size:11.5px;color:{{ $isDirectLab ? '#115e59' : '#6b21a8' }};margin:2px 0 0;line-height:1.5">
            Walk-in {{ $isDirectLab ? 'lab test' : 'imaging' }} request. Vitals and clinical notes don't apply here.
            Order the {{ $isDirectLab ? 'tests' : 'imaging' }}, bill the patient, and complete the visit when results are out.
            <strong>If the patient needs treatment after the {{ $isDirectLab ? 'lab' : 'imaging' }}, close this visit and start a new OPD visit.</strong>
        </p>
    </div>
</div>
@endif

{{-- ═══ ADMIN: REOPEN BANNER (for completed/cancelled/discharged visits) ═══ --}}
@if($readOnly && $isAdmin)
<div style="background:linear-gradient(90deg,#fef3c7 0%,#fff7ed 100%);border:1px solid #fcd34d;border-left:4px solid #d97706;border-radius:8px;padding:12px 18px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap">
    <div style="display:flex;align-items:center;gap:12px">
        <svg style="width:22px;height:22px;color:#d97706;flex-shrink:0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
        </svg>
        <div>
            <p style="font-size:13px;font-weight:700;color:#78350f;margin:0">
                This visit is {{ $visit->status }}
            </p>
            <p style="font-size:11.5px;color:#92400e;margin:2px 0 0">
                As an administrator, you can reopen it to modify tests, drugs, services, or billing.
                Reopening will set status back to <strong>in consultation</strong> and unlock all forms.
            </p>
        </div>
    </div>
    <form method="POST" action="{{ route('visits.reopen', $visit) }}" onsubmit="return confirm('Reopen visit #{{ $visit->visit_number }}?\n\nThis will:\n• Set status back to in-consultation\n• Clear the check-out timestamp\n• Unlock all clinical forms and the billing table\n\nThe action is logged in the audit trail.')">
        @csrf
        <button type="submit" style="background:#d97706;color:#fff;padding:8px 18px;font-size:12.5px;font-weight:600;border-radius:6px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:0 2px 4px rgba(217,119,6,.3);transition:background .15s">
            <svg style="width:14px;height:14px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
            </svg>
            Reopen Visit
        </button>
    </form>
</div>
@endif

{{-- ═══ TITLE + PATIENT BANNER ═══ --}}
@include('partials._encounter-patient-header', [
    'visit' => $visit,
    'title' => 'Update Visit',
    'readOnly' => $readOnly,
    'showPatientActions' => true,
])

{{-- Inline error banner — surfaces validation, stock, payment-block and
     safety errors thrown by Dispense (and any other form on this page). --}}
@if($errors->any())
<div style="background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:8px;padding:10px 14px;margin-top:12px;font-size:13px">
    <strong>Action could not be completed:</strong>
    <ul style="margin-top:4px;padding-left:18px;list-style:disc">
        @foreach($errors->all() as $err)
            <li>{{ $err }}</li>
        @endforeach
    </ul>
</div>
@endif

{{-- ═══ VISIT META ═══ --}}
@php
    // Is this a dental visit? Used to hide free-text exam/treatment fields
    // (dentists work from Products/Services + Prescriptions, not narrative
    // notes) and to surface dental clinicians at the top of the picker.
    $isDental = ($visit->department->code ?? null) === 'DEN';

    // Clinician pool now lives in resources/views/partials/
    // _clinician-options.blade.php — included directly in the dropdown
    // below. The partial restricts the pool to clinical roles
    // (Clinician / Nurse / Triage Nurse / Dental User) and supports a
    // preferDentalTop flag for dental encounters.

    $_canAssignClinician = !$readOnly && ($isAdmin || $isClinical || $isReception || $isTriageNurse);
@endphp
<div class="enc-section" style="margin-top:14px">
    <div class="enc-section-body">
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px 18px">
            <div class="enc-fieldbox">
                <span class="enc-fieldbox-label">Patient Name</span>
                <div class="enc-fieldbox-value">{{ strtoupper($visit->patient->full_name ?? '') }}</div>
            </div>
            <div class="enc-fieldbox">
                <span class="enc-fieldbox-label">Payment Mode</span>
                @php
                    // Same permission set as the clinician assignment editor.
                    $_canEditPaymentMode = !$readOnly && ($isAdmin || $isClinical || $isReception || $isTriageNurse);
                    $_paymentModes = ['cash' => 'Cash', 'mpesa' => 'M-Pesa', 'insurance' => 'Insurance', 'corporate' => 'Corporate'];
                    $_currentLabel = $_paymentModes[$visit->payment_mode] ?? ucfirst(str_replace('_', ' ', $visit->payment_mode ?? '-'));
                    if ($visit->payment_mode === 'insurance' && $visit->insuranceCompany) {
                        $_currentLabel .= ' · ' . $visit->insuranceCompany->name;
                    }
                @endphp
                @if($_canEditPaymentMode)
                {{-- Default view: read-only label + small pencil icon to enter
                     edit mode. Dropdowns and Save button stay hidden until
                     the pencil is clicked — keeps the page clean for the
                     receptionist's normal workflow but still gives them a
                     fix path when the wrong mode was recorded at intake. --}}
                <div id="paymentModeDisplay" style="display:flex;align-items:center;gap:6px">
                    <div class="enc-fieldbox-value" id="paymentModeText">{{ $_currentLabel }}</div>
                    <button type="button" onclick="enterPaymentModeEdit()" title="Edit payment mode"
                            style="background:transparent;border:none;cursor:pointer;color:#6b7280;padding:2px;display:inline-flex;align-items:center">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                    </button>
                </div>
                <form method="POST" action="{{ route('visits.update-payment-mode', $visit) }}" id="updatePaymentModeForm" style="display:none;flex-direction:column;gap:4px">
                    @csrf
                    <select name="payment_mode" id="paymentModeSelect"
                        onchange="onPaymentModeChange(this.value)"
                        style="border:1px solid #e5e7eb;background:#fff;width:100%;font-size:12.5px;color:#1f2937;font-weight:600;outline:none;padding:4px 6px;border-radius:4px">
                        @foreach($_paymentModes as $val => $label)
                            <option value="{{ $val }}" {{ $visit->payment_mode === $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                    {{-- Insurance sub-fields revealed only when payment_mode = insurance. --}}
                    <div id="paymentModeInsBlock" style="display:{{ $visit->payment_mode === 'insurance' ? 'flex' : 'none' }};flex-direction:column;gap:4px;margin-top:4px">
                        <select name="insurance_company_id" id="paymentModeInsSelect"
                            style="font-size:11.5px;padding:4px 6px;border:1px solid #e5e7eb;border-radius:4px;background:#fff">
                            <option value="">— Choose insurer —</option>
                            @foreach($insurers as $ins)
                                <option value="{{ $ins->id }}" {{ $visit->insurance_company_id == $ins->id ? 'selected' : '' }}>{{ $ins->name }}</option>
                            @endforeach
                        </select>
                        <input type="text" name="authorization_code" placeholder="Auth code (optional)"
                               value="{{ $visit->authorization_code }}"
                               style="font-size:11.5px;padding:4px 6px;border:1px solid #e5e7eb;border-radius:4px">
                    </div>
                    <div style="display:flex;gap:6px;margin-top:4px">
                        <button type="submit" id="paymentModeSubmitBtn"
                                style="font-size:11px;padding:4px 10px;border:none;background:#2563eb;color:#fff;border-radius:4px;cursor:pointer;font-weight:600">
                            Save
                        </button>
                        <button type="button" onclick="cancelPaymentModeEdit()"
                                style="font-size:11px;padding:4px 10px;border:1px solid #d1d5db;background:#fff;color:#374151;border-radius:4px;cursor:pointer">
                            Cancel
                        </button>
                    </div>
                </form>
                <script>
                /**
                 * Payment mode is read-only by default. Clicking the pencil
                 * icon swaps the read-only label for the editable form
                 * (dropdown + insurance sub-fields if relevant + Save).
                 * Saving submits the form normally (page reloads). Cancel
                 * reverts to the read-only view without saving.
                 *
                 * Non-insurance picks still auto-submit on change (no extra
                 * fields needed) but they ask for confirmation first so an
                 * accidental click doesn't change the mode silently.
                 */
                (function() {
                    var initial      = @json($visit->payment_mode);
                    var initialIns   = @json($visit->insurance_company_id);
                    var initialAuth  = @json($visit->authorization_code);

                    window.enterPaymentModeEdit = function() {
                        document.getElementById('paymentModeDisplay').style.display = 'none';
                        document.getElementById('updatePaymentModeForm').style.display = 'flex';
                    };

                    window.cancelPaymentModeEdit = function() {
                        // Reset form values to original so a re-open shows the
                        // current state, not the abandoned in-progress edit.
                        document.getElementById('paymentModeSelect').value = initial;
                        var insSel = document.getElementById('paymentModeInsSelect');
                        if (insSel) insSel.value = initialIns || '';
                        var authInput = document.querySelector('#updatePaymentModeForm input[name="authorization_code"]');
                        if (authInput) authInput.value = initialAuth || '';
                        document.getElementById('paymentModeInsBlock').style.display = initial === 'insurance' ? 'flex' : 'none';

                        document.getElementById('updatePaymentModeForm').style.display = 'none';
                        document.getElementById('paymentModeDisplay').style.display = 'flex';
                    };

                    window.onPaymentModeChange = function(val) {
                        var insBlock = document.getElementById('paymentModeInsBlock');
                        var form     = document.getElementById('updatePaymentModeForm');
                        if (val === 'insurance') {
                            insBlock.style.display = 'flex';
                        } else {
                            insBlock.style.display = 'none';
                            if (val !== initial) {
                                if (confirm('Change payment mode to ' + val.toUpperCase() + '?')) {
                                    form.submit();
                                } else {
                                    document.getElementById('paymentModeSelect').value = initial;
                                }
                            }
                        }
                    };
                })();
                </script>
                @else
                <div class="enc-fieldbox-value">{{ $_currentLabel }}</div>
                @endif
            </div>
            {{-- Department: dropdown when editable on an OPD visit.

                 We deliberately keep the department READ-ONLY for
                 direct_lab and direct_radiology encounters — those
                 visits' department (Laboratory / Radiology) is what
                 makes them a direct encounter in the first place, so
                 letting the user "correct" it would create an
                 inconsistent record (visit_type=direct_lab but
                 department=Outpatient). If reception genuinely picked
                 the wrong encounter type, the visit should be cancelled
                 and re-created from the Queue page's Start New Visit
                 modal.

                 For everyone else (outpatient visits) we surface a
                 dropdown so reception can fix a wrong department
                 (e.g. visit was started as Outpatient but the patient
                 actually went to the Dental clinic). Lab and Radiology
                 are excluded from the dropdown because picking them
                 would not actually convert this consultation into a
                 direct encounter — it would just mislabel it. --}}
            <div class="enc-fieldbox">
                <span class="enc-fieldbox-label">Department</span>
                @if($_canAssignClinician && !$isDirectLab && !$isDirectRadiology)
                <form method="POST" action="{{ route('visits.assign-department', $visit) }}" id="assignDepartmentForm" style="display:flex;gap:6px;align-items:center">
                    @csrf
                    <select name="department_id" onchange="document.getElementById('assignDepartmentForm').submit()"
                        style="border:none;background:transparent;width:100%;font-size:13px;color:#1f2937;font-weight:600;outline:none;padding:0">
                        <option value="">— Select department —</option>
                        @include('partials._department-options', ['selected' => $visit->department_id, 'excludeDirect' => true])
                    </select>
                </form>
                @else
                <div class="enc-fieldbox-value">{{ $visit->department->name ?? '-' }}</div>
                @endif
            </div>

            {{-- Clinician: dropdown when editable, read-only when locked.
                 Pool comes from the standard _clinician-options partial:
                 active users with Clinician / Nurse / Triage Nurse /
                 Dental User roles. Dental encounters float Dental Users
                 to the top so the dentist is the obvious first pick. --}}
            <div class="enc-fieldbox">
                <span class="enc-fieldbox-label">Clinician</span>
                @if($_canAssignClinician)
                <form method="POST" action="{{ route('visits.assign-clinician', $visit) }}" id="assignClinicianForm" style="display:flex;gap:6px;align-items:center">
                    @csrf
                    <select name="clinician_id" onchange="document.getElementById('assignClinicianForm').submit()"
                        style="border:none;background:transparent;width:100%;font-size:13px;color:#1f2937;font-weight:600;outline:none;padding:0">
                        <option value="">— Select clinician —</option>
                        @include('partials._clinician-options', ['selected' => $visit->clinician_id, 'preferDentalTop' => $isDental])
                    </select>
                </form>
                @else
                <div class="enc-fieldbox-value">{{ $visit->clinician->name ?? '— Unassigned —' }}</div>
                @endif
            </div>
            <div class="enc-fieldbox">
                <span class="enc-fieldbox-label">Patient Type</span>
                <div class="enc-fieldbox-value">Outpatient (OPD)</div>
            </div>
            <div class="enc-fieldbox">
                <span class="enc-fieldbox-label">Date</span>
                <div class="enc-fieldbox-value">{{ $visit->check_in_at?->format('Y-m-d H:i') ?? $visit->created_at->format('Y-m-d H:i') }}</div>
            </div>

            <div class="enc-fieldbox">
                <span class="enc-fieldbox-label">Status</span>
                <div class="enc-fieldbox-value">{{ ucfirst(str_replace('_',' ', $visit->status)) }}</div>
            </div>
            <div class="enc-fieldbox">
                <span class="enc-fieldbox-label">Visit #</span>
                <div class="enc-fieldbox-value" style="font-family:ui-monospace,monospace">{{ $visit->visit_number }}</div>
            </div>
        </div>
    </div>
</div>

{{-- ═══ 1. VITALS (multi-triage support) ═══ --}}
@unless($isDirect)
@php
    $_triages = $visit->triages;  // hasMany, newest first (per Visit model)
    $_triageCount = $_triages->count();
    $_showAddForm = $canEditTriage && ($_triageCount === 0);  // auto-open when none exist yet
@endphp
<div class="enc-section">
    <div class="enc-section-head">
        <h3><span class="enc-section-num">1</span> Vitals @if($_triageCount > 1)<span style="font-weight:400;color:#7a178c;font-size:11.5px;margin-left:6px">({{ $_triageCount }} readings)</span>@endif</h3>
        <div class="enc-head-actions">
            @if($_triageCount > 0)
                <span class="enc-status-pill pill-done">Done</span>
            @else
                <span class="enc-status-pill pill-pending">Pending</span>
            @endif
            @if($canEditTriage)
                <button type="button" onclick="document.getElementById('addTriageForm').style.display='block';this.style.display='none';" class="enc-btn-teal" id="addTriageBtn">+ Add Triage</button>
            @endif
        </div>
    </div>
    <div class="enc-section-body" style="padding:0">

        {{-- History table: one row per triage, newest first --}}
        @if($_triageCount > 0)
        <table class="enc-table">
            <thead>
                <tr>
                    <th class="enc-th-left">Date / Time</th>
                    <th>Height</th>
                    <th>Weight</th>
                    <th>BMI</th>
                    <th>Temp</th>
                    <th>BP</th>
                    <th>Pulse</th>
                    <th>RR</th>
                    <th>SPO&sup2;</th>
                    <th>Pain</th>
                    <th>Priority</th>
                    <th class="enc-th-left">Recorded By</th>
                    @if($canEditTriage)<th style="width:80px">Actions</th>@endif
                </tr>
            </thead>
            <tbody>
                @foreach($_triages as $t)
                {{-- Display row --}}
                <tr id="triage-row-{{ $t->id }}">
                    <td class="enc-td-left" style="white-space:nowrap">{{ $t->created_at->format('d M H:i') }}</td>
                    <td>{{ $t->height ?? '—' }}</td>
                    <td>{{ $t->weight ?? '—' }}</td>
                    <td>{{ $t->bmi ?? '—' }}</td>
                    <td>{{ $t->temperature ?? '—' }}</td>
                    <td>{{ ($t->blood_pressure_systolic ?? '—').' / '.($t->blood_pressure_diastolic ?? '—') }}</td>
                    <td>{{ $t->pulse ?? '—' }}</td>
                    <td>{{ $t->respiratory_rate ?? '—' }}</td>
                    <td>{{ $t->oxygen_saturation ?? '—' }}</td>
                    <td>{{ $t->pain_score ?? '—' }}</td>
                    <td>
                        @php $pr = $t->priority ?? 'normal'; @endphp
                        <span style="color:{{ $pr==='emergency'?'#dc2626':($pr==='urgent'?'#d97706':'#15803d') }};font-weight:700">
                            {{ ucfirst($pr) }}
                        </span>
                    </td>
                    <td class="enc-td-left" style="font-size:11.5px;color:#4b5563">
                        {{ \App\Models\User::find($t->recorded_by)?->name ?? '—' }}
                        @if($t->triage_source === 'triage_nurse')<span style="color:#9ca3af;font-size:10.5px"> · triage</span>@endif
                    </td>
                    @if($canEditTriage)
                    <td style="white-space:nowrap">
                        <button type="button" onclick="document.getElementById('triage-row-{{ $t->id }}').style.display='none';document.getElementById('triage-edit-{{ $t->id }}').style.display='';" class="enc-del-btn" title="Edit" style="color:#6b7280">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        </button>
                        <form method="POST" action="{{ route('triage.destroy', $t) }}" onsubmit="return confirm('Delete this triage entry?')" class="inline">
                            @csrf @method('DELETE')
                            <button type="submit" class="enc-del-btn" title="Delete">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </form>
                    </td>
                    @endif
                </tr>
                {{-- Notes row (only if notes exist) --}}
                @if($t->notes)
                <tr id="triage-notes-{{ $t->id }}" style="background:#faf5fc">
                    <td colspan="{{ $canEditTriage ? 13 : 12 }}" class="enc-td-left" style="font-size:11.5px;color:#4b5563;padding:6px 14px">
                        <strong style="color:#5c1269">Notes:</strong> {{ $t->notes }}
                    </td>
                </tr>
                @endif
                {{-- Inline edit row (hidden by default) --}}
                @if($canEditTriage)
                <tr id="triage-edit-{{ $t->id }}" class="enc-search-row" style="display:none">
                    <td colspan="{{ $canEditTriage ? 13 : 12 }}" class="enc-td-left">
                        <form method="POST" action="{{ route('triage.update', $t) }}">
                            @csrf @method('PATCH')
                            <div style="font-size:11px;font-weight:600;color:#5c1269;margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px">
                                ✎ Editing triage recorded {{ $t->created_at->format('d M Y H:i') }}
                            </div>
                            <table class="enc-table" style="border:none">
                                <thead>
                                    <tr>
                                        <th>Height</th>
                                        <th>Weight</th>
                                        <th>Temp</th>
                                        <th>BP Sys</th>
                                        <th>BP Dia</th>
                                        <th>Pulse</th>
                                        <th>RR</th>
                                        <th>SPO&sup2;</th>
                                        <th>Pain</th>
                                        <th>Priority</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="number" step="0.1" name="height" value="{{ $t->height }}"></td>
                                        <td><input type="number" step="0.1" name="weight" value="{{ $t->weight }}"></td>
                                        <td><input type="number" step="0.1" name="temperature" value="{{ $t->temperature }}"></td>
                                        <td><input type="number" name="blood_pressure_systolic" value="{{ $t->blood_pressure_systolic }}"></td>
                                        <td><input type="number" name="blood_pressure_diastolic" value="{{ $t->blood_pressure_diastolic }}"></td>
                                        <td><input type="number" name="pulse" value="{{ $t->pulse }}"></td>
                                        <td><input type="number" name="respiratory_rate" value="{{ $t->respiratory_rate }}"></td>
                                        <td><input type="number" name="oxygen_saturation" value="{{ $t->oxygen_saturation }}"></td>
                                        <td><input type="number" name="pain_score" min="0" max="10" value="{{ $t->pain_score }}"></td>
                                        <td>
                                            <select name="priority" required>
                                                <option value="normal" {{ $t->priority==='normal'?'selected':'' }}>Routine</option>
                                                <option value="urgent" {{ $t->priority==='urgent'?'selected':'' }}>Semi-urgent</option>
                                                <option value="emergency" {{ $t->priority==='emergency'?'selected':'' }}>Urgent</option>
                                            </select>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div style="display:flex;gap:8px;align-items:center;margin-top:10px">
                                <input type="text" name="notes" class="enc-input" placeholder="Triage notes (optional)" value="{{ $t->notes }}" style="flex:1">
                                <button type="submit" class="enc-btn-primary">Save Changes</button>
                                <button type="button" onclick="document.getElementById('triage-row-{{ $t->id }}').style.display='';document.getElementById('triage-edit-{{ $t->id }}').style.display='none';" class="enc-btn-cancel">Cancel</button>
                            </div>
                        </form>
                    </td>
                </tr>
                @endif
                @endforeach
            </tbody>
        </table>
        @endif

        {{-- Add-new-triage form (toggled open by "+ Add Triage" button) --}}
        @if($canEditTriage)
        <div id="addTriageForm" style="{{ $_showAddForm ? '' : 'display:none' }};padding:14px 18px;background:#faf5fc;border-top:{{ $_triageCount ? '1px solid #e6d0f3' : 'none' }}">
            <form method="POST" action="{{ route('triage.store', $visit) }}">@csrf
                <div style="font-size:11px;font-weight:600;color:#5c1269;margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px">
                    + New Triage Reading
                </div>
                <table class="enc-table" style="border:none">
                    <thead>
                        <tr>
                            <th>Height</th>
                            <th>Weight</th>
                            <th>Temp</th>
                            <th>BP Sys</th>
                            <th>BP Dia</th>
                            <th>Pulse</th>
                            <th>RR</th>
                            <th>SPO&sup2;</th>
                            <th>Pain</th>
                            <th>Priority</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="number" step="0.1" name="height" placeholder="165"></td>
                            <td><input type="number" step="0.1" name="weight" placeholder="70"></td>
                            <td><input type="number" step="0.1" name="temperature" placeholder="36.5"></td>
                            <td><input type="number" name="blood_pressure_systolic" placeholder="120"></td>
                            <td><input type="number" name="blood_pressure_diastolic" placeholder="80"></td>
                            <td><input type="number" name="pulse" placeholder="72"></td>
                            <td><input type="number" name="respiratory_rate" placeholder="18"></td>
                            <td><input type="number" name="oxygen_saturation" placeholder="98"></td>
                            <td><input type="number" name="pain_score" min="0" max="10" placeholder="0"></td>
                            <td>
                                <select name="priority" required>
                                    <option value="normal">Routine</option>
                                    <option value="urgent">Semi-urgent</option>
                                    <option value="emergency">Urgent</option>
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div style="display:flex;gap:8px;align-items:center;margin-top:10px">
                    <input type="text" name="notes" class="enc-input" placeholder="Triage notes (optional)" style="flex:1">
                    <button type="submit" class="enc-btn-success">Save Triage</button>
                    @if($_triageCount > 0)
                    <button type="button" onclick="document.getElementById('addTriageForm').style.display='none';document.getElementById('addTriageBtn').style.display='';" class="enc-btn-cancel">Cancel</button>
                    @endif
                </div>
            </form>
        </div>
        @elseif($_triageCount === 0)
        <div style="padding:14px 18px"><p style="font-size:12.5px;color:#9ca3af">Triage not recorded for this visit.</p></div>
        @endif
    </div>
</div>
@endunless

{{-- ═══ 2. CLINICAL DETAILS ═══ --}}
@unless($isDirect)
<div class="enc-section">
    <div class="enc-section-head">
        <h3><span class="enc-section-num">2</span> Clinical Details</h3>
        <div class="enc-head-actions">
            <a href="{{ route('patients.history', $visit->patient) }}" target="_blank" class="enc-btn-teal">View Patient History</a>
            @if($visit->patient->allergies && count($visit->patient->allergies))
                <span class="enc-status-pill" style="background:#fee2e2;color:#991b1b">⚠ {{ count($visit->patient->allergies) }} allergies</span>
            @else
                <span class="enc-status-pill pill-info">View Allergies (0)</span>
            @endif
        </div>
    </div>
    <div class="enc-section-body">
        @if(($readOnly || (!$canEditConsultation && $canViewConsultation)) && $visit->consultation)
        {{-- READ-ONLY VIEW --}}
        <div class="enc-subsection">
            <div class="enc-subsection-title">Chief Complaint</div>
            <div class="enc-ro-text">{{ $visit->consultation->presenting_complaints ?? '-' }}</div>
        </div>

        <div class="enc-subsection">
            <div class="enc-subsection-title">Clinical Notes</div>
            <div class="enc-ro-text" style="min-height:60px;white-space:pre-wrap">{{ $visit->consultation->history_of_presenting_illness ?? '-' }}</div>
        </div>

        @unless($isDental)
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
            <div class="enc-subsection" style="margin-bottom:0">
                <div class="enc-subsection-title">Examination Findings</div>
                <div class="enc-ro-text" style="min-height:60px;white-space:pre-wrap">{{ $visit->consultation->examination_findings ?? '-' }}</div>
            </div>
            <div class="enc-subsection" style="margin-bottom:0">
                <div class="enc-subsection-title">Treatment Plan</div>
                <div class="enc-ro-text" style="min-height:60px;white-space:pre-wrap">{{ $visit->consultation->treatment_plan ?? '-' }}</div>
            </div>
        </div>
        @endunless

        <div class="enc-subsection" style="margin-top:14px">
            <div class="enc-subsection-title">Diagnosis</div>
            @php $diags = $visit->consultation->diagnoses ?? collect(); @endphp
            @if($diags->isNotEmpty())
            <div>
                @foreach($diags as $d)
                <span class="enc-dx-chip {{ $d->is_primary ? 'is-primary' : '' }}">
                    @if($d->is_primary)<span class="dx-primary-tag">PRIMARY</span>@endif
                    <span class="dx-code">{{ $d->icd10Code->code ?? '' }}</span>
                    <span>{{ $d->icd10Code->description ?? '' }}</span>
                </span>
                @endforeach
            </div>
            @else
            <div class="enc-ro-text">{{ is_array($visit->consultation->diagnosis) ? implode(', ', $visit->consultation->diagnosis) : ($visit->consultation->diagnosis ?? '—') }}</div>
            @endif
        </div>

        @elseif($canEditConsultation)
        {{-- EDIT FORM --}}
        <form method="POST" action="{{ $visit->consultation ? route('consultations.update', $visit->consultation) : route('consultations.store', $visit) }}" id="consultForm">
            @csrf
            @if($visit->consultation) @method('PUT') @endif

            {{-- Chief Complaint: single-line, compact --}}
            <div class="enc-subsection">
                <label class="enc-subsection-title" for="cn-pc">Chief Complaint <span style="color:#dc2626">*</span></label>
                <textarea id="cn-pc" name="presenting_complaints" required
                    class="enc-input auto-expand"
                    style="min-height:38px;resize:vertical"
                    placeholder="Brief chief complaint..."
                    oninput="autoExpand(this)">{{ $visit->consultation->presenting_complaints ?? '' }}</textarea>
            </div>

            {{-- Clinical Notes / History: full-width, taller --}}
            <div class="enc-subsection">
                <label class="enc-subsection-title" for="cn-hist">Clinical Notes / History</label>
                <textarea id="cn-hist" name="history_of_presenting_illness"
                    class="enc-input auto-expand"
                    style="min-height:180px;resize:vertical"
                    placeholder="History of presenting illness, past medical, social, family history..."
                    oninput="autoExpand(this)">{{ $visit->consultation->history_of_presenting_illness ?? '' }}</textarea>
            </div>

            {{-- Examination + Treatment: side-by-side. Hidden on dental
                 visits — dentists work from Products/Services and
                 Prescriptions, not narrative exam notes. --}}
            @unless($isDental)
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
                <div class="enc-subsection" style="margin-bottom:0">
                    <label class="enc-subsection-title" for="cn-exam">Examination Findings</label>
                    <textarea id="cn-exam" name="examination_findings"
                        class="enc-input auto-expand"
                        style="min-height:180px;resize:vertical"
                        placeholder="Examination findings..."
                        oninput="autoExpand(this)">{{ $visit->consultation->examination_findings ?? '' }}</textarea>
                </div>
                <div class="enc-subsection" style="margin-bottom:0">
                    <label class="enc-subsection-title" for="cn-tx">Treatment Plan</label>
                    <textarea id="cn-tx" name="treatment_plan"
                        class="enc-input auto-expand"
                        style="min-height:180px;resize:vertical"
                        placeholder="Treatment plan..."
                        oninput="autoExpand(this)">{{ $visit->consultation->treatment_plan ?? '' }}</textarea>
                </div>
            </div>
            @endunless

            {{-- Diagnosis --}}
            <div class="enc-subsection" style="margin-top:14px">
                <div class="enc-subsection-title">Diagnosis (ICD-10) <span style="color:#dc2626">*</span></div>
                @include('partials._icd10_picker', ['consultation' => $visit->consultation ?? null])
            </div>

            <div style="margin-top:14px">
                <button type="submit" name="action" value="save" class="enc-btn-primary">Save Consultation</button>
            </div>
        </form>
        @else
        <p style="font-size:12.5px;color:#9ca3af">No consultation recorded.</p>
        @endif
    </div>
</div>
@endunless

{{-- ═══ 3. LABORATORY TESTS ═══ --}}
@unless($isDirectRadiology)
<div class="enc-section">
    @php
        // Auto-expand when there's already lab data on this visit so the
        // clinician doesn't have to click to see results that exist. Empty
        // visits start collapsed — the "+ Add" button reveals the search UI.
        $_labHasData = $visit->labOrders->count() > 0;
    @endphp
    <div class="enc-section-head">
        <h3>@unless($isDirect)<span class="enc-section-num">3</span> @endunless Laboratory Tests</h3>
        <div class="enc-head-actions">
            @if($visit->labOrders->count())<span class="enc-status-pill pill-info">{{ $visit->labOrders->count() }} orders</span>@endif
            @if(!$readOnly)
            <button type="button" onclick="toggleEncSection('labSectionBody', this)"
                    class="enc-section-toggle"
                    aria-expanded="{{ $_labHasData ? 'true' : 'false' }}"
                    style="background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:4px">
                <span class="enc-toggle-label">+ Add New Laboratory Request</span>
                <svg class="enc-toggle-chev w-3 h-3" style="transition:transform .15s;{{ $_labHasData ? 'transform:rotate(180deg)' : '' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
            </button>
            @endif
        </div>
    </div>
    <div class="enc-section-body" id="labSectionBody" style="padding:0;{{ $_labHasData ? '' : 'display:none' }}">
        <table class="enc-table">
            <thead>
                <tr>
                    <th class="enc-th-left">Test</th>
                    <th class="enc-th-left">Result</th>
                    <th>Reference Range</th>
                    <th class="enc-th-left">Notes</th>
                    <th>Urgency</th>
                    <th>Status</th>
                    @if($canEditLab)<th style="width:50px">Delete</th>@endif
                </tr>
            </thead>
            <tbody>
                @forelse($visit->labOrders as $lo)
                <tr>
                    <td class="enc-td-left">{{ $lo->test_name }}</td>
                    <td class="enc-td-left" style="font-size:11.5px">
                        @if($lo->result && is_array($lo->result->results))
                            @php $resData = $lo->result->results; @endphp
                            @if(isset($resData['generic']))
                                {{ $resData['generic']['value'] ?? '-' }} {{ $resData['generic']['unit'] ?? '' }}
                            @else
                                @foreach($resData as $param)
                                    @if(is_array($param) && isset($param['name']))
                                    <div>
                                        <span style="color:#6b7280">{{ $param['short_code'] ?? $param['name'] }}:</span>
                                        <strong style="color:{{ ($param['flag'] ?? '') !== 'normal' ? '#dc2626' : '#1f2937' }}">{{ $param['value'] ?? '-' }}</strong>
                                        <span style="color:#9ca3af">{{ $param['unit'] ?? '' }}</span>
                                    </div>
                                    @endif
                                @endforeach
                            @endif
                        @else — @endif
                    </td>
                    <td style="font-size:11px;color:#6b7280">
                        @if($lo->result && is_array($lo->result->results))
                            @foreach($lo->result->results as $param)
                                @if(is_array($param) && isset($param['reference_range']))
                                    <div>{{ $param['reference_range'] }}</div>
                                @endif
                            @endforeach
                        @else — @endif
                    </td>
                    <td class="enc-td-left" style="font-size:11.5px;color:#4b5563">{{ $lo->clinical_notes ?? '—' }}</td>
                    <td style="text-transform:capitalize">{{ $lo->urgency }}</td>
                    <td>
                        <span class="enc-status-pill {{ $lo->status==='validated'?'pill-done':($lo->status==='resulted'?'pill-info':'pill-pending') }}">{{ ucfirst($lo->status) }}</span>
                    </td>
                    @if($canEditLab)
                    <td>
                        @if(!in_array($lo->status, ['validated','cancelled','resulted']))
                        <form method="POST" action="{{ route('lab.cancel', $lo) }}"
                              onsubmit="return confirm('Cancel lab order for {{ addslashes($lo->test_name) }}?\n\nThis will remove it from the lab queue and delete the charge from the bill.')"
                              class="inline">
                            @csrf @method('DELETE')
                            <button type="submit" class="enc-del-btn" title="Cancel lab order">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </form>
                        @endif
                    </td>
                    @endif
                </tr>
                @empty
                <tr><td colspan="{{ $canEditLab ? 7 : 6 }}" style="color:#9ca3af;padding:14px">No lab orders yet.</td></tr>
                @endforelse

                {{-- Search row (like Banda Image 4 "Search Test e.g. Full Hemogram") --}}
                @if($canEditLab)
                <tr class="enc-search-row">
                    <td colspan="7" class="enc-td-left">
                        <form method="POST" action="{{ route('lab.order') }}" style="display:flex;gap:8px;align-items:center">
                            @csrf
                            <input type="hidden" name="visit_id" value="{{ $visit->id }}">
                            <input type="hidden" name="lab_test_id" id="lab-test-id">
                            <div style="flex:1;position:relative">
                                <input type="text" id="lab-search" placeholder="Search Test e.g. Full Hemogram" autocomplete="off" required
                                       oninput="filterLabTests(this.value)" onfocus="filterLabTests(this.value)" style="width:100%">
                                <div id="lab-dropdown" class="hidden" style="position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 10px 25px rgba(0,0,0,.08);max-height:200px;overflow-y:auto;font-size:12px"></div>
                                <p id="lab-price-hint" style="font-size:11px;color:#14b8a6;margin-top:2px;font-weight:600"></p>
                            </div>
                            <select name="urgency" style="width:100px;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:12.5px">
                                <option value="routine">Routine</option>
                                <option value="urgent">Urgent</option>
                            </select>
                            <button type="submit" class="enc-btn-primary" style="padding:6px 14px">+ Add</button>
                        </form>
                    </td>
                </tr>
                @endif
            </tbody>
        </table>
    </div>
</div>
@endunless

{{-- ═══ 4. RADIOLOGY / IMAGING ═══ --}}
@unless($isDirectLab)
<div class="enc-section">
    @php
        $_imgHasData = $visit->imagingRequests->count() > 0;
    @endphp
    <div class="enc-section-head">
        <h3>@unless($isDirect)<span class="enc-section-num">4</span> @endunless Radiology / Imaging</h3>
        <div class="enc-head-actions">
            @if($visit->imagingRequests->count())<span class="enc-status-pill pill-info">{{ $visit->imagingRequests->count() }} orders</span>@endif
            @if(!$readOnly)
            <button type="button" onclick="toggleEncSection('imagingSectionBody', this)"
                    class="enc-section-toggle"
                    aria-expanded="{{ $_imgHasData ? 'true' : 'false' }}"
                    style="background:#faf5ff;border:1px solid #e9d5ff;color:#7c3aed;font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:4px">
                <span class="enc-toggle-label">+ Add New Imaging Request</span>
                <svg class="enc-toggle-chev w-3 h-3" style="transition:transform .15s;{{ $_imgHasData ? 'transform:rotate(180deg)' : '' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
            </button>
            @endif
        </div>
    </div>
    <div class="enc-section-body" id="imagingSectionBody" style="padding:0;{{ $_imgHasData ? '' : 'display:none' }}">
        <table class="enc-table">
            <thead>
                <tr>
                    <th class="enc-th-left">Imaging Type</th>
                    <th class="enc-th-left">Clinical Indication</th>
                    <th class="enc-th-left">Findings</th>
                    <th>Status</th>
                    @if($canEditImaging)<th style="width:50px">Delete</th>@endif
                </tr>
            </thead>
            <tbody>
                @forelse($visit->imagingRequests as $ir)
                <tr>
                    <td class="enc-td-left">{{ $ir->imaging_type }}</td>
                    <td class="enc-td-left" style="font-size:11.5px;color:#4b5563">{{ $ir->clinical_indication ?? '—' }}</td>
                    <td class="enc-td-left" style="font-size:11.5px">{{ $ir->report ? Str::limit($ir->report->findings, 80) : '—' }}</td>
                    <td><span class="enc-status-pill {{ in_array($ir->status, ['reported','verified'])?'pill-done':'pill-pending' }}">{{ ucfirst($ir->status) }}</span></td>
                    @if($canEditImaging)
                    <td>
                        @if(!in_array($ir->status, ['reported','cancelled','verified']))
                        <form method="POST" action="{{ route('imaging.cancel', $ir) }}"
                              onsubmit="return confirm('Cancel imaging order for {{ addslashes($ir->imaging_type) }}?\n\nThis will remove it from the imaging queue and delete the charge from the bill.')"
                              class="inline">
                            @csrf @method('DELETE')
                            <button type="submit" class="enc-del-btn" title="Cancel imaging order">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </form>
                        @endif
                    </td>
                    @endif
                </tr>
                @empty
                <tr><td colspan="{{ $canEditImaging ? 5 : 4 }}" style="color:#9ca3af;padding:14px">No imaging orders yet.</td></tr>
                @endforelse

                @if($canEditImaging)
                <tr class="enc-search-row">
                    <td colspan="5" class="enc-td-left">
                        <form method="POST" action="{{ route('imaging.request.store') }}" style="display:flex;gap:8px;align-items:center">
                            @csrf
                            <input type="hidden" name="visit_id" value="{{ $visit->id }}">
                            <input type="hidden" name="service_item_id" id="imaging-service-id">
                            <div style="flex:1;position:relative">
                                <input type="text" name="imaging_type" id="imaging-search" placeholder="Search Imaging e.g. Chest X-Ray" autocomplete="off" required
                                       oninput="filterImagingServices(this.value)" onfocus="filterImagingServices(this.value)" style="width:100%">
                                <div id="imaging-dropdown" class="hidden" style="position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 10px 25px rgba(0,0,0,.08);max-height:200px;overflow-y:auto;font-size:12px"></div>
                                <p id="imaging-price-hint" style="font-size:11px;color:#7c3aed;margin-top:2px;font-weight:600"></p>
                            </div>
                            <input type="text" name="clinical_indication" placeholder="Clinical indication..." style="flex:1;padding:6px 10px;border:1px solid #d1d5db;border-radius:4px;font-size:12.5px">
                            <button type="submit" class="enc-btn-primary" style="padding:6px 14px">+ Add</button>
                        </form>
                    </td>
                </tr>
                @endif
            </tbody>
        </table>
    </div>
</div>
@endunless

{{-- ═══ 5. PRESCRIPTIONS ═══ --}}
{{-- Hidden on direct lab / direct radiology encounters: those are walk-in
     test requests, prescriptions belong to a consultation visit. --}}
@unless($isDirect)
<div class="enc-section">
    <div class="enc-section-head">
        <h3><span class="enc-section-num">5</span> Prescriptions</h3>
        <div class="enc-head-actions">
            @if($visit->prescriptions->count())<span class="enc-status-pill pill-info">{{ $visit->prescriptions->count() }} items</span>@endif
        </div>
    </div>
    <div class="enc-section-body" style="padding:0">
        <table class="enc-table">
            <thead>
                <tr>
                    <th class="enc-th-left">Drug</th>
                    <th>Dosage</th>
                    <th>Frequency</th>
                    <th>Route</th>
                    <th>Duration</th>
                    <th>Qty</th>
                    <th>Status</th>
                    @if($canEditPrescriptions)<th style="width:120px">Actions</th>@endif
                </tr>
            </thead>
            <tbody>
                @forelse($visit->prescriptions as $rx)
                @php
                    $rxLocked = in_array($rx->status, ['dispensed','cancelled']);
                    $rxCanEdit = $canEditPrescriptions && !$rxLocked;
                    // How much of this prescription has already been dispensed
                    // (used to: (a) show progress, (b) compute the remainder
                    // the one-tap Dispense button will give out, (c) decide
                    // whether the Dispense button should appear at all).
                    // whereNull('reversed_at') so reversed dispenses correctly
                    // free the prescription up for redispensing.
                    $rxDispensedQty = \App\Models\PharmacyDispense::where('prescription_id', $rx->id)
                        ->whereNull('reversed_at')
                        ->sum('quantity_dispensed');
                    $rxRemainingQty = max(0, ((int) $rx->quantity) - (int) $rxDispensedQty);
                    // Dispense button appears for clinical roles on prescriptions that
                    // are not yet fully dispensed/cancelled and that have a real drug
                    // item linked (a free-text drug has no stock to dispense from).
                    $rxCanDispense = $canEditPrescriptions
                        && !$rxLocked
                        && $rx->drug_item_id
                        && $rxRemainingQty > 0;
                @endphp
                {{-- Display row --}}
                <tr id="rx-row-{{ $rx->id }}">
                    <td class="enc-td-left">{{ $rx->drug_name }}</td>
                    <td>{{ $rx->dosage ?? '—' }}</td>
                    <td>{{ $rx->frequency ?? '—' }}</td>
                    <td>{{ $rx->route ?? '—' }}</td>
                    <td>{{ $rx->duration ?? '—' }}</td>
                    <td>{{ $rx->quantity }}</td>
                    <td>
                        <span class="enc-status-pill {{ $rx->status==='dispensed'?'pill-done':($rx->status==='cancelled'?'pill-pending':'pill-pending') }}">{{ ucfirst(str_replace('_',' ',$rx->status)) }}</span>
                        @if($rxDispensedQty > 0 && !$rxLocked)
                            <div style="font-size:10.5px;color:#92400e;margin-top:3px">{{ $rxDispensedQty }} of {{ $rx->quantity }} dispensed</div>
                        @endif
                    </td>
                    @if($canEditPrescriptions)
                    <td style="white-space:nowrap">
                        @if($rxCanDispense)
                        <form method="POST" action="{{ route('pharmacy.dispense') }}"
                              onsubmit="return confirm('Dispense {{ $rxRemainingQty }} unit(s) of {{ addslashes($rx->drug_name) }} now?\n\nStock will be reduced and the prescription will be marked dispensed.');"
                              class="inline" style="margin-right:2px">
                            @csrf
                            <input type="hidden" name="prescription_id" value="{{ $rx->id }}">
                            <input type="hidden" name="quantity_dispensed" value="{{ $rxRemainingQty }}">
                            <button class="enc-del-btn" title="Dispense {{ $rxRemainingQty }} unit(s)" style="color:#16a34a">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                            </button>
                        </form>
                        @endif
                        @if($rxCanEdit)
                        <button type="button" onclick="document.getElementById('rx-row-{{ $rx->id }}').style.display='none';document.getElementById('rx-edit-{{ $rx->id }}').style.display='';" class="enc-del-btn" title="Edit" style="color:#6b7280">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        </button>
                        @endif
                        {{-- Reverse dispense — Admin, Clinician or Nurse.
                             Shows only when something has actually been dispensed
                             (otherwise there's nothing to reverse). Sends the
                             prescription back to the pharmacy queue; the invoice
                             line stays so redispense just works. To also drop
                             the bill charge, click Delete after reversing. --}}
                        @if(($isAdmin || $isClinical) && $rxDispensedQty > 0 && $rx->status !== 'cancelled')
                        <form method="POST" action="{{ route('prescriptions.reverse-dispense', $rx) }}"
                              onsubmit="return confirm('Reverse the dispensing of {{ addslashes($rx->drug_name) }}?\n\n{{ $rxDispensedQty }} unit(s) will be returned to stock and the prescription will go back to the pharmacy queue.\n\nThe charge stays on the bill — delete the prescription afterwards if you also want to remove the charge.')"
                              class="inline" style="margin-right:2px">
                            @csrf
                            <button class="enc-del-btn" title="Reverse dispense ({{ $rxDispensedQty }} unit(s) back to stock)" style="color:#d97706">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
                            </button>
                        </form>
                        @endif
                        @if($canDeletePrescription && !$rxLocked)
                        <form method="POST" action="{{ route('prescriptions.cancel', $rx) }}"
                              onsubmit="return confirm('Delete prescription for {{ addslashes($rx->drug_name) }}?\n\nThis will remove it from the pharmacy queue and delete the charge from the bill.')"
                              class="inline">
                            @csrf @method('DELETE')
                            <button class="enc-del-btn" title="Delete"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button>
                        </form>
                        @endif
                    </td>
                    @endif
                </tr>
                {{-- Inline edit row (hidden by default) --}}
                @if($rxCanEdit)
                @php
                    $rxDispensed = $rxDispensedQty;
                @endphp
                <tr id="rx-edit-{{ $rx->id }}" class="enc-search-row" style="display:none">
                    <td colspan="8" class="enc-td-left">
                        <form method="POST" action="{{ route('prescriptions.update', $rx) }}">
                            @csrf @method('PATCH')
                            <div style="font-size:11px;font-weight:600;color:#5c1269;margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px">
                                ✎ Editing: {{ $rx->drug_name }}
                                <span style="color:#6b7280;font-weight:500;text-transform:none;margin-left:10px">
                                    Drug &amp; price cannot be changed. Delete and re-prescribe if needed.
                                </span>
                            </div>
                            @if($rxDispensed > 0)
                            <div style="background:#fffbeb;border:1px solid #fcd34d;border-radius:6px;padding:8px 12px;margin-bottom:10px;font-size:12px;color:#92400e">
                                <strong>⚠ Partially dispensed:</strong> {{ $rxDispensed }} of {{ $rx->quantity }} unit(s) already given.
                                Minimum new quantity is <strong>{{ $rxDispensed }}</strong>
                                (set qty to {{ $rxDispensed }} to close this prescription out).
                            </div>
                            @endif
                            <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr 80px;gap:8px;align-items:end">
                                <div>
                                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:3px">Dosage</label>
                                    <input type="text" name="dosage" value="{{ $rx->dosage }}" placeholder="500mg" style="width:100%">
                                </div>
                                <div>
                                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:3px">Frequency</label>
                                    <select name="frequency" style="width:100%">
                                        <option value="">—</option>
                                        @foreach(['OD','BD','TDS','QID','PRN','STAT','Nocte'] as $f)
                                        <option value="{{ $f }}" {{ $rx->frequency === $f ? 'selected' : '' }}>{{ $f }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:3px">Route</label>
                                    <select name="route" style="width:100%">
                                        <option value="">—</option>
                                        @foreach(\App\Models\Prescription::ROUTES as $rVal => $rLabel)
                                        <option value="{{ $rVal }}" {{ $rx->route === $rVal ? 'selected' : '' }}>{{ $rLabel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:3px">Duration</label>
                                    <input type="text" name="duration" value="{{ $rx->duration }}" placeholder="5 days" style="width:100%">
                                </div>
                                <div>
                                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:3px">
                                        Qty @if($rxDispensed > 0)<span style="color:#d97706">(min {{ $rxDispensed }})</span>@endif
                                    </label>
                                    <input type="number" name="quantity" value="{{ $rx->quantity }}" min="{{ max(1, $rxDispensed) }}" required style="width:100%;text-align:center">
                                </div>
                            </div>
                            <div style="margin-top:8px">
                                <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:3px">Instructions</label>
                                <input type="text" name="instructions" value="{{ $rx->instructions }}" placeholder="e.g. after meals; with water" style="width:100%">
                            </div>
                            <div style="display:flex;gap:8px;margin-top:10px">
                                <button type="submit" class="enc-btn-primary">Save Changes</button>
                                <button type="button" onclick="document.getElementById('rx-row-{{ $rx->id }}').style.display='';document.getElementById('rx-edit-{{ $rx->id }}').style.display='none';" class="enc-btn-cancel">Cancel</button>
                            </div>
                        </form>
                    </td>
                </tr>
                @endif
                @empty
                <tr><td colspan="{{ $canEditPrescriptions ? 8 : 7 }}" style="color:#9ca3af;padding:14px">No prescriptions yet.</td></tr>
                @endforelse

                @if($canEditPrescriptions)
                <tr class="enc-search-row">
                    <td colspan="8" class="enc-td-left">
                        <form method="POST" action="{{ route('prescriptions.store') }}" id="prescribe-form" style="display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start">
                            @csrf
                            <input type="hidden" name="visit_id" value="{{ $visit->id }}">
                            <input type="hidden" name="patient_id" value="{{ $visit->patient_id }}">
                            <input type="hidden" name="drug_item_id" id="drug-item-id">
                            <input type="hidden" name="drug_name" id="drug-name-hidden">
                            <div style="flex:1;min-width:200px;position:relative">
                                <input type="text" id="drug-search" placeholder="Search drug..." autocomplete="off" required
                                       oninput="filterDrugs(this.value)" onfocus="filterDrugs(this.value)" style="width:100%">
                                <div id="drug-dropdown" class="hidden" style="position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 10px 25px rgba(0,0,0,.08);max-height:200px;overflow-y:auto;font-size:12px"></div>
                                <p id="drug-price-hint" style="font-size:11px;color:#16a34a;margin-top:2px;font-weight:600"></p>
                            </div>
                            <input type="text" name="dosage" placeholder="500mg" style="width:90px;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:12.5px">
                            <select name="frequency" style="width:80px;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:12.5px">
                                <option>OD</option><option>BD</option><option>TDS</option><option>QID</option>
                                <option>PRN</option><option>STAT</option><option>Nocte</option>
                            </select>
                            <select name="route_of_admin" style="width:90px;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:12.5px">
                                @foreach(\App\Models\Prescription::ROUTES as $rVal => $rLabel)
                                <option value="{{ $rVal }}" {{ $rVal === 'PO' ? 'selected' : '' }}>{{ $rVal }}</option>
                                @endforeach
                            </select>
                            <input type="text" name="duration" placeholder="5 days" style="width:90px;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:12.5px">
                            <div style="width:75px">
                                <input type="number" name="quantity" id="prescribe-qty" value="1" min="1" oninput="checkPrescribeQty()" style="width:100%;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:12.5px;text-align:center">
                                <p id="qty-hint" style="font-size:10.5px;margin-top:2px;line-height:1.25;min-height:14px"></p>
                            </div>
                            <button type="submit" id="prescribe-btn" class="enc-btn-primary" style="padding:6px 14px">+ Prescribe</button>
                        </form>
                    </td>
                </tr>
                @endif
            </tbody>
        </table>
    </div>
</div>
@endunless

{{-- ═══ 6. PRODUCTS / SERVICES (BILLING) ═══ --}}
<div class="enc-section">
    <div class="enc-section-head">
        <h3>@unless($isDirect)<span class="enc-section-num">6</span> @endunless Products / Services</h3>
        <div class="enc-head-actions">
            @if($canEditBilling)<button type="button" onclick="addBillingRow()" class="enc-btn-teal">+ Add Row</button>@endif
        </div>
    </div>
    <div class="enc-section-body" style="padding:0">
        <table class="enc-table" id="billingTable">
            <thead>
                <tr>
                    <th class="enc-th-left" style="min-width:200px">Product or Service</th>
                    <th class="enc-th-left">Instructions</th>
                    <th style="width:70px">Existing Qty</th>
                    <th style="width:60px">Qty</th>
                    <th style="width:100px">Unit Selling Price</th>
                    <th style="width:100px">Total</th>
                    @if($canEditBilling)<th style="width:50px">Delete</th>@endif
                </tr>
            </thead>
            <tbody id="billingItems">
                @if($visit->invoice && $visit->invoice?->items->count())
                    @foreach($visit->invoice?->items as $item)
                    @php $isEditable = $canEditBilling && $item->source_type !== 'prescription'; @endphp
                    <tr class="existing-row" id="bill-row-{{ $item->id }}">
                        <td class="enc-td-left">{{ $item->description }}</td>
                        <td class="enc-td-left" style="color:#6b7280">{{ $item->notes ?? '—' }}</td>
                        <td style="color:#9ca3af">—</td>
                        <td>
                            @if($isEditable)
                                <input type="number" class="bill-qty-input" min="1" step="1"
                                    value="{{ $item->quantity }}" data-item-id="{{ $item->id }}" data-field="quantity"
                                    onchange="updateBillItem({{ $item->id }}, this)">
                            @else
                                {{ $item->quantity }}
                            @endif
                        </td>
                        <td class="enc-td-right">
                            @if($isEditable)
                                <input type="number" class="bill-price-input" min="0" step="0.01"
                                    value="{{ $item->unit_price }}" data-item-id="{{ $item->id }}" data-field="unit_price"
                                    onchange="updateBillItem({{ $item->id }}, this)">
                            @else
                                {{ number_format($item->unit_price) }}
                            @endif
                        </td>
                        <td class="enc-td-right" id="bill-total-{{ $item->id }}" style="font-weight:700">{{ number_format($item->total) }}</td>
                        @if($canEditBilling)
                        <td>
                            @if($item->source_type === 'prescription')
                                {{-- Pharmacy items are managed from the Prescriptions section to keep both sides in sync --}}
                                <span title="Pharmacy item — edit from Prescriptions section" style="color:#d1d5db;font-size:11px">🔒</span>
                            @elseif(auth()->user()->hasAnyRole('Receptionist','Triage Nurse','Clinician','Nurse','Hospital Admin','Super Admin'))
                            <form method="POST" action="{{ route('billing.item.void', $item) }}" onsubmit="return confirm('Remove {{ addslashes($item->description) }} (KES {{ number_format($item->total) }}) from this invoice?');" class="inline">
                                @csrf @method('DELETE')
                                <button type="submit" class="enc-del-btn" title="Void item"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button>
                            </form>
                            @endif
                        </td>
                        @endif
                    </tr>
                    @endforeach
                @endif
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="{{ $canEditBilling ? 5 : 4 }}" style="text-align:right;font-weight:700">Total</td>
                    <td class="enc-td-right" id="grandTotal" style="font-weight:700">{{ number_format($visit->invoice?->total_amount ?? 0) }}</td>
                    @if($canEditBilling)<td></td>@endif
                </tr>
            </tfoot>
        </table>
    </div>
</div>

{{-- ═══ 7. PAYMENTS ═══ --}}
<div class="enc-section">
    <div class="enc-section-head">
        <h3>@unless($isDirect)<span class="enc-section-num">7</span> @endunless Payments</h3>
    </div>
    <div class="enc-section-body">
        @include('partials._payment-section', ['visit' => $visit])
    </div>
</div>

</div> {{-- /.enc-page --}}


{{-- ═══ STICKY BOTTOM ACTION BAR (preserved exactly as before) ═══ --}}
@if(!in_array($visit->status, ['completed', 'cancelled', 'discharged']))
@php
    if ($visit->invoice) {
        $opdFreshTotal = $visit->invoice->items()->sum(\DB::raw('quantity * unit_price'));
        $opdFreshPaid  = $visit->invoice->payments()->where('status', 'completed')->sum('amount');
        $opdBalance    = max(0, $opdFreshTotal - $opdFreshPaid);
    } else {
        $opdBalance = 0;
    }
@endphp
<div class="no-print fixed bottom-0 left-0 right-0 lg:left-60 bg-white border-t border-gray-200 px-5 py-3 z-20 flex flex-wrap items-center gap-3 shadow-lg">
    @if(auth()->user()->hasAnyRole('Super Admin', 'Hospital Admin'))
    <form method="POST" action="{{ route('visits.cancel', $visit) }}">@csrf
        <button type="submit" class="text-xs px-4 py-1.5 rounded border border-red-300 text-red-600 bg-red-50 hover:bg-red-100 font-medium" onclick="return confirm('Cancel this visit? This will mark it as cancelled and remove it from active queues.')">Cancel</button>
    </form>
    @endif

    @if($opdBalance > 0)
        <button disabled class="btn-danger text-xs px-4 opacity-50 cursor-not-allowed" title="Clear bill first (KES {{ number_format($opdBalance) }} outstanding)">Admit Patient</button>
    @else
        <form method="POST" action="{{ route('visits.convert-admission', $visit) }}">@csrf
            <button type="submit" class="btn-danger text-xs px-4" onclick="return confirm('Admit this patient? OPD bill is cleared.')">Admit Patient</button>
        </form>
    @endif

    <button type="button" onclick="document.getElementById('appt-modal').style.display='flex'" class="btn-secondary text-xs px-4">Book Appointment</button>

    <div class="flex-1"></div>

    @if($opdBalance > 0)<span class="text-xs text-red-500 hidden md:inline">Balance: KES {{ number_format($opdBalance) }}</span>@endif
    <span class="text-xs text-gray-400 hidden md:inline">{{ $visit->visit_number }}</span>

    <div class="relative" id="save-wrap">
        <button type="button" onclick="document.getElementById('save-menu').classList.toggle('hidden')" class="btn-primary text-xs px-4">Save ▾</button>
        <div id="save-menu" class="hidden absolute bottom-full mb-1 right-0 bg-white border border-gray-200 rounded-lg shadow-xl py-1 w-44 z-50">
            <form method="POST" action="{{ route('visits.update-status', $visit) }}">@csrf
                <input type="hidden" name="status" value="{{ $visit->status }}">
                <button type="submit" class="w-full text-left px-4 py-2.5 text-xs hover:bg-blue-50 text-gray-700 font-semibold border-b border-gray-100">Save</button>
            </form>
            <p class="px-4 py-1 text-xs text-gray-400 uppercase">Save & Send To</p>
            @foreach(['at_lab'=>'Laboratory','at_radiology'=>'Radiology','at_pharmacy'=>'Pharmacy','awaiting_review'=>'Reception','at_dentist'=>'Dentist'] as $st => $label)
            <form method="POST" action="{{ route('visits.update-status', $visit) }}">@csrf
                <input type="hidden" name="status" value="{{ $st }}">
                <button type="submit" class="w-full text-left px-4 py-2 text-xs hover:bg-blue-50 text-gray-700">{{ $label }}</button>
            </form>
            @endforeach
        </div>
    </div>

    @if($opdBalance > 0)
        <button disabled class="btn-success text-xs px-5 opacity-50 cursor-not-allowed" title="Clear bill first">Complete Visit</button>
    @else
        @php
            $pendingLabCount = $visit->labOrders->whereNotIn('status',['validated','cancelled','rejected'])->count();
            $pendingRxCount  = $visit->prescriptions->whereNotIn('status',['dispensed','cancelled'])->count();
            $hasPendingItems = ($pendingLabCount + $pendingRxCount) > 0;
        @endphp

        @if($hasPendingItems)
        <div class="bg-amber-50 border border-amber-300 rounded-lg px-3 py-2 text-xs text-amber-800 mb-2 max-w-xs" id="pendingItemsWarning">
            <p class="font-semibold mb-1">⚠ Pending items before completion:</p>
            @if($pendingLabCount)<p>• {{ $pendingLabCount }} lab order(s) not yet validated</p>@endif
            @if($pendingRxCount)<p>• {{ $pendingRxCount }} prescription(s) not yet dispensed</p>@endif
            <label class="flex items-center gap-1.5 mt-2 cursor-pointer font-semibold text-amber-900">
                <input type="checkbox" id="forceCompleteAck" class="w-3.5 h-3.5">
                I acknowledge and wish to complete anyway
            </label>
        </div>
        @endif

        <div class="relative" id="complete-wrap">
            <button type="button"
                @if($hasPendingItems) id="completeDropdownBtn" disabled @endif
                onclick="document.getElementById('complete-menu').classList.toggle('hidden')"
                class="btn-success text-xs px-5 @if($hasPendingItems) opacity-50 cursor-not-allowed @endif"
                id="completeMainBtn">Complete ▾</button>
            <div id="complete-menu" class="hidden absolute bottom-full mb-1 right-0 bg-white border border-gray-200 rounded-lg shadow-xl py-1 w-56 z-50">
                <form method="POST" action="{{ route('visits.complete', $visit) }}" id="completeForm1">@csrf
                    <input type="hidden" name="force_complete" id="forceField1" value="0">
                    <button type="submit" class="w-full text-left px-4 py-2 text-xs hover:bg-green-50 text-gray-700">Complete Visit</button>
                </form>
                <form method="POST" action="{{ route('visits.complete', $visit) }}" id="completeForm2">@csrf
                    <input type="hidden" name="force_complete" id="forceField2" value="0">
                    <input type="hidden" name="print_receipt" value="1">
                    <button type="submit" class="w-full text-left px-4 py-2 text-xs hover:bg-green-50 text-gray-700">Complete & Print Receipt</button>
                </form>
            </div>
        </div>

        @if($hasPendingItems)
        <script>
        document.getElementById('forceCompleteAck')?.addEventListener('change', function() {
            const btn  = document.getElementById('completeMainBtn');
            const f1   = document.getElementById('forceField1');
            const f2   = document.getElementById('forceField2');
            if (this.checked) {
                btn.disabled = false;
                btn.classList.remove('opacity-50','cursor-not-allowed');
                btn.onclick = function(){ document.getElementById('complete-menu').classList.toggle('hidden'); };
                if (f1) f1.value = '1'; if (f2) f2.value = '1';
            } else {
                btn.disabled = true;
                btn.classList.add('opacity-50','cursor-not-allowed');
                btn.onclick = null;
                if (f1) f1.value = '0'; if (f2) f2.value = '0';
            }
        });
        </script>
        @endif
    @endif
</div>
<div class="h-16"></div>

{{-- Appointment Modal --}}
<div id="appt-modal" class="fixed inset-0 bg-black/30 z-50 flex items-center justify-center" style="display:none">
    <div class="bg-white rounded-xl p-6 w-[420px] shadow-xl">
        <h4 class="text-sm font-bold mb-3">Book Follow-up Appointment</h4>
        <form method="POST" action="{{ route('appointments.store') }}">@csrf
            <input type="hidden" name="patient_id" value="{{ $visit->patient_id }}">
            <input type="hidden" name="department_id" value="{{ $visit->department_id }}">
            <input type="hidden" name="type" value="revisit">
            <div class="space-y-3">
                <div><label class="form-label">Date <span class="text-red-500">*</span></label><input type="date" name="appointment_date" required min="{{ date('Y-m-d') }}" class="form-input no-flatpickr"></div>
                <div><label class="form-label">Time</label><input type="time" name="appointment_time" class="form-input"></div>
                <div><label class="form-label">Reason</label><input type="text" name="reason" class="form-input" placeholder="Follow-up, Review results..."></div>
                <div><label class="form-label">Notes</label><input type="text" name="notes" class="form-input" placeholder="Optional..."></div>
            </div>
            <div class="flex gap-2 mt-4">
                <button type="submit" class="btn-primary text-xs">Book Appointment</button>
                <button type="button" onclick="document.getElementById('appt-modal').style.display='none'" class="btn-secondary text-xs">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endif
@stack('scripts')
@endsection


{{-- ═══════════════════════════════════════════════════════════════════════
     SCRIPTS — preserved exactly from original visits/show.blade.php
     (only minor selector changes for billing inputs)
═══════════════════════════════════════════════════════════════════════ --}}
@section('scripts')
<script>
function autoExpand(el) {
    el.style.height = 'auto';
    const minH = parseInt(el.style.minHeight) || 40;
    el.style.height = Math.max(minH, el.scrollHeight) + 'px';
}
document.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('textarea.auto-expand').forEach(autoExpand);
});

document.addEventListener('click',e=>{
    if(!e.target.closest('#save-wrap'))document.getElementById('save-menu')?.classList.add('hidden');
    if(!e.target.closest('#complete-wrap'))document.getElementById('complete-menu')?.classList.add('hidden');
});

function togglePaySubOptions(method){
    document.querySelectorAll('.pay-sub').forEach(el=>el.style.display='none');
    if(method==='insurance') document.querySelectorAll('.pay-sub-insurance').forEach(el=>el.style.display='');
    if(method==='mpesa') document.querySelectorAll('.pay-sub-mpesa').forEach(el=>el.style.display='');
}
function toggleVisitPaySub(method){
    document.getElementById('visit-pay-sub-mpesa').style.display = method === 'mpesa' ? '' : 'none';
    document.getElementById('visit-pay-sub-insurance').style.display = method === 'insurance' ? '' : 'none';
}
function validatePayForm(){
    const amt = document.querySelector('#pay-form-opd [name="amount"]');
    if(!amt || !amt.value || parseFloat(amt.value) < 1){
        amt.classList.add('border-red-500','bg-red-50');
        amt.focus();
        amt.insertAdjacentHTML('afterend','<p class="pay-err text-xs text-red-600 mt-0.5">Amount is required (min 1)</p>');
        return false;
    }
    document.querySelectorAll('.pay-err').forEach(e=>e.remove());
    amt.classList.remove('border-red-500','bg-red-50');
    return true;
}

// ═══ DYNAMIC BILLING ROWS ═══
@if(!$readOnly)
(function(){
    const services = {!! $serviceListJson !!};
    const invoiceId = '{{ $visit->invoice?->id ?? '' }}';
    const visitId = '{{ $visit->id }}';
    const csrfToken = '{{ csrf_token() }}';
    const chargeUrl = '{{ route("billing.charge") }}';
    let rowCounter = 0;

    function createRow() {
        rowCounter++;
        const id = 'brow_' + rowCounter;
        const tr = document.createElement('tr');
        tr.className = 'entry-row enc-search-row';
        tr.id = id;
        tr.innerHTML = `
            <td class="enc-td-left" style="position:relative">
                <input type="text" class="billing-search" placeholder="Search product or service..." autocomplete="off"
                    onfocus="showSuggestions(this)" oninput="filterSuggestions(this)" data-row="${id}" style="width:100%">
                <div class="billing-dropdown hidden" style="position:absolute;z-index:50;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 10px 25px rgba(0,0,0,.08);max-height:200px;overflow-y:auto;font-size:12px"></div>
            </td>
            <td class="enc-td-left"><input type="text" class="billing-cat" placeholder="Category" data-row="${id}" readonly tabindex="-1" style="width:100%"></td>
            <td style="color:#9ca3af">0</td>
            <td><input type="number" class="billing-qty" value="1" min="1" data-row="${id}" oninput="calcRowTotal('${id}')"></td>
            <td class="enc-td-right"><input type="number" step="0.01" class="billing-price" placeholder="0" data-row="${id}" oninput="calcRowTotal('${id}')"></td>
            <td class="enc-td-right"><span class="billing-total" data-row="${id}" style="font-weight:700">0</span></td>
            <td style="text-align:center;white-space:nowrap">
                <button type="button" onclick="commitRow('${id}')" class="billing-save-btn hidden" style="background:#16a34a;color:#fff;padding:4px 10px;border:none;border-radius:4px;font-size:11.5px;font-weight:600;cursor:pointer" title="Save to bill">Save</button>
                <button type="button" onclick="removeBillingRow('${id}')" class="enc-del-btn" title="Remove">&times;</button>
            </td>`;
        return tr;
    }

    window.addEventListener('DOMContentLoaded', function() {
        const tbody = document.getElementById('billingItems');
        if (!tbody) return;
        tbody.appendChild(createRow());
    });

    window.addBillingRow = function() {
        document.getElementById('billingItems').appendChild(createRow());
    };

    window.removeBillingRow = function(rowId) {
        const rows = document.querySelectorAll('#billingItems .entry-row');
        if (rows.length <= 1) {
            const row = document.getElementById(rowId);
            row.querySelector('.billing-search').value = '';
            row.querySelector('.billing-cat').value = '';
            row.querySelector('.billing-qty').value = '1';
            row.querySelector('.billing-price').value = '';
            row.querySelector('.billing-total').textContent = '0';
            row.querySelector('.billing-search').removeAttribute('data-sid');
            row.querySelector('.billing-save-btn').classList.add('hidden');
            return;
        }
        document.getElementById(rowId)?.remove();
    };

    window.showSuggestions = function(input) {
        const dd = input.nextElementSibling;
        renderDropdown(dd, input.value);
        dd.classList.remove('hidden');
    };

    window.filterSuggestions = function(input) {
        const dd = input.nextElementSibling;
        renderDropdown(dd, input.value);
        dd.classList.remove('hidden');
    };

    function renderDropdown(dd, query) {
        const q = (query || '').toLowerCase();
        const filtered = q.length < 1 ? services.slice(0, 20) : services.filter(s =>
            s.name.toLowerCase().includes(q) || (s.code && s.code.toLowerCase().includes(q)) || s.category.toLowerCase().includes(q)
        ).slice(0, 15);

        if (!filtered.length) {
            dd.innerHTML = '<div style="padding:8px 12px;color:#9ca3af">No matches.</div>';
            return;
        }
        dd.innerHTML = filtered.map(s => `
            <div style="padding:8px 12px;cursor:pointer;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between"
                 onmouseover="this.style.background='#f0f9ff'" onmouseout="this.style.background='transparent'"
                 onclick="selectService(this, ${s.id}, '${s.name.replace(/'/g,"\\'")}', '${s.category}', ${s.price})">
                <span><span style="font-family:ui-monospace,monospace;color:#9ca3af;margin-right:4px">${s.code || ''}</span> ${s.name}</span>
                <span style="color:#9ca3af">KES ${Number(s.price).toLocaleString()}</span>
            </div>`).join('');
    }

    window.selectService = function(el, id, name, category, price) {
        const dd = el.closest('.billing-dropdown');
        const td = dd.closest('td');
        const input = td.querySelector('.billing-search');
        const rowId = input.dataset.row;
        const row = document.getElementById(rowId);

        const existing = document.querySelectorAll('#billingItems .billing-search[data-sid="' + id + '"]');
        if (existing.length > 0) {
            if (!confirm(name + ' is already in the bill. Add another?')) { dd.classList.add('hidden'); return; }
        }

        input.value = name;
        input.dataset.sid = id;
        row.querySelector('.billing-cat').value = category;
        row.querySelector('.billing-price').value = price;
        calcRowTotal(rowId);
        dd.classList.add('hidden');

        row.querySelector('.billing-save-btn').classList.remove('hidden');

        const qtyInput = row.querySelector('.billing-qty');
        qtyInput.focus();
        qtyInput.select();
    };

    window.calcRowTotal = function(rowId) {
        const row = document.getElementById(rowId);
        if (!row) return;
        const qty = parseFloat(row.querySelector('.billing-qty').value) || 0;
        const price = parseFloat(row.querySelector('.billing-price').value) || 0;
        row.querySelector('.billing-total').textContent = (qty * price).toLocaleString();
    };

    window.commitRow = function(rowId) {
        const row = document.getElementById(rowId);
        if (!row) return;
        const input = row.querySelector('.billing-search');
        const description = input.value.trim();
        const serviceId = input.dataset.sid || '';
        const category = row.querySelector('.billing-cat').value || 'General';
        const qty = parseInt(row.querySelector('.billing-qty').value) || 1;
        const price = parseFloat(row.querySelector('.billing-price').value) || 0;

        if (!description) { alert('Please select or type a service name.'); input.focus(); return; }
        if (price <= 0) { alert('Unit price must be greater than zero.'); row.querySelector('.billing-price').focus(); return; }

        const saveBtn = row.querySelector('.billing-save-btn');
        saveBtn.disabled = true;
        saveBtn.textContent = 'Saving…';
        saveBtn.style.opacity = '0.5';

        const formData = new FormData();
        formData.append('_token', csrfToken);
        formData.append('invoice_id', invoiceId);
        formData.append('visit_id', visitId);
        formData.append('description', description);
        formData.append('category', category);
        formData.append('quantity', qty);
        formData.append('unit_price', price);
        if (serviceId) formData.append('service_item_id', serviceId);

        fetch(chargeUrl, {
            method: 'POST', body: formData,
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
        .then(async r => {
            let data = {};
            try { data = await r.json(); } catch (e) { data = {}; }
            if (r.ok && data.success) { location.reload(); return; }
            // Surface the ACTUAL reason instead of a generic message.
            //  • 403 → visit is closed/locked (VisitLockService message)
            //  • 422 → validation errors (description / price / quantity)
            let msg = data.message || 'Failed to save. Please try again.';
            if (data.errors) { msg = Object.values(data.errors).flat().join('\n'); }
            if (r.status === 419) { msg = 'Your session expired. Please refresh the page and sign in again.'; }
            saveBtn.disabled = false; saveBtn.textContent = 'Save'; saveBtn.style.opacity = '1';
            alert(msg);
        })
        .catch(() => { saveBtn.disabled = false; saveBtn.textContent = 'Save'; saveBtn.style.opacity = '1'; alert('Network error. Please try again.'); });
    };

    document.addEventListener('click', function(e) {
        if (!e.target.closest('.billing-search') && !e.target.closest('.billing-dropdown')) {
            document.querySelectorAll('.billing-dropdown').forEach(d => d.classList.add('hidden'));
        }
    });
})();
@endif


// ═══ SEARCH BARS FOR LAB, IMAGING, DRUGS ═══
const _labTests = {!! $labTestsJson ?? '[]' !!};
const _imagingSvcs = {!! $imagingJson ?? '[]' !!};
const _drugItems = {!! $drugsJson ?? '[]' !!};

function makeDropdownItem(text, sub, price, idx) {
    return `<div class="dd-item" data-idx="${idx}" style="padding:8px 12px;cursor:pointer;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between"
        onmouseover="this.style.background='#f0f9ff'" onmouseout="this.style.background='transparent'">
        <span><span style="font-weight:500">${text}</span>${sub ? '<span style="color:#9ca3af;margin-left:4px">'+sub+'</span>' : ''}</span>
        <span style="color:#6b7280;font-family:ui-monospace,monospace">KES ${Number(price).toLocaleString()}</span>
    </div>`;
}

function filterLabTests(q) {
    const dd = document.getElementById('lab-dropdown');
    if (q.length < 1) { dd.classList.add('hidden'); return; }
    const items = _labTests.filter(t => t.name.toLowerCase().includes(q.toLowerCase()) || (t.code||'').toLowerCase().includes(q.toLowerCase()) || (t.category||'').toLowerCase().includes(q.toLowerCase()));
    dd.innerHTML = items.slice(0, 15).map((t, i) => makeDropdownItem(t.name, t.category, t.price, i)).join('');
    dd.querySelectorAll('.dd-item').forEach(el => { el.onclick = function(e) { e.stopPropagation(); selectLabTest(items[parseInt(this.dataset.idx)]); }; });
    dd.classList.toggle('hidden', items.length === 0);
}
function selectLabTest(t) {
    document.getElementById('lab-test-id').value = t.id;
    document.getElementById('lab-search').value = t.name;
    document.getElementById('lab-price-hint').textContent = t.category + ' · KES ' + Number(t.price).toLocaleString();
    document.getElementById('lab-dropdown').classList.add('hidden');
}

function filterImagingServices(q) {
    const dd = document.getElementById('imaging-dropdown');
    if (q.length < 1) { dd.classList.add('hidden'); return; }
    const items = _imagingSvcs.filter(s => s.name.toLowerCase().includes(q.toLowerCase()) || (s.code||'').toLowerCase().includes(q.toLowerCase()));
    dd.innerHTML = items.slice(0, 15).map((s, i) => makeDropdownItem(s.name, '', s.price, i)).join('');
    dd.querySelectorAll('.dd-item').forEach(el => { el.onclick = function(e) { e.stopPropagation(); selectImagingService(items[parseInt(this.dataset.idx)]); }; });
    dd.classList.toggle('hidden', items.length === 0);
}
function selectImagingService(s) {
    document.getElementById('imaging-service-id').value = s.id;
    document.getElementById('imaging-search').value = s.name;
    document.getElementById('imaging-price-hint').textContent = 'KES ' + Number(s.price).toLocaleString();
    document.getElementById('imaging-dropdown').classList.add('hidden');
}

function filterDrugs(q) {
    const dd = document.getElementById('drug-dropdown');
    if (q.length < 1) { dd.classList.add('hidden'); return; }
    const items = _drugItems.filter(d => d.name.toLowerCase().includes(q.toLowerCase()) || (d.generic_name||'').toLowerCase().includes(q.toLowerCase()));
    dd.innerHTML = items.slice(0, 15).map((d, i) => makeDrugDropdownItem(d, i)).join('');
    dd.querySelectorAll('.dd-item').forEach(el => {
        el.onclick = function(e) {
            e.stopPropagation();
            const drug = items[parseInt(this.dataset.idx)];
            // Don't let an out-of-stock drug be picked at all.
            if ((drug.available || 0) <= 0) {
                alert(drug.name + ' is currently out of stock and cannot be prescribed.');
                return;
            }
            selectDrug(drug);
        };
    });
    dd.classList.toggle('hidden', items.length === 0);
}

// Custom dropdown row builder for drugs — adds a stock badge on the right.
function makeDrugDropdownItem(d, i) {
    const sub = d.generic_name || '';
    const price = d.price ? Number(d.price).toLocaleString() : '0';
    const avail = d.available || 0;

    let badge;
    if (avail <= 0) {
        badge = '<span style="background:#fee2e2;color:#991b1b;font-size:10.5px;padding:2px 7px;border-radius:10px;font-weight:600">Out of stock</span>';
    } else if (d.is_low) {
        badge = '<span style="background:#fef3c7;color:#92400e;font-size:10.5px;padding:2px 7px;border-radius:10px;font-weight:600">Low: ' + avail + '</span>';
    } else {
        badge = '<span style="background:#dcfce7;color:#166534;font-size:10.5px;padding:2px 7px;border-radius:10px;font-weight:600">' + avail + ' in stock</span>';
    }

    const dimmed = (avail <= 0) ? 'opacity:.55;cursor:not-allowed' : 'cursor:pointer';
    return `<div class="dd-item" data-idx="${i}" style="padding:7px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #f3f4f6;${dimmed}">
        <div style="min-width:0;flex:1">
            <div style="font-weight:600;color:#1f2937;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${d.name}</div>
            ${sub ? `<div style="font-size:11px;color:#6b7280">${sub}</div>` : ''}
        </div>
        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0">
            <span style="font-size:11px;color:#16a34a;font-weight:600">KES ${price}</span>
            ${badge}
        </div>
    </div>`;
}

function selectDrug(d) {
    document.getElementById('drug-item-id').value = d.id;
    document.getElementById('drug-name-hidden').value = d.name;
    document.getElementById('drug-search').value = d.name;
    document.getElementById('drug-search').dataset.available = d.available || 0;
    document.getElementById('drug-search').dataset.isLow = d.is_low ? '1' : '0';
    document.getElementById('drug-price-hint').textContent = (d.generic_name ? d.generic_name + ' · ' : '') + 'KES ' + Number(d.price).toLocaleString();

    // Cap the qty input to what's actually available; reset value if needed.
    const qtyInput = document.getElementById('prescribe-qty');
    qtyInput.max = d.available || 0;
    if (parseInt(qtyInput.value) > (d.available || 0) || parseInt(qtyInput.value) < 1) {
        qtyInput.value = Math.min(1, d.available || 0) > 0 ? 1 : 0;
    }
    document.getElementById('drug-dropdown').classList.add('hidden');
    checkPrescribeQty();
}

// Live validation of the qty field against the selected drug's availability.
// Updates the small hint under the qty input and disables the Prescribe button
// when the requested qty exceeds available stock.
function checkPrescribeQty() {
    const search   = document.getElementById('drug-search');
    const qtyInput = document.getElementById('prescribe-qty');
    const hint     = document.getElementById('qty-hint');
    const btn      = document.getElementById('prescribe-btn');
    const avail    = parseInt(search.dataset.available || '0', 10);
    const isLow    = search.dataset.isLow === '1';
    const wanted   = parseInt(qtyInput.value || '0', 10);

    // No drug picked yet — clear hint, leave button enabled (server still validates).
    if (!document.getElementById('drug-item-id').value) {
        hint.textContent = '';
        btn.disabled = false;
        btn.style.opacity = '';
        return;
    }

    if (avail <= 0) {
        hint.innerHTML = '<span style="color:#991b1b;font-weight:600">Out of stock</span>';
        btn.disabled = true;
        btn.style.opacity = '.55';
        return;
    }
    if (wanted > avail) {
        hint.innerHTML = `<span style="color:#991b1b;font-weight:600">Only ${avail} available — cannot prescribe ${wanted}</span>`;
        btn.disabled = true;
        btn.style.opacity = '.55';
        return;
    }
    if (isLow) {
        hint.innerHTML = `<span style="color:#92400e;font-weight:600">⚠ Low stock · ${avail} left</span>`;
    } else {
        hint.innerHTML = `<span style="color:#16a34a;font-weight:600">✓ ${avail} in stock</span>`;
    }
    btn.disabled = false;
    btn.style.opacity = '';
}

document.addEventListener('click', function(e) {
    ['lab-dropdown','imaging-dropdown','drug-dropdown'].forEach(id => {
        const dd = document.getElementById(id);
        if (dd && !dd.parentElement.contains(e.target)) dd.classList.add('hidden');
    });
});

function updateBillItem(itemId, inputEl) {
    const row = document.getElementById('bill-row-' + itemId);
    const qtyEl   = row ? row.querySelector('.bill-qty-input')   : null;
    const priceEl = row ? row.querySelector('.bill-price-input') : null;
    const qty   = qtyEl   ? parseFloat(qtyEl.value)   : null;
    const price = priceEl ? parseFloat(priceEl.value) : null;
    if (qty === null || price === null || isNaN(qty) || isNaN(price)) return;
    fetch('{{ url("/billing/item") }}/' + itemId, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content },
        body: JSON.stringify({ quantity: qty, unit_price: price })
    })
    .then(r => r.json())
    .then(data => {
        if (data.ok) {
            const totalEl = document.getElementById('bill-total-' + itemId);
            if (totalEl) totalEl.textContent = Number(data.total).toLocaleString('en-KE', {minimumFractionDigits:0, maximumFractionDigits:0});
            const grandEl = document.getElementById('grandTotal');
            if (grandEl) grandEl.textContent = Number(data.invoice_total).toLocaleString('en-KE', {minimumFractionDigits:0, maximumFractionDigits:0});
        }
    })
    .catch(() => {});
}

/**
 * Encounter section collapse / expand toggle.
 *
 * Used by the Lab and Imaging section headers to show or hide their
 * containers on demand. Sections start collapsed when the visit has no
 * orders for that section, and start expanded when there are existing
 * orders/results (so the clinician sees what's there without an extra
 * click). The button text stays "+ Add New ..." in both states — that's
 * how the user gets back into the section to add another row — and the
 * chevron icon rotates to reflect the state.
 */
function toggleEncSection(bodyId, btn) {
    const body = document.getElementById(bodyId);
    if (!body) return;
    const willOpen = body.style.display === 'none';
    body.style.display = willOpen ? '' : 'none';
    btn.setAttribute('aria-expanded', willOpen ? 'true' : 'false');
    const chev = btn.querySelector('.enc-toggle-chev');
    if (chev) chev.style.transform = willOpen ? 'rotate(180deg)' : '';
}
</script>
@endsection