function editDay(element, event, formId) {
  var form = element.closest(".grid-sub").querySelector(".all-booking-component > form");
  form.classList.toggle("edit");
  element.classList.toggle("edit");
  if (element.classList.contains("edit")) {
    event.preventDefault();
    form.querySelectorAll("input, select").forEach((input) => {
      input.disabled = false;
    });
  } else {
    form.submit();
  }
}

function syncFields(from, to, fieldsToSync) {
  fieldsToSync.forEach((name) => {
    const src = from.querySelector(`[name=${name}]`);
    const target = to.querySelector(`[name=${name}]`);
    if (!src || !target) return;
    target.value = src.value;
  });
}

function editAbsence(element, event, absenceId) {
  event.preventDefault();
  var form = document.getElementById("absence_form");

  if (absenceId != 0) {
    var dataForm = document.getElementById(absenceId);
    syncFields(dataForm, form, ["date_from", "date_to", "aw_type", "aw_id"]);
  } else {
    var dataForm = element.closest(".grid-sub").querySelector(".all-booking-component > form");
    form.querySelector("[name=date_from]").value = dataForm.id.replace("time-", "");
    form.querySelector("[name=date_to]").value = dataForm.id.replace("time-", "");
  }
  form.classList.remove("hidden");
  form.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
}

function editAbwesenheit(element, event) {
  var newBookingComponent = element.closest(".grid-sub").querySelector(".new-booking-component");
  if (element.value == 0) {
    newBookingComponent.style.display = "";
  } else {
    newBookingComponent.style.display = "none";
  }
}

function navigateWeek(element, event, direction) {
  var dateInput = element.closest("form").querySelector("input[type=date]");
  var date = dateInput.valueAsDate;
  date.setDate(date.getDate() + 7 * direction);
  date.setHours(10);
  dateInput.valueAsDate = date;
}

function logoutUser() {
  fetch("/user/logout", {}).then(() => window.location.reload());
}