document.addEventListener("DOMContentLoaded", function () {

    function openModalWithDimensions(url, width, height) {
        const modalUrl = url;
        openModal(modalUrl);

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

    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 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 addButtonClickListener(buttonId, width, height) {
        const button = document.getElementById(buttonId);
        if (button) {
            button.addEventListener("click", () => {
                const modalUrl = button.getAttribute("data-modal-url");
                openModalWithDimensions(modalUrl, width, height);
            });
        }
    }

    // Add button click listeners with dimensions
    addButtonClickListener("addStatusButton", "450px", "200px");
    addButtonClickListener("addNoteButton", "400px", "225px");
    addButtonClickListener("addFileButton", "500px", "320px");
    addButtonClickListener("addCredentialsButton", "500px", "300px");
    addButtonClickListener("updateStatusButton", "fit-content", "160px");
    addButtonClickListener("showPointsButton", "600px", "450px");
    addButtonClickListener("addPointButton", "500px", "225px");
    addButtonClickListener("timelineButton", "600px", "450px");
    addButtonClickListener("addTimeButton", "300px", "270px");
    addButtonClickListener("deleteTaskButton", "fit-content", "130px");

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

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

    // TO RELOAD THE TOP WINDOW AFTER ADDING
    // window.top.location.reload();
});