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

// --------------
const searchBtn = document.querySelector(".search-btn");

searchBtn.addEventListener("click", (e) => {
  e.preventDefault();   // ✅ page reload stop
});
// -------------

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
      }
    });
  });
});
*/

// ---------- FINAL JS --------------
const services = document.querySelectorAll(".service");
const continueBtn = document.querySelector(".continue-btn-btn");
const backBtn = document.querySelector(".back-btn");
const searchBtn = document.querySelector(".search-btn");

// ✅ stop reload on search btn
if (searchBtn) {
  searchBtn.addEventListener("click", (e) => e.preventDefault());
}

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

// ✅ helper: continue button state
function updateContinueState() {
  const anyChecked = document.querySelectorAll('input[name="service[]"]:checked').length > 0;
  continueBtn.disabled = !anyChecked;
  continueBtn.style.opacity = anyChecked ? "1" : "0.5";
}

// ✅ SERVICE MULTI SELECT (card click -> checkbox sync)
services.forEach((service) => {
  const checkbox = service.querySelector('input[type="checkbox"]');
  const labelTextNode = service.querySelector("p"); // contains checkbox + name

  // name ko clean tarike se store kar lo
  const serviceName = checkbox ? checkbox.value.trim() : (labelTextNode?.innerText || "").trim();
  service.dataset.name = serviceName.toLowerCase();

  // page load pe agar checked ho (rare), active class sync
  if (checkbox && checkbox.checked) service.classList.add("active");

  service.addEventListener("click", (e) => {
    // agar directly checkbox pe click ho raha hai, to double toggle mat karo
    if (e.target.tagName.toLowerCase() === "input") {
      service.classList.toggle("active", checkbox.checked);
      updateContinueState();
      return;
    }

    // card click -> checkbox toggle
    if (checkbox) {
      checkbox.checked = !checkbox.checked;
      service.classList.toggle("active", checkbox.checked);
    } else {
      service.classList.toggle("active");
    }

    updateContinueState();
  });
});

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

// ✅ SEARCH typing filter (name basis)
document.addEventListener("DOMContentLoaded", () => {
  const searchInput = document.querySelector(".search-bar input");

  if (!searchInput) return;

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

    services.forEach((service) => {
      const name = service.dataset.name || "";
      service.style.display = name.includes(q) ? "flex" : "none";
    });
  });

  // initial state
  updateContinueState();
});
