document.addEventListener("DOMContentLoaded", function () {
  const tables = document.querySelectorAll("[data-table]");

  tables.forEach((table) => {
    const buttons = table.querySelectorAll("[data-table-btn]");
    const cells = table.querySelectorAll(
      "[data-table-tab]:not([data-table-btn])",
    );

    function activateTab(tab) {
      buttons.forEach((btn) => {
        btn.classList.toggle("is-active", btn.dataset.tableTab === tab);
      });

      cells.forEach((cell) => {
        if (window.innerWidth <= 768) {
          cell.style.display = cell.dataset.tableTab === tab ? "" : "none";
        } else {
          cell.style.display = "";
        }
      });
    }

    buttons.forEach((btn) => {
      btn.addEventListener("click", () => {
        activateTab(btn.dataset.tableTab);
      });
    });

    const activeBtn = table.querySelector("[data-table-btn].is-active");
    if (activeBtn) activateTab(activeBtn.dataset.tableTab);

    window.addEventListener("resize", () => {
      const activeBtn = table.querySelector("[data-table-btn].is-active");
      if (activeBtn) activateTab(activeBtn.dataset.tableTab);
    });
  });
});