<?php
if (!isset($_SESSION)) { session_start(); }

$mostrarReporte = isset($_GET['mostrarReporte']) ? intval($_GET['mostrarReporte']) : 1;
$usuarioSesion  = strtoupper($_SESSION['user_name'] ?? '');
$esUsuarioAlmacen = ($usuarioSesion === 'ALMACEN');

$paginaActual = basename($_SERVER['PHP_SELF']);
$sinTienda    = 'No asignado';
?>

<link href="../../public/assets/bootstrap-5.3.3-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../../public/assets/font-awesome-6.5.0/css/all.min.css" rel="stylesheet">

<nav class="custom-navbar">

<div class="nb-brand">

        <!-- IZQUIERDA: LOGO + NOMBRE -->
        <div class="nb-brand-left">
            <img src="../../public/img/<?php echo $LOGO_EMPRESA ?? 'default.png'; ?>" class="nb-logo">

            <span class="mobile-title d-lg-none">
                <?php echo $tienda_nombre !== $sinTienda ? $tienda_nombre : 'Sistema'; ?>
            </span>
        </div>

        <!-- DERECHA: BOTONES -->
        <div class="nb-actions d-lg-none">
            <button class="nb-toggle back"
                onclick="window.history.length > 1 ? history.back() : location.href='inicio.php'">
                <i class="fa-solid fa-arrow-left"></i>
            </button>

            <a href="../controllers/logout.php" class="nb-toggle logout">
                <i class="fa-solid fa-right-from-bracket"></i>
            </a>
        </div>

    </div>
   

    <!-- MENU -->
    <div class="nb-menu-wrap">
        <ul class="nb-menu list-unstyled">

            <?php if (!$esUsuarioAlmacen): ?>
                <li class="nb-section-label">GESTIÓN</li>
                <li class="nb-item has-sub <?= in_array($paginaActual, ['inicio.php','dashboard.php']) ? 'open' : '' ?>">
                    <a href="#" class="nb-link">
                        <i class="fa-solid fa-chart-line"></i>
                        <span>Escritorio</span>
                        <i class="fa-solid fa-chevron-down arrow"></i>
                    </a>
                    <ul class="nb-sub">
                        <li><a href="inicio.php" class="nb-sub-link <?= $paginaActual==='inicio.php' ? 'active' : '' ?>">
                            <i class="fa-solid fa-house"></i> Inicio
                        </a></li>
                        <li><a href="dashboard.php" class="nb-sub-link <?= $paginaActual==='dashboard.php' ? 'active' : '' ?>">
                            <i class="fa-solid fa-chart-pie"></i> Dashboard
                        </a></li>
                    </ul>
                </li>


                <!--<li class="nb-section-label">Administracion</li>-->

                <li class="nb-item has-sub <?= $paginaActual==='venta_vendedor.php' ? 'open' : '' ?>">
                    <a href="#" class="nb-link">
                        <i class="fa-solid fa-users"></i>
                        <span>Administración</span>
                        <i class="fa-solid fa-chevron-down arrow"></i>
                    </a>
                    <ul class="nb-sub">
                            <li><a href="venta_vendedor.php" class="nb-sub-link <?= $paginaActual==='venta_vendedor.php' ? 'active' : '' ?>">
                                <i class="fa-solid fa-users-gear"></i> Gestion de personal
                            </a></li>
                    </ul>
                </li>



                <li class="nb-section-label">Ventas</li>
                <li class="nb-item has-sub <?= $paginaActual==='almacen.php' ? 'open' : '' ?>">
                    <a href="#" class="nb-link">
                        <i class="fa-solid fa-cart-shopping"></i>
                        <span>Ventas y Créditos</span>
                        <i class="fa-solid fa-chevron-down arrow"></i>
                    </a>

                    <i class=""></i>
                    <ul class="nb-sub">
                        <li>
                            <a href="venta_activo.php"
                            class="nb-sub-link <?= ($paginaActual==='venta_activo.php' ) ? 'active' : '' ?>">
                                <i class="fa-solid fa-clipboard"></i> Consulta Ventas
                            </a>
                        </li>
                        <li>
                            <a href="venta_anulado.php"
                            class="nb-sub-link <?= ($paginaActual==='venta_anulado.php' ) ? 'active' : '' ?>">
                                <i class="fa-solid fa-file-circle-minus"></i> Doc. Anulados
                            </a>
                        </li>
                        <li>
                            <a href="creditos.php"
                            class="nb-sub-link <?= ($paginaActual==='creditos.php' ) ? 'active' : '' ?>">
                                <i class="fa-solid fa-credit-card"></i> Créditos Pendientes
                            </a>
                        </li>

                    </ul>
                </li>

                <li class="nb-section-label">Inventario</li>
                <li class="nb-item has-sub <?= $paginaActual==='almacen.php' ? 'open' : '' ?>">
                    <a href="#" class="nb-link">
                        <i class="fa-solid fa-boxes-stacked"></i>
                        <span>Almacén</span>
                        <i class="fa-solid fa-chevron-down arrow"></i>
                    </a>
                    <ul class="nb-sub">
                        <li>
                            <a href="almacen.php?mostrarReporte=0"
                            class="nb-sub-link <?= ($paginaActual==='almacen.php' && $mostrarReporte==0) ? 'active' : '' ?>">
                                <i class="fa-solid fa-box"></i> Consulta Stocks
                            </a>
                        </li>
                        <li>
                            <a href="almacen.php?mostrarReporte=1"
                            class="nb-sub-link <?= ($paginaActual==='almacen.php' && $mostrarReporte==1) ? 'active' : '' ?>">
                                <i class="fa-solid fa-print"></i> Imprimir Stocks
                            </a>
                        </li>

                    </ul>
                </li>

        <?php else: ?>

                <li class="nb-section-label">GESTIÓN</li>
                <li class="nb-item has-sub <?= in_array($paginaActual, ['inicio.php','dashboard.php']) ? 'open' : '' ?>">
                    <a href="#" class="nb-link">
                        <i class="fa-solid fa-chart-line"></i>
                        <span>Escritorio</span>
                        <i class="fa-solid fa-chevron-down arrow"></i>
                    </a>
                    <ul class="nb-sub">
                        <li><a href="inicio.php" class="nb-sub-link <?= $paginaActual==='inicio.php' ? 'active' : '' ?>">
                            <i class="fa-solid fa-house"></i> Inicio
                        </a></li>
                    </ul>
                </li>


            <!-- 🟠 SOLO USUARIO ALMACEN -->
            <li class="nb-section-label">Inventario</li>
            <li class="nb-item open">
                <a href="#" class="nb-link">
                    <i class="fa-solid fa-boxes-stacked"></i>
                    <span>Almacén</span>
                </a>
                <ul class="nb-sub" style="max-height:500px;">
                    <li>
                        <a href="almacen.php?mostrarReporte=0"
                        class="nb-sub-link <?= ($paginaActual==='almacen.php' && $mostrarReporte==0) ? 'active' : '' ?>">
                            <i class="fa-solid fa-box"></i> Consulta Stocks
                        </a>
                    </li>
                    <li>
                        <a href="almacen.php?mostrarReporte=1"
                        class="nb-sub-link <?= ($paginaActual==='almacen.php' && $mostrarReporte==1) ? 'active' : '' ?>">
                            <i class="fa-solid fa-print"></i> Imprimir Stocks
                        </a>
                    </li>
                </ul>
            </li>

    <?php endif; ?>



        </ul>
    </div>

    <!-- FOOTER -->
    <div class="nb-footer">

        <div class="nb-user">
            <div class="nb-avatar"><?= $usuarioSesion ? $usuarioSesion[0] : 'U' ?></div>
            <div>
                <div class="nb-user-name"><?= htmlspecialchars($usuarioSesion) ?></div>
                <div class="nb-user-role">Usuario activo</div>
            </div>
        </div>

        <!-- BOTÓN SALIR -->
        <a href="../controllers/logout.php" class="nb-logout" title="Cerrar sesión">
            <i class="fa-solid fa-right-from-bracket"></i>
        </a>

    </div>

