<?php if (session_status() === PHP_SESSION_NONE) session_start(); $rol = $_SESSION['rol'] ?? ''; ?>
<!DOCTYPE html><html lang="es"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title><?php echo h($config['nombre_empresa']??'Sistema'); ?></title>
<link rel="icon" type="image/png" href="<?php echo !empty($config['favicon_url']) ? h($config['favicon_url']) : ''; ?>">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<style>:root { --p: #0d6efd; --sidebar-w: 250px; } body { background: #f8fafc; font-family: 'Segoe UI', sans-serif; } .sidebar { width: var(--sidebar-w); height: 100vh; position: fixed; background: #1e293b; color: white; transition: 0.3s; z-index: 1000; overflow-y: auto;} .main { margin-left: var(--sidebar-w); padding: 20px; transition: 0.3s; } .nav-link { color: #cbd5e1; padding: 12px 20px; text-decoration: none; display: block; border-left: 4px solid transparent; } .nav-link:hover, .nav-link.active { background: rgba(255,255,255,0.1); color: white; border-left-color: var(--p); } .card-custom { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } @media(max-width: 768px){ .sidebar { transform: translateX(-100%); } .sidebar.active { transform: translateX(0); } .main { margin-left: 0; } }</style></head><body>
<div class="sidebar d-flex flex-column p-3">
    <div class="text-center mb-4 mt-2"><?php if(!empty($config['logo_url'])): ?><img src="<?php echo h($config['logo_url']); ?>" class="img-fluid rounded mb-2" style="max-height:80px;background:rgba(255,255,255,0.9);padding:5px;"><?php else: ?><h4 class="fw-bold text-white"><?php echo h($config['nombre_empresa']); ?></h4><?php endif; ?><div class="badge bg-info text-dark"><?php echo $_SESSION['rol']; ?></div></div>
    <nav class="nav flex-column gap-1">
        <?php if(tiene_acceso('home')): ?><a href="?v=home" class="nav-link <?php echo $v=='home'?'active':''; ?>"><i class="fas fa-chart-pie me-2" style="width:20px"></i> Dashboard</a><?php endif; ?>
        <?php if(tiene_acceso('pos')): ?><a href="?v=pos" class="nav-link <?php echo $v=='pos'?'active':''; ?>"><i class="fas fa-cash-register me-2" style="width:20px"></i> Caja Venta</a><?php endif; ?>
        
        <?php if(tiene_acceso('productos')): ?>
            <a href="?v=productos" class="nav-link <?php echo $v=='productos'?'active':''; ?>"><i class="fas fa-capsules me-2" style="width:20px"></i> Inventario</a>
            <a href="?v=vencimientos" class="nav-link <?php echo $v=='vencimientos'?'active':''; ?>"><i class="fas fa-biohazard me-2" style="width:20px"></i> Vencimientos</a>
        <?php endif; ?>

        <?php if(tiene_acceso('proveedores')): ?><a href="?v=proveedores" class="nav-link <?php echo $v=='proveedores'?'active':''; ?>"><i class="fas fa-truck me-2" style="width:20px"></i> Proveedores</a><?php endif; ?>
        <?php if(tiene_acceso('compras')): ?><a href="?v=compras" class="nav-link <?php echo $v=='compras'?'active':''; ?>"><i class="fas fa-cart-arrow-down me-2" style="width:20px"></i> Compras</a><?php endif; ?>
        <?php if(tiene_acceso('kardex')): ?><a href="?v=kardex" class="nav-link <?php echo $v=='kardex'?'active':''; ?>"><i class="fas fa-history me-2" style="width:20px"></i> Auditoría</a><?php endif; ?>
        <?php if(tiene_acceso('reportes')): ?><a href="?v=reportes" class="nav-link <?php echo $v=='reportes'?'active':''; ?>"><i class="fas fa-chart-line me-2" style="width:20px"></i> Reportes</a><?php endif; ?>
        <?php if(tiene_acceso('clientes')): ?><a href="?v=clientes" class="nav-link <?php echo $v=='clientes'?'active':''; ?>"><i class="fas fa-users me-2" style="width:20px"></i> Clientes</a><?php endif; ?>
        <?php if(tiene_acceso('egresos')): ?><a href="?v=egresos" class="nav-link <?php echo $v=='egresos'?'active':''; ?>"><i class="fas fa-wallet me-2" style="width:20px"></i> Gastos</a><?php endif; ?>
        <?php if(tiene_acceso('usuarios')): ?><a href="?v=usuarios" class="nav-link <?php echo $v=='usuarios'?'active':''; ?>"><i class="fas fa-user-shield me-2" style="width:20px"></i> Usuarios</a><?php endif; ?>
        <?php if(tiene_acceso('config')): ?><a href="?v=config" class="nav-link <?php echo $v=='config'?'active':''; ?>"><i class="fas fa-cogs me-2" style="width:20px"></i> Configuración</a><?php endif; ?>
        <a href="logout.php" class="nav-link text-danger mt-4"><i class="fas fa-sign-out-alt me-2" style="width:20px"></i> Salir</a>
    </nav>
</div>
<div class="main">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <button class="btn btn-dark d-md-none" onclick="document.querySelector('.sidebar').classList.toggle('active')"><i class="fas fa-bars"></i></button>
        <div class="d-flex gap-3 align-items-center ms-auto">
            <div class="dropdown">
                <button class="btn btn-light position-relative shadow-sm" data-bs-toggle="dropdown" onclick="loadNotif()">
                    <i class="fas fa-bell text-warning"></i><span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" id="notif-badge" style="display:none">0</span>
                </button>
                <div class="dropdown-menu dropdown-menu-end p-0 shadow border-0" style="width:320px; max-height:400px; overflow-y:auto"><div class="p-2 bg-light border-bottom fw-bold text-center small text-danger">Vencimientos</div><div id="notif-list" class="list-group list-group-flush small"></div></div>
            </div>
            <div class="dropdown">
                <button class="btn btn-white shadow-sm dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-user-circle me-1"></i> Perfil</button>
                <ul class="dropdown-menu dropdown-menu-end shadow"><li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#modalPass"><i class="fas fa-key me-2"></i> Cambiar Clave</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item text-danger" href="logout.php">Salir</a></li></ul>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalPass"><div class="modal-dialog"><form class="modal-content" onsubmit="changePass(event)"><div class="modal-header"><h5 class="modal-title">Seguridad</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><div class="mb-3"><label>Contraseña Actual</label><input type="password" name="actual" class="form-control" required></div><div class="mb-3"><label>Nueva Contraseña</label><input type="password" name="nueva" class="form-control" required></div></div><div class="modal-footer"><button class="btn btn-primary">Actualizar</button></div></form></div></div>
    <script>
    function loadNotif(){ fetch('api.php?task=get_notifications').then(r=>r.json()).then(d=>{ let h='', c=d.length; if(c>0){ document.getElementById('notif-badge').innerText=c; document.getElementById('notif-badge').style.display='block'; d.forEach(x=>{ h+=`<a href="#" class="list-group-item list-group-item-action"><div class="d-flex justify-content-between align-items-center"><strong>${x.nombre}</strong><span class="badge bg-danger">${x.dias} dias</span></div><small class="text-muted">Vence: ${x.fecha_caducidad}</small></a>`; }); } else { h='<div class="p-3 text-center text-muted">Todo bien 👍</div>'; document.getElementById('notif-badge').style.display='none'; } document.getElementById('notif-list').innerHTML=h; }); } loadNotif(); 
    function changePass(e){ e.preventDefault(); let fd = new FormData(); fd.append('pass_actual', e.target.actual.value); fd.append('pass_nueva', e.target.nueva.value); fetch('api.php?task=change_password', {method:'POST', body:fd}).then(r=>r.json()).then(res=>{ if(res.success) { Swal.fire('Éxito','Contraseña actualizada','success'); e.target.reset(); bootstrap.Modal.getInstance(document.getElementById('modalPass')).hide(); } else Swal.fire('Error','Contraseña actual incorrecta','error'); }); }
    </script>