<?php

//<----------------------------------------------------------->
//<-------------------COPIA AI BRUXÃO------------------------->
//<-------------CONTATO: https://t.me/eonbry------------------>
//<-------------DEVELOPER: EMANUEL NASCIMENTO----------------->
//<----------------------------------------------------------->


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);
// LINHA 11 CORRIGIDA:
$admin_name = isset($_SESSION['admin_name']) ? $_SESSION['admin_name'] : 'Administrador';

$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="pt-br">
<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 NOTIFICATION</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
   

    
    <style>
        :root {
            /* Cores futuristas */
            --primary: #00BFFF; /* Azul Celeste */
            --primary-dark: #4682B4; /* Azul Metálico */
            --secondary: #4682B4;
            --accent: #00BFFF;
            --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, 191, 255, 0.3);
            --glow-accent: 0 0 20px rgba(70, 130, 180, 0.3);
            
            /* Variáveis de layout */
            --sidebar-width: 280px;
            --transition-speed: 0.3s;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif !important;
            background: linear-gradient(135deg, #0A0F1C 0%, #151B2D 50%, #0A0F1C 100%) !important;
            color: var(--text-primary);
            min-height: 100vh;
            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;
        }
        
        /* Main Wrapper */
        #wrapper {
            display: flex;
            width: 100%;
            min-height: 100vh;
            position: relative;
            transition: all var(--transition-speed) ease;
        }
        
        /* === SIDEBAR FUTURISTA === */
        #sidebar-wrapper {
            width: var(--sidebar-width);
            min-width: var(--sidebar-width);
            background: rgba(10, 15, 28, 0.98) !important;
            backdrop-filter: blur(20px);
            border-right: 1px solid var(--border);
            box-shadow: 5px 0 25px rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            z-index: 1050;
            overflow-y: auto;
            overflow-x: hidden;
            transform: translateX(0);
            transition: transform var(--transition-speed) ease;
            display: flex;
            flex-direction: column;
        }
        
        /* Sidebar fechada no mobile */
        #sidebar-wrapper.mobile-closed {
            transform: translateX(-100%);
        }
        
        /* Overlay para mobile - CORRIGIDO */
        .sidebar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1049;
            backdrop-filter: blur(5px);
        }
        
        .sidebar-overlay.active {
            display: block;
        }
        
        /* Sidebar Content */
        .sidebar {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        
        /* Brand futurista */
        .sidebar-brand {
            padding: 20px 15px;
            text-align: center;
            border-bottom: 1px solid var(--border);
            background: var(--surface-light);
            position: relative;
            flex-shrink: 0;
            min-height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .sidebar-brand::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 10%;
            right: 10%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
        }
        
        .sidebar-brand img {
            border-radius: 12px;
            transition: all var(--transition-speed) 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;
            max-width: 160px;
            height: auto;
            max-height: 60px;
            object-fit: contain;
        }
        
        /* Botão fechar no mobile - POSIÇÃO CORRETA */
        .sidebar-close-btn {
            display: none;
            position: absolute;
            right: 15px;
            top: 15px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 12px;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            z-index: 1051;
            transition: all var(--transition-speed) ease;
            box-shadow: var(--glow);
        }
        
        .sidebar-close-btn:hover {
            transform: rotate(90deg);
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
        }
        
        /* Container com scroll - CORRIGIDO */
        .sidebar-container {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 10px;
            width: 100%;
            height: calc(100vh - 90px); /* Altura total menos a brand */
            -webkit-overflow-scrolling: touch; /* Scroll suave no mobile */
        }
        
        /* === SEÇÕES FUTURISTAS === */
        .futuristic-section {
            background: var(--surface-light);
            border-radius: 16px;
            margin: 10px 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;
            animation: slideIn 0.3s ease forwards;
            animation-delay: calc(var(--item-index) * 0.05s);
        }
        
        .futuristic-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
        }
        
        .futuristic-section-header {
            background: linear-gradient(135deg, var(--surface-light), var(--surface-lighter));
            padding: 14px 16px;
            border-bottom: 1px solid var(--border);
            font-weight: 600;
            color: var(--text-primary);
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 10px;
            position: sticky;
            top: 0;
            z-index: 2;
        }
        
        .futuristic-section-header .material-icons-round {
            font-size: 16px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .futuristic-section-content {
            padding: 6px 0;
        }
        
        /* === ITENS FUTURISTAS === */
        .futuristic-item {
            display: flex !important;
            align-items: center !important;
            padding: 12px 16px !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 6px;
            min-height: 48px;
            gap: 12px;
        }
        
        .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(5px);
        }
        
        .futuristic-item.active {
            background: rgba(0, 212, 255, 0.2);
            color: var(--text-primary) !important;
        }
        
        .futuristic-item.active::before {
            opacity: 1;
        }
        
        .futuristic-item .material-icons-round {
            font-size: 18px;
            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 span {
            font-size: 13px;
            font-weight: 500;
            flex: 1;
            letter-spacing: 0.3px;
        }
        
        /* Item com collapse */
        .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: 16px;
            opacity: 0.7;
        }
        
        .futuristic-collapse-toggle[aria-expanded="true"] .material-icons-round:last-child {
            transform: rotate(180deg);
            opacity: 1;
        }
        
        /* Menu collapse */
        .futuristic-collapse-menu {
            background: var(--surface-lighter) !important;
            border-radius: 12px;
            margin: 6px 10px;
            border: 1px solid var(--border);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        
        .futuristic-collapse-item {
            display: flex !important;
            align-items: center !important;
            padding: 12px 14px !important;
            color: var(--text-secondary) !important;
            text-decoration: none;
            transition: all 0.3s ease;
            border-bottom: 1px solid var(--border);
            min-height: 46px;
            gap: 10px;
        }
        
        .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: 16px;
            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: 12px;
            font-weight: 500;
            letter-spacing: 0.3px;
        }
        
        .futuristic-collapse-header {
            color: var(--text-muted) !important;
            font-size: 10px !important;
            font-weight: 700 !important;
            padding: 14px 14px 6px 14px !important;
            margin: 0 !important;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            border-bottom: 1px solid var(--border);
            background: var(--surface-light);
        }
        
        /* Custom scrollbar - MELHORADO */
        .sidebar-container::-webkit-scrollbar {
            width: 4px;
        }
        
        .sidebar-container::-webkit-scrollbar-track {
            background: transparent;
        }
        
        .sidebar-container::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            border-radius: 2px;
        }
        
        .sidebar-container::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, var(--accent), var(--primary));
        }
        
        /* === TOPBAR FUTURISTA === */
        #topbar {
            background: rgba(10, 15, 28, 0.95) !important;
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
            box-shadow: var(--glow);
            padding: 0 15px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1040;
            width: 100%;
        }
        
        /* Topbar Toggle Button - NOVO DESIGN */
        #sidebarToggleTop {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
            border: none;
            width: 45px;
            height: 45px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-speed) ease;
            color: white;
            font-size: 20px;
            box-shadow: var(--glow);
            position: relative;
            z-index: 1060;
            margin: 0;
        }
        
        #sidebarToggleTop:hover {
            transform: rotate(90deg);
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
        }
        
        /* User Info - CENTRALIZADO NO MOBILE */
        .user-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            text-align: center;
            padding: 0 10px;
        }
        
        .user-info h5 {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 2px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .user-info .user-name {
            font-size: 11px;
            color: var(--text-secondary);
        }
        
        /* Logout Button */
        .logout-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, var(--secondary), #ff4757);
            border: none;
            border-radius: 12px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-speed) ease;
            text-decoration: none;
            box-shadow: 0 0 15px rgba(255, 107, 157, 0.3);
        }
        
        .logout-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(255, 107, 157, 0.5);
            background: linear-gradient(135deg, #ff4757, #ff3838);
        }
        
        /* Content Wrapper - CORRIGIDO */
        #content-wrapper {
            flex: 1;
            margin-left: var(--sidebar-width);
            transition: all var(--transition-speed) ease;
            min-height: 100vh;
            background: transparent;
            width: 100%;
            padding-top: 60px; /* Compensar a topbar fixa */
        }
        
        /* Main Content */
        #content {
            padding: 15px;
            min-height: calc(100vh - 60px);
            width: 100%;
        }
        
        /* === RESPONSIVE DESIGN - TOTALMENTE REESTRUTURADO === */
        @media (max-width: 992px) {
            /* CONTEÚDO PRINCIPAL */
            #content-wrapper {
                margin-left: 0 !important;
                width: 100%;
            }
            
            /* TOGGLE BUTTON - AGORA FIXO NO TOPO */
            #sidebarToggleTop {
                position: fixed;
                top: 7px;
                left: 10px;
                z-index: 1060;
                width: 46px;
                height: 46px;
            }
            
            /* SIDEBAR - FULL SCREEN */
            #sidebar-wrapper {
                width: 100%;
                max-width: 320px;
                transform: translateX(-100%);
                box-shadow: 5px 0 30px rgba(0, 0, 0, 0.7);
                z-index: 1050;
            }
            
            #sidebar-wrapper.mobile-open {
                transform: translateX(0);
            }
            
            /* BOTÃO FECHAR VISÍVEL NO MOBILE */
            .sidebar-close-btn {
                display: flex;
            }
            
            /* USER INFO NO MOBILE - OTIMIZADO */
            .user-info {
                margin-left: 50px; /* Espaço para o toggle */
                margin-right: 50px; /* Espaço para o logout */
                padding: 0 5px;
            }
            
            .user-info h5 {
                font-size: 12px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 180px;
            }
            
            .user-info .user-name {
                font-size: 10px;
            }
            
            /* LOGOUT BUTTON MOBILE */
            .logout-btn {
                width: 46px;
                height: 46px;
                position: relative;
            }
            
            .logout-btn i {
                font-size: 18px;
            }
            
            /* COMPENSAR ALTURA DA TOPBAR */
            body {
                padding-top: 60px;
            }
            
            /* SIDEBAR CONTENT - SCROLL CORRETO */
            .sidebar-container {
                padding: 8px;
                height: calc(100vh - 90px); /* Altura total menos brand */
            }
            
            /* SEÇÕES MENORES NO MOBILE */
            .futuristic-section {
                margin: 8px 0;
            }
            
            .futuristic-item {
                padding: 10px 14px !important;
                min-height: 46px;
                margin: 3px 5px;
                gap: 10px;
            }
            
            .futuristic-collapse-menu {
                margin: 5px 8px;
            }
            
            .futuristic-collapse-item {
                padding: 10px 12px !important;
                min-height: 44px;
                gap: 8px;
            }
        }
        
        @media (max-width: 480px) {
            /* SIDEBAR QUASE FULL WIDTH */
            #sidebar-wrapper {
                max-width: 100%;
            }
            
            .sidebar-brand {
                padding: 15px;
                min-height: 80px;
            }
            
            .sidebar-brand img {
                max-width: 140px;
                max-height: 50px;
            }
            
            .sidebar-close-btn {
                top: 10px;
                right: 10px;
                width: 36px;
                height: 36px;
            }
            
            /* TOGGLE E LOGOUT MENORES */
            #sidebarToggleTop,
            .logout-btn {
                width: 42px;
                height: 42px;
                top: 9px;
            }
            
            #sidebarToggleTop {
                left: 8px;
            }
            
            .user-info {
                margin-left: 45px;
                margin-right: 45px;
            }
            
            .user-info h5 {
                font-size: 11px;
                max-width: 150px;
            }
            
            .futuristic-section-header {
                padding: 12px 14px;
                font-size: 12px;
            }
            
            .futuristic-item span {
                font-size: 12px;
            }
            
            #content {
                padding: 10px;
            }
        }
        
        /* ANIMAÇÃO */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-15px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* PREVENT BODY SCROLL WHEN SIDEBAR OPEN */
        body.sidebar-open {
            overflow: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
        }
        
        /* Transition for all animated elements */
        #sidebar-wrapper,
        #content-wrapper,
        .sidebar-overlay,
        .futuristic-item,
        .futuristic-collapse-item {
            transition: all var(--transition-speed) ease;
        }
        
        /* Remove padding-top from body when sidebar is open */
        body.mobile-sidebar-open {
            padding-top: 0;
        }
    </style>