</nav>

<style>
:root{
    --blue: rgb(11, 94, 215);
    --orange: rgb(197, 107, 18);
    --bg: rgb(15, 23, 42);
}

/* BODY */
body{
    margin-left:260px;
    background: rgba(254, 254, 254, 0.99);
    font-family: system-ui;
}

/* NAVBAR */
.custom-navbar{
    position:fixed;
    top:0;
    left:0;
    width:260px;
    height:100vh;
    background:linear-gradient(180deg, rgba(2, 29, 70, 0.89), rgba(2, 29, 70, 0.89));
    color:#fff;
    display:flex;
    flex-direction:column;
    box-shadow:4px 0 20px rgba(2, 29, 70, 0.89);
}

/* BRAND */
.nb-brand{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    gap:10px;
    border-bottom:1px solid rgba(222,221,221,0.21);
}

.nb-brand-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.nb-logo{
    width:42px;
    height:42px;
    border-radius:50%;
    border:2px solid #fff;
    object-fit:cover;
    background:#fff;
    padding:2px;
}

.brand-name{
    font-weight:600;
    font-size:15px;
}

.brand-sub{
    font-size:12px;
    opacity:.6;
}

/* MENU */
.nb-menu-wrap{
    flex:1;
    overflow:auto;
    padding:.5rem;
}

