$(".banner").slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  arrows: false,
  autoplaySpeed: 1500,
  speed: 500,
  infinite: true,
  dots: false,
  fade: true,


  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 767,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        centerMode: false,

      }
    }
  ],

  // prevArrow: '<div class="l-arrow text-center"><i class="fa-solid fa-arrow-left"></i></div>',
  // nextArrow: '<div class="r-arrow text-center"><i class="fa-solid fa-arrow-right"></i></div>'
});
$(".slider").slick({
  slidesToShow: 8,
  slidesToScroll: 1,
  autoplay: true,
  arrows: false,
  autoplaySpeed: 1500,
  speed: 400,
  infinite: true,
  dots: false,
  fade: false,


  responsive: [
    // {
    //   breakpoint: 1280,
    //   settings: {
    //     slidesToShow: 8,
    //     slidesToScroll: 1,
    //   },
    // },
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 767,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        centerMode: false,

      }
    }
  ],

  prevArrow: '<div class="l-arrow text-center"><i class="fa-solid fa-arrow-left"></i></div>',
  nextArrow: '<div class="r-arrow text-center"><i class="fa-solid fa-arrow-right"></i></div>'
});




$(".product-slider").slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  arrows: true,
  autoplaySpeed: 1500,
  speed: 400,
  infinite: true,
  dots: false,
  fade: false,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 884,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 767,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        centerMode: false,

      },
    },
  ],
  prevArrow: '<div class="l-arrow text-center"><i class="fa-solid fa-arrow-left"></i></div>',
  nextArrow: '<div class="r-arrow text-center"><i class="fa-solid fa-arrow-right"></i></div>'

});

const tabs = document.querySelectorAll('.tabbination');
// console.log(tabs);
const lists = document.querySelectorAll('.list');

Array.from(tabs).map(item => {
  item.addEventListener('click', function () {
    const list = document.getElementById(item.name);
    console.log(list);
    for (let i of lists) {
      console.log(i, "test");
      i.style.display = "none";
    }
    list.style.display = "block";

  })

})


const AddCart = document.querySelectorAll(".AddToCart");

// console. log(AddCart);
Array.from(AddCart).map(item => {
  // console.log(item);
  item.addEventListener("click", e => {
    e.preventDefault();
    document.getElementById("cartPopup").style.opacity = "1";
    document.getElementById("cartPopup").style.visibility = "visible";

    document.querySelector(".cartPopup").addEventListener("click", e => {
      if (!item.contains(e.target) && !document.querySelector(".cartPopup").querySelector('.cartPop').contains(e.target)) {
        document.getElementById("cartPopup").style.opacity = "0";
        document.getElementById("cartPopup").style.visibility = "hidden";
      }
    })
  })
})

const AddToWish = document.querySelectorAll(".AddToWish");
Array.from(AddToWish).map(wish => {
  // console.log(wish);
  wish.addEventListener("click", e => {
    document.getElementById("wishlistPopup").style.opacity = "1";
    document.getElementById("wishlistPopup").style.visibility = "visible";

    // document.querySelector(".wishlistPop").addEventListener("click" , e=>{
    document.querySelector(".wishlistPop").addEventListener("click", e => {

      if (!wish.contains(e.target) && !document.querySelector("#wishlistPopup").querySelector(".wishPop").contains(e.target)) {

        document.getElementById("wishlistPopup").style.opacity = "0";
        document.getElementById("wishlistPopup").style.visibility = "hidden";
      }
    })
  })
})
const AddToCampare = document.querySelectorAll(".AddToCampare");
Array.from(AddToCampare).map(wish => {
  // console.log(wish);
  wish.addEventListener("click", e => {
    document.getElementById("ComparePopup").style.opacity = "1";
    document.getElementById("ComparePopup").style.visibility = "visible";

    // document.querySelector(".wishlistPop").addEventListener("click" , e=>{
    document.querySelector(".comparePop").addEventListener("click", e => {

      if (!wish.contains(e.target) && !document.querySelector("#ComparePopup").querySelector(".compop").contains(e.target)) {

        document.getElementById("ComparePopup").style.opacity = "0";
        document.getElementById("ComparePopup").style.visibility = "hidden";
      }
    })
  })
})



