/** meal.js **/

document.addEventListener('DOMContentLoaded', function () {
  /** 月のスライド **/
  const splide01 = new Splide('.meal-splide01', {
    type: 'fade',
    rewind: true,
    autoplay: true,
    interval: 5000,
    arrows: true,
    pagination: true,
    speed: 1000,
    pauseOnHover: false,
  }).mount();

  const splide02 = new Splide('.meal-splide02', {
    type: 'fade',
    rewind: true,
    autoplay: true,
    interval: 5000,
    arrows: true,
    pagination: true,
    speed: 1000,
    pauseOnHover: false,
  }).mount();

  /** 切り替え用 **/
  const buttons = document.querySelectorAll('.meal-button');
  const panels = document.querySelectorAll('.meal-menu');

  buttons.forEach(button => {
    button.addEventListener('click', () => {
      const target = button.dataset.target;

      buttons.forEach(btn => btn.classList.remove('active'));
      button.classList.add('active');

      panels.forEach(panel => {
        const isTarget = panel.dataset.content === target;
        panel.classList.toggle('show', isTarget);

        //スライダー位置をリセット
        if (isTarget) {
          const slider = panel.querySelector('.splide');
          if (slider.classList.contains('meal-splide01')) {
            splide01.go(0);
          } else if (slider.classList.contains('meal-splide02')) {
            splide02.go(0);
          }
        }
      });
    });
  });
});