<nav class="bg-gradient-to-r from-[#033A40] via-[#044A52] to-[#033A40] text-white shadow-soft sticky top-0 z-50">
    <div class="px-4">
        <div class="flex items-center justify-between h-14">
            <a class="flex items-center gap-2.5 text-white font-bold text-lg no-underline flex-shrink-0" href="<?= site_url('dashboard') ?>">
                <img src="<?= base_url('assets/img/logo.png') ?>" alt="VelMox" class="h-9 w-9 rounded-full object-cover ring-2 ring-white/20 flex-shrink-0">
                <span class="hidden sm:inline tracking-tight">VelMox</span>
            </a>

            <form method="get" action="<?= site_url('search') ?>" class="hidden md:flex items-center flex-1 max-w-md mx-4">
                <div class="relative w-full">
                    <input type="text" name="q" placeholder="Buscar productos, ventas o usuarios..." class="w-full bg-white/10 border border-white/20 text-white placeholder-white/50 rounded-full pl-9 pr-3 py-1.5 text-sm outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent transition">
                    <i class="bi bi-search absolute left-3 top-1/2 -translate-y-1/2 text-white/40 text-xs"></i>
                </div>
            </form>

            <div class="hidden lg:flex items-center gap-2 flex-shrink-0">

                <div class="relative">
                    <button onclick="toggleNotifications()" class="relative text-gray-300 hover:text-white p-2 hover:bg-white/10 rounded-lg transition" type="button">
                        <i class="bi bi-bell text-lg"></i>
                        <?php
                        $pm = new \App\Models\ProductModel();
                        $lowStockCount = count($pm->getLowStockProducts());
                        $vp = new \App\Models\VentaPendienteModel();
                        $pendingCount = $vp->where('id_usuario', session()->get('user_id'))->countAllResults();
                        $totalNotif = $lowStockCount + $pendingCount;
                        ?>
                        <?php if ($totalNotif > 0): ?>
                        <span class="absolute -top-0.5 -right-0.5 bg-red-500 text-white text-[9px] font-bold rounded-full w-4 h-4 flex items-center justify-center"><?= $totalNotif ?></span>
                        <?php endif; ?>
                    </button>
                    <div id="notifDropdown" class="hidden absolute top-full right-0 mt-2 bg-teal-100 text-gray-800 rounded-xl shadow-soft-lg p-3 w-72 border z-50">
                    <h6 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Notificaciones</h6>
                    <?php if ($totalNotif > 0): ?>
                    <?php if ($pendingCount > 0): ?>
                    <a href="<?= site_url('sales/create') ?>" class="flex items-start gap-3 p-2 hover:bg-[#EBDF00]/10 rounded-lg no-underline transition">
                        <span class="bg-[#EBDF00]/20 text-[#EBDF00] rounded-lg p-2 flex-shrink-0"><i class="bi bi-clock-history"></i></span>
                        <div class="text-sm">
                            <p class="font-medium text-gray-800">Venta Pendiente</p>
                            <p class="text-gray-500 text-xs"><?= $pendingCount ?> venta(s) pendiente(s) por completar</p>
                        </div>
                    </a>
                    <?php endif; ?>
                    <?php if ($lowStockCount > 0): ?>
                    <a href="<?= site_url('products') ?>" class="flex items-start gap-3 p-2 hover:bg-[#EBDF00]/10 rounded-lg no-underline transition">
                        <span class="bg-[#EBDF00]/20 text-[#EBDF00] rounded-lg p-2 flex-shrink-0"><i class="bi bi-exclamation-triangle"></i></span>
                        <div class="text-sm">
                            <p class="font-medium text-gray-800">Stock Bajo</p>
                            <p class="text-gray-500 text-xs"><?= $lowStockCount ?> producto(s) con stock &le; 5</p>
                        </div>
                    </a>
                    <?php endif; ?>
                    <?php else: ?>
                    <p class="text-gray-400 text-sm text-center py-3">Sin notificaciones</p>
                    <?php endif; ?>
                    </div>
                </div>

                <a href="<?= site_url(session()->get('role') == 'admin' ? 'users' : 'dashboard') ?>" class="text-gray-300 hover:text-white p-2 hover:bg-white/10 rounded-lg transition" title="Configuración">
                    <i class="bi bi-gear text-lg"></i>
                </a>

                <div class="w-7 h-7 rounded-full bg-gradient-to-br from-teal-400 to-[#033A40] flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
                    <?= strtoupper(substr(session()->get('username'), 0, 1)) ?>
                </div>

                <a class="text-gray-300 hover:text-white no-underline border border-gray-600/50 rounded-full w-8 h-8 hover:bg-white/10 transition-all duration-200 flex items-center justify-center flex-shrink-0" href="<?= site_url('logout') ?>" title="Cerrar Sesión">
                    <i class="bi bi-box-arrow-right text-sm"></i>
                </a>
            </div>

            <button class="lg:hidden text-white p-2 flex-shrink-0 hover:bg-white/10 rounded-lg transition" type="button" onclick="document.getElementById('mobileMenu').classList.toggle('hidden')">
                <i class="bi bi-list text-2xl"></i>
            </button>
        </div>
    </div>

    <div class="hidden lg:hidden bg-gray-800/95 backdrop-blur-sm border-t border-white/10" id="mobileMenu">
        <div class="px-4 py-3 space-y-1">
            <form method="get" action="<?= site_url('search') ?>" class="mb-3">
                <div class="relative">
                    <input type="text" name="q" placeholder="Buscar..." class="w-full bg-white/10 border border-white/20 text-white placeholder-white/50 rounded-full pl-9 pr-3 py-2 text-sm outline-none focus:ring-2 focus:ring-teal-400">
                    <i class="bi bi-search absolute left-3 top-1/2 -translate-y-1/2 text-white/40"></i>
                </div>
            </form>
            <?php if (session()->get('role') == 'admin'): ?>
            <a class="flex items-center gap-3 text-gray-300 hover:text-white hover:bg-white/10 px-3 py-2.5 rounded-xl text-sm no-underline transition-all" href="<?= site_url('dashboard') ?>"><i class="bi bi-speedometer2 w-5"></i> Dashboard</a>
            <a class="flex items-center gap-3 text-gray-300 hover:text-white hover:bg-white/10 px-3 py-2.5 rounded-xl text-sm no-underline transition-all" href="<?= site_url('products') ?>"><i class="bi bi-box-seam w-5"></i> Productos</a>
            <a class="flex items-center gap-3 text-gray-300 hover:text-white hover:bg-white/10 px-3 py-2.5 rounded-xl text-sm no-underline transition-all" href="<?= site_url('sales') ?>"><i class="bi bi-cart w-5"></i> Ventas</a>
            <a class="flex items-center gap-3 text-gray-300 hover:text-white hover:bg-white/10 px-3 py-2.5 rounded-xl text-sm no-underline transition-all" href="<?= site_url('reports') ?>"><i class="bi bi-file-earmark-bar-graph w-5"></i> Reportes</a>
            <a class="flex items-center gap-3 text-gray-300 hover:text-white hover:bg-white/10 px-3 py-2.5 rounded-xl text-sm no-underline transition-all" href="<?= site_url('users') ?>"><i class="bi bi-people w-5"></i> Usuarios</a>
            <?php else: ?>
            <a class="flex items-center gap-3 text-gray-300 hover:text-white hover:bg-white/10 px-3 py-2.5 rounded-xl text-sm no-underline transition-all" href="<?= site_url('dashboard') ?>"><i class="bi bi-speedometer2 w-5"></i> Dashboard</a>
            <a class="flex items-center gap-3 text-gray-300 hover:text-white hover:bg-white/10 px-3 py-2.5 rounded-xl text-sm no-underline transition-all" href="<?= site_url('sales/create') ?>"><i class="bi bi-cart-plus w-5"></i> Registrar Venta</a>
            <a class="flex items-center gap-3 text-gray-300 hover:text-white hover:bg-white/10 px-3 py-2.5 rounded-xl text-sm no-underline transition-all" href="<?= site_url('products') ?>"><i class="bi bi-box-seam w-5"></i> Productos</a>
            <?php endif; ?>
            <div class="border-t border-white/10 pt-2 mt-2 flex items-center justify-between">
                <span class="text-gray-300 text-sm flex items-center gap-1.5">
                    <div class="w-6 h-6 rounded-full bg-gradient-to-br from-teal-400 to-[#033A40] flex items-center justify-center text-white text-[10px] font-bold"><?= strtoupper(substr(session()->get('username'), 0, 1)) ?></div>
                    <?= session()->get('username') ?>
                </span>
                <a class="text-gray-300 hover:text-white text-sm no-underline border border-gray-600/50 rounded-full px-3 py-1.5 hover:bg-white/10 transition-all flex items-center gap-1.5" href="<?= site_url('logout') ?>">
                    <i class="bi bi-box-arrow-right"></i> Salir
                </a>
            </div>
        </div>
    </div>
</nav>

<script>
function toggleNotifications() {
    const el = document.getElementById('notifDropdown');
    el.classList.toggle('hidden');
}

document.addEventListener('click', function(e) {
    const notif = document.getElementById('notifDropdown');
    if (notif && !notif.classList.contains('hidden') && !e.target.closest('[onclick="toggleNotifications()"]') && !e.target.closest('#notifDropdown')) {
        notif.classList.add('hidden');
    }
});
</script>