/*!
 * weslidergalleryboard 4.0.20
 *
 * @license GPLv3 for open source use only
 * or weslidergalleryboard Commercial License for commercial use
*/
function openGalleryBoard(target) {
  const modal = document.querySelector('.js-we-galleryboard-modal');
  const weModal = document.querySelector('.we-galleryboard-modal');
  const closeBtn = document.querySelector('.we-galleryboard-close-btn');
  const activeSection = document.querySelector('.fp-section.fp-table.fp-is-overflow.active');

  const title = document.querySelector(`.gallery-title[data-title="${target}"]`);
  const titleHTML = title ? title.innerHTML : '';

  const collection = document.querySelector(`.gallery-collection[data-collection="${target}"]`);
  const galleryHTML = collection ? collection.innerHTML : '';

  const owlcollection = document.querySelector(`.gallery-dot[data-dot="${target}"]`);
  const owlHTML = owlcollection ? owlcollection.innerHTML : '';

  const $carousel = $('#li-galleryboard-carousel');

  // ✅ Destroy nếu đã tồn tại OwlCarousel
  if ($carousel.hasClass('owl-loaded')) {
    $carousel.trigger('destroy.owl.carousel');
    $carousel.removeClass('owl-loaded owl-theme');
    $carousel.find('.owl-stage-outer').children().unwrap(); // xóa cấu trúc thừa
    $carousel.html(''); // xóa nội dung cũ để tránh đúp ảnh
  }

  // Gán nội dung mới
  $('#li-galleryboard-title').html(titleHTML);
  $carousel.html(galleryHTML);
  $('#li-galleryboard-dots').html(owlHTML);

  if (typeof fullpage_api !== 'undefined') {
    if (activeSection && !activeSection.contains(modal)) {
      activeSection.appendChild(modal);   
    }
  } else {
    weModal.style.position = 'fixed';
    closeBtn.style.fontSize = '30px';
  }

  modal.style.display = 'flex';
  modal.classList.add('show');   

  // ✅ Khởi tạo lại OwlCarousel
  setTimeout(() => {
    $carousel.owlCarousel({
      items: 1,
      loop: true,
      nav: true,
      dots: false,
      dotsData: true,
      autoplay: true,
      autoplayTimeout: 5000,
      navText: [
        '<span class="nav-arrow prev-arrow"><i class="fa-solid fa-arrow-left-long"></i></span>',
        '<span class="nav-arrow next-arrow"><i class="fa-solid fa-arrow-right-long"></i></span>'
      ],
      onInitialized: function () {
        // ✅ Sau khi OwlCarousel init, xoá class owl-hidden nếu nó bị gán nhầm vào container
        $('#li-galleryboard-carousel').removeClass('owl-hidden');
      }
    });
  }, 100);

  // Custom dots
  $('#li-galleryboard-dots .owl-custom-dot').each(function(index) {
    $(this).off('click').on('click', function () {
      $carousel.trigger('to.owl.carousel', [index, 300]);
    });
  });

  // Đồng bộ dot active
  $carousel.on('changed.owl.carousel', function(event) {
    const index = event.item.index - event.relatedTarget._clones.length / 2;
    const count = event.item.count;
    const realIndex = ((index % count) + count) % count;
    $('#li-galleryboard-dots .owl-custom-dot').removeClass('active');
    $('#li-galleryboard-dots .owl-custom-dot').eq(realIndex).addClass('active');
  });

  if (typeof fullpage_api !== 'undefined') {
    fullpage_api.setAllowScrolling(false);
    fullpage_api.setKeyboardScrolling(false);
  }
}

// Gắn click cho .open-gallery
$(document).on('click', '.open-gallery', function () {
  const target = $(this).data('target');
  openGalleryBoard(target);
});

$(document).on('click', '.view-gallery', function () {
  const target = $(this).data('target');
  openGalleryBoard(target);
});

// Đóng Modal
function closeGalleryModal() {
  const $modal = $('.js-we-galleryboard-modal');
  $modal.removeClass('show').hide();

  if (typeof fullpage_api !== 'undefined') {
    fullpage_api.setAllowScrolling(true);
    fullpage_api.setKeyboardScrolling(true);
  }
}

$(document).on('click', '.js-we-galleryboard-close', function (e) {
  const $content = $(this).find('.we-galleryboard-modal-content');
  if (!$content.is(e.target) && $content.has(e.target).length === 0) {
    closeGalleryModal();
  }
});

$(document).on('click', '.js-we-galleryboard-modal', function (e) {
  const $content = $(this).find('.we-galleryboard-modal-content');
  if (!$content.is(e.target) && $content.has(e.target).length === 0) {
    closeGalleryModal();
  }
});

$(document).on('keydown', function (e) {
  if (e.key === 'Escape') {
    const $modal = $('.js-we-galleryboard-modal');
    if ($modal.hasClass('show')) {
      closeGalleryModal();
    }
  }
});