<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', config('app.name', 'Farm RMS'))</title>
    <link rel="icon" href="{{ asset('images/lucrativetech-logo2.jpg') }}" type="image/jpeg">
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @stack('head')
</head>
<body class="h-full bg-gray-50 font-sans antialiased"
      x-data="appShell()"
      x-init="init()">

<div class="flex h-full">
    <!-- Sidebar overlay (mobile) -->
    <div x-show="sidebarOpen"
         x-transition:enter="transition-opacity ease-linear duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition-opacity ease-linear duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="sidebarOpen = false"
         class="fixed inset-0 z-40 bg-gray-900/50 lg:hidden"
         style="display:none"></div>

    <!-- Sidebar -->
    <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
           class="fixed inset-y-0 left-0 z-50 flex w-64 flex-col bg-primary-800 transition-transform duration-300 ease-in-out lg:relative lg:translate-x-0">

        <!-- Logo -->
        <div class="flex h-16 shrink-0 items-center gap-3 px-4 border-b border-primary-700">
            <a href="{{ route('dashboard') }}" class="flex items-center gap-3 min-w-0">
                <img src="{{ asset('images/lucrativetech-logo2.jpg') }}" alt="Farm RMS"
                     class="h-9 w-9 rounded-lg object-cover shrink-0">
                <div class="min-w-0">
                    <p class="text-sm font-bold text-white leading-tight">Farm RMS</p>
                    <p class="text-xs text-primary-300 leading-tight truncate">Tech Farmer Records</p>
                </div>
            </a>
        </div>

        <!-- Navigation -->
        <nav class="flex-1 overflow-y-auto px-3 py-4 space-y-1">

            <x-nav-item href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg></x-slot:icon>
                Dashboard
            </x-nav-item>

            <x-nav-item href="{{ route('ponds.index') }}" :active="request()->routeIs('ponds.*')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg></x-slot:icon>
                Ponds
            </x-nav-item>

            <div class="pt-2">
                <p class="px-3 text-xs font-semibold uppercase tracking-wider text-primary-400 mb-1">Operations</p>
            </div>

            <x-nav-item href="{{ route('feeding.index') }}" :active="request()->routeIs('feeding.*')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"/></svg></x-slot:icon>
                Feeding
            </x-nav-item>

            <x-nav-item href="{{ route('water-quality.index') }}" :active="request()->routeIs('water-quality.*')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"/></svg></x-slot:icon>
                Water Quality
            </x-nav-item>

            <x-nav-item href="{{ route('health.index') }}" :active="request()->routeIs('health.*')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/></svg></x-slot:icon>
                Health & Mortality
            </x-nav-item>

            <x-nav-item href="{{ route('sampling.index') }}" :active="request()->routeIs('sampling.*')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg></x-slot:icon>
                Sampling
            </x-nav-item>

            <div class="pt-2">
                <p class="px-3 text-xs font-semibold uppercase tracking-wider text-primary-400 mb-1">Commerce</p>
            </div>

            <x-nav-item href="{{ route('harvest.index') }}" :active="request()->routeIs('harvest.*')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/></svg></x-slot:icon>
                Harvest
            </x-nav-item>

            <x-nav-item href="{{ route('sales.index') }}" :active="request()->routeIs('sales.*')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"/></svg></x-slot:icon>
                Sales
            </x-nav-item>

            <x-nav-item href="{{ route('customers.index') }}" :active="request()->routeIs('customers.*')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></x-slot:icon>
                Customers
            </x-nav-item>

            <div class="pt-2">
                <p class="px-3 text-xs font-semibold uppercase tracking-wider text-primary-400 mb-1">Management</p>
            </div>

            <x-nav-item href="{{ route('inventory.index') }}" :active="request()->routeIs('inventory.*')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg></x-slot:icon>
                Inventory
            </x-nav-item>

            <x-nav-item href="{{ route('suppliers.index') }}" :active="request()->routeIs('suppliers.*')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007z"/></svg></x-slot:icon>
                Suppliers
            </x-nav-item>

            @if(auth()->user()?->hasRole(['admin', 'manager']))
            <x-nav-item href="{{ route('finance.index') }}" :active="request()->routeIs('finance.*')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></x-slot:icon>
                Finance
            </x-nav-item>

            <x-nav-item href="{{ route('reports.index') }}" :active="request()->routeIs('reports.*')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></x-slot:icon>
                Reports
            </x-nav-item>
            @endif

            @if(auth()->user()?->isAdmin())
            <x-nav-item href="{{ route('users.index') }}" :active="request()->routeIs('users.*')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg></x-slot:icon>
                Users
            </x-nav-item>

            <x-nav-item href="{{ route('settings.index') }}" :active="request()->routeIs('settings.*')">
                <x-slot:icon><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></x-slot:icon>
                Settings
            </x-nav-item>
            @endif

        </nav>

        <!-- Sidebar footer -->
        <div class="border-t border-primary-700/60 px-4 py-4 space-y-3">
            <div class="flex items-center gap-3">
                <img src="{{ asset('images/lucrativetech-logo2.jpg') }}" alt="LucrativeTECH"
                     class="h-8 w-8 rounded-md object-cover shrink-0 opacity-90">
                <div class="min-w-0 flex-1">
                    <p class="text-xs text-primary-400 leading-none mb-0.5">Built by</p>
                    <p class="text-sm font-semibold text-white leading-none truncate">LucrativeTECH</p>
                    <p class="text-xs text-primary-400 leading-none mt-0.5 italic">...moving forward</p>
                </div>
                <span class="shrink-0 inline-flex items-center rounded-full bg-primary-700/60 px-2 py-0.5 text-xs font-medium text-primary-300 ring-1 ring-inset ring-primary-600/50">
                    v1.0.0
                </span>
            </div>
        </div>

    </aside>

    <!-- Main content -->
    <div class="flex flex-1 flex-col min-w-0">

        <!-- Top header -->
        <header class="sticky top-0 z-30 flex h-16 shrink-0 items-center gap-4 border-b border-gray-200 bg-white px-4 sm:px-6">
            <!-- Mobile sidebar toggle -->
            <button @click="sidebarOpen = !sidebarOpen"
                    type="button"
                    class="lg:hidden -m-2 p-2 text-gray-500 hover:text-gray-700">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
                </svg>
            </button>

            <!-- Page title slot or breadcrumb -->
            <div class="flex-1 min-w-0">
                @isset($heading)
                    <h1 class="text-lg font-semibold text-gray-900 truncate">{{ $heading }}</h1>
                @endisset
            </div>

            <!-- Right side actions -->
            <div class="flex items-center gap-3">
                <!-- Notification bell -->
                <div class="relative" x-data="notificationBell()">
                    <button @click="open = !open; if(open) loadNotifications()"
                            type="button"
                            class="relative -m-1 p-1 text-gray-500 hover:text-gray-700">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"/>
                        </svg>
                        <span x-show="unreadCount > 0"
                              x-text="unreadCount > 9 ? '9+' : unreadCount"
                              class="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-xs font-bold text-white"
                              style="display:none"></span>
                    </button>

                    <!-- Notification dropdown -->
                    <div x-show="open"
                         @click.outside="open = false"
                         x-transition
                         class="absolute right-0 mt-2 w-80 rounded-xl bg-white shadow-lg ring-1 ring-gray-200 z-50"
                         style="display:none">
                        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-100">
                            <p class="font-semibold text-gray-900">Notifications</p>
                            <a href="{{ route('notifications.index') }}" class="text-xs text-primary-600 hover:underline">View all</a>
                        </div>
                        <div class="max-h-80 overflow-y-auto divide-y divide-gray-50">
                            <template x-if="notifications.length === 0">
                                <p class="px-4 py-6 text-center text-sm text-gray-500">No new notifications</p>
                            </template>
                            <template x-for="n in notifications" :key="n.id">
                                <div class="px-4 py-3 hover:bg-gray-50 cursor-pointer" @click="markRead(n.id)">
                                    <p class="text-sm text-gray-900" x-text="n.data?.message ?? n.type"></p>
                                    <p class="text-xs text-gray-400 mt-0.5" x-text="n.created_at_human"></p>
                                </div>
                            </template>
                        </div>
                        <div x-show="unreadCount > 0" class="border-t border-gray-100 px-4 py-2">
                            <button @click="markAllRead()" class="text-xs text-primary-600 hover:underline">Mark all as read</button>
                        </div>
                    </div>
                </div>

                <!-- User dropdown -->
                <div class="relative" x-data="{ open: false }">
                    <button @click="open = !open" type="button"
                            class="flex items-center gap-2 rounded-lg px-2 py-1 text-sm text-gray-700 hover:bg-gray-100">
                        @if(auth()->user()?->avatar)
                            <img src="{{ auth()->user()->avatarUrl() }}"
                                 class="h-7 w-7 rounded-full object-cover ring-1 ring-gray-200" alt="">
                        @else
                            <div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary-600 text-xs font-semibold text-white">
                                {{ strtoupper(substr(auth()->user()?->name ?? 'U', 0, 1)) }}
                            </div>
                        @endif
                        <span class="hidden sm:block font-medium">{{ auth()->user()?->name }}</span>
                        <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
                    </button>
                    <div x-show="open" @click.outside="open = false" x-transition
                         class="absolute right-0 mt-1 w-48 rounded-lg bg-white shadow-lg ring-1 ring-gray-200 z-50 py-1"
                         style="display:none">
                        <a href="{{ route('profile.edit') }}"
                           class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
                            My Profile
                        </a>
                        <div class="border-t border-gray-100 my-1"></div>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit"
                                    class="flex w-full items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/></svg>
                                Sign Out
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </header>

        <!-- Impersonation banner -->
        @if(session('impersonator_id'))
        <div class="flex items-center justify-between gap-4 bg-amber-500 px-4 py-2 sm:px-6">
            <div class="flex items-center gap-2 text-sm font-medium text-white">
                <svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>
                </svg>
                <span>Impersonating <strong>{{ auth()->user()->name }}</strong></span>
            </div>
            <form method="POST" action="{{ route('impersonate.stop') }}">
                @csrf
                <button type="submit"
                        class="rounded-md bg-white/25 px-3 py-1 text-xs font-semibold text-white hover:bg-white/40 transition">
                    Stop Impersonating
                </button>
            </form>
        </div>
        @endif

        <!-- Flash messages -->
        <div class="px-4 pt-4 sm:px-6 space-y-3">
            @if(session('success'))
                <x-alert type="success" :message="session('success')" />
            @endif
            @if(session('error'))
                <x-alert type="error" :message="session('error')" />
            @endif
            @if(session('warning'))
                <x-alert type="warning" :message="session('warning')" />
            @endif
            @if($errors->any())
                <x-alert type="error" message="Please fix the errors below." />
            @endif
        </div>

        <!-- Main page content -->
        <main class="flex-1 overflow-y-auto p-4 sm:p-6">
            {{ $slot ?? '' }}
            @yield('content')
        </main>
    </div>
