@extends('layouts.app')
@section('title', 'Maternity Inpatient | ' . ($maternityAdmission->patient->full_name ?? ''))
@section('styles')
<style>
/* Search dropdowns inside Maternity Ward Orders tab — fixed positioning to
   escape any overflow-hidden ancestors. JS positions them via getBoundingClientRect. */
#mat-lab-dropdown,
#mat-imaging-dropdown,
#mat-rx-dropdown {
    position: fixed !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.18) !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    border-radius: 8px !important;
}
#mat-lab-dropdown.hidden,
#mat-imaging-dropdown.hidden,
#mat-rx-dropdown.hidden { display: none !important; }
#mat-lab-dropdown .mat-dd-item,
#mat-imaging-dropdown .mat-dd-item,
#mat-rx-dropdown .mat-dd-item {
    padding: 8px 12px;
    font-size: 12px;
    color: #1f2937;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
}
#mat-lab-dropdown .mat-dd-item:hover,
#mat-imaging-dropdown .mat-dd-item:hover,
#mat-rx-dropdown .mat-dd-item:hover { background: #fdf2f8; }
</style>
@endsection

@section('content')
@php
    $ma = $maternityAdmission;
    $p = $ma->patient;
    $discharged = app(\App\Services\VisitLockService::class)->isClosed($ma);
    $entries = $ma->labourMonitoring;
@endphp

{{-- Unified visit lock banner (read-only + reactivate for admins) --}}
@include('partials._visit-lock-banner', ['entity' => $ma, 'type' => 'maternity'])

{{-- ═══ PATIENT BALANCE SUMMARY (compact strip) ═══ --}}
@include('partials._patient-balance-summary', ['patient' => $ma->patient])

{{-- Patient header --}}
@php
    // Round 15: LMP/EDD live on the linked AncRegistration. Surface them
    // on the maternity banner so the clinician sees the dating without
    // having to navigate away. If the admission has no ANC registration
    // linked (walk-in delivery, no prior enrolment), $matReg will be
    // null and we show a prompt to set LMP inline.
    $matReg     = $ma->ancRegistration;
    $matLmp     = $matReg?->lmp;
    $matEdd     = $matReg?->edd;
    $matCanEditLmpEdd = auth()->user()->hasAnyRole('Clinician', 'Nurse', 'Triage Nurse', 'Hospital Admin', 'Super Admin');
@endphp
<div class="bg-white rounded-xl border p-4 mb-4">
    <div class="flex flex-wrap items-center gap-4">
        <div class="w-11 h-11 bg-pink-100 text-pink-700 rounded-full flex items-center justify-center text-sm font-bold">{{ strtoupper(substr($p->first_name??'',0,1).substr($p->last_name??'',0,1)) }}</div>
        <div class="flex-1">
            <h2 class="text-base font-bold">{{ $p->full_name }}</h2>
            <p class="text-xs text-gray-500">{{ $p->mrn }} · GA: {{ $ma->gestational_age_weeks ?? '-' }}wks · {{ $ma->reason_for_admission }}</p>
        </div>
        <span class="badge {{ $ma->status === 'in_labour' ? 'badge-danger' : ($ma->status === 'postnatal' ? 'badge-info' : ($discharged ? 'badge-success' : 'badge-warning')) }}">{{ ucfirst(str_replace('_',' ',$ma->status)) }}</span>
    </div>

    {{-- LMP / EDD strip (round 15). Shows the dating from the linked
         AncRegistration; clinicians can click "Edit" to update or set
         it for walk-in admissions that have no ANC enrolment yet.
         Note: the GA in the banner above remains the admission-day
         snapshot (gestational_age_weeks recorded on the MaternityAdmission)
         — clinically the relevant figure for the encounter. --}}
    <div style="display:flex;flex-wrap:wrap;gap:24px;margin-top:10px;padding-top:10px;border-top:1px dashed #f3e8f9;align-items:center">
        <div>
            <span style="font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:#9ca3af;font-weight:600">LMP</span>
            <div style="font-size:13px;font-weight:600;color:{{ $matLmp ? '#1f2937' : '#9ca3af' }}">
                {{ $matLmp ? $matLmp->format('d M Y') : '— Not recorded' }}
            </div>
        </div>
        <div>
            <span style="font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:#9ca3af;font-weight:600">EDD</span>
            <div style="font-size:13px;font-weight:600;color:{{ $matEdd ? '#c026d3' : '#9ca3af' }}">
                {{ $matEdd ? $matEdd->format('d M Y') : '— Not recorded' }}
            </div>
        </div>
        @if($matCanEditLmpEdd)
        <div style="margin-left:auto">
            <button type="button" onclick="document.getElementById('lmpEddEditor').style.display='block';this.style.display='none'"
                    style="font-size:11.5px;font-weight:600;color:#7a178c;background:#faf5fc;border:1px solid #e6d0f3;border-radius:6px;padding:5px 12px;cursor:pointer">
                {{ $matLmp ? 'Edit LMP / EDD' : '+ Set LMP / EDD' }}
            </button>
        </div>
        @endif
    </div>

    @if($matCanEditLmpEdd)
    {{-- Inline edit form — hidden by default; toggled by the button above.
         The EDD field auto-fills from LMP via Naegele's rule on input
         (LMP + 280 days). Clinician can override it if needed. --}}
    <form id="lmpEddEditor" method="POST" action="{{ route('maternity.inpatient.lmp-edd', $ma) }}"
          style="display:none;margin-top:12px;padding:12px;background:#fdf2f8;border:1px solid #fbcfe8;border-radius:8px">
        @csrf
        <div style="display:flex;flex-wrap:wrap;gap:12px;align-items:end">
            <div>
                <label style="font-size:10.5px;text-transform:uppercase;color:#7a178c;font-weight:600;display:block;margin-bottom:3px">LMP <span style="color:#dc2626">*</span></label>
                <input type="date" name="lmp" required
                       value="{{ $matLmp?->format('Y-m-d') }}"
                       max="{{ today()->format('Y-m-d') }}"
                       onchange="
                           var lmp = this.value;
                           if (!lmp) return;
                           var d = new Date(lmp + 'T00:00:00');
                           d.setDate(d.getDate() + 280);
                           var iso = d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0');
                           var eddInput = document.getElementById('lmpEddEditor_edd');
                           if (eddInput) eddInput.value = iso;
                       "
                       class="hmis-date-input no-flatpickr">
            </div>
            <div>
                <label style="font-size:10.5px;text-transform:uppercase;color:#7a178c;font-weight:600;display:block;margin-bottom:3px">EDD <span style="color:#9ca3af;text-transform:none;font-weight:500">(auto-calc, editable)</span></label>
                <input type="date" name="edd" id="lmpEddEditor_edd"
                       value="{{ $matEdd?->format('Y-m-d') }}"
                       class="hmis-date-input no-flatpickr">
            </div>
            <div style="display:flex;gap:6px">
                <button type="submit" class="enc-btn-primary" style="padding:7px 16px;font-size:12px">Save</button>
                <button type="button" onclick="document.getElementById('lmpEddEditor').style.display='none';document.querySelector('[onclick*=lmpEddEditor]').style.display=''"
                        class="enc-btn-cancel" style="padding:7px 16px;font-size:12px">Cancel</button>
            </div>
        </div>
        @if(!$matReg)
        <p style="margin:8px 0 0;font-size:11px;color:#9d174d">
            <strong>Note:</strong> This patient has no prior ANC enrolment.
            Saving will create a minimal ANC registration linked to this admission so the dating has a permanent home.
        </p>
        @endif
    </form>
    @endif
</div>

{{-- TABS --}}
<div class="flex gap-1 mb-4 border-b overflow-x-auto" id="mat-tabs">
    @foreach(['overview'=>'Overview','labour'=>'WHO Labour Care Guide','delivery'=>'Delivery','orders'=>'Orders','postnatal'=>'Postnatal','billing'=>'Billing','discharge'=>'Discharge'] as $tab => $label)
    <button onclick="showMatTab('{{ $tab }}')" class="mat-tab hmis-tab px-4 py-2 text-xs font-semibold rounded-t-lg border border-b-0 whitespace-nowrap {{ $loop->first ? 'bg-white text-pink-700 border-pink-200' : 'bg-gray-50 text-gray-500 border-transparent hover:bg-gray-100' }}" data-tab="{{ $tab }}" data-tab-id="{{ $tab }}">
        {{ $label }}
    </button>
    @endforeach
</div>

{{-- ═══ OVERVIEW TAB ═══ --}}
<div class="mat-panel" id="panel-overview">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white rounded-xl border p-5">
            <h4 class="text-sm font-semibold mb-3">Admission Details</h4>
            <div class="space-y-1.5 text-sm">
                <p><span class="text-gray-500">Admitted:</span> {{ $ma->admission_date?->format('d M Y H:i') ?? '-' }}</p>
                <p><span class="text-gray-500">Reason:</span> {{ $ma->reason_for_admission }}</p>
                <p><span class="text-gray-500">Membranes:</span> {{ ucfirst($ma->membrane_status ?? '-') }}</p>
                <p><span class="text-gray-500">Cervix:</span> {{ $ma->cervical_dilatation ?? '-' }}</p>
                <p><span class="text-gray-500">Fetal:</span> {{ ucfirst($ma->fetal_condition ?? '-') }}</p>
                <p><span class="text-gray-500">Maternal:</span> {{ ucfirst($ma->maternal_condition ?? '-') }}</p>
                <p><span class="text-gray-500">Labour onset:</span> {{ ucfirst(str_replace('_',' ',$ma->labour_onset ?? '-')) }}</p>
                <p><span class="text-gray-500">Provider:</span> {{ $ma->attendingProvider->name ?? '-' }}</p>
            </div>
        </div>
        @if($ma->ancRegistration)
        <div class="bg-white rounded-xl border p-5">
            <h4 class="text-sm font-semibold mb-3">ANC Summary</h4>
            <div class="space-y-1.5 text-sm">
                <p><span class="text-gray-500">G/P:</span> G{{ $ma->ancRegistration?->gravida ?? '-' }}P{{ $ma->ancRegistration?->parity ?? '-' }}</p>
                <p><span class="text-gray-500">EDD:</span> {{ $ma->ancRegistration?->edd?->format('d M Y') ?? '-' }}</p>
                <p><span class="text-gray-500">ANC Visits:</span> {{ $ma->ancRegistration?->visits()?->count() ?? 0 }}</p>
                <p><span class="text-gray-500">Risk:</span> <span class="badge {{ ($ma->ancRegistration?->risk_status ?? '') === 'high' ? 'badge-danger' : 'badge-success' }}">{{ ucfirst($ma->ancRegistration?->risk_status ?? 'normal') }}</span></p>
                <a href="{{ $ma->ancRegistration ? route('maternity.anc.show', $ma->ancRegistration) : '#' }}" class="text-xs text-sky-600">View full ANC profile →</a>
            </div>
        </div>
        @endif
    </div>

    {{-- ═══ WORKING DIAGNOSIS (editable inline) ═══
         Round 16 — clinicians flagged that the admission's diagnosis
         field captured at admit time was never visible/editable again
         after the patient hit the ward. This card lets the attending
         clinician set or refine the working diagnosis at any point
         during the stay; the value also pre-fills the Final Diagnosis
         on the Discharge tab. --}}
    <div class="bg-white rounded-xl border p-5 mt-4">
        <div class="flex items-center justify-between mb-2">
            <div>
                <h4 class="text-sm font-semibold">Working Diagnosis</h4>
                <p class="text-xs text-gray-500 mt-0.5">Pre-fills the Final Diagnosis at discharge. Update as the picture clarifies during the admission.</p>
            </div>
            @if($ma->diagnosis)
            <span class="badge badge-success text-xs">Recorded</span>
            @else
            <span class="badge badge-warning text-xs">Not recorded</span>
            @endif
        </div>

        @if($discharged)
            {{-- Patient already discharged: show read-only --}}
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 text-sm">
                {{ $ma->diagnosis ?? '— Not recorded —' }}
            </div>
        @elseif(auth()->user()->hasAnyRole('Clinician','Nurse','Triage Nurse','Hospital Admin','Super Admin'))
            <form method="POST" action="{{ route('maternity.diagnosis.update', $ma) }}" class="space-y-2">
                @csrf
                @method('PATCH')
                <textarea name="diagnosis" rows="2" class="form-input text-sm"
                          placeholder="e.g. Term pregnancy in labour; G3P2+0 at 39wk, latent phase. Add ICD-10 codes if available.">{{ old('diagnosis', $ma->diagnosis) }}</textarea>
                <div class="flex items-center gap-2">
                    <button type="submit" class="btn-primary text-xs">Save Diagnosis</button>
                    @if($ma->diagnosis)
                    <span class="text-xs text-gray-400">Last updated: {{ $ma->updated_at?->format('d M Y H:i') }}</span>
                    @endif
                </div>
            </form>
        @else
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 text-sm">
                {{ $ma->diagnosis ?? '— Not recorded —' }}
                <p class="text-xs text-gray-400 mt-1">Only clinicians and ward staff can edit the diagnosis.</p>
            </div>
        @endif
    </div>
</div>

