@php
    $activeTab = $activeTab ?? 'overview';

    $query = request()->query();
    $tabs = [
        ['key' => 'overview', 'label' => 'Overview', 'route' => route('admin.reports.index', $query)],
        ['key' => 'bookings', 'label' => 'Bookings', 'route' => route('admin.reports.bookings', $query)],
        ['key' => 'revenue', 'label' => 'Revenue', 'route' => route('admin.reports.revenue', $query)],
        ['key' => 'staff', 'label' => 'Staff', 'route' => route('admin.reports.staff', $query)],
        ['key' => 'services', 'label' => 'Services', 'route' => route('admin.reports.services', $query)],
        ['key' => 'customers', 'label' => 'Customers', 'route' => route('admin.reports.customers', $query)],
        ['key' => 'invoices', 'label' => 'Invoices', 'route' => route('admin.reports.invoices', $query)],
        ['key' => 'reminders', 'label' => 'Reminders', 'route' => route('admin.reports.reminders', $query)],
    ];
@endphp

<div class="w-[calc(100vw-2rem)] max-w-full min-w-0 overflow-x-auto booklio-scrollbar lg:w-full 2xl:w-auto">
    <div class="grid w-full grid-cols-2 overflow-hidden rounded-lg border border-booklio-border bg-white shadow-soft sm:grid-cols-4 xl:flex xl:flex-wrap">
        @foreach ($tabs as $tab)
            <a
                href="{{ $tab['route'] }}"
                @class([
                    'px-4 py-2 text-sm font-bold transition',
                    'bg-blue-50 text-booklio-primary' => $activeTab === $tab['key'],
                    'border-l border-booklio-border text-slate-600 hover:bg-slate-50 hover:text-booklio-primary' => ! $loop->first && $activeTab !== $tab['key'],
                    'text-slate-600 hover:bg-slate-50 hover:text-booklio-primary' => $loop->first && $activeTab !== $tab['key'],
                ])
            >
                {{ $tab['label'] }}
            </a>
        @endforeach
    </div>
</div>