@extends('layouts.admin', [
    'title' => 'Reports',
    'pageTitle' => 'Reports',
    '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">Track bookings, revenue, staff output, services, invoices, customers, and reminders from one analytics hub.</p>
            @include('admin.reports.partials.nav', ['activeTab' => 'overview'])
        </div>

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

        <section class="grid gap-5 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-7">
            @foreach ($summary as $item)
                <x-ui.card class="min-w-0 overflow-hidden">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <p class="truncate text-sm font-semibold text-slate-600">{{ $item['label'] }}</p>
                            <p class="mt-3 text-2xl font-extrabold leading-none">{{ $item['value'] }}</p>
                            <p class="mt-4 text-xs font-semibold text-booklio-muted">{{ $item['note'] }}</p>
                        </div>
                        <div class="hidden h-11 w-11 shrink-0 items-center justify-center rounded-xl sm:flex {{ $item['class'] }}">
                            <x-ui.icon :name="$item['icon']" class="h-5 w-5" />
                        </div>
                    </div>
                </x-ui.card>
            @endforeach
        </section>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_380px]">
            <x-ui.card title="Bookings & Revenue Trend" description="Database-backed booking trend for the selected date range.">
                <div class="mt-4 h-72 rounded-xl border border-booklio-border bg-gradient-to-b from-blue-50/70 to-white p-5">
                    @if ($trendBars->isNotEmpty())
                        <div class="flex h-full items-end gap-3">
                            @foreach ($trendBars 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/80 shadow-soft" style="height: {{ $bar['height'] }}px"></div>
                                    <span class="max-w-12 truncate text-[10px] font-bold text-booklio-muted">{{ $bar['label'] }}</span>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="flex h-full items-center justify-center text-sm font-bold text-booklio-muted">No bookings in this range.</div>
                    @endif
                </div>
            </x-ui.card>

            <x-ui.card title="Booking Status Mix">
                <div class="space-y-4">
                    @forelse ($statusMix as $status)
                        <div>
                            <div class="flex justify-between text-sm font-bold">
                                <span class="text-booklio-muted">{{ $status['label'] }}</span>
                                <span>{{ $status['percent'] }}%</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="Top Services" padding="p-0">
            <x-ui.table :headers="['Service', 'Bookings', 'Revenue', 'Performance']">
                @forelse ($topServices as $service)
                    <tr class="hover:bg-slate-50/80">
                        <td class="text-sm font-extrabold">{{ $service['name'] }}</td>
                        <td class="text-sm font-semibold">{{ $service['bookings'] }}</td>
                        <td class="text-sm font-extrabold text-booklio-primary">{{ $service['revenue'] }}</td>
                        <td><x-ui.badge :variant="$service['variant']">{{ $service['rank'] }}</x-ui.badge></td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="text-center text-booklio-muted">No services found for this range.</td></tr>
                @endforelse
            </x-ui.table>
        </x-ui.card>
    </div>
@endsection