</div>

<script>
function appShell() {
    return {
        sidebarOpen: false,
        init() {
            // Close sidebar on large screens
            window.addEventListener('resize', () => {
                if (window.innerWidth >= 1024) this.sidebarOpen = false;
            });
        }
    }
}

function notificationBell() {
    return {
        open: false,
        unreadCount: 0,
        notifications: [],
        pollingInterval: null,

        init() {
            this.fetchCount();
            this.pollingInterval = setInterval(() => this.fetchCount(), 45000);
        },

        async fetchCount() {
            try {
                const res = await fetch('/notifications/unread-count');
                const data = await res.json();
                this.unreadCount = data.count ?? 0;
            } catch(e) {}
        },

        async loadNotifications() {
            try {
                const res = await fetch('/notifications/recent');
                const data = await res.json();
                this.notifications = data.notifications ?? [];
            } catch(e) {}
        },

        async markRead(id) {
            await fetch(`/notifications/${id}/read`, { method: 'POST', headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content } });
            this.notifications = this.notifications.filter(n => n.id !== id);
            this.unreadCount = Math.max(0, this.unreadCount - 1);
        },

        async markAllRead() {
            await fetch('/notifications/read-all', { method: 'POST', headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content } });
            this.notifications = [];
            this.unreadCount = 0;
            this.open = false;
        }
    }
}
</script>

@stack('scripts')
</body>
</html>
