<?php
$static_url = dirname($_SERVER['SCRIPT_NAME']) . '/assets/';
$current_page = basename($_SERVER['PHP_SELF']);
$accordion_active = ($current_page == 'themes.php') ? 'show' : '';
$username = isset($_SESSION['username']) ? $_SESSION['username'] : "Guest";
$isAdmin = isset($_SESSION['admin']) && $_SESSION['admin'] ? "Admin" : (isset($_SESSION['dealer']) && $_SESSION['dealer'] ? "Dealer" : "User");
$balance = isset($_SESSION['balance']) ? $_SESSION['balance'] : 0;
?>

<style>
/* ════════════════════════════════════════════
   SIDEBAR — dark fixed
════════════════════════════════════════════ */
.app-sidebar {
    background: linear-gradient(180deg, #0d1117 0%, #161b22 50%, #0d1117 100%) !important;
    border-right: 1px solid rgba(99,179,237,0.08) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.4) !important;
}
#kt_app_sidebar_header {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    padding: 28px 24px !important;
}
#kt_app_sidebar_header img {
    filter: drop-shadow(0 0 12px rgba(99,179,237,0.35));
    transition: filter 0.3s ease;
}
#kt_app_sidebar_header img:hover {
    filter: drop-shadow(0 0 20px rgba(99,179,237,0.6));
}
.menu-heading {
    color: rgba(148,163,184,0.6) !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    font-weight: 700 !important;
}
.menu-link {
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin: 1px 0 !important;
    transition: all 0.2s ease !important;
    position: relative;
    overflow: hidden;
}
.menu-link::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background 0.2s ease;
}
.menu-link:hover {
    background: rgba(99,179,237,0.08) !important;
    transform: translateX(2px);
}
.menu-link:hover::before {
    background: rgba(99,179,237,0.4);
}
.menu-link.active {
    background: linear-gradient(135deg, rgba(99,179,237,0.15) 0%, rgba(139,92,246,0.1) 100%) !important;
    box-shadow: 0 2px 12px rgba(99,179,237,0.1) !important;
}
.menu-link.active::before {
    background: linear-gradient(180deg, #63b3ed, #8b5cf6) !important;
}
.menu-link.active .menu-title {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
}
.menu-link.active .menu-icon i {
    filter: drop-shadow(0 0 6px currentColor);
}
.menu-title {
    color: rgba(203,213,225,0.75) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: color 0.2s ease;
}
.menu-link:hover .menu-title {
    color: #e2e8f0 !important;
}
.menu-icon {
    width: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-arrow {
    color: rgba(148,163,184,0.4) !important;
    transition: transform 0.3s ease, color 0.2s ease !important;
}
.menu-accordion.here > .menu-link .menu-arrow,
.menu-accordion.show > .menu-link .menu-arrow {
    color: #63b3ed !important;
}
.menu-sub-accordion {
    background: rgba(0,0,0,0.15) !important;
    border-radius: 10px !important;
    margin: 4px 0 4px 8px !important;
    padding: 4px 0 !important;
    border-left: 1px solid rgba(99,179,237,0.12) !important;
}
.bullet-dot {
    background: rgba(148,163,184,0.3) !important;
    transition: background 0.2s ease;
}
.menu-link.active .bullet-dot,
.menu-link:hover .bullet-dot {
    background: #63b3ed !important;
    box-shadow: 0 0 6px rgba(99,179,237,0.6);
}
.separator {
    border-color: rgba(255,255,255,0.06) !important;
}
#kt_app_sidebar_footer {
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.02) !important;
    padding: 16px 20px !important;
}
#kt_app_sidebar_menu_wrapper::-webkit-scrollbar { width: 4px; }
#kt_app_sidebar_menu_wrapper::-webkit-scrollbar-track { background: transparent; }
#kt_app_sidebar_menu_wrapper::-webkit-scrollbar-thumb { background: rgba(99,179,237,0.2); border-radius: 4px; }
#kt_app_sidebar_menu_wrapper::-webkit-scrollbar-thumb:hover { background: rgba(99,179,237,0.4); }

