document.addEventListener('DOMContentLoaded', () => {
  /** @type {HTMLFormElement} */
  const form = document.body.querySelector('.abrechnung_tirolkbw form');
  /** @type {HTMLCanvasElement} */
  const signature = form.querySelector('canvas');
  /** @type {HTMLInputElement} */
  const btnSubmit = form.querySelector('input[type=submit]');
  /** @type {HTMLInputElement} */
  const hiddenInputSignature = form.querySelector('input[name=signature-pad-image]');
  /** @type {HTMLElement} */
  const description = form.querySelector('.signature-pad-footer .description');

  form.addEventListener('submit', event => {
    const signatureCtx = signature.getContext('2d');
    const justWhite = !signatureCtx.getImageData(0, 0, signature.width, signature.height, { colorSpace: 'srgb', })
      .data.some(pixel => pixel !== 255);
    if (justWhite) {
      description.style.color = 'red';
      event.preventDefault();
    } else {
      description.style.color = '';
      hiddenInputSignature.value = signature.toDataURL('image/png', 0.8).split(',', 2)[1];
    }

    if (!validateForm($(form))) {
      event.preventDefault();
    }
  });

  btnSubmit.disabled = false;
});