/*NAVBAR MENU*/
let menuToggle = document.querySelector(".menuToggle");
let menuMobile = document.querySelector(".navul-wrapper");
let dropDownlinks = document.querySelector(".dropDownlinks");


document.getElementById('menuToggle').addEventListener(
  'click',
  function() {
    this.classList.toggle('menuToggle-active'),
    menuMobile.classList.toggle('open');
  }
);

document.addEventListener("DOMContentLoaded", function(){
  if (window.innerWidth < 1100) {
    document.getElementById('services-flex').addEventListener(
      'click',
      function() {
        this.classList.toggle('services-active'),
        dropDownlinks.classList.toggle('open');
      }
    );
  }

}); 




/*ANIMATIONS*/
const hidden = document.querySelectorAll(".hidden"),
  hiddentwo = document.querySelectorAll(".hiddentwo"),
  hiddenintro = document.querySelectorAll(".hiddenintro"),
  observer = new IntersectionObserver(
    (e) => {
      e.forEach((e) => {
        console.log(e),
          e.target.classList.toggle("show", e.isIntersecting),
          e.isIntersecting && observer.unobserve(e.target);
      });
    },
    { rootMargin: "0px", threshold: 0.6 }
  ),
  hiddenobs = new IntersectionObserver(
    (e) => {
      e.forEach((e) => {
        console.log(e),
          e.target.classList.toggle("show", e.isIntersecting),
          e.isIntersecting && hiddenobs.unobserve(e.target);
      });
    },
    { rootMargin: "0px", threshold: 0 }
  );
hidden.forEach((e) => {
  observer.observe(e);
}),
  hiddentwo.forEach((e) => {
    observer.observe(e);
  }),
  hiddenintro.forEach((e) => {
    hiddenobs.observe(e);
  });

  /*Review Slider*/ 
var swiper = new Swiper(".mySwiper", {
  slidesPerView: 1,
  centeredSlides: !1,
  slidesPerGroupSkip: 1,
  grabCursor: !0,
  keyboard: { enabled: !0 },
  navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" },
  pagination: { el: ".swiper-pagination", clickable: !1, dynamicBullets: !0 },
  breakpoints: {
    0: { slidesPerView: 1 },
    650: { slidesPerView: 2 },
    1100: { slidesPerView: 3 },
  },
});

/*Projects Filter*/
const liItem = document.querySelectorAll(".fitler-src button"),
  imgItem = document.querySelectorAll(".projectsImages img ");
liItem.forEach((e) => {
  e.onclick = function () {
    liItem.forEach((e) => {
      e.className = "";
    }),
      (e.className = "active");
    let r = e.textContent;
    imgItem.forEach((e) => {
      (e.style.display = "none"),
        (e.getAttribute("data-filter") == r.toLowerCase() || "All" == r) &&
          (e.style.display = "block");
    });
  };
});
/*Image Pop-up*/
const popimage = [...document.querySelectorAll(".pop-image")],
  indexCount = document.querySelector(".index-wrapper h3"),
  popup = document.querySelector(".popup-image"),
  closeWrap = document.querySelector(".close-wrapper"),
  circleOne = document.querySelector(".circle"),
  circleTwo = document.querySelector(".circle2"),
  largeImage = document.querySelector(".large-image"),
  largeImagetwo = document.querySelector(".large-imagetwo"),
  largeImagethree = document.querySelector(".large-imagethree"),
  largeImagefour = document.querySelector(".large-imagefour"),
  largeImagefive = document.querySelector(".large-imagefive"),
  updateImage = (e) => {
    if ((path = largeImage)) {
      let r = `images/CarpentrypageImages/carpproject${e + 1}.jpg`;
      (largeImage.src = r), (indexCount.innerHTML = `${e + 1}/10`), (index = e);
    } else if ((path = largeImagetwo)) {
      let o = `images/ConcretepageImages/concproj${e + 1}.webp`;
      (largeImagetwo.src = o),
        (indexCount.innerHTML = `${e + 1}/6`),
        (index = e);
    } else if ((path = largeImagethree)) {
      let t = `images/Morepageimages/moreprojimg${e + 1}.webp`;
      (largeImagethree.src = t),
        (indexCount.innerHTML = `${e + 1}/10`),
        (index = e);
    } else if ((path = largeImagefour)) {
      let i = `images/GutterspageImages/guttersproj${e + 1}.jpg`;
      (largeImagefour.src = i),
        (indexCount.innerHTML = `${e + 1}/11`),
        (index = e);
    } else if ((path = largeImagefive)) {
      let a = `images/Filtersectionimages/filter${e + 1}.webp`;
      (largeImagefive.src = a),
        (indexCount.innerHTML = `${e + 1}/24`),
        (index = e);
    }
  };
popimage.forEach((e, r) => {
  e.addEventListener("click", () => {
    updateImage(r), popup.classList.toggle("active");
  });
}),
  circleOne &&
    circleOne.addEventListener("click", () => {
      index < popimage.length - 1 && updateImage(index + 1);
    }),
  circleTwo &&
    circleTwo.addEventListener("click", () => {
      index > 0 && updateImage(index - 1);
    }),
  closeWrap &&
    closeWrap.addEventListener("click", () => {
      popup.classList.toggle("active");
    });
    /*FORM*/
let popupform = document.getElementById("confirmation-form"),
  popupformfaulty = document.getElementById("confirmation-faulty"),
  numbercheck = document.getElementById("telephone-number"),
  regex = /^(\()?\d{3}(\))?(-|\s)?\d{3}(-|\s)\d{4}$/;
function closePopup() {
  popupform.classList.remove("open-confirmation"),
    popupformfaulty.classList.remove("open-confirmation");
}
var form = document.getElementById("my-form");
async function handleSubmit(e) {
  e.preventDefault();
  var r = new FormData(e.target);
  fetch(e.target.action, {
    method: form.method,
    body: r,
    headers: { Accept: "application/json" },
  })
    .then((e) => {
      e.ok
        ? (popupform.classList.add("open-confirmation"), form.reset())
        : e.json().then((e) => {
            Object.hasOwn(e, "errors")
              ? popupformfaulty.classList.add("open-confirmation")
              : numbercheck != regex &&
                popupformfaulty.classList.add("open-confirmation");
          });
    })
    .catch((e) => {});
}
form.addEventListener("submit", handleSubmit);