<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);

$static_url = dirname($_SERVER['SCRIPT_NAME']) . '/assets/';
$current_page = basename($_SERVER['PHP_SELF']);
$accordion_active = ($current_page == 'themes.php') ? 'show' : '';
?>

<!-- Barra Lateral Moderna -->
<div id="kt_app_sidebar" class="app-sidebar modern-sidebar" data-kt-drawer="true" data-kt-drawer-name="app-sidebar"
    data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="280px"
    data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_app_sidebar_toggle">

    <!-- Encabezado con logo -->
    <div class="sidebar-header">
        <a href="dns.php" class="logo-link">
            <img alt="Logo" src="<?php echo $static_url; ?>media/logos/logo.png" class="logo-img" />
            <span class="app-name">Panel de Control</span>
        </a>
    </div>

    <!-- Menú principal -->
    <div class="sidebar-menu">
        <div class="menu-section">
            <div class="menu-title">📊 Panel Principal</div>
            <div class="menu-divider"></div>
            
            <a href="dns.php" class="menu-item <?php echo ($current_page == 'dns.php') ? 'active' : ''; ?>">
                <i class="menu-icon fas fa-globe"></i>
                <span class="menu-text">Administrar DNS</span>
            </a>
            
            <a href="mac.php" class="menu-item <?php echo ($current_page == 'mac.php') ? 'active' : ''; ?>">
                <i class="menu-icon fas fa-users"></i>
                <span class="menu-text">Usuarios Mac</span>
            </a>
        </div>

        <div class="menu-section">
            <div class="menu-title">📢 Comunicación</div>
            <div class="menu-divider"></div>
            
            <a href="ads.php" class="menu-item <?php echo ($current_page == 'ads.php') ? 'active' : ''; ?>">
                <i class="menu-icon fas fa-ad"></i>
                <span class="menu-text">Anuncios Banner</span>
            </a>
            
            <a href="qrcode.php" class="menu-item <?php echo ($current_page == 'modobanner.php') ? 'active' : ''; ?>">
                <i class="menu-icon fas fa-qrcode"></i>
                <span class="menu-text"> Link QR Code</span>
            </a>
            
            <a href="note.php" class="menu-item <?php echo ($current_page == 'note.php') ? 'active' : ''; ?>">
                <i class="menu-icon fas fa-bullhorn"></i>
                <span class="menu-text">Mensajes del Servidor</span>
            </a>
        </div>

        <div class="menu-section">
            <div class="menu-title">🎨 Personalización</div>
            <div class="menu-divider"></div>
            
            <div class="menu-accordion">
    <div class="accordion-header" data-toggle="modal" data-target="#opcionesDisenoModal" style="cursor: pointer;">
        <i class="menu-icon fas fa-sliders-h"></i>
        <span class="menu-text">Opciones de Diseño</span>
        <i class="accordion-arrow fas fa-chevron-right"></i>
    </div>
</div>
        </div>

        <div class="menu-section">
            <div class="menu-title">👤 Mi Cuenta</div>
            <div class="menu-divider"></div>
            
            <a href="users.php" class="menu-item <?php echo ($current_page == 'users.php') ? 'active' : ''; ?>">
                <i class="menu-icon fas fa-user-cog"></i>
                <span class="menu-text">Mi Perfil</span>
            </a>
        </div>
    </div>

    <!-- Pie de página con selector de tema -->
    <div class="sidebar-footer">
        <div class="theme-switcher">
            <i class="fas fa-moon"></i>
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="kt_sidebar_theme_mode_toggle">
                <label class="form-check-label" for="kt_sidebar_theme_mode_toggle"></label>
            </div>
            <i class="fas fa-sun"></i>
        </div>
        <div class="app-version">v2.1.0</div>
    </div>
</div>

<!-- Estilos para la barra lateral moderna -->
<style>
.modern-sidebar {
    background: linear-gradient(180deg, #2c3e50 0%, #1a1a2e 100%);
    color: #fff;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.sidebar-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-img {
    height: 50px;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.05);
}

.app-name {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
    color: #fff;
}

.sidebar-menu {
    padding: 20px 15px;
    overflow-y: auto;
    height: calc(100vh - 180px);
}

.menu-section {
    margin-bottom: 25px;
}

.menu-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    margin-bottom: 15px;
    padding-left: 10px;
}

.menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 10px 0;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin: 5px 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
}

.menu-item:hover, .menu-item.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateX(5px);
}

.menu-item.active {
    background: linear-gradient(90deg, #3498db 0%, #2c3e50 100%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.menu-icon {
    margin-right: 12px;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.menu-text {
    flex-grow: 1;
    font-size: 15px;
}

.menu-badge {
    background: #e74c3c;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
}

.menu-accordion {
    margin: 5px 0;
}

.accordion-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.accordion-header:hover {
    background: rgba(255, 255, 255, 0.1);
}

.accordion-arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
}

.menu-accordion.active .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-content {
    padding-left: 35px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.menu-accordion.active .accordion-content {
    max-height: 500px;
}

.submenu-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    margin: 5px 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

.submenu-item:hover, .submenu-item.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.submenu-icon {
    margin-right: 10px;
    font-size: 14px;
}

.sidebar-footer {
    padding: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.theme-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.theme-switcher i {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
}

.app-version {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Efectos modernos */
.menu-item:hover .menu-icon {
    transform: scale(1.1);
}

.menu-item.active .menu-icon {
    color: #fff;
}

@media (max-width: 992px) {
    .modern-sidebar {
        transform: translateX(-100%);
    }
    .modern-sidebar.mobile-visible {
        transform: translateX(0);
    }
}
</style>

<!-- Script para funcionalidad -->
<script>
// Toggle del acordeón
document.querySelectorAll('.accordion-header').forEach(header => {
    header.addEventListener('click', () => {
        header.parentElement.classList.toggle('active');
    });
});

// Cambio de tema
document.getElementById('kt_sidebar_theme_mode_toggle').addEventListener('change', function() {
    document.body.classList.toggle('dark-theme');
});
</script>
<!-- Modal: Opciones de Diseño -->
<div class="modal fade" id="opcionesDisenoModal" tabindex="-1" role="dialog" aria-labelledby="opcionesDisenoLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header bg-dark text-white">
        <h5 class="modal-title" id="opcionesDisenoLabel">Opciones de Diseño</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Cerrar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body d-flex flex-column gap-2">

        <a href="themes.php" class="btn btn-outline-primary btn-block mb-2">
          <i class="fas fa-paint-brush"></i> Temas de la App
        </a>

        <a href="Rgvip_colores.php" class="btn btn-outline-success btn-block mb-2">
          <i class="fas fa-fill-drip"></i> Botones (Colores y Forma)
          <span class="menu-badge">Nuevo</span>
        </a>

        <a href="modobanner.php" class="btn btn-outline-warning btn-block mb-2">
          <i class="fas fa-palette"></i> Tipos de banner
        </a>

        <a href="qr_url.php" class="btn btn-outline-info btn-block mb-2">
          <i class="fas fa-font"></i> Texto sobre la MAC
        </a>

        <a href="intro.php" class="btn btn-outline-danger btn-block">
          <i class="fas fa-video"></i> Video Intro
        </a>

      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
