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

{{-- Top of page: action buttons and stats removed in Issue #13 May 2 2026.
     - "+ New OPD Visit" / "+ Direct Lab" / "+ Direct Radiology" duplicate
       the Queue Management page where they belong operationally.
     - "Completed Visits" button moved into the search bar row on the right
       and renamed to "View Completed Visits".
     - 6-card stats strip removed — the table itself + status filter cover
       the same information without the visual weight.
     The ANC Visits fold-in button (Issue #3, May 12 2026) was removed
     May 14 2026 once Antenatal Care was restored as a top-level sidebar
     item — duplication, not navigation help. --}}

{{-- ── Page header ──────────────────────────────────────────────────
     Title + subtitle on the left, View Completed Visits button on
     the top right. Matches the layout convention used on Expenses
     and other module landings.

     The button used to sit on the right side of the filter bar
     below; moved up here (25 May 2026) so it's the first thing the
     eye lands on, parallel to where the inverse "Return to Today's
     Visits" button sits on the Completed Visits page. --}}
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div>
        <h1 class="text-lg font-bold text-gray-900">Outpatient Visits</h1>
        <p class="text-xs text-gray-400">Today's Visits</p>
    </div>
    <a href="{{ route('visits.opd.completed') }}"
       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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        View Completed Visits
    </a>
</div>

{{-- Queue Table --}}
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
    <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">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Patient name, MRN, phone..." class="form-input text-xs w-48">
            <select name="status" class="form-input text-xs w-32">
                <option value="">All Status</option>
                @foreach(['waiting','in_triage','in_consultation','at_lab','at_pharmacy','at_radiology','awaiting_review','pending_admission','completed','cancelled'] as $st)
                <option value="{{ $st }}" {{ $statusFilter===$st?'selected':'' }}>{{ ucfirst(str_replace('_',' ',$st)) }}</option>
                @endforeach
            </select>
            <input type="date" name="date" value="{{ request('date') }}" class="hmis-date-input no-flatpickr" onchange="this.form.submit()">
            <button class="btn-primary text-xs">Filter</button>
            @if(request()->hasAny(['search','status','date']))
                <a href="{{ route('visits.opd') }}" class="btn-secondary text-xs">Clear</a>
            @endif
        </form>
        {{-- Right side of the filter bar now just shows the visit
             count. The View Completed Visits button used to live
             here too but has been promoted up to the page header
             (see comment above the header block). --}}
        <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">
        {{-- Column set unified across the four "visits list" pages
             on 25 May 2026:
                Date · Patient · Age/Sex · Phone · Department ·
                Bill Total · Payer · Clinician
             plus an Actions column on the two completed pages
             (and Next Appointment on Completed ANC). Pathway,
             Stage, and Time were dropped — the row click + page
             scope already convey what those columns conveyed. --}}
        <thead class="bg-gray-50"><tr>
            <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">Bal</th>
            <th class="table-header">Payer</th>
            <th class="table-header">Clinician</th>
        </tr></thead>
        <tbody class="divide-y divide-gray-50">
        @forelse($visits as $v)
            {{-- Entire row navigates to the encounter via the
                 hmis-row-click helper in the layout. Urgent
                 visits get a light red tint so they stand out
                 without losing the standard hover behaviour. --}}
            <tr class="hmis-row-click {{ $v->status==='urgent' ? 'bg-red-50/40' : '' }}"
                data-href="{{ queueOpenUrl($v) }}">
                <td class="table-cell text-xs">{{ $v->check_in_at ? $v->check_in_at->format('Y-m-d') : '' }}</td>
                <td class="table-cell">
                    {{-- Patient name is the primary scan-target;
                         one step larger than the surrounding text-xs
                         cells so it reads as the row's label. --}}
                    <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>
                {{-- Bill Total and Bal are split into two columns
                     (25 May 2026). Bill Total renders the total amount
                     in green when the invoice is paid in full, red
                     when there's an outstanding balance. Bal sits in
                     its own column so the figure aligns vertically
                     down the page — easier to scan for outstanding
                     debt than the previous stacked layout. --}}
                <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>
                    @else
                        <span class="text-gray-400 font-normal">-</span>
                    @endif
                </td>
                <td class="table-cell text-xs">
                    @if($v->invoice && ($v->invoice?->balance ?? 0) > 0)
                        <span class="text-red-600 font-semibold">{{ number_format($v->invoice->balance) }}</span>
                    @elseif($v->invoice)
                        <span class="text-gray-400">-</span>
                    @else
                        <span class="text-gray-400">-</span>
                    @endif
                </td>
                <td class="table-cell text-xs">{{ $v->payer_label }}</td>
                <td class="table-cell text-xs">{{ $v->clinician->name ?? '-' }}</td>
            </tr>
        @empty
            <tr><td colspan="9" class="table-cell text-center text-gray-400 py-10">No visits found. Click "+ New OPD Visit" to create one.</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>

{{-- ═══ NEW VISIT MODAL ═══ --}}
<div id="new-visit-modal" class="fixed inset-0 bg-black/30 z-50 flex items-center justify-center" style="display:none">
    <div class="bg-white rounded-xl p-6 w-[520px] shadow-xl max-h-[90vh] overflow-y-auto">
        <div class="flex items-center justify-between mb-4">
            <h4 class="text-sm font-bold text-gray-800" id="modal-title">New OPD Visit</h4>
            <button onclick="document.getElementById('new-visit-modal').style.display='none'" class="text-gray-400 hover:text-gray-600 text-lg">&times;</button>
        </div>
        <form method="POST" action="{{ route('visits.store') }}">@csrf
            <input type="hidden" name="pathway" id="visit-pathway" value="consultation">
            <div class="space-y-4">
                {{-- Patient Search --}}
                <div class="relative">
                    <label class="form-label">Patient <span class="text-red-500">*</span></label>
                    <input type="text" class="form-input patient-search" data-target="modal_patient_id" placeholder="Search name, MRN, phone..." autocomplete="off">
                    <input type="hidden" name="patient_id" id="modal_patient_id" required>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div id="dept-wrapper">
                        <label class="form-label">Department <span class="text-red-500">*</span></label>
                        {{-- Regular dropdown (for consultation) --}}
                        <select name="department_id" required class="form-input text-xs" id="dept-select">
                            @foreach(\App\Models\Department::where('is_active',true)->whereNotIn('name', ['Finance','HR','Administration','Stores','Human Resources','Accounts'])->get() as $d)
                            <option value="{{ $d->id }}" data-name="{{ strtolower($d->name) }}" {{ ($d->code ?? '')==='OPD'?'selected':'' }}>{{ $d->name }}</option>
                            @endforeach
                        </select>
                        {{-- Auto-set label (for direct lab/radiology) --}}
                        <p class="text-xs text-blue-600 mt-1 hidden" id="dept-auto-label"></p>
                    </div>
                    <div>
                        <label class="form-label">Payer Type <span class="text-red-500">*</span></label>
                        <select name="payer_type" required class="form-input text-xs" onchange="document.getElementById('modal-ins').style.display=this.value==='insurance'?'':'none'">
                            <option value="cash">Cash</option>
                            <option value="mpesa">M-Pesa</option>
                            <option value="insurance">Insurance</option>
                            <option value="corporate">Corporate</option>
                        </select>
                    </div>
                </div>
                <div id="modal-ins" class="grid grid-cols-2 gap-3" style="display:none">
                    <div><label class="form-label">Insurance</label>
                        <select name="insurance_company_id" class="form-input text-xs"><option value="">Select...</option>
                        @foreach(\App\Models\InsuranceCompany::where('is_active',true)->orderBy('name')->get() as $i)<option value="{{ $i->id }}">{{ $i->name }}</option>@endforeach
                        </select>
                    </div>
                    <div><label class="form-label">Auth Code</label><input type="text" name="authorization_code" class="form-input text-xs"></div>
                </div>
                <div class="flex items-center gap-3">
                    <label class="flex items-center gap-1.5 text-xs cursor-pointer"><input type="checkbox" name="urgent" value="1" class="rounded border-gray-300 text-red-500"> <span class="text-red-600 font-semibold">Mark Urgent</span></label>
                </div>
                <div class="bg-blue-50 rounded-lg p-3 text-xs text-blue-700" id="pathway-hint">
                    This will create a consultation visit. The encounter page will open immediately.
                </div>
            </div>
            <div class="flex gap-2 mt-5">
                <button type="submit" class="btn-success text-xs flex-1">Create Visit & Open Encounter</button>
                <button type="button" onclick="document.getElementById('new-visit-modal').style.display='none'" class="btn-secondary text-xs">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
<script>
function openNewVisit(pathway){
    document.getElementById('visit-pathway').value = pathway;
    const titles = {consultation:'New OPD Visit',direct_lab:'Direct Lab Visit',direct_radiology:'Direct Radiology Visit'};
    const hints = {
        consultation:'This will create a consultation visit. The encounter page will open immediately.',
        direct_lab:'Direct Lab visit | department auto-set to Laboratory. You will order lab tests on the encounter page.',
        direct_radiology:'Direct Radiology visit | department auto-set to Radiology. You will order imaging on the encounter page.'
    };
    document.getElementById('modal-title').textContent = titles[pathway] || 'New OPD Visit';
    document.getElementById('pathway-hint').textContent = hints[pathway] || '';

    const sel = document.getElementById('dept-select');
    const autoLabel = document.getElementById('dept-auto-label');

    if(pathway === 'direct_lab' || pathway === 'direct_radiology'){
        const target = pathway === 'direct_lab' ? 'lab' : 'radiol';
        for(let opt of sel.options){
            if(opt.dataset.name && (opt.dataset.name.includes(target) || opt.dataset.name.includes('imaging'))){
                sel.value = opt.value; break;
            }
        }
        sel.style.pointerEvents = 'none';
        sel.classList.add('bg-gray-100','text-gray-500');
        autoLabel.textContent = 'Auto-set to ' + sel.options[sel.selectedIndex].text;
        autoLabel.classList.remove('hidden');
    } else {
        sel.style.pointerEvents = '';
        sel.classList.remove('bg-gray-100','text-gray-500');
        autoLabel.classList.add('hidden');
    }

    document.getElementById('new-visit-modal').style.display = 'flex';
}
</script>
@endsection