function updateColor(id, type, newColor) {
  fetch("/admin/taxonomy", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content,
    },
    body: JSON.stringify({
      action:
        type === "region" ? "change_region_color" : "change_keyword_color",
      [type + "_id"]: id,
      [type + "_color"]: newColor,
    }),
  }).then((response) => {
    if (response.ok) {
      location.reload();
    } else {
      alert("Failed to update " + type + " color");
    }
  });
}

document
  .getElementById("region-color-form")
  .addEventListener("submit", function (event) {
    event.preventDefault();
    const regionId = this.querySelector('input[name="region_id"]').value;
    const newColor = this.querySelector('input[name="new_region_color"]').value;
    updateColor(regionId, "region", newColor);
  });

document
  .getElementById("keyword-color-form")
  .addEventListener("submit", function (event) {
    event.preventDefault();
    const keywordId = this.querySelector('input[name="keyword_id"]').value;
    const newColor = this.querySelector(
      'input[name="new_keyword_color"]'
    ).value;
    updateColor(keywordId, "keyword", newColor);
  });