@php
    $user = auth()->user();
    $isAdminPortal = $user->hasAnyRole(['Super Admin', 'Finance Admin']);

    $franchiseNav = [
        ['label' => 'Dashboard', 'route' => 'franchise.dashboard', 'live' => true],
        ['label' => 'Orders', 'live' => false],
        ['label' => 'POS', 'live' => false],
        ['label' => 'Inventory', 'live' => false],
        ['label' => 'Prescriptions', 'live' => false],
        ['label' => 'Purchase Orders', 'live' => false],
        ['label' => 'Settlements', 'live' => false],
    ];

    $adminNav = [
        ['label' => 'Dashboard', 'route' => 'admin.dashboard', 'live' => true],
        ['label' => 'Franchises', 'live' => false],
        ['label' => 'Products & Pricing', 'live' => false],
        ['label' => 'Vendors', 'live' => false],
        ['label' => 'Settlements', 'live' => false],
        ['label' => 'Reports', 'live' => false],
        ['label' => 'Audit Log', 'live' => false],
    ];

    $nav = $isAdminPortal ? $adminNav : $franchiseNav;
@endphp
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ?? 'Dashboard' }} · Pharmacy Platform</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="h-full font-body text-[15px] text-ink" x-data="{ mobileNavOpen: false }">
    <div class="min-h-full lg:grid lg:grid-cols-[16rem_1fr]">

        {{-- Sidebar --}}
        <aside
            class="fixed inset-y-0 left-0 z-40 w-64 -translate-x-full bg-primary-700 text-white transition-transform lg:static lg:translate-x-0"
            :class="{ '!translate-x-0': mobileNavOpen }"
        >
            <div class="flex h-16 items-center gap-2.5 px-6">
                <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-primary-500">
                    <svg viewBox="0 0 24 24" fill="none" class="h-4.5 w-4.5" aria-hidden="true">
                        <path d="M12 3v18M3 12h18" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
                    </svg>
                </span>
                <span class="font-display font-semibold tracking-tight">Pharmacy Platform</span>
            </div>

            <nav class="mt-4 space-y-0.5 px-3">
                @foreach ($nav as $item)
                    @if ($item['live'])
                        <a
                            href="{{ route($item['route']) }}"
                            class="flex items-center rounded-lg px-3 py-2 text-sm font-medium {{ request()->routeIs($item['route']) ? 'bg-primary-600 text-white' : 'text-white/75 hover:bg-primary-600/60 hover:text-white' }}"
                        >
                            {{ $item['label'] }}
                        </a>
                    @else
                        <span class="flex items-center justify-between rounded-lg px-3 py-2 text-sm text-white/35">
                            {{ $item['label'] }}
                            <span class="rounded bg-white/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide">Soon</span>
                        </span>
                    @endif
                @endforeach
            </nav>

            <div class="absolute bottom-0 w-full border-t border-white/10 p-4">
                <p class="px-2 text-xs text-white/50">
                    {{ $isAdminPortal ? 'Admin Portal' : 'Franchise Portal' }}
                    @if ($user->franchise)
                        · {{ $user->franchise->name }}
                    @endif
                </p>
            </div>
        </aside>

        <div
            x-show="mobileNavOpen"
            x-cloak
            @click="mobileNavOpen = false"
            class="fixed inset-0 z-30 bg-ink/40 lg:hidden"
        ></div>

        {{-- Main column --}}
        <div class="flex min-h-full flex-col">
            <header class="flex h-16 items-center justify-between border-b border-border bg-canvas-raised px-4 sm:px-8">
                <div class="flex items-center gap-3">
                    <button @click="mobileNavOpen = true" class="rounded-md p-1.5 text-ink-muted hover:bg-canvas lg:hidden" aria-label="Open navigation">
                        <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5"><path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                    </button>
                    <h1 class="font-display text-lg font-semibold">{{ $title ?? 'Dashboard' }}</h1>
                </div>

                <div class="relative" x-data="{ open: false }">
                    <button @click="open = !open" @click.outside="open = false" class="flex items-center gap-2.5 rounded-lg px-2 py-1.5 hover:bg-canvas">
                        <span class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-50 font-display text-sm font-semibold text-primary-600">
                            {{ Str::of($user->name)->substr(0, 1) }}
                        </span>
                        <span class="hidden text-left sm:block">
                            <span class="block text-sm font-medium leading-none">{{ $user->name }}</span>
                            <span class="mt-0.5 block text-xs text-ink-muted">{{ $user->getRoleNames()->first() }}</span>
                        </span>
                    </button>

                    <div
                        x-show="open"
                        x-cloak
                        x-transition
                        class="absolute right-0 mt-2 w-44 rounded-lg border border-border bg-canvas-raised py-1 shadow-lg"
                    >
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="block w-full px-4 py-2 text-left text-sm text-ink hover:bg-canvas">
                                Sign out
                            </button>
                        </form>
                    </div>
                </div>
            </header>

            <main class="flex-1 px-4 py-8 sm:px-8">
                {{ $slot }}
            </main>
        </div>
    </div>
</body>
</html>
