{{--
    ANC Previous Visits drawer.
    Summary cards for each past visit — GA, BP, Hb, next-visit, risk flag.
    Collapsed by default, click a card to expand it with full details.

    Expected vars: $registration
--}}
<div id="anc-drawer-visits" class="anc-drawer" aria-hidden="true">
    <div class="anc-drawer-backdrop" onclick="ancCloseDrawer('visits')"></div>
    <aside class="anc-drawer-panel">
        <header class="anc-drawer-head">
            <div>
                <h3 style="margin:0;font-size:14px;color:#3b1054">Previous Visits</h3>
                <p style="margin:2px 0 0;font-size:11px;color:#6b7280">{{ $registration->visits->count() }} visit(s) recorded.</p>
            </div>
            <button type="button" class="anc-drawer-close" onclick="ancCloseDrawer('visits')">&times;</button>
        </header>

        <div class="anc-drawer-body">
            @forelse($registration->visits->sortByDesc('visit_number') as $v)
                @php
                    $isDraft = empty($v->risk_level);
                    $borderColor = $v->risk_level === 'high' ? '#dc2626'
                                : ($v->risk_level === 'moderate' ? '#f59e0b'
                                : ($isDraft ? '#9ca3af' : '#c026d3'));
                @endphp
                <details style="border:1px solid #e5e7eb;border-left:3px solid {{ $borderColor }};border-radius:8px;padding:0;margin-bottom:10px;background:#fff">
                    <summary style="padding:10px 12px;cursor:pointer;list-style:none">
                        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
                            <strong style="font-size:12.5px;color:#3b1054">
                                Visit #{{ $v->visit_number }}
                                @if($isDraft)<span style="color:#9ca3af;font-size:10.5px;margin-left:6px;font-weight:400">(draft)</span>@endif
                                @if($v->risk_level === 'high')<span style="color:#fff;background:#dc2626;font-size:10px;padding:2px 6px;border-radius:4px;margin-left:6px">HIGH</span>@elseif($v->risk_level === 'moderate')<span style="color:#92400e;background:#fef3c7;font-size:10px;padding:2px 6px;border-radius:4px;margin-left:6px">MOD</span>@endif
                            </strong>
                            <span style="font-size:10.5px;color:#9ca3af">{{ $v->visit_date?->format('d M Y') ?? $v->created_at->format('d M Y') }}</span>
                        </div>
                        <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:4px;font-size:11px;color:#4b5563">
                            <span>GA: {{ $v->gestational_age_weeks ?? '—' }}wk</span>
                            <span>BP: {{ $v->bp_display ?? $v->blood_pressure ?? '—' }}</span>
                            <span>Wt: {{ $v->weight ?? '—' }}kg</span>
                            <span>FHR: {{ $v->fetal_heart_rate ?? '—' }}</span>
                            <span>Hb: {{ $v->hemoglobin ?? '—' }}</span>
                            <span>Next: {{ $v->next_visit_date?->format('d M') ?? '—' }}</span>
                        </div>
                    </summary>
                    <div style="border-top:1px solid #f3f4f6;padding:10px 12px;font-size:11px">
                        @if($v->complaints)   <p style="margin:0 0 4px"><strong style="color:#5c1269">Complaints:</strong> {{ $v->complaints }}</p>@endif
                        @if($v->assessment)   <p style="margin:0 0 4px"><strong style="color:#5c1269">Assessment:</strong> {{ $v->assessment }}</p>@endif
                        @if($v->plan)         <p style="margin:0 0 4px"><strong style="color:#5c1269">Plan:</strong> {{ $v->plan }}</p>@endif
                        @if($v->danger_signs && is_array($v->danger_signs) && count($v->danger_signs))
                            <p style="margin:4px 0;color:#dc2626;font-weight:600">⚠ Danger signs: {{ implode(', ', $v->danger_signs) }}</p>
                        @endif
                        @if(is_array($v->risk_factors) && count($v->risk_factors))
                            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:4px">
                                @foreach($v->risk_factors as $f)<span style="background:#f3f4f6;color:#4b5563;font-size:10px;padding:1px 6px;border-radius:4px">{{ $f }}</span>@endforeach
                            </div>
                        @endif
                        @if($v->health_education_given)
                            <p style="margin:6px 0 0"><strong style="color:#5c1269">Health ed:</strong> {{ $v->health_education_given }}</p>
                        @endif
                        @php
                            $given = array_filter([
                                'IFAS'      => $v->ifas_issued,
                                'TT'        => $v->tt_given,
                                'IPTp-SP'   => $v->iptp_given,
                                'Deworming' => $v->deworming_given,
                                'ITN'       => $v->itn_issued,
                            ]);
                        @endphp
                        @if(count($given))
                            <p style="margin:6px 0 0"><strong style="color:#5c1269">Given:</strong> {{ implode(', ', array_keys($given)) }}</p>
                        @endif
                        @if($v->referred)
                            <p style="margin:6px 0 0;color:#dc2626;font-weight:600">REFERRED — {{ $v->referral_reason }}</p>
                        @endif
                        <p style="margin:8px 0 0;color:#9ca3af;font-size:10.5px">Seen by: {{ $v->seenBy?->name ?? '—' }}</p>
                    </div>
                </details>
            @empty
                <p style="font-size:12px;color:#9ca3af;text-align:center;padding:30px 0">No visits yet.</p>
            @endforelse
        </div>
    </aside>
</div>