const form = document.getElementById("myForm");
const formControls = form.querySelectorAll("input, textarea, select");
const submitButton = document.getElementById("submitButton");
const message = document.getElementById("message");
const messagebox = document.getElementById("messagebox");

// メッセージボックスのデフォルト設定
messagebox.style.display ="block";
message.textContent = "設定を変更すると、ページ末尾の「保存」ボタンが有効になります。";

// サブミットボタンをデフォルトで disabled にする。
submitButton.setAttribute("disabled", "disabled");

// 各フォーム入力要素の初期設定
document.getElementById("inputField").value = "hogehoge" ;
document.getElementById("checkBox1").checked = "true" ;
document.getElementById("checkBox2").checked = "true" ;
document.getElementById("radiobutton1").checked = "true" ;

// コントロールの変更を監視
formControls.forEach(control => {
  control.addEventListener("input", updateSubmitButtonState);
  control.addEventListener("change", updateSubmitButtonState);
});

// いずれかのコントロールの値が変更された場合、submitButtonを有効化
function updateSubmitButtonState() {
  let anyValueChanged = false;
  formControls.forEach(control => {
    if (control.type !== "radio" || control.checked) {
      if (control.type === "checkbox" || control.type === "radio") {
        if (control.checked !== control.defaultChecked) {
          anyValueChanged = true;
        }
      } else if (control.value !== control.defaultValue) {
        anyValueChanged = true;
      }
    }
  });

  if (anyValueChanged) {
    submitButton.removeAttribute("disabled"); //サブミットボタンを有効化
    message.textContent = "設定が変更されました。設定内容を保存するには、ページ末尾の「保存」ボタンを押してください。";
    messagebox.classList.remove("bg-primary-subtle");
    messagebox.classList.add("bg-danger-subtle"); //メッセージボックスの背景色を差し替え
  }
}


// フォームの送信時のダミー処理
form.addEventListener("submit", function(event) {
  event.preventDefault(); // フォームの実際の送信を防ぐ
  submitButton.setAttribute("disabled", "disabled"); //サブミットボタンを無効化
  message.textContent = "設定が保存されました。";
  messagebox.classList.remove("bg-danger-subtle");
  messagebox.classList.add("bg-success-subtle"); //メッセージボックスの背景色を差し替え
});