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

@section('content')
<div class="row g-3 mb-4">
    <div class="col-6 col-md-4 col-xxl-2"><x-stat-card label="Today's Visits" :value="$stats['today']" icon="calendar-day" color="primary" :href="route('appointments.index', ['from' => today()->toDateString(), 'to' => today()->toDateString()])" /></div>
    <div class="col-6 col-md-4 col-xxl-2"><x-stat-card label="Inside Now" :value="$stats['inside']" icon="door-open" color="success" :href="route('security.active')" /></div>
    <div class="col-6 col-md-4 col-xxl-2"><x-stat-card label="Pending Approval" :value="$stats['pending']" icon="hourglass-split" color="warning" :href="route('walkins.pending')" /></div>
    <div class="col-6 col-md-4 col-xxl-2"><x-stat-card label="Checked Out Today" :value="$stats['checked_out_today']" icon="box-arrow-right" color="secondary" :href="route('appointments.index', ['status' => 'checked_out'])" /></div>
    <div class="col-6 col-md-4 col-xxl-2"><x-stat-card label="Visitors" :value="$stats['visitors']" icon="people" color="info" :href="route('visitors.index')" /></div>
    <div class="col-6 col-md-4 col-xxl-2"><x-stat-card label="Users" :value="$stats['users']" icon="person-gear" color="dark" :href="route('users.index')" /></div>
</div>

<div class="row g-3 mb-4">
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-header bg-white fw-semibold">Visits — last 7 days</div>
            <div class="card-body">
                @php $max = max(1, $trend->max()); @endphp
                <div class="d-flex align-items-end gap-2" style="height: 200px;">
                    @foreach ($trend as $day => $count)
                        <div class="flex-fill text-center d-flex flex-column justify-content-end h-100">
                            <div class="small fw-semibold">{{ $count }}</div>
                            <div class="bg-primary rounded-top mx-auto" style="width: 70%; height: {{ max(2, $count / $max * 160) }}px;" title="{{ $count }} visits"></div>
                            <div class="small text-muted mt-1">{{ $day }}</div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header bg-white fw-semibold">By status (all time)</div>
            <ul class="list-group list-group-flush">
                @foreach (\App\Models\Appointment::STATUSES as $key => [$label, $color])
                    <a href="{{ route('appointments.index', ['status' => $key]) }}" class="list-group-item list-group-item-action d-flex justify-content-between">
                        <span><span class="badge text-bg-{{ $color }} me-2">&nbsp;</span>{{ $label }}</span>
                        <strong>{{ $byStatus[$key] ?? 0 }}</strong>
                    </a>
                @endforeach
            </ul>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <span class="fw-semibold">Recent activity</span>
        <div class="d-flex gap-2">
            <a href="{{ route('appointments.create') }}" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg"></i> New Appointment</a>
            <a href="{{ route('reports.index') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-download"></i> Reports</a>
        </div>
    </div>
    @include('appointments._table', ['appointments' => $recent, 'compact' => true])
</div>
@endsection