<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
$static_url = dirname($_SERVER['SCRIPT_NAME']) . '/assets/';
?>

<!DOCTYPE html>
<html lang="es">

<head>
    <title><?php echo isset($page_title) ? $page_title : "Panel MaxRebrands"; ?></title>
    <meta charset="utf-8" />
    <meta name="description" content="Sistema de Gestión MaxRebrands" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#1E1E2D">
    <link rel="shortcut icon" href="<?php echo $static_url; ?>media/logos/logo.png" />
    
    <!-- Fuentes modernas -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Estilos CSS -->
    <link href="<?php echo $static_url; ?>plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" />
    <link href="<?php echo $static_url; ?>plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" />
    <link href="<?php echo $static_url; ?>plugins/global/plugins.bundle.css" rel="stylesheet" />
    <link href="<?php echo $static_url; ?>css/style.bundle.css" rel="stylesheet" />
    <style>
    .scrolltop {
        background: var(--primary-color);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(93, 120, 255, 0.3);
    }
    
    .scrolltop svg {
        color: white;
    }
   /* Efecto de partículas mejorado y visible */
.kt-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.kt-particle {
    position: absolute;
    background: #4e73df;
    border-radius: 50%;
    animation: kt-float 20s infinite linear;
    opacity: 0.8;
    filter: blur(0.8px);
    box-shadow: 0 0 10px rgba(78, 115, 223, 0.5);
}

[data-bs-theme="dark"] .kt-particle {
    background: #a0b8ff;
    box-shadow: 0 0 15px rgba(160, 184, 255, 0.7);
}

@keyframes kt-float {
    0% {
        transform: translateY(110vh) translateX(0) scale(0.8);
        opacity: 0;
    }
    20% {
        opacity: 0.8;
        transform: translateY(90vh) translateX(20px) scale(1);
    }
    80% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-10vh) translateX(100px) scale(1.2);
        opacity: 0;
    }
}
     </style>
</head>

