<script>
jQuery(document).on('keydown', function(e) {
  // Left Arrow Key (key code 37)
  if (e.keyCode === 37) { 
    jQuery(".modal:visible .btn-prev").click(); // Trigger prev button click
  } 
  
  // Right Arrow Key (key code 39)
  if (e.keyCode === 39) {
    jQuery(".modal:visible .btn-next").click(); // Trigger next button click
  }
});
</script>

<script>
jQuery(document).ready(function ($) {
  // Function to handle modal navigation (click and keydown events)
  function handleModalNavigation(e) {
    const isModalOpen = $(".modal:visible").length > 0;
    const currentModal = $(".modal:visible");

    // Pagination Check
    const pagination = $(".pagination-shortcode");
    if (!pagination.length) {
      console.error("Pagination element not found. Please check the selector.");
      return;
    }

    if (isModalOpen) {
      // Remove existing backdrops if any
      $('.modal-backdrop').remove(); 

      // Event delegation for clicks on buttons within the modal
      currentModal.one("click", ".btn-next, .btn-prev", function (e) {
        const isNext = $(this).hasClass("btn-next");
        const direction = isNext ? "next" : "prev";

        // Find the closest wpgb-card element and then the next/prev wpgb-card
        const currentCard = currentModal.closest('.wpgb-card');
        const targetCard = currentCard[direction]('.wpgb-card');
        let targetModal = targetCard.find('.modal');

        if (!targetModal.length && isNext) {
          // If it's the last modal and "Next" is clicked, close the modal
          currentModal.modal('hide');
          return;
        }

        if (!targetModal.length) {
          // If the next/prev modal is not yet loaded (due to lazy loading)
          // Trigger pagination click to load more modals
          pagination.find(`a[aria-label*="${direction}"]`).click();

          // Wait for a short delay (e.g., 500ms) to allow new modals to load
          setTimeout(() => {
            // Find the target modal again after the delay
            targetCard = currentCard[direction]('.wpgb-card');
            targetModal = targetCard.find('.modal');
             
            if (targetModal.length) {
              currentModal.modal('hide');
              targetModal.modal('show');
            } else {
              console.log(`No ${direction} page available in pagination.`);
            }
          }, 500); // Adjust the delay as needed
        } else {
          // If the next/previous modal is already loaded, show it
          currentModal.modal('hide');
          targetModal.modal('show');
        }
      });

      // Keyboard navigation
      if (e.type === "keydown") {
        const key = e.keyCode;
        if (key === 39) { // Right arrow
          currentModal.find(".btn-next").click();
        } else if (key === 37) { // Left arrow
          currentModal.find(".btn-prev").click();
        }
      }
    }
  }
  
  // Function to initialize modal navigation
  function initializeModalNavigation() {
    // Remove existing event handlers and backdrops to prevent duplicates
    $(document).off("click keydown", handleModalNavigation);
    $('.modal-backdrop').remove();

    // Attach the event handler to the document for both click and keydown events
    $(document).on("click keydown", handleModalNavigation);
  }

  // Initial call to set up modal navigation
  initializeModalNavigation(); 

  // Listen for the grid.afterRefresh event from WP Grid Builder
  $(document).on('grid.afterRefresh', function(event, gridId) {
    // Re-initialize modal navigation whenever the grid is refreshed
    initializeModalNavigation();
  });
});
</script>