@extends('layouts.app')
@section('title', 'Completed Visits')
@section('content')
@include('partials._queue-routing-helper')

{{-- May 24 2026 rewrite:
     The Completed page now mirrors the OPD landing page column-for-
     column so reception sees a consistent table layout when they
     toggle between the two views. The only structural difference is:

       1. First column is "Date Completed" (check_out_at) instead of
          "Date" (check_in_at). Same column, different meaning per
          the user's spec.
       2. An Actions column on the right exposes the Reopen button
          (admin-only) that doesn't exist on the live OPD view.

     Type / MRN / Age-Sex / Phone columns were dropped to bring the
     layout in line with the OPD landing. MRN was also dropped from
     the OPD landing on the same day — see the note in opd.blade.php
     for the trade-off. --}}

{{-- ── Page header ──────────────────────────────────────────────────
     Title + subtitle on the left, Return to Today's Visits button on
     the top right. Mirrors the header on visits/opd.blade.php so the
     two pages have parity when reception toggles between them. --}}
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div>
        <h1 class="text-lg font-bold text-gray-900">Completed Visits</h1>
        <p class="text-xs text-gray-400">Lifetime Visits</p>
    </div>
    <a href="{{ route('visits.opd') }}"
       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>
        Return to Today's Visits
    </a>
</div>

{{-- Header row: filter form + visit count --}}
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden mb-0">
    <div class="px-5 py-3 border-b flex flex-wrap items-center justify-between gap-3">
        <form method="GET" class="flex flex-wrap gap-2 items-center">
            @if(request('type'))<input type="hidden" name="type" value="{{ request('type') }}">@endif
            <input type="text" name="search" value="{{ request('search') }}"
                   placeholder="Patient name, MRN, phone..." class="form-input text-xs w-48">
            <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>
            <select name="clinician" class="form-input text-xs w-40">
                <option value="">All clinicians</option>
                @include('partials._clinician-options', ['selected' => request('clinician')])
            </select>
            <button class="btn-primary text-xs">Filter</button>
            @if(request()->hasAny(['search','date_from','date_to','clinician','type']))
                <a href="{{ route('visits.opd.completed') }}" class="btn-secondary text-xs">Clear</a>
            @endif
        </form>
        {{-- The Return to Today's Visits button moved up to the page
             header (25 May 2026) — only the visit count remains here
             on the right side of the filter bar. --}}
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-400">{{ $visits->total() }} visit(s)</span>
        </div>
    </div>

    <div class="overflow-x-auto">
    <table class="w-full">
        <thead class="bg-gray-50"><tr>
            {{-- Unified columns across the four visits-list pages
                 (25 May 2026): Date · Patient · Age/Sex · Phone ·
                 Department · Bill Total · Payer · Clinician. The
                 Actions column is only on this completed page
                 because it carries the admin-only Reopen button. --}}
            <th class="table-header">Date</th>
            <th class="table-header">Patient</th>
            <th class="table-header">Age / Sex</th>
            <th class="table-header">Phone</th>
            <th class="table-header">Department</th>
            <th class="table-header">Bill Total</th>
            <th class="table-header">Payer</th>
            <th class="table-header">Clinician</th>
            @if(auth()->user()->hasAnyRole('Super Admin', 'Hospital Admin'))
            <th class="table-header text-right">Actions</th>
            @endif
        </tr></thead>
        <tbody class="divide-y divide-gray-50">
        @forelse($visits as $v)
            {{-- Row click opens the completed encounter (read-only view).
                 Reopen sits inside a <form> so the row-click handler
                 ignores clicks on it. --}}
            <tr class="hmis-row-click" data-href="{{ queueOpenUrl($v) }}">
                <td class="table-cell text-xs">
                    {{ $v->check_out_at ? $v->check_out_at->format('Y-m-d') : '-' }}
                </td>
                <td class="table-cell">
                    <p class="text-base font-medium text-gray-900">{{ $v->patient->full_name ?? '' }}</p>
                </td>
                <td class="table-cell text-xs">{{ $v->patient->age ?? '' }} / {{ ucfirst(substr($v->patient->gender ?? '', 0, 1)) }}</td>
                <td class="table-cell text-xs">{{ $v->patient->phone ?? '' }}</td>
                <td class="table-cell text-xs">{{ $v->department->name ?? '-' }}</td>
                <td class="table-cell text-xs font-semibold">
                    @if($v->invoice)
                        <span class="{{ ($v->invoice?->balance ?? 0) > 0 ? 'text-red-600' : 'text-green-600' }}">KES {{ number_format($v->invoice?->total_amount ?? 0) }}</span>
                        @if(($v->invoice?->balance ?? 0) > 0)<br><span class="text-xs text-red-400 font-normal">Bal: {{ number_format($v->invoice?->balance) }}</span>@endif
                    @else
                        <span class="text-gray-400 font-normal">-</span>
                    @endif
                </td>
                <td class="table-cell text-xs">{{ $v->payer_label }}</td>
                <td class="table-cell text-xs">{{ $v->clinician->name ?? '-' }}</td>
                @if(auth()->user()->hasAnyRole('Super Admin', 'Hospital Admin'))
                <td class="table-cell text-right">
                    {{-- Reopen is admin-only. The <form> wrapper means
                         the row-click handler ignores clicks here. --}}
                    <form method="POST" action="{{ route('visits.reopen', $v) }}" class="inline"
                          onsubmit="return confirm('Reopen this completed visit? This should only be done by authorized personnel.')">
                        @csrf
                        <button class="text-xs text-gray-500 hover:text-red-600 px-2 py-1 rounded hover:bg-red-50"
                                title="Reopen visit">↩ Reopen</button>
                    </form>
                </td>
                @endif
            </tr>
        @empty
            <tr><td colspan="{{ auth()->user()->hasAnyRole('Super Admin', 'Hospital Admin') ? 9 : 8 }}"
                    class="table-cell text-center text-gray-400 py-10">
                No completed visits found for this period.
            </td></tr>
        @endforelse
        </tbody>
    </table>
    </div>
    @if($visits->hasPages())<div class="px-4 py-3 border-t bg-gray-50">{{ $visits->links() }}</div>@endif
</div>

<p class="text-xs text-gray-400 mt-3 text-center">
    Completed visits are read-only. Reopen requires admin permission.
</p>
@endsection