@extends('layouts.app')
@section('title', 'ANC Visit · ' . ($visit->visit_number ?? ''))
@section('content')
@include('partials._encounter-styles')

{{--
    Read-only ANC Visit view.

    Issue #3 (May 3 2026): Completed ANC Visits used to link to
    maternity.anc.show, which calls ensureAncBackingVisit() and silently
    spawns a new in-flight encounter. Wrong behavior for "View Visit"
    buttons. This page replaces it for historical viewing — no state
    mutation, no draft creation, just a clean read-only render of one
    completed ANC encounter.

    Controller: MaternityController::ancVisitView
--}}

@php
    $patient = $visit->patient;
    $hasAncVisit = $ancVisit !== null;
    $diagArr = optional($visit->consultation)->diagnosis;
    $diagDisplay = is_array($diagArr) ? implode(', ', array_filter($diagArr)) : (string) ($diagArr ?? '');
@endphp

<div class="enc-page">

{{-- ═══ HEADER + BACK LINK ═══ --}}
<div class="flex flex-wrap gap-3 mb-3 items-center">
    <a href="{{ route('maternity.anc.visits', ['tab' => 'completed']) }}" class="text-xs text-cr-600 hover:underline" style="text-decoration:none">
        ← Back to Completed Visits
    </a>
    <span class="text-gray-300">·</span>
    <span class="text-xs text-gray-500" style="font-family:ui-monospace,monospace">{{ $visit->visit_number }}</span>
</div>

{{-- ═══ READ-ONLY BANNER ═══ --}}
<div style="background:linear-gradient(90deg,#f3e8ff 0%,#faf5ff 100%);border:1px solid #d8b4fe;border-left:4px solid #7c3aed;border-radius:8px;padding:10px 16px;margin-bottom:14px;display:flex;align-items:center;gap:12px">
    <svg style="width:20px;height:20px;color:#7c3aed;flex-shrink:0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
    </svg>
    <div style="flex:1">
        <p style="font-size:12.5px;font-weight:700;color:#581c87;margin:0">Read-only view of a completed ANC visit</p>
        <p style="font-size:11px;color:#6b21a8;margin:1px 0 0">No edits possible from this page. To start a new visit, use the active ANC queue.</p>
    </div>
</div>

{{-- ═══ PATIENT HEADER CARD ═══ --}}
<div class="bg-white rounded-xl border border-gray-200 p-4 mb-3">
    <div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px">
        <div>
            <h1 style="font-size:17px;font-weight:700;color:#3b1054;margin:0">
                {{ $patient->full_name ?? '—' }}
                <span style="margin-left:6px;font-size:11.5px;color:#9ca3af;font-weight:400;font-family:ui-monospace,monospace">{{ $patient->mrn ?? '' }}</span>
            </h1>
            <p style="font-size:11.5px;color:#6b7280;margin:3px 0 0">
                {{ ucfirst($patient->gender ?? '—') }} ·
                {{ $patient->age ?? '—' }} yrs ·
                {{ $patient->phone ?? '—' }}
            </p>
        </div>
        <div style="display:flex;gap:14px;flex-wrap:wrap">
            <div>
                <p style="font-size:10.5px;color:#9ca3af;text-transform:uppercase;letter-spacing:.3px;margin:0">Visit Date</p>
                <p style="font-size:12px;color:#374151;font-weight:600;margin:2px 0 0">
                    {{ $visit->check_in_at?->format('d M Y, H:i') ?? $visit->created_at->format('d M Y, H:i') }}
                </p>
            </div>
            <div>
                <p style="font-size:10.5px;color:#9ca3af;text-transform:uppercase;letter-spacing:.3px;margin:0">Clinician</p>
                <p style="font-size:12px;color:#374151;font-weight:600;margin:2px 0 0">
                    {{ optional($visit->clinician)->name ?? '—' }}
                </p>
            </div>
            <div>
                <p style="font-size:10.5px;color:#9ca3af;text-transform:uppercase;letter-spacing:.3px;margin:0">Completed</p>
                <p style="font-size:12px;color:#374151;font-weight:600;margin:2px 0 0">
                    {{ $visit->check_out_at?->format('d M Y, H:i') ?? '—' }}
                </p>
            </div>
            <div>
                <span class="enc-status-pill pill-done" style="font-size:11px">{{ ucfirst($visit->status) }}</span>
            </div>
        </div>
    </div>
</div>

