document.addEventListener('DOMContentLoaded', function () {
    const fixedSideHeader = document.getElementById('fixedSideHeader');
    const scrollPart = document.getElementById('scrollPart');
    const burgerMenuButton = document.getElementById('burgerMenuButton');
    const burgerMenuLines = document.querySelectorAll('.burgerMenuLine');

    function toggleSideHeader() {
        const computedStyle = getComputedStyle(fixedSideHeader);
        const isHidden = computedStyle.display === 'none';

        if (isHidden) {
            fixedSideHeader.style.display = 'block';

            burgerMenuButton.classList.add('flex-col');
            burgerMenuButton.classList.remove('flex-row');

            burgerMenuLines.forEach((line) => {
                line.classList.remove('expanded');
            });

            scrollPart.classList.remove('w-full');
            scrollPart.classList.add('flex-1');
            scrollPart.classList.add('ml-[300px]');
        } else {
            fixedSideHeader.style.display = 'none';

            burgerMenuButton.classList.remove('flex-col');
            burgerMenuButton.classList.add('flex-row');

            burgerMenuLines.forEach((line) => {
                line.classList.add('expanded');
            });

            scrollPart.classList.remove('flex-1');
            scrollPart.classList.remove('ml-[300px]');
            scrollPart.classList.add('w-full');
        }
    }

    burgerMenuButton.addEventListener('click', toggleSideHeader);
    

    // TO DISPLAY THE USER PROFILE DROPDOWN ON DESKTOP
    var userProfile = document.getElementById("userProfile");
    var userProfileDropdown = document.getElementById("userProfileDropdown");
    var arrowDown = document.getElementById("arrowDown");
    var arrowUp = document.getElementById("arrowUp");

    userProfile.addEventListener("click", function (event) {
        event.stopPropagation(); // Prevents the event from bubbling up to the document
        if (userProfileDropdown.style.display == "none") {
            userProfileDropdown.style.display = "block";
            arrowDown.style.display = "none";
            arrowUp.style.display = "block";
        } else {
            userProfileDropdown.style.display = "none";
            arrowDown.style.display = "block";
            arrowUp.style.display = "none";
        }
    });

    // Add event listener to hide dropdown when clicking outside of it
    document.addEventListener("click", function (event) {
        if (!userProfile.contains(event.target) && !userProfileDropdown.contains(event.target)) {
            userProfileDropdown.style.display = "none";
            arrowDown.style.display = "block";
            arrowUp.style.display = "none";
        }
    });


    // TO DISPLAY THE USER PROFILE DROPDOWN ON MOBILE
    const mobileUserProfile = document.getElementById('mobileUserProfile');
    var dropdown = document.getElementById('mobileUserProfileDropdown');
    var arrowDown = menuItem.querySelector('.angleDown');
    var arrowUp = menuItem.querySelector('.angleUp');

    mobileUserProfile.addEventListener('click', function () {
        dropdown.classList.toggle('active');
        arrowDown.style.display = arrowDown.style.display === 'none' ? 'inline' : 'none';
        arrowUp.style.display = arrowUp.style.display === 'none' ? 'inline' : 'none';
    });
});



// TO TOGGLE THGE SIDE BAR ON MOBILE
function toggleMobileSideBar() {
    var burgerMenuButton = document.getElementById('mobileBurgerMenuButton');
    var closeMenuButton = document.getElementById('mobileCloseMenuButton');
    var sidebar = document.querySelector('.mobileFixedSideHeader');
    var body = document.querySelector('body');

    burgerMenuButton.classList.toggle('hidden');
    closeMenuButton.classList.toggle('hidden');
    sidebar.classList.toggle('hidden');

    // PREVENT SCROLLING WHEN TEH SIDE BAR IS TOGGLED
    if (body.style.overflow === 'hidden') {
        body.style.overflow = '';
    } else {
        body.style.overflow = 'hidden';
    }
}

document.getElementById('mobileBurgerMenuButton').addEventListener('click', toggleMobileSideBar);
document.getElementById('mobileCloseMenuButton').addEventListener('click', toggleMobileSideBar);



// SCRIPT FOR THE SIDEBAR MENU ITEMS
const menuContainers = document.querySelectorAll('.menu-container');

// Add click event listeners to each menu container
menuContainers.forEach((menuContainer) => {
    const menuItem = menuContainer.querySelector('.menuItem');
    const menuDropdownItems = menuContainer.querySelector('.menuDropdownItems');
    const angleDown = menuItem.querySelector('.angleDown');
    const angleUp = menuItem.querySelector('.angleUp');

    menuItem.addEventListener('click', function () {
        // Close all dropdowns first
        document.querySelectorAll('.menuDropdownItems').forEach(item => {
            if (item !== menuDropdownItems) {
                item.classList.remove('active');
            }
        });
        
        // Toggle active class for the clicked dropdown
        menuDropdownItems.classList.toggle('active');
        
        // Toggle angle icons
        angleDown.style.display = angleDown.style.display === 'none' ? 'inline' : 'none';
        angleUp.style.display = angleUp.style.display === 'none' ? 'inline' : 'none';
    });
});