@extends('layouts.admin', [
    'title' => 'Booking Report',
    'pageTitle' => 'Booking Report',
    'active' => 'reports',
])

@section('content')
    <div class="space-y-5">
        <div class="flex min-w-0 flex-col gap-3 2xl:flex-row 2xl:items-center 2xl:justify-between">
            <p class="text-sm font-medium leading-6 text-booklio-muted">Analyze booking volume, appointment status, and appointment history by date range.</p>
            @include('admin.reports.partials.nav', ['activeTab' => 'bookings'])
        </div>

        @include('admin.reports.partials.filters')

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_380px]">
            <x-ui.card title="Bookings by Date">
                <div class="mt-4 flex h-72 items-end gap-3 rounded-xl border border-booklio-border bg-slate-50 p-5">
                    @forelse ($bookingsByDate as $bar)
                        <div class="flex flex-1 flex-col items-center justify-end gap-2">
                            <div class="w-full rounded-t-lg bg-booklio-primary" style="height: {{ $bar['height'] }}px"></div>
                            <span class="max-w-12 truncate text-[10px] font-bold text-booklio-muted">{{ $bar['label'] }}</span>
                        </div>
                    @empty
                        <div class="flex h-full w-full items-center justify-center text-sm font-bold text-booklio-muted">No bookings in this range.</div>
                    @endforelse
                </div>
            </x-ui.card>

            <x-ui.card title="Bookings by Status">
                <div class="space-y-5">
                    @forelse ($bookingsByStatus as $status)
                        <div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="font-bold text-booklio-muted">{{ $status['label'] }}</span>
                                <span class="font-extrabold">{{ $status['count'] }}</span>
                            </div>
                            <div class="mt-2 h-2 rounded-full bg-slate-100">
                                <div class="h-2 rounded-full {{ $status['class'] }}" style="width: {{ $status['percent'] }}%"></div>
                            </div>
                        </div>
                    @empty
                        <p class="text-sm font-semibold text-booklio-muted">No booking statuses found.</p>
                    @endforelse
                </div>
            </x-ui.card>
        </section>

        <x-ui.card title="Appointment List" padding="p-0">
            <div class="hidden overflow-x-auto md:block booklio-scrollbar">
                <table class="min-w-[1240px] w-full divide-y divide-booklio-border">
                    <thead class="bg-slate-50">
                        <tr>
                            @foreach (['Booking', 'Customer', 'Service', 'Staff', 'Date', 'Time', 'Status'] as $heading)
                                <th class="px-5 py-4 text-left text-xs font-bold uppercase tracking-wide text-booklio-muted">{{ $heading }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-booklio-border">
                        @forelse ($appointments as $appointment)
                            <tr class="hover:bg-slate-50/80">
                                <td class="px-5 py-4 text-sm font-extrabold text-booklio-primary">{{ $appointment->booking_number }}</td>
                                <td class="px-5 py-4 text-sm font-extrabold">{{ $appointment->customer?->name ?? '-' }}</td>
                                <td class="px-5 py-4 text-sm font-semibold">{{ $appointment->service?->name ?? '-' }}</td>
                                <td class="px-5 py-4 text-sm font-semibold">{{ $appointment->staffProfile?->name ?? '-' }}</td>
                                <td class="px-5 py-4 text-sm font-semibold">{{ $appointment->starts_at?->format('M d, Y') }}</td>
                                <td class="px-5 py-4 text-sm font-semibold">{{ $appointment->starts_at?->format('g:i A') }}</td>
                                <td class="px-5 py-4"><x-ui.badge :variant="match($appointment->status_value) { 'completed' => 'success', 'confirmed', 'checked_in' => 'primary', 'cancelled' => 'danger', 'no_show' => 'muted', default => 'warning' }">{{ $appointment->status_label }}</x-ui.badge></td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="px-5 py-4 text-center text-sm font-semibold text-booklio-muted">No appointments found.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="divide-y divide-booklio-border md:hidden">
                @forelse ($appointments as $appointment)
                    <div class="p-5">
                        <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                            <div>
                                <p class="text-sm font-extrabold">{{ $appointment->customer?->name ?? '-' }}</p>
                                <p class="text-xs font-medium text-booklio-muted">{{ $appointment->service?->name ?? '-' }} with {{ $appointment->staffProfile?->name ?? '-' }}</p>
                            </div>
                            <x-ui.badge :variant="match($appointment->status_value) { 'completed' => 'success', 'confirmed', 'checked_in' => 'primary', 'cancelled' => 'danger', 'no_show' => 'muted', default => 'warning' }">{{ $appointment->status_label }}</x-ui.badge>
                        </div>
                        <p class="mt-3 text-sm font-bold">{{ $appointment->booking_number }} - {{ $appointment->starts_at?->format('M d, Y') }} at {{ $appointment->starts_at?->format('g:i A') }}</p>
                    </div>
                @empty
                    <div class="p-5 text-center text-sm font-semibold text-booklio-muted">No appointments found.</div>
                @endforelse
            </div>
            <div class="p-5"><x-ui.pagination :paginator="$appointments" /></div>
        </x-ui.card>
    </div>
@endsection