document.addEventListener("DOMContentLoaded", function () {
    // Function to open a modal with dimensions
    function openModalWithDimensions(url, width, height) {
        const modalUrl = url;
        openModal(modalUrl);

        const iframe = document.getElementById("popupModalFrame");
        iframe.style.height = height;
        iframe.style.width = width;
    }

    // Function to open a modal
    function openModal(url) {
        const modalContainer = document.getElementById("popUpModal");
        const iframe = document.getElementById("popupModalFrame");
        const body = document.body;

        body.style.overflow = "hidden";
        iframe.src = url;
        modalContainer.style.display = "flex";
    }

    // Function to close the modal
    function closeModal() {
        const modalContainer = document.getElementById("popUpModal");
        const iframe = document.getElementById("popupModalFrame");
        const body = document.body;

        iframe.src = "";
        body.style.overflow = "auto";
        modalContainer.style.display = "none";
    }

    // Function to add a click listener to buttons by class name
    function addButtonClickListener(className, width, height) {
        const buttons = document.querySelectorAll(`.${className}`);
        buttons.forEach(button => {
            button.addEventListener("click", () => {
                const modalUrl = button.getAttribute("data-modal-url");
                openModalWithDimensions(modalUrl, width, height);
            });
        });
    }

    // Add button click listeners with dimensions for specific class names
    addButtonClickListener("addStatusButton", "450px", "200px");
    addButtonClickListener("addNoteButton", "400px", "225px");
    addButtonClickListener("addProjectNoteButton", "400px", "225px");
    addButtonClickListener("updateStatusButton", "fit-content", "160px");
    addButtonClickListener("showPointsButton", "600px", "450px");
    addButtonClickListener("addPointButton", "500px", "170px");
    addButtonClickListener("timelineButton", "600px", "450px");
    addButtonClickListener("addTimeButton", "300px", "270px");
    addButtonClickListener("deleteTaskButton", "fit-content", "130px");
    addButtonClickListener("addFileButton", "500px", "320px");
    addButtonClickListener("addCredentialsButton", "500px", "300px");
    addButtonClickListener("addProjectTypeButton", "fit-content", "160px");
    addButtonClickListener("addBusinessTypeButton", "fit-content", "160px");
    addButtonClickListener("addReferenceButton", "fit-content", "230px");
    addButtonClickListener("addTagButton", "fit-content", "160px");
    addButtonClickListener("addBusinessButton", "550px", "500px");
    addButtonClickListener("addStaffPositionButton", "fit-content", "160px");
    addButtonClickListener("addStatusButtonMobile", "500px", "80px");
    addButtonClickListener("userRecentActivitiesButton", "400px", "600px");
    addButtonClickListener("addUserStoryButton", "400px", "160px");
    
    

    // DELETE BUTTONS
    addButtonClickListener("deleteCustomerButton", "400px", "140px");
    addButtonClickListener("deleteBusinessButton", "400px", "140px");
    addButtonClickListener("deleteStaffButton", "400px", "140px");
    addButtonClickListener("deleteProjectButton", "400px", "140px");
    addButtonClickListener("deleteTaskButton", "400px", "140px");
    addButtonClickListener("deleteNoteButton", "400px", "140px");
    addButtonClickListener("deleteProjectNoteButton", "400px", "140px");
    addButtonClickListener("deletePointButton", "400px", "140px");
    
    

    
    

    const closeButton = document.getElementById("closeModalButton");
    closeButton.addEventListener("click", () => {
        closeModal();
    });

    const modalContainer = document.getElementById("popUpModal");
    window.addEventListener("click", function (event) {
        if (event.target === modalContainer) {
            closeModal();
        }
    });
});