        </div>
    </div>

    <!-- JavaScript -->
    <script>
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('mainContent');
            const sidebarToggle = document.getElementById('sidebarToggle');
            
            sidebar.classList.toggle('hidden');
            mainContent.classList.toggle('expanded');
            
            // Update toggle button icon
            const icon = sidebarToggle.querySelector('i');
            if (sidebar.classList.contains('hidden')) {
                icon.className = 'fas fa-bars';
            } else {
                icon.className = 'fas fa-times';
            }
        }

        // Close sidebar when clicking outside on mobile
        document.addEventListener('click', function(event) {
            const sidebar = document.getElementById('sidebar');
            const sidebarToggle = document.getElementById('sidebarToggle');
            const mainContent = document.getElementById('mainContent');
            
            if (window.innerWidth <= 1024) {
                if (!sidebar.contains(event.target) && !sidebarToggle.contains(event.target)) {
                    sidebar.classList.add('hidden');
                    mainContent.classList.add('expanded');
                    sidebarToggle.querySelector('i').className = 'fas fa-bars';
                }
            }
        });

        // Handle window resize
        window.addEventListener('resize', function() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('mainContent');
            
            if (window.innerWidth > 1024) {
                sidebar.classList.remove('hidden');
                mainContent.classList.remove('expanded');
            }
        });

        // Toggle dropdown function
        function toggleDropdown(dropdownId) {
            const dropdown = document.getElementById(dropdownId + '-dropdown');
            const chevron = document.getElementById(dropdownId + '-chevron');
            
            if (dropdown) {
                dropdown.classList.toggle('open');
                dropdown.classList.toggle('hidden');
                if (chevron) {
                    chevron.classList.toggle('rotated');
                }
            }
        }
        
        // Auto-expand dropdown if current page is in it
        function autoExpandActiveDropdown() {
            const currentPage = new URLSearchParams(window.location.search).get('page') || 'dashboard';
            const dropdowns = {
                'orders-analytics': ['orders', 'analytics'],
                'financial': ['balance_history', 'deposits'],
                'pricing-payment': ['pricing', 'payment_config', 'minimum_topup_config', 'paystack_charge_config'],
                'api-integration': ['api_config', 'data_integration', 'api_error_logs', 'api_keys'],
                'notifications': ['notifications', 'banner_notifications'],
                'system': ['delete_old_orders', 'user_activity'],
                'user-management': ['account_management', 'password_management', 'profile']
            };
            
            for (const [dropdownId, pages] of Object.entries(dropdowns)) {
                if (pages.includes(currentPage)) {
                    const dropdown = document.getElementById(dropdownId + '-dropdown');
                    const chevron = document.getElementById(dropdownId + '-chevron');
                    if (dropdown) {
                        dropdown.classList.add('open');
                        dropdown.classList.remove('hidden');
                        if (chevron) {
                            chevron.classList.add('rotated');
                        }
                    }
                }
            }
        }
        
        // Set active navigation item
        document.addEventListener('DOMContentLoaded', function() {
            const currentPage = new URLSearchParams(window.location.search).get('page') || 'dashboard';
            const navItems = document.querySelectorAll('.sidebar-nav-item');
            
            navItems.forEach(item => {
                const href = item.getAttribute('href');
                if (href && (href.includes('page=' + currentPage) || (currentPage === 'dashboard' && href === 'index.php'))) {
                    item.classList.add('active');
                    if (item.classList.contains('text-gray-300') || item.classList.contains('text-gray-400')) {
                        item.classList.remove('text-gray-300', 'text-gray-400');
                        item.classList.add('text-blue-400');
                    }
                }
            });
            
            // Auto-expand dropdown containing active page
            autoExpandActiveDropdown();
        });

        // Auto-refresh time
        setInterval(function() {
            const timeElement = document.querySelector('.fa-clock').parentElement;
            timeElement.innerHTML = '<i class="fas fa-clock mr-1"></i>' + new Date().toLocaleTimeString('en-US', {hour12: false});
        }, 1000);
    </script>
</body>
</html>


