/**
 * Admin Sidebar Functionality
 * 
 * This script handles the sidebar toggle functionality and persistence
 */

document.addEventListener('DOMContentLoaded', function() {
    // Get sidebar elements
    const sidebarToggler = document.getElementById('sidebarToggler');
    const topbarSidebarToggler = document.getElementById('topbarSidebarToggler');
    const sidebar = document.getElementById('sidebar');
    const mainContent = document.getElementById('mainContent');
    
    // Load sidebar state from localStorage
    const sidebarCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
    
    // Apply saved state
    if (sidebarCollapsed) {
        sidebar.classList.add('collapsed');
        mainContent.classList.add('expanded');
    } else {
        sidebar.classList.remove('collapsed');
        mainContent.classList.remove('expanded');
    }
    
    // Function to toggle sidebar
    const toggleSidebar = function(e) {
        if (e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        // Toggle classes
        sidebar.classList.toggle('collapsed');
        mainContent.classList.toggle('expanded');
        
        // Save state to localStorage
        localStorage.setItem('sidebarCollapsed', sidebar.classList.contains('collapsed'));
    };
    
    // Toggle sidebar when sidebar toggler is clicked
    if (sidebarToggler) {
        sidebarToggler.addEventListener('click', toggleSidebar);
    } else {
        console.error('Sidebar toggler element not found');
    }
    
    // Toggle sidebar when topbar toggler is clicked
    if (topbarSidebarToggler) {
        topbarSidebarToggler.addEventListener('click', toggleSidebar);
    }
    
    // Critical fix for sidebar submenu toggle
    const dropdownToggles = document.querySelectorAll('.sidebar-dropdown .nav-link[data-bs-toggle="collapse"]');
    
    dropdownToggles.forEach(function(toggle) {
        // Remove the data-bs-toggle attribute to prevent Bootstrap's default behavior
        toggle.removeAttribute('data-bs-toggle');
        
        const submenuId = toggle.getAttribute('href');
        if (submenuId && submenuId.startsWith('#')) {
            const submenu = document.querySelector(submenuId);
            
            if (submenu) {
                // Initialize collapse manually
                const bsCollapse = new bootstrap.Collapse(submenu, {
                    toggle: false
                });
                
                // Add click handler for toggle
                toggle.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // Check if sidebar is collapsed - prevent toggle action and let CSS hover handle it
                    if (sidebar.classList.contains('collapsed')) {
                        return;
                    }
                    
                    // Simple toggle for expanded sidebar
                    if (submenu.classList.contains('show')) {
                        bsCollapse.hide();
                        toggle.setAttribute('aria-expanded', 'false');
                    } else {
                        bsCollapse.show();
                        toggle.setAttribute('aria-expanded', 'true');
                    }
                    
                    // Update chevron icon
                    const chevron = toggle.querySelector('.submenu-icon');
                    if (chevron) {
                        if (submenu.classList.contains('show')) {
                            chevron.style.transform = 'rotate(180deg)';
                        } else {
                            chevron.style.transform = 'rotate(0deg)';
                        }
                    }
                });
                
                // Set initial state of chevron
                const isExpanded = submenu.classList.contains('show');
                toggle.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
                
                const chevron = toggle.querySelector('.submenu-icon');
                if (chevron) {
                    chevron.style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0deg)';
                }
                
                // Auto-expand if a submenu item is active
                const hasActiveChild = submenu.querySelector('.nav-link.active');
                if (hasActiveChild && !submenu.classList.contains('show')) {
                    bsCollapse.show();
                    toggle.setAttribute('aria-expanded', 'true');
                    
                    if (chevron) {
                        chevron.style.transform = 'rotate(180deg)';
                    }
                }
                
                // Handle hover behavior for collapsed sidebar
                const dropdownItem = toggle.closest('.sidebar-dropdown');
                if (dropdownItem) {
                    // Show submenu on hover when sidebar is collapsed
                    dropdownItem.addEventListener('mouseenter', function() {
                        if (sidebar.classList.contains('collapsed')) {
                            submenu.classList.add('hover-show');
                            submenu.classList.add('show');
                        }
                    });
                    
                    // Hide submenu when mouse leaves
                    dropdownItem.addEventListener('mouseleave', function() {
                        if (sidebar.classList.contains('collapsed')) {
                            submenu.classList.remove('hover-show');
                            submenu.classList.remove('show');
                        }
                    });
                }
            }
        }
    });
    
    // Configure sidebar behavior on smaller screens
    const handleResize = () => {
        if (window.innerWidth < 992 && !sidebar.classList.contains('collapsed')) {
            sidebar.classList.add('collapsed');
            mainContent.classList.add('expanded');
        }
    };
    
    // Initial check
    handleResize();
    
    // Add resize event listener
    window.addEventListener('resize', handleResize);
});