<body id="kt_app_body" data-kt-app-sidebar-enabled="true" data-kt-app-sidebar-fixed="true"
    data-kt-app-sidebar-push-header="true" data-kt-app-sidebar-push-toolbar="true"
    data-kt-app-sidebar-push-footer="true" class="app-default">
     <div class="kt-particles" id="kt-particles"></div>
    <!-- Script para el tema -->
    <script>
    var defaultThemeMode = "light";
    var themeMode;
    
    if (document.documentElement) {
        if (document.documentElement.hasAttribute("data-bs-theme-mode")) {
            themeMode = document.documentElement.getAttribute("data-bs-theme-mode");
        } else {
            if (localStorage.getItem("data-bs-theme") !== null) {
                themeMode = localStorage.getItem("data-bs-theme");
            } else {
                themeMode = defaultThemeMode;
            }
        }
        
        if (themeMode === "system") {
            themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
        }
        
        document.documentElement.setAttribute("data-bs-theme", themeMode);
    }
    </script>

    <div class="d-flex flex-column flex-root app-root" id="kt_app_root">
        <div class="app-page flex-column flex-column-fluid" id="kt_app_page">
            <?php include 'includes/header.php'; ?>
            
            <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
                <?php include 'includes/sidebar.php'; ?>
                
                <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                    <div class="d-flex flex-column flex-column-fluid">
                        <!-- Contenido principal -->
                        <div id="kt_app_content" class="app-content flex-column-fluid">
                            <div id="kt_app_content_container" class="app-container container-fluid">
                                <?php
                                echo isset($page_content) ? $page_content : 
                                '<div class="empty-state">
                                    <i class="fas fa-exclamation-circle empty-state-icon"></i>
                                    <h3>Contenido no disponible</h3>
                                    <p>No se encontró contenido para mostrar en esta página.</p>
                                </div>';
                                ?>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Pie de página -->
                    <div id="kt_app_footer" class="app-footer">
                        <div class="app-container container-fluid d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
                            <div class="text-gray-900 order-2 order-md-1">
                                <span class="text-muted fw-semibold me-1">2025&copy;</span>
                                <a href="https://apps-rgvip.com" target="_blank" class="text-gray-800 text-hover-primary">Rgvip Panels</a>
                            </div>
                            
                            <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
                                
                                <li class="menu-item">
                                    <a href="#" class="menu-link px-2">Términos</a>
                                </li>
                                <li class="menu-item">
                                    <a href="https://apps-rgvip.com" class="menu-link px-2">Contacto</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Botón para scroll arriba -->
    <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
        <i class="fas fa-arrow-up"></i>
    </div>

    <!-- Scripts -->
    <script src="<?php echo $static_url; ?>plugins/global/plugins.bundle.js"></script>
    <script src="<?php echo $static_url; ?>js/scripts.bundle.js"></script>
    <script src="<?php echo $static_url; ?>plugins/custom/datatables/datatables.bundle.js"></script>
    <script src="<?php echo $static_url; ?>js/widgets.js"></script>
    
    <!-- Scripts personalizados -->
    <script>
    // Inicializaciones
    document.addEventListener('DOMContentLoaded', function() {
        // Efecto smooth para los enlaces
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        
        // Notificación de tema cambiado
        const themeToggle = document.querySelector('[data-kt-theme-mode-toggle]');
        if (themeToggle) {
            themeToggle.addEventListener('click', function() {
                const currentTheme = document.documentElement.getAttribute('data-bs-theme');
                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                
                // Mostrar notificación
                Toastify({
                    text: `Modo ${newTheme === 'dark' ? 'oscuro' : 'claro'} activado`,
                    duration: 3000,
                    close: true,
                    gravity: "top",
                    position: "right",
                    backgroundColor: newTheme === 'dark' ? "#1E1E2D" : "#F5F8FA",
                    stopOnFocus: true
                }).showToast();
            });
        }
    });
    </script>
   <script>
// Script de partículas mejorado - versión visible
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('kt-particles');
    if (!container) return;
    
    // Limpiar contenedor
    container.innerHTML = '';
    
    // Crear más partículas (80 en lugar de 50)
    for (let i = 0; i < 80; i++) {
        const particle = document.createElement('div');
        particle.className = 'kt-particle';
        
        // Tamaño más grande (entre 3px y 8px)
        const size = Math.random() * 5 + 3;
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        
        // Posición inicial aleatoria en toda la pantalla
        particle.style.left = `${Math.random() * 100}%`;
        particle.style.top = `${Math.random() * 100}%`;
        
        // Animación más variada
        const duration = Math.random() * 15 + 15;
        const delay = Math.random() * -20; // Permite que algunas ya estén en movimiento
        particle.style.animation = `kt-float ${duration}s linear ${delay}s infinite`;
        
        // Opacidad aleatoria para mayor realismo
        particle.style.opacity = Math.random() * 0.4 + 0.4;
        
        container.appendChild(particle);
    }
    
    // Cambiar color al cambiar tema
    const observer = new MutationObserver(function() {
        const theme = document.documentElement.getAttribute('data-bs-theme') || 'light';
        const color = theme === 'dark' ? '#a0b8ff' : '#4e73df';
        document.querySelectorAll('.kt-particle').forEach(p => {
            p.style.background = color;
            p.style.boxShadow = theme === 'dark' 
                ? '0 0 15px rgba(160, 184, 255, 0.7)' 
                : '0 0 10px rgba(78, 115, 223, 0.5)';
        });
    });
    
    observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ['data-bs-theme']
    });
    
    // Reposicionar partículas al redimensionar
    window.addEventListener('resize', function() {
        document.querySelectorAll('.kt-particle').forEach(p => {
            p.style.left = `${Math.random() * 100}%`;
            p.style.top = `${Math.random() * 100}%`;
        });
    });
});
</script>
</body>
</html>