@extends('layouts.app')
@section('title', 'Appointments')
@section('content')
{{--
    Appointments index — May 24 2026 revision.

    Changes vs prior version:
      • Stats cards bar removed (the counts were never actioned).
      • Rows are now colour-coded by how close the appointment is:
          – red     → due today or already overdue and still scheduled
                      (the receptionist must check the patient in)
          – yellow  → due in 1–3 days (heads-up to confirm with the
                      patient)
        Completed / checked-in / cancelled / no-show rows are NOT
        coloured, because the urgency only matters for live
        scheduled bookings.
      • A red banner appears above the table whenever there are
        any due rows on the current page, prompting the
        receptionist to action them. The banner only counts
        appointments visible on the current page, which mirrors
        what the user actually sees.
      • Department filter dropdown now uses the standard partial
        so it picks up the canonical department list automatically.
--}}

@php
    // Pre-compute the urgency bucket for each row once so the
    // table loop stays readable. Only scheduled rows are
    // ever flagged — everything else is "normal".
    $today = \Carbon\Carbon::today();

    $urgencyOf = function ($apt) use ($today) {
        if ($apt->status !== 'scheduled') {
            return 'normal';
        }
        // appointment_date is already cast to Carbon by the model
        $diffDays = $today->diffInDays($apt->appointment_date, false);
        // false = signed result. <= 0 means the appointment is
        // today or in the past.
        if ($diffDays <= 0)            return 'due';      // red
        if ($diffDays >= 1 && $diffDays <= 3) return 'soon';     // yellow
        return 'normal';
    };

    // The "N appointment(s) due — please check the patient in" banner
    // that used to sit here was removed 25 May 2026. The red row tint
    // + bold red "Check In" button on each due row already carry the
    // same signal without the duplicated banner header. $urgencyOf is
    // still used below to drive the row coloring.
@endphp

<!-- Actions Bar -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-5">
    <form method="GET" class="flex flex-wrap gap-2 items-center">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search patient..." class="form-input w-48">
        <input type="date" name="date" value="{{ request('date') }}" class="hmis-date-input no-flatpickr" onchange="this.form.submit()">
        <select name="status" class="form-input w-36">
            <option value="">All Status</option>
            <option value="scheduled"  {{ request('status')==='scheduled'  ? 'selected' : '' }}>Scheduled</option>
            <option value="checked_in" {{ request('status')==='checked_in' ? 'selected' : '' }}>Checked In</option>
            <option value="completed"  {{ request('status')==='completed'  ? 'selected' : '' }}>Completed</option>
            <option value="no_show"    {{ request('status')==='no_show'    ? 'selected' : '' }}>No-Show</option>
            <option value="cancelled"  {{ request('status')==='cancelled'  ? 'selected' : '' }}>Cancelled</option>
        </select>
        <select name="department" class="form-input w-44">
            <option value="">All Depts</option>
            @include('partials._department-options', ['selected' => request('department'), 'excludeDirect' => true])
        </select>
        <button class="btn-primary">Filter</button>
        @if(request()->hasAny(['search','date','status','department']))
            <a href="{{ route('appointments.index') }}" class="btn-secondary text-xs">Clear</a>
        @endif
    </form>
    <div class="flex gap-2">
        <a href="{{ route('appointments.create') }}" class="btn-primary flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            Book Appointment
        </a>
    </div>
</div>

