@extends('layouts.admin')

@section('page_kicker', 'Overview')
@section('page_title', 'My dashboard')

@section('content')
    <div class="mb-8 flex flex-wrap gap-3">
        <a href="{{ route('patient.telehealth.book') }}" class="admin-btn-primary">Book a visit</a>
        <a href="{{ route('patient.telehealth.messages') }}" class="admin-btn-secondary">Messages</a>
    </div>
    <div class="grid gap-4 sm:grid-cols-3">
        <div class="admin-stat-card">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Appointments</p>
            <p class="mt-2 text-3xl font-bold tracking-tight text-slate-900">{{ $stats['appointments'] }}</p>
        </div>
        <div class="admin-stat-card">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Consultations</p>
            <p class="mt-2 text-3xl font-bold tracking-tight text-slate-900">{{ $stats['consultations'] }}</p>
        </div>
        <div class="admin-stat-card">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Messages</p>
            <p class="mt-2 text-3xl font-bold tracking-tight text-slate-900">{{ $stats['messages'] }}</p>
        </div>
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-2">
        <div class="admin-content-card">
            <h3 class="text-sm font-semibold text-slate-900">Upcoming sessions</h3>
            <ul class="mt-4 space-y-3 text-sm">
                @forelse($upcoming as $appt)
                    <li class="rounded-xl border border-slate-100 bg-slate-50/50 px-4 py-3">
                        <p class="font-medium 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 }} · {{ $appt->status }}</p>
                    </li>
                @empty
                    <li class="text-slate-500">No upcoming visits. <a href="{{ route('patient.telehealth.doctors') }}" class="font-semibold text-teal-700 underline decoration-teal-700/30 underline-offset-2 hover:text-teal-800">Browse doctors</a>.</li>
                @endforelse
            </ul>
        </div>
        <div class="admin-content-card">
            <h3 class="text-sm font-semibold text-slate-900">Recent consultations</h3>
            <ul class="mt-4 space-y-2 text-sm">
                @forelse($recentConsultations as $c)
                    <li class="rounded-xl border border-slate-100 bg-slate-50/80 px-3 py-2">
                        <span class="font-medium text-slate-900">{{ $c->doctor->name ?? 'Clinician' }}</span>
                        <span class="text-slate-500"> · {{ $c->type }} · {{ $c->status }}</span>
                    </li>
                @empty
                    <li class="text-slate-500">No consultations yet.</li>
                @endforelse
            </ul>
        </div>
    </div>
@endsection