$(document).ready(function(){

  // Variables
  const headerContainer = document.querySelector('.header-wrapper');
  const submenu = document.querySelector('.header-submenu');
  const openSubMenu = document.querySelector('.header-navmenu__item .fa-bars');
  const sub = document.querySelectorAll('.header-submenu')[1];

  const aboutJoki = document.querySelector('.about-joki');
  const aboutHeaders = document.querySelectorAll('.about-joki__header h3');
  const aboutContent = document.querySelectorAll('.about-joki__body-item');
  const containers = document.querySelectorAll('.about-joki__body-item')

  const orderModal = document.querySelector('.order-modal');
  const orderModalOverlay = document.querySelector('.order-modal__overlay');
  const orderForm = document.querySelector('.order__form');
  const orderPhone = document.getElementById('orderTel');
  const orderName = document.getElementById('orderName');
  const orderEmail = document.getElementById('orderEmail');
  const orderOthers = document.getElementById('orderOthers');

  const callBackBtn = document.querySelector('.header_order-call');
  const callBackForm = document.querySelector('.callback-modal form');
  const callBackModal = document.querySelector('.callback-modal');
  const callBackLayout = document.querySelector('.callback-modal__layout');
  const callBackClose = document.querySelector('.callback-modal__close');
  const callbackName = document.getElementById('callback-name');
  const callbackPhone = document.getElementById('callback-phone');

  const discountModal = document.querySelector('.discount-modal');
  const discountClose = document.querySelector('.discount-modal-close');
  const discountOpen = document.querySelectorAll('.discount-item__content button');
  const discountSlider = document.querySelector('.discount-slider')
  const discountModalSlider = document.querySelector('.discount-modal-slider');

  const mainSlider = document.querySelector('.main-slider');
  const entSlider = document.querySelector('.quests-slider');
  const placesSlider = document.querySelector('.places-slider');
  const principalsSlider = document.querySelector('.principals-slider');

  const places = document.querySelectorAll('.places .owl-item');

  let scrollPos = 0;

  // Add styles
  $('#datapicker').datetimepicker({locale: 'ru', format: 'DD.MM.YYYY'});
  $('#datapicker2').datetimepicker({locale: 'ru', format: 'DD.MM.YYYY'});
  $(callbackPhone).mask('+7 (900) 000-00-00');
  $(orderPhone).mask('+7 (900) 000-00-00');
  $('[data-toggle="popover"]').popover();

  // Init sliders
  $(mainSlider).owlCarousel({
    responsive: {
      0 : {
        smartSpeed: 400,
        margin: 10,
        items: 1,
        stagePadding: 0,
        dots: true,
        loop: true,
        center: true,
        normal: false,
        lazyLoad: true,
        lazyLoadEager: 1
        // autoWidth: true
      },
      480 : {
        smartSpeed: 400,
        items: 6,
        margin: 0
      },
      768 : {
        smartSpeed: 400,
        items: 1,
        margin: 30,
        loop: true,
        autoWidth: true,
        center: true,
        dots: true,
        dotsEach: true,
        // autoplay: true,
        autoplayTimeout: 3000,
        autoplaySpeed: 1000,
        autoplayHoverPause: true
        // nav: true,
        // navText: ['<div class="principals-slider__prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>','<div class="principals-slider__next"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>'],
      }
    }
  });
  $(entSlider).owlCarousel({
    responsive: {
      0 : {
        smartSpeed: 400,
        margin: 80,
        items: 1,
        stagePadding: 60,
        dots: false,
        autoWidth: false,
        loop:true
      },
      360 : {
        smartSpeed: 400,
        margin: 10,
        items: 1,
        stagePadding: 60,
        dots: false,
        loop:true,
        autoWidth: false
      },
      480 : {
        smartSpeed: 400,
        items: 1,
        stagePadding: 60,
        margin: 20,
        loop: true,
        dots: false,
        autoWidth: false
      },
      768 : {
        smartSpeed: 400,
        margin: 50,
        items: 3,
        // stagePadding: 30,
      }
    }
  });
  $(placesSlider).owlCarousel({
    responsive : {
      0 : {
        smartSpeed: 400,
        margin: 10,
        items: 1,
        stagePadding: 60,
        dots: false,
        loop:true,
        autoWidth: false
      },
      360 : {
        smartSpeed: 400,
        margin: 10,
        items: 1,
        stagePadding: 60,
        dots: false,
        loop:true,
        autoWidth: false
      },
      480 : {
        smartSpeed: 400,
        margin: 10,
        items: 1,
        stagePadding: 60,
        dots: false,
        loop:true,
        autoWidth: false
      },
      768: {
        smartSpeed: 400,
        margin: 150,
        item: 1,
        autoWidth: true,
        nav: true,
        dots: false,
        loop: true,
      }
    }

  });
  $(discountSlider).owlCarousel({
    responsive : {
      0 : {
        smartSpeed: 400,
        margin: 80,
        items: 1,
        stagePadding: 60,
        dots: false,
        loop:true
      },
      360 : {
        smartSpeed: 400,
        margin: 35,
        items: 1,
        stagePadding: 60,
        dots: false,
        loop:true
      },
      480 : {
        smartSpeed: 400,
        items: 1,
        stagePadding: 60,
        margin: 20,
        loop: true,
        dots: false,
        autoWidth: false
      },
      1200: {
        margin: 10,
        smartSpeed: 400,
        item: 3,
        // autoWidth: true,
        nav: true,
        navText: ['<div class="discount-slider__prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>','<div class="discount-slider__next"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>'],
        dots: false,
        loop: true,
      }
    }

  });
  $(discountModalSlider).owlCarousel({
    responsive: {
      0 : {
        smartSpeed: 400,
        margin: 10,
        items: 1,
        stagePadding: 0,
        dots: false,
        loop: true,
        center: true,
        normal: false,
        // lazyLoad: true,
        // lazyLoadEager: 1
        // autoWidth: true
      },
      480 : {
        smartSpeed: 400,
        items: 6,
        margin: 0
      },
      768 : {
        smartSpeed: 400,
        items: 1,
        margin: 30,
        nav: false,
        dots: false,
        loop: true
        // loop: true,
        // autoWidth: true,
        // center: true,
        // dots: true,
        // dotsEach: true,
        // autoplay: true,
        // autoplayTimeout: 3000,
        // autoplaySpeed: 1000,
        // autoplayHoverPause: true
        // nav: true,
        // navText: ['<div class="principals-slider__prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>','<div class="principals-slider__next"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>'],
      }
    }
  });
  $(principalsSlider).owlCarousel({
    responsive: {
      0 : {
        smartSpeed: 400,
        margin: 30,
        items: 1,
        stagePadding: 40,
        dots: false,
        loop: true,
        // center: true,
        autoWidth: true,
        // normal: false
      },
      480 : {
        smartSpeed: 400,
        items: 2,
        stagePadding: 10,
        margin: 30,
        loop: true,
        dots: false,
        autoWidth: false
      },
      1200 : {
        smartSpeed: 400,
        dots: false,
        items: 6,
        margin: 30,
        loop: true,
        autoWidth: false,
        nav: true,
        navText: ['<div class="principals-slider__prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>','<div class="principals-slider__next"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>'],
      }

    }
  });
  $(discountModalSlider).owlCarousel();


  // Add listeners
  if(discountClose){
    discountOpen.forEach((item, index) => {
      item.addEventListener('click', () => {
        $(discountModal).show();
        owl.trigger("to.owl.carousel", index, 100);
      });
    });

    discountModal.addEventListener('click', (e) => {
      let target = e.target;
      if(target.classList.contains('discount-modal-layout')){
        $(discountModal).hide();
      }
    })

    discountClose.addEventListener('click', $(discountModal).hide)

    $(".discount-modal-slider-nav-next").click(function() {
      owl.trigger("next.owl.carousel");
    });

    $(".discount-modal-slider-nav-prev").click(function() {
      owl.trigger("prev.owl.carousel");
    });
  }

  if (places) {
    const placesItems = Array.from(places).filter(item => !item.classList.contains('cloned'));

    placesItems.forEach((currentItem, index) => {
      const placesSpans = currentItem.querySelectorAll('.places-img span');

      placesSpans[0].textContent = index + 1;
      placesSpans[1].textContent = placesItems.length;
    });
  }

  $(orderForm).on('submit', (e) => {
    e.preventDefault();

    var formData = {
      orderName: orderName.value,
      orderTel: orderPhone.value,
      orderEmail: orderEmail.value,
      orderOthers: orderOthers.value,
    }

    $.ajax({
      url: $(orderForm).attr('action'),
      type: 'POST',
      data: formData,
      success: function () {
        $(orderModal).show();
        $("body").css("overflow","hidden");
      },
      error: function(request, txtstatus, errorThrown){
        console.log(request);
        console.log(txtstatus);
        console.log(errorThrown);
      }
    });

  })

  orderModal && orderModal.addEventListener('click', (e) => {
    if (!e.target.closest('.container')){
      $(orderModal).hide();
      $("body").css("overflow","auto");
    }
  })

  $('.packages-item a').on( 'click', function(){
    var el = $(this);
    var dest = el.attr('href'); // получаем направление
    if(dest !== undefined && dest !== '') { // проверяем существование
      $('html').animate({
            scrollTop: $(dest).offset().top // прокручиваем страницу к требуемому элементу
          }, 500 // скорость прокрутки
      );
    }
    return false;
  });

  callBackBtn.addEventListener('click', (e) => {
    e.preventDefault();

    callBackModal.style.display = 'block'
    $(document.body).css("overflow","hidden");
  })

  callBackLayout.addEventListener('click', () => {
    callBackModal.style.display = 'none';
    $(document.body).css("overflow","auto");
  })

  callBackClose.addEventListener('click', () => {
    callBackModal.style.display = 'none'
    $(document.body).css("overflow","auto");
  })

  callBackForm.addEventListener('submit', (e) => {
    e.preventDefault();

    const formData = {
      name: callbackName.value,
      phone: callbackPhone.value,
    }
    const action = $(callBackForm).attr('action');

    $.ajax({
      url: action,
      type: 'POST',
      data: formData,
      success: function () {
        callBackModal.style.display = 'none'

        $(orderModal).show();
        callbackName.value = ''
        callbackPhone.value = ''
      },
      error: function(request, txtstatus, errorThrown){
        console.error(request);
        console.error(txtstatus);
        console.error(errorThrown);
      }
    });

  })

  orderModalOverlay && orderModalOverlay.addEventListener('click', $(orderModal).hide);

  window.addEventListener('scroll', () => {
    if (!headerContainer) return

    let st = $(this).scrollTop();
    if (!st || st < 199) return;

    if (st > scrollPos) headerContainer && headerContainer.classList.add('header-menu__hide');
    else headerContainer && headerContainer.classList.remove('header-menu__hide');

    scrollPos = st;
  })

  if (aboutJoki) {
    let content = 'about';

    aboutHeaders.forEach(item => {
      item.addEventListener('click', () => {
        aboutHeaders.forEach(header => header.classList.remove('active'))

        item.classList.add('active');
        content = item.dataset.content;

        aboutContent.forEach(currentItem => {
          if (currentItem.dataset.content === content) {
            $(currentItem).show();
          } else{
            $(currentItem).hide();
          }
        });
      })
    });
  }

  if (document.documentElement.clientWidth <= '425') {
    const closeSubmenu = document.createElement('a');

    closeSubmenu.classList.add('header-submenu-close-sub');
    closeSubmenu.innerHTML = `<li class="header-submenu__item header-submenu__item-close"><i class="fa fa-times" aria-hidden="true"></i></li>`

    submenu.insertAdjacentElement('afterbegin', closeSubmenu);

    closeSubmenu.addEventListener('click', $(submenu).show)

    openSubMenu.closest('li').addEventListener('click', () => {
      if (sub.style.display === 'block') {
        $(sub).hide();
        openSubMenu.closest('li').style.background = '#fff';
      } else {
        $(sub).show();
        openSubMenu.closest('li').style.background = '#f2f2f2';
      }
    });
  }

  if (window.location.hash === '#feedback') {
    aboutHeaders.forEach(header => header.classList.remove('active'))

    document.querySelector(`.about-joki__header [data-content='feedback']`).classList.add('active')

    containers.forEach(cont => cont.style.display = 'none')

    document.querySelector(`.about-joki__body-item[data-content='feedback']`).style.display = 'block'
  }

});