var swiper = new Swiper("#HomeBanner", {
  autoplay: {
    delay: 3000,
  },
  // autoplay: false,
  loop: true,
  speed: 1000,
  pagination: {
    el: ".swiper-pagination-home-banner",
    clickable: true,
    type: 'bullets',     // 'bullets' | 'fraction' | 'progressbar' | 'custom'
    dynamicBullets: true // for animated bullets
  },
  navigation: {
    nextEl: ".swiper-button-next-home-banner",
    prevEl: ".swiper-button-prev-home-banner",
  },
});
var swiper = new Swiper("#CategoriesCarousel", {
  // autoplay: {
  //   delay: 3000,
  // },
  autoplay: false,
  speed: 700,
  slidesPerView: 1,
  loop: false,
  spaceBetween: 15,
  pagination: {
    el: ".swiper-pagination-categories-carousel",
    clickable: true,
    type: "progressbar",
  },
  navigation: {
    nextEl: ".swiper-button-next-categories-carousel",
    prevEl: ".swiper-button-prev-categories-carousel",
  },
  breakpoints: {
    100: {
      slidesPerView: 1.2,
      spaceBetween: 5,
    },
    260: {
      slidesPerView: 1.6,
      spaceBetween: 5,
    },
    370: {
      slidesPerView: 2.2,
      spaceBetween: 10,
    },
    574: {
      slidesPerView: 2.2,
      spaceBetween: 12,
    },
    768: {
      slidesPerView: 3,
      spaceBetween: 15,
    },
    992: {
      slidesPerView: 4,
      spaceBetween: 15,
    },
    1200: {
      slidesPerView: 5,
      spaceBetween: 20,
    },
    1400: {
      slidesPerView: 5,
      spaceBetween: 20,
    },
    1700: {
      slidesPerView: 5,
      spaceBetween: 20,
    },
  },
});
var swiper = new Swiper("#ShopCarousel", {
  // autoplay: {
  //   delay: 3000,
  // },
  autoplay: false,
  speed: 700,
  slidesPerView: 1,
  loop: false,
  spaceBetween: 15,
  pagination: {
    el: ".swiper-pagination-shop-carousel",
    clickable: true,
    type: "progressbar",
  },
  navigation: {
    nextEl: ".swiper-button-next-shop-carousel",
    prevEl: ".swiper-button-prev-shop-carousel",
  },
  breakpoints: {
    100: {
      slidesPerView: 1.2,
      spaceBetween: 5,
    },
    260: {
      slidesPerView: 1.6,
      spaceBetween: 5,
    },
    370: {
      slidesPerView: 2.2,
      spaceBetween: 10,
    },
    574: {
      slidesPerView: 2.2,
      spaceBetween: 12,
    },
    768: {
      slidesPerView: 3,
      spaceBetween: 15,
    },
    992: {
      slidesPerView: 4,
      spaceBetween: 15,
    },
    1200: {
      slidesPerView: 4,
      spaceBetween: 20,
    },
    1400: {
      slidesPerView: 4,
      spaceBetween: 20,
    },
    1700: {
      slidesPerView: 4,
      spaceBetween: 20,
    },
  },
});
var swiper = new Swiper("#NewArrivals", {
  // autoplay: {
  //   delay: 3000,
  // },
  autoplay: false,
  speed: 700,
  slidesPerView: 1,
  loop: false,
  spaceBetween: 15,
  pagination: {
    el: ".swiper-pagination-new-arrivals",
    clickable: true,
    type: "progressbar",
  },
  navigation: {
    nextEl: ".swiper-button-next-new-arrivals",
    prevEl: ".swiper-button-prev-new-arrivals",
  },
  breakpoints: {
    100: {
      slidesPerView: 1.2,
      spaceBetween: 5,
    },
    260: {
      slidesPerView: 1.6,
      spaceBetween: 5,
    },
    370: {
      slidesPerView: 2.2,
      spaceBetween: 10,
    },
    574: {
      slidesPerView: 2.2,
      spaceBetween: 12,
    },
    768: {
      slidesPerView: 3,
      spaceBetween: 15,
    },
    992: {
      slidesPerView: 4,
      spaceBetween: 15,
    },
    1200: {
      slidesPerView: 4,
      spaceBetween: 20,
    },
    1400: {
      slidesPerView: 4,
      spaceBetween: 20,
    },
    1700: {
      slidesPerView: 4,
      spaceBetween: 20,
    },
  },
});
var swiper = new Swiper("#ReceptionCollections", {
  // autoplay: {
  //   delay: 3000,
  // },
  autoplay: false,
  speed: 700,
  slidesPerView: 1,
  loop: false,
  spaceBetween: 15,
  pagination: {
    el: ".swiper-pagination-reception-collections",
    clickable: true,
    type: "progressbar",
  },
  navigation: {
    nextEl: ".swiper-button-next-reception-collections",
    prevEl: ".swiper-button-prev-reception-collections",
  },
  breakpoints: {
    100: {
      slidesPerView: 1.2,
      spaceBetween: 5,
    },
    260: {
      slidesPerView: 1.6,
      spaceBetween: 5,
    },
    370: {
      slidesPerView: 2.2,
      spaceBetween: 10,
    },
    574: {
      slidesPerView: 2.2,
      spaceBetween: 12,
    },
    768: {
      slidesPerView: 3,
      spaceBetween: 15,
    },
    992: {
      slidesPerView: 4,
      spaceBetween: 15,
    },
    1200: {
      slidesPerView: 4,
      spaceBetween: 20,
    },
    1400: {
      slidesPerView: 4,
      spaceBetween: 20,
    },
    1700: {
      slidesPerView: 4,
      spaceBetween: 20,
    },
  },
});
var swiper = new Swiper("#ReceptionCollections", {
  // autoplay: {
  //   delay: 3000,
  // },
  autoplay: false,
  speed: 700,
  slidesPerView: 1,
  loop: false,
  spaceBetween: 15,
  pagination: {
    el: ".swiper-pagination-reception-collections",
    clickable: true,
    type: "progressbar",
  },
  navigation: {
    nextEl: ".swiper-button-next-reception-collections",
    prevEl: ".swiper-button-prev-reception-collections",
  },
  breakpoints: {
    100: {
      slidesPerView: 1.2,
      spaceBetween: 5,
    },
    260: {
      slidesPerView: 1.6,
      spaceBetween: 5,
    },
    370: {
      slidesPerView: 2.2,
      spaceBetween: 10,
    },
    574: {
      slidesPerView: 2.2,
      spaceBetween: 12,
    },
    768: {
      slidesPerView: 3,
      spaceBetween: 15,
    },
    992: {
      slidesPerView: 4,
      spaceBetween: 15,
    },
    1200: {
      slidesPerView: 4,
      spaceBetween: 20,
    },
    1400: {
      slidesPerView: 4,
      spaceBetween: 20,
    },
    1700: {
      slidesPerView: 4,
      spaceBetween: 20,
    },
  },
});
var swiper = new Swiper("#ReviewCarousel", {
  // autoplay: {
  //   delay: 3000,
  // },
  autoplay: false,
  speed: 700,
  slidesPerView: 1,
  loop: false,
  spaceBetween: 15,
  pagination: {
    el: ".swiper-pagination-review-carousel",
    clickable: true,
    type: "progressbar",
  },
  navigation: {
    nextEl: ".swiper-button-next-review-carousel",
    prevEl: ".swiper-button-prev-review-carousel",
  },
  breakpoints: {
    100: {
      slidesPerView: 1.2,
      spaceBetween: 5,
    },
    260: {
      slidesPerView: 1.2,
      spaceBetween: 5,
    },
    370: {
      slidesPerView: 1.2,
      spaceBetween: 10,
    },
    574: {
      slidesPerView: 2.2,
      spaceBetween: 12,
    },
    768: {
      slidesPerView: 3,
      spaceBetween: 15,
    },
    992: {
      slidesPerView: 3,
      spaceBetween: 15,
    },
    1200: {
      slidesPerView: 3,
      spaceBetween: 20,
    },
    1400: {
      slidesPerView: 3,
      spaceBetween: 20,
    },
    1700: {
      slidesPerView: 3,
      spaceBetween: 20,
    },
  },
});

