@extends('layouts.app')
@section('title', 'Completed ANC Visits')
@section('content')
@include('partials._encounter-styles')

{{-- Scoped table-header restyle + simplifications (May 14 2026):
     • Stats cards strip removed — the table itself + the date-range
       filter cover the same information without the visual weight.
     • Section-head "1 Completed Visits — 10 visit(s)" row removed —
       the page title at the top already labels the content, and the
       pagination "Showing X of Y" line confirms the count. The
       numbered prefix only made sense when there were multiple
       sections on the page.
     • Table thead made grey (was CR-purple via the shared enc-table
       partial); scoped to .anc-completed-page so no other page that
       uses enc-table is affected. --}}
<style>
.anc-completed-page .enc-table thead tr { background: #f9fafb; }
.anc-completed-page .enc-table thead th {
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}
</style>

<div class="enc-page anc-completed-page">

{{-- ═══ HEADER ═══
     Same pattern as visits/opd.blade.php and visits/completed.blade.php
     (added 25 May 2026): title + subheading on the left, back/return
     button on the top right. Uses the standard Tailwind classes
     instead of the bespoke .enc-page styling so the three "lifetime"
     list pages (OPD live, OPD completed, ANC completed) look
     identical at the header level. --}}
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div>
        <h1 class="text-lg font-bold text-gray-900">Completed ANC Visits</h1>
        <p class="text-xs text-gray-400">Lifetime Visits</p>
    </div>
    <a href="{{ route('maternity.anc.visits') }}"
       class="btn-secondary text-xs px-4 inline-flex items-center gap-1"
       style="text-decoration:none">
        <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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        Back to Active Queue
    </a>
</div>

{{-- Stats cards strip removed May 14 2026 — see header comment. --}}

{{-- ═══ FILTERS ═══ --}}
<div class="enc-section" style="margin-top:14px;padding:14px 18px">
    <form method="GET" style="display:flex;flex-wrap:wrap;gap:10px;align-items:center">
        {{-- 25 May 2026: "Search" and "Date Range" labels above the
             inputs were removed. Placeholder text + the calendar
             icon on each date picker already convey what each field
             is for, and the labels added a header row that the
             other visits-list pages don't have. --}}
        <div style="flex:1;min-width:200px">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Name, MRN, phone, visit number..." style="width:100%">
        </div>
        <div>
            <div class="hmis-date-range">
                <input type="date" name="date_from" value="{{ request('date_from') }}"
                       class="hmis-date-input no-flatpickr" onchange="this.form.submit()">
                <span class="hmis-date-sep">to</span>
                <input type="date" name="date_to" value="{{ request('date_to') }}"
                       class="hmis-date-input no-flatpickr" onchange="this.form.submit()">
            </div>
        </div>
        <div>
            <button type="submit" class="enc-btn-primary">Filter</button>
        </div>
        @if(request()->hasAny(['search','date_from','date_to']))
            <div><a href="{{ route('maternity.anc.visits.completed') }}" class="enc-btn-cancel">Clear</a></div>
        @endif
    </form>
</div>

{{-- ═══ VISITS TABLE ═══ --}}
<div class="enc-section">
    {{-- Section header row ("1 Completed Visits — 10 visit(s)") removed May 14 2026.
         Page title above + pagination footer already convey what this is and how many. --}}
    <div class="enc-section-body" style="padding:0">
        <table class="enc-table">
            {{-- Column set: Date · Patient · Age/Sex · Phone ·
                 Bill Total · Payer · Next Appointment · Actions.
                 Department and Clinician were dropped on 25 May 2026
                 — completed ANC visits all sit in Maternity by
                 definition, so the Department column was repeating
                 the same value on every row, and the Clinician was
                 already visible on the encounter page itself. --}}
            <thead>
                <tr>
                    <th>Date</th>
                    <th class="enc-th-left">Patient</th>
                    <th>Age / Sex</th>
                    <th>Phone</th>
                    <th>Bill Total</th>
                    <th>Payer</th>
                    <th>Next Appointment</th>
                    <th style="width:90px">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($visits as $v)
                @php
                    // Next appointment is stored on the AncVisit record
                    // that's linked to this Visit. The relation is
                    // eager-loaded in the controller so this doesn't
                    // hit the database per-row. Falls back to the
                    // patient's active ANC registration's next_visit_date
                    // if the AncVisit row didn't carry one (older data).
                    $nextAppt = $v->ancVisit?->next_visit_date;
                    if (! $nextAppt) {
                        $activeReg = \App\Models\AncRegistration::where('patient_id', $v->patient_id)
                            ->where('status', 'active')->first();
                        $nextAppt = $activeReg?->next_visit_date;
                    }
                @endphp
                <tr class="hmis-row-click" data-href="{{ route('maternity.anc.visit.view', $v) }}">
                    <td style="font-size:11.5px">
                        {{ $v->check_out_at?->format('d M Y') ?? $v->check_in_at?->format('d M Y') ?? '—' }}
                    </td>
                    <td class="enc-td-left">
                        <p class="text-base font-medium text-gray-900" style="margin:0">{{ $v->patient->full_name ?? '—' }}</p>
                    </td>
                    <td style="font-size:11.5px">{{ $v->patient->age ?? '' }} / {{ ucfirst(substr($v->patient->gender ?? '', 0, 1)) }}</td>
                    <td style="font-size:11.5px">{{ $v->patient->phone ?? '—' }}</td>
                    <td style="font-size:11.5px;font-weight:600">
                        @if($v->invoice)
                            <span style="color:{{ ($v->invoice?->balance ?? 0) > 0 ? '#dc2626' : '#16a34a' }}">KES {{ number_format($v->invoice?->total_amount ?? 0) }}</span>
                            @if(($v->invoice?->balance ?? 0) > 0)<br><span style="font-size:10.5px;color:#f87171;font-weight:400">Bal: {{ number_format($v->invoice?->balance) }}</span>@endif
                        @else
                            <span style="color:#9ca3af;font-weight:400">-</span>
                        @endif
                    </td>
                    <td style="font-size:11.5px">{{ $v->payer_label }}</td>
                    <td style="font-size:11.5px">
                        @if($nextAppt)
                            {{-- Highlight if the next appointment is in
                                 the past — the patient is overdue and
                                 reception should follow up. --}}
                            @php $isOverdue = $nextAppt < \Carbon\Carbon::today(); @endphp
                            <span style="color:{{ $isOverdue ? '#dc2626' : '#1f2937' }};font-weight:{{ $isOverdue ? '700' : '500' }}">
                                {{ $nextAppt->format('d M Y') }}
                            </span>
                            @if($isOverdue)<br><span style="font-size:10px;color:#dc2626">Overdue</span>@endif
                        @else
                            <span style="color:#9ca3af">—</span>
                        @endif
                    </td>
                    <td>
                        <a href="{{ route('patients.show', $v->patient_id) }}" class="enc-btn-cancel" style="padding:4px 10px;font-size:11px;text-decoration:none">Profile</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" style="text-align:center;color:#9ca3af;padding:28px">
                        <p style="margin:0">No completed ANC visits match your filters.</p>
                        @if(request()->hasAny(['search','date_from','date_to']))
                            <a href="{{ route('maternity.anc.visits.completed') }}" style="color:#c026d3;font-size:12px;font-weight:600;text-decoration:none;display:inline-block;margin-top:6px">Clear filters →</a>
                        @endif
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
        @if($visits->hasPages())
            <div style="padding:12px 18px;border-top:1px solid #f3f4f6">
                {{ $visits->links() }}
            </div>
        @endif
    </div>
</div>

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