/**********************************
 *  OPTIONS
 * This script manages the interactive behavior of option elements on a webpage.
 * It enables toggling visibility or activation states of these elements and
 * provides functionality to close them by clicking outside the designated area.
 **********************************/

// Attach click event listeners to all elements with the class '.options-plus'.
// document.querySelectorAll(".options-plus").forEach((optionPlus) => {
//   optionPlus.addEventListener("click", function () {
//     // Find the closest parent element with the class '.options'.
//     const parentOption = this.closest(".options");
//     // If such a parent element is found, toggle its 'active' class.
//     // This can show or hide additional information, open a dropdown, etc.
//     if (parentOption) {
//       parentOption.classList.toggle("active");
//     }
//   });
// });

//--------------------
const optionsClass = ".options";
const optionsPlusClass = ".options-plus";
const optionActiveClass = "active";

document.querySelectorAll(optionsPlusClass).forEach((optionPlus) => {
  optionPlus.addEventListener("click", function () {
    const parentOption = this.closest(optionsClass);
    if (parentOption) {
      parentOption.classList.toggle(optionActiveClass);
      this.classList.toggle(optionActiveClass);
    }
  });
});



// Attach a click event listener to the whole document to handle clicks outside of options containers.
document.addEventListener("mouseup", function (e) {
  // Select the container that should remain open when clicked inside. This includes both
  // the '.options-wrap' and '.options-plus' elements as valid click targets to keep the options open.
  const container = document.querySelector(".options-wrap, .options-plus");

  // Check if the click was outside the specified container.
  // The condition checks if 'container' exists and if the clicked target is not within 'container'.
  if (container && !container.contains(e.target)) {
    // If the click was outside, remove the 'active' class from all '.options' elements.
    // This effectively closes or deactivates any open or active option elements.
    document
      .querySelectorAll(".options")
      .forEach((option) => option.classList.remove("active"));
  }
});