@extends('layouts.admin')

@section('page_kicker', 'Visits')
@section('page_title', 'My appointments')

@section('content')
    <div class="admin-content-card">
        <h3 class="admin-card-title">Your schedule</h3>
        <p class="admin-card-desc">Cancel requests the clinician sees immediately in their dashboard.</p>
        <div class="mt-6 space-y-4">
            @forelse($rows as $appt)
                <div class="flex flex-wrap items-start justify-between gap-4 rounded-2xl border border-slate-100 bg-gradient-to-br from-white to-slate-50/80 p-5 shadow-sm">
                    <div class="min-w-0">
                        <p class="font-semibold text-slate-900">{{ $appt->doctor->name ?? 'Clinician' }}</p>
                        <p class="text-xs text-slate-500">{{ $appt->scheduled_at->format('M j, Y g:i A') }} · {{ $appt->channel }}</p>
                        <p class="mt-2 inline-flex rounded-full bg-teal-50 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-teal-800 ring-1 ring-teal-100">{{ $appt->status }}</p>
                        @if($appt->reason)
                            <p class="mt-3 text-sm text-slate-600">{{ $appt->reason }}</p>
                        @endif
                    </div>
                    @if(in_array($appt->status, ['scheduled', 'accepted'], true))
                        <form method="POST" action="{{ route('patient.telehealth.appointments.cancel', $appt) }}" onsubmit="return confirm('Cancel this appointment?');">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="admin-btn-danger shrink-0">Cancel visit</button>
                        </form>
                    @endif
                </div>
            @empty
                <p class="text-sm text-slate-500">You have no appointments yet. <a href="{{ route('patient.telehealth.book') }}" class="font-semibold text-teal-700 underline decoration-teal-600/30 underline-offset-2">Book a visit</a>.</p>
            @endforelse
        </div>
        <div class="mt-8">{{ $rows->links() }}</div>
    </div>
@endsection