</head>
<body>
    <!-- Overlay para mobile -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>
    
    <!-- Page Wrapper -->
    <div id="wrapper">
        <!-- Topbar Fixa -->
        <nav id="topbar">
            <!-- Toggle Button - FIXO NO TOPO ESQUERDO -->
            <button id="sidebarToggleTop" class="btn">
                <i class="fas fa-bars"></i>
            </button>
            
            <!-- User Info Centralizado -->
            <div class="user-info">
                <h5>Painel Administrativo</h5>
                <div class="user-name"><?php echo $IIIIIIIlI11l; ?></div>
            </div>
            
            <!-- Logout Button - FIXO NO TOPO DIREITO -->
            <a class="logout-btn" href="logout.php" title="Sair">
                <i class="fas fa-sign-out-alt"></i>
            </a>
        </nav>
        
        <!-- Sidebar Futurista -->
        <div id="sidebar-wrapper" class="mobile-closed">
            <button class="sidebar-close-btn" id="sidebarCloseBtn">
                <i class="fas fa-times"></i>
            </button>
            
            <div class="sidebar">
                <!-- Sidebar Brand -->
                <div class="sidebar-brand">
                    <img class="img-profile" src="<?php echo $IIIIIIIlI111 ?? 'img/logo.png'; ?>" alt="Logo">
                </div>
                
                <!-- Container com scroll -->
                <div class="sidebar-container">
                    <!-- Seção 1: Gerenciamento -->
                    <div class="futuristic-section" style="--item-index: 0">
                        <div class="futuristic-section-header">
                            <span class="material-icons-round">dashboard</span>
                            <span>Menu Principal</span>
                        </div>
                        <div class="futuristic-section-content">
                            <li class="nav-item">
                                <a class="futuristic-item <?php echo basename($_SERVER['PHP_SELF']) == 'dashboard.php' ? 'active' : ''; ?>" href="dashboard.php">
                                    <span class="material-icons-round">home</span>
                                    <span>DASHBOARD</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="futuristic-item <?php echo basename($_SERVER['PHP_SELF']) == 'users.php' ? 'active' : ''; ?>" href="users.php">
                                    <span class="material-icons-round">people</span>
                                    <span>CLIENTES</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a class="futuristic-item <?php echo basename($_SERVER['PHP_SELF']) == 'create_link.php' ? 'active' : ''; ?>" href="create_link.php">
                                    <span class="material-icons-round">link</span>
                                    <span>LINKS DE PAGAMENTO</span>
                                </a>
                            </li>
                            
                            <li class="nav-item">
                                <a class="futuristic-item <?php echo basename($_SERVER['PHP_SELF']) == 'link_qrcode.php' ? 'active' : ''; ?>" href="link_qrcode.php">
                                    <span class="material-icons-round">qr_code_2</span>
                                    <span>GERAR QR CODE DA PAGINA DE PAGAMENTO</span>
                                </a>
                            </li>
                            
                            <li class="nav-item">
                                <a class="futuristic-item <?php echo basename($_SERVER['PHP_SELF']) == 'logo.php' ? 'active' : ''; ?>" href="logo.php">
                                    <span class="material-icons-round">camera</span>
                                    <span>Logo do Painel</span>
                                </a>
                            </li>
                        </div>
                    </div>
                    
                    <!-- Seção 2: Comunicação -->
                    <div class="futuristic-section" style="--item-index: 1">
                        <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 <?php echo basename($_SERVER['PHP_SELF']) == 'note.php' ? 'active' : ''; ?>" href="note.php">
                                    <span class="material-icons-round">announcement</span>
                                    <span>Notificação Universal</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="futuristic-item <?php echo basename($_SERVER['PHP_SELF']) == 'note_individual.php' ? 'active' : ''; ?>" href="note_individual.php">
                                    <span class="material-icons-round">campaign</span>
                                    <span>Notificação Individual</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="futuristic-item <?php echo basename($_SERVER['PHP_SELF']) == 'qrcode.php' ? 'active' : ''; ?>" href="qrcode.php">
                                    <span class="material-icons-round">qr_code_2</span>
                                    <span>QR Code e Texto</span>
                                </a>
                            </li>
                            
                        </div>
                    </div>
                    
                    <!-- Seção 3: Configurações -->
