function toggleSubmenu(id, arrowId) {
    const sidebar = document.getElementById('sidebar');
    if (!sidebar || sidebar.classList.contains('sidebar-collapsed')) return;

    const submenu = document.getElementById(id);
    const arrow = document.getElementById(arrowId);

    if (submenu) {
        const isHidden = submenu.classList.contains('hidden');
        submenu.classList.toggle('hidden', !isHidden);
        
        if (arrow) {
            arrow.style.transform = isHidden ? 'rotate(180deg)' : 'rotate(0deg)';
        }
        
        localStorage.setItem('menu_' + id, isHidden ? 'open' : 'closed');
    }
}

function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebar-overlay');
    const main = document.getElementById('main-content');
    if (!sidebar) return;

    const isMobile = window.innerWidth < 768;

    if (!isMobile) {
        if (!sidebar.classList.contains('sidebar-collapsed')) {
            sidebar.classList.add('sidebar-collapsed');
            if (main) {
                main.classList.remove('md:pl-64');
                main.classList.add('md:pl-[64px]');
            }
        } else {
            sidebar.classList.remove('sidebar-collapsed');
            if (main) {
                main.classList.remove('md:pl-[64px]');
                main.classList.add('md:pl-64');
            }
        }
    } else {
        const isClosed = sidebar.classList.contains('-translate-x-full');
        sidebar.classList.toggle('-translate-x-full', !isClosed);
        
        if (overlay) {
            overlay.classList.toggle('hidden', !isClosed);
        }
    }
}

/* Responsive Viewport Listener */
window.addEventListener('resize', () => {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebar-overlay');
    const main = document.getElementById('main-content');
    if (!sidebar) return;

    if (window.innerWidth >= 768) {
        if (overlay) overlay.classList.add('hidden');
        sidebar.classList.remove('-translate-x-full');
        
        if (sidebar.classList.contains('sidebar-collapsed')) {
            if (main) {
                main.classList.remove('md:pl-64');
                main.classList.add('md:pl-[64px]');
            }
        } else {
            if (main) {
                main.classList.remove('md:pl-[64px]');
                main.classList.add('md:pl-64');
            }
        }
    } else {
        sidebar.classList.add('-translate-x-full');
        if (main) {
            main.classList.remove('md:pl-64', 'md:pl-[64px]');
        }
    }
});

/* Synchronize DOM state on load execution */
document.addEventListener("DOMContentLoaded", () => {
    // Registered card-sub in the list below
    const subMenus = ['attendance-sub', 'department-sub', 'leave-sub', 'loan-sub', 'payroll-sub', 'employee-sub', 'card-sub'];
    const sidebar = document.getElementById('sidebar');
    
    subMenus.forEach(id => {
        const menu = document.getElementById(id);
        if (!menu) return;
        
        const arrow = document.getElementById(id.replace('-sub', '-arrow'));
        const hasActiveChild = menu.querySelector('a.text-indigo-600');
        const storedState = localStorage.getItem('menu_' + id);
        
        if ((hasActiveChild || storedState === 'open') && sidebar && !sidebar.classList.contains('sidebar-collapsed')) {
            menu.classList.remove('hidden');
            if (arrow) {
                arrow.style.transform = 'rotate(180deg)';
            }
        }
    });
});