document.addEventListener('DOMContentLoaded', () => {
  // Signatur

  /** @type {HTMLFormElement} */
  const form = document.body.querySelector('.abrechnung_ravensberghalle form');
  /** @type {HTMLInputElement} */
  const btnSubmit = form.querySelector('input[type=submit]');

  btnSubmit.disabled = false;

  // Kurstag

  /** @type {HTMLDivElement} */
  const kurstagTemplate = document.body.querySelector('#kurstag-template > .kurstag');
  /** @type {HTMLDivElement} */
  const kurstageContainer = form.querySelector("#kurstage");

  function kurstageFromForm() {
    const result = [];

    for (const kurstagDiv of kurstageContainer.querySelectorAll('.kurstag')) {
      /** @type {HTMLInputElement} */
      const kurstagId = kurstagDiv.querySelector('[name="kurstag-id[]"]');
      /** @type {HTMLInputElement} */
      const kurstagDate = kurstagDiv.querySelector('[name="kurstag-date[]"]');
      /** @type {HTMLInputElement} */
      const kurstagUe = kurstagDiv.querySelector('[name="kurstag-ue[]"]');
      /** @type {HTMLInputElement} */
      const kurstagLehrinhalte = kurstagDiv.querySelector('[name="kurstag-lehrinhalte[]"]');

      result.push({
        id: kurstagId.value,
        date: kurstagDate.value,
        ue: kurstagUe.value,
        lehrinhalte: kurstagLehrinhalte.value
      });
    }

    return result;
  }

  let kurstage = kurstageFromForm();

  function updateKurstage() {
    kurstage = kurstageFromForm();
  }

  function renderKurstage() {
    const kurstageDivs = kurstage.map((kurstag, idx) => {
      const kurstagDiv = kurstagTemplate.cloneNode(true);

      /** @type {HTMLInputElement} */
      const inputKurstagId = document.createElement('input');
      inputKurstagId.type = 'hidden';
      inputKurstagId.name = 'kurstag-id[]';
      inputKurstagId.value = kurstag.id;
      kurstagDiv.appendChild(inputKurstagId);

      /** @type {HTMLInputElement} */
      const inputKurstagDate = kurstagDiv.querySelector("#kurstag-date");
      inputKurstagDate.removeAttribute('id');
      inputKurstagDate.name = 'kurstag-date[]';
      inputKurstagDate.value = kurstag.date;
      inputKurstagDate.classList.remove('hasDatepicker');
      KuferTools.InitDatePicker($(inputKurstagDate));

      /** @type {HTMLInputElement} */
      const inputKurstagUe = kurstagDiv.querySelector("#kurstag-ue");
      inputKurstagUe.removeAttribute('id');
      inputKurstagUe.name = 'kurstag-ue[]';
      inputKurstagUe.value = kurstag.ue;

      /** @type {HTMLInputElement} */
      const inputKurstagLehrinhalte = kurstagDiv.querySelector("#kurstag-lehrinhalte");
      inputKurstagLehrinhalte.removeAttribute('id');
      inputKurstagLehrinhalte.name = 'kurstag-lehrinhalte[]';
      inputKurstagLehrinhalte.value = kurstag.lehrinhalte;

      /** @type {HTMLButtonElement} */
      const btnDelete = kurstagDiv.querySelector("#kurstag-delete");
      btnDelete.removeAttribute('id');
      btnDelete.addEventListener('click', event => {
        event.preventDefault();

        updateKurstage();

        kurstage.splice(idx, 1);

        renderKurstage();
      });

      btnDelete.disabled = false;

      return kurstagDiv;
    });

    kurstageContainer.replaceChildren(...kurstageDivs);
  }

  renderKurstage();

  // Vergütung

  /** @type {HTMLDivElement} */
  const verguetungTemplate = document.body.querySelector('#verguetung-template > .verguetung');
  /** @type {HTMLDivElement} */
  const verguetungeContainer = form.querySelector("#verguetungen");
  /** @type {HTMLButtonElement} */
  const btnAddVerguetung = form.querySelector("#add-verguetung");

  function verguetungeFromForm() {
    const result = [];

    for (const verguetungDiv of verguetungeContainer.querySelectorAll('.verguetung')) {
      /** @type {HTMLInputElement} */
      const verguetungText = verguetungDiv.querySelector('[name="verguetung-text[]"]');
      /** @type {HTMLInputElement} */
      const verguetungValue = verguetungDiv.querySelector('[name="verguetung-verguetung[]"]');

      result.push({
        text: verguetungText.value,
        verguetung: verguetungValue.value
      });
    }

    return result;
  }

  let verguetungen = verguetungeFromForm();

  function updateVerguetunge() {
    verguetungen = verguetungeFromForm();
  }

  function renderVerguetungen() {
    const verguetungeDivs = verguetungen.map((verguetung, idx) => {
      const verguetungDiv = verguetungTemplate.cloneNode(true);

      /** @type {HTMLInputElement} */
      const inputVerguetungDate = verguetungDiv.querySelector("#verguetung-text");
      inputVerguetungDate.removeAttribute('id');
      inputVerguetungDate.name = 'verguetung-text[]';
      inputVerguetungDate.value = verguetung.text;

      /** @type {HTMLInputElement} */
      const inputVerguetungUe = verguetungDiv.querySelector("#verguetung-verguetung");
      inputVerguetungUe.removeAttribute('id');
      inputVerguetungUe.name = 'verguetung-verguetung[]';
      inputVerguetungUe.value = verguetung.verguetung;

      /** @type {HTMLButtonElement} */
      const btnUp = verguetungDiv.querySelector("#verguetung-up");
      btnUp.removeAttribute('id');
      if (idx !== 0) {
        btnUp.addEventListener('click', event => {
          event.preventDefault();

          updateVerguetunge();

          const tmp = verguetungen[idx];
          verguetungen[idx] = verguetungen[idx - 1];
          verguetungen[idx - 1] = tmp;

          renderVerguetungen();
        });

        btnUp.disabled = false;
      }

      /** @type {HTMLButtonElement} */
      const btnDown = verguetungDiv.querySelector("#verguetung-down");
      btnDown.removeAttribute('id');
      if (idx !== verguetungen.length - 1) {
        btnDown.addEventListener('click', event => {
          event.preventDefault();

          updateVerguetunge();

          const tmp = verguetungen[idx];
          verguetungen[idx] = verguetungen[idx + 1];
          verguetungen[idx + 1] = tmp;

          renderVerguetungen();
        });

        btnDown.disabled = false;
      }

      /** @type {HTMLButtonElement} */
      const btnDelete = verguetungDiv.querySelector("#verguetung-delete");
      btnDelete.removeAttribute('id');
      btnDelete.addEventListener('click', event => {
        event.preventDefault();

        updateVerguetunge();

        verguetungen.splice(idx, 1);

        renderVerguetungen();
      });

      btnDelete.disabled = false;

      return verguetungDiv;
    });

    verguetungeContainer.replaceChildren(...verguetungeDivs);
  }

  renderVerguetungen();

  btnAddVerguetung.addEventListener('click', event => {
    event.preventDefault();

    verguetungen = verguetungeFromForm();

    verguetungen.push({
      text: "",
      verguetung: "0,0"
    })

    renderVerguetungen();
  });

  btnAddVerguetung.disabled = false;
});