<div class="futuristic-section" style="--item-index: 2">
    <div class="futuristic-section-header">
        <span class="material-icons-round">tune</span>
        <span>Configurações</span>
    </div>
    <div class="futuristic-section-content">
        <!-- Item com collapse -->
       
        
        <!-- ITEM PÚBLICIDADES COMO ITEM PRINCIPAL -->
        <li class="nav-item">
            <a class="futuristic-item <?php echo basename($_SERVER['PHP_SELF']) == 'ads.php' ? 'active' : ''; ?>" href="ads.php">
                <span class="material-icons-round">panorama</span>
                <span>Banners</span>
            </a>
        </li>
        
        <li class="nav-item">
            <a class="futuristic-item <?php echo basename($_SERVER['PHP_SELF']) == 'Sport.php' ? 'active' : ''; ?>" href="Sport.php">
                <span class="material-icons-round">sports_soccer</span>
                <span>Esportes</span>
            </a>
        </li>
        
        <li class="nav-item">
            <a class="futuristic-item <?php echo basename($_SERVER['PHP_SELF']) == 'Image.php' ? 'active' : ''; ?>" href="Image.php">
                <span class="material-icons-round">collections</span>
                <span>Imagens de fundo do App</span>
            </a>
        </li>
        
        <li class="nav-item">
            <a class="futuristic-item <?php echo basename($_SERVER['PHP_SELF']) == 'logo.php' ? 'active' : ''; ?>" href="logo.php">
                <span class="material-icons-round">auto_awesome</span>
                <span>Alterar logo do App</span>
            </a>
        </li>
        
        <li class="nav-item">
            <a class="futuristic-item <?php echo basename($_SERVER['PHP_SELF']) == 'layouts.php' ? 'active' : ''; ?>" href="layouts.php">
                <span class="material-icons-round">palette</span>
                <span>Temas do App</span>
            </a>
        </li>
    </div>