const rangeInput = document.querySelectorAll(".range-input input"),
  priceInput = document.querySelectorAll(".price-input input"),
  range = document.querySelector(".slider .progress");
let priceGap = 1000;

priceInput.forEach((input) => {
  input.addEventListener("input", (e) => {
    let minPrice = parseInt(priceInput[0].value),
      maxPrice = parseInt(priceInput[1].value);

    if (maxPrice - minPrice >= priceGap && maxPrice <= rangeInput[1].max) {
      if (e.target.className === "input-min") {
        rangeInput[0].value = minPrice;
        range.style.left = (minPrice / rangeInput[0].max) * 100 + "%";
      } else {
        rangeInput[1].value = maxPrice;
        range.style.right = 100 - (maxPrice / rangeInput[1].max) * 100 + "%";
      }
    }
  });
});

rangeInput.forEach((input) => {
  input.addEventListener("input", (e) => {
    let minVal = parseInt(rangeInput[0].value),
      maxVal = parseInt(rangeInput[1].value);

    if (maxVal - minVal < priceGap) {
      if (e.target.className === "range-min") {
        rangeInput[0].value = maxVal - priceGap;
      } else {
        rangeInput[1].value = minVal + priceGap;
      }
    } else {
      priceInput[0].value = minVal;
      priceInput[1].value = maxVal;
      range.style.left = (minVal / rangeInput[0].max) * 100 + "%";
      range.style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
    }
  });
});
const Login =document.querySelectorAll(".Login");
// console.log(Login);
Array.from(Login).map(logins =>{
  // console.log(logins);
logins.addEventListener("click" , e=>{  
  e.preventDefault();
  const modal= document.getElementById('login-modal');
  const sendOtp= modal.querySelector('#sendOtp');
  const userLogin= modal.querySelector('#userLogin');
  const mobileNo=document.querySelector(".mobileNo");
  
  let state=true;
  if(state){
    modal.querySelector('.login').style.transform= "scale(1)"
    modal.style.visibility="visible";
    modal.style.opacity=1;
    state=false
    sendOtp.addEventListener('click', e=>{
      document.querySelector('.mobileNo').style.display= 'none';
      document.querySelector('.optInput').style.display= 'block';
      document.querySelector('.orSection').style.display= 'none';
      document.querySelector('.logInfo').style.display= 'none';
    })
    userLogin.addEventListener('click', e=>{
      e.preventDefault();
      document.querySelector('.mobileNo').style.display= 'flex';
      if(document.querySelector('.logInfo').style.display=='block'){
      document.querySelector('.logInfo').style.display= 'none';
      }
      else{
        document.querySelector('.logInfo').style.display= 'block';
      }
    })

  }

  modal.querySelector('#closeModal').addEventListener('click', e=>{
    modal.querySelector('.login').style.transform= "scale(0)"
    modal.style.visibility="hidden";
    modal.style.opacity=0;
    state=true
  })

  modal.querySelector(".cancel").addEventListener("click" , e=>{
    e.preventDefault(); 
    document.querySelector('.mobileNo').style.display= 'block';
    document.querySelector('.optInput').style.display= 'none';
    document.querySelector('.orSection').style.display= 'block';
    document.querySelector('.logInfo').style.display= 'block';
  })
})
})

