//----------------------------NOTIFICATION BELL-------------------------------//
document.addEventListener("DOMContentLoaded", function() {
    const bell = document.getElementById("bell");
    const notificationDropdown = document.getElementById("notificationDropdown");

    let notifications = [];

    // Function to add a notification
    function addNotification(message) {
        if (notifications.length >= 10) {
            notifications.pop(); // Remove the oldest notification if there are already 10
        }
        notifications.unshift(message); // Add new notification to the beginning
        updateDropdown();
    }

    function updateDropdown() {
        notificationDropdown.innerHTML = '';
        notifications.forEach(notification => {
            const notificationElement = document.createElement("a");
            notificationElement.href = "#";
            notificationElement.textContent = notification;
            notificationDropdown.appendChild(notificationElement);
        });
    }

    // Event listener for the bell icon
    bell.addEventListener("click", function() {
        const isDropdownVisible = notificationDropdown.style.display === "block";
        notificationDropdown.style.display = isDropdownVisible ? "none" : "block";
    });

    // Function to add click event listeners to buttons
    function addClickListeners(buttons, label) {
        buttons.forEach(button => {
            button.addEventListener("click", function() {
                addNotification(`${label} button with ID ${button.id} clicked`);
            });
        });
    }

    // Add click event listeners to all relevant buttons
    const modifyButtons = document.querySelectorAll(".btn_modify");
    const deleteButtons = document.querySelectorAll(".btn_delete");
    const submitButtons = document.querySelectorAll("input[type='submit']");

    addClickListeners(modifyButtons, "Modify");
    addClickListeners(deleteButtons, "Delete");
    addClickListeners(submitButtons, "Submit");
});




//-----------------------SETTINGS FUNCTION -----------------------------//

document.addEventListener('DOMContentLoaded', function() {
    var settingsButton = document.getElementById('settingsButton');
    var dropdownContent = document.getElementById('dropdownContent');

    settingsButton.addEventListener('click', function() {
        dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
    });

    window.addEventListener('click', function(event) {
        if (event.target !== settingsButton) {
            dropdownContent.style.display = 'none';
        }
    });
});