@extends('layouts.app')
@section('title', 'Dashboard')

@section('content')
<div class="page-head">
    <div>
        <div class="eyebrow">{{ now()->format('l, j F Y') }}</div>
        <h1>Good {{ now()->hour < 12 ? 'morning' : (now()->hour < 17 ? 'afternoon' : 'evening') }}, Dr. {{ explode(' ', auth()->user()->name)[0] }}</h1>
    </div>
    <a href="{{ route('appointments.create') }}" class="btn btn-primary">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14" stroke-linecap="round"/></svg>
        New appointment
    </a>
</div>

<div class="grid grid-4" style="margin-bottom:22px;">
    @php
        $tiles = [
            ['Patients', $stats['patients'], 'patients.index'],
            ['Appointments today', $stats['appts_today'], 'appointments.index'],
            ['This week', $stats['appts_week'], 'appointments.index'],
            ['Lab reports this month', $stats['labs_this_month'], null],
        ];
    @endphp
    @foreach($tiles as [$label, $num, $to])
        <div class="card stat">
            <div class="label">{{ $label }}</div>
            <div class="num">{{ $num }}</div>
        </div>
    @endforeach
</div>

<div class="grid grid-2">
    <div class="card">
        <div class="card-head">
            <h3>Today's schedule</h3>
            <a href="{{ route('appointments.index', ['filter' => 'today']) }}" class="sub">View all →</a>
        </div>
        @forelse($todaysAppointments as $appt)
            <a href="{{ route('patients.show', $appt->patient) }}" class="list-link">
                <div style="display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--border);">
                    <div style="font-family:'Fraunces',serif;font-size:17px;font-weight:600;width:62px;flex:0 0 62px;">{{ $appt->scheduled_at->format('g:i') }}<span style="font-size:11px;color:var(--faint)"> {{ $appt->scheduled_at->format('A') }}</span></div>
                    <div class="avatar" style="width:36px;height:36px;flex-basis:36px;font-size:13px;">{{ $appt->patient->initials }}</div>
                    <div style="flex:1;min-width:0;">
                        <div style="font-weight:600;">{{ $appt->patient->name }}</div>
                        <div class="meta faint" style="font-size:12.5px;">{{ $appt->reason ?: 'Consultation' }}</div>
                    </div>
                    <span class="badge badge-{{ $appt->status_color }}"><span class="dot"></span>{{ ucfirst(str_replace('_',' ',$appt->status)) }}</span>
                </div>
            </a>
        @empty
            <div class="empty">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 3v4M16 3v4M4 9h16M5 5h14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" stroke-linecap="round"/></svg>
                No appointments today. Enjoy the calm.
            </div>
        @endforelse
    </div>

    <div class="stack">
        <div class="card">
            <div class="card-head"><h3>Coming up</h3></div>
            @forelse($upcoming as $appt)
                <div style="display:flex;align-items:center;gap:12px;padding:12px 22px;border-bottom:1px solid var(--border);">
                    <div style="font-size:12.5px;color:var(--muted);width:74px;flex:0 0 74px;">{{ $appt->scheduled_at->format('D, M j') }}<br><span class="faint">{{ $appt->scheduled_at->format('g:i A') }}</span></div>
                    <div style="flex:1;font-weight:500;font-size:14px;">{{ $appt->patient->name }}</div>
                </div>
            @empty
                <div class="empty" style="padding:26px;">Nothing scheduled ahead.</div>
            @endforelse
        </div>

        <div class="card">
            <div class="card-head"><h3>Recent lab reports</h3></div>
            @forelse($recentLabs as $lab)
                <a href="{{ route('lab-reports.show', $lab) }}" class="list-link">
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 22px;border-bottom:1px solid var(--border);">
                        <div style="flex:1;min-width:0;"><div style="font-weight:600;font-size:14px;">{{ $lab->panel ?: 'Lab report' }}</div><div class="faint" style="font-size:12.5px;">{{ $lab->patient->name }}</div></div>
                        <div class="faint" style="font-size:12.5px;">{{ $lab->report_date->format('M j') }}</div>
                    </div>
                </a>
            @empty
                <div class="empty" style="padding:26px;">No lab reports yet.</div>
            @endforelse
        </div>
    </div>
</div>
@endsection