{{-- ═══ WHO LABOUR CARE GUIDE TAB ═══ --}}
<div class="mat-panel hidden" id="panel-labour">

    {{-- ═══════════════════════════════════════════════════════════════════════
         WHO LABOUR CARE GUIDE — GRAPHICAL PARTOGRAPH
         Multi-track stacked chart sharing a common 0-12h time axis. Each track
         renders the corresponding observation column from labour_monitoring rows.
         ═══════════════════════════════════════════════════════════════════════ --}}
    <div class="bg-white rounded-xl border overflow-hidden mb-4" id="who-lcg-chart">
        <div class="px-4 py-3 bg-gray-800 text-white flex justify-between items-center">
            <div>
                <h4 class="text-sm font-bold">WHO Labour Care Guide | Partograph</h4>
                <p class="text-xs text-gray-300 mt-0.5">
                    {{ $p->full_name }} · Admitted {{ $ma->admission_date?->format('d M Y H:i') }}
                    @if($ma->labour_onset) · Onset: {{ ucfirst(str_replace('_',' ',$ma->labour_onset)) }} @endif
                </p>
            </div>
            <div class="flex gap-2">
                <button onclick="window.print()" class="text-xs bg-white/20 hover:bg-white/30 px-3 py-1 rounded">Print</button>
            </div>
        </div>

        @if($entries->count())
        <div class="p-4">
            {{-- Stacked tracks; canvas spans full width and is sized via JS based on parent width --}}
            <div class="relative" id="partograph-stack" style="width:100%">
                <canvas id="partograph-canvas" style="width:100%;height:auto;display:block"></canvas>
            </div>

            {{-- Legend --}}
            <div class="mt-3 grid grid-cols-2 md:grid-cols-4 gap-2 text-xs text-gray-600">
                <div><span class="inline-block w-3 h-3 align-middle" style="background:#2563eb"></span> X = Cervix (cm)</div>
                <div><span class="inline-block w-3 h-3 align-middle rounded-full" style="border:1.5px solid #16a34a"></span> O = Descent (fifths)</div>
                <div><span class="inline-block w-3 h-3 align-middle" style="background:#ef4444"></span> Alert / Action lines</div>
                <div><span class="inline-block w-3 h-3 align-middle" style="background:#86efac"></span> FHR normal band 110–160</div>
            </div>

            {{-- Tabular log (collapsible, hidden by default) --}}
            <details class="mt-4 border-t pt-3">
                <summary class="text-xs font-semibold text-gray-600 cursor-pointer hover:text-gray-800">
                    Show tabular observation log ({{ $entries->count() }} {{ Str::plural('entry', $entries->count()) }})
                </summary>
                <div class="overflow-x-auto mt-2">
                    <table class="w-full text-xs"><thead class="bg-gray-50">
                        <tr>
                            <th class="table-header">Time</th>
                            <th class="table-header">Hr</th>
                            <th class="table-header">FHR</th>
                            <th class="table-header">Liquor</th>
                            <th class="table-header">Mould</th>
                            <th class="table-header">Cx</th>
                            <th class="table-header">Desc</th>
                            <th class="table-header">Cx/10</th>
                            <th class="table-header">BP</th>
                            <th class="table-header">P</th>
                            <th class="table-header">T°</th>
                            <th class="table-header">Urine P/A</th>
                            <th class="table-header">Oxy</th>
                            <th class="table-header">Init</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @foreach($entries as $e)
                        <tr>
                            <td class="px-2 py-1">{{ $e->recorded_at?->format('H:i') }}</td>
                            <td class="px-2 py-1">{{ $e->hour_number ?? '-' }}</td>
                            <td class="px-2 py-1 {{ $e->fetal_heart_rate && ($e->fetal_heart_rate<110||$e->fetal_heart_rate>160) ? 'text-red-600 font-semibold' : '' }}">{{ $e->fetal_heart_rate ?? '-' }}</td>
                            <td class="px-2 py-1">{{ $e->amniotic_fluid ? strtoupper(substr($e->amniotic_fluid,0,1)) : '-' }}</td>
                            <td class="px-2 py-1">{{ $e->moulding ?? '-' }}</td>
                            <td class="px-2 py-1 font-semibold">{{ $e->cervical_dilatation_cm ?? '-' }}</td>
                            <td class="px-2 py-1">{{ $e->descent ?? '-' }}</td>
                            <td class="px-2 py-1">{{ $e->contractions_per_10min ?? '-' }}</td>
                            <td class="px-2 py-1">{{ ($e->systolic_bp && $e->diastolic_bp) ? $e->systolic_bp.'/'.$e->diastolic_bp : '-' }}</td>
                            <td class="px-2 py-1">{{ $e->maternal_pulse ?? '-' }}</td>
                            <td class="px-2 py-1">{{ $e->maternal_temp ?? '-' }}</td>
                            <td class="px-2 py-1">{{ $e->urine_protein ?? '-' }}/{{ $e->urine_acetone ?? '-' }}</td>
                            <td class="px-2 py-1">{{ $e->oxytocin ?? '-' }}</td>
                            <td class="px-2 py-1 text-gray-500">{{ $e->initials ?? '-' }}</td>
                        </tr>
                        @endforeach
                    </tbody></table>
                </div>
            </details>
        </div>
        @else
        <div class="p-8 text-center text-gray-400">
            <p class="text-sm">No labour observations recorded yet.</p>
            <p class="text-xs mt-1">Use the entry form below to record the first observation.</p>
        </div>
        @endif
    </div>

    {{-- ═══════════════════════════════════════════════════════════════════════
         RECORD OBSERVATION — collapsible bars below the partograph
         Grouped by WHO LCG categories. Each opens independently so a busy
         midwife can record only the data points that changed since last entry.
         ═══════════════════════════════════════════════════════════════════════ --}}
    @if(!$discharged)
    <div class="bg-white rounded-xl border p-4 mb-4">
        <h4 class="text-sm font-semibold mb-3 pb-2 border-b text-gray-700">Record Observation</h4>
        <form method="POST" action="{{ route('maternity.labour.store', $ma) }}">@csrf

            {{-- Always-visible header: time + stage + initials --}}
            @php
                // Derive 2-4 character initials from the user's name so we don't
                // overflow the 10-char `initials` column. "Dr. Clara Kamachu" → "DCK".
                $userName = trim(Auth::user()->name ?? '');
                $userInitials = collect(preg_split('/\s+/', $userName))
                    ->reject(fn($w) => preg_match('/^(dr|mr|mrs|ms|miss|prof|sr|sr\.|dr\.)$/i', $w))
                    ->map(fn($w) => strtoupper(substr($w, 0, 1)))
                    ->take(4)
                    ->implode('');
                if ($userInitials === '') $userInitials = strtoupper(substr($userName, 0, 4));
            @endphp
            <div class="grid grid-cols-3 md:grid-cols-6 gap-2 mb-4">
                <div class="col-span-2"><label class="form-label text-xs">Date / Time *</label><input type="datetime-local" name="recorded_at" value="{{ now()->format('Y-m-d\TH:i') }}" required class="form-input text-xs"></div>
                <div><label class="form-label text-xs">Stage</label><select name="labour_stage" class="form-input text-xs"><option value="first_active">1st Active</option><option value="second">2nd Stage</option></select></div>
                <div class="col-span-2"><label class="form-label text-xs">Initials <span class="text-gray-400">(max 10)</span></label><input type="text" name="initials" value="{{ $userInitials }}" maxlength="10" class="form-input text-xs"></div>
                <div class="flex items-end"><button type="submit" class="btn-success text-xs w-full">Save</button></div>
            </div>

            {{-- Collapsible groups --}}
            <details class="border rounded mb-2" open>
                <summary class="px-3 py-2 cursor-pointer text-xs font-bold uppercase text-blue-700 bg-blue-50 hover:bg-blue-100 flex justify-between items-center">
                    <span>👶 Baby</span><span class="text-gray-400 text-xs">FHR · Decelerations · Liquor · Position · Caput · Moulding</span>
                </summary>
                <div class="grid grid-cols-2 md:grid-cols-6 gap-2 p-3">
                    <div><label class="form-label text-xs">FHR (bpm)</label><input type="number" name="fetal_heart_rate" class="form-input text-xs" placeholder="110-160"></div>
                    <div><label class="form-label text-xs">Decelerations</label><select name="fhr_decelerations" class="form-input text-xs"><option value="none">None</option><option value="early">Early</option><option value="variable">Variable</option><option value="late">Late</option></select></div>
                    <div><label class="form-label text-xs">Amniotic Fluid</label><select name="amniotic_fluid" class="form-input text-xs"><option value="">-</option><option value="intact">Intact</option><option value="clear">Clear</option><option value="meconium_thin">Meconium (thin)</option><option value="meconium_thick">Meconium (thick)</option><option value="bloody">Bloody</option><option value="absent">Absent</option></select></div>
                    <div><label class="form-label text-xs">Position</label><select name="fetal_position" class="form-input text-xs"><option value="">-</option><option>LOA</option><option>ROA</option><option>LOP</option><option>ROP</option><option>OA</option><option>OP</option></select></div>
                    <div><label class="form-label text-xs">Caput</label><select name="caput" class="form-input text-xs"><option value="">-</option><option>0</option><option>+</option><option>++</option><option>+++</option></select></div>
                    <div><label class="form-label text-xs">Moulding</label><select name="moulding" class="form-input text-xs"><option value="">-</option><option>0</option><option>+</option><option>++</option><option>+++</option></select></div>
                </div>
            </details>

            <details class="border rounded mb-2" open>
                <summary class="px-3 py-2 cursor-pointer text-xs font-bold uppercase text-green-700 bg-green-50 hover:bg-green-100 flex justify-between items-center">
                    <span>📈 Labour Progress</span><span class="text-gray-400 text-xs">Cervix · Descent · Contractions</span>
                </summary>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-3">
                    <div><label class="form-label text-xs">Cervix (cm) 0-10</label><input type="number" name="cervical_dilatation_cm" min="0" max="10" class="form-input text-xs"></div>
                    <div><label class="form-label text-xs">Descent (fifths)</label><select name="descent" class="form-input text-xs"><option value="">-</option>@foreach(['5/5','4/5','3/5','2/5','1/5','0/5'] as $d)<option>{{ $d }}</option>@endforeach</select></div>
                    <div><label class="form-label text-xs">Contractions / 10 min</label><input type="number" name="contractions_per_10min" min="0" max="10" class="form-input text-xs"></div>
                    <div><label class="form-label text-xs">Duration</label><select name="contraction_duration" class="form-input text-xs"><option value="">-</option><option value="<20s">&lt;20s</option><option value="20-40s">20-40s</option><option value=">40s">&gt;40s</option></select></div>
                </div>
            </details>

            <details class="border rounded mb-2">
                <summary class="px-3 py-2 cursor-pointer text-xs font-bold uppercase text-purple-700 bg-purple-50 hover:bg-purple-100 flex justify-between items-center">
                    <span>👩 Woman (Vitals + Urine)</span><span class="text-gray-400 text-xs">BP · Pulse · Temperature · Urine</span>
                </summary>
                <div class="grid grid-cols-2 md:grid-cols-6 gap-2 p-3">
                    <div><label class="form-label text-xs">Pulse</label><input type="number" name="maternal_pulse" class="form-input text-xs"></div>
                    <div><label class="form-label text-xs">Systolic BP</label><input type="number" name="systolic_bp" class="form-input text-xs"></div>
                    <div><label class="form-label text-xs">Diastolic BP</label><input type="number" name="diastolic_bp" class="form-input text-xs"></div>
                    <div><label class="form-label text-xs">Temp °C</label><input type="number" step="0.1" name="maternal_temp" class="form-input text-xs"></div>
                    <div><label class="form-label text-xs">Urine Protein</label><select name="urine_protein" class="form-input text-xs"><option value="">-</option><option>Nil</option><option>Trace</option><option>+</option><option>++</option><option>+++</option></select></div>
                    <div><label class="form-label text-xs">Urine Acetone</label><select name="urine_acetone" class="form-input text-xs"><option value="">-</option><option>Nil</option><option>Trace</option><option>+</option><option>++</option><option>+++</option></select></div>
                </div>
            </details>

            <details class="border rounded mb-2">
                <summary class="px-3 py-2 cursor-pointer text-xs font-bold uppercase text-pink-700 bg-pink-50 hover:bg-pink-100 flex justify-between items-center">
                    <span>🤱 Supportive Care</span><span class="text-gray-400 text-xs">Companion · Pain relief · Fluids · Posture</span>
                </summary>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-3">
                    <div class="flex items-center"><label class="flex items-center gap-1.5 text-xs"><input type="checkbox" name="companion" value="1"> Companion present</label></div>
                    <div><label class="form-label text-xs">Pain Relief</label><select name="pain_relief" class="form-input text-xs"><option value="">None</option><option>Non-pharmacological</option><option>IM Pethidine</option><option>Epidural</option><option>Paracetamol</option><option>Other</option></select></div>
                    <div><label class="form-label text-xs">Oral Fluids</label><select name="oral_fluids" class="form-input text-xs"><option value="">-</option><option>Taking</option><option>Refused</option><option>NPO</option></select></div>
                    <div><label class="form-label text-xs">Posture</label><select name="posture" class="form-input text-xs"><option value="">-</option><option>Upright/walking</option><option>Semi-recumbent</option><option>Left lateral</option><option>Supine</option><option>Squatting</option></select></div>
                </div>
            </details>

            <details class="border rounded mb-2">
                <summary class="px-3 py-2 cursor-pointer text-xs font-bold uppercase text-amber-700 bg-amber-50 hover:bg-amber-100 flex justify-between items-center">
                    <span>💊 Medication</span><span class="text-gray-400 text-xs">Oxytocin · IV Fluids · Other meds · Alert status</span>
                </summary>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-3">
                    <div><label class="form-label text-xs">Oxytocin</label><input type="text" name="oxytocin" class="form-input text-xs" placeholder="e.g. 5IU in 500ml"></div>
                    <div><label class="form-label text-xs">Other Medicines</label><input type="text" name="medicines" class="form-input text-xs"></div>
                    <div><label class="form-label text-xs">IV Fluids</label><input type="text" name="iv_fluids" class="form-input text-xs"></div>
                    <div><label class="form-label text-xs">Alert Line Status</label><select name="alert_line_status" class="form-input text-xs"><option value="normal">Normal</option><option value="alert">Alert Line</option><option value="action">Action Line</option></select></div>
                </div>
            </details>

            <details class="border rounded mb-2">
                <summary class="px-3 py-2 cursor-pointer text-xs font-bold uppercase text-gray-700 bg-gray-50 hover:bg-gray-100 flex justify-between items-center">
                    <span>📝 Assessment & Plan</span><span class="text-gray-400 text-xs">Free-text notes</span>
                </summary>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-2 p-3">
                    <div><label class="form-label text-xs">Assessment</label><textarea name="assessment" class="form-input text-xs" rows="2" placeholder="Clinical assessment..."></textarea></div>
                    <div><label class="form-label text-xs">Plan</label><textarea name="plan" class="form-input text-xs" rows="2" placeholder="Plan..."></textarea></div>
                </div>
            </details>

            <div class="mt-3 text-right">
                <button type="submit" class="btn-success text-xs">Record Observation</button>
            </div>
        </form>
    </div>
    @endif
</div>

{{-- ═══════════════════════════════════════════════════════════════════════
     DELIVERY TAB
     Empty state: inline form to record the delivery + first newborn.
     Filled state: show the delivery summary + newborn cards + "Add Another
     Newborn" collapsible (for twins / multiples).
     ═══════════════════════════════════════════════════════════════════════ --}}
