@extends('layouts.app')
@section('content')
<div class="px-4 lg:px-10 py-8">
<p class="pulso-label">Portal · vitalcarehospital.online</p>
<h1 class="text-3xl font-display mt-1">Welcome, {{ auth()->user()->first_name }}</h1>
<p class="text-[13px] text-ink-500">145 Madison Ave · Midtown Manhattan — your care at a glance.</p>
<div class="mt-8 grid md:grid-cols-3 gap-4">
<div class="border border-stone-200 bg-white p-5"><p class="pulso-label">Upcoming</p><p class="text-2xl font-display mt-1">{{ ($appointments ?? collect())->count() }}</p><a href="{{ route('portal.appointments.index') }}" class="text-[11px] tracking-[0.14em] uppercase border-b border-ink-900 pb-1 mt-3 inline-block">View</a></div>
<div class="border border-stone-200 bg-white p-5"><p class="pulso-label">Invoices</p><p class="text-2xl font-display mt-1">$ —</p><a href="{{ route('portal.invoices.index') }}" class="text-[11px] tracking-[0.14em] uppercase border-b border-ink-900 pb-1 mt-3 inline-block">Pay</a></div>
<div class="border border-stone-200 bg-white p-5"><p class="pulso-label">Records</p><p class="text-2xl font-display mt-1">Secure</p><a href="{{ route('portal.medical-records.index') }}" class="text-[11px] tracking-[0.14em] uppercase border-b border-ink-900 pb-1 mt-3 inline-block">Open</a></div>
</div>
<div class="mt-8 border border-stone-200 bg-white">
<div class="px-5 py-3 border-b border-stone-200 flex justify-between items-center"><h3 class="font-semibold text-sm">Upcoming appointments</h3><a href="{{ route('portal.appointments.index') }}" class="text-[11px] tracking-[0.14em] uppercase">View all</a></div>
@forelse($appointments ?? [] as $a)<div class="flex justify-between items-center px-5 py-3 border-b border-stone-100 text-sm"><span>{{ $a->appointment_date->format('j M Y') }} — {{ $a->time_range }} · {{ $a->doctor->full_name ?? '' }}</span><span class="text-[11px] tracking-wide uppercase bg-stone-100 px-2 py-1">{{ $a->status->label() }}</span></div>@empty<p class="px-5 py-6 text-sm text-ink-400">No appointments yet. <a href="{{ route('portal.appointments.create') }}" class="underline">Book one</a>.</p>@endforelse
</div>
</div>
@endsection