document.addEventListener("DOMContentLoaded", (event) => {
  const startButton = document.querySelector(".col-auto .btn-primary");
  const accordionButtons = document.getElementsByClassName("accordion-button");

  startButton.addEventListener("click", () => {
    const arrayOfElements = Array.from(accordionButtons);
    arrayOfElements.forEach((button, index) => {
      button.addEventListener("click", () => {
        const images = Array.from(document.getElementsByClassName("img-fluid"));
        images.forEach((img) => {
          img.addEventListener("click", (e) => {
            const modalImgContainer = Array.from(
              document.querySelectorAll(".modal-body.text-center"),
            )[0];
            const modalIMG = Array.from(modalImgContainer.children)[0];
            console.log(modalIMG);

            modalImgContainer.addEventListener("mousemove", (e) => {
              if (isMobileDevice()) {
                if (modalIMG.style.transform != "scale(4)") {
                  $("#imageModal .modal-content")[0].getBoundingClientRect();
                  const x =
                    e.clientX -
                    $("#imageModal .modal-content")[0].getBoundingClientRect()
                      .left -
                    ($("#imageModal .modal-body").outerWidth(true) -
                      $("#imageModal .modal-body").width()) /
                      2;
                  const y =
                    e.clientY -
                    $("#imageModal .modal-content")[0].getBoundingClientRect()
                      .top -
                    $("#imageModal .modal-header").outerHeight(true);
                  // modalIMG.style.transformOrigin = `${x/2}px ${y/2}px`

                  modalIMG.style.transform = "scale(4)";
                  modalIMG.style.transformOrigin = `${x}px ${y}px`;
                } else {
                  modalIMG.style.transform = "scale(1)";
                  // modalIMG.style.transformOrigin = `0px 0px`
                }
              } else {
                $("#imageModal .modal-content")[0].getBoundingClientRect();
                const x =
                  e.clientX -
                  $("#imageModal .modal-content")[0].getBoundingClientRect()
                    .left -
                  ($("#imageModal .modal-body").outerWidth(true) -
                    $("#imageModal .modal-body").width()) /
                    2;
                const y =
                  e.clientY -
                  $("#imageModal .modal-content")[0].getBoundingClientRect()
                    .top -
                  $("#imageModal .modal-header").outerHeight(true);
                // modalIMG.style.transformOrigin = `${x/2}px ${y/2}px`

                modalIMG.style.transform = "scale(2)";
                modalIMG.style.transformOrigin = `${x}px ${y}px`;
              }
            });

            modalImgContainer.addEventListener("mouseout", (e) => {
              if (isMobileDevice()) {
                if (modalIMG.style.transform != "scale(4)") {
                  modalIMG.style.transform = "scale(1)";
                }
              } else {
                modalIMG.style.transform = "scale(1)";
              }
            });
          });
        });
      });
    });
  });
});

function isMobileDevice() {
  return (
    typeof window.ontouchstart !== "undefined" ||
    navigator.userAgent.match(/Mobi|Android|iPhone|iPad|iPod/i)
  );
}