<div class="mat-panel hidden" id="panel-delivery">
    @php
        $matDelivery   = $ma->resolvedDelivery;
        $matCanDeliver = auth()->user()->hasAnyRole('Clinician','Nurse','Super Admin','Hospital Admin');
    @endphp

    @if($matDelivery)
    {{-- ═══ Delivery already recorded — show summary ═══ --}}
    <div class="bg-white rounded-xl border overflow-hidden mb-4">
        <div class="px-5 py-3 bg-gradient-to-r from-pink-50 to-rose-50 border-b flex items-center justify-between">
            <div>
                <h4 class="text-sm font-bold text-pink-800">Delivery Recorded</h4>
                <p class="text-xs text-gray-500 mt-0.5">
                    {{ $matDelivery->delivery_date?->format('d M Y') }} {{ $matDelivery->delivery_time ?? '' }}
                    · {{ ucfirst(str_replace('_',' ', $matDelivery->mode_of_delivery ?? '-')) }}
                    @if($matDelivery->deliveredBy)· Delivered by {{ $matDelivery->deliveredBy->name }}@endif
                </p>
            </div>
        </div>
        <div class="p-5 grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
            <div><span class="text-xs text-gray-400 block">Mode</span><span class="font-medium">{{ ucfirst(str_replace('_',' ', $matDelivery->mode_of_delivery ?? '-')) }}</span></div>
            <div><span class="text-xs text-gray-400 block">G/A at Delivery</span><span>{{ $matDelivery->gestational_age_at_delivery ? $matDelivery->gestational_age_at_delivery.' wk' : '-' }}</span></div>
            <div><span class="text-xs text-gray-400 block">Duration of Labour</span><span>{{ $matDelivery->duration_of_labour ?? '-' }}</span></div>
            <div><span class="text-xs text-gray-400 block">Blood Loss</span><span class="{{ $matDelivery->blood_loss && $matDelivery->blood_loss >= 500 ? 'text-red-600 font-bold' : '' }}">{{ $matDelivery->blood_loss ? $matDelivery->blood_loss.' ml' : '-' }}</span></div>
            <div><span class="text-xs text-gray-400 block">Placenta</span><span class="{{ $matDelivery->placenta_complete ? '' : 'text-red-600 font-semibold' }}">{{ $matDelivery->placenta_complete === null ? '-' : ($matDelivery->placenta_complete ? '✓ Complete' : '⚠ Incomplete') }}</span></div>
            <div><span class="text-xs text-gray-400 block">Perineum</span><span>{{ $matDelivery->perineum ?? '-' }}</span></div>
            <div><span class="text-xs text-gray-400 block">Mother Outcome</span><span>{{ ucfirst(str_replace('_',' ', $matDelivery->mother_outcome ?? '-')) }}</span></div>
            <div><span class="text-xs text-gray-400 block">Baby Outcome</span><span>{{ ucfirst(str_replace('_',' ', $matDelivery->baby_outcome ?? '-')) }}</span></div>
            @if($matDelivery->complications && (is_array($matDelivery->complications) ? count($matDelivery->complications) : true))
            <div class="md:col-span-4"><span class="text-xs text-gray-400 block">Complications</span><span class="text-amber-700 font-medium">{{ is_array($matDelivery->complications) ? implode(', ', $matDelivery->complications) : $matDelivery->complications }}</span></div>
            @endif
            @if($matDelivery->notes)
            <div class="md:col-span-4"><span class="text-xs text-gray-400 block">Delivery Notes</span><span class="whitespace-pre-wrap">{{ $matDelivery->notes }}</span></div>
            @endif
        </div>
    </div>

    {{-- ═══ Newborns ═══ --}}
    <div class="bg-white rounded-xl border overflow-hidden mb-4">
        <div class="px-5 py-3 bg-orange-50 border-b flex items-center justify-between">
            <h4 class="text-sm font-bold text-orange-800">Newborn(s) — {{ $matDelivery->newborns->count() }}</h4>
        </div>
        <div class="p-4">
            @if($matDelivery->newborns->count())
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                @foreach($matDelivery->newborns as $i => $nb)
                <div class="border border-orange-200 rounded-lg p-3 bg-orange-50/30">
                    <p class="text-xs font-bold text-orange-800 mb-2">Baby {{ $i + 1 }} · {{ ucfirst($nb->gender ?? 'unknown') }} · {{ $nb->birth_weight ? $nb->birth_weight.' kg' : '—' }}</p>
                    <div class="grid grid-cols-2 gap-2 text-xs">
                        <div><span class="text-gray-500 block">APGAR (1/5/10)</span><span class="font-mono">{{ $nb->apgar_1min ?? '-' }} / {{ $nb->apgar_5min ?? '-' }} / {{ $nb->apgar_10min ?? '-' }}</span></div>
                        <div><span class="text-gray-500 block">Resuscitation</span><span>{{ $nb->resuscitation ? 'Yes' : 'No' }}</span></div>
                        <div><span class="text-gray-500 block">Vitamin K</span><span>{{ $nb->vitamin_k ? '✓' : '✗' }}</span></div>
                        <div><span class="text-gray-500 block">BCG · OPV</span><span>{{ $nb->bcg ? 'BCG ✓' : 'BCG ✗' }} · {{ $nb->opv ? 'OPV ✓' : 'OPV ✗' }}</span></div>
                        <div class="col-span-2"><span class="text-gray-500 block">Breastfeeding</span><span>{{ $nb->breastfeeding_initiated ? '✓ Initiated' : '✗ Not initiated' }}</span></div>
                        @if($nb->abnormalities)
                        <div class="col-span-2"><span class="text-gray-500 block">Abnormalities</span><span class="text-red-700">{{ $nb->abnormalities }}</span></div>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            @else
            <p class="text-xs text-gray-400 text-center py-4">No newborns recorded. Add the baby details below.</p>
            @endif

            @if($matCanDeliver && !$discharged)
            <details class="mt-4 border border-orange-200 rounded-lg">
                <summary class="px-4 py-2 cursor-pointer text-xs font-semibold text-orange-700 bg-orange-50 hover:bg-orange-100">+ Add Another Newborn (twin / multiple)</summary>
                <form method="POST" action="{{ route('maternity.delivery.newborn.store', $matDelivery) }}" class="p-4 space-y-3">@csrf
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                        <div><label class="form-label text-xs">Gender *</label><select name="gender" required class="form-input text-xs"><option value="">-</option><option value="female">Female</option><option value="male">Male</option></select></div>
                        <div><label class="form-label text-xs">Weight (kg)</label><input type="number" step="0.01" name="birth_weight" class="form-input text-xs"></div>
                        <div><label class="form-label text-xs">APGAR 1'</label><input type="number" min="0" max="10" name="apgar_1min" class="form-input text-xs"></div>
                        <div><label class="form-label text-xs">APGAR 5'</label><input type="number" min="0" max="10" name="apgar_5min" class="form-input text-xs"></div>
                        <div><label class="form-label text-xs">APGAR 10'</label><input type="number" min="0" max="10" name="apgar_10min" class="form-input text-xs"></div>
                        <div class="col-span-1 flex items-end"><label class="flex items-center gap-1.5 text-xs"><input type="checkbox" name="resuscitation" value="1"> Resuscitation</label></div>
                        <div class="flex items-end"><label class="flex items-center gap-1.5 text-xs"><input type="checkbox" name="vitamin_k" value="1"> Vit K</label></div>
                        <div class="flex items-end"><label class="flex items-center gap-1.5 text-xs"><input type="checkbox" name="breastfeeding_initiated" value="1"> BF init</label></div>
                        <div class="flex items-end"><label class="flex items-center gap-1.5 text-xs"><input type="checkbox" name="bcg" value="1"> BCG</label></div>
                        <div class="flex items-end"><label class="flex items-center gap-1.5 text-xs"><input type="checkbox" name="opv" value="1"> OPV</label></div>
                        <div class="col-span-2 md:col-span-4"><label class="form-label text-xs">Abnormalities</label><input type="text" name="abnormalities" class="form-input text-xs" placeholder="None or describe"></div>
                        <div class="col-span-2 md:col-span-4"><label class="form-label text-xs">Notes</label><input type="text" name="notes" class="form-input text-xs"></div>
                    </div>
                    <button type="submit" class="btn-secondary text-xs">+ Add Newborn</button>
                </form>
            </details>
            @endif
        </div>
    </div>

    @elseif($matCanDeliver && !$discharged)
    {{-- ═══ No delivery yet — show full form ═══ --}}
    <div class="bg-white rounded-xl border overflow-hidden mb-4">
        <div class="px-5 py-3 bg-gradient-to-r from-pink-50 to-rose-50 border-b">
            <h4 class="text-sm font-bold text-pink-800">Record Delivery</h4>
            <p class="text-xs text-gray-500 mt-0.5">Complete delivery details and (optionally) the first newborn. Additional newborns can be added after saving.</p>
        </div>

        <form method="POST" action="{{ route('maternity.delivery.store') }}" class="p-5 space-y-5">@csrf
            <input type="hidden" name="patient_id" value="{{ $p->id }}">
            <input type="hidden" name="maternity_admission_id" value="{{ $ma->id }}">
            @if($ma->anc_registration_id)<input type="hidden" name="anc_registration_id" value="{{ $ma->anc_registration_id }}">@endif

            {{-- ── Delivery Event ── --}}
            <div>
                <h5 class="text-xs font-bold text-gray-400 uppercase tracking-wide mb-2">Delivery Event</h5>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                    <div><label class="form-label">Delivery Date *</label><input type="date" name="delivery_date" required value="{{ now()->format('Y-m-d') }}" class="form-input"></div>
                    <div><label class="form-label">Delivery Time</label><input type="time" name="delivery_time" value="{{ now()->format('H:i') }}" class="form-input"></div>
                    <div><label class="form-label">Mode of Delivery *</label>
                        <select name="mode_of_delivery" required class="form-input">
                            <option value="">Select…</option>
                            <option value="vaginal">Vaginal (SVD)</option>
                            <option value="c_section">C-Section</option>
                            <option value="assisted_vacuum">Assisted — Vacuum</option>
                            <option value="assisted_forceps">Assisted — Forceps</option>
                            <option value="breech">Breech</option>
                        </select>
                    </div>
                    <div><label class="form-label">G/A at Delivery (weeks)</label><input type="number" name="gestational_age_at_delivery" value="{{ $ma->gestational_age_weeks }}" class="form-input"></div>
                    <div><label class="form-label">Duration of Labour</label><input type="text" name="duration_of_labour" placeholder="e.g. 8h 30m" class="form-input"></div>
                    <div><label class="form-label">Blood Loss (ml)</label><input type="number" name="blood_loss" placeholder="500 = PPH threshold" class="form-input"></div>
                    <div><label class="form-label">Placenta</label>
                        <select name="placenta_complete" class="form-input"><option value="1">Complete</option><option value="0">Incomplete</option></select>
                    </div>
                    <div><label class="form-label">Perineum</label>
                        <select name="perineum" class="form-input">
                            <option value="">-</option>
                            <option value="intact">Intact</option>
                            <option value="episiotomy">Episiotomy</option>
                            <option value="1st degree tear">1st-degree tear</option>
                            <option value="2nd degree tear">2nd-degree tear</option>
                            <option value="3rd degree tear">3rd-degree tear</option>
                            <option value="4th degree tear">4th-degree tear</option>
                        </select>
                    </div>
                    <div><label class="form-label">Mother Outcome</label>
                        <select name="mother_outcome" class="form-input">
                            <option value="alive_well">Alive &amp; well</option>
                            <option value="alive_complicated">Alive with complications</option>
                            <option value="maternal_death">Maternal death</option>
                        </select>
                    </div>
                    <div><label class="form-label">Baby Outcome</label>
                        <select name="baby_outcome" class="form-input">
                            <option value="live_birth">Live birth</option>
                            <option value="fresh_stillbirth">Fresh stillbirth</option>
                            <option value="macerated_stillbirth">Macerated stillbirth</option>
                            <option value="early_neonatal_death">Early neonatal death</option>
                        </select>
                    </div>
                    <div class="md:col-span-2"><label class="form-label">Complications</label><input type="text" name="complications" class="form-input" placeholder="PPH, shoulder dystocia, retained placenta (comma-separated)"></div>
                    <div class="md:col-span-4"><label class="form-label">Delivery Notes</label><textarea name="notes" rows="2" class="form-input" placeholder="Intrapartum events, interventions, immediate management"></textarea></div>
                </div>
            </div>

            {{-- ── First Newborn ── --}}
            <div>
                <h5 class="text-xs font-bold text-orange-700 uppercase tracking-wide mb-2">Newborn (optional — add now or later)</h5>
                <div class="bg-orange-50/30 border border-orange-200 rounded-lg p-4 grid grid-cols-2 md:grid-cols-4 gap-3">
                    <div><label class="form-label">Gender</label>
                        <select name="newborn_gender" class="form-input">
                            <option value="">— Skip and add later —</option>
                            <option value="female">Female</option>
                            <option value="male">Male</option>
                        </select>
                    </div>
                    <div><label class="form-label">Birth Weight (kg)</label><input type="number" step="0.01" name="birth_weight" class="form-input"></div>
                    <div><label class="form-label">APGAR 1'</label><input type="number" min="0" max="10" name="apgar_1min" class="form-input"></div>
                    <div><label class="form-label">APGAR 5'</label><input type="number" min="0" max="10" name="apgar_5min" class="form-input"></div>
                    <div><label class="form-label">APGAR 10'</label><input type="number" min="0" max="10" name="apgar_10min" class="form-input"></div>
                    <div class="flex items-end"><label class="flex items-center gap-1.5 text-xs"><input type="checkbox" name="newborn_resuscitation" value="1"> Resuscitation</label></div>
                    <div class="flex items-end"><label class="flex items-center gap-1.5 text-xs"><input type="checkbox" name="vitamin_k" value="1"> Vit K given</label></div>
                    <div class="flex items-end"><label class="flex items-center gap-1.5 text-xs"><input type="checkbox" name="breastfeeding_initiated" value="1"> Breastfeeding initiated</label></div>
                    <div class="flex items-end"><label class="flex items-center gap-1.5 text-xs"><input type="checkbox" name="bcg" value="1"> BCG</label></div>
                    <div class="flex items-end"><label class="flex items-center gap-1.5 text-xs"><input type="checkbox" name="opv" value="1"> OPV</label></div>
                    <div class="md:col-span-2"><label class="form-label">Abnormalities</label><input type="text" name="abnormalities" class="form-input" placeholder="None or describe"></div>
                    <div class="md:col-span-4"><label class="form-label">Newborn Notes</label><textarea name="newborn_notes" rows="2" class="form-input"></textarea></div>
                </div>
            </div>

            <button type="submit" class="btn-success" onclick="return confirm('Save delivery details? The admission status will move to Postnatal.')">Record Delivery</button>
        </form>
    </div>

    @else
    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-5 text-center">
        <p class="text-sm font-semibold text-yellow-800">
            @if($discharged) This patient has been discharged. Delivery cannot be recorded.
            @else Only clinicians and nurses can record a delivery. @endif
        </p>
    </div>
    @endif

    {{-- ═══════════════════════════════════════════════════════════════════════
         MATERNAL COMPLICATIONS (moved here from the standalone Complications
         tab — round 16). Clinically these belong next to the delivery record:
         PPH, eclampsia, retained placenta, obstructed labour etc. are
         intrapartum / immediate postpartum events that document the same
         encounter the delivery does. Keeping them on the Delivery tab means
         clinicians don't have to flip tabs to reconstruct the event timeline.
         ═══════════════════════════════════════════════════════════════════════ --}}
    <div class="bg-white rounded-xl border overflow-hidden mt-4">
        <div class="px-5 py-3 bg-red-50 border-b flex items-center justify-between">
            <div>
                <h4 class="text-sm font-bold text-red-800">Maternal Complications</h4>
                <p class="text-xs text-gray-500 mt-0.5">PPH, eclampsia, sepsis, retained placenta and other intrapartum / immediate postpartum events.</p>
            </div>
            @if($ma->complications->count())
            <span class="badge badge-danger">{{ $ma->complications->count() }}</span>
            @endif
        </div>
        <div class="p-5">
            @if(!$discharged)
            <form method="POST" action="{{ route('maternity.complication.store', $ma) }}" class="mb-4 pb-4 border-b">@csrf
                <h5 class="text-xs font-bold text-gray-400 uppercase tracking-wide mb-2">Record Complication</h5>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div><label class="form-label">Type *</label><select name="complication_type" required class="form-input text-xs">
                        <option value="">Select</option>@foreach(['pph'=>'PPH','eclampsia'=>'Eclampsia','pre_eclampsia'=>'Pre-eclampsia','obstructed_labour'=>'Obstructed Labour','sepsis'=>'Sepsis','fetal_distress'=>'Fetal Distress','stillbirth'=>'Stillbirth','maternal_death'=>'Maternal Death','neonatal_death'=>'Neonatal Death','other'=>'Other'] as $k=>$v)<option value="{{ $k }}">{{ $v }}</option>@endforeach
                    </select></div>
                    <div><label class="form-label">Severity</label><select name="severity" class="form-input text-xs"><option value="mild">Mild</option><option value="moderate" selected>Moderate</option><option value="severe">Severe</option><option value="critical">Critical</option></select></div>
                    <div class="md:col-span-2"><label class="form-label">Description *</label><textarea name="description" required class="form-input text-xs" rows="2"></textarea></div>
                    <div><label class="form-label">Management</label><textarea name="management" class="form-input text-xs" rows="2"></textarea></div>
                    <div><label class="form-label">Outcome</label><select name="outcome" class="form-input text-xs"><option value="">-</option><option value="resolved">Resolved</option><option value="ongoing">Ongoing</option><option value="referred">Referred</option><option value="deceased">Deceased</option></select></div>
                </div>
                <button type="submit" class="btn-danger text-xs mt-3">Record Complication</button>
            </form>
            @endif

            @forelse($ma->complications as $c)
            <div class="border border-red-200 rounded-lg p-3 mb-3 bg-red-50/50">
                <div class="flex justify-between items-start gap-2">
                    <strong class="text-sm text-red-800">{{ ucfirst(str_replace('_',' ',$c->complication_type)) }}</strong>
                    <div class="flex items-center gap-1.5">
                        <span class="badge {{ $c->severity === 'critical' ? 'badge-danger' : 'badge-warning' }}">{{ ucfirst($c->severity) }}</span>
                        @if($c->outcome)<span class="badge {{ $c->outcome === 'resolved' ? 'badge-success' : ($c->outcome === 'deceased' ? 'badge-danger' : 'badge-info') }}">{{ ucfirst($c->outcome) }}</span>@endif
                    </div>
                </div>
                <p class="text-xs text-gray-700 mt-1">{{ $c->description }}</p>
                @if($c->management)<p class="text-xs text-gray-500 mt-1"><strong>Management:</strong> {{ $c->management }}</p>@endif
                @if($c->occurred_at)<p class="text-xs text-gray-400 mt-1">{{ $c->occurred_at->format('d M Y H:i') }}</p>@endif
            </div>
            @empty
            <p class="text-sm text-gray-400 text-center py-2">No complications recorded.</p>
            @endforelse
        </div>
    </div>
</div>

{{-- ═══ ORDERS TAB (Lab / Imaging / Prescriptions) ═══ --}}

