// Responsive Menu Effect - Action button
window.toggleMobileMenu = function() {
    const mobileMenu = document.getElementById('mobile-menu');
    const iconHamburger = document.getElementById('icon-hamburger');
    const iconClose = document.getElementById('icon-close');
    const isClosed = mobileMenu.classList.contains('opacity-0');

    if (isClosed) {
        // Open Menu
        mobileMenu.classList.remove('opacity-0', '-translate-y-8', 'pointer-events-none');
        mobileMenu.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
        iconHamburger.classList.add('hidden');
        iconHamburger.classList.remove('block');
        iconClose.classList.remove('hidden');
        iconClose.classList.add('block');
    } else {
        // Close Menu
        mobileMenu.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
        mobileMenu.classList.add('opacity-0', '-translate-y-8', 'pointer-events-none');
        iconHamburger.classList.remove('hidden');
        iconHamburger.classList.add('block');
        iconClose.classList.add('hidden');
        iconClose.classList.remove('block');
    }
};

// Dropdown User Button Effect
window.toggleDropdown = function() {
    const menu = document.getElementById('user-dropdown');
    if (menu.classList.contains('opacity-0')) {
        menu.classList.remove('opacity-0', 'scale-95', 'pointer-events-none');
        menu.classList.add('opacity-100', 'scale-100', 'pointer-events-auto');
    } else {
        menu.classList.remove('opacity-100', 'scale-100', 'pointer-events-auto');
        menu.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
    }
};

// Close dropdown when clicking outside
function closeDropdown() {
    const menu = document.getElementById('user-dropdown');
    if (menu && !menu.classList.contains('opacity-0')) {
        menu.classList.remove('opacity-100', 'scale-100', 'pointer-events-auto');
        menu.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
    }
}

// Close Menus
window.addEventListener('resize', function() {
    const mobileMenu = document.getElementById('mobile-menu');
    const iconHamburger = document.getElementById('icon-hamburger');
    const iconClose = document.getElementById('icon-close');
    // Responsive Menu action
    if (mobileMenu) {
        mobileMenu.classList.add('opacity-0', '-translate-y-8', 'pointer-events-none');
        mobileMenu.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
    }

    // Responsive Menu button
    if (iconHamburger && iconClose) {
        iconHamburger.classList.remove('hidden');
        iconHamburger.classList.add('block');
        iconClose.classList.add('hidden');
        iconClose.classList.remove('block');
    }

    // Dropdown User button
    const userDropdown = document.getElementById('user-dropdown');
    if (window.innerWidth >= 768 && userDropdown) {
        userDropdown.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
        userDropdown.classList.remove('opacity-100', 'scale-100', 'pointer-events-auto');
    }
});

// Close responsive menu
document.addEventListener('DOMContentLoaded', function () {
    const mobileMenu = document.getElementById('mobile-menu');
    if (mobileMenu) {
        const links = mobileMenu.querySelectorAll('a[href^="#"]');
        links.forEach(link => {
            link.addEventListener('click', function () {
                mobileMenu.classList.add('opacity-0', '-translate-y-8', 'pointer-events-none');
                mobileMenu.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
                // Change menu icon
                const iconHamburger = document.getElementById('icon-hamburger');
                const iconClose = document.getElementById('icon-close');
                if (iconHamburger && iconClose) {
                    iconHamburger.classList.remove('hidden');
                    iconHamburger.classList.add('block');
                    iconClose.classList.add('hidden');
                    iconClose.classList.remove('block');
                }
            });
        });
    }

    // Close dropdown when clicking outside
    document.addEventListener('click', function(event) {
        const dropdown = document.getElementById('user-dropdown');
        const dropdownButton = document.querySelector('button[onclick="toggleDropdown()"]');

        // Check if dropdown exists and is open
        if (dropdown && !dropdown.classList.contains('opacity-0')) {
            // Check if click is outside dropdown and dropdown button
            if (!dropdown.contains(event.target) && !dropdownButton.contains(event.target)) {
                closeDropdown();
            }
        }
    });
});

window.toggleDashboardMenu = function() {
    const dashboardMenu = document.getElementById('dashboard-menu');
    if (dashboardMenu) {
        const isClosed = dashboardMenu.classList.contains('opacity-0');

        if (isClosed) {
            // Show dashboard menu
            dashboardMenu.classList.remove('opacity-0', '-translate-y-4', 'pointer-events-none');
            dashboardMenu.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
        } else {
            // Hide dashboard menu
            dashboardMenu.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
            dashboardMenu.classList.add('opacity-0', '-translate-y-4', 'pointer-events-none');
        }
    }
};

// Close dashboard modules menu when clicking outside.
document.addEventListener('click', function(event) {
    const dashboardMenu = document.getElementById('dashboard-menu');
    const dashboardToggleButton = event.target.closest('button[onclick="toggleDashboardMenu()"]');

    if (!dashboardMenu) return;
    const isOpen = !dashboardMenu.classList.contains('opacity-0');
    if (!isOpen) return;

    if (!dashboardMenu.contains(event.target) && !dashboardToggleButton) {
        dashboardMenu.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
        dashboardMenu.classList.add('opacity-0', '-translate-y-4', 'pointer-events-none');
    }
});