@extends('layouts.app')
@section('title', isset($registration) ? 'Edit ANC Profile' : 'Register ANC')
@section('content')
@include('partials._encounter-styles')

@php
    $isEdit = isset($registration) && $registration;
    $r      = $isEdit ? $registration : null;
    // Values used in prefills (every field handles null gracefully)
    $v = fn($field, $default = '') => old($field, $r?->{$field} ?? $default);
@endphp

<div class="enc-page" style="max-width:980px;margin:0 auto">

<div class="enc-title-bar">
    <h1>{{ $isEdit ? 'Edit ANC Profile' : 'ANC Enrollment' }}</h1>
    @if($isEdit)
        <p style="font-size:12px;color:#6b21a8;margin-top:2px">
            {{ $prefillPatient->full_name ?? '—' }} · MRN {{ $prefillPatient->mrn ?? '—' }}
        </p>
    @endif
</div>

<form method="POST" action="{{ $isEdit ? route('maternity.anc.profile.update', $r) : route('maternity.anc.store') }}" style="margin-top:14px">
    @csrf
    @if($isEdit)@method('PUT')@endif

    {{-- ═══ 1. Patient ═══ --}}
    <div class="enc-section">
        <div class="enc-section-head">
            <h3><span class="enc-section-num">1</span> Patient</h3>
        </div>
        <div class="enc-section-body">
            @if($isEdit)
                {{-- In edit mode the patient is locked — you can't re-assign an existing
                     registration to a different patient. Show a read-only summary. --}}
                <div style="padding:12px 14px;background:#faf5ff;border:1px solid #e9d5ff;border-radius:8px;display:flex;justify-content:space-between;align-items:center">
                    <div>
                        <div style="font-size:13px;font-weight:600;color:#1f2937">{{ $prefillPatient->full_name }}</div>
                        <div style="font-size:11px;color:#6b7280;margin-top:2px">MRN {{ $prefillPatient->mrn }}{{ $prefillPatient->phone ? ' · ' . $prefillPatient->phone : '' }}</div>
                    </div>
                    <span style="font-size:11px;color:#6b7280;font-style:italic">Patient locked in edit mode</span>
                </div>
                <input type="hidden" name="patient_id" value="{{ $prefillPatient->id }}">
            @else
                <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">
                    Search Patient <span style="color:#dc2626">*</span>
                </label>
                <div id="anc-reg-patient-wrap" style="position:relative">
                    <input type="text" id="anc-reg-patient-input"
                           value="{{ isset($prefillPatient) && $prefillPatient ? ($prefillPatient->full_name . ' (' . $prefillPatient->mrn . ')') : '' }}"
                           placeholder="Search by name, MRN or phone..." autocomplete="off" style="width:100%"
                           {{ isset($prefillPatient) && $prefillPatient ? 'class=anc-prefilled' : '' }}>
                    <input type="hidden" name="patient_id" id="patient_id"
                           value="{{ isset($prefillPatient) && $prefillPatient ? $prefillPatient->id : '' }}" required>
                    <div id="anc-reg-patient-results" style="display:none"></div>
                </div>
                <p id="anc-reg-patient-hint" style="font-size:11px;color:#6b7280;margin:4px 0 0">
                    @if(isset($prefillPatient) && $prefillPatient)
                        <span style="color:#16a34a;font-weight:600">✓ Patient selected</span>
                        — ready to enroll. Modify details below then submit.
                    @endif
                </p>
            @endif
        </div>
    </div>

    {{-- ═══ 2. Obstetric History ═══ --}}
    <div class="enc-section">
        <div class="enc-section-head">
            <h3><span class="enc-section-num">2</span> Obstetric History</h3>
        </div>
        <div class="enc-section-body">
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">LMP <span style="color:#dc2626">*</span></label>
                    <input type="date" name="lmp" required id="lmpInput" onchange="calcEDD()"
                           value="{{ old('lmp', $r?->lmp?->format('Y-m-d') ?? '') }}"
                           style="width:100%">
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">EDD (auto, editable)</label>
                    <input type="date" name="edd" id="eddInput"
                           value="{{ old('edd', $r?->edd?->format('Y-m-d') ?? '') }}"
                           style="width:100%">
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">ANC Number</label>
                    <input type="text" name="anc_number"
                           value="{{ $r?->anc_number ?? '' }}"
                           placeholder="Auto-generated" readonly
                           style="width:100%;background:#f9fafb;color:#6b7280">
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Gravida</label>
                    <input type="number" name="gravida" min="1" placeholder="G"
                           value="{{ $v('gravida') }}" style="width:100%">
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Parity</label>
                    <input type="number" name="parity" min="0" placeholder="P"
                           value="{{ $v('parity') }}" style="width:100%">
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Next ANC Visit</label>
                    <input type="date" name="next_visit_date"
                           value="{{ old('next_visit_date', $r?->next_visit_date?->format('Y-m-d') ?? '') }}"
                           style="width:100%">
                </div>
            </div>
        </div>
    </div>

    {{-- ═══ 3. Medical ═══ --}}
    <div class="enc-section">
        <div class="enc-section-head">
            <h3><span class="enc-section-num">3</span> Medical</h3>
        </div>
        <div class="enc-section-body">
            @php
                $selBg     = $v('blood_group');
                $selRh     = $v('rhesus');
                $selHiv    = $v('hiv_status');
                $selRisk   = $v('risk_status', 'normal');
                $rfactors  = is_array($r?->risk_factors) ? implode(', ', $r->risk_factors) : '';
            @endphp
            <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px">
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Blood Group</label>
                    <select name="blood_group" style="width:100%"><option value="">Select</option>
                        @foreach(['A+','A-','B+','B-','AB+','AB-','O+','O-'] as $bg)<option {{ $selBg === $bg ? 'selected' : '' }}>{{ $bg }}</option>@endforeach
                    </select>
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Rhesus</label>
                    <select name="rhesus" style="width:100%">
                        <option value="">Select</option>
                        <option {{ $selRh === 'Positive' ? 'selected' : '' }}>Positive</option>
                        <option {{ $selRh === 'Negative' ? 'selected' : '' }}>Negative</option>
                    </select>
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">HIV Status</label>
                    <select name="hiv_status" style="width:100%">
                        <option value="">Select</option>
                        <option {{ $selHiv === 'Positive' ? 'selected' : '' }}>Positive</option>
                        <option {{ $selHiv === 'Negative' ? 'selected' : '' }}>Negative</option>
                        <option {{ $selHiv === 'Unknown' ? 'selected' : '' }}>Unknown</option>
                    </select>
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Risk Status</label>
                    <select name="risk_status" style="width:100%">
                        <option value="normal"    {{ $selRisk === 'normal'    ? 'selected' : '' }}>Normal</option>
                        <option value="high"      {{ $selRisk === 'high'      ? 'selected' : '' }}>High Risk</option>
                        <option value="very_high" {{ $selRisk === 'very_high' ? 'selected' : '' }}>Very High Risk</option>
                    </select>
                </div>
            </div>
            <div style="margin-top:12px">
                <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Risk Factors (comma-separated)</label>
                <input type="text" name="risk_factors" placeholder="e.g. Previous C-section, Hypertension, Diabetes"
                       value="{{ old('risk_factors', $rfactors) }}" style="width:100%">
            </div>
        </div>
    </div>

    {{-- ═══ 4. Package & Clinician ═══ --}}
    <div class="enc-section">
        <div class="enc-section-head">
            <h3><span class="enc-section-num">4</span> Package &amp; Care Team</h3>
        </div>
        <div class="enc-section-body">
            @php
                $selPkg       = $v('package_type');
                $selPkgAmount = $v('package_amount');
                $selClinId    = $v('attending_clinician_id');
            @endphp
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px">
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Billing Mode</label>
                    {{-- Round 10 single-invoice model: insurance patients
                         CANNOT use packages. Their consultation bills at
                         insurance rate (1,200) instead of cash rate (500).
                         Other modules continue working as before — this
                         carve-out is ANC-only. --}}
                    <div style="display:flex;gap:14px;font-size:13px;padding:8px 0">
                        <label style="display:flex;align-items:center;gap:6px;cursor:pointer">
                            <input type="radio" name="billing_mode" value="cash" checked
                                   onchange="ancRegToggleBillingMode(this.value)">
                            <span>Cash / M-Pesa</span>
                        </label>
                        <label style="display:flex;align-items:center;gap:6px;cursor:pointer">
                            <input type="radio" name="billing_mode" value="insurance"
                                   onchange="ancRegToggleBillingMode(this.value)">
                            <span>Insurance</span>
                        </label>
                    </div>
                    <p id="anc-reg-insurance-note" style="display:none;font-size:11px;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:6px;padding:6px 10px;margin:4px 0 0">
                        Insurance patients are billed per visit at insurance rates (KES 1,200/consultation). Packages are not offered.
                    </p>
                </div>
                <div></div>
            </div>
            <div id="anc-reg-package-row" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px">
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Package Type</label>
                    {{-- IMPORTANT: option value is the catalog KEY ('premium'),
                         NOT the human label ('Premium ANC Package'). The label
                         is what the user reads; the key is what
                         AncPackage::coverage() expects. --}}
                    <select name="package_type" id="pkgSelect" onchange="updatePkgPrice()" style="width:100%">
                        <option value="">Select package</option>
                        @foreach($packages as $pkg)
                            <option value="{{ $pkg['key'] }}" data-price="{{ $pkg['price'] }}"
                                {{ \App\Services\AncPackage::keyFor($selPkg) === $pkg['key'] ? 'selected' : '' }}>
                                {{ $pkg['name'] }} | KES {{ number_format($pkg['price']) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Package Amount (KES)</label>
                    <input type="number" name="package_amount" id="pkgAmount" step="0.01"
                           value="{{ $selPkgAmount }}" style="width:100%">
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Attending Clinician</label>
                    <select name="attending_clinician_id" style="width:100%">
                        <option value="">Select</option>
                        @include('partials._clinician-options', ['selected' => $selClinId])
                    </select>
                </div>
            </div>
            <div id="anc-reg-clinician-only-row" style="display:none">
                {{-- Insurance-only row. Holds the clinician picker (mirrored --}}
                {{-- from the package row above so packages stay hidden) PLUS  --}}
                {{-- an insurance company picker. The selected company is what --}}
                {{-- ensureConsultationLineOnInvoice uses to label the bill    --}}
                {{-- line "ANC Consultation (GA Insurance)" instead of the     --}}
                {{-- generic "(insurance rate)". --}}
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
                    <div>
                        <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Insurance Company</label>
                        <select name="insurance_company_id" id="anc-reg-insurance-company" style="width:100%">
                            <option value="">Select insurance company…</option>
                            @foreach(\App\Models\InsuranceCompany::where('is_active', true)->orderBy('name')->get() as $ins)
                                <option value="{{ $ins->id }}">{{ $ins->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Attending Clinician</label>
                        <select name="attending_clinician_id_insurance" style="width:100%">
                            <option value="">Select</option>
                            @include('partials._clinician-options', ['selected' => $selClinId])
                        </select>
                    </div>
                </div>
            </div>
            <script>
                window.ancRegToggleBillingMode = function(mode) {
                    var pkgRow   = document.getElementById('anc-reg-package-row');
                    var insNote  = document.getElementById('anc-reg-insurance-note');
                    var insRow   = document.getElementById('anc-reg-clinician-only-row');
                    var pkgSel   = document.getElementById('pkgSelect');
                    var pkgAmt   = document.getElementById('pkgAmount');
                    var clinSelMain = document.querySelector('select[name="attending_clinician_id"]');
                    var clinSelIns  = document.querySelector('select[name="attending_clinician_id_insurance"]');

                    if (mode === 'insurance') {
                        if (pkgRow)  pkgRow.style.display  = 'none';
                        if (insNote) insNote.style.display = '';
                        if (insRow)  insRow.style.display  = '';
                        // Clear package selection so an insurance patient never
                        // submits a package_type. The clinician value gets
                        // copied across from the insurance row at submit.
                        if (pkgSel) pkgSel.value = '';
                        if (pkgAmt) pkgAmt.value = '';
                        if (clinSelMain && clinSelIns) clinSelIns.value = clinSelMain.value;
                    } else {
                        if (pkgRow)  pkgRow.style.display  = '';
                        if (insNote) insNote.style.display = 'none';
                        if (insRow)  insRow.style.display  = 'none';
                        if (clinSelMain && clinSelIns) clinSelMain.value = clinSelIns.value || clinSelMain.value;
                    }
                };
                // Sync clinician value onto whichever row will be submitted.
                document.addEventListener('submit', function(ev) {
                    var insurance = document.querySelector('input[name="billing_mode"]:checked');
                    if (insurance && insurance.value === 'insurance') {
                        var clinSelMain = document.querySelector('select[name="attending_clinician_id"]');
                        var clinSelIns  = document.querySelector('select[name="attending_clinician_id_insurance"]');
                        if (clinSelMain && clinSelIns) clinSelMain.value = clinSelIns.value;
                    }
                });
            </script>
        </div>
    </div>

    {{-- ═══ 5. Delivery Planning ═══ --}}
    <div class="enc-section">
        <div class="enc-section-head">
            <h3><span class="enc-section-num">5</span> Delivery Planning</h3>
        </div>
        <div class="enc-section-body">
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px">
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Preferred Delivery Place</label>
                    <input type="text" name="preferred_delivery_place"
                           value="{{ $v('preferred_delivery_place') }}"
                           placeholder="e.g. This facility, County Hospital" style="width:100%">
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Emergency Contact Name</label>
                    <input type="text" name="emergency_contact_name"
                           value="{{ $v('emergency_contact_name') }}" style="width:100%">
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Emergency Contact Phone</label>
                    <input type="text" name="emergency_contact_phone"
                           value="{{ $v('emergency_contact_phone') }}" style="width:100%">
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Transport Plan</label>
                    <input type="text" name="transport_plan"
                           value="{{ $v('transport_plan') }}"
                           placeholder="e.g. Family car, ambulance service" style="width:100%">
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Blood Donor Plan</label>
                    <input type="text" name="blood_donor_plan"
                           value="{{ $v('blood_donor_plan') }}"
                           placeholder="e.g. Husband (O+), sister (O+)" style="width:100%">
                </div>
                <div>
                    <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Delivery Plan Notes</label>
                    <input type="text" name="delivery_plan"
                           value="{{ $v('delivery_plan') }}"
                           placeholder="Planning notes" style="width:100%">
                </div>
            </div>
            <div style="margin-top:12px">
                <label style="font-size:10.5px;font-weight:600;color:#5c1269;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px">Birth Plan</label>
                <textarea name="birth_plan" rows="2" placeholder="Birth plan notes..." style="width:100%">{{ $v('birth_plan') }}</textarea>
            </div>
        </div>
    </div>

    <div style="display:flex;gap:10px;margin-top:14px;padding:14px 18px;background:#faf5fc;border:1px solid #e6d0f3;border-radius:10px">
        <button type="submit" class="enc-btn-primary" style="padding:8px 22px">{{ $isEdit ? 'Save Changes' : 'Register ANC' }}</button>
        <a href="{{ $isEdit ? route('maternity.anc.profile', $r) : route('maternity.index') }}" class="enc-btn-cancel" style="text-decoration:none">Cancel</a>
    </div>
</form>

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

<style>
/* Scoped patient search on this page (not inside a modal, but still
   replaces the shared .patient-search for consistency with anc-visits). */
#anc-reg-patient-results {
    position:absolute; top:calc(100% + 4px); left:0; right:0;
    background:#fff; border:1px solid #e6d0f3; border-radius:8px;
    box-shadow:0 10px 25px rgba(59,16,84,.15);
    max-height:280px; overflow-y:auto; z-index:50;
}
#anc-reg-patient-results .anc-pt-item {
    padding:10px 14px; cursor:pointer;
    display:flex; align-items:center; gap:10px;
    border-bottom:1px solid #f3f4f6;
}
#anc-reg-patient-results .anc-pt-item:last-child { border-bottom:none; }
#anc-reg-patient-results .anc-pt-item:hover { background:#faf5fc; }
#anc-reg-patient-results .anc-pt-avatar {
    width:32px; height:32px; border-radius:50%;
    background:#f3e8f9; color:#5c1269;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; flex-shrink:0;
}
#anc-reg-patient-results .anc-pt-meta { font-size:11px; color:#6b7280; margin-top:2px; }
#anc-reg-patient-results .anc-pt-empty { padding:14px; font-size:12.5px; color:#9ca3af; text-align:center; }
</style>

@endsection

@push('scripts')
<script>
// Compute EDD as 280 days (Naegele's rule: LMP + 40 weeks) after LMP.
// Exposed globally so inline onchange="calcEDD()" in the LMP input can call it.
window.calcEDD = function() {
    const lmpInput = document.getElementById('lmpInput');
    const eddInput = document.getElementById('eddInput');
    if (!lmpInput || !eddInput) return;
    const lmp = lmpInput.value;
    if (!lmp) return;
    const d = new Date(lmp);
    if (isNaN(d.getTime())) return;           // guard against bad date strings
    d.setDate(d.getDate() + 280);
    const iso = d.toISOString().split('T')[0];

    // If flatpickr is attached to EDD, use its setDate so the visible altInput
    // updates too. Otherwise just set the value directly.
    if (eddInput._flatpickr) {
        eddInput._flatpickr.setDate(iso, false);  // false = don't trigger onChange
    } else {
        eddInput.value = iso;
    }
};

window.updatePkgPrice = function() {
    const sel = document.getElementById('pkgSelect');
    if (!sel) return;
    const opt = sel.options[sel.selectedIndex];
    const price = opt && opt.dataset ? opt.dataset.price : null;
    const amt = document.getElementById('pkgAmount');
    if (price && amt) amt.value = price;
};

// Belt-and-braces: also bind via addEventListener so calcEDD fires even if
// the inline onchange gets stripped by some browser extension or sanitizer.
//
// IMPORTANT: the layout auto-initialises flatpickr on every <input type="date">.
// Once flatpickr takes over, the input's native 'change' and 'input' events
// don't reliably fire on date pick — flatpickr uses its own onChange callback.
// So after DOMContentLoaded, we check if the input has a ._flatpickr instance
// and, if so, register calcEDD via flatpickr's own config.onChange array.
// That's the only reliable way to catch date changes once flatpickr is active.
document.addEventListener('DOMContentLoaded', function() {
    // Short delay lets the layout's own flatpickr init finish first
    setTimeout(function() {
        const lmp = document.getElementById('lmpInput');
        if (!lmp) return;

        if (lmp._flatpickr) {
            // Flatpickr is active — register into its onChange array
            lmp._flatpickr.config.onChange.push(function() {
                window.calcEDD();
            });
        } else {
            // Native date input — use standard events
            lmp.addEventListener('change', window.calcEDD);
            lmp.addEventListener('input', window.calcEDD);
        }

        // If LMP already has a value on page load (e.g., form re-populated after
        // validation error), compute EDD immediately
        if (lmp.value) window.calcEDD();

        // Same treatment for package select (not a date, simpler)
        const pkg = document.getElementById('pkgSelect');
        if (pkg) pkg.addEventListener('change', window.updatePkgPrice);
    }, 50);
});

// Scoped patient search for the registration form
(function() {
    const input   = document.getElementById('anc-reg-patient-input');
    const hidden  = document.getElementById('patient_id');
    const results = document.getElementById('anc-reg-patient-results');
    const hint    = document.getElementById('anc-reg-patient-hint');
    const wrapper = document.getElementById('anc-reg-patient-wrap');
    if (!input) return;

    let debounce;
    input.addEventListener('input', function() {
        clearTimeout(debounce);
        const q = this.value.trim();
        hidden.value = ''; hint.textContent = '';
        if (q.length < 2) { results.style.display = 'none'; return; }

        debounce = setTimeout(() => {
            fetch((window.HMIS_BASE || '') + '/patients-search?q=' + encodeURIComponent(q), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(r => r.ok ? r.json() : Promise.reject(r.status))
            .then(patients => {
                if (!patients || patients.length === 0) {
                    results.innerHTML = '<div class="anc-pt-empty">No patients found.</div>';
                    results.style.display = '';
                    return;
                }
                results.innerHTML = patients.map(p => {
                    const initials = (p.name || '').split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
                    return '<div class="anc-pt-item" data-id="' + p.id + '" data-name="' + esc(p.name) + '" data-mrn="' + esc(p.mrn) + '">' +
                        '<span class="anc-pt-avatar">' + initials + '</span>' +
                        '<div style="flex:1;min-width:0">' +
                            '<div style="font-size:13px;font-weight:600;color:#1f2937">' + esc(p.name) + '</div>' +
                            '<div class="anc-pt-meta">' + esc(p.mrn) + ' · ' + esc(p.gender || '') + ' · ' + esc(String(p.age || '')) + ' · ' + esc(p.phone || '') + '</div>' +
                        '</div>' +
                    '</div>';
                }).join('');
                results.style.display = '';
                results.querySelectorAll('.anc-pt-item').forEach(item => {
                    item.addEventListener('click', () => {
                        hidden.value = item.dataset.id;
                        input.value = item.dataset.name + ' (' + item.dataset.mrn + ')';
                        results.style.display = 'none';
                        hint.innerHTML = '<span style="color:#16a34a;font-weight:600">&check; Patient selected</span>';
                    });
                });
            })
            .catch(() => {
                results.innerHTML = '<div class="anc-pt-empty" style="color:#dc2626">Search failed. Try again.</div>';
                results.style.display = '';
            });
        }, 250);
    });
    document.addEventListener('click', function(e) {
        if (!wrapper.contains(e.target)) results.style.display = 'none';
    });

    function esc(s) {
        return String(s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
    }
})();
</script>
@endpush