// Attach click event listeners to all droplist labels to handle opening/closing droplists.
document.querySelectorAll(".droplist-label").forEach((label) => {
  label.addEventListener("click", function () {
    // Check if the label was already open before this click.
    const wasActive = this.classList.contains("open");

    // Deactivate all droplists and labels to ensure only one can be open at a time.
    document
      .querySelectorAll(".droplist, .droplist-label")
      .forEach((element) => {
        element.classList.remove("open");
      });

    // If the clicked label was not open before, activate it and its corresponding droplist.
    if (!wasActive) {
      this.classList.add("open");
      const parentDroplist = this.closest(".droplist");
      if (parentDroplist) {
        parentDroplist.classList.add("open");
      }
    }
  });
});

// Listen for clicks outside the droplists to close any open droplist.
document.addEventListener("mouseup", function (e) {
  // Determine if the click was outside the droplist area.
  const isClickInsideContainer =
    e.target.matches(".droplist-wrap, .droplist-label") ||
    e.target.closest(".droplist-wrap, .droplist-label");

  // If clicked outside, deactivate all droplists and labels.
  if (!isClickInsideContainer) {
    document
      .querySelectorAll(".droplist, .droplist-label")
      .forEach((element) => {
        element.classList.remove("open");
      });
  }
});

// Event listeners for selecting droplist options.
document.querySelectorAll(".droplist-option").forEach((option) => {
  option.addEventListener("click", function () {
    // Capture the text of the selected option.
    const name = this.textContent;

    // Update the droplist label to reflect the selected option.
    const droplist = this.closest(".droplist");
    if (droplist) {
      const label = droplist.querySelector(".droplist-label span");
      if (label) {
        label.textContent = name;
        this.closest(".droplist")
          .querySelector(".droplist-label")
          .classList.add("active");
      }

      // Reset the open state of all options within this droplist.
      droplist
        .querySelectorAll(".droplist-option")
        .forEach((opt) => opt.classList.remove("open"));
    }

    // Mark the clicked option as open.
    this.classList.add("open");

    // Close the droplist after selection.
    document
      .querySelectorAll(".droplist, .droplist-label")
      .forEach((content) => content.classList.remove("open"));
  });
});

// Additional functionality for droplist-list items, possibly for a special case like checkboxes.
document.querySelectorAll(".droplist-list").forEach((droplistList) => {
  droplistList.addEventListener("click", function () {
    // This section seems to toggle the 'open' class based on an input's checked state within the droplist.
    // The specifics of this functionality depend on the structure and intended behavior of the droplist-list items.
    const input = this.querySelector("input");
    const isChecked = input && input.checked;

    if (isChecked) {
      this.classList.add("open");
    } else {
      this.classList.remove("open");
    }
  });
});


// document.querySelectorAll(".droplist-label").forEach((label) => {
//   label.addEventListener("click", function () {
//     const wasActive = this.classList.contains("active");

//     document
//       .querySelectorAll(".droplist, .droplist-label")
//       .forEach((element) => {
//         element.classList.remove("active");
//       });

//     if (!wasActive) {
//       this.classList.add("active");
//       const parentDroplist = this.closest(".droplist");
//       if (parentDroplist) {
//         parentDroplist.classList.add("active");
//       }
//     }
//   });
// });

// document.addEventListener("mouseup", function (e) {
//   const isClickInsideContainer =
//     e.target.matches(".droplist-wrap, .droplist-label") ||
//     e.target.closest(".droplist-wrap, .droplist-label");

//   if (!isClickInsideContainer) {
//     document
//       .querySelectorAll(".droplist, .droplist-label")
//       .forEach((element) => {
//         element.classList.remove("active");
//       });
//   }
// });

// document.querySelectorAll(".droplist-option").forEach((option) => {
//   option.addEventListener("click", function () {
//     const name = this.textContent;

//     const droplist = this.closest(".droplist");
//     if (droplist) {
//       const label = droplist.querySelector(".droplist-label span");
//       if (label) {
//         label.textContent = name;
//       }

//       droplist
//         .querySelectorAll(".droplist-option")
//         .forEach((opt) => opt.classList.remove("active"));
//     }

//     this.classList.add("active");

//     document
//       .querySelectorAll(".droplist, .droplist-label")
//       .forEach((content) => content.classList.remove("active"));
//   });
// });

// document.querySelectorAll(".droplist-list").forEach((droplistList) => {
//   droplistList.addEventListener("click", function () {
//     const input = this.querySelector("input");
//     const isChecked = input && input.checked;

//     if (isChecked) {
//       this.classList.add("active");
//     } else {
//       this.classList.remove("active");
//     }
//   });
// });


// $(document).ready(function () {
//   let selectElements = document.querySelectorAll('select');

//   selectElements.forEach(function(select) {
//       let options = select.querySelectorAll('option');
//       options.forEach(function(option) {
//           if (option.textContent.trim() === "בחירה" || option.textContent.trim() === "" ) {
//               option.textContent = "---";  
//               option.setAttribute('label', '---');  
//           }
//       });
//   });
// });


/**********************************
 *  DROPLIST
 * This script enhances elements with class ".droplist-label" to function as triggers
 * for dropdown lists, allowing for an interactive selection experience. It includes
 * functionality to open/close dropdowns and select options within.
 **********************************/