@props(['mobileOpen' => false])

<nav class="sticky top-0 z-20 h-16 bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border-b border-slate-200 dark:border-slate-800 flex items-center px-3 sm:px-4 lg:px-6 gap-2 sm:gap-3 shadow-sm">

    {{-- Mobile hamburger --}}
    <button @click="toggleMobile()"
        class="lg:hidden w-10 h-10 flex-shrink-0 flex items-center justify-center rounded-xl text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
        <i data-lucide="menu" class="w-5 h-5"></i>
    </button>

    {{-- Page title mobile --}}
    <h1 class="lg:hidden text-base font-bold text-slate-900 dark:text-white truncate flex-1">@yield('title', 'Dashboard')</h1>

    {{-- Spacer --}}
    <div class="flex-1 hidden md:block"></div>

    {{-- Search --}}
    <div class="hidden md:block w-48 lg:w-72">
        <div class="relative">
            <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
            <input type="text" placeholder="Search..."
                class="w-full pl-10 pr-3 py-2 text-sm bg-slate-100 dark:bg-slate-800 border-0 rounded-xl focus:ring-2 focus:ring-primary-500 focus:bg-white dark:focus:bg-slate-900 transition" />
        </div>
    </div>

    {{-- Date --}}
    <div class="hidden xl:flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 rounded-lg whitespace-nowrap flex-shrink-0">
        <i data-lucide="calendar" class="w-3.5 h-3.5"></i>
        <span>{{ now()->format('D, M d, Y') }}</span>
    </div>

    {{-- Quick Add --}}
    <div x-data="{ qopen: false }" class="relative">
        <button @click="qopen = !qopen" @click.outside="qopen = false"
            class="hidden sm:flex items-center gap-1.5 px-3 py-2 text-sm font-semibold text-white bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 rounded-xl shadow-sm hover:shadow transition-all flex-shrink-0">
            <i data-lucide="plus" class="w-4 h-4"></i>
            <span class="hidden lg:inline">Quick Add</span>
        </button>
        <div x-show="qopen" x-transition x-cloak
            class="absolute right-0 mt-2 w-56 bg-white dark:bg-slate-900 rounded-xl shadow-xl border border-slate-200 dark:border-slate-800 overflow-hidden z-50">
            <a href="{{ route('purchase.create') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-800">
                <i data-lucide="shopping-cart" class="w-4 h-4 text-blue-500"></i> New Purchase
            </a>
            <a href="{{ route('sales.create') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-800">
                <i data-lucide="receipt" class="w-4 h-4 text-green-500"></i> New Sale
            </a>
            <a href="{{ route('cash.receipt') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-800">
                <i data-lucide="plus-circle" class="w-4 h-4 text-emerald-500"></i> Receipt
            </a>
            <a href="{{ route('cash.payment') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-800">
                <i data-lucide="minus-circle" class="w-4 h-4 text-rose-500"></i> Payment
            </a>
        </div>
    </div>

    {{-- Dark mode --}}
    <button @click="$store.darkMode.toggle()"
        class="w-10 h-10 flex-shrink-0 flex items-center justify-center rounded-xl text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
        <i data-lucide="sun" x-show="!$store.darkMode.on" class="w-[18px] h-[18px]"></i>
        <i data-lucide="moon" x-show="$store.darkMode.on" x-cloak class="w-[18px] h-[18px]"></i>
    </button>

    {{-- Notifications --}}
    <div x-data="{ nopen: false }" class="relative">
        <button @click="nopen = !nopen" @click.outside="nopen = false"
            class="relative w-10 h-10 flex-shrink-0 flex items-center justify-center rounded-xl text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
            <i data-lucide="bell" class="w-[18px] h-[18px]"></i>
            <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full ring-2 ring-white dark:ring-slate-900 animate-pulse-slow"></span>
        </button>
        <div x-show="nopen" x-transition x-cloak
            class="absolute right-0 mt-2 w-80 bg-white dark:bg-slate-900 rounded-xl shadow-xl border border-slate-200 dark:border-slate-800 overflow-hidden z-50">
            <div class="px-4 py-3 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between">
                <span class="font-semibold text-sm">Notifications</span>
                <span class="text-xs text-primary-600 font-semibold cursor-pointer hover:text-primary-700">Mark all read</span>
            </div>
            <div class="max-h-80 overflow-y-auto">
                <a href="#" class="flex gap-3 p-4 hover:bg-slate-50 dark:hover:bg-slate-800 border-b border-slate-100 dark:border-slate-800">
                    <div class="w-9 h-9 min-w-9 rounded-lg bg-amber-100 dark:bg-amber-500/10 flex items-center justify-center flex-shrink-0">
                        <i data-lucide="alert-triangle" class="w-4 h-4 text-amber-600"></i>
                    </div>
                    <div class="min-w-0">
                        <p class="text-sm font-semibold">Low Stock Alert</p>
                        <p class="text-xs text-slate-500 mt-0.5 truncate">Cotton 30s below reorder level</p>
                        <p class="text-[11px] text-slate-400 mt-1">2 min ago</p>
                    </div>
                </a>
                <a href="#" class="flex gap-3 p-4 hover:bg-slate-50 dark:hover:bg-slate-800 border-b border-slate-100 dark:border-slate-800">
                    <div class="w-9 h-9 min-w-9 rounded-lg bg-green-100 dark:bg-green-500/10 flex items-center justify-center flex-shrink-0">
                        <i data-lucide="check-circle-2" class="w-4 h-4 text-green-600"></i>
                    </div>
                    <div class="min-w-0">
                        <p class="text-sm font-semibold">Payment Received</p>
                        <p class="text-xs text-slate-500 mt-0.5 truncate">Textile Corp paid ৳45,000</p>
                        <p class="text-[11px] text-slate-400 mt-1">1 hour ago</p>
                    </div>
                </a>
            </div>
        </div>
    </div>

    {{-- Profile --}}
    <div x-data="{ popen: false }" class="relative">
        <button @click="popen = !popen" @click.outside="popen = false"
            class="flex items-center gap-2 pl-1 pr-2 py-1 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800 transition flex-shrink-0">
            <div class="w-9 h-9 min-w-9 rounded-lg bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center text-white text-xs font-bold shadow-sm">
                AD
            </div>
            <div class="hidden lg:block text-left leading-tight">
                <p class="text-xs font-semibold text-slate-900 dark:text-white whitespace-nowrap">Admin</p>
                <p class="text-[10px] text-slate-500">Super Admin</p>
            </div>
            <i data-lucide="chevron-down" class="hidden lg:block w-3.5 h-3.5 text-slate-400 flex-shrink-0"></i>
        </button>
        <div x-show="popen" x-transition x-cloak
            class="absolute right-0 mt-2 w-56 bg-white dark:bg-slate-900 rounded-xl shadow-xl border border-slate-200 dark:border-slate-800 overflow-hidden z-50">
            <div class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
                <p class="text-sm font-semibold">Admin User</p>
                <p class="text-xs text-slate-500">admin@abcyarn.com</p>
            </div>
            <a href="{{ route('profile.index') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-800">
                <i data-lucide="user" class="w-4 h-4"></i> Profile
            </a>
            <a href="{{ route('settings.index') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-800">
                <i data-lucide="settings" class="w-4 h-4"></i> Settings
            </a>
            <div class="border-t border-slate-200 dark:border-slate-800">
                <a href="{{ route('logout') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10">
                    <i data-lucide="log-out" class="w-4 h-4"></i> Logout
                </a>
            </div>
        </div>
    </div>
</nav>