<!doctype html>
<html lang="id">
<head>
    @php
        $appBranchId = auth()->user()?->branch_id;
        $businessName = \App\Support\AppSettings::businessName($appBranchId);
        $businessLogo = \App\Support\AppSettings::logoUrl($appBranchId);
    @endphp
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ? $title.' - '.$businessName : $businessName }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    @livewireStyles
</head>
<body class="bg-slate-50 text-slate-900">
<div class="min-h-screen md:flex">
    <aside class="hidden w-72 shrink-0 border-r border-slate-200 bg-white p-5 md:block">
        <div class="mb-8">
            <div class="flex items-center gap-3">
                @if ($businessLogo)
                    <img src="{{ $businessLogo }}" alt="{{ $businessName }}" class="h-10 w-10 rounded-md object-contain">
                @endif
                <div>
                    <div class="text-xl font-bold">{{ $businessName }}</div>
                    <div class="text-sm text-slate-500">{{ auth()->user()?->branch?->name ?? 'Lintas cabang' }}</div>
                </div>
            </div>
        </div>
        <nav class="space-y-1 text-sm">
            @php
                $newRequestCount = auth()->check()
                    ? \App\Models\CustomerOrderRequest::query()
                        ->where('status', 'baru')
                        ->when(! auth()->user()->isOwner(), fn ($q) => $q->where('branch_id', auth()->user()->branch_id))
                        ->count()
                    : 0;
                $links = [
                    ['Dashboard', 'dashboard', 'dashboard'],
                    ['POS Kasir', 'pos.create', 'pos'],
                    ['Mobile Intake', 'mobile-intake.create', 'mobile_intake'],
                    ['Pesanan', 'orders.index', 'orders'],
                    ['Inventory', 'inventory.index', 'inventory'],
                    ['Transfer Stok', 'stock-transfers.index', 'stock_transfers'],
                    ['Request Pelanggan', 'customer-requests.index', 'customer_requests'],
                    ['Preview Portal', 'portal-preview.index', 'portal_preview'],
                    ['Input Biaya', 'expenses.index', 'expenses'],
                    ['Laporan', 'reports.index', 'reports'],
                    ['Leaderboard', 'leaderboards.index', 'leaderboards'],
                    ['Bonus Karyawan', 'bonuses.index', 'bonuses'],
                    ['Pengaturan', 'settings.index', 'settings'],
                    ['Permission Matrix', 'permissions.index', 'permissions'],
                ];
            @endphp
            @foreach ($links as [$label, $route, $permission])
                @continue(! auth()->user()->canPermission($permission))
                <a class="flex items-center justify-between rounded-md px-3 py-2 {{ request()->routeIs($route) ? 'bg-slate-900 text-white' : 'text-slate-700 hover:bg-slate-100' }}" href="{{ route($route) }}">
                    <span>{{ $label }}</span>
                    @if ($route === 'customer-requests.index' && $newRequestCount > 0)
                        <span class="rounded-full bg-red-600 px-2 py-0.5 text-xs text-white">{{ $newRequestCount }}</span>
                    @endif
                </a>
            @endforeach
            @if (auth()->user()->canPermission('master_data'))
                <div class="pt-4 text-xs font-semibold uppercase text-slate-400">Master Data</div>
                @foreach (['branches' => 'Cabang', 'categories' => 'Kategori', 'products' => 'Produk', 'customers' => 'Pelanggan', 'suppliers' => 'Supplier', 'users' => 'User'] as $module => $label)
                    <a class="block rounded-md px-3 py-2 text-slate-700 hover:bg-slate-100" href="{{ route('master.index', $module) }}">{{ $label }}</a>
                @endforeach
            @endif
        </nav>
    </aside>
    <div id="mobile-sidebar" class="fixed inset-0 z-30 hidden md:hidden" aria-hidden="true">
        <button type="button" id="mobile-sidebar-backdrop" class="absolute inset-0 bg-slate-900/50" aria-label="Tutup menu"></button>
        <aside class="relative h-full w-80 max-w-[86vw] overflow-y-auto bg-white p-5 shadow-xl">
            <div class="mb-6 flex items-start justify-between gap-3">
                <div class="flex items-center gap-3">
                    @if ($businessLogo)
                        <img src="{{ $businessLogo }}" alt="{{ $businessName }}" class="h-10 w-10 rounded-md object-contain">
                    @endif
                    <div>
                        <div class="text-lg font-bold">{{ $businessName }}</div>
                        <div class="text-sm text-slate-500">{{ auth()->user()?->branch?->name ?? 'Lintas cabang' }}</div>
                    </div>
                </div>
                <button type="button" id="mobile-sidebar-close" class="rounded-md border px-3 py-2 text-sm" aria-label="Tutup menu">×</button>
            </div>
            <nav class="space-y-1 text-sm">
                @foreach ($links as [$label, $route, $permission])
                    @continue(! auth()->user()->canPermission($permission))
                    <a class="flex items-center justify-between rounded-md px-3 py-3 {{ request()->routeIs($route) ? 'bg-slate-900 text-white' : 'text-slate-700 hover:bg-slate-100' }}" href="{{ route($route) }}">
                        <span>{{ $label }}</span>
                        @if ($route === 'customer-requests.index' && $newRequestCount > 0)
                            <span class="rounded-full bg-red-600 px-2 py-0.5 text-xs text-white">{{ $newRequestCount }}</span>
                        @endif
                    </a>
                @endforeach
                @if (auth()->user()->canPermission('master_data'))
                    <div class="pt-4 text-xs font-semibold uppercase text-slate-400">Master Data</div>
                    @foreach (['branches' => 'Cabang', 'categories' => 'Kategori', 'products' => 'Produk', 'customers' => 'Pelanggan', 'suppliers' => 'Supplier', 'users' => 'User'] as $module => $label)
                        <a class="block rounded-md px-3 py-3 {{ request()->routeIs('master.index') && request()->route('module') === $module ? 'bg-slate-900 text-white' : 'text-slate-700 hover:bg-slate-100' }}" href="{{ route('master.index', $module) }}">{{ $label }}</a>
                    @endforeach
                @endif
            </nav>
            <form class="mt-6" method="post" action="{{ route('logout') }}">
                @csrf
                <button class="w-full rounded-md border px-4 py-3 text-sm">Logout</button>
            </form>
        </aside>
    </div>
    <main class="flex-1">
        <header class="sticky top-0 z-10 border-b border-slate-200 bg-white/95 px-4 py-3 backdrop-blur md:hidden">
            <div class="flex items-center justify-between">
                <div class="flex min-w-0 items-center gap-2">
                    <button type="button" id="mobile-sidebar-open" class="grid h-10 w-10 shrink-0 place-items-center rounded-md border" aria-label="Buka menu">
                        <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
                    </button>
                    <div class="flex min-w-0 items-center gap-2 font-semibold">
                        @if ($businessLogo)<img src="{{ $businessLogo }}" alt="" class="h-7 w-7 rounded object-contain">@endif
                        <span class="truncate">{{ $businessName }}</span>
                    </div>
                </div>
                <form method="post" action="{{ route('logout') }}">@csrf<button class="text-sm text-slate-600">Logout</button></form>
            </div>
        </header>
        <div class="mx-auto max-w-7xl p-4 md:p-8">
            <div class="mb-6 flex items-start justify-between gap-4">
                <div>
                    <h1 class="text-2xl font-semibold">{{ $title ?? 'Dashboard' }}</h1>
                    @isset($subtitle)<p class="mt-1 text-sm text-slate-500">{{ $subtitle }}</p>@endisset
                </div>
                <form class="hidden md:block" method="post" action="{{ route('logout') }}">@csrf<button class="rounded-md border px-3 py-2 text-sm">Logout</button></form>
            </div>
            @if (session('status'))
                <div class="mb-5 rounded-md border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('status') }}</div>
            @endif
            @if ($errors->any())
                <div class="mb-5 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ $errors->first() }}</div>
            @endif
            {{ $slot }}
        </div>
    </main>
</div>
@livewireScripts
<script>
const mobileSidebar = document.getElementById('mobile-sidebar');
const openSidebar = document.getElementById('mobile-sidebar-open');
const closeSidebar = document.getElementById('mobile-sidebar-close');
const sidebarBackdrop = document.getElementById('mobile-sidebar-backdrop');

function setMobileSidebar(open) {
    if (!mobileSidebar) return;
    mobileSidebar.classList.toggle('hidden', !open);
    mobileSidebar.setAttribute('aria-hidden', open ? 'false' : 'true');
    document.body.classList.toggle('overflow-hidden', open);
}

openSidebar?.addEventListener('click', () => setMobileSidebar(true));
closeSidebar?.addEventListener('click', () => setMobileSidebar(false));
sidebarBackdrop?.addEventListener('click', () => setMobileSidebar(false));
window.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') setMobileSidebar(false);
});
</script>
</body>
</html>
