<?php
session_start();
if (!isset($_SESSION['eggzie_iboPlayer'])) {
    header('Location: login.php');
    exit();
}

error_reporting(E_ALL);
ini_set("display_erros",1);
ini_set("display_startup_errors", 1);
$admin_name = $_SESSION['admin_name'];

$IIIIIIIlI1lI = $_SESSION['id'];
$IIIIIIIlI1ll = new SQLite3('./a/.eggziepanels.db');
$adb = new SQLite3('./api/.adb.db');
$IIIIIIIlI1l1 = $IIIIIIIlI1ll->query('SELECT * FROM USERS WHERE id=\'1\'')->fetchArray();
$IIIIIIIlI11l = $IIIIIIIlI1l1['NAME'];
$IIIIIIIlI111 = $IIIIIIIlI1l1['LOGO'];

    $IIIIIIIllIII = file_get_contents('./includes/eggzie.json');
    $IIIIIIIllIIl = json_decode($IIIIIIIllIII, true);
    $IIIIIIIllII1 = $IIIIIIIllIIl['info']['aa'];
    ?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="google" content="notranslate">
    <title>IBO REVENDA ULTRA</title>
    <link rel="shortcut icon" href="ibo1.gif" type="image/x-icon">
    <link rel="icon" href="ibo1.gif" type="image/x-icon">
    
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
    
    <!-- Custom styles for this template-->
    <link href="css/sb-admin-<?php echo $IIIIIIIllII1; ?>.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.min.css"/>
    
    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    
    <!-- Bootstrap JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
    /* === DESIGN FUTURISTA MODERNO === */
    :root {
        --primary: #00D4FF;
        --primary-dark: #0099CC;
        --secondary: #FF6B9D;
        --accent: #00FF88;
        --surface: #0A0F1C;
        --surface-light: #1A1F2C;
        --surface-lighter: #2A2F3C;
        --text-primary: #FFFFFF;
        --text-secondary: #B0B7C3;
        --text-muted: #6B7280;
        --border: rgba(255,255,255,0.1);
        --glow: 0 0 20px rgba(0, 212, 255, 0.3);
        --glow-accent: 0 0 20px rgba(0, 255, 136, 0.3);
    }

    /* === FUNDO FUTURISTA === */
    body {
        background: linear-gradient(135deg, #0A0F1C 0%, #151B2D 50%, #0A0F1C 100%) !important;
        font-family: 'Inter', sans-serif !important;
        min-height: 100vh;
        color: var(--text-primary);
        overflow-x: hidden;
    }

    /* Efeito de partículas futuristas */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: 
            radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(255, 107, 157, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(0, 255, 136, 0.05) 0%, transparent 50%);
        pointer-events: none;
        z-index: -1;
    }

    /* === HEADER FUTURISTA === */
    .futuristic-header {
        background: rgba(10, 15, 28, 0.9) !important;
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--glow);
        padding: 12px 0;
    }

    .user-info {
        color: var(--text-primary);
        font-weight: 600;
        text-align: center;
    }

    .user-info h5 {
        margin: 0;
        font-size: 1.1rem;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .futuristic-logout-btn {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
        border: none;
        border-radius: 12px;
        padding: 10px 20px;
        color: white !important;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: var(--glow);
    }

    .futuristic-logout-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
        color: white !important;
    }

    /* === SIDEBAR FUTURISTA === */
    #sidebar {
        background: rgba(10, 15, 28, 0.95) !important;
        backdrop-filter: blur(20px);
        border-right: 1px solid var(--border);
        height: 100vh;
        transition: all 0.3s ease;
        width: 280px;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;
        padding: 0;
        display: flex;
        flex-direction: column;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    }

    /* Container da sidebar com scroll */
    .sidebar-container {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 12px 20px 12px;
    }

    /* Custom scrollbar futurista */
    .sidebar-container::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-container::-webkit-scrollbar-track {
        background: var(--surface-light);
        border-radius: 3px;
    }

    .sidebar-container::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        border-radius: 3px;
    }

    /* === SEÇÕES FUTURISTAS === */
    .futuristic-section {
        background: var(--surface-light);
        border-radius: 16px;
        margin: 12px 0;
        padding: 0;
        border: 1px solid var(--border);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        transition: all 0.3s ease;
        position: relative;
    }

    .futuristic-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--primary), transparent);
    }

    .futuristic-section:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        border-color: var(--primary);
    }

    .futuristic-section-header {
        background: linear-gradient(135deg, var(--surface-light), var(--surface-lighter));
        padding: 16px 20px;
        border-bottom: 1px solid var(--border);
        font-weight: 600;
        color: var(--text-primary);
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .futuristic-section-header .material-icons-round {
        font-size: 18px;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .futuristic-section-content {
        padding: 8px 0;
    }

    /* === ITENS DA SIDEBAR FUTURISTAS === */
    .futuristic-item {
        display: flex !important;
        align-items: center !important;
        padding: 14px 20px !important;
        color: var(--text-secondary) !important;
        transition: all 0.3s ease;
        text-decoration: none;
        border: none;
        background: transparent;
        width: 100%;
        text-align: left;
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        margin: 4px 8px;
        min-height: 52px;
        gap: 16px;
    }

    .futuristic-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .futuristic-item:hover {
        background: rgba(0, 212, 255, 0.1);
        color: var(--text-primary) !important;
        transform: translateX(8px);
    }

    .futuristic-item:hover::before {
        opacity: 1;
    }

    .futuristic-item .material-icons-round {
        font-size: 20px;
        width: 24px;
        text-align: center;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .futuristic-item:hover .material-icons-round {
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5));
    }

    .futuristic-item span {
        font-size: 14px;
        font-weight: 500;
        flex: 1;
        letter-spacing: 0.3px;
    }

    /* === ITEM COM COLLAPSE FUTURISTA - COMPORTAMENTO CORRETO === */
    .futuristic-collapse-toggle {
        cursor: pointer;
        position: relative;
    }

    .futuristic-collapse-toggle .material-icons-round:last-child {
        transition: transform 0.3s ease;
        margin-left: auto;
        font-size: 18px;
        opacity: 0.7;
    }

    .futuristic-collapse-toggle[aria-expanded="true"] .material-icons-round:last-child {
        transform: rotate(180deg);
        opacity: 1;
    }

    /* === MENU COLLAPSE FUTURISTA - COMPORTAMENTO DE ROLAGEM === */
    .futuristic-collapse-menu {
        background: var(--surface-lighter) !important;
        border-radius: 12px;
        margin: 8px 12px;
        border: 1px solid var(--border);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        position: relative;
        position: static;
        max-height: none;
    }

    .futuristic-collapse-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
    }

    .futuristic-collapse-item {
        display: flex !important;
        align-items: center !important;
        padding: 14px 16px !important;
        color: var(--text-secondary) !important;
        text-decoration: none;
        transition: all 0.3s ease;
        border-bottom: 1px solid var(--border);
        min-height: 48px;
        box-sizing: border-box;
        border-radius: 0;
        gap: 12px;
    }

    .nav-sub-item-upgrade {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        text-decoration: none;
        color: #94a3b8;
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem;
        font-weight: 500;
        margin-left: 15px;
        transition: all 0.2s ease-in-out;
    }

    .nav-sub-item-upgrade .nav-sub-icon {
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
    }

    .nav-sub-item-upgrade .nav-sub-text {
        line-height: 1.3;
        text-align: left;
    }

    .futuristic-collapse-item:last-child {
        border-bottom: none;
    }

    .futuristic-collapse-item:hover {
        background: rgba(0, 255, 136, 0.1);
        color: var(--text-primary) !important;
        transform: translateX(4px);
    }

    .futuristic-collapse-item .material-icons-round {
        font-size: 18px;
        width: 20px;
        text-align: center;
        background: linear-gradient(135deg, var(--accent), var(--primary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        flex-shrink: 0;
    }

    .futuristic-collapse-item span {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.3px;
    }

    .futuristic-collapse-header {
        color: var(--text-muted) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 16px 16px 8px 16px !important;
        margin: 0 !important;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        border-bottom: 1px solid var(--border);
        background: var(--surface-light);
    }

    /* === BOTÃO TOGGLE FUTURISTA === */
    #sidebarToggleTop {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
        border: none;
        color: white !important;
        transition: all 0.3s ease;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        box-shadow: var(--glow);
    }

    #sidebarToggleTop:hover {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
    }

    #sidebarToggleTop .material-icons-round {
        color: white !important;
        font-size: 20px;
    }

    /* === CONTEÚDO PRINCIPAL === */
    #content-wrapper {
        background: transparent !important;
        margin-left: 280px;
        transition: all 0.3s ease;
        min-height: 100vh;
    }

    .container-fluid, .main-content, .content-wrapper, 
    .bg-white, .card, .shadow, .container {
        background: transparent !important;
    }

    #content, #main, main, [role="main"] {
        background: transparent !important;
    }

    #wrapper.toggled #content-wrapper {
        margin-left: 0;
    }

    #wrapper.toggled #sidebar {
        margin-left: -280px;
    }

    /* === LOGO E BRAND FUTURISTA === */
    .futuristic-sidebar-brand {
        padding: 24px 0;
        border-bottom: 1px solid var(--border);
        text-align: center;
        margin-bottom: 8px;
        flex-shrink: 0;
        background: var(--surface-light);
        position: relative;
    }

    .futuristic-sidebar-brand::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20%;
        right: 20%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--primary), transparent);
    }

    .futuristic-sidebar-brand img {
        border-radius: 16px;
        transition: all 0.3s ease;
        box-shadow: var(--glow);
        border: 2px solid transparent;
        background: linear-gradient(135deg, var(--surface-light), var(--surface-lighter)) padding-box,
                   linear-gradient(135deg, var(--primary), var(--accent)) border-box;
    }

    .futuristic-sidebar-brand:hover img {
        transform: scale(1.02);
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
    }

    #widgetConfig.collapse:not(.show) {
        display: none;
    }

    #widgetConfig.collapsing {
        height: 0;
        overflow: hidden;
        transition: height 0.35s ease;
    }

    #widgetConfig.collapse.show {
        display: block;
        height: auto;
        position: static;
        z-index: auto;
    }

    .futuristic-section:has(#widgetConfig.show) {
        min-height: auto;
        overflow: visible;
    }

    /* === RESPONSIVIDADE FUTURISTA === */
    @media (max-width: 768px) {
        .futuristic-header {
            padding: 10px 0;
        }
        
        .user-info h5 {
            font-size: 1rem;
        }
        
        .futuristic-logout-btn {
            padding: 8px 16px;
            font-size: 0.9rem;
        }
        
        #sidebar {
            margin-left: -280px;
            width: 280px;
            height: 100vh;
            z-index: 1050;
        }
        
        #content-wrapper {
            margin-left: 0 !important;
        }
        
        #wrapper.toggled #sidebar {
            margin-left: 0;
        }

        .futuristic-section {
            margin: 10px 0;
        }
        
        .futuristic-item {
            padding: 12px 16px !important;
            min-height: 50px;
            margin: 4px 6px;
            gap: 14px;
        }

        .futuristic-collapse-menu {
            margin: 6px 8px;
        }

        .futuristic-collapse-item {
            padding: 12px 14px !important;
            min-height: 46px;
            gap: 10px;
        }

        .futuristic-section .nav-item {
            position: static;
        }

        #widgetConfig {
            position: static;
            z-index: auto;
        }

        #sidebarToggleTop {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1100;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
            border: none;
            color: white !important;
            width: 45px;
            height: 45px;
            border-radius: 12px;
            display: flex !important;
            align-items: center;
            justify-content: center;
            box-shadow: var(--glow);
            transition: all 0.3s ease;
        }

        #wrapper:not(.toggled) #sidebarToggleTop {
            left: 300px;
        }

        #wrapper.toggled #sidebarToggleTop {
            left: 20px;
        }

        #sidebar {
            margin-left: -280px;
            width: 280px;
            height: 100vh;
            z-index: 1050;
            transition: all 0.3s ease;
        }

        #wrapper:not(.toggled) #sidebar {
            margin-left: 0;
        }

        #wrapper.toggled #sidebar {
            margin-left: -280px;
        }

        .user-info {
            position: absolute;
            left: 50%;
            text-align: center;
            top: 50%;
            transform: translate(-50%, -50%);
            margin: 0;
            width: auto;
        }
        
        .user-info h5 {
            margin: 0;
            white-space: nowrap;
            font-size: 1rem;
        }
        
        .navbar-nav.ml-auto {
            margin-left: auto !important;
        }
        
        .futuristic-header {
            position: relative;
            min-height: 60px;
        }
    }

    .glow-text {
        text-shadow: 0 0 10px currentColor;
    }

    .neon-border {
        border: 1px solid;
        border-image: linear-gradient(135deg, var(--primary), var(--accent)) 1;
    }
    </style>