{{-- ═══ ANC OBSTETRIC SUMMARY ═══ --}}
@if($hasAncVisit)
<div class="enc-section">
    <div class="enc-section-head">
        <h3>Obstetric Summary</h3>
        @if($ancVisit->risk_level === 'high')
            <span style="color:#fff;background:#dc2626;font-size:10.5px;padding:3px 8px;border-radius:4px;font-weight:700">HIGH RISK</span>
        @elseif($ancVisit->risk_level === 'moderate')
            <span style="color:#92400e;background:#fef3c7;font-size:10.5px;padding:3px 8px;border-radius:4px;font-weight:700">MODERATE RISK</span>
        @elseif($ancVisit->risk_level === 'low')
            <span class="enc-status-pill pill-done" style="font-size:10.5px">LOW RISK</span>
        @endif
    </div>
    <div class="enc-section-body">
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px 22px">
            <div>
                <p class="enc-subsection-title" style="margin-bottom:2px">Gestational Age</p>
                <p style="font-size:13px;color:#3b1054;font-weight:600;margin:0">{{ $ancVisit->gestational_age_weeks ?? '—' }} weeks</p>
            </div>
            <div>
                <p class="enc-subsection-title" style="margin-bottom:2px">Blood Pressure</p>
                <p style="font-size:13px;color:#3b1054;font-weight:600;margin:0">{{ $ancVisit->bp_display ?? $ancVisit->blood_pressure ?? '—' }}</p>
            </div>
            <div>
                <p class="enc-subsection-title" style="margin-bottom:2px">Weight</p>
                <p style="font-size:13px;color:#3b1054;font-weight:600;margin:0">{{ $ancVisit->weight ?? '—' }} kg</p>
            </div>
            <div>
                <p class="enc-subsection-title" style="margin-bottom:2px">Fetal Heart Rate</p>
                <p style="font-size:13px;color:#3b1054;font-weight:600;margin:0">{{ $ancVisit->fetal_heart_rate ?? '—' }}</p>
            </div>
            <div>
                <p class="enc-subsection-title" style="margin-bottom:2px">Hemoglobin</p>
                <p style="font-size:13px;color:#3b1054;font-weight:600;margin:0">{{ $ancVisit->hemoglobin ?? '—' }}</p>
            </div>
            <div>
                <p class="enc-subsection-title" style="margin-bottom:2px">Next Visit</p>
                <p style="font-size:13px;color:#3b1054;font-weight:600;margin:0">{{ $ancVisit->next_visit_date?->format('d M Y') ?? '—' }}</p>
            </div>
        </div>

        @if($ancVisit->complaints || $ancVisit->assessment || $ancVisit->plan)
        <div style="margin-top:16px;padding-top:14px;border-top:1px solid #f3f4f6">
            @if($ancVisit->complaints)
            <div class="enc-subsection">
                <div class="enc-subsection-title">Complaints</div>
                <div class="enc-ro-text" style="white-space:pre-wrap">{{ $ancVisit->complaints }}</div>
            </div>
            @endif
            @if($ancVisit->assessment)
            <div class="enc-subsection">
                <div class="enc-subsection-title">Assessment</div>
                <div class="enc-ro-text" style="white-space:pre-wrap">{{ $ancVisit->assessment }}</div>
            </div>
            @endif
            @if($ancVisit->plan)
            <div class="enc-subsection">
                <div class="enc-subsection-title">Plan</div>
                <div class="enc-ro-text" style="white-space:pre-wrap">{{ $ancVisit->plan }}</div>
            </div>
            @endif
        </div>
        @endif

        @if(is_array($ancVisit->danger_signs) && count($ancVisit->danger_signs))
        <div style="margin-top:14px;padding:10px 14px;background:#fee2e2;border-left:3px solid #dc2626;border-radius:6px">
            <p style="font-size:11.5px;color:#991b1b;font-weight:700;margin:0 0 4px">⚠ Danger signs recorded</p>
            <p style="font-size:11.5px;color:#7f1d1d;margin:0">{{ implode(', ', $ancVisit->danger_signs) }}</p>
        </div>
        @endif

        @php
            $given = array_filter([
                'IFAS'      => $ancVisit->ifas_issued,
                'TT'        => $ancVisit->tt_given,
                'IPTp-SP'   => $ancVisit->iptp_given,
                'Deworming' => $ancVisit->deworming_given,
                'ITN'       => $ancVisit->itn_issued,
            ]);
        @endphp
        @if(count($given))
        <div style="margin-top:14px">
            <p class="enc-subsection-title">Items Given / Administered</p>
            <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:4px">
                @foreach(array_keys($given) as $g)
                    <span class="enc-status-pill pill-done" style="font-size:11px">{{ $g }}</span>
                @endforeach
            </div>
        </div>
        @endif

        @if($ancVisit->referred)
        <div style="margin-top:14px;padding:10px 14px;background:#fef2f2;border-left:3px solid #dc2626;border-radius:6px">
            <p style="font-size:11.5px;color:#991b1b;font-weight:700;margin:0">REFERRED</p>
            @if($ancVisit->referral_reason)
                <p style="font-size:11.5px;color:#7f1d1d;margin:3px 0 0">{{ $ancVisit->referral_reason }}</p>
            @endif
        </div>
        @endif

        @if($ancVisit->health_education_given)
        <div class="enc-subsection" style="margin-top:14px">
            <div class="enc-subsection-title">Health Education Given</div>
            <div class="enc-ro-text" style="white-space:pre-wrap">{{ $ancVisit->health_education_given }}</div>
        </div>
        @endif
    </div>