<!-- Table -->
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50 border-b"><tr>
                <th class="table-header">Date & Time</th>
                <th class="table-header">Patient</th>
                <th class="table-header">Type</th>
                <th class="table-header">Department</th>
                <th class="table-header">Clinician</th>
                <th class="table-header">Status</th>
                <th class="table-header">Actions</th>
            </tr></thead>
            <tbody class="divide-y divide-gray-50">
                @forelse($appointments as $apt)
                    @php $urgency = $urgencyOf($apt); @endphp
                    {{-- Row colour classes. We use bg-*-50 (very pale)
                         with a left border accent so the table still
                         reads as a table, not a wall of colour. The
                         normal hover state is preserved for clickable
                         feel. --}}
                    <tr class="{{
                        $urgency === 'due'
                            ? 'bg-red-50 border-l-4 border-l-red-500 hover:bg-red-100/70'
                            : ($urgency === 'soon'
                                ? 'bg-yellow-50 border-l-4 border-l-yellow-400 hover:bg-yellow-100/70'
                                : 'hover:bg-blue-50/30')
                    }}">
                    <td class="table-cell whitespace-nowrap">
                        <p class="font-medium {{ $urgency === 'due' ? 'text-red-900' : '' }}">
                            {{ $apt->appointment_date->format('d M Y') }}
                        </p>
                        <p class="{{ $urgency === 'due' ? 'text-red-700' : 'text-gray-400' }}"
                           style="font-size:10.5px;line-height:1.3;margin-top:2px">
                            {{-- Explicit inline font-size beats the
                                 global "table .text-xs { ... !important }"
                                 rule in layouts/app.blade.php. The time +
                                 Due/In-N-days line is metadata under the
                                 date and reads better one step smaller
                                 than its surrounding 13px row text. --}}
                            {{ $apt->appointment_time ?? 'Any time' }}
                            @if($urgency === 'due')
                                · <span class="font-semibold uppercase">Due</span>
                            @elseif($urgency === 'soon')
                                @php $d = (int) $today->diffInDays($apt->appointment_date, false); @endphp
                                · <span class="font-semibold uppercase text-yellow-800">In {{ $d }} day{{ $d === 1 ? '' : 's' }}</span>
                            @endif
                        </p>
                    </td>
                    <td class="table-cell">
                        <p class="font-medium">{{ $apt->patient->full_name ?? '' }}</p>
                        <p class="text-xs text-gray-400 font-mono">{{ $apt->patient->mrn ?? '' }} · {{ $apt->patient->phone ?? '' }}</p>
                    </td>
                    <td class="table-cell capitalize text-xs">{{ str_replace('_',' ',$apt->type) }}</td>
                    <td class="table-cell text-xs">{{ $apt->department->name ?? '-' }}</td>
                    <td class="table-cell text-xs">{{ $apt->clinician->name ?? 'Any' }}</td>
                    <td class="table-cell">
                        @php $sc = ['scheduled'=>'badge-info','checked_in'=>'badge-success','completed'=>'badge-success','no_show'=>'badge-danger','cancelled'=>'badge-gray']; @endphp
                        <span class="badge {{ $sc[$apt->status] ?? 'badge-gray' }}">{{ ucfirst(str_replace('_',' ',$apt->status)) }}</span>
                    </td>
                    <td class="table-cell">
                        <div class="flex gap-1 flex-wrap">
                            @if($apt->status === 'scheduled')
                                <form method="POST" action="{{ route('appointments.checkin', $apt) }}" class="inline">@csrf
                                    {{-- For due appointments emphasise the Check In button with
                                         a solid red fill so the receptionist can't miss it. --}}
                                    <button class="{{
                                        $urgency === 'due'
                                            ? 'text-xs font-semibold text-white bg-red-600 hover:bg-red-700 px-3 py-1 rounded shadow-sm'
                                            : 'text-xs font-medium text-green-600 hover:text-green-800 px-2 py-1 rounded hover:bg-green-50'
                                    }}">Check In</button>
                                </form>
                                <!-- Reschedule trigger -->
                                <button onclick="document.getElementById('reschedule-{{ $apt->id }}').classList.toggle('hidden')" class="text-xs text-blue-600 hover:text-blue-800 px-2 py-1 rounded hover:bg-blue-50">Reschedule</button>
                                <form method="POST" action="{{ route('appointments.noshow', $apt) }}" class="inline" onsubmit="return confirm('Mark as no-show?')">@csrf
                                    <button class="text-xs text-red-500 hover:text-red-700 px-2 py-1 rounded hover:bg-red-50">No-Show</button>
                                </form>
                                <form method="POST" action="{{ route('appointments.destroy', $apt) }}" class="inline" onsubmit="return confirm('Cancel this appointment?')">@csrf @method('DELETE')
                                    <button class="text-xs text-gray-400 hover:text-gray-600 px-2 py-1">Cancel</button>
                                </form>
                            @endif
                        </div>
                        @if($apt->status === 'scheduled')
                        <div id="reschedule-{{ $apt->id }}" class="hidden mt-2 p-2 bg-blue-50 rounded-lg">
                            <form method="POST" action="{{ route('appointments.reschedule', $apt) }}" class="flex gap-2 items-end">@csrf
                                <div><label class="text-xs text-gray-500">New Date</label><input type="date" name="appointment_date" min="{{ date('Y-m-d') }}" required class="form-input text-xs py-1"></div>
                                <div><label class="text-xs text-gray-500">Time</label><input type="time" name="appointment_time" class="form-input text-xs py-1"></div>
                                <button class="btn-primary text-xs py-1 px-3">Save</button>
                            </form>
                        </div>
                        @endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="7" class="table-cell text-center text-gray-400 py-10">No appointments found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($appointments->hasPages())
    <div class="px-4 py-3 border-t bg-gray-50">{{ $appointments->links() }}</div>
    @endif
</div>
@endsection