</div>
                    
                    <!-- Seção 4: Sistema -->
                    <div class="futuristic-section" style="--item-index: 3">
                        <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 <?php echo basename($_SERVER['PHP_SELF']) == 'update.php' ? 'active' : ''; ?>" 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 <?php echo basename($_SERVER['PHP_SELF']) == 'profile.php' ? 'active' : ''; ?>" href="profile.php">
                                    <span class="material-icons-round">person</span>
                                    <span>Perfil</span>
                                </a>
                            </li>
                        </div>
                    </div>
                    
                   <!-- Seção 5: Sair e Contato -->
                    <div class="futuristic-section" style="--item-index: 4">
                        <div class="futuristic-section-content">
                            <li class="nav-item">
                                <a class="futuristic-item" href="logout.php">
                                    <span class="material-icons-round">logout</span>
                                    <span>Sair</span>
                                </a>
                            </li>
                            
                            <!-- Link do Telegram estilizado -->
                            <li class="nav-item">
                                <a class="futuristic-item telegram-sidebar-link" href="https://t.me/eonbry" target="_blank">
                                    <span class="material-icons-round">telegram</span>
                                    <span>Suporte Telegram</span>
                                    <span class="telegram-badge">
                                        <i class="fas fa-external-link-alt"></i>
                                    </span>
                                </a>
                            </li>
                            
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Sidebar -->
        
        <!-- Content Wrapper -->
        <div id="content-wrapper">
            <!-- Main Content -->
            <div id="content">
                <!-- Page content will be loaded here -->

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Elementos principais
    const sidebarWrapper = document.getElementById('sidebar-wrapper');
    const sidebarToggle = document.getElementById('sidebarToggleTop');
    const sidebarCloseBtn = document.getElementById('sidebarCloseBtn');
    const sidebarOverlay = document.getElementById('sidebarOverlay');
    const body = document.body;
    
    // Verificar se está em dispositivo móvel
    const isMobile = window.innerWidth <= 992;
    
    // Função para abrir o sidebar
    function openSidebar() {
        sidebarWrapper.classList.remove('mobile-closed');
        sidebarWrapper.classList.add('mobile-open');
        sidebarOverlay.classList.add('active');
        body.classList.add('sidebar-open', 'mobile-sidebar-open');
        
        // Bloquear scroll do body
        document.documentElement.style.overflow = 'hidden';
        body.style.overflow = 'hidden';
    }
    
    // Função para fechar o sidebar
    function closeSidebar() {
        sidebarWrapper.classList.remove('mobile-open');
        sidebarWrapper.classList.add('mobile-closed');
        sidebarOverlay.classList.remove('active');
        body.classList.remove('sidebar-open', 'mobile-sidebar-open');
        
        // Restaurar scroll do body
        document.documentElement.style.overflow = '';
        body.style.overflow = '';
    }
    
    // Configurar eventos
    if (isMobile) {
        // Inicializar sidebar fechado
        closeSidebar();
        
        // Evento para abrir sidebar
        sidebarToggle.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            openSidebar();
        });
        
        // Evento para fechar sidebar
        sidebarCloseBtn.addEventListener('click', function(e) {
            e.preventDefault();
            closeSidebar();
        });
        
        sidebarOverlay.addEventListener('click', closeSidebar);
        
        // Fechar sidebar ao clicar em um link
        document.querySelectorAll('.futuristic-item, .futuristic-collapse-item').forEach(link => {
            link.addEventListener('click', function(e) {
                if (!this.classList.contains('futuristic-collapse-toggle')) {
                    setTimeout(closeSidebar, 300);
                }
            });
        });
        
        // Prevenir fechamento ao clicar dentro do sidebar
        sidebarWrapper.addEventListener('click', function(e) {
            e.stopPropagation();
        });
        
    } else {
        // Para desktop: sistema normal
        sidebarWrapper.classList.remove('mobile-closed', 'mobile-open');
        
        sidebarToggle.addEventListener('click', function() {
            const isCollapsed = sidebarWrapper.classList.toggle('collapsed');
            localStorage.setItem('sidebarCollapsed', isCollapsed);
        });
        
        // Restore sidebar state from localStorage
        const savedState = localStorage.getItem('sidebarCollapsed');
        if (savedState === 'true') {
            sidebarWrapper.classList.add('collapsed');
        }
        
        // Esconder botão fechar no desktop
        sidebarCloseBtn.style.display = 'none';
        sidebarOverlay.style.display = 'none';
    }
    
    // Configurar submenus collapse
    document.querySelectorAll('.futuristic-collapse-toggle').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const target = this.getAttribute('data-target');
            const collapseElement = document.querySelector(target);
            
            if (collapseElement) {
                // Alternar a classe 'show'
                const isShowing = collapseElement.classList.contains('show');
                
                // Fechar todos os outros collapses
                document.querySelectorAll('.collapse.show').forEach(el => {
                    if (el !== collapseElement) {
                        el.classList.remove('show');
                    }
                });
                
                // Alternar o collapse atual
                if (isShowing) {
                    collapseElement.classList.remove('show');
                } else {
                    collapseElement.classList.add('show');
                }
                
                // Atualizar atributo aria-expanded
                this.setAttribute('aria-expanded', !isShowing);
            }
        });
    });
    
    // Fechar sidebar ao redimensionar para desktop
    function handleResize() {
        const isNowMobile = window.innerWidth <= 992;
        
        if (!isNowMobile && isMobile) {
            // Se mudou para desktop
            closeSidebar();
            sidebarWrapper.classList.remove('mobile-closed', 'mobile-open');
            sidebarCloseBtn.style.display = 'none';
            sidebarOverlay.style.display = 'none';
        }
    }
    
    window.addEventListener('resize', handleResize);
    
    // Fechar sidebar com ESC key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && isMobile && sidebarWrapper.classList.contains('mobile-open')) {
            closeSidebar();
        }
    });
    
    // Efeitos de hover com delay
    const items = document.querySelectorAll('.futuristic-item, .futuristic-collapse-item');
    items.forEach((item, index) => {
        item.style.transitionDelay = `${index * 0.03}s`;
    });
});
</script>