var swiper = new Swiper("#BlogCarousel", {
  // autoplay: {
  //   delay: 3000,
  // },
  autoplay: false,
  speed: 700,
  slidesPerView: 1,
  loop: false,
  spaceBetween: 15,
  pagination: {
    el: ".swiper-pagination-blog-carousel",
    clickable: true,
    type: "progressbar",
  },
  navigation: {
    nextEl: ".swiper-button-next-blog-carousel",
    prevEl: ".swiper-button-prev-blog-carousel",
  },
  breakpoints: {
    100: {
      slidesPerView: 1.2,
      spaceBetween: 5,
    },
    260: {
      slidesPerView: 1.2,
      spaceBetween: 5,
    },
    370: {
      slidesPerView: 1.2,
      spaceBetween: 10,
    },
    574: {
      slidesPerView: 2.2,
      spaceBetween: 12,
    },
    768: {
      slidesPerView: 3,
      spaceBetween: 15,
    },
    992: {
      slidesPerView: 3,
      spaceBetween: 15,
    },
    1200: {
      slidesPerView: 3,
      spaceBetween: 20,
    },
    1400: {
      slidesPerView: 3,
      spaceBetween: 20,
    },
    1700: {
      slidesPerView: 3,
      spaceBetween: 20,
    },
  },
});

