const services = document.querySelectorAll(".service");
const continueBtn = document.querySelector(".continue-btn");
const backBtn = document.querySelector(".back-btn");

let selectedServices = [];

// disable continue initially
continueBtn.disabled = true;
continueBtn.style.opacity = "0.5";

// SERVICE MULTI SELECT
services.forEach((service) => {
  service.addEventListener("click", () => {
    const serviceName = service.querySelector("p").innerText;

    service.classList.toggle("active");

    if (selectedServices.includes(serviceName)) {
      selectedServices = selectedServices.filter(
        (item) => item !== serviceName
      );
    } else {
      selectedServices.push(serviceName);
    }

    if (selectedServices.length > 0) {
      continueBtn.disabled = false;
      continueBtn.style.opacity = "1";
      
    } else {
      continueBtn.disabled = true;
      continueBtn.style.opacity = "0.5";

    }
  });
});

// CONTINUE → MERGE DATA + GO TO PAGE 4
continueBtn.addEventListener("click", () => {
  const personalDetails = JSON.parse(localStorage.getItem("personalDetails"));

  const finalData = {
    ...personalDetails,
    services: selectedServices,
  };

  localStorage.setItem("bookingData", JSON.stringify(finalData));

  window.location.href = "../html/page4.html";
});

// BACK → PAGE 2
// BACK → PAGE 2
backBtn.addEventListener("click", () => {
  window.location.href = "../html/page2.html";
});

document.addEventListener("DOMContentLoaded", () => {
  const searchInput = document.querySelector(".search-bar input");
  const services = document.querySelectorAll(".service");

  searchInput.addEventListener("input", () => {
    const searchValue = searchInput.value.toLowerCase().trim();

    services.forEach((service) => {
      const serviceName = service.querySelector("p").innerText.toLowerCase();

      if (serviceName.includes(searchValue)) {
        service.style.display = "flex"; // show
      } else {
        service.style.display = "none"; // hide
      }
    });
  });
});