</head>
<body id="page-top">
    
    <!-- Page Wrapper -->
    <div id="wrapper">
        <!-- Sidebar Futurista -->
        <ul class="navbar-nav sidebar sidebar-dark accordion" id="sidebar">
            <!-- Sidebar - Brand -->
            <a class="futuristic-sidebar-brand d-flex align-items-center justify-content-center" href="users.php">
                <div class="sidebar-brand-icon">
                    <img class="img-profile" width="120px" src="<?php echo $IIIIIIIlI111 ?? 'img/logo.png'; ?>">
                </div>
            </a>
            
            <!-- Container com scroll -->
            <div class="sidebar-container">
                <!-- Seção 1: Gerenciamento de Usuários -->
                <div class="futuristic-section">
                    <div class="futuristic-section-header">
                        <span class="material-icons-round">manage_accounts</span>
                        <span>Gerenciamento</span>
                    </div>
                    <div class="futuristic-section-content">
                        <li class="nav-item">
                            <a class="futuristic-item" href="users.php">
                                <span class="material-icons-round">group_add</span>
                                <span>Usuários</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="futuristic-item" href="revenda.php">
                                <span class="material-icons-round">storefront</span>
                                <span>Revendas e Sub_Revendas</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="futuristic-item" href="revend_subrevend.php">
                                <span class="material-icons-round">account_tree</span>
                                <span>Todos os Revendas e sub</span>
                            </a>
                        </li>
                        
                        <li class="nav-item">
                            <a class="futuristic-item" href="demo.php">
                                <span class="material-icons-round">link</span>
                                <span> Lista Demo</span>
                            </a>
                        </li>
                        
                        <li class="nav-item">
                            <a class="futuristic-item" href="chat.php">
                                <span class="material-icons-round">smart_toy</span>
                                <span>Teste Chatbot </span>
                            </a>
                        </li>
                        
                        <li class="nav-item">
                            <a class="futuristic-item" href="add_cliente.php">
                                <span class="material-icons-round">person_add</span>
                                <span>Adicionar Cliente</span>
                            </a>
                        </li>
                    </div>
                </div>

                <!-- Seção 2: Notificações e Alertas -->
                <div class="futuristic-section">
                    <div class="futuristic-section-header">
                        <span class="material-icons-round">notifications</span>
                        <span>Comunicação</span>
                    </div>
                    <div class="futuristic-section-content">
                        <li class="nav-item">
                            <a class="futuristic-item" href="note.php">
                                <span class="material-icons-round">campaign</span>
                                <span>Notificação</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="futuristic-item" href="qrcode.php">
                                <span class="material-icons-round">qr_code_2</span>
                                <span>QR Code e Texto</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="futuristic-item" href="revenda_mensagem.php">
                                <span class="material-icons-round">warning</span>
                                <span>Alerta para Revendas</span>
                            </a>
                        </li>
                    </div>
                </div>

                <!-- Seção 3: Configurações de Widget -->
                <div class="futuristic-section">
                    <div class="futuristic-section-header">
                        <span class="material-icons-round">tune</span>
                        <span>Configurações</span>
                    </div>
                    <div class="futuristic-section-content">
                        <!-- LINK DE UPGRADE AJUSTADO NO PADRÃO GLOBAL -->
                        <a href="revenda/planos.php" class="nav-sub-item-upgrade" onmouseover="this.style.color='#ffffff';" onmouseout="this.style.color='#94a3b8';">
                            <div class="nav-sub-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
                            </div>
                            <div class="nav-sub-text">
                                Upgrade no<br>Plano
                            </div>
                        </a>

                        <!-- NOVO: BOTÃO CONFIGURAR PLANOS (EXCLUSIVO PARA O ADMIN) -->
                        <a href="configplanos.php" class="nav-sub-item-upgrade" onmouseover="this.style.color='#ffffff';" onmouseout="this.style.color='#94a3b8';">
                            <div class="nav-sub-icon">
                                <span class="material-icons-round" style="font-size: 16px; color: var(--accent);">settings_brightness</span>
                            </div>
                            <div class="nav-sub-text">
                                Configurar<br>Planos
                            </div>
                        </a>
                        
                        <li class="nav-item">
                            <a class="futuristic-item futuristic-collapse-toggle" data-toggle="collapse" data-target="#widgetConfig" aria-expanded="false" aria-controls="widgetConfig">
                                <span class="material-icons-round">dashboard</span>
                                <span>Config Widget</span>
                                <span class="material-icons-round">expand_more</span>
                            </a>
                            <div id="widgetConfig" class="collapse">
                                <div class="futuristic-collapse-menu">
                                    <h6 class="futuristic-collapse-header">Configuração de fundo:</h6>
                                    <a class="futuristic-collapse-item" href="UI_Setting.php">
                                        <span class="material-icons-round">widgets</span>
                                        <span>Widgets</span>
                                    </a>
                                    <a class="futuristic-collapse-item" href="ads.php">
                                        <span class="material-icons-round">ads_click</span>
                                        <span>Publicidades</span>
                                    </a>
                                    <a class="futuristic-collapse-item" href="intro.php">
                                        <span class="material-icons-round">live_tv</span>
                                        <span>Canal</span>
                                    </a>
                                    <a class="futuristic-collapse-item" href="Sport.php">
                                        <span class="material-icons-round">sports_esports</span>
                                        <span>Esportes</span>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="futuristic-item" href="Image.php">
                                <span class="material-icons-round">collections</span>
                                <span>Imagens de fundo</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="futuristic-item" href="logo.php">
                                <span class="material-icons-round">auto_awesome</span>
                                <span>Alterar logotipo</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="futuristic-item" href="layouts.php">
                                <span class="material-icons-round">palette</span>
                                <span>Temas</span>
                            </a>
                        </li>
                    </div>
                </div>

                <!-- Seção 4: Sistema e Perfil -->
                <div class="futuristic-section">
                    <div class="futuristic-section-header">
                        <span class="material-icons-round">settings_suggest</span>
                        <span>Sistema</span>
                    </div>
                    <div class="futuristic-section-content">
                        <li class="nav-item">
                            <a class="futuristic-item" href="update.php">
                                <span class="material-icons-round">system_update</span>
                                <span>Atualização Apk</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="futuristic-item" href="snoop.php">
                                <span class="material-icons-round">visibility</span>
                                <span>Bisbilhoteiro</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="futuristic-item" href="profile.php">
                                <span class="material-icons-round">person</span>
                                <span>Perfil</span>
                            </a>
                        </li>
                    </div>
                </div>
                <?php