const thumbSwiper = new Swiper(".thumb-slider", {
  direction: "vertical",
  // autoHeight: true,
  slidesPerView: 4,
  spaceBetween: 10,
  watchSlidesProgress: true,
  navigation: {
    nextEl: '.swiper-button-next-thumbnail',
    prevEl: '.swiper-button-prev-thumbnail',
  },
  breakpoints: {
    1920: {
      slidesPerView: 5,
      spaceBetween: 20,
    },
    1700: {
      slidesPerView: 5,
      spaceBetween: 20,
    },
    1200: {
      slidesPerView: 5,
      spaceBetween: 10,
    },
    992: {
      slidesPerView: 5,
      spaceBetween: 10,
    },
    768: {
      slidesPerView: 4,
      spaceBetween: 10,
    },
    574: {
      slidesPerView: 4,
      spaceBetween: 10,
    },
    0: {
      slidesPerView: 4,
      spaceBetween: 10,
    }
  }
});

const mainSwiper = new Swiper(".main-slider", {
  spaceBetween: 0,
  autoplay: false,
  thumbs: {
    swiper: thumbSwiper,
  },
});

$(".searchbtn").click(function () {
  $(".searchbx").toggleClass('active');
});
$('.searchoverlay').on('click', function(e){
  e.preventDefault();
  if($(".searchbx").hasClass('active')){
    $(".searchbx").removeClass('active');
  }
});

// Sticky Navigation
// let lastScrollTop = 0;
// document.addEventListener("scroll", function(e){ 
//   let header = document.querySelector('.headercontainer')
//   let st = window.pageYOffset || document.documentElement.scrollTop; 
//   if (st > lastScrollTop){
//     if(window.pageYOffset > 0){
//       header.classList.add('sticky'); 
//    }
//    if(window.pageYOffset > 500){
//        header.classList.add('sticky-hide');
//    }
//    } else {
//      if(window.pageYOffset == 0){
//         header.classList.remove('sticky'); 
//      }else {
//         header.classList.remove('sticky-hide');
//      }
//    }
//    lastScrollTop = st <= 0 ? 0 : st;
// }, false);



$(window).scroll(function() {
  var wScroll=$(this).scrollTop();

  if(wScroll>$('.headerbtm').outerHeight(true)){
      $(".headerbtm").addClass("sticky");
  } else {
      $(".headerbtm").removeClass("sticky");
  }
});


$('body').prepend( $( '<div class="layoutovarlay"></div>' ) );
$('.navigation').prepend( $( '<div class="layoutovarlay2"></div>' ) );
$(".NavBar").click(function () {
  $("body").toggleClass('layout-expanded2');
});
$('.layoutovarlay2').on('click', function(e){
  e.preventDefault();
  if($("body").hasClass('layout-expanded2')){
    $("body").removeClass('layout-expanded2');
  }
});


