document.addEventListener("DOMContentLoaded", function () {
  // Get the add event button
  var addEventButton = document.querySelector(
    'button[data-toggle="sc-modal"][data-target="#form_sc-modal"]'
  );

  // Get the form modal
  var formModal = document.getElementById("form_sc-modal");

  // Get the close button in the form modal
  var closeButton = formModal.querySelector('button[data-dismiss="sc-modal"]');

  // Get all the edit buttons
  var editButtons = document.querySelectorAll(
    'button[data-toggle="sc-modal"][data-target^="#update_event"]'
  );

  // Add click event listener to the add event button
  addEventButton.addEventListener("click", function () {
    formModal.classList.add("show");
    formModal.style.display = "block";
    formModal.style.overflowY = "scroll";
  });

  // Add click event listener to the close button in the form modal
  closeButton.addEventListener("click", function () {
    formModal.classList.remove("show");
    formModal.style.display = "none";
    formModal.style.overflowY = "hidden";
    window.location.reload();
  });

  // Iterate through all the edit buttons
  for (var i = 0; i < editButtons.length; i++) {
    // Add click event listener to each edit button
    editButtons[i].addEventListener("click", function () {
      // Get the id of the modal to be shown
      var modalId = this.getAttribute("data-target");

      // Get the modal to be shown
      var modal = document.querySelector(modalId);

      // Show the modal
      modal.classList.add("show");
      modal.style.display = "block";
      modal.style.overflowY = "scroll";

      // Add click event listener to the close button in the edit form modal
      var closeButton = modal.querySelector('button[data-dismiss="sc-modal"]');
      closeButton.addEventListener("click", function () {
        modal.classList.remove("show");
        window.location.reload();
      });

      // When the user clicks anywhere outside of the modal, close it
      window.addEventListener("click", function (event) {
        if (event.target == modal) {
          modal.classList.remove("show");
          window.location.reload();
        }
      });
    });
  }

  // When the user clicks anywhere outside of the modal, close it
  window.addEventListener("click", function (event) {
    if (event.target == formModal) {
      formModal.classList.remove("show");
      window.location.reload();
    }
  });
});
