{{--
    ANC Patient History drawer.
    Slides in from the right. Opens with read-only summary of what's known.
    "Edit" button reveals the full history form which posts to the same
    visit-draft endpoint (history fields get saved onto the current draft
    visit, same as they would have in the inline form).

    Expected vars: $registration, $priorVisit (nullable — the most recent
                   finalized visit, which carries the latest history state)
--}}
@php
    // Prefer priorVisit (finalized) for history display; fall back to draft.
    $h = $priorVisit ?? $draftVisit;
    $hasAny = $h && (
        $h->abortions || $h->living_children || $h->previous_cs ||
        $h->hx_hypertension || $h->hx_diabetes || $h->hx_hiv ||
        $h->family_hx_hypertension || $h->social_smoking || $h->social_alcohol ||
        $h->drug_allergies || $h->current_medications || $h->surgical_history
    );
@endphp

<div id="anc-drawer-history" class="anc-drawer" aria-hidden="true">
    <div class="anc-drawer-backdrop" onclick="ancCloseDrawer('history')"></div>
    <aside class="anc-drawer-panel">
        <header class="anc-drawer-head">
            <div>
                <h3 style="margin:0;font-size:14px;color:#3b1054">Patient History</h3>
                <p style="margin:2px 0 0;font-size:11px;color:#6b7280">Recorded once per pregnancy. Edit to update.</p>
            </div>
            <button type="button" class="anc-drawer-close" onclick="ancCloseDrawer('history')">&times;</button>
        </header>

        <div class="anc-drawer-body">
            {{-- ═══ READ-ONLY SUMMARY ═══ --}}
            <div id="anc-history-readonly">
                @if(! $hasAny)
                    <p style="font-size:12px;color:#9ca3af;text-align:center;padding:20px 0">
                        No patient history recorded yet. Click <strong>Edit</strong> below to add it.
                    </p>
                @else
                    {{-- Obstetric --}}
                    <section style="margin-bottom:14px">
                        <h4 style="font-size:11px;font-weight:700;color:#5c1269;text-transform:uppercase;letter-spacing:.3px;margin:0 0 6px;border-bottom:1px solid #f3e8f9;padding-bottom:4px">Obstetric</h4>
                        <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:6px;font-size:11.5px">
                            <div><span style="color:#6b7280">Miscarriages:</span> <strong>{{ $h->abortions ?? '—' }}</strong></div>
                            <div><span style="color:#6b7280">Living children:</span> <strong>{{ $h->living_children ?? '—' }}</strong></div>
                            <div><span style="color:#6b7280">Previous CS:</span> <strong>{{ $h->previous_cs ? 'Yes' . ($h->previous_cs_count ? " ({$h->previous_cs_count})" : '') : 'No' }}</strong></div>
                            <div><span style="color:#6b7280">Previous PPH:</span> <strong>{{ $h->previous_pph ? 'Yes' : 'No' }}</strong></div>
                            @if($h->previous_stillbirth)<div style="color:#dc2626"><span style="color:#6b7280">Stillbirth:</span> <strong>Yes</strong></div>@endif
                            @if($h->previous_preeclampsia)<div style="color:#dc2626"><span style="color:#6b7280">Pre-eclampsia:</span> <strong>Yes</strong></div>@endif
                            @if($h->previous_eclampsia)<div style="color:#dc2626"><span style="color:#6b7280">Eclampsia:</span> <strong>Yes</strong></div>@endif
                            @if($h->previous_preterm)<div><span style="color:#6b7280">Preterm:</span> <strong>Yes</strong></div>@endif
                            @if($h->previous_low_birth_weight)<div><span style="color:#6b7280">LBW:</span> <strong>Yes</strong></div>@endif
                            @if($h->previous_congenital_anomaly)<div><span style="color:#6b7280">Congenital anomaly:</span> <strong>Yes</strong></div>@endif
                            @if($h->previous_neonatal_death)<div><span style="color:#6b7280">Neonatal death:</span> <strong>Yes</strong></div>@endif
                        </div>
                    </section>

                    {{-- Medical --}}
                    <section style="margin-bottom:14px">
                        <h4 style="font-size:11px;font-weight:700;color:#5c1269;text-transform:uppercase;letter-spacing:.3px;margin:0 0 6px;border-bottom:1px solid #f3e8f9;padding-bottom:4px">Medical</h4>
                        @php
                            $med = array_filter([
                                'Hypertension' => $h->hx_hypertension,
                                'Diabetes'     => $h->hx_diabetes,
                                'Cardiac'      => $h->hx_cardiac,
                                'Asthma'       => $h->hx_asthma,
                                'TB'           => $h->hx_tb,
                                'HIV'          => $h->hx_hiv,
                                'Epilepsy'     => $h->hx_epilepsy,
                                'Sickle cell'  => $h->hx_sickle_cell,
                                'Renal disease'=> $h->hx_renal,
                                'Mental health'=> $h->hx_mental_health,
                            ]);
                        @endphp
                        @if(count($med))
                            <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px">
                                @foreach(array_keys($med) as $cond)
                                    <span style="background:#fee2e2;color:#991b1b;font-size:10.5px;padding:2px 8px;border-radius:999px;font-weight:600">{{ $cond }}</span>
                                @endforeach
                            </div>
                        @else
                            <p style="font-size:11.5px;color:#9ca3af;margin:0 0 6px">No chronic conditions.</p>
                        @endif
                        @if($h->drug_allergies)<p style="font-size:11.5px;margin:4px 0"><span style="color:#6b7280">Drug allergies:</span> <strong style="color:#dc2626">{{ $h->drug_allergies }}</strong></p>@endif
                        @if($h->current_medications)<p style="font-size:11.5px;margin:4px 0"><span style="color:#6b7280">Current meds:</span> <strong>{{ $h->current_medications }}</strong></p>@endif
                        @if($h->other_medical_history)<p style="font-size:11.5px;margin:4px 0"><span style="color:#6b7280">Other:</span> {{ $h->other_medical_history }}</p>@endif
                    </section>

                    {{-- Surgical --}}
                    @if($h->surgical_history)
                    <section style="margin-bottom:14px">
                        <h4 style="font-size:11px;font-weight:700;color:#5c1269;text-transform:uppercase;letter-spacing:.3px;margin:0 0 6px;border-bottom:1px solid #f3e8f9;padding-bottom:4px">Surgical</h4>
                        <p style="font-size:11.5px;margin:0">{{ $h->surgical_history }}</p>
                    </section>
                    @endif

                    {{-- Family --}}
                    @php
                        $fam = array_filter([
                            'Hypertension' => $h->family_hx_hypertension,
                            'Diabetes'     => $h->family_hx_diabetes,
                            'Twins'        => $h->family_hx_twins,
                            'Congenital'   => $h->family_hx_congenital,
                        ]);
                    @endphp
                    @if(count($fam))
                    <section style="margin-bottom:14px">
                        <h4 style="font-size:11px;font-weight:700;color:#5c1269;text-transform:uppercase;letter-spacing:.3px;margin:0 0 6px;border-bottom:1px solid #f3e8f9;padding-bottom:4px">Family</h4>
                        <div style="display:flex;flex-wrap:wrap;gap:5px">
                            @foreach(array_keys($fam) as $cond)
                                <span style="background:#fef3c7;color:#92400e;font-size:10.5px;padding:2px 8px;border-radius:999px;font-weight:600">{{ $cond }}</span>
                            @endforeach
                        </div>
                    </section>
                    @endif

                    {{-- Social --}}
                    @php
                        $soc = array_filter([
                            'Smoking'        => $h->social_smoking,
                            'Alcohol'        => $h->social_alcohol,
                            'Substance use'  => $h->social_substance_use,
                            'IPV screened'   => $h->social_ipv_screened,
                            'IPV disclosed'  => $h->social_ipv_positive,
                        ]);
                    @endphp
                    @if(count($soc))
                    <section style="margin-bottom:14px">
                        <h4 style="font-size:11px;font-weight:700;color:#5c1269;text-transform:uppercase;letter-spacing:.3px;margin:0 0 6px;border-bottom:1px solid #f3e8f9;padding-bottom:4px">Social</h4>
                        <div style="display:flex;flex-wrap:wrap;gap:5px">
                            @foreach(array_keys($soc) as $f)
                                @php $c = in_array($f, ['IPV disclosed']) ? '#fee2e2;color:#991b1b' : '#e0e7ff;color:#3730a3'; @endphp
                                <span style="background:{{ explode(';',$c)[0] }};color:{{ explode(';',$c)[1] ?? '#1f2937' }};font-size:10.5px;padding:2px 8px;border-radius:999px;font-weight:600">{{ $f }}</span>
                            @endforeach
                        </div>
                    </section>
                    @endif

                    @if($h->obstetric_history_notes)
                    <section>
                        <h4 style="font-size:11px;font-weight:700;color:#5c1269;text-transform:uppercase;letter-spacing:.3px;margin:0 0 6px;border-bottom:1px solid #f3e8f9;padding-bottom:4px">Additional Notes</h4>
                        <p style="font-size:11.5px;margin:0;white-space:pre-wrap">{{ $h->obstetric_history_notes }}</p>
                    </section>
                    @endif
                @endif

                <div style="margin-top:18px;display:flex;justify-content:center">
                    <button type="button" class="enc-btn-primary" onclick="ancToggleHistoryEdit(true)">Edit History</button>
                </div>
            </div>

            {{-- ═══ EDIT FORM (hidden by default) ═══ --}}
            <div id="anc-history-edit" style="display:none">
                <p style="font-size:10.5px;color:#9ca3af;margin:0 0 10px">Changes are saved to this visit. Click Save when done, then close the drawer.</p>

                {{-- Obstetric --}}
                <details open style="background:#faf5ff;border:1px solid #e9d5ff;border-radius:8px;margin-bottom:10px">
                    <summary style="padding:8px 12px;cursor:pointer;font-size:11.5px;font-weight:600;color:#5c1269">Obstetric</summary>
                    <div style="padding:8px 12px 12px">
                        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px">
                            @include('maternity.partials._fields.input', ['name'=>'abortions',       'label'=>'Miscarriages',    'type'=>'number'])
                            @include('maternity.partials._fields.input', ['name'=>'living_children', 'label'=>'Living Children', 'type'=>'number'])
                            @include('maternity.partials._fields.input', ['name'=>'previous_cs_count','label'=>'Prev CS count',  'type'=>'number'])
                        </div>
                        <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:10px">
                            @include('maternity.partials._fields.checkbox', ['name'=>'previous_cs',                 'label'=>'Previous C-section'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'previous_pph',                'label'=>'Previous PPH'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'previous_stillbirth',         'label'=>'Previous stillbirth'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'previous_preeclampsia',       'label'=>'Pre-eclampsia'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'previous_eclampsia',          'label'=>'Eclampsia'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'previous_preterm',            'label'=>'Preterm'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'previous_low_birth_weight',   'label'=>'Low birth weight'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'previous_congenital_anomaly', 'label'=>'Congenital anomaly'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'previous_neonatal_death',     'label'=>'Neonatal death'])
                        </div>
                    </div>
                </details>

                {{-- Medical --}}
                <details style="background:#faf5ff;border:1px solid #e9d5ff;border-radius:8px;margin-bottom:10px">
                    <summary style="padding:8px 12px;cursor:pointer;font-size:11.5px;font-weight:600;color:#5c1269">Medical</summary>
                    <div style="padding:8px 12px 12px">
                        <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:6px">
                            @include('maternity.partials._fields.checkbox', ['name'=>'hx_hypertension',  'label'=>'Hypertension'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'hx_diabetes',      'label'=>'Diabetes'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'hx_cardiac',       'label'=>'Cardiac'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'hx_asthma',        'label'=>'Asthma'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'hx_tb',            'label'=>'TB'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'hx_hiv',           'label'=>'HIV'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'hx_epilepsy',      'label'=>'Epilepsy'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'hx_sickle_cell',   'label'=>'Sickle cell'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'hx_renal',         'label'=>'Renal'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'hx_mental_health', 'label'=>'Mental health'])
                        </div>
                        <div style="margin-top:10px">
                            @include('maternity.partials._fields.compact_input', ['name'=>'drug_allergies',       'label'=>'Drug allergies'])
                            @include('maternity.partials._fields.compact_input', ['name'=>'current_medications',  'label'=>'Current medications'])
                            @include('maternity.partials._fields.compact_input', ['name'=>'other_medical_history','label'=>'Other medical history'])
                        </div>
                    </div>
                </details>

                {{-- Surgical --}}
                <details style="background:#faf5ff;border:1px solid #e9d5ff;border-radius:8px;margin-bottom:10px">
                    <summary style="padding:8px 12px;cursor:pointer;font-size:11.5px;font-weight:600;color:#5c1269">Surgical</summary>
                    <div style="padding:8px 12px 12px">
                        @include('maternity.partials._fields.compact_input', ['name'=>'surgical_history', 'label'=>'Previous surgeries', 'help'=>'e.g. appendectomy 2018'])
                    </div>
                </details>

                {{-- Family --}}
                <details style="background:#faf5ff;border:1px solid #e9d5ff;border-radius:8px;margin-bottom:10px">
                    <summary style="padding:8px 12px;cursor:pointer;font-size:11.5px;font-weight:600;color:#5c1269">Family</summary>
                    <div style="padding:8px 12px 12px">
                        <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:6px">
                            @include('maternity.partials._fields.checkbox', ['name'=>'family_hx_hypertension', 'label'=>'Hypertension'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'family_hx_diabetes',     'label'=>'Diabetes'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'family_hx_twins',        'label'=>'Twins'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'family_hx_congenital',   'label'=>'Congenital anomaly'])
                        </div>
                    </div>
                </details>

                {{-- Social --}}
                <details style="background:#faf5ff;border:1px solid #e9d5ff;border-radius:8px;margin-bottom:10px">
                    <summary style="padding:8px 12px;cursor:pointer;font-size:11.5px;font-weight:600;color:#5c1269">Social</summary>
                    <div style="padding:8px 12px 12px">
                        <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:6px">
                            @include('maternity.partials._fields.checkbox', ['name'=>'social_smoking',       'label'=>'Smoking'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'social_alcohol',       'label'=>'Alcohol use'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'social_substance_use', 'label'=>'Substance use'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'social_ipv_screened',  'label'=>'IPV screened'])
                            @include('maternity.partials._fields.checkbox', ['name'=>'social_ipv_positive',  'label'=>'IPV disclosed'])
                        </div>
                    </div>
                </details>

                <details style="background:#faf5ff;border:1px solid #e9d5ff;border-radius:8px">
                    <summary style="padding:8px 12px;cursor:pointer;font-size:11.5px;font-weight:600;color:#5c1269">Additional notes</summary>
                    <div style="padding:8px 12px 12px">
                        @include('maternity.partials._fields.textarea', ['name'=>'obstetric_history_notes', 'label'=>'Free-text notes', 'rows'=>3])
                    </div>
                </details>

                <div style="margin-top:16px;display:flex;gap:8px;justify-content:flex-end">
                    <button type="button" class="enc-btn-cancel" onclick="ancToggleHistoryEdit(false)">Cancel</button>
                    <button type="button" class="enc-btn-primary" data-anc-save-btn="history-drawer">Save</button>
                    <span data-anc-save-status="history-drawer" style="align-self:center;font-size:10.5px"></span>
                </div>
            </div>
        </div>
    </aside>
</div>