/* ════════════════════════════════════════════
   HEADER — dark fixed
════════════════════════════════════════════ */
.app-header {
    background: rgba(13,17,23,0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(99,179,237,0.08) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
    z-index: 1000 !important;
    position: relative !important;
}
#kt_app_sidebar_toggle {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
    color: rgba(148,163,184,0.8) !important;
    transition: all 0.2s ease !important;
}
#kt_app_sidebar_toggle:hover {
    background: rgba(99,179,237,0.1) !important;
    border-color: rgba(99,179,237,0.3) !important;
    color: #63b3ed !important;
}
.user-trigger {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 6px 12px 6px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.user-trigger:hover {
    background: rgba(99,179,237,0.08);
    border-color: rgba(99,179,237,0.25);
}
.user-trigger .username    { color: #e2e8f0; font-size: 13px; font-weight: 700; }
.user-trigger .online-text { color: rgba(148,163,184,0.6); font-size: 11px; }
.user-trigger .chevron     { color: rgba(148,163,184,0.4); font-size: 10px; }
.symbol-circle img {
    border: 2px solid rgba(99,179,237,0.3) !important;
    border-radius: 50% !important;
    transition: border-color 0.2s ease;
}
.user-trigger:hover .symbol-circle img {
    border-color: rgba(99,179,237,0.6) !important;
}
.bg-success.rounded-circle.h-8px {
    background: #34d399 !important;
    box-shadow: 0 0 6px rgba(52,211,153,0.6) !important;
}
.menu-sub-dropdown {
    background: #161b22 !important;
    border: 1px solid rgba(99,179,237,0.12) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
    border-radius: 14px !important;
    overflow: hidden;
    z-index: 9999 !important;
    position: absolute !important;
    width: 220px !important;
}
[data-kt-element="theme-mode-menu"].menu-sub-dropdown {
    width: 150px !important;
}
.menu-sub-dropdown .menu-link {
    border-radius: 8px !important;
    margin: 1px 6px !important;
    padding: 9px 12px !important;
    transition: all 0.2s ease !important;
    color: rgba(203,213,225,0.8) !important;
}
.menu-sub-dropdown .menu-link:hover {
    background: rgba(99,179,237,0.08) !important;
    color: #e2e8f0 !important;
}
.menu-sub-dropdown .separator {
    border-color: rgba(255,255,255,0.06) !important;
    margin: 6px 12px !important;
}
.dd-user-info {
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    margin: 0 4px;
}
.badge-light-success {
    background: rgba(52,211,153,0.12) !important;
    color: #34d399 !important;
    border: 1px solid rgba(52,211,153,0.2) !important;
    border-radius: 6px !important;
    font-size: 10px !important;
}
</style>

<!-- ════════════════════════════════════════════
     SIDEBAR
════════════════════════════════════════════ -->
<div id="kt_app_sidebar" class="app-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="250px"
    data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_app_sidebar_toggle">

    <div class="d-none d-lg-flex flex-center px-6 pt-10 pb-10" id="kt_app_sidebar_header">
        <a href="dashboard.php">
            <img alt="Logo" src="<?php echo $static_url; ?>media/logos/logo.png" class="h-50px" />
        </a>
    </div>

    <div class="flex-grow-1">
        <div id="kt_app_sidebar_menu_wrapper" class="hover-scroll-y" data-kt-scroll="true" data-kt-scroll-height="auto"
            data-kt-scroll-dependencies="#kt_app_sidebar_header, #kt_app_sidebar_footer" data-kt-scroll-offset="20px">
            <div class="app-sidebar-navs-default px-4 mb-10">
                <div id="#kt_app_sidebar_menu" data-kt-menu="true" data-kt-menu-expand="false"
                    class="menu menu-column menu-rounded menu-sub-indention">

                    <div class="menu-item pb-0 pt-4">
                        <div class="menu-content">
                            <span class="menu-heading fw-bold text-uppercase">
                                <i class="fa-solid fa-chart-line me-2" style="color:#63b3ed;"></i>Geral
                            </span>
                        </div>
                    </div>
                    <div class="separator mb-3 mx-2"></div>

                    <!-- DASHBOARD -->
                    <div class="menu-item">
                        <a class="menu-link <?php echo ($current_page=='dashboard.php')?'active':''; ?>" href="dashboard.php">
                            <span class="menu-icon"><i class="fa-solid fa-chart-pie fs-5" style="color:#63b3ed;"></i></span>
                            <span class="menu-title">Dashboard</span>
                        </a>
                    </div>

                    <div class="separator mb-3 mx-2 mt-2"></div>

                    <div class="menu-item pb-0 pt-2">
                        <div class="menu-content">
                            <span class="menu-heading fw-bold text-uppercase">
                                <i class="fa-solid fa-sliders me-2" style="color:#63b3ed;"></i>Gestão
                            </span>
                        </div>
                    </div>
                    <div class="separator mb-3 mx-2"></div>

                    <div class="menu-item">
                        <a class="menu-link <?php echo ($current_page=='dns.php')?'active':''; ?>" href="dns.php">
                            <span class="menu-icon"><i class="fa-solid fa-globe fs-5" style="color:#38bdf8;"></i></span>
                            <span class="menu-title">Adicionar DNS</span>
                        </a>
                    </div>
                    <div class="menu-item">
                        <a class="menu-link <?php echo ($current_page=='mac.php')?'active':''; ?>" href="mac.php">
                            <span class="menu-icon"><i class="fa-solid fa-users fs-5" style="color:#34d399;"></i></span>
                            <span class="menu-title">Usuários Ativos</span>
                        </a>
                    </div>
                    <div class="menu-item">
                        <a class="menu-link <?php echo ($current_page=='teste.php')?'active':''; ?>" href="teste.php">
                            <span class="menu-icon"><i class="fa-solid fa-robot fs-5" style="color:#818cf8;"></i></span>
                            <span class="menu-title">Chatbots</span>
                        </a>
                    </div>
                    <div class="menu-item">
                        <a class="menu-link <?php echo ($current_page=='note.php')?'active':''; ?>" href="note.php">
                            <span class="menu-icon"><i class="fa-solid fa-bullhorn fs-5" style="color:#fbbf24;"></i></span>
                            <span class="menu-title">Mensagem Servidor</span>
                        </a>
                    </div>

                    <div class="separator mb-3 mx-2 mt-2"></div>

                    <div class="menu-item pb-0 pt-2">
                        <div class="menu-content">
                            <span class="menu-heading fw-bold text-uppercase">
                                <i class="fa-solid fa-palette me-2" style="color:#f472b6;"></i>Personalização
                            </span>
                        </div>
                    </div>
                    <div class="separator mb-3 mx-2"></div>

                    <div data-kt-menu-trigger="click"
                         class="menu-item <?php echo $accordion_active ? 'here '.$accordion_active : ''; ?> menu-accordion">
                        <span class="menu-link">
                            <span class="menu-icon"><i class="fa-solid fa-palette fs-5" style="color:#f472b6;"></i></span>
                            <span class="menu-title">Visual</span>
                            <span class="menu-arrow"></span>
                        </span>
                        <div class="menu-sub menu-sub-accordion">
                            <div class="menu-item">
                                <a class="menu-link <?php echo ($current_page=='logo.php')?'active':''; ?>" href="logo.php">
                                    <span class="menu-bullet"><span class="bullet bullet-dot"></span></span>
                                    <span class="menu-icon"><i class="fa-regular fa-image fs-6" style="color:#fb923c;"></i></span>
                                    <span class="menu-title">Sua Logotipo</span>
                                </a>
                            </div>
                            <div class="menu-item">
                                <a class="menu-link <?php echo ($current_page=='bg.php')?'active':''; ?>" href="bg.php">
                                    <span class="menu-bullet"><span class="bullet bullet-dot"></span></span>
                                    <span class="menu-icon"><i class="fa-solid fa-image fs-6" style="color:#22d3ee;"></i></span>
                                    <span class="menu-title">Background App</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="menu-item">
                        <a class="menu-link <?php echo ($current_page=='qrcode.php')?'active':''; ?>" href="qrcode.php">
                            <span class="menu-icon"><i class="fa-solid fa-qrcode fs-5" style="color:#34d399;"></i></span>
                            <span class="menu-title">Enviar QR Code</span>
                        </a>
                    </div>

                    <div class="separator mb-3 mx-2 mt-2"></div>

                    <div class="menu-item pb-0 pt-2">
                        <div class="menu-content">
                            <span class="menu-heading fw-bold text-uppercase">
                                <i class="fa-solid fa-shield-halved me-2" style="color:#f87171;"></i>Sistema
                            </span>
                        </div>
                    </div>
                    <div class="separator mb-3 mx-2"></div>

                    <div class="menu-item">
                        <a class="menu-link <?php echo ($current_page=='manutencao.php')?'active':''; ?>" href="manutencao.php">
                            <span class="menu-icon"><i class="fa-solid fa-screwdriver-wrench fs-5" style="color:#f87171;"></i></span>
                            <span class="menu-title">Manutenção Servidor</span>
                        </a>
                    </div>
                    <div class="menu-item">
                        <a class="menu-link <?php echo ($current_page=='alerta_vencimento.php')?'active':''; ?>" href="alerta_vencimento.php">
                            <span class="menu-icon"><i class="fa-solid fa-bell fs-5" style="color:#fbbf24;"></i></span>
                            <span class="menu-title">Alerta Vencimento</span>
                        </a>
                    </div>
                    <div class="menu-item">
                        <a class="menu-link <?php echo ($current_page=='users.php')?'active':''; ?>" href="users.php">
                            <span class="menu-icon"><i class="fa-solid fa-circle-user fs-5" style="color:#a78bfa;"></i></span>
                            <span class="menu-title">Meu Perfil</span>
                        </a>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="d-flex align-items-center px-5 pb-5" id="kt_app_sidebar_footer">
    <span class="d-flex align-items-center gap-2" style="color:rgba(148,163,184,0.6);font-size:12px;">
        <i class="fa-solid fa-circle-play" style="color:#60a5fa;font-size:14px;"></i>
        PlayPlus
    </span>
</div>

</div>

<!-- ════════════════════════════════════════════
     HEADER
════════════════════════════════════════════ -->
<div id="kt_app_header" class="app-header" data-kt-sticky="true" data-kt-sticky-activate="{default: true, lg: true}"
    data-kt-sticky-name="app-header-sticky" data-kt-sticky-offset="{default: '200px', lg: '300px'}">
    <div class="app-container container-fluid d-flex flex-stack" id="kt_app_header_container">

        <div class="d-flex d-lg-none align-items-center me-lg-20 gap-1 gap-lg-2">
            <div class="btn btn-icon w-35px h-35px d-flex d-lg-none" id="kt_app_sidebar_toggle">
                <i class="fa-solid fa-bars fs-4"></i>
            </div>
            <a href="dashboard.php">
                <img alt="Logo" src="<?php echo $static_url; ?>media/logos/logo.png" class="h-30px" />
            </a>
        </div>

        <div class="d-flex flex-stack flex-lg-row-fluid" id="kt_app_header_wrapper">
            <div class="app-page-title d-flex flex-column gap-1 me-3 mb-5 mb-lg-0" data-kt-swapper="true"
                data-kt-swapper-mode="{default: 'prepend', lg: 'prepend'}"
                data-kt-swapper-parent="{default: '#kt_app_content_container', lg: '#kt_app_header_wrapper'}">
            </div>

            <div class="app-navbar flex-shrink-0 gap-2 gap-lg-4">
                <div class="app-navbar-item ms-lg-5" id="kt_header_user_menu_toggle">

                    <div class="user-trigger d-flex align-items-center gap-3"
                        data-kt-menu-trigger="click"
                        data-kt-menu-attach="parent"
                        data-kt-menu-placement="bottom-end">
                        <div class="text-end d-none d-sm-flex flex-column justify-content-center">
                            <span class="online-text">
                                <i class="fa-solid fa-circle-dot me-1" style="color:#34d399;font-size:8px;"></i>Online
                            </span>
                            <span class="username"><?php echo htmlspecialchars($username); ?></span>
                        </div>
                        <div class="cursor-pointer symbol symbol-circle symbol-35px symbol-md-40px position-relative">
                            <img src="<?php echo $static_url; ?>media/logos/logo.png" alt="user" />
                            <div class="position-absolute translate-middle bottom-0 mb-1 start-100 ms-n1 bg-success rounded-circle h-8px w-8px"></div>
                        </div>
                        <i class="fa-solid fa-chevron-down chevron"></i>
                    </div>

                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded fw-semibold py-3 fs-6"
                        data-kt-menu="true">

                        <div class="menu-item px-2 mb-1">
                            <div class="dd-user-info d-flex align-items-center px-2 py-2 gap-2">
                                <div class="symbol symbol-35px flex-shrink-0">
                                    <img alt="Logo" src="<?php echo $static_url; ?>media/logos/logo.png"
                                         style="border-radius:8px;border:1px solid rgba(99,179,237,0.2);width:35px;height:35px;object-fit:cover;" />
                                </div>
                                <div class="d-flex flex-column overflow-hidden">
                                    <span class="fw-bold fs-7 text-truncate" style="color:#e2e8f0;max-width:130px;">
                                        <?php echo htmlspecialchars($username); ?>
                                    </span>
                                    <span class="badge badge-light-success fw-bold fs-9 px-2 py-1 mt-1 align-self-start">
                                        <i class="fa-solid fa-shield-halved me-1"></i><?php echo htmlspecialchars($isAdmin); ?>
                                    </span>
                                    <?php if ($balance > 0): ?>
                                    <span class="fw-semibold fs-9 mt-1" style="color:rgba(148,163,184,0.5);">
                                        <i class="fa-solid fa-coins me-1" style="color:#fbbf24;"></i><?php echo htmlspecialchars($balance); ?>
                                    </span>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>

                        <div class="separator my-1"></div>

                        <div class="menu-item px-2">
                            <a href="dashboard.php" class="menu-link px-3">
                                <span class="menu-icon">
                                    <i class="fa-solid fa-chart-pie fs-5" style="color:#63b3ed;"></i>
                                </span>
                                <span class="menu-title fw-bold">Dashboard</span>
                            </a>
                        </div>

                        <div class="menu-item px-2">
                            <a href="logout.php" class="menu-link px-3">
                                <span class="menu-icon">
                                    <i class="fa-solid fa-right-from-bracket fs-5" style="color:#f87171;"></i>
                                </span>
                                <span class="menu-title fw-bold" style="color:#f87171;">Sair</span>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>