<style>
/* Estilo especial para o link do Telegram na sidebar */
.telegram-sidebar-link {
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.1), rgba(44, 117, 185, 0.1)) !important;
    border: 1px solid rgba(0, 136, 204, 0.2) !important;
    position: relative;
}

.telegram-sidebar-link .material-icons-round {
    background: linear-gradient(135deg, #0088cc, #2c75b9) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.telegram-sidebar-link:hover {
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.2), rgba(44, 117, 185, 0.2)) !important;
    border-color: rgba(0, 136, 204, 0.4) !important;
    transform: translateX(8px) !important;
}

.telegram-sidebar-link .telegram-badge {
    position: absolute;
    right: 16px;
    background: linear-gradient(135deg, #0088cc, #2c75b9);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.3s ease;
}

.telegram-sidebar-link:hover .telegram-badge {
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(0, 136, 204, 0.5);
}

/* Indicador de link externo */
.telegram-sidebar-link::after {
    content: '↗';
    position: absolute;
    right: 45px;
    opacity: 0.5;
    font-size: 12px;
    transition: all 0.3s ease;
}

.telegram-sidebar-link:hover::after {
    opacity: 1;
    right: 44px;
}

/* Para mobile */
@media (max-width: 992px) {
    .telegram-sidebar-link {
        margin: 8px 6px;
    }
    
    .telegram-sidebar-link .telegram-badge {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
    
    .telegram-sidebar-link::after {
        right: 40px;
        font-size: 11px;
    }
}
</style>