</div>
@endif

{{-- ═══ CONSULTATION (if recorded) ═══ --}}
@if($visit->consultation)
<div class="enc-section">
    <div class="enc-section-head">
        <h3>Consultation</h3>
    </div>
    <div class="enc-section-body">
        @if($visit->consultation->presenting_complaints)
        <div class="enc-subsection">
            <div class="enc-subsection-title">Chief Complaint</div>
            <div class="enc-ro-text">{{ $visit->consultation->presenting_complaints }}</div>
        </div>
        @endif

        @if($visit->consultation->history_of_presenting_illness)
        <div class="enc-subsection">
            <div class="enc-subsection-title">Clinical Notes / History</div>
            <div class="enc-ro-text" style="white-space:pre-wrap">{{ $visit->consultation->history_of_presenting_illness }}</div>
        </div>
        @endif

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
            @if($visit->consultation->examination_findings)
            <div class="enc-subsection" style="margin-bottom:0">
                <div class="enc-subsection-title">Examination Findings</div>
                <div class="enc-ro-text" style="white-space:pre-wrap">{{ $visit->consultation->examination_findings }}</div>
            </div>
            @endif
            @if($visit->consultation->treatment_plan)
            <div class="enc-subsection" style="margin-bottom:0">
                <div class="enc-subsection-title">Treatment Plan</div>
                <div class="enc-ro-text" style="white-space:pre-wrap">{{ $visit->consultation->treatment_plan }}</div>
            </div>
            @endif
        </div>

        @if($diagDisplay !== '')
        <div class="enc-subsection" style="margin-top:14px">
            <div class="enc-subsection-title">Diagnosis</div>
            <div class="enc-ro-text">{{ $diagDisplay }}</div>
        </div>
        @endif
    </div>
</div>
@endif

{{-- ═══ LAB ORDERS ═══ --}}
@if($visit->labOrders->count())
<div class="enc-section">
    <div class="enc-section-head">
        <h3>Laboratory Tests</h3>
        <span class="enc-status-pill pill-info">{{ $visit->labOrders->count() }} order(s)</span>
    </div>
    <div class="enc-section-body" style="padding:0">
        <table class="enc-table">
            <thead>
                <tr>
                    <th class="enc-th-left">Test</th>
                    <th>Status</th>
                    <th class="enc-th-left">Result</th>
                </tr>
            </thead>
            <tbody>
                @foreach($visit->labOrders as $o)
                <tr>
                    <td class="enc-td-left" style="font-weight:500">{{ $o->test_name ?? '—' }}</td>
                    <td><span class="enc-status-pill {{ $o->status === 'validated' ? 'pill-done' : 'pill-pending' }}">{{ ucfirst(str_replace('_', ' ', $o->status)) }}</span></td>
                    <td class="enc-td-left" style="font-size:11.5px;color:#4b5563">
                        @if($o->result && $o->result->status === 'validated')
                            <span style="color:#16a34a;font-weight:600">Validated</span>
                        @elseif($o->result)
                            <span style="color:#d97706">Pending validation</span>
                        @else
                            <span style="color:#9ca3af">No result on file</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

