@extends('layouts.admin')

@section('page_kicker', 'Calendar')
@section('page_title', 'Appointments')

@section('content')
    <div class="space-y-8">
        <div class="admin-content-card">
            <h3 class="admin-card-title">Upcoming</h3>
            <p class="admin-card-desc">Update status or propose a new time</p>
            <div class="mt-5 space-y-4">
                @forelse($upcoming as $appt)
                    <div class="rounded-2xl border border-slate-100 bg-slate-50/40 p-5">
                        <div class="flex flex-wrap items-end justify-between gap-4">
                            <div class="min-w-0 flex-1">
                                <p class="font-semibold text-slate-900">{{ $appt->patient->name ?? 'Patient' }}</p>
                                <p class="text-xs text-slate-500">{{ optional($appt->scheduled_at)->format('M j, Y g:i A') }} · {{ $appt->channel ?? 'chat' }} · <span class="font-medium text-teal-700">{{ $appt->status }}</span></p>
                                @if($appt->reason)
                                    <p class="mt-2 text-sm text-slate-600">{{ $appt->reason }}</p>
                                @endif
                            </div>
                            <form method="POST" action="{{ route('aim4wellness.appointments.update', $appt) }}" class="flex flex-wrap items-end gap-3">
                                @csrf
                                @method('PATCH')
                                <div>
                                    <label class="admin-form-label text-[10px]">Status</label>
                                    <select name="status" class="admin-input min-w-[9rem] py-2 text-sm">
                                        <option value="scheduled" @selected($appt->status === 'scheduled')>Scheduled</option>
                                        <option value="accepted" @selected($appt->status === 'accepted')>Accepted</option>
                                        <option value="rejected" @selected($appt->status === 'rejected')>Rejected</option>
                                        <option value="completed" @selected($appt->status === 'completed')>Completed</option>
                                        <option value="cancelled" @selected($appt->status === 'cancelled')>Cancelled</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="admin-form-label text-[10px]">Reschedule</label>
                                    <input type="datetime-local" name="scheduled_at" value="{{ optional($appt->scheduled_at)->format('Y-m-d\TH:i') }}" class="admin-input py-2 text-sm">
                                </div>
                                <button type="submit" class="admin-btn-dark shrink-0 px-4 py-2 text-xs">Update</button>
                            </form>
                        </div>
                    </div>
                @empty
                    <p class="text-sm text-slate-500">No upcoming appointments.</p>
                @endforelse
            </div>
            <div class="mt-6">{{ $upcoming->links() }}</div>
        </div>

        <div class="admin-content-card">
            <h3 class="admin-card-title">Past</h3>
            <p class="admin-card-desc">Completed and cancelled visits</p>
            <div class="mt-5 space-y-2">
                @forelse($past as $appt)
                    <div class="admin-list-row">
                        <span class="font-medium text-slate-900">{{ $appt->patient->name ?? 'Patient' }}</span>
                        <span class="text-xs text-slate-500 sm:text-sm">{{ optional($appt->scheduled_at)->format('M j, Y') }} · {{ $appt->status }}</span>
                    </div>
                @empty
                    <p class="text-sm text-slate-500">No past appointments.</p>
                @endforelse
            </div>
            <div class="mt-6">{{ $past->links() }}</div>
        </div>
    </div>
@endsection