<?php
require_once __DIR__ . '/../config/config.php';
$alert = getAlert();
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= isset($pageTitle) ? $pageTitle . ' - ' : '' ?><?= SITE_NAME ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link href="<?= SITE_URL ?>/assets/theme.php" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --sidebar-width: 260px;
            --sidebar-collapsed: 72px;
        }
        body {
            font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f1f5f9;
        }

        /* ===== SIDEBAR PREMIUM ===== */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: var(--sidebar-width);
            background: linear-gradient(180deg, 
                var(--color-primario, #0f172a) 0%, 
                var(--color-primario-oscuro, #1e293b) 40%, 
                #0c1222 100%);
            box-shadow: 4px 0 30px rgba(0,0,0,0.18);
            overflow-y: auto;
            overflow-x: hidden;
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1050;
            display: flex;
            flex-direction: column;
        }
        .sidebar::-webkit-scrollbar {
            width: 3px;
        }
        .sidebar::-webkit-scrollbar-track {
            background: transparent;
        }
        .sidebar::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
        }

        /* ===== SIDEBAR COLAPSADO ===== */
        .sidebar.collapsed {
            width: var(--sidebar-collapsed);
        }
        .sidebar.collapsed .logo-text .logo-label {
            display: none;
        }
        .sidebar.collapsed .logo-text {
            padding: 20px 10px;
            justify-content: center;
        }
        .sidebar.collapsed .nav-section-label {
            opacity: 0;
            height: 8px;
            padding: 2px 0;
            overflow: hidden;
        }
        .sidebar.collapsed .nav-link {
            justify-content: center;
            padding: 11px;
            margin: 2px 8px;
        }
        .sidebar.collapsed .nav-link i {
            margin-right: 0;
            font-size: 1.2rem;
        }
        .sidebar.collapsed .nav-link .link-text {
            display: none;
        }
        .sidebar.collapsed .nav-link:hover {
            transform: none;
        }
        .sidebar.collapsed .user-info {
            padding: 10px 6px;
            margin: 8px 6px 12px;
            text-align: center;
        }
        .sidebar.collapsed .user-info .user-details {
            display: none;
        }
        .sidebar.collapsed .user-info .user-avatar {
            margin: 0 auto;
        }
        .sidebar.collapsed .user-info .btn-logout {
            padding: 6px !important;
            font-size: 0 !important;
        }
        .sidebar.collapsed .user-info .btn-logout i {
            font-size: 1rem;
        }

        /* Tooltip en modo colapsado */
        .sidebar.collapsed .nav-link {
            position: relative;
        }
        .sidebar.collapsed .nav-link::after {
            content: attr(data-tooltip);
            position: absolute;
            left: calc(100% + 14px);
            top: 50%;
            transform: translateY(-50%);
            background: #1e293b;
            color: #fff;
            padding: 7px 14px;
            border-radius: 8px;
            font-size: 0.78rem;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s ease, transform 0.15s ease;
            transform: translateY(-50%) translateX(-4px);
            z-index: 1100;
            box-shadow: 0 8px 24px rgba(0,0,0,0.35);
            letter-spacing: 0.2px;
        }
        .sidebar.collapsed .nav-link:hover::after {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }

        /* Botón toggle del sidebar */
        .sidebar-toggle-btn {
            position: absolute;
            top: 28px;
            right: -14px;
            width: 28px;
            height: 28px;
            background: var(--color-primario-claro, #6366f1);
            border: 3px solid #f1f5f9;
            border-radius: 50%;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1060;
            font-size: 0.7rem;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0,0,0,0.25);
            padding: 0;
        }
        .sidebar-toggle-btn:hover {
            transform: scale(1.2);
            box-shadow: 0 4px 16px rgba(0,0,0,0.35);
            background: var(--color-primario, #4f46e5);
        }
        .sidebar.collapsed .sidebar-toggle-btn {
            transform: rotate(180deg);
        }
        .sidebar.collapsed .sidebar-toggle-btn:hover {
            transform: rotate(180deg) scale(1.2);
        }

        /* Logo */
        .logo-text {
            color: #fff;
            font-size: 1.3rem;
            font-weight: 800;
            padding: 22px 18px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            letter-spacing: -0.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            flex-shrink: 0;
        }
        .logo-text i {
            font-size: 1.5rem;
            color: var(--color-primario-claro, #818cf8);
            -webkit-text-fill-color: var(--color-primario-claro, #818cf8);
        }

        /* Secciones */
        .sidebar .nav-section-label {
            color: rgba(255,255,255,0.28);
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.8px;
            padding: 20px 20px 6px 20px;
            margin: 0;
            transition: all 0.3s ease;
        }

        /* Nav Links */
        .sidebar .nav-link {
            color: rgba(255,255,255,0.55);
            padding: 9px 14px;
            border-radius: 10px;
            margin: 1px 10px;
            transition: all 0.2s ease;
            font-size: 0.84rem;
            font-weight: 500;
            position: relative;
            display: flex;
            align-items: center;
        }
        .sidebar .nav-link i {
            margin-right: 11px;
            width: 20px;
            text-align: center;
            font-size: 1.05rem;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }
        .sidebar .nav-link .link-text {
            transition: opacity 0.2s ease;
            white-space: nowrap;
        }
        .sidebar .nav-link:hover {
            background: rgba(255,255,255,0.07);
            color: #fff;
            transform: translateX(2px);
        }
        .sidebar .nav-link:hover i {
            color: var(--color-primario-claro, #818cf8);
        }
        .sidebar .nav-link.active {
            background: var(--color-primario-claro, #6366f1);
            color: #fff;
            box-shadow: 0 4px 18px rgba(0,0,0,0.25);
            font-weight: 600;
        }
        .sidebar .nav-link.active i {
            color: #fff;
        }

        /* User info */
        .user-info {
            padding: 14px 14px;
            color: rgba(255,255,255,0.7);
            background: rgba(0,0,0,0.2);
            margin: auto 10px 10px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.05);
            transition: all 0.3s ease;
            flex-shrink: 0;
        }
        .user-info small {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255,255,255,0.3);
        }
        .user-info strong {
            color: #fff;
            font-weight: 600;
            font-size: 0.85rem;
        }
        .btn-logout {
            background: rgba(255,255,255,0.06) !important;
            color: rgba(255,255,255,0.6) !important;
            border: 1px solid rgba(255,255,255,0.08) !important;
            border-radius: 8px !important;
            font-weight: 500 !important;
            font-size: 0.78rem !important;
            transition: all 0.2s ease !important;
        }
        .btn-logout:hover {
            background: rgba(239,68,68,0.15) !important;
            color: #fca5a5 !important;
            border-color: rgba(239,68,68,0.25) !important;
        }

        /* ===== BOTONES FLOTANTES PREMIUM ===== */
        .mobile-menu-btn {
            display: none;
            position: fixed;
            top: 12px;
            left: 12px;
            z-index: 1040;
            width: 44px;
            height: 44px;
            background: var(--color-primario, #1e293b);
            border: none;
            border-radius: 12px;
            color: white;
            font-size: 1.3rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        .mobile-menu-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        .theme-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1030;
            width: 46px;
            height: 46px;
            border-radius: 14px;
            background: var(--color-primario, #1e293b);
            border: none;
            color: white;
            font-size: 1.2rem;
            box-shadow: 0 4px 18px rgba(0,0,0,0.2);
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .theme-toggle:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }

        /* ===== MAIN CONTENT ===== */
        .main-content {
            margin-left: var(--sidebar-width);
            padding: 24px 32px;
            background: #f1f5f9;
            min-height: 100vh;
            transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            width: auto;
        }
        body.sidebar-collapsed .main-content {
            margin-left: var(--sidebar-collapsed);
        }

        /* ===== CARDS ===== */
        .card {
            border: none;
            border-radius: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.06);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            overflow: hidden;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.1);
        }
        .card-header {
            background: transparent;
            border-bottom: 1px solid #f1f5f9;
            padding: 18px 24px;
            font-weight: 600;
        }
        .card-body {
            padding: 20px 24px;
        }

        /* ===== STAT CARDS ===== */
        .stat-card {
            border-radius: 16px;
            padding: 24px;
            color: #fff;
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .stat-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -30%;
            width: 150px;
            height: 150px;
            background: rgba(255,255,255,0.08);
            border-radius: 50%;
        }
        .stat-card::after {
            content: '';
            position: absolute;
            bottom: -40%;
            left: -20%;
            width: 120px;
            height: 120px;
            background: rgba(255,255,255,0.05);
            border-radius: 50%;
        }
        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(0,0,0,0.15);
        }
        .stat-card h6 {
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            opacity: 0.9;
        }
        .stat-card h2 {
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: -1px;
        }
        .stat-card.orders { background: linear-gradient(135deg, var(--color-primario, #6366f1) 0%, var(--color-primario-claro, #8b5cf6) 100%); box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
        .stat-card.patients { background: linear-gradient(135deg, #059669 0%, #34d399 100%); box-shadow: 0 8px 32px rgba(5,150,105,0.2); }
        .stat-card.pending { background: linear-gradient(135deg, #e11d48 0%, #fb7185 100%); box-shadow: 0 8px 32px rgba(225,29,72,0.2); }
        .stat-card.revenue { background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%); box-shadow: 0 8px 32px rgba(2,132,199,0.2); }

        /* ===== BOTONES ===== */
        .btn-primary {
            background: var(--color-primario, #6366f1);
            border: none;
            font-weight: 600;
            border-radius: 10px;
            padding: 8px 20px;
        }
        .btn-primary:hover {
            background: var(--color-primario-oscuro, #4f46e5);
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        }

        /* ===== TABLAS ===== */
        .table th {
            font-weight: 600;
            color: #64748b;
            border-bottom: 2px solid #e2e8f0;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .table td {
            vertical-align: middle;
            color: #334155;
            font-size: 0.9rem;
        }
        .table-hover tbody tr:hover {
            background-color: rgba(0,0,0,0.02);
        }

        .badge-estado {
            padding: 6px 12px;
            border-radius: 20px;
            font-weight: 500;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--color-primario, #6366f1);
            box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.08);
        }
        .resultado-normal { color: #198754; }
        .resultado-alto { color: #dc3545; font-weight: bold; }
        .resultado-bajo { color: #0dcaf0; font-weight: bold; }

        /* ===== PAGE HEADER ===== */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
            margin-bottom: 28px;
            padding-bottom: 16px;
            border-bottom: 2px solid #e2e8f0;
        }
        .page-header h2 {
            font-weight: 800;
            color: #0f172a;
            font-size: 1.75rem;
            letter-spacing: -0.5px;
            margin: 0;
        }
        .page-header h2 i {
            color: var(--color-primario, #6366f1);
            margin-right: 8px;
        }
        .page-header .date-badge {
            background: #fff;
            padding: 8px 16px;
            border-radius: 10px;
            color: #64748b;
            font-weight: 500;
            font-size: 0.85rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        }

        /* ===== SIDEBAR OVERLAY ===== */
        .sidebar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1040;
            backdrop-filter: blur(2px);
        }
    </style>
</head>
<body>
    <!-- Botón menú móvil -->
    <button class="mobile-menu-btn" onclick="toggleSidebar()" title="Menú">
        <i class="bi bi-list"></i>
    </button>
    
    <!-- Overlay para cerrar menú en móvil -->
    <div class="sidebar-overlay" onclick="toggleSidebar()"></div>
    
    <!-- Botón de tema -->
    <button class="theme-toggle" onclick="toggleTheme()" title="Cambiar tema">
        <i class="bi bi-moon-stars-fill" id="themeIcon"></i>
    </button>
    
    <div class="container-fluid p-0" style="max-width:100%;">
            <!-- Sidebar -->
            <nav class="sidebar" id="sidebarMenu">
                <button class="sidebar-toggle-btn" onclick="collapseSidebar()" title="Colapsar menú">
                    <i class="bi bi-chevron-left" id="collapseIcon"></i>
                </button>
                <div class="logo-text">
                    <i class="bi bi-heart-pulse"></i> <span class="logo-label"><?= SITE_NAME ?></span>
                </div>
                <div class="position-sticky pt-1">
                    <p class="nav-section-label">Principal</p>
                    <ul class="nav flex-column">
                        <?php if (tienePermiso('dashboard', 'ver')): ?>
                        <li class="nav-item">
                            <a class="nav-link <?= basename($_SERVER['PHP_SELF']) == 'dashboard.php' ? 'active' : '' ?>" href="<?= SITE_URL ?>/dashboard.php" data-tooltip="Dashboard">
                                <i class="bi bi-speedometer2"></i> <span class="link-text">Dashboard</span>
                            </a>
                        </li>
                        <?php endif; ?>
                        <?php if (tienePermiso('pacientes', 'ver')): ?>
                        <li class="nav-item">
                            <a class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'pacientes') !== false ? 'active' : '' ?>" href="<?= SITE_URL ?>/modules/pacientes/list.php" data-tooltip="Pacientes">
                                <i class="bi bi-people"></i> <span class="link-text">Pacientes</span>
                            </a>
                        </li>
                        <?php endif; ?>
                        <?php if (tienePermiso('ordenes', 'ver')): ?>
                        <li class="nav-item">
                            <a class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'ordenes') !== false ? 'active' : '' ?>" href="<?= SITE_URL ?>/modules/ordenes/list.php" data-tooltip="Órdenes">
                                <i class="bi bi-clipboard2-pulse"></i> <span class="link-text">Órdenes</span>
                            </a>
                        </li>
                        <?php endif; ?>
                        <?php if (tienePermiso('resultados', 'ver')): ?>
                        <li class="nav-item">
                            <a class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'resultados') !== false ? 'active' : '' ?>" href="<?= SITE_URL ?>/modules/resultados/list.php" data-tooltip="Resultados">
                                <i class="bi bi-file-earmark-medical"></i> <span class="link-text">Resultados</span>
                            </a>
                        </li>
                        <?php endif; ?>
                        <?php if (tienePermiso('caja', 'ver')): ?>
                        <li class="nav-item">
                            <a class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'caja') !== false ? 'active' : '' ?>" href="<?= SITE_URL ?>/modules/caja/list.php" data-tooltip="Caja/Pagos">
                                <i class="bi bi-cash-stack"></i> <span class="link-text">Caja/Pagos</span>
                            </a>
                        </li>
                        <?php endif; ?>
                    </ul>
                    <p class="nav-section-label">Laboratorio</p>
                    <ul class="nav flex-column">
                        <?php if (tienePermiso('examenes', 'ver')): ?>
                        <li class="nav-item">
                            <a class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'examenes') !== false ? 'active' : '' ?>" href="<?= SITE_URL ?>/modules/examenes/list.php" data-tooltip="Exámenes">
                                <i class="bi bi-droplet"></i> <span class="link-text">Exámenes</span>
                            </a>
                        </li>
                        <?php endif; ?>
                        <?php if (tienePermiso('inventario', 'ver')): ?>
                        <li class="nav-item">
                            <a class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'inventario') !== false && strpos($_SERVER['PHP_SELF'], 'compras') === false ? 'active' : '' ?>" href="<?= SITE_URL ?>/modules/inventario/list.php" data-tooltip="Inventario">
                                <i class="bi bi-box-seam"></i> <span class="link-text">Inventario</span>
                            </a>
                        </li>
                        <?php endif; ?>
                        <?php if (tienePermiso('compras', 'ver')): ?>
                        <li class="nav-item">
                            <a class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'compras') !== false ? 'active' : '' ?>" href="<?= SITE_URL ?>/modules/compras/list.php" data-tooltip="Compras">
                                <i class="bi bi-cart-plus"></i> <span class="link-text">Compras</span>
                            </a>
                        </li>
                        <?php endif; ?>
                        <?php if (tienePermiso('control_calidad', 'ver')): ?>
                        <li class="nav-item">
                            <a class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'control_calidad') !== false ? 'active' : '' ?>" href="<?= SITE_URL ?>/modules/control_calidad/list.php" data-tooltip="Control Calidad">
                                <i class="bi bi-shield-check"></i> <span class="link-text">Control Calidad</span>
                            </a>
                        </li>
                        <?php endif; ?>
                        <li class="nav-item">
                            <a class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'temperatura') !== false ? 'active' : '' ?>" href="<?= SITE_URL ?>/modules/temperatura/list.php" data-tooltip="Temperatura">
                                <i class="bi bi-thermometer-half"></i> <span class="link-text">Temperatura</span>
                            </a>
                        </li>
                    </ul>
                        <?php if (isset($_SESSION['rol']) && $_SESSION['rol'] == 'admin'): ?>
                    <p class="nav-section-label">Administración</p>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'usuarios') !== false ? 'active' : '' ?>" href="<?= SITE_URL ?>/modules/usuarios/list.php" data-tooltip="Usuarios">
                                <i class="bi bi-person-gear"></i> <span class="link-text">Usuarios</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'configuracion') !== false ? 'active' : '' ?>" href="<?= SITE_URL ?>/modules/configuracion/index.php" data-tooltip="Configuración">
                                <i class="bi bi-gear"></i> <span class="link-text">Configuración</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'reportes') !== false ? 'active' : '' ?>" href="<?= SITE_URL ?>/modules/reportes/index.php" data-tooltip="Reportes">
                                <i class="bi bi-graph-up"></i> <span class="link-text">Reportes</span>
                            </a>
                        </li>
                        <?php endif; ?>
                    </ul>
                </div>
                <?php if (isLoggedIn()): ?>
                <div class="user-info mt-auto">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <div class="user-avatar" style="width:34px;height:34px;border-radius:10px;background:var(--color-primario-claro, #6366f1);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;color:#fff;flex-shrink:0;">
                            <?= strtoupper(substr($_SESSION['nombre'] ?? 'U', 0, 1)) ?>
                        </div>
                        <div class="user-details">
                            <small>Conectado como</small><br>
                            <strong><?= $_SESSION['nombre'] ?? 'Usuario' ?></strong>
                        </div>
                    </div>
                    <a href="<?= SITE_URL ?>/logout.php" class="btn btn-sm btn-logout w-100">
                        <i class="bi bi-box-arrow-right"></i> <span class="link-text">Cerrar Sesión</span>
                    </a>
                </div>
                <?php endif; ?>
            </nav>

            <!-- Main Content -->
            <main class="main-content" id="mainContent">
                <?php if ($alert): ?>
                <div class="alert alert-<?= $alert['type'] ?> alert-dismissible fade show mt-3" role="alert">
                    <?= $alert['message'] ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                <?php endif; ?>
