
<?php
// ===== CONFIGURAR ZONA HORARIA =====
date_default_timezone_set('America/Lima'); // Zona horaria de Perú

session_start();
if(!isset($_SESSION['id'])){
 header("Location: index.php");
 exit();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Sistema Web - Panel Principal</title>
 <!-- Bootstrap 5 -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <!-- DataTables CSS -->
 <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
 
 <!-- ===== BIBLIOTECAS AGREGADAS PARA PDF ===== -->
 <!-- jQuery (necesario para DataTables) -->
 <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
 <!-- DataTables JS -->
 <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
 <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
 <!-- jsPDF para exportar PDF -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>
 <!-- ===== FIN BIBLIOTECAS AGREGADAS ===== -->
 
 <style>
 :root {
    --sidebar-width: 260px;
    --primary-color: #EC407A;
    --primary-hover: #D81B60;
 }
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }
 body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #FFF8F5;
 }
 .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #F06292, #EC407A);
    color: white;
    z-index: 1000;
    transition: all 0.3s ease;
    overflow-y: auto;
 }
 .sidebar .brand {
    padding: 25px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
 }
 .sidebar .brand h3 {
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0;
 }
 .sidebar .brand small {
    opacity: 0.7;
    font-size: 0.8rem;
 }
 .sidebar .user-info {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
 }
 .sidebar .user-info .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 1.8rem;
    border: 3px solid rgba(255,255,255,0.3);
 }
 .sidebar .user-info .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
 }
 .sidebar .user-info .avatar i {
    font-size: 1.8rem;
    color: rgba(255,255,255,0.7);
 }
 .sidebar .user-info h6 {
    margin: 0;
    font-weight: 600;
 }
 .sidebar .user-info small {
    opacity: 0.7;
    display: block;
    word-break: break-all;
 }
 .sidebar .nav-menu {
    padding: 10px 0;
 }
 .sidebar .nav-menu .nav-item {
    padding: 0 15px;
    margin-bottom: 5px;
 }
 .sidebar .nav-menu .nav-link {
    color: rgba(255,255,255,0.8);
    padding: 12px 15px;
    border-radius: 10px;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.3s;
 }
 .sidebar .nav-menu .nav-link i {
    width: 25px;
    margin-right: 12px;
    font-size: 1.1rem;
 }
 .sidebar .nav-menu .nav-link:hover,
 .sidebar .nav-menu .nav-link.active {
    background: rgba(255,255,255,0.25);
    color: white;
    border-left: 4px solid #fff;
 }
 .sidebar .nav-menu .nav-link.logout {
    color: #ff6b6b;
    margin-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
 }
 .sidebar .nav-menu .nav-link.logout:hover {
    background: rgba(255,0,0,0.15);
 }
 .main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    padding: 0;
 }
 .top-bar {
    background: #FFF0F5;
    padding: 15px 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 999;
    border-bottom: 2px solid #F8BBD0;
 }
 .top-bar .page-title h4 {
    margin: 0;
    font-weight: 600;
    color: #333;
 }
 .top-bar .page-title small {
    color: #666;
 }
 .top-bar .user-actions {
    display: flex;
    align-items: center;
    gap: 20px;
 }
 .top-bar .user-actions .btn-logout {
    background: #EC407A;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    font-weight: 500;
    transition: all 0.3s;
 }
 .top-bar .user-actions .btn-logout:hover {
    background: #D81B60;
    transform: translateY(-2px);
    color: white;
 }
 .content-area {
    padding: 30px;
 }
 .sidebar-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-right: 15px;
 }
 .table-container {
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
 }
 .table thead th {
    background: #002855;
    color: white;
    border: none;
 }
 .btn-pdf {
    background: #dc3545;
    color: white;
    border: none;
    transition: all 0.3s;
 }
 .btn-pdf:hover {
    background: #c82333;
    color: white;
    transform: translateY(-2px);
 }
 .btn-excel {
    background: #28a745;
    color: white;
    border: none;
    transition: all 0.3s;
 }
 .btn-excel:hover {
    background: #218838;
    color: white;
    transform: translateY(-2px);
 }
 .search-box {
    border-radius: 10px;
    border: 2px solid #e0e0e0;
    padding: 10px 15px;
    transition: all 0.3s;
 }
 .search-box:focus {
    border-color: #002855;
    box-shadow: 0 0 0 0.2rem rgba(0,40,85,0.25);
 }
 .filter-select {
    border-radius: 10px;
    border: 2px solid #e0e0e0;
    padding: 10px 15px;
    transition: all 0.3s;
    cursor: pointer;
 }
 .filter-select:focus {
    border-color: #002855;
    box-shadow: 0 0 0 0.2rem rgba(0,40,85,0.25);
 }
 .badge-status {
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 500;
 }
 .action-buttons .btn {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    transition: all 0.3s;
 }
 .action-buttons .btn:hover {
    transform: translateY(-2px);
 }
 .btn-edit {
    background: #ffc107;
    color: #000;
 }
 .btn-edit:hover {
    background: #e0a800;
    color: #000;
 }
 .btn-delete {
    background: #dc3545;
    color: white;
 }
 .btn-delete:hover {
    background: #c82333;
    color: white;
 }
 .empty-state {
    text-align: center;
    padding: 60px 20px;
 }
 .empty-state i {
    font-size: 4rem;
    color: #ccc;
    margin-bottom: 20px;
 }
 .empty-state h5 {
    color: #666;
 }
 .badge-filter {
    background: #e9ecef;
    color: #333;
    padding: 8px 15px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
 }
 .badge-filter .remove-filter {
    cursor: pointer;
    color: #dc3545;
    font-weight: bold;
 }
 .badge-filter .remove-filter:hover {
    color: #c82333;
 }
 .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
 }
 .sidebar-backdrop.show {
    display: block;
 }
 .avatar-sm {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 /* Estilos para las tarjetas del dashboard */
 .dashboard-card {
    border-radius: 15px;
    padding: 20px;
    color: white;
    transition: transform 0.3s;
    cursor: default;
    height: 100%;
    min-height: 130px;
 }
 .dashboard-card:hover {
    transform: translateY(-5px);
 }
 .dashboard-card .card-icon {
    font-size: 2.5rem;
    opacity: 0.5;
 }
 .dashboard-card .card-number {
    font-size: 2rem;
    font-weight: 700;
 }
 .dashboard-card .card-label {
    font-size: 0.9rem;
    opacity: 0.8;
 }
 .badge-success { background: #28a745; color: white; }
 .badge-warning { background: #ffc107; color: #000; }
 .badge-danger { background: #dc3545; color: white; }
 .badge-info { background: #17a2b8; color: white; }

 @media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0;
    }
    .sidebar-toggle {
        display: block;
    }
    .content-area {
        padding: 20px 15px;
    }
 }
 </style>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
    <div class="brand">
        <h3><i class="fas fa-university me-2"></i>Sistema de Accesorios de Motos</h3>
        <small>Panel Administrativo</small>
    </div>
    
    <!-- Información del usuario -->
    <div class="user-info">
        <div class="avatar">
            <?php 
            $foto_perfil = 'assets/foto.png';
            if (isset($_SESSION['foto']) && !empty($_SESSION['foto']) && file_exists($_SESSION['foto'])) {
                echo '<img src="' . htmlspecialchars($_SESSION['foto']) . '" alt="Foto de Perfil">';
            } elseif (file_exists($foto_perfil)) {
                echo '<img src="' . $foto_perfil . '" alt="Foto de Perfil">';
            } else {
                echo '<i class="fas fa-user"></i>';
            }
            ?>
        </div>
        <h6><?php echo htmlspecialchars($_SESSION['nombre']); ?></h6>
        <small><?php echo htmlspecialchars($_SESSION['email']); ?></small>
    </div>
    
    <nav class="nav-menu">
        <div class="nav-item">
            <a href="menu.php" class="nav-link <?php echo !isset($_GET['page']) ? 'active' : ''; ?>">
                <i class="fas fa-tachometer-alt"></i> Panel de Control
            </a>
        </div>
        <div class="nav-item">
            <a href="menu.php?page=usuarios" class="nav-link <?php echo isset($_GET['page']) && $_GET['page'] == 'usuarios' ? 'active' : ''; ?>">
                <i class="fas fa-users"></i> Usuarios
            </a>
        </div>
        <div class="nav-item">
            <a href="menu.php?page=clientes" class="nav-link <?php echo isset($_GET['page']) && $_GET['page'] == 'clientes' ? 'active' : ''; ?>">
                <i class="fas fa-users"></i> Clientes
            </a>
        </div>
        <div class="nav-item">
            <a href="menu.php?page=categorias" class="nav-link <?php echo isset($_GET['page']) && $_GET['page'] == 'categorias' ? 'active' : ''; ?>">
                <i class="fas fa-users"></i> Categoría
            </a>
        </div>
        <div class="nav-item">
            <a href="menu.php?page=productos" class="nav-link <?php echo isset($_GET['page']) && $_GET['page'] == 'productos' ? 'active' : ''; ?>">
                <i class="fas fa-users"></i> Producto
            </a>
        </div>
        <div class="nav-item">
            <a href="menu.php?page=ventas" class="nav-link <?php echo isset($_GET['page']) && $_GET['page'] == 'ventas' ? 'active' : ''; ?>">
                <i class="fas fa-users"></i> Ventas
            </a>
        </div>
        <div class="nav-item">
            <a href="menu.php?page=detalleventas" class="nav-link <?php echo isset($_GET['page']) && $_GET['page'] == 'detalleventas' ? 'active' : ''; ?>">
                <i class="fas fa-users"></i> Detalle de Venta
            </a>
        </div>
        <div class="nav-item">
            <a href="#" class="nav-link">
                <i class="fas fa-cog"></i> Configuración
            </a>
        </div>
        <div class="nav-item">
            <a href="logout.php" class="nav-link logout">
                <i class="fas fa-sign-out-alt"></i> Cerrar Sesión
            </a>
        </div>
    </nav>
</div>

<!-- Backdrop para móvil -->
<div class="sidebar-backdrop" id="sidebarBackdrop"></div>

<!-- Contenido Principal -->
<div class="main-content">
    <div class="top-bar">
        <div class="page-title">
            <button class="sidebar-toggle" id="sidebarToggle">
                <i class="fas fa-bars"></i>
            </button>
            <h4>
                <?php
                $pageTitle = 'Panel de Control';
                $page = isset($_GET['page']) ? $_GET['page'] : '';
                
                switch($page) {
                    case 'usuarios':
                        $pageTitle = 'Gestión de Usuarios';
                        break;
                    case 'clientes':
                        $pageTitle = 'Gestión de Clientes';
                        break;
                    case 'categorias':
                        $pageTitle = 'Gestión de Categorías';
                        break;
                    case 'productos':
                        $pageTitle = 'Gestión de Productos';
                        break;
                    case 'ventas':
                        $pageTitle = 'Gestión de Ventas';
                        break;
                    case 'detalleventas':
                        $pageTitle = 'Gestión de Detalle de Ventas';
                        break;
                    default:
                        $pageTitle = 'Panel de Control';
                }
                echo $pageTitle;
                ?>
                <small><i class="fas fa-chevron-right mx-2"></i> <?php echo date('d/m/Y H:i'); ?></small>
            </h4>
        </div>
        <div class="user-actions">
            <span class="badge bg-primary rounded-pill">
                <i class="fas fa-user me-1"></i> <?php echo htmlspecialchars($_SESSION['nombre']); ?>
            </span>
            <a href="logout.php" class="btn-logout">
                <i class="fas fa-sign-out-alt me-1"></i> Salir
            </a>
        </div>
    </div>
    <div class="content-area">
        <?php
        // Cargar el contenido según la página solicitada
        $page = isset($_GET['page']) ? $_GET['page'] : '';
        
        switch($page) {
            case 'usuarios':
                include('usuarios/listar.php');
                break;
            case 'clientes':
                include('Clientes/listar.php');
                break;
            case 'categorias':
                include('Categoria/listar.php');
                break;
            case 'productos':
                include('Producto/listar.php');
                break;
            case 'ventas':
                include('Ventas/listar.php');
                break;
            case 'detalleventas':
                include('Detalleventa/listar.php');
                break;
            default:
                // =============================================
                // PANEL DE CONTROL - CON NOMBRES CORRECTOS DE TABLAS
                // =============================================
                include('conexion.php');
                
                // --- ESTADÍSTICAS CON TABLAS CORRECTAS ---
                
                // Total Usuarios
                $total_usuarios = 0;
                $check = mysqli_query($conexion, "SHOW TABLES LIKE 'usuarios'");
                if(mysqli_num_rows($check) > 0) {
                    $query = mysqli_query($conexion, "SELECT COUNT(*) as total FROM usuarios");
                    if($query) {
                        $row = mysqli_fetch_assoc($query);
                        $total_usuarios = $row['total'] ?? 0;
                    }
                }
                
                // Usuarios Activos
                $usuarios_activos = 0;
                $check = mysqli_query($conexion, "SHOW TABLES LIKE 'usuarios'");
                if(mysqli_num_rows($check) > 0) {
                    $check_col = mysqli_query($conexion, "SHOW COLUMNS FROM usuarios LIKE 'estado'");
                    if(mysqli_num_rows($check_col) > 0) {
                        $query = mysqli_query($conexion, "SELECT COUNT(*) as total FROM usuarios WHERE estado = 'activo'");
                        if($query) {
                            $row = mysqli_fetch_assoc($query);
                            $usuarios_activos = $row['total'] ?? 0;
                        }
                    } else {
                        $usuarios_activos = $total_usuarios;
                    }
                }
                
                // Total Clientes (tabla: cliente)
                $total_clientes = 0;
                $check = mysqli_query($conexion, "SHOW TABLES LIKE 'cliente'");
                if(mysqli_num_rows($check) > 0) {
                    $query = mysqli_query($conexion, "SELECT COUNT(*) as total FROM cliente");
                    if($query) {
                        $row = mysqli_fetch_assoc($query);
                        $total_clientes = $row['total'] ?? 0;
                    }
                }
                
                // Total Productos (tabla: accesorio)
                $total_productos = 0;
                $check = mysqli_query($conexion, "SHOW TABLES LIKE 'accesorio'");
                if(mysqli_num_rows($check) > 0) {
                    $query = mysqli_query($conexion, "SELECT COUNT(*) as total FROM accesorio");
                    if($query) {
                        $row = mysqli_fetch_assoc($query);
                        $total_productos = $row['total'] ?? 0;
                    }
                    
                    // Productos con stock bajo (columna: cantidad)
                    $check_col = mysqli_query($conexion, "SHOW COLUMNS FROM accesorio LIKE 'cantidad'");
                    if(mysqli_num_rows($check_col) > 0) {
                        $query = mysqli_query($conexion, "SELECT COUNT(*) as total FROM accesorio WHERE cantidad <= 5");
                        if($query) {
                            $row = mysqli_fetch_assoc($query);
                            $productos_stock_bajo = $row['total'] ?? 0;
                        }
                    }
                }
                
                // Total Ventas
                $total_ventas = 0;
                $check = mysqli_query($conexion, "SHOW TABLES LIKE 'ventas'");
                if(mysqli_num_rows($check) > 0) {
                    $query = mysqli_query($conexion, "SELECT COUNT(*) as total FROM ventas");
                    if($query) {
                        $row = mysqli_fetch_assoc($query);
                        $total_ventas = $row['total'] ?? 0;
                    }
                }
                
                // Ventas del mes
                $ventas_mes = 0;
                $monto_mes = 0;
                $check = mysqli_query($conexion, "SHOW TABLES LIKE 'ventas'");
                if(mysqli_num_rows($check) > 0) {
                    $mes_actual = date('Y-m');
                    $query = mysqli_query($conexion, "SELECT COUNT(*) as total, SUM(total) as monto FROM ventas WHERE DATE_FORMAT(fecha, '%Y-%m') = '$mes_actual'");
                    if($query) {
                        $row = mysqli_fetch_assoc($query);
                        $ventas_mes = $row['total'] ?? 0;
                        $monto_mes = $row['monto'] ?? 0;
                    }
                }
                
                $productos_stock_bajo = $productos_stock_bajo ?? 0;
                ?>
                
                <!-- TARJETAS DE ESTADÍSTICAS -->
                <div class="row g-4 mb-4">
                    <div class="col-md-3 col-sm-6">
                        <div class="dashboard-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="card-label"><i class="fas fa-users me-1"></i>Usuarios</div>
                                    <div class="card-number"><?php echo $total_usuarios; ?></div>
                                    <small class="opacity-75"><i class="fas fa-user-check me-1"></i><?php echo $usuarios_activos; ?> activos</small>
                                </div>
                                <div class="card-icon">
                                    <i class="fas fa-users"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="dashboard-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="card-label"><i class="fas fa-user-check me-1"></i>Clientes</div>
                                    <div class="card-number"><?php echo $total_clientes; ?></div>
                                    <small class="opacity-75"><i class="fas fa-user-plus me-1"></i>Registrados</small>
                                </div>
                                <div class="card-icon">
                                    <i class="fas fa-user-check"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="dashboard-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="card-label"><i class="fas fa-boxes me-1"></i>Productos</div>
                                    <div class="card-number"><?php echo $total_productos; ?></div>
                                    <?php if($productos_stock_bajo > 0): ?>
                                    <small class="opacity-75"><i class="fas fa-exclamation-triangle me-1"></i><?php echo $productos_stock_bajo; ?> con stock bajo</small>
                                    <?php else: ?>
                                    <small class="opacity-75"><i class="fas fa-check-circle me-1"></i>Stock OK</small>
                                    <?php endif; ?>
                                </div>
                                <div class="card-icon">
                                    <i class="fas fa-boxes"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="dashboard-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="card-label"><i class="fas fa-shopping-cart me-1"></i>Ventas</div>
                                    <div class="card-number"><?php echo $total_ventas; ?></div>
                                    <small class="opacity-75"><i class="fas fa-calendar me-1"></i>Este mes: <?php echo $ventas_mes; ?></small>
                                </div>
                                <div class="card-icon">
                                    <i class="fas fa-shopping-cart"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- INFORMACIÓN DEL SISTEMA -->
                <div class="row g-4">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header bg-white">
                                <h5 class="mb-0"><i class="fas fa-info-circle me-2 text-primary"></i>Información del Sistema</h5>
                            </div>
                            <div class="card-body">
                                <div class="alert alert-info">
                                    <i class="fas fa-hand-peace me-2"></i>
                                    <strong>¡Bienvenido, <?php echo htmlspecialchars($_SESSION['nombre']); ?>!</strong>
                                    <p class="mb-0 mt-2">Bienvenido al panel administrativo del Sistema de Accesorios de Motos.</p>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <div class="p-3 bg-light rounded" style="border-left: 4px solid #667eea;">
                                            <i class="fas fa-users-cog text-primary me-2"></i>
                                            <strong>Gestión de Usuarios</strong>
                                            <p class="small text-muted mb-0"><?php echo $total_usuarios; ?> usuarios registrados</p>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="p-3 bg-light rounded" style="border-left: 4px solid #f5576c;">
                                            <i class="fas fa-file-pdf text-danger me-2"></i>
                                            <strong>Exportar PDF</strong>
                                            <p class="small text-muted mb-0">Genera reportes en PDF</p>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="p-3 bg-light rounded" style="border-left: 4px solid #43e97b;">
                                            <i class="fas fa-database text-success me-2"></i>
                                            <strong>Datos Actualizados</strong>
                                            <p class="small text-muted mb-0"><?php echo date('d/m/Y H:i'); ?></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header bg-white">
                                <h5 class="mb-0"><i class="fas fa-chart-simple me-2 text-warning"></i>Resumen Rápido</h5>
                            </div>
                            <div class="card-body">
                                <div class="text-center">
                                    <div class="display-6 fw-bold text-primary"><?php echo date('d/m/Y'); ?></div>
                                    <small class="text-muted"><?php echo date('H:i:s'); ?></small>
                                    <hr>
                                    <div class="row">
                                        <div class="col-6">
                                            <h6 class="text-muted">Usuarios</h6>
                                            <h4><?php echo $total_usuarios; ?></h4>
                                        </div>
                                        <div class="col-6">
                                            <h6 class="text-muted">Clientes</h6>
                                            <h4><?php echo $total_clientes; ?></h4>
                                        </div>
                                    </div>
                                    <div class="row mt-2">
                                        <div class="col-6">
                                            <h6 class="text-muted">Productos</h6>
                                            <h4><?php echo $total_productos; ?></h4>
                                        </div>
                                        <div class="col-6">
                                            <h6 class="text-muted">Ventas</h6>
                                            <h4><?php echo $total_ventas; ?></h4>
                                        </div>
                                    </div>
                                    <?php if($monto_mes > 0): ?>
                                    <hr>
                                    <div class="mt-2">
                                        <h6 class="text-muted">Ventas del Mes</h6>
                                        <h4 class="text-success">S/ <?php echo number_format($monto_mes, 2); ?></h4>
                                    </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php
                break;
        }
        ?>
    </div>
</div>

<script>
// Toggle sidebar en móvil
document.getElementById('sidebarToggle').addEventListener('click', function() {
    document.getElementById('sidebar').classList.toggle('open');
    document.getElementById('sidebarBackdrop').classList.toggle('show');
});

document.getElementById('sidebarBackdrop').addEventListener('click', function() {
    document.getElementById('sidebar').classList.remove('open');
    document.getElementById('sidebarBackdrop').classList.remove('show');
});
</script>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>