@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 Case Summary print was
         permanently disabled because there's no consultation gate on a
         maternity admission, so the diagnosis field on the admission
         itself was never visible/editable after admit. This card lets
         the attending clinician set or update the working diagnosis at
         any time during the stay, which unlocks the Case Summary print
         on the Billing tab and seeds the Final Diagnosis on Discharge. --}}
    <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">Required to print the Case Summary (Billing tab) and pre-fills the Final Diagnosis at discharge.</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','Reception/Cashier','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())
        <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');
            @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">
                    @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
                </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('Reception/Cashier','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('Reception/Cashier','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('Reception/Cashier','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','Reception/Cashier','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('Reception/Cashier','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="mpesa">M-Pesa</option>
                            <option value="kcb">KCB</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 | Case Summary
         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 16 — Case Summary now uses the maternity-specific print
         endpoint and is gated on the admission's own diagnosis field
         (set/updated from the Overview tab), not a phantom consultation
         that doesn't exist for maternity encounters. --}}
    @php
        $matVisit_btn = $ma->visit;
        $matPayments_btn = $matInv?->payments ?? collect();
        $matLastReceipt = $matPayments_btn->last()?->receipt;
        $matHasDiagnosis = !empty(trim((string) $ma->diagnosis));
    @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>
        @if($matHasDiagnosis)
        <a href="{{ route('print.maternity.case-summary', $ma) }}" target="_blank"
           style="display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:11.5px;font-weight:600;color:#92400e;background:#fffbeb;border:1px solid #fcd34d;border-radius:7px;text-decoration:none;transition:all .12s"
           onmouseover="this.style.background='#fef3c7'" onmouseout="this.style.background='#fffbeb'">
            <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>
            Case Summary
        </a>
        @else
        <a href="{{ route('maternity.inpatient.show', $ma) }}#panel-overview"
           onclick="showMatTab('overview');return false;"
           title="Add a working diagnosis on the Overview tab to enable the Case Summary."
           style="display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:11.5px;font-weight:600;color:#9ca3af;background:#f9fafb;border:1px solid #e5e7eb;border-radius:7px;text-decoration:none;cursor:pointer">
            <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>
            Case Summary
            <span style="font-size:10px;color:#d1d5db;font-weight:500;margin-left:2px">— add diagnosis on Overview tab</span>
        </a>
        @endif
    </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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                Download PDF
            </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>
            <button type="button" onclick="window.print()" 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">
                <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
            </button>
        </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