//메인 슬라이드
var mainSwiper = new Swiper('.mainSwiper', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  autoplay: {
    delay: 5000,
  },
  effect: 'fade',
  fadeEffect: {
    crossFade: true,
  },
});

//메인 보트 인포
var boatSwiperer = new Swiper('.boatInfo', {
  slidesPerView: 1,
  spaceBetween: 30,

  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    clickable: true,
  },

  autoplay: {
    delay: 3000,
  },
});

//요트마루 소개 영역

//01 탭버튼 클릭
$('.tab-container li').click(function (e) {
  e.preventDefault();
  $('.tab-container li').removeClass('on');
  $(this).addClass('on');

  let index = $('.tab-container li').index(this);
  console.log(`index`, index);

  $('.boat-intro').removeClass('on');
  $('.boatInfo').removeClass('on');

  $('.boat-intro').eq(index).addClass('on');
  $('.boatInfo').eq(index).addClass('on');
});

//요트마루 투어 콘텐츠
var tour = new Swiper('.tourSwiper', {
  slidesPerView: 1.5,
  spaceBetween: 80,

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    clickable: true,
  },
  loop: true,
  autoplay: {
    delay: 4000,
  },

  breakpoints: {
    320: {
      slidesPerView: 1,
      spaceBetween: 20,
    },
    1024: {
      slidesPerView: 1.2,
      spaceBetween: 40,
    },

    1560: {
      slidesPerView: 1.5,
      spaceBetween: 80,
    },
  },
});

//프라이빗 스와이퍼
var swiper = new Swiper('.prviateSwiper', {
  slidesPerView: 2.3,
  spaceBetween: 30,

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    clickable: true,
  },
  autoplay: {
    delay: 3000,
  },
  loop: true,
  breakpoints: {
    320: {
      slidesPerView: 2.3,
      spaceBetween: 10,
    },
    1024: {
      slidesPerView: 2.3,
      spaceBetween: 20,
    },

    1560: {
      slidesPerView: 2.3,
      spaceBetween: 30,
    },
  },
});

//프라이빗 콘텐츠 클릭시 하단으로 내리기

$('.public-tab-container li').click(function () {
  $('.public-tab-container li').removeClass('on');
  $(this).addClass('on');

  let tabIndex = $(this).index();
  // console.log(`tabIndex`, tabIndex);

  for (var i = 0; i < $('.sub-page-content').length; i++) {
    console.log(`i`, i);
    let Publicoffset = $('.sub-page-content').eq(i).offset().top;
    // console.log(`Publicoffset`, Publicoffset);
    if (tabIndex == i) {
      $('html,body').animate(
        {
          scrollTop: Publicoffset - 250,
        },
        600
      );
    }
  }
});

//요트투어 탭 스크롤
let tabBtn = $('.public-tab-container li');
let subPage = $('.sub-page-content');

$(window).scroll(function () {
  let windowScroll = $(this).scrollTop();

  subPage.each(function (index) {
    let subPageTop = $(this).offset().top;
    let subPageBottom = subPageTop + $(this).outerHeight();
    console.log(`subPageBottom`, subPageBottom);
    console.log(`subPageTop`, subPageTop);
    console.log(`windowScroll`, windowScroll);

    if (windowScroll + 280 >= subPageTop && windowScroll + 280 < subPageBottom) {
      tabBtn.removeClass('on');
      tabBtn.eq(index).addClass('on');
    }
  });
});

//faq 클릭

$('.faq-box').click(function (e) {
  e.preventDefault();
  $('.faq-box').removeClass('on');
  $('.faq-box').children('.faq-info').stop().slideUp(400);
  $(this).addClass('on');
  $(this).children('.faq-info').stop().slideDown(400);
});