////////////////////////////////////////////////////////
// DISPLAY CURRENT YEAR IN COPYRIGHT
const yearEl = document.querySelector(".year");
const currentYear = new Date().getFullYear();
yearEl.textContent = currentYear;

////////////////////////////////////////////////////////
// MOBILE NAVIGATION
const btnNavEl = document.querySelector(".btn-burger-menu");
const headerEl = document.querySelector(".hdr");
btnNavEl.addEventListener("click", function () {
  headerEl.classList.toggle("nav-open");
});

////////////////////////////////////////////////////////
// SCROLL TO TOP
var scrollToTop = document.querySelector(".scroll-to-top");

window.addEventListener("scroll", function () {
  if (this.window.pageYOffset > 300) scrollToTop.style.display = "block";
  else scrollToTop.style.display = "none";
});

scrollToTop.addEventListener("click", function () {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
});

////////////////////////////////////////////////////////
// SMOOTH SCROLLING
const allLinks = document.querySelectorAll("a:link");

allLinks.forEach(function (link) {
  link.addEventListener("click", function (e) {
    const href = link.getAttribute("href");
    if (href !== "#" && href.startsWith("#")) {
      e.preventDefault();
      const sectionEl = document.querySelector(href);
      console.log(sectionEl);
      sectionEl.scrollIntoView({ behavior: "smooth" });
    }

    if (link.classList.contains("main-nav-link"))
      headerEl.classList.toggle("nav-open");
  });
});

////////////////////////////////////////////////////////
// TRACK ORDER POP UP
document.getElementById("track").addEventListener("click", function () {
  document.querySelector(".bg-pop-up").style.display = "flex";
});

document
  .getElementById("close-track-order")
  .addEventListener("click", function () {
    document.querySelector(".bg-pop-up").style.display = "none";
    document.querySelector(".project-status-paragraph").innerHTML = "";
    document.querySelector(".project-status-paragraph").style.display = "none";
  });

////////////////////////////////////////////////////////
// VIEW MORE CLIENTS POP UP
// document
//   .getElementById("view-more-clients")
//   .addEventListener("click", function () {
//     document.querySelector(".client-bg-pop-up").style.display = "flex";
//   });

// document.getElementById("close-clients").addEventListener("click", function () {
//   document.querySelector(".client-bg-pop-up").style.display = "none";
// });

////////////////////////////////////////////////////////
// TRACK ORDER SUBMIT
document.getElementById("track-btn").addEventListener("click", function () {
  document.querySelector(".project-status-paragraph").innerHTML =
    "Project Id does not exists.";
  document.querySelector(".project-status-paragraph").style.display = "block";
  return false;
});

////////////////////////////////////////////////////////
// INVITATION POP UP
// document.getElementById("close-inv").addEventListener("click", function () {
//   document.querySelector(".bg-inv-pop-up").style.display = "none";
// });

// window.addEventListener("load", function () {
//   this.setTimeout(function open(event) {
//     document.querySelector(".bg-inv-pop-up").style.display = "block";
//   }, 2000);
// });

////////////////////////////////////////////////////////
// GALLERY FILTER
let filterItem = document.querySelectorAll(".filter-list-item");
let imgBox = document.querySelectorAll(".gallery-img-box");

for (let i = 0; i < filterItem.length; i++) {
  filterItem[i].addEventListener("click", function () {
    for (let j = 0; j < filterItem.length; j++) {
      filterItem[j].classList.remove("active");
    }
    this.classList.add("active");

    var dataFilter = this.getAttribute("data-filter");

    for (let k = 0; k < imgBox.length; k++) {
      imgBox[k].classList.remove("active");
      imgBox[k].classList.add("hide");

      if (
        imgBox[k].getAttribute("data-item") == dataFilter ||
        dataFilter == "All"
      ) {
        imgBox[k].classList.remove("hide");
        imgBox[k].classList.add("active");
        document.querySelector(".select").textContent = dataFilter;
      }
    }
  });
}

////////////////////////////////////////////////////////
// FIXING FLEXBOX GAP PROPERTY MISSING IN SOME SAFARI VERSIONS
function checkFlexGap() {
  var flex = document.createElement("div");
  flex.style.display = "flex";
  flex.style.flexDirection = "column";
  flex.style.rowGap = "1px";

  flex.appendChild(document.createElement("div"));
  flex.appendChild(document.createElement("div"));

  document.body.appendChild(flex);
  var isSupported = flex.scrollHeight === 1;
  flex.parentNode.removeChild(flex);
  console.log(isSupported);

  if (!isSupported) document.body.classList.add("no-flexbox-gap");
}
checkFlexGap();