document.addEventListener("DOMContentLoaded", function () {
  // ====================================================
  // QUANTITY CONTROL
  // ====================================================

  const quantityControls = document.querySelectorAll(".quantity-control");

  quantityControls.forEach(function (control) {
    const minus = control.querySelector(".quantity-minus");

    const plus = control.querySelector(".quantity-plus");

    const input = control.querySelector('input[type="number"]');

    if (!minus || !plus || !input) {
      return;
    }

    minus.addEventListener("click", function () {
      const min = parseInt(input.min || "1", 10);

      let value = parseInt(input.value || "1", 10);

      input.value = Math.max(min, value - 1);
    });

    plus.addEventListener("click", function () {
      const max = parseInt(input.max || "999", 10);

      let value = parseInt(input.value || "1", 10);

      input.value = Math.min(max, value + 1);
    });

    input.addEventListener("change", function () {
      const min = parseInt(this.min || "1", 10);

      const max = parseInt(this.max || "999", 10);

      let value = parseInt(this.value || "1", 10);

      value = Math.max(min, Math.min(max, value));

      this.value = value;
    });
  });
});
// ====================================================
// SHOW / HIDE PASSWORD
// ====================================================

document.querySelectorAll(".password-toggle").forEach(function (button) {
  button.addEventListener("click", function () {
    const input = document.getElementById(this.dataset.target);
    if (!input) return;
    const shown = input.type === "password";
    input.type = shown ? "text" : "password";
    const icon = this.querySelector("i");
    icon?.classList.toggle("bi-eye", !shown);
    icon?.classList.toggle("bi-eye-slash", shown);
    this.setAttribute("aria-label", shown ? "Ẩn mật khẩu" : "Hiện mật khẩu");
    this.setAttribute("title", shown ? "Ẩn mật khẩu" : "Hiện mật khẩu");
  });
});
