$(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(visualNum);

    $visualSlide.on("init", function (event, slick, nextSlide) {
      $("#mainVisualCon .slick-dots").find("li").eq(0).addClass("active-item");
      $visualSlideItem.eq(0).addClass("active-item");
      $visualSlideItem.eq(0).find(".visual-txt-con").addClass("active")
    });
    $visualSlide.on("beforeChange", function (event, slick, currentSlide, nextSlide) {
      $("#mainVisualCon .slick-dots").find("li").removeClass("active-item");
    });
    $visualSlide.on("afterChange", function (event, slick, currentSlide, nextSlide) {
      $("#mainVisualCon .slick-dots").find("li").eq(currentSlide).addClass("active-item");
      $visualSlideItem.removeClass("active-item")
      $visualSlideItem.eq(currentSlide).addClass("active-item")
      $visualSlideItem.find(".visual-txt-con").removeClass("active")
      $visualSlideItem.eq(currentSlide).find(".visual-txt-con").addClass("active")
      
    });


    $visualSlide.slick({
      slidesToShow: 1,
      autoplay: true,
      infinite: true,
      speed: 1500,
      autoplaySpeed: 3500,
      dots: true,
      fade: true,
      pauseOnHover:false,
      arrows: true,
      prevArrow: ".main-visual-controls .prev-btn",
      nextArrow: ".main-visual-controls .next-btn",
      customPaging: function (slider, i) {
        const slideNum = $(slider.$slides[i]).attr("data-title");
        console.log(slideNum)
        return (
          '<a class="progress-con"><strong class="num">' +
          slideNum +
          '</strong><div class="progress-bar"><span class="progressing"></span></div></a>'
        );
      },
    });
    // let mainSlideDots = $(".main-visual").find(".slick-dots");
    // $(".main-controls-con").find(".main-dots-controls").append(mainSlideDots)


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

  /* MAIN PRODUCT SLIDE : NOT OUTPUT */
  $(".main-company-slide").each(function () {
    var $companySlide = $(this);

    $companySlide.slick({
      slidesToShow: 1,
      infinity: true,
      speed: 1000,
      dots: false,
      arrows: true,
      responsive: [
        {
          breakpoint: 1240,
          settings: {
            slidesToShow: 1,
            dots: true,
            arrows: false,
          },
        },
        {
          breakpoint: 650,
          settings: {
            slidesToShow: 1,
            dots: true,
            arrows: false,
          },
        },
      ],
    });
  });
});