const discountModal = document.querySelector('.discount-modal'),
      discountClose = document.querySelector('.discount-modal-close'),
      discountOpen = document.querySelectorAll('.discount-item__content button'),
      places = document.querySelectorAll('.places .owl-item');

$('#orderTel').mask('+7 (900) 000-00-00');
$('[data-toggle="popover"]').popover();
$('.main-slider').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>'],
    }
  }
});
$('.ent-slider').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,
    }
}
});
$('.places-slider').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,
    }
  }
  
});
$('.discount-slider').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,
    }
  }
  
});
$('.discount-modal-slider').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>'],
    }
  }
});
$('.principals-slider').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>'],
    }
  
}
});

var owl=$(".discount-modal-slider");
owl.owlCarousel();
if(discountClose){
  discountOpen.forEach((item, index) => {
    item.addEventListener('click', () => {
      discountModal.style.display = 'block';
      owl.trigger("to.owl.carousel", index, 100);
    });
  });
  discountModal.addEventListener('click', (e) => {
    let target = e.target;
    if(target.classList.contains('discount-modal-layout')){
      discountModal.style.display = 'none';
    }
  })
  discountClose.addEventListener('click', () => {
    discountModal.style.display = 'none';
  })
  $(".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 = [...document.querySelectorAll('.places .owl-item')].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;
    // console.log(currentItem, index);
    
    // placesSpans[1] = placesItems.length();
  });
  
  
}
$(document).ready(function () {
  var form = $('.order__form'),
        action = $('.order__form').attr('action');   
  form.on('submit', (e) => {
    
    var formData = {
      orderName: $('#orderName').val(),
      orderTel: $('#orderTel').val(),
      orderEmail: $('#orderEmail').val(),
      orderOthers: $('#orderOthers').val(),
    }
    console.log(formData);
    
    $.ajax({
      url: action,
      type: 'POST',
      data: formData,
      success: function (response) {
        // form.html("Ваш запрос отправлен, спрсибо !");
        $('.order-modal').show();
        $("body").css("overflow","hidden"); 
      },
      error: function(request, txtstatus, errorThrown){
        console.log(request);
        console.log(txtstatus);
        console.log(errorThrown);
      }
    });
    e.preventDefault();

    
  })
  document.querySelector('.order-modal').addEventListener('click', (e) => {  
    if (!e.target.closest('.container')){
      $('.order-modal').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;
  });

  const mainSlider = $("#carousel").waterwheelCarousel({
    // separation: 135,
    separation: 435,
  });
  
  $("#carousel").swipe( {
    //Generic swipe handler for all directions
    swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
      if(direction === 'right'){
        mainSlider.prev();
      }
      if(direction === 'left'){
        mainSlider.next();
      }
    },
    //Default is 75px, set to 0 for demo so any distance triggers swipe
     threshold:0
  });
  $('#carousel-mobile').slick({
    responsive: {
      0 : {
        infinite: true,
        dots: false,
        arrows: false,
        adaptiveHeight: true
        
      },
      1200: {
        arrows: false,
        dots: true
      }
    }
  });
  document.querySelector('#carousel-mobile .slick-prev').innerHTML = '<i class="fa fa-arrow-left" aria-hidden="true"></i>';
  document.querySelector('#carousel-mobile .slick-next').innerHTML = '<i class="fa fa-arrow-right" aria-hidden="true"></i>';
});