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

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
    <div>
        <h1 class="h4 mb-0">Hello, {{ auth()->user()->name }}</h1>
        <div class="text-muted small">{{ now()->format('l, d F Y') }}</div>
    </div>
    <a href="{{ route('appointments.create') }}" class="btn btn-primary"><i class="bi bi-calendar-plus"></i> New Appointment</a>
</div>

<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3"><x-stat-card label="Today" :value="$stats['today']" icon="calendar-day" color="primary" :href="route('appointments.index', ['from' => today()->toDateString(), 'to' => today()->toDateString()])" /></div>
    <div class="col-6 col-lg-3"><x-stat-card label="Upcoming" :value="$stats['upcoming']" icon="calendar-event" color="info" :href="route('appointments.index', ['status' => 'approved'])" /></div>
    <div class="col-6 col-lg-3"><x-stat-card label="With Me Now" :value="$stats['inside']" icon="door-open" color="success" :href="route('appointments.index', ['status' => 'checked_in'])" /></div>
    <div class="col-6 col-lg-3"><x-stat-card label="Total Visits" :value="$stats['total']" icon="journal-text" color="secondary" :href="route('appointments.index')" /></div>
</div>

@if ($pendingWalkIns->isNotEmpty())
    <div class="card border-warning border-2 mb-4">
        <div class="card-header bg-warning-subtle fw-semibold"><i class="bi bi-person-raised-hand"></i> Walk-in visitors waiting for your approval</div>
        <div class="list-group list-group-flush">
            @foreach ($pendingWalkIns as $a)
                @include('walkins._decision', ['a' => $a])
            @endforeach
        </div>
    </div>
@endif

<div class="row g-3">
    <div class="col-lg-7">
        <div class="card h-100">
            <div class="card-header bg-white fw-semibold">Today's schedule</div>
            <ul class="list-group list-group-flush">
                @forelse ($todayList as $a)
                    <a href="{{ route('appointments.show', $a) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <div>
                            <div class="fw-semibold">{{ $a->scheduled_at->format('h:i A') }} · {{ $a->visitor->name }}</div>
                            <div class="small text-muted">{{ $a->purpose }}</div>
                        </div>
                        <x-status-badge :appointment="$a" />
                    </a>
                @empty
                    <li class="list-group-item text-center text-muted py-4">No visits scheduled for today.</li>
                @endforelse
            </ul>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="card h-100">
            <div class="card-header bg-white fw-semibold">Upcoming</div>
            <ul class="list-group list-group-flush">
                @forelse ($upcoming as $a)
                    <a href="{{ route('appointments.show', $a) }}" class="list-group-item list-group-item-action">
                        <div class="fw-semibold">{{ $a->visitor->name }}</div>
                        <div class="small text-muted">{{ $a->scheduled_at->format('D, d M · h:i A') }} — {{ $a->purpose }}</div>
                    </a>
                @empty
                    <li class="list-group-item text-center text-muted py-4">Nothing upcoming.</li>
                @endforelse
            </ul>
        </div>
    </div>
</div>
@endsection