{{-- ═══ IMAGING REQUESTS ═══ --}}
@if($visit->imagingRequests->count())
<div class="enc-section">
    <div class="enc-section-head">
        <h3>Imaging</h3>
        <span class="enc-status-pill pill-info">{{ $visit->imagingRequests->count() }} request(s)</span>
    </div>
    <div class="enc-section-body" style="padding:0">
        <table class="enc-table">
            <thead>
                <tr>
                    <th class="enc-th-left">Imaging Type</th>
                    <th class="enc-th-left">Indication</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @foreach($visit->imagingRequests as $ir)
                <tr>
                    <td class="enc-td-left" style="font-weight:500">{{ $ir->imaging_type }}</td>
                    <td class="enc-td-left" style="font-size:11.5px;color:#4b5563">{{ $ir->clinical_indication ?? '—' }}</td>
                    <td><span class="enc-status-pill {{ in_array($ir->status, ['reported','verified']) ? 'pill-done' : 'pill-pending' }}">{{ ucfirst($ir->status) }}</span></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

{{-- ═══ PRESCRIPTIONS ═══ --}}
@if($visit->prescriptions->count())
<div class="enc-section">
    <div class="enc-section-head">
        <h3>Prescriptions</h3>
        <span class="enc-status-pill pill-info">{{ $visit->prescriptions->count() }} item(s)</span>
    </div>
    <div class="enc-section-body" style="padding:0">
        <table class="enc-table">
            <thead>
                <tr>
                    <th class="enc-th-left">Drug</th>
                    <th>Dosage</th>
                    <th>Frequency</th>
                    <th>Duration</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @foreach($visit->prescriptions as $rx)
                <tr>
                    <td class="enc-td-left" style="font-weight:500">{{ $rx->drug_name ?? optional($rx->drugItem)->name ?? '—' }}</td>
                    <td style="font-size:11.5px">{{ $rx->dosage ?? '—' }}</td>
                    <td style="font-size:11.5px">{{ $rx->frequency ?? '—' }}</td>
                    <td style="font-size:11.5px">{{ $rx->duration ?? '—' }}</td>
                    <td><span class="enc-status-pill {{ $rx->status === 'dispensed' ? 'pill-done' : 'pill-pending' }}">{{ ucfirst($rx->status ?? '—') }}</span></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

{{-- ═══ INVOICE ═══ --}}
@if($visit->invoice)
<div class="enc-section">
    <div class="enc-section-head">
        <h3>Invoice</h3>
        <span style="font-family:ui-monospace,monospace;font-size:11px;color:#6b7280">{{ $visit->invoice->invoice_number }}</span>
    </div>
    <div class="enc-section-body">
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px">
            <div>
                <p style="font-size:10.5px;color:#9ca3af;text-transform:uppercase;letter-spacing:.3px;margin:0">Total</p>
                <p style="font-size:14px;color:#3b1054;font-weight:700;margin:3px 0 0">KES {{ number_format($visit->invoice->total_amount ?? 0) }}</p>
            </div>
            <div>
                <p style="font-size:10.5px;color:#9ca3af;text-transform:uppercase;letter-spacing:.3px;margin:0">Paid</p>
                <p style="font-size:14px;color:#16a34a;font-weight:700;margin:3px 0 0">KES {{ number_format($visit->invoice->amount_paid ?? 0) }}</p>
            </div>
            <div>
                <p style="font-size:10.5px;color:#9ca3af;text-transform:uppercase;letter-spacing:.3px;margin:0">Balance</p>
                <p style="font-size:14px;font-weight:700;margin:3px 0 0;color:{{ ($visit->invoice->balance ?? 0) > 0 ? '#dc2626' : '#16a34a' }}">
                    KES {{ number_format($visit->invoice->balance ?? 0) }}
                </p>
            </div>
            <div>
                <p style="font-size:10.5px;color:#9ca3af;text-transform:uppercase;letter-spacing:.3px;margin:0">Payment Mode</p>
                <p style="font-size:13px;color:#374151;font-weight:600;margin:3px 0 0;text-transform:capitalize">{{ $visit->payment_mode ?? '—' }}</p>
            </div>
        </div>
    </div>
</div>
@endif

{{-- ═══ FOOTER LINKS ═══ --}}
<div style="margin-top:18px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap">
    <a href="{{ route('patients.show', $visit->patient_id) }}" class="enc-btn-cancel" style="text-decoration:none">Patient Profile</a>
    <a href="{{ route('maternity.anc.visits', ['tab' => 'completed']) }}" class="enc-btn-cancel" style="text-decoration:none">Back to Completed Visits</a>
</div>

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