const cancelProduct = document.querySelectorAll(".cancel-Products");
        // console.log(cancelProduct);
        Array.from(cancelProduct).map(can => {
            // console.log(can);
            can.addEventListener("click", e => {
                // console.log(e);
                document.getElementById("CancelPopup").style.opacity = "1";
                document.getElementById("CancelPopup").style.visibility = "visible";

                // document.querySelector(".wishlistPop").addEventListener("click" , e=>{
                document.querySelector("#CancelPopup").addEventListener("click", e => {

                    if (!can.contains(e.target) && !document.querySelector("#CancelPopup").querySelector(".cancelpop").contains(e.target)) {

                        document.getElementById("CancelPopup").style.opacity = "0";
                        document.getElementById("CancelPopup").style.visibility = "hidden";
                    }
                })
            })
        })




const quantity = document.querySelectorAll(".quantity");

Array.from(quantity).map(item => {
  let price=0;
  let finalShow;
  item.querySelector(".Decrease").addEventListener("click", function () {
    price= item.parentElement.parentElement.querySelector('.cartItemPrice').innerHTML;
    finalShow=item.parentElement.parentElement.querySelector('.cartFinalPrice').querySelector('span')
    let val = this.parentElement.querySelector("input").value;
    if (val > 1) {
      this.parentElement.querySelector("input").value = --val;
      finalShow.innerHTML=price *val
    }
  });
  item.querySelector(".Increase").addEventListener("click", function () {
    price= item.parentElement.parentElement.querySelector('.cartItemPrice').innerHTML
    finalShow=item.parentElement.parentElement.querySelector('.cartFinalPrice').querySelector('span')
    let val = this.parentElement.querySelector("input").value;
    if (val < 20) {
      this.parentElement.querySelector("input").value = ++val;
      finalShow.innerHTML=price *val
    }
  });
  // 
})
// console.log("djknvyfbvyfbvfbvrfh");
const subTotalHandler =()=>{
  const cartFinalPrice= document.querySelectorAll(".cartFinalPrice"); 
  const total=Array.from(cartFinalPrice).reduce((acc,price)=>{
    return acc + Number(price.querySelector('span').innerHTML);
  },0);
  document.querySelector("#subTotal").innerHTML = total ; 

}
subTotalHandler();





// const btnBtn=document.querySelector(".btn_btn")
// Array.from(btnBtn).map(btn=>{
//   console.log(item);
//   btn.addEventListener("click",e=>{
//     console.log(e);
//     if(btn.style.display=="block"){
//       btn.style.add="active"
//     }
//   })
// })


// const Login =document.getElementById("login");






// const quantites=document.querySelectorAll(".quantity");
// Array.from( quantites).reduce((acc,price)=>{
//   return acc+price
// })
// const quantites=document.querySelectorAll(".quantity");
// const Increase= document.querySelectorAll(".Increase");
// const Decrease= document.querySelectorAll(".Decrease");

// const subTotal =document.querySelectorAll("#subTotal");


// const quantites = document.querySelectorAll(".quantity");
// Array.from(quantites).map(items => {

//   console.log(items);
  
//   const subTotal = document.querySelectorAll(".subTotal");
//   Array.from(subTotal).reduce((accumulator, quantites)=>{
//     return accumulator + quantites
//   } ,0)
//   console.log(quantites);
//   // console.log(subTotal);
//   // Array.from(subTotal).map(item => {

//   // });
// });
// var quantites = document.querySelectorAll(".quantity"),
// subTotal= document.querySelectorAll(".subTotal");

// function calculateTotalPrice(quantites, subTotal) {
//   // Convert quantity and price to numbers
//   quantites = parseFloat(quantites);
//   subTotal = parseFloat(subTotal);

//   // Check if the conversion was successful
//   if (isNaN(quantites) || isNaN(subTotal)) {
//       console.error('Invalid input. Please enter valid numbers for quantity and price.');
//       return;
//   }

//   // Calculate total price
//   var subTotal = quantites * subTotal;

//   // Print the total price
//   console.log('subTotal: $' + subTotal.toFixed(2));
// }

// // Example usage
// // var quantites = prompt('Enter quantity:');
// // var subTotal = prompt('Enter price per unit:');

// calculateTotalPrice(quantites, subTotal);