@props(['active' => 'dashboard'])

@php
    $items = [
        ['key' => 'dashboard', 'label' => 'Dashboard', 'icon' => 'layout-dashboard', 'route' => route('admin.dashboard')],
        ['key' => 'appointments', 'label' => 'Appointments', 'icon' => 'briefcase', 'route' => route('admin.appointments.index')],
        ['key' => 'calendar', 'label' => 'Calendar', 'icon' => 'calendar-days', 'route' => route('admin.appointments.calendar')],
        ['key' => 'customers', 'label' => 'Customers', 'icon' => 'users', 'route' => route('admin.customers.index')],
        ['key' => 'services', 'label' => 'Services', 'icon' => 'sparkles', 'route' => route('admin.services.index')],
        ['key' => 'staff', 'label' => 'Staff', 'icon' => 'user-round-cog', 'route' => route('admin.staff.index')],
        ['key' => 'invoices', 'label' => 'Invoices', 'icon' => 'file-text', 'route' => route('admin.invoices.index')],
        ['key' => 'reminders', 'label' => 'Reminders', 'icon' => 'bell', 'route' => route('admin.reminders.index')],
        ['key' => 'reports', 'label' => 'Reports', 'icon' => 'chart-column', 'route' => route('admin.reports.index')],
        ['key' => 'subscription', 'label' => 'Subscription', 'icon' => 'credit-card', 'route' => route('admin.subscription.current')],
        ['key' => 'settings', 'label' => 'Settings', 'icon' => 'settings', 'route' => route('admin.settings.business')],
    ];
@endphp

<aside data-admin-sidebar class="fixed inset-y-0 left-0 z-40 hidden w-[280px] overflow-hidden border-r border-booklio-border bg-white lg:block">
    <div class="flex h-full min-h-0 flex-col">
        <div class="flex h-[92px] shrink-0 items-center gap-3 px-8">
            <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-booklio-primary text-2xl font-extrabold text-white shadow-card">
                B
            </div>
            <span class="text-[26px] font-extrabold tracking-tight text-booklio-dark">Booklio</span>
        </div>

        <nav class="min-h-0 flex-1 space-y-1 overflow-y-auto px-7 pb-4 pt-2 booklio-scrollbar">
            @foreach ($items as $item)
                @php($isActive = $active === $item['key'])
                <a
                    href="{{ $item['route'] }}"
                    @class([
                        'group flex h-12 items-center gap-3 rounded-lg px-4 text-[15px] font-semibold transition',
                        'bg-booklio-primary text-white shadow-card shadow-blue-500/20' => $isActive,
                        'text-slate-700 hover:bg-slate-50 hover:text-booklio-primary' => ! $isActive,
                    ])
                >
                    @php($iconClass = $isActive ? 'h-5 w-5 shrink-0 text-white' : 'h-5 w-5 shrink-0 text-slate-500 group-hover:text-booklio-primary')
                    <x-ui.icon :name="$item['icon']" :class="$iconClass" />
                    <span class="truncate">{{ $item['label'] }}</span>
                </a>
            @endforeach
        </nav>

        <div class="shrink-0 p-5">
            <div class="rounded-lg border border-booklio-border bg-white p-5 text-center shadow-card">
                <div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 text-booklio-primary">
                    <x-ui.icon name="gift" class="h-7 w-7" />
                </div>
                <h3 class="text-sm font-bold text-booklio-dark">Grow your business</h3>
                <p class="mt-2 text-xs leading-5 text-booklio-muted">
                    Unlock premium features and take your business further.
                </p>
                <x-ui.button variant="outline" size="sm" class="mt-4 w-full" href="{{ route('admin.subscription.upgrade') }}">
                    Upgrade Plan
                </x-ui.button>
            </div>
        </div>
    </div>
</aside>

<div data-mobile-sidebar class="fixed inset-0 z-50 hidden lg:hidden">
    <button type="button" data-close-sidebar class="absolute inset-0 bg-slate-950/45" aria-label="Close sidebar"></button>

    <aside class="relative flex h-full w-[286px] max-w-[86vw] flex-col border-r border-booklio-border bg-white shadow-modal">
        <div class="flex h-[82px] items-center justify-between gap-3 px-5">
            <div class="flex items-center gap-3">
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-booklio-primary text-xl font-extrabold text-white shadow-card">
                    B
                </div>
                <span class="text-2xl font-extrabold tracking-tight text-booklio-dark">Booklio</span>
            </div>
            <button type="button" data-close-sidebar class="flex h-10 w-10 items-center justify-center rounded-lg text-slate-500 transition hover:bg-slate-100">
                <x-ui.icon name="x" class="h-5 w-5" />
            </button>
        </div>

        <nav class="flex-1 space-y-1 overflow-y-auto px-4 pb-6 booklio-scrollbar">
            @foreach ($items as $item)
                @php($isActive = $active === $item['key'])
                @php($mobileIconClass = $isActive ? 'h-5 w-5 shrink-0 text-white' : 'h-5 w-5 shrink-0 text-slate-500 group-hover:text-booklio-primary')
                <a
                    href="{{ $item['route'] }}"
                    @class([
                        'group flex h-12 items-center gap-3 rounded-lg px-4 text-[15px] font-semibold transition',
                        'bg-booklio-primary text-white shadow-card shadow-blue-500/20' => $isActive,
                        'text-slate-700 hover:bg-slate-50 hover:text-booklio-primary' => ! $isActive,
                    ])
                >
                    <x-ui.icon :name="$item['icon']" :class="$mobileIconClass" />
                    <span>{{ $item['label'] }}</span>
                </a>
            @endforeach
        </nav>
    </aside>
</div>