@props(['title' => 'Admin'])

<!DOCTYPE html>
<html lang="id" class="h-full">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ $title }} — {{ config('app.name') }}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body class="h-full bg-slate-50 antialiased" x-data>

<flux:sidebar sticky stashable
    class="bg-white border-r border-slate-200 w-64"
    style="--sidebar-width: 16rem;">

    <flux:sidebar.toggle class="lg:hidden absolute top-4 right-4 text-slate-400" icon="x-mark" />

    <div class="flex items-center gap-3 px-4 py-5 border-b border-slate-100">
        <div class="w-9 h-9 bg-orange-500 rounded-xl flex items-center justify-center shrink-0">
            <span class="text-white font-bold text-sm tracking-tight">TB</span>
        </div>
        <div class="min-w-0">
            <p class="text-sm font-bold text-slate-800 truncate">Titipin Ba Be</p>
            <p class="text-xs text-slate-400 truncate">Panel Admin</p>
        </div>
    </div>

    <nav class="flex-1 overflow-y-auto sidebar-scroll px-3 py-4 space-y-0.5">

        <x-admin.nav-item route="admin.dashboard" icon="home" label="Dashboard" />

        <p class="px-3 pt-5 pb-1 text-[10px] font-semibold text-slate-400 uppercase tracking-widest">Operasional</p>

        @canany(['order.view'])
        <x-admin.nav-item route="admin.pesanan"    icon="shopping-bag" label="Pesanan" />
        @endcanany

        @canany(['payment.verify'])
        <x-admin.nav-item route="admin.pembayaran" icon="banknotes"    label="Pembayaran" />
        @endcanany

        <p class="px-3 pt-5 pb-1 text-[10px] font-semibold text-slate-400 uppercase tracking-widest">Katalog</p>

        @canany(['product.view'])
        <x-admin.nav-item route="admin.produk"    icon="cube"                label="Produk" />
        @endcanany

        @canany(['category.view'])
        <x-admin.nav-item route="admin.kategori"  icon="tag"                 label="Kategori" />
        @endcanany

        @canany(['partner.view'])
        <x-admin.nav-item route="admin.mitra"     icon="building-storefront" label="Mitra" />
        @endcanany

        @canany(['banner.view'])
        <x-admin.nav-item route="admin.banner"    icon="photo"               label="Banner" />
        @endcanany

        <p class="px-3 pt-5 pb-1 text-[10px] font-semibold text-slate-400 uppercase tracking-widest">Toko</p>

        @canany(['customer.view'])
        <x-admin.nav-item route="admin.customer"  icon="users"   label="Customer" />
        @endcanany

        @canany(['voucher.view'])
        <x-admin.nav-item route="admin.voucher"   icon="ticket"  label="Voucher" />
        @endcanany

        @canany(['delivery.view'])
        <x-admin.nav-item route="admin.ongkir"    icon="map-pin" label="Area Ongkir" />
        @endcanany

        @canany(['report.view'])
        <x-admin.nav-item route="admin.laporan"   icon="chart-bar" label="Laporan" />
        @endcanany

        @role('super_admin')
        <p class="px-3 pt-5 pb-1 text-[10px] font-semibold text-slate-400 uppercase tracking-widest">Sistem</p>
        <x-admin.nav-item route="admin.roles"      icon="shield-check"  label="Role & Akses" />
        <x-admin.nav-item route="admin.pengaturan" icon="cog-6-tooth"   label="Pengaturan" />
        @endrole

    </nav>

    <div class="border-t border-slate-100 p-3">
        <flux:dropdown position="top" align="start" class="w-full">
            <button class="w-full flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-slate-50 transition-colors text-left">
                <div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center shrink-0">
                    <span class="text-orange-700 font-bold text-sm">
                        {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                    </span>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-slate-700 truncate">{{ auth()->user()->name }}</p>
                    <p class="text-xs text-slate-400 truncate">
                        {{ auth()->user()->getRoleNames()->first() === 'super_admin' ? 'Super Admin' : 'Admin' }}
                    </p>
                </div>
                <flux:icon.chevron-up-down class="w-4 h-4 text-slate-400 shrink-0" />
            </button>
            <flux:menu class="w-52">
                <flux:menu.item icon="user" :href="route('admin.profile')">Profil Saya</flux:menu.item>
                <flux:menu.separator />
                <flux:menu.item icon="arrow-right-start-on-rectangle" variant="danger" as="button"
                    x-on:click="document.getElementById('logout-form-component').submit()">
                    Keluar
                </flux:menu.item>
            </flux:menu>
        </flux:dropdown>
    </div>

</flux:sidebar>

<flux:main class="flex flex-col min-h-screen">

    <header class="sticky top-0 z-20 bg-white border-b border-slate-200">
        <div class="flex items-center justify-between h-14 px-4 lg:px-6">
            <div class="flex items-center gap-3">
                <flux:sidebar.toggle class="lg:hidden text-slate-500" icon="bars-3" />
                <span class="font-medium text-slate-800 hidden sm:block">{{ $title }}</span>
            </div>
            <div class="flex items-center gap-2">
                <span class="hidden md:block text-xs text-slate-400">
                    {{ now()->translatedFormat('l, d F Y') }}
                </span>
                <flux:dropdown position="bottom" align="end">
                    <button class="flex items-center gap-2 pl-2 pr-3 py-1.5 rounded-full hover:bg-slate-100 transition-colors">
                        <div class="w-7 h-7 rounded-full bg-orange-100 flex items-center justify-center">
                            <span class="text-orange-700 font-bold text-xs">
                                {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                            </span>
                        </div>
                        <span class="hidden sm:block text-sm font-medium text-slate-700">
                            {{ auth()->user()->name }}
                        </span>
                        <flux:icon.chevron-down class="w-3.5 h-3.5 text-slate-400" />
                    </button>
                    <flux:menu class="w-52">
                        <flux:menu.item icon="user" :href="route('admin.profile')">Profil Saya</flux:menu.item>
                        <flux:menu.separator />
                        <flux:menu.item icon="arrow-right-start-on-rectangle" variant="danger" as="button"
                            x-on:click="document.getElementById('logout-form-component').submit()">
                            Keluar
                        </flux:menu.item>
                    </flux:menu>
                </flux:dropdown>
            </div>
        </div>
    </header>

    @if (session('success'))
        <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
            class="mx-4 lg:mx-6 mt-4">
            <div class="flex items-center gap-2 px-4 py-3 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm">
                <flux:icon.check-circle class="w-4 h-4 shrink-0" />
                {{ session('success') }}
            </div>
        </div>
    @endif

    @if (session('error'))
        <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
            class="mx-4 lg:mx-6 mt-4">
            <div class="flex items-center gap-2 px-4 py-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
                <flux:icon.x-circle class="w-4 h-4 shrink-0" />
                {{ session('error') }}
            </div>
        </div>
    @endif

    <main class="flex-1 p-4 lg:p-6">
        {{ $slot }}
    </main>

    <footer class="px-6 py-3 border-t border-slate-100 bg-white">
        <p class="text-xs text-slate-400 text-center">
            {{ config('app.name') }} · Desa Budiharja · {{ date('Y') }}
        </p>
    </footer>

</flux:main>

<form id="logout-form-component" method="POST" action="{{ route('admin.logout') }}" class="hidden">
    @csrf
</form>

@livewireScripts


</body>
</html>