.nb-section-label{
    font-size:11px;
    text-transform:uppercase;
    opacity:.5;
    margin:10px 10px 5px;
}

.nb-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:.7rem .9rem;
    border-radius:12px;
    color:rgb(203,213,225);
    transition:.25s;
}

.nb-link i:first-child{
    width:20px;
    text-align:center;
    color:rgb(244, 245, 247); /* 👈 azul con transparencia */
}

.nb-link:hover{
    background:linear-gradient(135deg, rgba(11,93,215,.5), rgba(197,108,18,.3));
    color:#fff;
    transform:translateX(5px);
}

/* SUBMENU */
.nb-sub{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
    padding-left:10px;
}

.nb-item.open .nb-sub{
    max-height:500px;
}

.nb-sub-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:.5rem .8rem;
    color:rgb(148,163,184);
    border-radius:8px;
    font-size:14px;
}

.nb-sub-link i{
    font-size:13px;
    color:var(--orange);
}

.nb-sub-link.active{
    background:linear-gradient(135deg, var(--blue), var(--orange));
    color:#fff;
    box-shadow:0 4px 12px rgb(9,87,165);
}

.nb-sub-link:hover{
    background:rgba(228,207,207,.87);
    color:#fff;
}

/* ARROW */
.arrow{
    margin-left:auto;
    font-size:12px;
    transition:.3s;
}

.nb-item.open .arrow{
    transform:rotate(180deg);
}

/* FOOTER */
.nb-footer{
    padding:1rem;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.nb-user{
    display:flex;
    align-items:center;
    gap:10px;
}

.nb-avatar{
    width:34px;
    height:34px;
    font-size:13px;
    background:linear-gradient(135deg, var(--blue), var(--orange));
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
}

.nb-user-name{
    font-size:12px;
    font-weight:600;
    color:#fff;
}

.nb-user-role{
    font-size:10px;
    color:rgba(255,255,255,.6);
}

/* LOGOUT */
.nb-logout{
    width:38px;
    height:38px;
    border-radius:10px;
    background:rgba(255,255,255,.1);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.25s;
}

.nb-logout:hover{
    background:linear-gradient(135deg, var(--blue), var(--orange));
    transform:scale(1.08);
}

/* SCROLL */
.nb-menu-wrap::-webkit-scrollbar{
    width:5px;
}
.nb-menu-wrap::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.1);
}

@media(max-width:991px){

    body{
        margin-left:0;
        margin-top:60px;
    }

    .custom-navbar{
        width:100%;
        height:60px;
        flex-direction:row;
        align-items:center;
        padding:0 12px;
    }

    /* OCULTAR MENU Y FOOTER */
    .nb-menu-wrap,
    .nb-footer{
        display:none;
    }

    /* HEADER */
    .nb-brand{
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
    }

    /* IZQUIERDA */
    .nb-brand-left{
        display:flex;
        align-items:center;
        gap:8px;
    }

    .nb-logo{
        width:34px;
        height:34px;
    }

    /* TEXTO */
    .mobile-title{
        position:static; /* 🔥 quitar centrado */
        transform:none;
        font-weight:600;
        font-size:14px;
        color:#fff;

        max-width:140px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    /* DERECHA */
    .nb-actions{
        display:flex;
        gap:8px;
    }
}

/* BOTÓN BASE */
.nb-toggle{
    width:38px;
    height:38px;
    border-radius:12px;
    border:none;
    background:rgba(255,255,255,0.12);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transition:all .25s ease;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    flex-shrink:0;
}

/* ICONO */
.nb-toggle i{
    font-size:14px;
    transition:transform .2s ease;
}

/* HOVER */
.nb-toggle:hover{
    background:linear-gradient(135deg, var(--blue), var(--orange));
    transform:translateY(-2px) scale(1.05);
    box-shadow:0 6px 14px rgba(0,0,0,.35);
}

/* CLICK (feedback táctil) */
.nb-toggle:active{
    transform:scale(0.95);
}

/* EFECTO ICONO */
.nb-toggle:hover i{
    transform:scale(1.15);
}

/* OPCIONAL: BOTÓN LOGOUT MÁS “PELIGROSO” */
.nb-toggle.logout:hover{
    background:linear-gradient(135deg, #dc3545, #ff6b6b);
}

</style>
<script>
document.addEventListener("DOMContentLoaded", function(){

    document.querySelectorAll(".nb-link").forEach(link=>{
        link.addEventListener("click", e=>{
            let parent = link.parentElement;

            if(parent.classList.contains("has-sub")){
                e.preventDefault();

                // cerrar otros (UX pro)
                document.querySelectorAll(".nb-item").forEach(i=>{
                    if(i !== parent) i.classList.remove("open");
                });

                parent.classList.toggle("open");
            }
        });
    });

});
</script>