document.addEventListener("DOMContentLoaded", function () {

  // ============================
  // Tabs Switching
  // ============================
  const tabs = document.querySelectorAll(".pausera-tab-button");
  const contents = document.querySelectorAll(".pausera-tab-content");

  tabs.forEach(btn => {
    btn.addEventListener("click", () => {
      tabs.forEach(b => b.classList.remove("active"));
      contents.forEach(c => c.classList.remove("active"));
      btn.classList.add("active");
      document.querySelector(`#${btn.dataset.tab}`).classList.add("active");
    });
  });

  // ============================
  // Form & Save Button Logic
  // ============================
  const form = document.getElementById("pausera-form");
  if (!form) return;
  const saveButton = form.querySelector(".pausera-save");

  const enableSave = (name, value) => {
    console.log(`✏️ Changed: [${name}] → ${value}`);
    saveButton.disabled = false;
  };

  form.querySelectorAll("input, select, textarea").forEach(field => {
    const type = field.type;

    if (type === "checkbox") {
      field.addEventListener("change", () => {
        enableSave(field.name, field.checked);
      });
    } else if (field.tagName === "SELECT") {
      field.addEventListener("change", () => {
        const val = field.multiple
          ? Array.from(field.selectedOptions).map(opt => opt.value).join(', ')
          : field.value;
        enableSave(field.name, val);
      });

      // Handle Select2
      if (jQuery && jQuery(field).hasClass('acf-style-select')) {
        jQuery(field).on('select2:select select2:unselect', () => {
          const val = field.multiple
            ? Array.from(field.selectedOptions).map(opt => opt.value).join(', ')
            : field.value;
          enableSave(field.name, val);
        });
      }

    } else {
      field.addEventListener("input", () => {
        enableSave(field.name, field.value);
      });
    }
  });

  // ============================
  // Maintenance Toggle Switch
  // ============================
  const toggleBox = document.getElementById("maintenance-toggle");
  if (toggleBox) {
    toggleBox.addEventListener("click", () => {
      const checkbox = toggleBox.querySelector("input[type=checkbox]");
      const label = toggleBox.querySelector(".pausera-toggle-label");

      checkbox.checked = !checkbox.checked;
      toggleBox.classList.toggle("active", checkbox.checked);
      label.textContent = checkbox.checked ? label.dataset.labelOn : label.dataset.labelOff;

      checkbox.dispatchEvent(new Event("change", { bubbles: true }));
      console.log("🟢 Maintenance toggled:", checkbox.checked);
    });
  }

// ============================
// On Form Submit
// ============================
form.addEventListener("submit", function (e) {
  e.preventDefault(); 
  document.getElementById("pausera-confirm-box").style.display = "flex";
});

document.getElementById("confirm-save").addEventListener("click", function () {
  document.getElementById("pausera-confirm-box").style.display = "none";
  form.submit(); 
});

document.getElementById("cancel-save").addEventListener("click", function () {
  document.getElementById("pausera-confirm-box").style.display = "none";
});


});