(function ($) {
  $(document).ready(function () {
    const url = window.location.href;
    //Sidebar product cart
    $(".nav-cart").on("click", function (e) {
      $(".cart-product").toggleClass( "active" );
    });
    
    $(".nav-search").on("click", function (e) {
      $(".search-product").toggleClass( "active" );
    });

    $(".close-sidebar-cart").on("click", function (e) {
      $(".cart-product").removeClass("active");
    });

    // $(".verde").click(function (e) {
    //   let level = $(this).data("level");
    //   let progress = $(this).parents(".card-product-attr").find("i");
    //   let addToCart = $(this).parents().find(".add-to-cart a");
    //   progress.attr("class", "step-0");
    //   addToCart.attr("data-level", level);
    // });
    // $(".pinton").click(function (e) {
    //   let level = $(this).data("level");
    //   let progress = $(this).parents(".card-product-attr").find("i");
    //   let addToCart = $(this).parents().find(".add-to-cart a");
    //   progress.attr("class", "step-1");
    //   addToCart.attr("data-level", level);
    // });
    // $(".maduro").click(function (e) {
    //   let level = $(this).data("level");
    //   let progress = $(this).parents(".card-product-attr").find("i");
    //   let addToCart = $(this).parents().find(".add-to-cart a");
    //   progress.attr("class", "step-2");
    //   addToCart.attr("data-level", level);
    // });

    // const connectSlider = document.getElementsByClassName("slider-connect");
    // for (var i = 0; i < connectSlider.length; i++) {
    //   Distribute(connectSlider.item(i));
    // }

    document.querySelectorAll(".slider-connect").forEach(function (elemnt) {
      noUiSlider.create(elemnt, {
        start: 50,
        step: 50,
        connect: "lower",
        range: {
          min: 0,
          max: 100,
        },
      });
      
      elemnt.noUiSlider.on("update", function (values, handle) {
        if (values[handle] === "0.00") {
          let parent = $(elemnt).parent().find(".add-to-cart a").get(0);
          let madurez = $(elemnt).parent().find(".card-attr-option .verde").data('attr-id');
          $(parent).attr("data-attr", "verde");
          $(parent).attr("data-attr-id", madurez);
        } else if (values[handle] === "50.00") {
          let parent = $(elemnt).parent().find(".add-to-cart a").get(0);
          let madurez = $(elemnt).parent().find(".card-attr-option .pinton").data('attr-id');
          $(parent).attr("data-attr", "pinto");
          $(parent).attr("data-attr-id", madurez);
        } else {
          let parent = $(elemnt).parent().find(".add-to-cart a").get(0);
          let madurez = $(elemnt).parent().find(".card-attr-option .maduro").data('attr-id');
          $(parent).attr("data-attr", "maduro");
          $(parent).attr("data-attr-id", madurez);
        }
      });
    });
    // connectSlider.forEach(function (elemnt) {

    // });

    //quantity product
    $(".more").click(function () {
      console.log("more");
      var inpt = $(this)
        .parents(".product-quantity, .quantity")
        .find(".number");
      var val = parseInt(inpt.text());
      if (val < 0) inpt.text((val = 0));
      inpt.text(val + 1);
    });

    $(".less").click(function () {
      console.log("less");
      var inpt = $(this)
        .parents(".product-quantity, .quantity")
        .find(".number");
      var val = parseInt(inpt.text());
      if (val < 1) inpt.text((val = 1));
      if (val == 1) return;
      inpt.text(val - 1);
    });

    //add to cart
    $(".add_to_cart_button").on("click", function (e) {
      e.preventDefault();
      $(this).css({ "justify-content": "center" });
      $(this).html('<i class="fas fa-spinner fa-pulse"></i>');
      let product_id = $(this).data("product_id");
      let quantity = $(this).parents(".active").find(".number").text();
      let attr_id = $(this).data("attr-id");
      let attr = $(this).data("attr");

      // attribute_madurez=pinton&quantity=1&add-to-cart=344&product_id=344&variation_id=444
      if (attr_id != undefined) {
        $.get(
        url +
          "?add-to-cart=" +
          product_id +
          "&quantity=" +
          quantity +
          "&attribute_madurez=" +
          attr +
          "&variation_id=" +
          attr_id,
        function (res) {
          if (res) {
            location.reload();
          }
        }
      );
      } else {
        $.get(
        url +
          "?add-to-cart=" +
          product_id +
          "&quantity=" +
          quantity,
        function (res) {
          if (res) {
            location.reload();
          }
        }
      );
      }
    });
    

    //remove to cart
    $(".remove-product").on("click", function (e) {
      e.preventDefault();
      $(this).html('<i class="fas fa-spinner fa-pulse"></i>');
      let remove_product = $(this).attr("href");
      $.get(remove_product, function (res) {
        if (res) {
          location.reload();
        }
      });
    });

    //Badge notification product cart
    var badge = jQuery(".cart-product .cart-product-body").last().data("badge");
    jQuery(".badge").text(badge);

    $(".banner.owl-carousel").owlCarousel({
      loop: true,
      margin: 0,
      nav: false,
      autoplay: true,
      dots: true,
      responsive: {
        0: {
          items: 1,
        },
        600: {
          items: 1,
        },
        1000: {
          items: 1,
        },
      },
    });

    $(".products .owl-carousel").owlCarousel({
      loop: true,
      margin: 0,
      nav: true,
      autoplay: false,
      dots: false,
      responsive: {
        0: {
          items: 1,
        },
        600: {
          items: 3,
        },
        1000: {
          items: 4,
        },
      },
    });

    $(".brands .owl-carousel").owlCarousel({
      loop: true,
      margin: 0,
      nav: false,
      autoplay: true,
      dots: false,
      responsive: {
        0: {
          items: 1,
        },
        600: {
          items: 2,
        },
        1000: {
          items: 4,
        },
      },
    });

    $(".related-product .owl-carousel").owlCarousel({
      loop: true,
      margin: 10,
      dots: false,
      nav: false,
      responsive: {
        0: {
          items: 1,
        },
        600: {
          items: 3,
        },
        1000: {
          items: 4,
        },
      },
    });

    $(".ingredients .owl-carousel").owlCarousel({
      loop: true,
      margin: 10,
      dots: false,
      nav: true,
      responsive: {
        0: {
          items: 1,
        },
        600: {
          items: 2,
        },
        1000: {
          items: 2,
        },
      },
    });
  });
})(jQuery);