document.addEventListener("DOMContentLoaded", () => {
  const counters = document.querySelectorAll(".counter-number");

  counters.forEach((counter) => {
    let startValue = 0;
    const endValue = +counter.getAttribute("data-target");
    const sign = counter.getAttribute("data-sign");
    const duration = 2000;
    const increment = Math.ceil((endValue / duration) * 20);

    const updateCounter = () => {
      if (startValue < endValue) {
        startValue += increment;
        counter.innerText = Math.min(startValue, endValue);
        setTimeout(updateCounter, 20);
      } else {
        counter.innerHTML = `${endValue}<span class="sign"> ${
          sign || ""
        }</span>`;
      }
    };

    updateCounter();
  });
});

// fancy box
document.addEventListener("DOMContentLoaded", function () {
  Fancybox.bind('[data-fancybox="gallery-swiper"]', {
    Toolbar: {
      display: ["zoom", "close"],
    },
    Thumbs: {
      autoStart: true,
    },
  });
});

// naviagtion bar

// slider
// banner slider
var proprtySwiper = new Swiper(".banner-slider", {
  slidesPerView: 1,
  spaceBetween: 30,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: ".banner-swiper-button-next",
    prevEl: ".banner-swiper-button-prev",
  },
  loop: true,
});

var masterSwiper = new Swiper(".masterplanSwiper", {
  spaceBetween: 30,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  breakpoints: {
    992: {
      slidesPerView: 2,
      spaceBetween: 20,
    },

    768: {
      slidesPerView: 1,
      spaceBetween: 20,
    },

    480: {
      slidesPerView: 1,
      spaceBetween: 10,
    },
    360: {
      slidesPerView: 1,
      spaceBetween: 10,
    },
  },
});

var ourVerticals = new Swiper(".Verticals", {
  spaceBetween: 30,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  breakpoints: {
    992: {
      slidesPerView: 5,
      spaceBetween: 20,
    },

    768: {
      slidesPerView: 3,
      spaceBetween: 20,
    },

    480: {
      slidesPerView: 2,
      spaceBetween: 10,
    },
    360: {
      slidesPerView: 2,
      spaceBetween: 10,
    },
  },
});

var floorSwiper = new Swiper(".mySwiper", {
  slidesPerView: 2,
  spaceBetween: 30,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

// property slider
var proprtySwiper = new Swiper(".property-slider", {
  slidesPerView: 1.2,
  spaceBetween: 30,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  loop: true,
});

var proprtySwiper = new Swiper(".amenities-slider", {
  spaceBetween: 60, // Default space
  navigation: {
    nextEl: ".swiper-button-next-amenities",
    prevEl: ".swiper-button-prev-amenities",
  },
  autoplay: {
    delay: 2000,
    disableOnInteraction: false,
  },
  loop: true,
  breakpoints: {
    992: {
      slidesPerView: 4,
      spaceBetween: 20,
    },

    768: {
      slidesPerView: 2,
      spaceBetween: 20,
    },

    480: {
      slidesPerView: 2,
      spaceBetween: 10,
    },
    320: {
      slidesPerView: 2,
      spaceBetween: 10,
    },
  },
});

var galleryslider = new Swiper(".gallery-slider", {
  slidesPerView: 3,
  spaceBetween: 0,
  centeredSlides: true,
  navigation: {
    nextEl: ".gallery-swiper-button-next",
    prevEl: ".gallery-swiper-button-prev",
  },
  autoplay: {
    delay: 2500,
  },
  loop: true,
  breakpoints: {
    992: {
      slidesPerView: 3,
      spaceBetween: 20,
    },

    768: {
      slidesPerView: 1,
      spaceBetween: 20,
    },

    480: {
      slidesPerView: 1,
      spaceBetween: 10,
    },
    320: {
      slidesPerView: 1,
      spaceBetween: 10,
    },
  },
});

function openForm() {
  document.getElementById("formModal").style.display = "block";
}

function closeForm() {
  document.getElementById("formModal").style.display = "none";
}

function flooropenForm() {
  document.getElementById("floorformModal").style.display = "block";
}

function floorcloseForm() {
  document.getElementById("floorformModal").style.display = "none";
}

// form submition
const form = document.getElementById("form");
form.addEventListener("input", () => {
  const name = document.getElementById("name").value.trim();
  const email = document.getElementById("exampleInputEmail1").value.trim();
  const phone = document.getElementById("phonenumber").value.trim();
  const checkbox = document.getElementById("exampleCheck1").checked;
  const isValidPhone = /^[0-9]{10}$/.test(phone);

  if (name && email && isValidPhone && checkbox) {
    form.submit();
  }
});

document.addEventListener("DOMContentLoaded", () => {
  const popupform = document.getElementById("popupform");

  popupform.addEventListener("input", () => {
    const name = document.getElementById("popup_name").value.trim();
    const phone = document.getElementById("popup_mobile").value.trim();
    const email = document.getElementById("popup_email").value.trim();
    const isValidPhone = /^[0-9]{10}$/.test(phone);
    if (name && email && isValidPhone) {
      popupform.submit();
    }
  });
});

// document.addEventListener("DOMContentLoaded", () => {
//   const popupform1 = document.getElementById("popupform1");

//   popupform1.addEventListener("input", () => {
//     const name = document.getElementById("floor_name").value.trim();
//     const phone = document.getElementById("floor_mobile").value.trim();
//     const email = document.getElementById("floor_email").value.trim();

//     // Phone number validation: Check for exactly 10 digits
//     const isValidPhone = /^[0-9]{10}$/.test(phone);

//     // Check if all fields are valid
//     if (name && email && isValidPhone) {
//       popupform1.submit(); // Auto-submit the form
//     }
//   });
// });

// back to top
document.addEventListener("DOMContentLoaded", () => {
  const backToTopBtn = document.getElementById("backToTop");

  window.addEventListener("scroll", () => {
    if (window.scrollY > 200) {
      backToTopBtn.style.display = "block";
    } else {
      backToTopBtn.style.display = "none";
    }
  });

  backToTopBtn.addEventListener("click", () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  });
});