<div class="mat-panel hidden" id="panel-orders">
    @php
        $matCanOrder   = auth()->user()->hasAnyRole('Clinician','Nurse','Super Admin','Hospital Admin');
        $matCanCancelRx = auth()->user()->hasAnyRole('Clinician','Nurse','Pharmacy User','Receptionist','Super Admin','Hospital Admin');
        $matVisit      = $ma->visit;
    @endphp

    @if(!$matVisit)
    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 text-sm text-amber-800">
        This admission has no linked visit, so lab, imaging and prescription orders cannot be placed here. Orders must be placed from the patient's OPD/IPD encounter.
    </div>
    @else

    {{-- ─── LAB ORDERS ─── --}}
    <div class="bg-white rounded-xl border p-5 mb-4">
        <div class="flex justify-between items-center mb-3">
            <h4 class="text-sm font-semibold text-gray-700">Laboratory Orders</h4>
            <span class="text-xs text-gray-400">{{ $matVisit->labOrders->count() }} order(s)</span>
        </div>

        @if($matVisit->labOrders->count())
        <table class="w-full mb-3"><thead class="bg-gray-50"><tr>
            <th class="table-header">Test</th><th class="table-header">Urgency</th>
            <th class="table-header">Result</th><th class="table-header">Status</th>
            <th class="table-header text-right">Cancel</th>
        </tr></thead>
        <tbody class="divide-y divide-gray-50">
            @foreach($matVisit->labOrders as $lo)
            <tr>
                <td class="table-cell text-xs">{{ $lo->test_name }}</td>
                <td class="table-cell text-xs capitalize">{{ $lo->urgency }}</td>
                <td class="table-cell text-xs">
                    @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']))
                                <span class="{{ ($param['flag'] ?? '') !== 'normal' ? 'text-red-600 font-bold' : '' }}">{{ $param['short_code'] ?? $param['name'] }}: {{ $param['value'] ?? '-' }} {{ $param['unit'] ?? '' }}</span>@if(!$loop->last), @endif
                                @endif
                            @endforeach
                        @endif
                    @else — @endif
                </td>
                <td class="table-cell"><span class="badge {{ $lo->status==='validated'?'badge-success':($lo->status==='resulted'?'badge-info':'badge-warning') }}">{{ ucfirst($lo->status) }}</span></td>
                <td class="table-cell text-right">
                    @if($matCanOrder && !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="text-red-500 hover:text-red-700" title="Cancel lab order">
                            <svg class="w-4 h-4 inline" 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>
                    @else<span class="text-gray-300 text-xs">—</span>@endif
                </td>
            </tr>
            @endforeach
        </tbody></table>
        @else
        <p class="text-xs text-gray-400 mb-3">No lab orders yet.</p>
        @endif

        @if($matCanOrder && !$discharged)
        <form method="POST" action="{{ route('lab.order') }}" class="flex gap-2 items-end">@csrf
            <input type="hidden" name="visit_id" value="{{ $matVisit->id }}">
            <input type="hidden" name="lab_test_id" id="mat-lab-test-id">
            <div class="flex-1 relative">
                <label class="form-label">Add Lab Test</label>
                <input type="text" id="mat-lab-search" class="form-input text-xs" placeholder="Search lab tests..." autocomplete="off" required oninput="filterMatLabTests(this.value)" onfocus="filterMatLabTests(this.value)">
                <div id="mat-lab-dropdown" class="hidden absolute z-30 left-0 right-0 top-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl max-h-48 overflow-y-auto"></div>
                <p id="mat-lab-price-hint" class="text-xs text-teal-600 mt-0.5 font-medium"></p>
            </div>
            <select name="urgency" class="form-input text-xs w-24"><option value="routine">Routine</option><option value="urgent">Urgent</option></select>
            <button class="btn-primary text-xs">+ Order Lab</button>
        </form>
        @endif
    </div>

    {{-- ─── IMAGING ORDERS ─── --}}
    <div class="bg-white rounded-xl border p-5 mb-4">
        <div class="flex justify-between items-center mb-3">
            <h4 class="text-sm font-semibold text-gray-700">Imaging Orders</h4>
            <span class="text-xs text-gray-400">{{ $matVisit->imagingRequests->count() }} order(s)</span>
        </div>

        @if($matVisit->imagingRequests->count())
        <table class="w-full mb-3"><thead class="bg-gray-50"><tr>
            <th class="table-header">Type</th><th class="table-header">Body Part</th>
            <th class="table-header">Status</th><th class="table-header text-right">Cancel</th>
        </tr></thead>
        <tbody class="divide-y divide-gray-50">
            @foreach($matVisit->imagingRequests as $ir)
            <tr>
                <td class="table-cell text-xs">{{ $ir->imaging_type }}</td>
                <td class="table-cell text-xs">{{ $ir->body_part ?? '-' }}</td>
                <td class="table-cell"><span class="badge {{ $ir->status==='reported'?'badge-success':'badge-warning' }}">{{ ucfirst($ir->status) }}</span></td>
                <td class="table-cell text-right">
                    @if($matCanOrder && !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="text-red-500 hover:text-red-700" title="Cancel imaging order">
                            <svg class="w-4 h-4 inline" 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>
                    @else<span class="text-gray-300 text-xs">—</span>@endif
                </td>
            </tr>
            @endforeach
        </tbody></table>
        @else
        <p class="text-xs text-gray-400 mb-3">No imaging orders yet.</p>
        @endif

        @if($matCanOrder && !$discharged)
        <form method="POST" action="{{ route('imaging.request.store') }}" class="flex gap-2 items-end">@csrf
            <input type="hidden" name="visit_id" value="{{ $matVisit->id }}">
            <input type="hidden" name="service_item_id" id="mat-imaging-service-id">
            <div class="flex-1 relative"><label class="form-label">Imaging Service</label>
                <input type="text" name="imaging_type" id="mat-imaging-search" class="form-input text-xs" placeholder="Search imaging services..." autocomplete="off" required oninput="filterMatImaging(this.value)" onfocus="filterMatImaging(this.value)">
                <div id="mat-imaging-dropdown" class="hidden absolute z-30 left-0 right-0 top-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl max-h-48 overflow-y-auto"></div>
                <p id="mat-imaging-price-hint" class="text-xs text-purple-600 mt-0.5 font-medium"></p>
            </div>
            <input type="text" name="clinical_indication" class="form-input text-xs flex-1" placeholder="Clinical indication (optional)">
            <button class="btn-primary text-xs">+ Request</button>
        </form>
        @endif
    </div>

    {{-- ─── PRESCRIPTIONS ─── --}}
    <div class="bg-white rounded-xl border p-5">
        <div class="flex justify-between items-center mb-3">
            <h4 class="text-sm font-semibold text-gray-700">Prescriptions</h4>
            <span class="text-xs text-gray-400">{{ $matVisit->prescriptions->count() }} item(s)</span>
        </div>

        @if($matVisit->prescriptions->count())
        {{-- Shared Rx action icon-buttons — identical to the OPD encounter look,
             reproduced here (outside .enc-page scope) for cross-module uniformity. --}}
        <style>
        .rx-act-btn{background:transparent;border:none;color:#9ca3af;cursor:pointer;padding:5px;border-radius:5px;transition:all .12s;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
        .rx-act-btn:hover{color:#dc2626;background:#fee2e2}
        </style>
        <table class="w-full mb-3"><thead class="bg-gray-50"><tr>
            <th class="table-header">Drug</th><th class="table-header">Dosage</th>
            <th class="table-header">Freq</th><th class="table-header">Route</th>
            <th class="table-header">Duration</th><th class="table-header">Qty</th>
            <th class="table-header">Status</th>
            <th class="table-header text-right">Actions</th>
        </tr></thead>
        <tbody class="divide-y divide-gray-50">
            @foreach($matVisit->prescriptions as $rx)
            @php
                $matRxLocked    = in_array($rx->status, ['dispensed','cancelled']);
                $matRxDispensed = \App\Models\PharmacyDispense::where('prescription_id', $rx->id)
                    ->whereNull('reversed_at')->sum('quantity_dispensed');
                $matRxRemaining = max(0, ((int) $rx->quantity) - (int) $matRxDispensed);
                $matRxCanDispense = $matCanOrder && !$matRxLocked && $rx->drug_item_id && $matRxRemaining > 0;
            @endphp
            <tr>
                <td class="table-cell text-xs font-medium">{{ $rx->drug_name }}</td>
                <td class="table-cell text-xs">{{ $rx->dosage ?? '-' }}</td>
                <td class="table-cell text-xs">{{ $rx->frequency ?? '-' }}</td>
                <td class="table-cell text-xs">{{ $rx->route ?? '-' }}</td>
                <td class="table-cell text-xs">{{ $rx->duration ?? '-' }}</td>
                <td class="table-cell text-xs">{{ $rx->quantity }}</td>
                <td class="table-cell">
                    <span class="badge {{ $rx->status==='dispensed'?'badge-success':($rx->status==='partially_dispensed'?'badge-info':($rx->status==='cancelled'?'badge-gray':'badge-warning')) }}">
                        {{ ucwords(str_replace('_',' ',$rx->status)) }}
                    </span>
                </td>
                <td class="table-cell text-right">
                    {{-- Dispense (one tap) — green shield-check, matches OPD encounter. --}}
                    @if($matRxCanDispense)
                    <form method="POST" action="{{ route('pharmacy.dispense') }}"
                          onsubmit="return confirm('Dispense {{ $matRxRemaining }} 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="{{ $matRxRemaining }}">
                        <button class="rx-act-btn" title="Dispense {{ $matRxRemaining }} 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($matCanOrder && !$matRxLocked)
                    <button type="button" onclick="document.getElementById('mat-rx-edit-{{ $rx->id }}').style.display=document.getElementById('mat-rx-edit-{{ $rx->id }}').style.display==='none'?'':'none'" class="text-blue-600 hover:text-blue-800 text-xs font-semibold mr-2" title="Edit prescription">✎</button>
                    @endif
                    @if($matCanCancelRx && !$matRxLocked)
                    <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 type="submit" class="text-red-500 hover:text-red-700 text-xs font-semibold" title="Cancel prescription">✕</button>
                    </form>
                    @elseif($matRxLocked)
                    <span class="text-gray-300 text-xs italic" title="Locked — already {{ $rx->status }}">🔒</span>
                    @endif
                    {{-- Reverse dispense — Admin, Clinician or Nurse. Amber icon,
                         identical to the OPD encounter. Returns units to stock and
                         re-queues the Rx; invoice line stays (use Delete to drop it). --}}
                    @if($matCanOrder && $matRxDispensed > 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{{ $matRxDispensed }} 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-left:2px">
                        @csrf
                        <button class="rx-act-btn" title="Reverse dispense ({{ $matRxDispensed }} 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
                </td>
            </tr>
            @if($matCanOrder && !$matRxLocked)
            <tr id="mat-rx-edit-{{ $rx->id }}" style="display:none;background:#faf5fc">
                <td colspan="8" class="table-cell">
                    <form method="POST" action="{{ route('prescriptions.update', $rx) }}" style="padding:8px 4px">
                        @csrf @method('PATCH')
                        <div class="text-xs font-semibold text-purple-800 uppercase tracking-wide mb-2">
                            ✎ Editing: {{ $rx->drug_name }}
                            <span class="font-normal text-gray-500 normal-case ml-2">Drug &amp; price cannot be changed.</span>
                        </div>
                        @if($matRxDispensed > 0)
                        <div class="text-xs text-amber-800 bg-amber-50 border border-amber-200 rounded px-3 py-2 mb-2">
                            <strong>⚠ Partially dispensed:</strong> {{ $matRxDispensed }} of {{ $rx->quantity }} unit(s) already given.
                            Minimum new quantity is <strong>{{ $matRxDispensed }}</strong>
                            (set qty to {{ $matRxDispensed }} to close this prescription out).
                            The dispensed portion is locked in the bill.
                        </div>
                        @endif
                        <div class="grid grid-cols-2 md:grid-cols-6 gap-2">
                            <div><label class="form-label">Dosage</label><input type="text" name="dosage" value="{{ $rx->dosage }}" class="form-input text-xs"></div>
                            <div><label class="form-label">Freq</label><input type="text" name="frequency" value="{{ $rx->frequency }}" class="form-input text-xs"></div>
                            <div><label class="form-label">Route</label>
                                <select name="route" class="form-input text-xs">
                                    @foreach(\App\Models\Prescription::ROUTES as $k => $v)
                                    <option value="{{ $k }}" {{ $rx->route === $k ? 'selected' : '' }}>{{ $v }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div><label class="form-label">Duration</label><input type="text" name="duration" value="{{ $rx->duration }}" class="form-input text-xs"></div>
                            <div><label class="form-label">Qty @if($matRxDispensed > 0)<span class="text-amber-700">(min {{ $matRxDispensed }})</span>@endif</label><input type="number" name="quantity" value="{{ $rx->quantity }}" min="{{ max(1, $matRxDispensed) }}" required class="form-input text-xs"></div>
                            <div class="flex items-end"><button class="btn-primary text-xs w-full">Save</button></div>
                        </div>
                        <div class="mt-2"><label class="form-label">Instructions</label>
                            <input type="text" name="instructions" value="{{ $rx->instructions }}" class="form-input text-xs">
                        </div>
                    </form>
                </td>
            </tr>
            @endif
            @endforeach
        </tbody></table>
        @else
        <p class="text-xs text-gray-400 mb-3">No prescriptions yet.</p>
        @endif

        @if($matCanOrder && !$discharged)
        <form method="POST" action="{{ route('prescriptions.store') }}" class="flex flex-wrap gap-2 items-end mt-3">@csrf
            <input type="hidden" name="visit_id" value="{{ $matVisit->id }}">
            <input type="hidden" name="drug_item_id" id="mat-rx-drug-id">
            <div class="flex-1 relative min-w-[180px]">
                <label class="form-label">Drug</label>
                <input type="text" id="mat-rx-search" class="form-input text-xs" placeholder="Search drug..." autocomplete="off" required oninput="filterMatDrugs(this.value)" onfocus="filterMatDrugs(this.value)">
                <div id="mat-rx-dropdown" class="hidden absolute z-30 left-0 right-0 top-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl max-h-48 overflow-y-auto"></div>
            </div>
            <div><label class="form-label">Dosage</label><input type="text" name="dosage" placeholder="500mg" class="form-input text-xs w-20"></div>
            <div><label class="form-label">Freq</label>
                <select name="frequency" class="form-input text-xs w-20">
                    <option value="OD">OD</option><option value="BD">BD</option><option value="TDS">TDS</option><option value="QDS">QDS</option><option value="STAT">STAT</option>
                </select>
            </div>
            <div><label class="form-label">Route</label>
                <select name="route" class="form-input text-xs w-20">
                    @foreach(\App\Models\Prescription::ROUTES as $k => $v)<option value="{{ $k }}">{{ $v }}</option>@endforeach
                </select>
            </div>
            <div><label class="form-label">Duration</label><input type="text" name="duration" placeholder="5 days" class="form-input text-xs w-20"></div>
            <div><label class="form-label">Qty</label><input type="number" name="quantity" value="1" min="1" required class="form-input text-xs w-16"></div>
            <button class="btn-primary text-xs">+ Prescribe</button>
        </form>
        @endif
    </div>

    @endif {{-- /$matVisit check --}}
</div>

{{-- ═══ BILLING TAB ═══ --}}
{{-- Mirrors the IPD Billing tab (resources/views/inpatient/show.blade.php
     #tab-billing) — same line-items table, same payments table, same
     record-payment form, same role gating. No auto-billed lines: per CRH
     policy the cashier adds everything manually from the service catalog.
     The empty invoice container is created in MaternityController::inpatientShow(). --}}
<div class="mat-panel hidden" id="panel-billing">
    @php $matInv = $ma->visit?->invoice; @endphp

    @if($matInv)
    <div class="grid grid-cols-3 gap-3 mb-4">
        <div class="bg-gray-50 rounded-lg p-3 text-center"><p class="text-xs text-gray-400">Total</p><p class="text-lg font-bold">KES {{ number_format($matInv->total_amount) }}</p></div>
        <div class="bg-green-50 rounded-lg p-3 text-center"><p class="text-xs text-gray-400">Paid</p><p class="text-lg font-bold text-green-600">KES {{ number_format($matInv->amount_paid) }}</p></div>
        <div class="bg-red-50 rounded-lg p-3 text-center"><p class="text-xs text-gray-400">Balance</p><p class="text-lg font-bold text-red-600">KES {{ number_format($matInv->balance) }}</p></div>
    </div>

    {{-- Line items --}}
    <table class="w-full mb-4">
        <thead class="bg-gray-50"><tr>
            <th class="table-header">Item</th>
            <th class="table-header">Details</th>
            <th class="table-header text-right">Qty</th>
            <th class="table-header text-right">Price</th>
            <th class="table-header text-right">Total</th>
            <th class="table-header w-10"></th>
        </tr></thead>
        <tbody class="divide-y divide-gray-50">
            @foreach($matInv->items as $item)
            @php
                // Same logic as IPD: only auto-generated and manual lines are
                // freely editable in-place. Pharmacy items are locked to the
                // Prescriptions section as the single source of truth.
                $matIsEditable = in_array($item->source_type, ['auto_consultation','lab_order','imaging_request', null, ''])
                                 && auth()->user()->hasAnyRole('Receptionist','Clinician','Nurse','Triage Nurse','Dental User','Hospital Admin','Super Admin');
            @endphp
            <tr id="mat-bill-row-{{ $item->id }}">
                <td class="table-cell text-xs font-medium">{{ $item->description }}</td>
                <td class="table-cell text-xs text-gray-400">{{ $item->category }}</td>
                <td class="table-cell text-xs text-right">
                    @if($matIsEditable)
                        <input type="number" class="form-input text-xs text-right py-0.5 w-16" min="1" step="1" value="{{ $item->quantity }}" data-item-id="{{ $item->id }}" onchange="updateMatBillItem({{ $item->id }}, this)">
                    @else
                        {{ $item->quantity }}
                    @endif
                </td>
                <td class="table-cell text-xs text-right">
                    @if($matIsEditable)
                        <input type="number" class="form-input text-xs text-right py-0.5 w-24" min="0" step="0.01" value="{{ $item->unit_price }}" data-item-id="{{ $item->id }}" onchange="updateMatBillItem({{ $item->id }}, this)">
                    @else
                        {{ number_format($item->unit_price) }}
                    @endif
                </td>
                <td class="table-cell text-xs text-right font-semibold" id="mat-bill-total-{{ $item->id }}">{{ number_format($item->total) }}</td>
                <td class="table-cell text-center">
                    @if($item->source_type === 'prescription')
                        <span title="Pharmacy item — edit from Prescriptions/Orders section" class="text-gray-300 text-xs">🔒</span>
                    @elseif(auth()->user()->hasAnyRole('Receptionist','Clinician','Nurse','Triage Nurse','Dental User','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="text-gray-300 hover:text-red-500 transition-colors" title="Void item">
                                <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="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>
            </tr>
            @endforeach

            {{-- Manual add — service catalog search --}}
            @if(auth()->user()->hasAnyRole('Receptionist','Clinician','Nurse','Triage Nurse','Dental User','Super Admin','Hospital Admin'))
            <tr class="bg-gray-50/50"><td colspan="6" class="px-4 py-2">
                <form method="POST" action="{{ route('billing.charge') }}" class="flex gap-2 items-end flex-wrap">@csrf
                    <input type="hidden" name="invoice_id" value="{{ $matInv->id }}">
                    <input type="hidden" name="visit_id" value="{{ $ma->visit_id }}">
                    <input type="hidden" name="service_item_id" id="mat-bill-service-id">
                    <div class="flex-1 min-w-[180px] relative">
                        <input type="text" name="description" id="mat-bill-search" class="form-input text-xs" placeholder="Search services & products..." autocomplete="off" required oninput="filterMatBillServices(this.value)" onfocus="filterMatBillServices(this.value)">
                        <div id="mat-bill-dropdown" class="hidden absolute z-30 left-0 right-0 top-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl max-h-48 overflow-y-auto"></div>
                    </div>
                    <input type="text" name="category" class="form-input text-xs w-28" placeholder="Category" id="mat-bill-cat">
                    <input type="number" name="quantity" value="1" min="1" class="form-input text-xs w-14 text-right">
                    <input type="number" name="unit_price" step="0.01" class="form-input text-xs w-24 text-right" placeholder="Price" required id="mat-bill-price">
                    <button class="btn-primary text-xs py-1.5" style="background:#be185d">+ Add</button>
                </form>
            </td></tr>
            @endif
        </tbody>
        <tfoot>
            <tr class="bg-gray-100"><td colspan="5" class="table-cell text-right font-bold text-xs">Grand Total</td><td class="table-cell text-right font-bold" id="matGrandTotal">KES {{ number_format($matInv->total_amount) }}</td></tr>
        </tfoot>
    </table>

    {{-- Payments --}}
    <h4 class="text-xs font-bold text-gray-500 uppercase mb-2">Payments</h4>
    <table class="w-full">
        <thead class="bg-gray-50"><tr>
            <th class="table-header">Method</th>
            <th class="table-header">Details</th>
            <th class="table-header text-right">Amount</th>
            <th class="table-header">Reference</th>
            <th class="table-header text-center" style="width:40px"></th>
        </tr></thead>
        <tbody class="divide-y divide-gray-50">
            @foreach($matInv->payments as $pay)
            <tr>
                <td class="table-cell text-xs capitalize">{{ str_replace('_',' ',$pay->payment_method) }}</td>
                <td class="table-cell text-xs text-gray-400">{{ $pay->description ?? '' }}</td>
                <td class="table-cell text-xs text-right font-semibold text-green-600">KES {{ number_format($pay->amount) }}</td>
                <td class="table-cell text-xs font-mono">{{ $pay->reference_number ?? '' }}</td>
                <td class="table-cell text-center">
                    @if(auth()->user()->hasAnyRole('Super Admin','Hospital Admin','Receptionist','Clinician','Nurse','Triage Nurse'))
                    <form method="POST" action="{{ route('billing.payment.void', $pay) }}" onsubmit="return confirm('Delete this payment of KES {{ number_format($pay->amount) }}?');" class="inline">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-gray-300 hover:text-red-500 transition-colors" title="Void payment">
                            <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="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>
            </tr>
            @endforeach

            {{-- Record payment --}}
            @if(auth()->user()->hasAnyRole('Receptionist','Clinician','Nurse','Triage Nurse','Dental User','Super Admin','Hospital Admin'))
            <tr class="bg-gray-50/50"><td colspan="5" class="px-4 py-2">
                @php
                    // SHA detection — same convention used by OPD/ANC/IPD/Dental.
                    $matShaCompany = \App\Models\InsuranceCompany::where('code', 'SHA')->first();
                    $matShaName    = $matShaCompany?->name ?? 'SHA (Social Health Authority)';
                    $matShaCover   = null;
                    if ($matShaCompany && ($ma->visit?->patient_id ?? null)) {
                        $matShaCover = \App\Models\PatientInsurance::where('patient_id', $ma->visit->patient_id)
                            ->where('insurance_company_id', $matShaCompany->id)
                            ->where('is_active', true)
                            ->latest()
                            ->first();
                    }
                @endphp
                <form method="POST" action="{{ route('billing.payment') }}" class="flex flex-col gap-2">@csrf
                    <input type="hidden" name="invoice_id" value="{{ $matInv->id }}">
                    <div class="flex gap-2 items-center flex-wrap">
                        <select name="payment_method" class="form-input text-xs w-32" onchange="toggleMatPaySub(this.value)">
                            <option value="cash">Cash</option>
                            <option value="mpesa">M-Pesa</option>
                            <option value="insurance">Insurance</option>
                            <option value="card">Card</option>
                            <option value="bank_transfer">Bank Transfer</option>
                        </select>
                        <select name="insurance_provider" class="form-input text-xs w-44 mat-pay-sub mat-pay-ins"
                                data-sha-name="{{ $matShaName }}"
                                onchange="toggleMatShaPanel(this.value, '{{ $matShaName }}')"
                                style="display:none">
                            <option value="">Select Insurer...</option>
                            @foreach(\App\Models\InsuranceCompany::where('is_active',true)->orderBy('name')->get() as $ic)
                                <option value="{{ $ic->name }}">{{ $ic->name }}</option>
                            @endforeach
                        </select>
                        <select name="mpesa_channel" class="form-input text-xs w-28 mat-pay-sub mat-pay-mpesa" style="display:none">
                            <option value="kcb">KCB Paybill</option>
                            <option value="bingwa_sacco">Bingwa Sacco</option>
                        </select>
                        <input type="number" name="amount" step="0.01" class="form-input text-xs w-28 text-right" placeholder="Amount" required>
                        <input type="text" name="reference_number" class="form-input text-xs flex-1" placeholder="Ref / Code">
                        <button class="btn-success text-xs py-1.5">Pay</button>
                    </div>

                    {{-- SHA member-identity sub-panel — mirrors IPD/OPD/ANC --}}
                    <div id="mat-sha-panel" style="display:none;margin-top:6px;padding:10px 12px;border:1px solid #fcd34d;background:#fffbeb;border-radius:8px">
                        <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px">
                            <svg style="width:13px;height:13px;color:#92400e" 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>
                            <span style="font-size:10.5px;font-weight:700;color:#92400e;text-transform:uppercase;letter-spacing:.04em">SHA Member Details (required)</span>
                            @if($matShaCover)
                            <span title="Prefilled from this patient's SHA cover on file. Edit if anything has changed."
                                  style="font-size:9px;font-weight:600;color:#15803d;background:#dcfce7;border:1px solid #86efac;padding:1px 5px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em">✓ From file</span>
                            @endif
                        </div>
                        <div class="flex gap-2 flex-wrap">
                            <input type="text" name="sha_number" placeholder="SHA Number *" class="form-input text-xs"
                                   value="{{ $matShaCover->member_number ?? '' }}"
                                   style="flex:1;min-width:130px;border:1px solid #fcd34d;background:#fff;font-family:ui-monospace,monospace">
                            <input type="text" name="sha_member_name" placeholder="Member Name *" class="form-input text-xs"
                                   value="{{ $matShaCover->principal_name ?? '' }}"
                                   style="flex:1.5;min-width:180px;border:1px solid #fcd34d;background:#fff">
                            <select name="sha_relationship" class="form-input text-xs" style="min-width:120px;border:1px solid #fcd34d;background:#fff">
                                <option value="">Relationship *</option>
                                @foreach(['Self','Spouse','Child','Parent','Other'] as $rel)
                                <option value="{{ $rel }}" {{ ($matShaCover->relationship ?? '') === $rel ? 'selected' : '' }}>{{ $rel }}</option>
                                @endforeach
                            </select>
                            <input type="text" name="sha_auth_reference" placeholder="Auth Ref (optional)" class="form-input text-xs" style="flex:1;min-width:140px;border:1px solid #fcd34d;background:#fff;font-family:ui-monospace,monospace">
                        </div>
                    </div>
                </form>
            </td></tr>
            @endif
        </tbody>
        <tfoot>
            <tr class="bg-blue-50"><td colspan="2" class="table-cell text-xs">Total Paid</td><td class="table-cell text-right font-bold text-green-600">KES {{ number_format($matInv->amount_paid) }}</td><td class="table-cell" colspan="2"></td></tr>
            <tr class="bg-amber-50"><td colspan="2" class="table-cell font-bold text-xs">Balance Due</td><td class="table-cell text-right font-bold text-red-600">KES {{ number_format($matInv->balance) }}</td><td class="table-cell" colspan="2"></td></tr>
        </tfoot>
    </table>

    {{-- Print buttons: Invoice | Interim Receipt | Final Receipt
         Mirrors the OPD/ANC pattern in resources/views/partials/_payment-section.blade.php.
         Inline (not @include) for the same reason as IPD — line items +
         payments tables are already rendered above. Round 13.

         Round 17: the Case Summary button was removed from the maternity
         ward at clinician request. The route + controller method remain
         in place so the document family stays available for any future
         re-introduction, but no UI surface in the ward links to it. --}}
    @php
        $matVisit_btn = $ma->visit;
        $matPayments_btn = $matInv?->payments ?? collect();
        $matLastReceipt = $matPayments_btn->last()?->receipt;
    @endphp
    <div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:12px">
        <a href="{{ route('billing.invoice.print', $matInv) }}" target="_blank"
           style="display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:11.5px;font-weight:600;color:#4b5563;background:#fff;border:1px solid #e5e7eb;border-radius:7px;text-decoration:none;transition:all .12s"
           onmouseover="this.style.background='#fdf2f8';this.style.borderColor='#fbcfe8'"
           onmouseout="this.style.background='#fff';this.style.borderColor='#e5e7eb'">
            <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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
            Print Invoice
        </a>
        @if($matLastReceipt)
        <a href="{{ route('billing.receipt', $matLastReceipt) }}" target="_blank"
           style="display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:11.5px;font-weight:600;color:#16a34a;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:7px;text-decoration:none;transition:all .12s"
           onmouseover="this.style.background='#dcfce7'" onmouseout="this.style.background='#f0fdf4'">
            <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            Interim Receipt
        </a>
        @endif
        <a href="{{ route('billing.final-receipt', $matInv) }}" target="_blank"
           style="display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:11.5px;font-weight:600;color:#be185d;background:#fdf2f8;border:1px solid #fbcfe8;border-radius:7px;text-decoration:none;transition:all .12s"
           onmouseover="this.style.background='#fce7f3'" onmouseout="this.style.background='#fdf2f8'">
            <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
            Final Receipt
        </a>
    </div>
    @else
        <p class="text-gray-400 text-center py-6">No invoice yet. The invoice container is created automatically — refresh this page to initialize.</p>
    @endif
</div>

{{-- ═══ POSTNATAL TAB ═══ --}}
<div class="mat-panel hidden" id="panel-postnatal">
    @if(!$discharged)
    <div class="bg-white rounded-xl border p-5 mb-4">
        <h4 class="text-sm font-semibold mb-3">Add Postnatal Note</h4>
        <form method="POST" action="{{ route('maternity.postnatal.store', $ma) }}">@csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div><label class="form-label">Review</label><textarea name="post_delivery_review" class="form-input text-xs" rows="2"></textarea></div>
                <div><label class="form-label">Bleeding</label><select name="bleeding_status" class="form-input text-xs"><option value="normal">Normal</option><option value="excessive">Excessive</option><option value="concerning">Concerning</option></select></div>
                <div><label class="form-label">Uterine Tone</label><select name="uterine_tone" class="form-input text-xs"><option value="well_contracted">Well Contracted</option><option value="boggy">Boggy</option><option value="atonic">Atonic</option></select></div>
                <div><label class="form-label">Maternal BP</label><input type="text" name="maternal_bp" class="form-input text-xs" placeholder="120/80"></div>
                <div><label class="form-label">Temp °C</label><input type="number" step="0.1" name="maternal_temp" class="form-input text-xs"></div>
                <div><label class="form-label">Neonatal Status</label><select name="neonatal_status" class="form-input text-xs"><option value="well">Well</option><option value="unwell">Unwell</option><option value="nicu">NICU</option></select></div>
                <div><label class="form-label">Neonatal Weight (kg)</label><input type="number" step="0.01" name="neonatal_weight" class="form-input text-xs"></div>
                <div class="flex items-center gap-3"><label class="flex items-center gap-1.5 text-xs"><input type="checkbox" name="breastfeeding_initiated" value="1"> Breastfeeding</label><label class="flex items-center gap-1.5 text-xs"><input type="checkbox" name="discharge_ready" value="1"> Discharge Ready</label></div>
            </div>
            <textarea name="notes" class="form-input text-xs mt-2" rows="2" placeholder="Notes..."></textarea>
            <button type="submit" class="btn-success text-xs mt-3">Save Note</button>
        </form>
    </div>
    @endif
    <div class="bg-white rounded-xl border p-5">
        @forelse($ma->postnatalNotes as $note)
        <div class="border rounded-lg p-3 mb-3">
            <div class="flex justify-between text-xs text-gray-400 mb-2"><span>{{ $note->note_date?->format('d M Y H:i') ?? '-' }}</span><span>{{ $note->recorder?->name ?? '-' }}</span></div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
                <span>Bleeding: {{ ucfirst(str_replace('_',' ',$note->bleeding_status ?? '-')) }}</span>
                <span>Uterus: {{ ucfirst(str_replace('_',' ',$note->uterine_tone ?? '-')) }}</span>
                <span>BP: {{ $note->maternal_bp ?? '-' }}</span>
                <span>Baby: {{ ucfirst($note->neonatal_status ?? '-') }}</span>
            </div>
            @if($note->post_delivery_review)<p class="text-xs mt-1">{{ $note->post_delivery_review }}</p>@endif
            @if($note->notes)<p class="text-xs text-gray-500 mt-1">{{ $note->notes }}</p>@endif
        </div>
        @empty<p class="text-sm text-gray-400">No postnatal notes.</p>@endforelse
    </div>
</div>

{{-- ═══ DISCHARGE TAB ═══ --}}
<div class="mat-panel hidden" id="panel-discharge">
    @php
        $matCanDischarge = auth()->user()->hasAnyRole('Clinician','Super Admin','Hospital Admin');
        $matVisit        = $ma->visit;
        $matBalance      = $matVisit?->invoice?->balance ?? 0;
        $matDelivery     = $ma->resolvedDelivery;
        $matNewborns     = $matDelivery?->newborns ?? collect();
    @endphp

    @if($discharged)
    {{-- Already discharged: show summary card --}}
    <div class="bg-green-50 rounded-xl border border-green-200 p-5 mb-4">
        <div class="flex items-start justify-between gap-3">
            <div>
                <h4 class="text-sm font-semibold text-green-800 mb-1">Discharged: {{ $ma->discharge_date?->format('d M Y H:i') }}</h4>
                <p class="text-xs text-gray-600">Condition: <span class="font-semibold">{{ ucfirst($ma->condition_on_discharge ?? '-') }}</span></p>
                @if($ma->discharge_diagnosis)<p class="text-xs text-gray-600">Final diagnosis: <span class="font-medium">{{ $ma->discharge_diagnosis }}</span></p>@endif
                @if($ma->postnatal_review_date)<p class="text-xs text-gray-500 mt-1">Postnatal review: {{ $ma->postnatal_review_date->format('d M Y') }}</p>@endif
            </div>
            <a href="{{ route('print.maternity.discharge', $ma) }}" target="_blank" class="text-xs bg-white border border-green-300 text-green-700 px-3 py-1.5 rounded hover:bg-green-100 inline-flex items-center gap-1.5">
                <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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2z"/></svg>
                Print Discharge Summary
            </a>
        </div>
        @if($ma->discharge_summary)
        <div class="mt-3 pt-3 border-t border-green-200">
            <p class="text-xs font-semibold text-gray-700 uppercase mb-1">Hospital Course</p>
            <p class="text-sm whitespace-pre-wrap">{{ $ma->discharge_summary }}</p>
        </div>
        @endif
    </div>

    @elseif(!$matCanDischarge)
    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-5 text-center">
        <p class="text-sm font-semibold text-yellow-800">Patient not yet discharged.</p>
        <p class="text-xs text-yellow-600 mt-1">The discharge summary will be available to print here once the attending clinician completes the discharge.</p>
    </div>

    @else
    {{-- Not yet discharged: build the structured discharge form --}}
    <div class="border border-gray-200 rounded-xl overflow-hidden" id="mat-discharge-block">
        <div class="bg-gradient-to-r from-pink-50 to-rose-50 border-b border-gray-200 px-5 py-3 flex items-center justify-between">
            <h4 class="text-sm font-bold text-pink-800">Maternity Discharge Summary</h4>
            {{-- Round 16 fix: the previous button called window.print() on this
                 in-tab form, which produced an unformatted screen print without
                 the CRH letterhead. The link now opens the proper print view
                 (which uses partials/_document-header) in a new tab. Works
                 before AND after discharge — the print template renders from
                 whatever fields have been saved so far, so clinicians can
                 preview the document as they fill it in. --}}
            <a href="{{ route('print.maternity.discharge', $ma) }}" target="_blank"
               class="text-xs text-gray-500 bg-white border border-gray-200 px-3 py-1.5 rounded-lg hover:bg-gray-50 inline-flex items-center gap-1.5 no-underline">
                <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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2z"/></svg>
                Preview &amp; Print
            </a>
        </div>

        <form method="POST" action="{{ route('maternity.discharge', $ma) }}" id="mat-discharge-form">@csrf
        <div class="p-5 space-y-5">

            {{-- ── AUTO: Patient Demographics ── --}}
            <div>
                <h5 class="text-xs font-bold text-gray-400 uppercase tracking-wide mb-2">Mother</h5>
                <div class="bg-gray-50 rounded-lg p-3 grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                    <div><span class="text-xs text-gray-400 block">Name</span><span class="font-medium">{{ $p->full_name ?? '' }}</span></div>
                    <div><span class="text-xs text-gray-400 block">MRN</span><span class="font-mono">{{ $p->mrn ?? '' }}</span></div>
                    <div><span class="text-xs text-gray-400 block">Age</span><span>{{ $p->age ?? '-' }} years</span></div>
                    <div><span class="text-xs text-gray-400 block">Phone</span><span>{{ $p->phone ?? '-' }}</span></div>
                    @if($p->next_of_kin_name)<div class="md:col-span-2"><span class="text-xs text-gray-400 block">Next of Kin</span><span>{{ $p->next_of_kin_name }} ({{ $p->next_of_kin_phone ?? '' }})</span></div>@endif
                    @if($ma->ancRegistration)<div><span class="text-xs text-gray-400 block">ANC #</span><span class="font-mono">{{ $ma->ancRegistration->anc_number ?? $ma->ancRegistration->id }}</span></div>@endif
                </div>
            </div>

            {{-- ── AUTO: Admission Details ── --}}
            <div>
                <h5 class="text-xs font-bold text-gray-400 uppercase tracking-wide mb-2">Admission</h5>
                <div class="bg-gray-50 rounded-lg p-3 grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                    <div><span class="text-xs text-gray-400 block">Admission Date</span><span>{{ $ma->admission_date?->format('d M Y H:i') ?? '-' }}</span></div>
                    <div><span class="text-xs text-gray-400 block">G/A on Admission</span><span>{{ $ma->gestational_age_weeks ? $ma->gestational_age_weeks.' wks' : '-' }}</span></div>
                    <div><span class="text-xs text-gray-400 block">Length of Stay</span><span class="font-bold">{{ $ma->length_of_stay ?? '-' }} day{{ ($ma->length_of_stay ?? 0) == 1 ? '' : 's' }}</span></div>
                    <div><span class="text-xs text-gray-400 block">Attending Provider</span><span>{{ $ma->attendingProvider->name ?? '-' }}</span></div>
                    <div class="md:col-span-2"><span class="text-xs text-gray-400 block">Reason for Admission</span><span>{{ $ma->reason_for_admission ?? '-' }}</span></div>
                    <div class="md:col-span-2"><span class="text-xs text-gray-400 block">Diagnosis on Admission</span><span>{{ $ma->diagnosis ?? '-' }}</span></div>
                </div>
            </div>

            {{-- ── AUTO: Delivery Details ── --}}
            <div>
                <h5 class="text-xs font-bold text-gray-400 uppercase tracking-wide mb-2">Delivery</h5>
                @if($matDelivery)
                <div class="bg-gray-50 rounded-lg p-3 grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                    <div><span class="text-xs text-gray-400 block">Date / Time</span><span class="font-medium">{{ $matDelivery->delivery_date?->format('d M Y') ?? '-' }} {{ $matDelivery->delivery_time ?? '' }}</span></div>
                    <div><span class="text-xs text-gray-400 block">Mode</span><span class="font-medium">{{ ucfirst(str_replace('_',' ', $matDelivery->mode_of_delivery ?? '-')) }}</span></div>
                    <div><span class="text-xs text-gray-400 block">G/A at Delivery</span><span>{{ $matDelivery->gestational_age_at_delivery ? $matDelivery->gestational_age_at_delivery.' wk' : '-' }}</span></div>
                    <div><span class="text-xs text-gray-400 block">Duration of Labour</span><span>{{ $matDelivery->duration_of_labour ?? '-' }}</span></div>
                    <div><span class="text-xs text-gray-400 block">Blood Loss</span><span>{{ $matDelivery->blood_loss ? $matDelivery->blood_loss.' ml' : '-' }}</span></div>
                    <div><span class="text-xs text-gray-400 block">Placenta</span><span>{{ $matDelivery->placenta_complete === null ? '-' : ($matDelivery->placenta_complete ? '✓ Complete' : '⚠ Incomplete') }}</span></div>
                    <div><span class="text-xs text-gray-400 block">Perineum</span><span>{{ $matDelivery->perineum ?? '-' }}</span></div>
                    <div><span class="text-xs text-gray-400 block">Delivered By</span><span>{{ $matDelivery->deliveredBy->name ?? '-' }}</span></div>
                    @if($matDelivery->complications && (is_array($matDelivery->complications) ? count($matDelivery->complications) : true))
                    <div class="md:col-span-4"><span class="text-xs text-gray-400 block">Complications</span><span class="text-amber-700 font-medium">{{ is_array($matDelivery->complications) ? implode(', ', $matDelivery->complications) : $matDelivery->complications }}</span></div>
                    @endif
                </div>
                @else
                <p class="text-xs text-gray-400 bg-gray-50 rounded-lg p-3">No delivery recorded yet. <span class="text-amber-700">Record the delivery from the Postnatal tab before discharge if applicable.</span></p>
                @endif
            </div>

            {{-- ── AUTO: Newborn(s) ── --}}
            @if($matNewborns->count())
            <div>
                <h5 class="text-xs font-bold text-gray-400 uppercase tracking-wide mb-2">Newborn(s) — {{ $matNewborns->count() }}</h5>
                <div class="space-y-2">
                @foreach($matNewborns as $i => $nb)
                <div class="bg-orange-50 border border-orange-200 rounded-lg p-3">
                    <p class="text-xs font-bold text-orange-800 mb-2">Baby {{ $i + 1 }} · {{ ucfirst($nb->gender ?? 'unknown') }} · {{ $nb->birth_weight ? $nb->birth_weight.' kg' : 'weight not recorded' }}</p>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
                        <div><span class="text-gray-500 block">APGAR (1/5/10)</span><span class="font-mono">{{ $nb->apgar_1min ?? '-' }} / {{ $nb->apgar_5min ?? '-' }} / {{ $nb->apgar_10min ?? '-' }}</span></div>
                        <div><span class="text-gray-500 block">Resuscitation</span><span>{{ $nb->resuscitation ? 'Yes' : 'No' }}</span></div>
                        <div><span class="text-gray-500 block">Vitamin K</span><span>{{ $nb->vitamin_k ? '✓' : '✗' }}</span></div>
                        <div><span class="text-gray-500 block">BCG / OPV</span><span>{{ $nb->bcg ? 'BCG ✓' : 'BCG ✗' }} · {{ $nb->opv ? 'OPV ✓' : 'OPV ✗' }}</span></div>
                        <div><span class="text-gray-500 block">Breastfeeding</span><span>{{ $nb->breastfeeding_initiated ? '✓ Initiated' : '✗ Not initiated' }}</span></div>
                        <div class="md:col-span-3"><span class="text-gray-500 block">Abnormalities</span><span>{{ $nb->abnormalities ?: 'None noted' }}</span></div>
                    </div>
                </div>
                @endforeach
                </div>
            </div>
            @endif

            {{-- ── AUTO: Maternal Complications ── --}}
            @if($ma->complications->count())
            <div>
                <h5 class="text-xs font-bold text-gray-400 uppercase tracking-wide mb-2">Maternal Complications During Admission</h5>
                <div class="bg-gray-50 rounded-lg overflow-hidden">
                    <table class="w-full text-xs">
                        <thead class="bg-gray-100"><tr>
                            <th class="table-header">When</th>
                            <th class="table-header">Type</th>
                            <th class="table-header">Severity</th>
                            <th class="table-header">Management</th>
                            <th class="table-header">Outcome</th>
                        </tr></thead>
                        <tbody class="divide-y divide-gray-100">
                        @foreach($ma->complications as $c)
                        <tr>
                            <td class="table-cell text-xs">{{ $c->occurred_at?->format('d M H:i') ?? '-' }}</td>
                            <td class="table-cell text-xs font-medium">{{ ucwords(str_replace('_',' ', $c->complication_type)) }}</td>
                            <td class="table-cell text-xs"><span class="badge {{ in_array($c->severity, ['critical','severe']) ? 'badge-danger' : 'badge-warning' }}">{{ ucfirst($c->severity ?? '-') }}</span></td>
                            <td class="table-cell text-xs">{{ $c->management ?: '-' }}</td>
                            <td class="table-cell text-xs">{{ $c->outcome ?: '-' }} {{ $c->referred_out ? '(Referred)' : '' }}</td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endif

            {{-- ── AUTO: Investigations ── --}}
            <div>
                <h5 class="text-xs font-bold text-gray-400 uppercase tracking-wide mb-2">Investigations &amp; Results</h5>
                @if(($matVisit?->labOrders?->count() ?? 0) || ($matVisit?->imagingRequests?->count() ?? 0))
                <div class="bg-gray-50 rounded-lg overflow-hidden">
                    @if($matVisit->labOrders->count())
                    <table class="w-full text-xs">
                        <thead class="bg-gray-100"><tr>
                            <th class="table-header">Lab Test</th>
                            <th class="table-header">Result</th>
                            <th class="table-header">Status</th>
                        </tr></thead>
                        <tbody class="divide-y divide-gray-100">
                        @foreach($matVisit->labOrders as $lo)
                        <tr>
                            <td class="table-cell text-xs font-medium">{{ $lo->test_name }}</td>
                            <td class="table-cell text-xs">
                                @if($lo->result && is_array($lo->result->results))
                                    @php $res = $lo->result->results; @endphp
                                    @if(isset($res['generic']))
                                        {{ $res['generic']['value'] ?? '-' }} {{ $res['generic']['unit'] ?? '' }}
                                    @else
                                        @foreach($res as $param)
                                            @if(is_array($param) && isset($param['name']))
                                            <span class="{{ ($param['flag'] ?? '') !== 'normal' ? 'text-red-600 font-bold' : '' }}">{{ $param['short_code'] ?? $param['name'] }}: {{ $param['value'] ?? '-' }} {{ $param['unit'] ?? '' }}</span>@if(!$loop->last), @endif
                                            @endif
                                        @endforeach
                                    @endif
                                @elseif($lo->result)
                                    {{ $lo->result->results ?? '-' }}
                                @else - @endif
                            </td>
                            <td class="table-cell"><span class="badge {{ $lo->status==='validated'?'badge-success':($lo->status==='resulted'?'badge-info':'badge-warning') }}">{{ ucfirst($lo->status) }}</span></td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                    @endif
                    @if($matVisit->imagingRequests->count())
                    <table class="w-full text-xs {{ $matVisit->labOrders->count() ? 'border-t border-gray-200' : '' }}">
                        <thead class="bg-gray-100"><tr>
                            <th class="table-header">Imaging</th>
                            <th class="table-header">Findings</th>
                            <th class="table-header">Impression</th>
                        </tr></thead>
                        <tbody class="divide-y divide-gray-100">
                        @foreach($matVisit->imagingRequests as $ir)
                        <tr>
                            <td class="table-cell text-xs font-medium">{{ $ir->imaging_type }}</td>
                            <td class="table-cell text-xs">{{ $ir->report ? \Illuminate\Support\Str::limit($ir->report->findings, 100) : '–' }}</td>
                            <td class="table-cell text-xs font-medium">{{ $ir->report->impression ?? '-' }}</td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                    @endif
                </div>
                @else
                <p class="text-xs text-gray-400 bg-gray-50 rounded-lg p-3">No investigations ordered during this admission.</p>
                @endif
            </div>

            {{-- ── AUTO: Inpatient Medications ── --}}
            <div>
                <h5 class="text-xs font-bold text-gray-400 uppercase tracking-wide mb-2">Medications During Admission</h5>
                @if($matVisit?->prescriptions?->count())
                <div class="bg-gray-50 rounded-lg overflow-hidden">
                    <table class="w-full text-xs">
                        <thead class="bg-gray-100"><tr>
                            <th class="table-header">Drug</th>
                            <th class="table-header">Dose</th>
                            <th class="table-header">Freq</th>
                            <th class="table-header">Route</th>
                            <th class="table-header">Duration</th>
                            <th class="table-header">Status</th>
                        </tr></thead>
                        <tbody class="divide-y divide-gray-100">
                        @foreach($matVisit->prescriptions as $rx)
                        <tr>
                            <td class="table-cell text-xs font-medium">{{ $rx->drug_name }}</td>
                            <td class="table-cell text-xs">{{ $rx->dosage ?? '-' }}</td>
                            <td class="table-cell text-xs">{{ $rx->frequency ?? '-' }}</td>
                            <td class="table-cell text-xs">{{ $rx->route ?? '-' }}</td>
                            <td class="table-cell text-xs">{{ $rx->duration ?? '-' }}</td>
                            <td class="table-cell"><span class="badge {{ $rx->status==='dispensed'?'badge-success':'badge-warning' }}">{{ ucwords(str_replace('_',' ', $rx->status)) }}</span></td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
                @if($matVisit->prescriptions->where('status','!=','dispensed')->where('status','!=','cancelled')->count())
                <p class="text-xs text-amber-600 mt-1">⚠ Some medications are pending dispensing. Ensure pharmacy completes before finalizing discharge.</p>
                @endif
                @else
                <p class="text-xs text-gray-400 bg-gray-50 rounded-lg p-3">No medications prescribed during admission.</p>
                @endif
            </div>

            <hr class="border-gray-200">

            {{-- ═══ CLINICIAN INPUT SECTION ═══ --}}
            <div class="bg-pink-50 border border-pink-200 rounded-lg p-4">
                <h5 class="text-xs font-bold text-pink-800 uppercase mb-4">Clinician to Complete</h5>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div class="md:col-span-2">
                        <label class="form-label">Clinical Summary / Hospital Course <span class="text-red-500">*</span></label>
                        <textarea name="discharge_summary" required class="form-input" rows="5"
                                  placeholder="Summarize: presenting complaint, course of labour, mode of delivery, intra/postnatal events, response to treatment, and overall progress…">{{ old('discharge_summary', $ma->discharge_summary) }}</textarea>
                    </div>
                    <div>
                        <label class="form-label">Final Diagnosis <span class="text-red-500">*</span></label>
                        <input type="text" name="discharge_diagnosis" required class="form-input"
                               value="{{ old('discharge_diagnosis', $ma->discharge_diagnosis ?? $ma->diagnosis) }}"
                               placeholder="e.g. Term SVD live female infant; PNC day 1, BP normal">
                    </div>
                    <div>
                        <label class="form-label">Condition at Discharge <span class="text-red-500">*</span></label>
                        <select name="condition_on_discharge" required class="form-input">
                            <option value="">Select…</option>
                            <option value="improved" {{ old('condition_on_discharge', $ma->condition_on_discharge)==='improved'?'selected':'' }}>Improved</option>
                            <option value="stable" {{ old('condition_on_discharge', $ma->condition_on_discharge)==='stable'?'selected':'' }}>Stable</option>
                            <option value="deteriorated" {{ old('condition_on_discharge', $ma->condition_on_discharge)==='deteriorated'?'selected':'' }}>Deteriorated</option>
                            <option value="absconded" {{ old('condition_on_discharge', $ma->condition_on_discharge)==='absconded'?'selected':'' }}>Absconded</option>
                            <option value="deceased" {{ old('condition_on_discharge', $ma->condition_on_discharge)==='deceased'?'selected':'' }}>Deceased</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="form-label">Discharge Instructions to Mother</label>
                        <textarea name="discharge_instructions" class="form-input" rows="3"
                                  placeholder="Breastfeeding · perineal/wound care · danger signs (heavy bleeding, fever, severe headache, foul lochia) · family planning · contraception · nutrition · activity">{{ old('discharge_instructions', $ma->discharge_instructions) }}</textarea>
                    </div>
                    <div>
                        <label class="form-label">Postnatal Review Date</label>
                        <input type="date" name="postnatal_review_date" class="form-input"
                               value="{{ old('postnatal_review_date', $ma->postnatal_review_date?->format('Y-m-d') ?? now()->addWeek()->format('Y-m-d')) }}">
                    </div>
                    <div>
                        <label class="form-label">Follow-up Plan</label>
                        <textarea name="follow_up_plan" class="form-input" rows="2"
                                  placeholder="MCH clinic visit dates · pending results · referrals">{{ old('follow_up_plan', $ma->follow_up_plan) }}</textarea>
                    </div>
                </div>

                {{-- Discharge medications summary --}}
                @if($matVisit?->prescriptions?->count())
                <div class="mb-4">
                    <label class="form-label mb-2">Discharge Medications <span class="text-xs text-gray-400">(prescribed from Orders tab, dispensed by pharmacy)</span></label>
                    <div class="bg-white rounded-lg border border-gray-200 p-3 space-y-1">
                        @foreach($matVisit->prescriptions as $rx)
                        <div class="flex items-center gap-2 text-xs">
                            <span class="w-3 h-3 rounded-full {{ $rx->status==='dispensed' ? 'bg-green-400' : 'bg-amber-400' }}"></span>
                            <span class="font-medium">{{ $rx->drug_name }}</span>
                            <span class="text-gray-400">{{ $rx->dosage ?? '' }} · {{ $rx->frequency ?? '' }} · {{ $rx->duration ?? '' }}</span>
                            <span class="ml-auto badge {{ $rx->status==='dispensed'?'badge-success':'badge-warning' }} text-xs">{{ ucwords(str_replace('_',' ', $rx->status)) }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <div class="flex items-center gap-3 flex-wrap">
                    @if($matBalance > 0)
                    <div class="bg-red-100 border border-red-300 rounded-lg px-4 py-2 flex-1 min-w-[260px]">
                        <p class="text-xs font-bold text-red-800">Outstanding Balance: KES {{ number_format($matBalance) }}</p>
                        <p class="text-xs text-red-600">Bill must be cleared before discharge. Check the Orders tab to record payment.</p>
                    </div>
                    <button type="button" disabled class="btn-danger px-6 opacity-50 cursor-not-allowed">Discharge Patient</button>
                    @else
                    <button type="submit" class="btn-danger px-6"
                            onclick="return confirm('Discharge this maternity patient?\n\nThis will:\n• Finalize the discharge summary\n• Close the visit\n• Move patient to Discharged list')">
                        Discharge Patient
                    </button>
                    <span class="text-xs text-green-600 font-semibold">✓ Bill cleared</span>
                    @endif
                </div>
            </div>
        </div>
        </form>
    </div>
    @endif
</div>

@endsection

@push('scripts')
<script>
function showMatTab(tab){
    document.querySelectorAll('.mat-panel').forEach(p=>p.classList.add('hidden'));
    document.querySelectorAll('.mat-tab').forEach(t=>{t.classList.remove('bg-white','text-pink-700','border-pink-200');t.classList.add('bg-gray-50','text-gray-500','border-transparent');});
    document.getElementById('panel-'+tab).classList.remove('hidden');
    const btn=document.querySelector(`.mat-tab[data-tab="${tab}"]`);
    btn.classList.remove('bg-gray-50','text-gray-500','border-transparent');
    btn.classList.add('bg-white','text-pink-700','border-pink-200');
    if(tab==='labour')drawPartograph();
}

// Maternity Orders tab — lab/imaging/drug autocomplete (IPD-style embedded JSON)
const _matLabTests   = {!! $matLabTestsJson ?? '[]' !!};
const _matImagingSvc = {!! $matImagingJson ?? '[]' !!};
const _matDrugs      = {!! $matDrugsJson ?? '[]' !!};

// Maternity Billing tab — service catalog for the "Add service" search,
// plus the in-place qty/price edit AJAX. Mirrors the IPD billing JS,
// renamed to avoid colliding if both tabs were ever loaded together
// (they can't be — separate views — but keeping the namespace clean
// makes future audits trivial).
const _matServices = {!! $matServiceListJson ?? '[]' !!};

function filterMatBillServices(q) {
    const dd  = document.getElementById('mat-bill-dropdown');
    const sid = document.getElementById('mat-bill-service-id');
    if (!dd) return;
    const term = (q || '').trim().toLowerCase();
    if (!term) { dd.classList.add('hidden'); dd.innerHTML = ''; return; }
    const matches = _matServices.filter(s =>
        (s.name && s.name.toLowerCase().includes(term)) ||
        (s.code && s.code.toLowerCase().includes(term)) ||
        (s.category && s.category.toLowerCase().includes(term))
    ).slice(0, 30);
    if (!matches.length) { dd.innerHTML = '<div class="px-3 py-2 text-xs text-gray-400">No matches</div>'; dd.classList.remove('hidden'); return; }
    dd.innerHTML = matches.map(s =>
        `<div class="px-3 py-2 hover:bg-pink-50 cursor-pointer text-xs border-b border-gray-50 flex justify-between"
              onclick="pickMatBillService(${s.id}, ${JSON.stringify(s.name).replace(/"/g, '&quot;')}, ${JSON.stringify(s.category || '').replace(/"/g, '&quot;')}, ${s.price})">
            <span><span class="font-medium">${s.name}</span> <span class="text-gray-400 ml-1">${s.code || ''}</span></span>
            <span class="text-gray-500 font-mono">KES ${Number(s.price).toLocaleString()}</span>
        </div>`
    ).join('');
    dd.classList.remove('hidden');
}

function pickMatBillService(id, name, category, price) {
    document.getElementById('mat-bill-search').value = name;
    document.getElementById('mat-bill-cat').value    = category || '';
    document.getElementById('mat-bill-price').value  = price;
    document.getElementById('mat-bill-service-id').value = id;
    const dd = document.getElementById('mat-bill-dropdown');
    if (dd) { dd.classList.add('hidden'); dd.innerHTML = ''; }
}

// Click-outside closer for the search dropdown
document.addEventListener('click', function(e){
    const dd = document.getElementById('mat-bill-dropdown');
    const inp = document.getElementById('mat-bill-search');
    if (dd && !dd.contains(e.target) && e.target !== inp) {
        dd.classList.add('hidden');
    }
});

// In-place item update — same endpoint IPD uses (PATCH /billing/item/{item})
function updateMatBillItem(itemId, inputEl) {
    const row  = document.getElementById('mat-bill-row-' + itemId);
    if (!row) return;
    const qtyEl   = row.querySelector('input[type="number"]:nth-of-type(1)');
    const priceEl = row.querySelector('input[type="number"]:nth-of-type(2)');
    const qty   = qtyEl   ? Number(qtyEl.value)   : null;
    const price = priceEl ? Number(priceEl.value) : null;

    const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';
    fetch(`${window.HMIS_BASE || ''}/billing/item/${itemId}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json', 'X-HTTP-Method-Override': 'PATCH' },
        body: JSON.stringify({ quantity: qty, unit_price: price, _method: 'PATCH' }),
    }).then(r => r.json()).then(data => {
        if (data && (data.line_total != null || data.total != null)) {
            const lineTotal = data.line_total ?? data.total;
            const cell = document.getElementById('mat-bill-total-' + itemId);
            if (cell) cell.textContent = Number(lineTotal).toLocaleString('en-KE', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
            if (data.invoice_total != null) {
                const gt = document.getElementById('matGrandTotal');
                if (gt) gt.textContent = 'KES ' + Number(data.invoice_total).toLocaleString('en-KE', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
            }
        } else {
            // Fallback — reload so the totals don't get out of sync
            window.location.reload();
        }
    }).catch(() => window.location.reload());
}

// Payment method visibility toggles — show insurer / mpesa channel only when applicable
function toggleMatPaySub(method) {
    document.querySelectorAll('.mat-pay-sub').forEach(el => el.style.display = 'none');
    if (method === 'insurance') {
        const ins = document.querySelector('.mat-pay-ins');
        if (ins) {
            ins.style.display = '';
            // If insurer is already SHA, immediately show the SHA panel
            const shaName = ins.getAttribute('data-sha-name');
            toggleMatShaPanel(ins.value || '', shaName);
        }
    } else if (method === 'mpesa') {
        const mp = document.querySelector('.mat-pay-mpesa');
        if (mp) mp.style.display = '';
        document.getElementById('mat-sha-panel').style.display = 'none';
    } else {
        document.getElementById('mat-sha-panel').style.display = 'none';
    }
}

function toggleMatShaPanel(selectedInsurerName, shaName) {
    const panel = document.getElementById('mat-sha-panel');
    if (!panel) return;
    panel.style.display = (selectedInsurerName === shaName) ? '' : 'none';
}

// Position a fixed-positioned dropdown directly under its input. Mirrors
// IPD pattern; required because the dropdowns use position:fixed to escape
// any overflow:hidden ancestor.
function matPositionDropdown(inputId, ddId) {
    const input = document.getElementById(inputId);
    const dd    = document.getElementById(ddId);
    if (!input || !dd) return;
    const r = input.getBoundingClientRect();
    dd.style.left  = r.left + 'px';
    dd.style.top   = (r.bottom + 2) + 'px';
    dd.style.width = r.width + 'px';
}

function matDropdownItem(text, sub, price, idx) {
    return `<div class="mat-dd-item px-3 py-2 hover:bg-pink-50 cursor-pointer text-xs border-b border-gray-50 flex justify-between" data-idx="${idx}">
        <span><span class="font-medium">${text}</span>${sub ? '<span class="text-gray-400 ml-1">'+sub+'</span>' : ''}</span>
        <span class="text-gray-500 font-mono">KES ${Number(price).toLocaleString()}</span>
    </div>`;
}

function filterMatLabTests(q) {
    const dd = document.getElementById('mat-lab-dropdown');
    if (!dd) return;
    if (q.length < 1) { dd.classList.add('hidden'); return; }
    const items = _matLabTests.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) => matDropdownItem(t.name, t.category, t.price, i)).join('');
    dd.querySelectorAll('.mat-dd-item').forEach(el => {
        el.onclick = function(e) {
            e.stopPropagation();
            const t = items[parseInt(this.dataset.idx)];
            document.getElementById('mat-lab-test-id').value = t.id;
            document.getElementById('mat-lab-search').value = t.name;
            const hint = document.getElementById('mat-lab-price-hint');
            if (hint) hint.textContent = t.category + ' · KES ' + Number(t.price).toLocaleString();
            dd.classList.add('hidden');
        };
    });
    dd.classList.toggle('hidden', items.length === 0);
    if (items.length) matPositionDropdown('mat-lab-search', 'mat-lab-dropdown');
}

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

function filterMatDrugs(q) {
    const dd = document.getElementById('mat-rx-dropdown');
    if (!dd) return;
    if (q.length < 1) { dd.classList.add('hidden'); return; }
    const items = _matDrugs.filter(d =>
        d.name.toLowerCase().includes(q.toLowerCase()) ||
        (d.generic_name || '').toLowerCase().includes(q.toLowerCase())
    );
    dd.innerHTML = items.slice(0, 15).map((d, i) => matDropdownItem(d.name, d.strength || d.generic_name || '', d.price, i)).join('');
    dd.querySelectorAll('.mat-dd-item').forEach(el => {
        el.onclick = function(e) {
            e.stopPropagation();
            const d = items[parseInt(this.dataset.idx)];
            document.getElementById('mat-rx-drug-id').value = d.id;
            document.getElementById('mat-rx-search').value = d.name;
            dd.classList.add('hidden');
        };
    });
    dd.classList.toggle('hidden', items.length === 0);
    if (items.length) matPositionDropdown('mat-rx-search', 'mat-rx-dropdown');
}

// Reposition any open dropdown when the page scrolls or window resizes
['scroll','resize'].forEach(evt => {
    window.addEventListener(evt, () => {
        [['mat-lab-search','mat-lab-dropdown'],
         ['mat-imaging-search','mat-imaging-dropdown'],
         ['mat-rx-search','mat-rx-dropdown']].forEach(([s, d]) => {
            const dd = document.getElementById(d);
            if (dd && !dd.classList.contains('hidden')) matPositionDropdown(s, d);
        });
    }, { passive: true });
});

// Close any open dropdown when clicking outside
document.addEventListener('click', (e) => {
    [['mat-lab-search','mat-lab-dropdown'],['mat-imaging-search','mat-imaging-dropdown'],['mat-rx-search','mat-rx-dropdown']].forEach(([sId, dId]) => {
        const input = document.getElementById(sId);
        const dd    = document.getElementById(dId);
        if (input && dd && !input.contains(e.target) && !dd.contains(e.target)) {
            dd.classList.add('hidden');
        }
    });
});

function drawPartograph(){
    const canvas=document.getElementById('partograph-canvas');
    if(!canvas)return;
    const ctx=canvas.getContext('2d');

    // ─── Data prep ──────────────────────────────────────────────────────────
    @php
        $chartData = $entries->map(function($e) {
            // Compute fractional hour from the first observation so points land
            // proportionally on the time axis instead of clustering at integers.
            return [
                'recorded_at' => $e->recorded_at?->toIso8601String(),
                'hour'        => (float) ($e->hour_number ?? 0),
                'fhr'         => $e->fetal_heart_rate,
                'liquor'      => $e->amniotic_fluid,
                'moulding'    => $e->moulding,
                'cx'          => $e->cervical_dilatation_cm,
                'descent'     => $e->descent,
                'contractions'=> $e->contractions_per_10min,
                'duration'    => $e->contraction_duration,
                'oxytocin'    => $e->oxytocin,
                'medicines'   => $e->medicines,
                'iv_fluids'   => $e->iv_fluids,
                'sys'         => $e->systolic_bp,
                'dia'         => $e->diastolic_bp,
                'pulse'       => $e->maternal_pulse,
                'temp'        => $e->maternal_temp ? (float) $e->maternal_temp : null,
                'urine_p'     => $e->urine_protein,
                'urine_a'     => $e->urine_acetone,
                'time'        => $e->recorded_at?->format('H:i'),
            ];
        })->values();
    @endphp
    const data = @json($chartData);

    // Build a continuous fractional-hour value from the first recording so a
    // 09:00 first obs and an 09:30 second obs sit at hour 0.0 and 0.5 even if
    // hour_number was integer-rounded server-side.
    if (data.length && data[0].recorded_at) {
        const t0 = new Date(data[0].recorded_at).getTime();
        data.forEach(d => {
            if (d.recorded_at) {
                const tn = new Date(d.recorded_at).getTime();
                d.hourFrac = (tn - t0) / 3600000;
            } else {
                d.hourFrac = d.hour;
            }
        });
    } else {
        data.forEach(d => d.hourFrac = d.hour);
    }

    const maxHour = Math.max(12, ...data.map(d => Math.ceil(d.hourFrac) + 1));

    // ─── Layout ─────────────────────────────────────────────────────────────
    const rect = canvas.parentElement.getBoundingClientRect();
    const W = rect.width;
    // Left margin needs to clear the widest Y-axis numeric label only — track
    // names are now drawn above each frame so they don't fight with the numbers.
    const margin = { top: 30, right: 60, bottom: 40, left: 42 };
    const labelGap = 14;  // vertical space reserved above each track for its name

    // Track heights (px). The cervix/descent track is the tallest; the rest
    // are compact.
    const tracks = [
        { id: 'fhr',          h: 110, label: 'Fetal Heart Rate (bpm)' },
        { id: 'liquor',       h: 22,  label: 'Liquor' },
        { id: 'moulding',     h: 22,  label: 'Moulding' },
        { id: 'cervix',       h: 200, label: 'Cervix (X = cm) · Descent (O = fifths)' },
        { id: 'contractions', h: 70,  label: 'Contractions per 10 min' },
        { id: 'oxytocin',     h: 22,  label: 'Oxytocin' },
        { id: 'meds',         h: 22,  label: 'Drugs / IV Fluids' },
        { id: 'bp',           h: 110, label: 'BP (↕) · Pulse (●)' },
        { id: 'temp',         h: 50,  label: 'Temperature °C' },
        { id: 'urine',        h: 22,  label: 'Urine — Protein / Acetone' },
    ];
    const trackGap = 6;
    // Each track now occupies (labelGap + h); recompute total
    const totalTrackH = tracks.reduce((a, t) => a + labelGap + t.h + trackGap, 0);
    const H = margin.top + margin.bottom + totalTrackH;

    // High-DPI scaling
    const dpr = window.devicePixelRatio || 1;
    canvas.width  = W * dpr;
    canvas.height = H * dpr;
    canvas.style.height = H + 'px';
    ctx.scale(dpr, dpr);
    ctx.clearRect(0, 0, W, H);

    const gW = W - margin.left - margin.right;
    const xAt = h => margin.left + (h / maxHour) * gW;

    // ─── Helper: draw a track frame + label ─────────────────────────────────
    // Label sits ABOVE the frame so it doesn't compete with Y-axis numeric
    // labels for horizontal space. trackTops[id] points at the top of the
    // drawable frame (NOT the label), so all the per-track plotters work
    // unchanged in their internal coords.
    let cursor = margin.top;
    const trackTops = {};
    tracks.forEach(t => {
        // Draw the label first, in the labelGap space above the frame
        ctx.fillStyle = '#1f2937';
        ctx.font = 'bold 10px sans-serif';
        ctx.textAlign = 'left';
        ctx.fillText(t.label, margin.left, cursor + 10);
        cursor += labelGap;
        // Now the frame
        trackTops[t.id] = cursor;
        ctx.strokeStyle = '#cbd5e1';
        ctx.lineWidth = 0.8;
        ctx.strokeRect(margin.left, cursor, gW, t.h);
        cursor += t.h + trackGap;
    });

    // ─── Vertical hour grid across all tracks ───────────────────────────────
    ctx.strokeStyle = '#e5e7eb';
    ctx.lineWidth = 0.4;
    for (let h = 0; h <= maxHour; h++) {
        const x = xAt(h);
        ctx.beginPath();
        ctx.moveTo(x, margin.top);
        ctx.lineTo(x, H - margin.bottom);
        ctx.stroke();
    }
    // Hour labels at top
    ctx.fillStyle = '#475569';
    ctx.font = 'bold 9px sans-serif';
    ctx.textAlign = 'center';
    for (let h = 0; h <= maxHour; h++) {
        ctx.fillText(h + 'h', xAt(h), margin.top - 8);
    }

    // ─── Time-of-day labels at the bottom (HH:mm from observations) ─────────
    if (data.length && data[0].recorded_at) {
        const t0 = new Date(data[0].recorded_at);
        ctx.fillStyle = '#94a3b8';
        ctx.font = '8px sans-serif';
        for (let h = 0; h <= maxHour; h++) {
            const t = new Date(t0.getTime() + h * 3600000);
            const hh = String(t.getHours()).padStart(2, '0');
            const mm = String(t.getMinutes()).padStart(2, '0');
            ctx.fillText(`${hh}:${mm}`, xAt(h), H - margin.bottom + 12);
        }
    }

    // ─── 1. FHR TRACK (60-200 bpm; normal band 110-160 shaded green) ────────
    {
        const y0 = trackTops.fhr;
        const h  = 110;
        const lo = 60, hi = 200;
        const yAt = bpm => y0 + h - ((bpm - lo) / (hi - lo)) * h;
        // Normal band shading
        ctx.fillStyle = 'rgba(134,239,172,0.35)';
        ctx.fillRect(margin.left, yAt(160), gW, yAt(110) - yAt(160));
        // Y-axis labels
        ctx.fillStyle = '#6b7280';
        ctx.font = '8px sans-serif';
        ctx.textAlign = 'right';
        [60, 100, 110, 120, 140, 160, 180, 200].forEach(v => {
            ctx.fillText(v, margin.left - 4, yAt(v) + 3);
            ctx.strokeStyle = (v === 110 || v === 160) ? '#16a34a' : '#f1f5f9';
            ctx.lineWidth = (v === 110 || v === 160) ? 0.7 : 0.4;
            ctx.beginPath(); ctx.moveTo(margin.left, yAt(v)); ctx.lineTo(margin.left + gW, yAt(v)); ctx.stroke();
        });
        // Plot line + dots
        ctx.strokeStyle = '#0ea5e9';
        ctx.fillStyle   = '#0ea5e9';
        ctx.lineWidth = 1.5;
        let prev = null;
        data.forEach(d => {
            if (d.fhr == null) return;
            const x = xAt(d.hourFrac);
            const y = yAt(Math.max(lo, Math.min(hi, d.fhr)));
            ctx.beginPath(); ctx.arc(x, y, 2.5, 0, Math.PI * 2); ctx.fill();
            if (prev) { ctx.beginPath(); ctx.moveTo(prev.x, prev.y); ctx.lineTo(x, y); ctx.stroke(); }
            prev = { x, y };
            // Highlight abnormal
            if (d.fhr < 110 || d.fhr > 160) {
                ctx.fillStyle = '#dc2626';
                ctx.font = 'bold 8px sans-serif';
                ctx.textAlign = 'center';
                ctx.fillText(d.fhr, x, y - 5);
                ctx.fillStyle = '#0ea5e9';
            }
        });
    }

    // ─── 2. LIQUOR TRACK (single letter per obs) ────────────────────────────
    {
        const y0 = trackTops.liquor;
        const map = { intact: 'I', clear: 'C', meconium_thin: 'M', meconium_thick: 'M', bloody: 'B', absent: 'A' };
        const colorMap = { intact: '#0ea5e9', clear: '#0ea5e9', meconium_thin: '#ca8a04', meconium_thick: '#dc2626', bloody: '#dc2626', absent: '#6b7280' };
        ctx.font = 'bold 11px sans-serif';
        ctx.textAlign = 'center';
        data.forEach(d => {
            if (!d.liquor) return;
            const x = xAt(d.hourFrac);
            ctx.fillStyle = colorMap[d.liquor] || '#475569';
            ctx.fillText(map[d.liquor] || '?', x, y0 + 16);
        });
    }

    // ─── 3. MOULDING TRACK ──────────────────────────────────────────────────
    {
        const y0 = trackTops.moulding;
        ctx.font = 'bold 10px sans-serif';
        ctx.textAlign = 'center';
        data.forEach(d => {
            if (!d.moulding) return;
            const x = xAt(d.hourFrac);
            const heavy = (d.moulding === '++' || d.moulding === '+++');
            ctx.fillStyle = heavy ? '#dc2626' : '#475569';
            ctx.fillText(d.moulding, x, y0 + 15);
        });
    }

    // ─── 4. CERVIX + DESCENT TRACK with WHO Alert/Action lines ──────────────
    {
        const y0 = trackTops.cervix;
        const h  = 200;
        const yCx = cm => y0 + h - (cm / 10) * h;
        const yDe = fifths => y0 + ((5 - fifths) / 5) * h;
        // Cervix Y-axis (left)
        ctx.font = '8px sans-serif';
        ctx.textAlign = 'right';
        for (let cm = 0; cm <= 10; cm++) {
            const y = yCx(cm);
            ctx.strokeStyle = (cm % 5 === 0) ? '#cbd5e1' : '#f1f5f9';
            ctx.lineWidth = 0.4;
            ctx.beginPath(); ctx.moveTo(margin.left, y); ctx.lineTo(margin.left + gW, y); ctx.stroke();
            ctx.fillStyle = '#2563eb';
            ctx.fillText(cm, margin.left - 4, y + 3);
        }
        // Descent Y-axis (right)
        ctx.textAlign = 'left';
        ['5/5','4/5','3/5','2/5','1/5','0/5'].forEach((lbl, i) => {
            const y = yDe(5 - i);
            ctx.fillStyle = '#16a34a';
            ctx.font = '8px sans-serif';
            ctx.fillText(lbl, margin.left + gW + 4, y + 3);
        });

        // Alert line: 1cm/hr starting at 4cm; ends at 10cm = 6h later
        ctx.strokeStyle = '#ef4444';
        ctx.lineWidth = 1.2;
        ctx.setLineDash([5, 4]);
        ctx.beginPath();
        ctx.moveTo(xAt(0), yCx(4));
        ctx.lineTo(xAt(6), yCx(10));
        ctx.stroke();
        ctx.setLineDash([]);
        ctx.fillStyle = '#ef4444';
        ctx.font = 'bold 8px sans-serif';
        ctx.textAlign = 'left';
        ctx.fillText('Alert', xAt(6) + 2, yCx(10) - 4);

        // Action line: 4h to right of alert
        ctx.strokeStyle = '#dc2626';
        ctx.lineWidth = 1.2;
        ctx.setLineDash([3, 3]);
        ctx.beginPath();
        ctx.moveTo(xAt(4), yCx(4));
        ctx.lineTo(xAt(Math.min(maxHour, 10)), yCx(10));
        ctx.stroke();
        ctx.setLineDash([]);
        ctx.fillStyle = '#dc2626';
        ctx.fillText('Action', xAt(Math.min(maxHour, 10)) + 2, yCx(10) + 8);

        // Plot Cervix as X
        ctx.strokeStyle = '#2563eb';
        ctx.lineWidth = 2;
        let prevCx = null;
        data.forEach(d => {
            if (d.cx == null) return;
            const x = xAt(d.hourFrac);
            const y = yCx(d.cx);
            const s = 5;
            ctx.beginPath(); ctx.moveTo(x - s, y - s); ctx.lineTo(x + s, y + s); ctx.stroke();
            ctx.beginPath(); ctx.moveTo(x + s, y - s); ctx.lineTo(x - s, y + s); ctx.stroke();
            if (prevCx) { ctx.beginPath(); ctx.moveTo(prevCx.x, prevCx.y); ctx.lineTo(x, y); ctx.stroke(); }
            prevCx = { x, y };
        });

        // Plot Descent as O
        ctx.strokeStyle = '#16a34a';
        ctx.lineWidth = 1.5;
        let prevDe = null;
        data.forEach(d => {
            if (!d.descent) return;
            const fifths = parseInt(d.descent);
            if (isNaN(fifths)) return;
            const x = xAt(d.hourFrac);
            const y = yDe(fifths);
            ctx.beginPath(); ctx.arc(x, y, 5, 0, Math.PI * 2); ctx.stroke();
            if (prevDe) { ctx.beginPath(); ctx.moveTo(prevDe.x, prevDe.y); ctx.lineTo(x, y); ctx.stroke(); }
            prevDe = { x, y };
        });
    }

    // ─── 5. CONTRACTIONS TRACK (count per 10min, shaded by duration) ────────
    {
        const y0 = trackTops.contractions;
        const h  = 70;
        const cellW = gW / maxHour;
        // Y labels 1-5
        ctx.fillStyle = '#475569';
        ctx.font = '8px sans-serif';
        ctx.textAlign = 'right';
        for (let i = 1; i <= 5; i++) {
            const y = y0 + h - (i / 5) * h;
            ctx.fillText(i, margin.left - 4, y + 3);
            ctx.strokeStyle = '#f1f5f9';
            ctx.lineWidth = 0.4;
            ctx.beginPath(); ctx.moveTo(margin.left, y); ctx.lineTo(margin.left + gW, y); ctx.stroke();
        }
        const fillFor = dur => {
            if (dur === '<20s')   return 'rgba(96,165,250,0.45)';   // light dots in original chart
            if (dur === '20-40s') return 'rgba(37,99,235,0.7)';     // hatched in original
            if (dur === '>40s')   return 'rgba(30,58,138,0.95)';    // solid in original
            return 'rgba(100,116,139,0.55)';
        };
        data.forEach(d => {
            if (!d.contractions) return;
            const n = Math.min(5, Math.max(0, parseInt(d.contractions) || 0));
            if (n === 0) return;
            const x = xAt(d.hourFrac);
            const barH = (n / 5) * h;
            ctx.fillStyle = fillFor(d.duration);
            ctx.fillRect(x - cellW * 0.35, y0 + h - barH, cellW * 0.7, barH);
            // Count label on top
            ctx.fillStyle = '#1e3a8a';
            ctx.font = 'bold 8px sans-serif';
            ctx.textAlign = 'center';
            ctx.fillText(n, x, y0 + h - barH - 2);
        });
    }

    // ─── 6. OXYTOCIN TRACK ──────────────────────────────────────────────────
    {
        const y0 = trackTops.oxytocin;
        ctx.font = '8px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillStyle = '#b45309';
        data.forEach(d => {
            if (!d.oxytocin) return;
            const x = xAt(d.hourFrac);
            ctx.fillText(String(d.oxytocin).slice(0, 12), x, y0 + 14);
        });
    }

    // ─── 7. MEDICATIONS / IV TRACK ──────────────────────────────────────────
    {
        const y0 = trackTops.meds;
        ctx.font = '8px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillStyle = '#7c2d12';
        data.forEach(d => {
            const txt = [d.iv_fluids, d.medicines].filter(Boolean).join(' / ');
            if (!txt) return;
            const x = xAt(d.hourFrac);
            ctx.fillText(txt.slice(0, 16), x, y0 + 14);
        });
    }

    // ─── 8. BP + PULSE TRACK (60-200) ───────────────────────────────────────
    {
        const y0 = trackTops.bp;
        const h  = 110;
        const lo = 40, hi = 200;
        const yBP = v => y0 + h - ((v - lo) / (hi - lo)) * h;
        // Y labels
        ctx.fillStyle = '#475569';
        ctx.font = '8px sans-serif';
        ctx.textAlign = 'right';
        [40, 80, 120, 140, 160, 200].forEach(v => {
            ctx.fillText(v, margin.left - 4, yBP(v) + 3);
            ctx.strokeStyle = (v === 140 || v === 90) ? '#fca5a5' : '#f1f5f9';
            ctx.lineWidth = (v === 140) ? 0.7 : 0.4;
            ctx.beginPath(); ctx.moveTo(margin.left, yBP(v)); ctx.lineTo(margin.left + gW, yBP(v)); ctx.stroke();
        });
        // BP arrows + Pulse dots
        let prevPulse = null;
        data.forEach(d => {
            const x = xAt(d.hourFrac);
            // BP as a vertical arrow from systolic (top) to diastolic (bottom)
            if (d.sys && d.dia) {
                const ySys = yBP(d.sys);
                const yDia = yBP(d.dia);
                const high = (d.sys >= 140 || d.dia >= 90);
                ctx.strokeStyle = high ? '#dc2626' : '#0f172a';
                ctx.fillStyle   = high ? '#dc2626' : '#0f172a';
                ctx.lineWidth = 1.5;
                ctx.beginPath(); ctx.moveTo(x, ySys); ctx.lineTo(x, yDia); ctx.stroke();
                // Up-arrowhead at systolic
                ctx.beginPath(); ctx.moveTo(x - 3, ySys + 3); ctx.lineTo(x, ySys); ctx.lineTo(x + 3, ySys + 3); ctx.stroke();
                // Down-arrowhead at diastolic
                ctx.beginPath(); ctx.moveTo(x - 3, yDia - 3); ctx.lineTo(x, yDia); ctx.lineTo(x + 3, yDia - 3); ctx.stroke();
            }
            // Pulse as filled dot connected by line
            if (d.pulse) {
                const yp = yBP(d.pulse);
                ctx.fillStyle = '#7c3aed';
                ctx.beginPath(); ctx.arc(x, yp, 3, 0, Math.PI * 2); ctx.fill();
                if (prevPulse) {
                    ctx.strokeStyle = '#7c3aed'; ctx.lineWidth = 1.2;
                    ctx.beginPath(); ctx.moveTo(prevPulse.x, prevPulse.y); ctx.lineTo(x, yp); ctx.stroke();
                }
                prevPulse = { x, y: yp };
            }
        });
    }

    // ─── 9. TEMP TRACK (35-40°C) ────────────────────────────────────────────
    {
        const y0 = trackTops.temp;
        const h  = 50;
        const lo = 35, hi = 40;
        const yT = v => y0 + h - ((v - lo) / (hi - lo)) * h;
        ctx.fillStyle = '#475569';
        ctx.font = '8px sans-serif';
        ctx.textAlign = 'right';
        [35, 36, 37, 38, 39, 40].forEach(v => {
            ctx.fillText(v.toFixed(1), margin.left - 4, yT(v) + 3);
            ctx.strokeStyle = (v === 38) ? '#fca5a5' : '#f1f5f9';
            ctx.lineWidth = (v === 38) ? 0.7 : 0.4;
            ctx.beginPath(); ctx.moveTo(margin.left, yT(v)); ctx.lineTo(margin.left + gW, yT(v)); ctx.stroke();
        });
        // Plot temperature line
        ctx.strokeStyle = '#ea580c';
        ctx.fillStyle   = '#ea580c';
        ctx.lineWidth = 1.5;
        let prev = null;
        data.forEach(d => {
            if (d.temp == null) return;
            const x = xAt(d.hourFrac);
            const y = yT(Math.max(lo, Math.min(hi, d.temp)));
            ctx.beginPath(); ctx.arc(x, y, 2.5, 0, Math.PI * 2); ctx.fill();
            if (prev) { ctx.beginPath(); ctx.moveTo(prev.x, prev.y); ctx.lineTo(x, y); ctx.stroke(); }
            prev = { x, y };
        });
    }

    // ─── 10. URINE TRACK (P/A combined) ─────────────────────────────────────
    {
        const y0 = trackTops.urine;
        ctx.font = 'bold 8px sans-serif';
        ctx.textAlign = 'center';
        const sym = v => {
            if (!v) return '';
            const map = { 'Nil': '0', 'Trace': 'tr', '+': '+', '++': '++', '+++': '+++' };
            return map[v] || v;
        };
        data.forEach(d => {
            if (!d.urine_p && !d.urine_a) return;
            const x = xAt(d.hourFrac);
            const heavy = (d.urine_p === '++' || d.urine_p === '+++');
            ctx.fillStyle = heavy ? '#dc2626' : '#475569';
            ctx.fillText(`P:${sym(d.urine_p) || '-'} A:${sym(d.urine_a) || '-'}`, x, y0 + 14);
        });
    }

    // Time-axis label at the bottom
    ctx.fillStyle = '#1f2937';
    ctx.font = 'bold 9px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('Hours since first observation', margin.left + gW / 2, H - 6);
}

// Re-render when window resizes (the canvas is width-responsive)
let _drawPartoTimer;
window.addEventListener('resize', () => {
    clearTimeout(_drawPartoTimer);
    _drawPartoTimer = setTimeout(() => {
        if (!document.getElementById('panel-labour')?.classList.contains('hidden')) drawPartograph();
    }, 200);
}, { passive: true });

// Draw on page load if labour tab is visible
document.addEventListener('DOMContentLoaded',()=>{if(!document.getElementById('panel-labour')?.classList.contains('hidden'))drawPartograph();});
</script>

@include('partials._tab-state-helper', ['defaultTab' => 'overview'])
@endpush