

function showForm(type) {

  const buttons = document.querySelectorAll(".tab-btn");

  buttons.forEach(btn => btn.classList.remove("active"));

  if (type === "quotation") {

    document.getElementById("quotation-form").classList.add("active-form");

    document.getElementById("enquiry-form").classList.remove("active-form");

    buttons[0].classList.add("active");

  } else {

    document.getElementById("enquiry-form").classList.add("active-form");

    document.getElementById("quotation-form").classList.remove("active-form");

    buttons[1].classList.add("active");

  }

}



function toMeters(value, unit) {
  value = parseFloat(value);
  if (isNaN(value)) return 0;

  if (unit === "cm") return value / 100;
  if (unit === "in") return value * 0.0254;
  return value;
}


function filterItems() {
  let category = document.getElementById("q-category").value;
  let items = document.getElementById("q-item").options;

 
  document.getElementById("q-item").value = "";

  for (let i = 0; i < items.length; i++) {
    let option = items[i];

    if (!option.value) continue;

    let itemCategory = option.getAttribute("data-category");

    if (category === "" || itemCategory === category) {
      option.style.display = "block";
    } else {
      option.style.display = "none";
    }
  }

 
  resetColors();
}


function filterColors() {
  let itemId = document.getElementById("q-item").value;
  let colors = document.getElementById("q-color").options;

  document.getElementById("q-color").value = "";

  for (let i = 0; i < colors.length; i++) {
    let option = colors[i];

    if (!option.value) continue;

    let productId = option.getAttribute("data-product");

    if (!itemId || productId === itemId) {
      option.style.display = "block";
    } else {
      option.style.display = "none";
    }
  }
}


function resetColors() {
  let colors = document.getElementById("q-color").options;

  for (let i = 0; i < colors.length; i++) {
    colors[i].style.display = "block";
  }

  document.getElementById("q-color").value = "";
}


function sendQuotation() {

  let name = document.getElementById("q-name").value;
  let phone = document.getElementById("q-phone").value;

  let category = document.getElementById("q-category");
  let categoryText = category.options[category.selectedIndex]?.text || "";

  let item = document.getElementById("q-item");
  let itemText = item.options[item.selectedIndex]?.text || "";

  let color = document.getElementById("q-color").value;

  let details = document.getElementById("q-details").value;

  let width = document.getElementById("q-width").value;
  let widthUnit = document.getElementById("q-width-unit").value;

  let height = document.getElementById("q-height").value;
  let heightUnit = document.getElementById("q-height-unit").value;

  let widthM = toMeters(width, widthUnit);
  let heightM = toMeters(height, heightUnit);

  let message =
`QUOTATION REQUEST - MARIA CURTAINS

Name: ${name}
Phone: ${phone}

Category: ${categoryText}
Item: ${itemText}
Color: ${color}

Width: ${width} ${widthUnit} (${widthM.toFixed(2)} m)
Height: ${height} ${heightUnit} (${heightM.toFixed(2)} m)

Additional Details:
${details}`;

  let url = "https://wa.me/254724361914?text=" + encodeURIComponent(message);

  window.open(url, "_blank");
}



function sendEnquiry() {

  let message =
`CUSTOMER ENQUIRY

Name:
${document.getElementById("e-name").value}

Phone:
${document.getElementById("e-phone").value}

Message:
${document.getElementById("e-message").value}`;

  let url =
"https://wa.me/254724361914?text=" +
encodeURIComponent(message);

  window.open(url);

}



function changeCurtainColor(color) {

  document.getElementById("color-overlay")
  .style.background = color;

}


let filteredCards = [];

document.addEventListener("DOMContentLoaded", function () {

    const searchInput = document.getElementById("productSearch");
    const searchBtn = document.getElementById("searchBtn");

    const products = document.querySelectorAll(".product-card");

    function runSearch() {

        const value = searchInput.value.toLowerCase().trim();

        filteredCards = [];

        products.forEach(card => {

            const name = card.getAttribute("data-name") || "";
            const colors = card.getAttribute("data-colors") || "";

            if (name.includes(value) || colors.includes(value)) {

                card.style.display = "block";
                filteredCards.push(card);

            } else {
                card.style.display = "none";
            }

        });

       
        currentPage = 1;
        createPaginationButtons();
        showPage(currentPage);
    }

    searchBtn.addEventListener("click", runSearch);

    searchInput.addEventListener("keypress", function (e) {
        if (e.key === "Enter") {
            runSearch();
        }
    });

});





document.addEventListener("DOMContentLoaded", () => {

  const hamburger =
  document.getElementById("hamburger");

  const navMenu =
  document.getElementById("nav-menu-wrapper");

  

  

  if (hamburger && navMenu) {

    hamburger.addEventListener("click", (e) => {

  e.stopPropagation();

  navMenu.classList.toggle("active");

  hamburger.classList.toggle("active");

});

  }



  

  const dropdowns =
  document.querySelectorAll(".dropdown");

  dropdowns.forEach(dropdown => {

    const dropdownBtn =
    dropdown.querySelector(".dropbtn");

    if (dropdownBtn) {

      dropdownBtn.addEventListener("click", (e) => {

        e.stopPropagation();

        dropdown.classList.toggle("active");

      });

    }

  });

  

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

    if (
      navMenu &&
      hamburger &&
      !navMenu.contains(e.target) &&
      !hamburger.contains(e.target)
    ) {

      navMenu.classList.remove("active");

      hamburger.classList.remove("active");

    }

    dropdowns.forEach(dropdown => {

      if (!dropdown.contains(e.target)) {

        dropdown.classList.remove("active");

      }

    });

  });

});



const productCards =
document.querySelectorAll(".product-card");

const paginationNumbers =
document.getElementById("paginationNumbers");

const prevPageBtn =
document.getElementById("prevPage");

const nextPageBtn =
document.getElementById("nextPage");

const productsPerPage = 12;

let currentPage = 1;



const totalPages =
Math.ceil(productCards.length / productsPerPage);



function showPage(page){

  const cards = getActiveCards();

  const start = (page - 1) * productsPerPage;
  const end = start + productsPerPage;

  cards.forEach((card, index) => {

    if(index >= start && index < end){
      card.style.display = "block";
    } else {
      card.style.display = "none";
    }

  });

  updatePaginationButtons();
}



function createPaginationButtons(){

  const cards = getActiveCards();

  const pages = Math.ceil(cards.length / productsPerPage);

  paginationNumbers.innerHTML = "";

  for(let i = 1; i <= pages; i++){

    const button = document.createElement("button");
    button.classList.add("pagination-btn");
    button.innerText = i;

    if(i === currentPage){
      button.classList.add("active");
    }

    button.addEventListener("click", () => {
      currentPage = i;
      showPage(currentPage);
    });

    paginationNumbers.appendChild(button);
  }
}



function updatePaginationButtons(){

  const buttons =
  document.querySelectorAll(".pagination-btn");

  buttons.forEach((button, index) => {

    button.classList.remove("active");

    if(index + 1 === currentPage){

      button.classList.add("active");

    }

  });

}



nextPageBtn.addEventListener("click", () => {

  if(currentPage < totalPages){

    currentPage++;

    showPage(currentPage);

  }

});



prevPageBtn.addEventListener("click", () => {

  if(currentPage > 1){

    currentPage--;

    showPage(currentPage);

  }

});