include 'footer_eon.php'
?>

                <!-- Espaço extra no final -->
                <div style="height: 20px;"></div>
            </div>
        </ul>
        
        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">
            <!-- Main Content -->
            <div id="content">
                <!-- Topbar Futurista -->
                <nav class="navbar navbar-expand navbar-light topbar mb-4 static-top shadow futuristic-header">
                    <!-- Sidebar Toggle (Topbar) -->
                    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                        <span class="material-icons-round">menu</span>
                    </button>
                    
                    <!-- User Info -->
                    <div class="user-info">
                        <h5>ADM<br><?php echo $IIIIIIIlI11l; ?></h5>
                    </div>
                    
                    <!-- Topbar Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <div class="topbar-divider d-none d-sm-block"></div>
                        <li class="nav-item dropdown no-arrow mx-1">
                            <a class="futuristic-logout-btn" href="login.php">
                                <span class="material-icons-round">logout</span>
                                <span>Sair</span>
                            </a>
                        </li>
                    </ul>
                </nav>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle sidebar
    const sidebarToggle = document.getElementById('sidebarToggleTop');
    const wrapper = document.getElementById('wrapper');

    if (sidebarToggle) {
        sidebarToggle.addEventListener('click', function(e) {
            e.preventDefault();
            wrapper.classList.toggle('toggled');
            
            const icon = this.querySelector('.material-icons-round');
            if (wrapper.classList.contains('toggled')) {
                icon.textContent = 'chevron_right';
            } else {
                icon.textContent = 'menu';
            }
        });
    }

    // Collapse functionality - COMPORTAMENTO CORRETO
    $('.futuristic-collapse-toggle').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        const target = $(this).data('target');
        $(target).collapse('toggle');
        
        const isExpanded = $(this).attr('aria-expanded') === 'true';
        $(this).attr('aria-expanded', !isExpanded);

        // No mobile, fazer scroll suave para a seção expandida
        if (window.innerWidth <= 768 && !isExpanded) {
            setTimeout(() => {
                const expandedSection = $(this).closest('.futuristic-section');
                const sidebarContainer = $('.sidebar-container');
                const sectionTop = expandedSection.offset().top - sidebarContainer.offset().top + sidebarContainer.scrollTop();
                
                sidebarContainer.animate({
                    scrollTop: sectionTop - 10
                }, 300);
            }, 350);
        }
    });

    // Fechar sidebar no mobile ao clicar fora
    document.addEventListener('click', function(e) {
        if (window.innerWidth <= 768) {
            const sidebar = document.getElementById('sidebar');
            if (!sidebar.contains(e.target) && !sidebarToggle.contains(e.target)) {
                wrapper.classList.add('toggled');
                sidebarToggle.querySelector('.material-icons-round').textContent = 'menu';
            }
        }
    });

    // Garantir que o collapse funcione corretamente
    $('#widgetConfig').on('show.bs.collapse', function () {
        $(this).css({
            'position': 'static',
            'z-index': 'auto'
        });
    });

    // Efeitos de hover com delay
    const items = document.querySelectorAll('.futuristic-item, .futuristic-collapse-item');
    items.forEach((item, index) => {
        item.style.transitionDelay = `${index * 0.05}s`;
    });
});
</script>
</body>
</html>