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

  /* ==========================================================
    判定関数
  ========================================================== */
  function isSP() {
    return window.innerWidth <= 768;
  }

  /* ==========================================================
    ① モーダルギャラリー（PC用）
  ========================================================== */
  const photo = document.getElementById('photo');
  const jsGallery = document.getElementById('upgrade-examples');
  const picMain = document.getElementById('pic_main');
  let nowNum = 0;
  const items = jsGallery ? jsGallery.querySelectorAll('li') : [];
  const maxNum = items.length - 1;

  if (jsGallery) {
    jsGallery.querySelectorAll('a').forEach((a, index) => {
      a.addEventListener('click', (e) => {
        if (isSP()) {
          // SP時はリンク無効
          e.preventDefault();
          return;
        }
        // PC時のみモーダル
        e.preventDefault();
        photo.classList.add('dis');
        nowNum = index;
        modalSet(nowNum);
      });
    });
  }

  // NEXT
  const nextBtnModal = photo.querySelector('.next');
  if (nextBtnModal) {
    nextBtnModal.addEventListener('click', (e) => {
      e.preventDefault();
      nowNum = (nowNum < maxNum) ? nowNum + 1 : 0;
      modalSet(nowNum);
    });
  }

  // PREV
  const prevBtnModal = photo.querySelector('.prev');
  if (prevBtnModal) {
    prevBtnModal.addEventListener('click', (e) => {
      e.preventDefault();
      nowNum = (nowNum > 0) ? nowNum - 1 : maxNum;
      modalSet(nowNum);
    });
  }

  // 閉じる
  photo.querySelectorAll('.close-bg, .close').forEach(el => {
    el.addEventListener('click', (e) => {
      e.preventDefault();
      photo.classList.remove('dis');
    });
  });

  // メイン画像とキャプションセット
  function modalSet(num) {
    const target = items[num];
    if (!target) return;
    const aTag = target.querySelector('a');
    if (!aTag) return;

    const imgSrc = aTag.getAttribute('href');
    const imgAlt = aTag.getAttribute('title');

    if (picMain) picMain.querySelector('img').setAttribute('src', imgSrc);
    const picCaption = document.getElementById('pic_caption');
    if (picCaption) picCaption.innerHTML = imgAlt;
  }

  // resizeでモーダル非表示
  let timer = null;
  window.addEventListener('resize', () => {
    if (timer !== null) clearTimeout(timer);
    timer = setTimeout(() => {
      if (photo) photo.classList.remove('dis');
      initSlider();
    }, 100);
  });

  /* ==========================================================
    ② SPスライダー（upgrade-examples）
  ========================================================== */
  const upgradeList = document.getElementById('upgrade-examples');
  let currentIndex = 0;
  let liItems = upgradeList ? Array.from(upgradeList.querySelectorAll('li')) : [];
  let prevBtn, nextBtn;

  function initSlider() {
    if (!upgradeList || liItems.length === 0) return;

    if (isSP()) {
      // SP用スライダー
      upgradeList.style.position = 'relative';
      upgradeList.style.height = 'calc(515 / 390 * 100vw)';

      liItems.forEach((li, idx) => {
        li.style.position = 'absolute';
        li.style.top = '0';
        li.style.left = '0';
        li.style.width = 'auto';
        li.style.transition = 'opacity 0.5s';
        li.style.opacity = (idx === currentIndex) ? '1' : '0';

        // SPキャプション生成
        if (!li.querySelector('.spcaption')) {
          const aTag = li.querySelector('a');
          if (aTag) {
            const caption = document.createElement('div');
            caption.className = 'spcaption';
            caption.innerHTML = aTag.getAttribute('title');
            li.appendChild(caption);
          }
        }
      });

      // SPボタン生成
      if (!document.getElementById('prev')) {
        prevBtn = document.createElement('a');
        prevBtn.id = 'prev';
        prevBtn.className = 'bt smt';
        prevBtn.href = '#';
        prevBtn.innerHTML = '<img src="/common/img/option/dress/upgrade/bt-prev.svg" alt="prev">';
        upgradeList.parentNode.appendChild(prevBtn);

        nextBtn = document.createElement('a');
        nextBtn.id = 'next';
        nextBtn.className = 'bt smt';
        nextBtn.href = '#';
        nextBtn.innerHTML = '<img src="/common/img/option/dress/upgrade/bt-next.svg" alt="next">';
        upgradeList.parentNode.appendChild(nextBtn);

        // prevクリック
        prevBtn.addEventListener('click', e => {
          e.preventDefault();
          const oldIndex = currentIndex;
          currentIndex = (currentIndex <= 0) ? liItems.length - 1 : currentIndex - 1;
          liItems[oldIndex].style.opacity = '0';
          liItems[currentIndex].style.opacity = '1';
        });

        // nextクリック
        nextBtn.addEventListener('click', e => {
          e.preventDefault();
          const oldIndex = currentIndex;
          currentIndex = (currentIndex >= liItems.length - 1) ? 0 : currentIndex + 1;
          liItems[oldIndex].style.opacity = '0';
          liItems[currentIndex].style.opacity = '1';
        });
      }

    } else {
      // PC表示に戻す
      upgradeList.style.position = '';
      upgradeList.style.height = '';
      liItems.forEach(li => {
        li.style.position = '';
        li.style.top = '';
        li.style.left = '';
        li.style.width = '';
        li.style.opacity = '';
        li.style.transition = '';

        const spcap = li.querySelector('.spcaption');
        if (spcap) li.removeChild(spcap);
      });

      // SPボタン削除
      prevBtn = document.getElementById('prev');
      nextBtn = document.getElementById('next');
      if (prevBtn) prevBtn.remove();
      if (nextBtn) nextBtn.remove();

      currentIndex = 0;
    }
  }

  // 初回実行
  initSlider();

});