$(function () {
  $(".main-visual-slide").each(function () {
    var $visualSlide = $(this);
    var $visualSlideItem = $(this).find(".main-visual-item");
    var visualNum = $visualSlideItem.length;
    var $visualControls = $(".main-visual-controls");

    $visualControls.find(".paging-controls .total").text("0" + visualNum);

    $visualSlide.on("init", function (event, slick) {
      $(".main-visual-con .slick-dots").find("li").eq(0).addClass("active-item");
      $(".progress-bar").addClass("active")
    });

    $visualSlide.on("beforeChange", function (event, slick, currentSlide, nextSlide) {
      $(".main-visual-con .slick-dots").find("li").removeClass("active-item");
      $(this).find(".slick-dots").find("li").eq(nextSlide).addClass("active-item");
      $(".progress-bar").removeClass("active")

      $visualControls.find(".paging-controls .cur").text("0" + (nextSlide + 1));
    });
    $visualSlide.on("afterChange", function (event, slick, currentSlide, nextSlide) {
      $(".progress-bar").addClass("active");
    });


    $visualSlide.slick({
      slidesToShow: 1,
      autoplay: true,
      infinity: true,
      speed: 1000,
      dots: false,
      fade: true,
      arrows: true,
      prevArrow: ".main-visual-controls .prev-btn",
      nextArrow: ".main-visual-controls .next-btn",
    });

    $(".main-visual-pause-btn").click(function () {
      $visualSlide.slick("slickPause");
      $(this).hide();
      $(".main-visual-play-btn").show();
    });
    $(".main-visual-play-btn").click(function () {
      $visualSlide.slick("slickPlay");
      $(this).hide();
      $(".main-visual-pause-btn").show();
    });
  });

  /* MAIN PRODUCT SLIDE : NOT OUTPUT */
  $(".main-product-slide").each(function () {
    var $productSlide = $(this);
    var $productSlideItem = $(this).find(".product-item");
    var productNum = $productSlideItem.length;
    var $productControls = $(".main-prd-controls");

    $productControls.find(".paging-controls .total").text("0" + productNum);

    $productSlide.on("init", function (event, slick) {
      $(".main-product-list .slick-dots").find("li").eq(0).addClass("active-item");
      $(".main-product-list .progress-bar").addClass("active")

    });

    $productSlide.on("beforeChange", function (event, slick, currentSlide, nextSlide) {
      $(".main-product-list .slick-dots").find("li").removeClass("active-item");
      $(this).find(".slick-dots").find("li").eq(nextSlide).addClass("active-item");
      $(".progress-bar").removeClass("active")

      $productControls.find(".paging-controls .cur").text("0" + (nextSlide + 1) );
    });

    $productSlide.on("afterChange", function (event, slick, currentSlide, nextSlide) {
      $(".main-product-list .progress-bar").addClass("active");
    });


    $productSlide.slick({
      slidesToShow: 4,
      autoplay:true,
      infinity: true,
      autoplaySpeed: 3000,
      speed: 1000,
      initialSlide: 0,
      dots: false,
      pauseOnFocus: false,
      pauseOnHover: false,
      arrows: true,

      prevArrow: ".main-product-list .prev-btn",
      nextArrow: ".main-product-list .next-btn",
      responsive: [
        {
          breakpoint: 1240,
          settings: {
            slidesToShow: 1,
            dots: true,
            arrows: false,
          },
        },
        {
          breakpoint: 650,
          settings: {
            slidesToShow: 1,
            dots: true,
            arrows: false,
          },
        },
      ],
    });
  });
});