{% extends "@Contao/frontend_module/_base.html.twig" %}

{% block content %}
  {% if error is defined and error %}
    <p role="alert">{{ error }}</p>
    <p><a href="{{ backUrl }}">Zurück</a></p>
  {% elseif form is defined and form %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/airbnb.css">
    <link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">
    <link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css">
    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/de.js"></script>
    <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>

    {{ form_start(form, { action: app.request.uri, attr: { 'aria-live': 'polite' } }) }}
      <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
      <input type="hidden" id="remove_image" name="remove_image" value="0">

      {{ form_row(form.title) }}
      {{ form_row(form.startDate) }}
      {{ form_row(form.endDate) }}
      {{ form_row(form.addTime) }}
      <div id="event-time-wrap" style="display:none;" hidden aria-hidden="true">
        {{ form_row(form.startTime) }}
        {{ form_row(form.endTime) }}
      </div>
      {% if form.organization_ids is defined %}
        {{ form_row(form.organization_ids) }}
      {% endif %}
      {{ form_row(form.location_id) }}
      {{ form_row(form.type) }}
      {{ form_row(form.teaser) }}
      {{ form_row(form.description) }}
      {{ form_row(form.url) }}
      {{ form_row(form.addImage) }}

      <div id="event-image-upload-wrap" style="display:none;" hidden aria-hidden="true">
        {{ form_row(form.eventUpload) }}
        {{ form_row(form.photographer) }}
        <p class="help-text">Die Angabe des Urhebers ist notwendig. Ihnen muss eine Genehmigung zur Verwendung des Bildes vorliegen.</p>
      </div>

      {{ form_row(form.termsAccepted) }}
      {{ form_row(form.isSoldOut) }}
      {{ form_row(form.isCanceled) }}
      {{ form_row(form.published) }}
      <div class="actions" aria-label="Formularaktionen">
        <button type="submit" id="save-btn" disabled>Speichern</button>
        <button type="submit" id="save-back-btn" name="save_back" value="1" disabled>Speichern und Zurück</button>
        <a href="{{ backUrl }}" aria-label="Zurück zur vorherigen Seite">Zurück</a>
      </div>
    {{ form_end(form) }}

    <script>
      (function () {
        const locationSelect = document.querySelector('select.js-location-choice');
        const organizationSelect = document.querySelector('select.js-organization-choice');
        const typeSelect = document.querySelector('select.js-event-type-choice');

        if (organizationSelect && typeof window.Choices === 'function') {
          new window.Choices(organizationSelect, {
            searchEnabled: true,
            shouldSort: false,
            removeItemButton: true,
            itemSelectText: '',
            placeholder: true,
            placeholderValue: organizationSelect.dataset.placeholder || 'Veranstalter suchen …',
            noResultsText: 'Keine Treffer',
            noChoicesText: 'Keine Optionen verfügbar'
          });
        }

        if (locationSelect && typeof window.Choices === 'function') {
          new window.Choices(locationSelect, {
            searchEnabled: true,
            shouldSort: false,
            itemSelectText: '',
            placeholder: true,
            placeholderValue: locationSelect.dataset.placeholder || 'Suchen …',
            noResultsText: 'Keine Treffer',
            noChoicesText: 'Keine Optionen verfügbar'
          });
        }

        if (typeSelect && typeof window.Choices === 'function') {
          new window.Choices(typeSelect, {
            searchEnabled: false,
            shouldSort: false,
            removeItemButton: true,
            itemSelectText: '',
            placeholder: true,
            placeholderValue: typeSelect.dataset.placeholder || 'Typen suchen …',
            noResultsText: 'Keine Treffer',
            noChoicesText: 'Keine Optionen verfügbar'
          });
        }

        if (typeof window.flatpickr === 'function') {
          const dateInputs = document.querySelectorAll('input.js-flatpickr-date');
          dateInputs.forEach(function (input) {
            window.flatpickr(input, {
              locale: 'de',
              dateFormat: 'Y-m-d',
              allowInput: true
            });
          });

          const timeInputs = document.querySelectorAll('input.js-flatpickr-time');
          timeInputs.forEach(function (input) {
            window.flatpickr(input, {
              locale: 'de',
              enableTime: true,
              noCalendar: true,
              dateFormat: 'H:i',
              time_24hr: true,
              allowInput: true
            });
          });
        }

        const addImageToggle = document.querySelector('input.js-add-image-toggle');
        const addTimeToggle = document.querySelector('input.js-add-time-toggle');
        const timeWrap = document.getElementById('event-time-wrap');
        const startTimeInput = document.getElementById('{{ form.startTime.vars.id }}');
        const imageWrap = document.getElementById('event-image-upload-wrap');
        const imageInput = document.querySelector('input.js-event-image-upload');
        const photographerInput = document.querySelector('input.js-photographer');
        const removeImageInput = document.getElementById('remove_image');
        const currentImagePath = {{ (currentImagePath is defined and currentImagePath) ? ('/' ~ currentImagePath)|json_encode|raw : 'null' }};
        const hadInitialImage = !!currentImagePath;
        let pondDirty = false;

        const form = document.querySelector('form');
        const saveButton = document.getElementById('save-btn');
        const saveBackButton = document.getElementById('save-back-btn');
        if (!form || !saveButton || !saveBackButton) {
          return;
        }
        const initial = new FormData(form);
        const hasChanges = () => {
          const current = new FormData(form);
          for (const [key, value] of current.entries()) {
            if (initial.getAll(key).join(',') !== current.getAll(key).join(',')) {
              return true;
            }
          }
          return false;
        };
        const updateButtons = () => {
          const changed = hasChanges() || pondDirty;
          saveButton.disabled = !changed;
          saveBackButton.disabled = !changed;
        };

        const setImageVisibility = () => {
          if (!addImageToggle || !imageWrap) {
            return;
          }

          addImageToggle.setAttribute('aria-controls', 'event-image-upload-wrap');
          addImageToggle.setAttribute('aria-expanded', addImageToggle.checked ? 'true' : 'false');

          imageWrap.style.display = addImageToggle.checked ? '' : 'none';
          imageWrap.hidden = !addImageToggle.checked;
          imageWrap.setAttribute('aria-hidden', addImageToggle.checked ? 'false' : 'true');

          if (photographerInput) {
            photographerInput.required = !!addImageToggle.checked;
          }

          if (!addImageToggle.checked && removeImageInput) {
            removeImageInput.value = hadInitialImage ? '1' : '0';
          }

          updateButtons();
        };

        const setTimeVisibility = () => {
          if (!addTimeToggle || !timeWrap) {
            return;
          }

          addTimeToggle.setAttribute('aria-controls', 'event-time-wrap');
          addTimeToggle.setAttribute('aria-expanded', addTimeToggle.checked ? 'true' : 'false');

          timeWrap.style.display = addTimeToggle.checked ? '' : 'none';
          timeWrap.hidden = !addTimeToggle.checked;
          timeWrap.setAttribute('aria-hidden', addTimeToggle.checked ? 'false' : 'true');

          if (startTimeInput) {
            startTimeInput.required = !!addTimeToggle.checked;
          }

          updateButtons();
        };

        if (addTimeToggle) {
          addTimeToggle.addEventListener('change', setTimeVisibility);
          setTimeVisibility();
        }

        if (addImageToggle) {
          addImageToggle.addEventListener('change', setImageVisibility);
          setImageVisibility();
        }

        if (imageInput && typeof window.FilePond !== 'undefined') {
          if (typeof window.FilePondPluginImagePreview !== 'undefined') {
            window.FilePond.registerPlugin(window.FilePondPluginImagePreview);
          }

          const filePondOptions = {
            instantUpload: false,
            storeAsFile: true,
            allowMultiple: false,
            allowReplace: true,
            credits: false,
            acceptedFileTypes: ['image/*'],
            labelIdle: 'Bild hierher ziehen oder <span class="filepond--label-action">durchsuchen</span>'
          };

          if (currentImagePath) {
            filePondOptions.files = [
              {
                source: currentImagePath,
                options: {
                  type: 'local'
                }
              }
            ];

            filePondOptions.server = {
              load: (source, load, error, progress, abort) => {
                const xhr = new XMLHttpRequest();
                xhr.open('GET', source);
                xhr.responseType = 'blob';
                xhr.onload = function () {
                  if (xhr.status >= 200 && xhr.status < 300) {
                    load(xhr.response);
                  } else {
                    error('Laden fehlgeschlagen');
                  }
                };
                xhr.onerror = function () {
                  error('Laden fehlgeschlagen');
                };
                xhr.send();

                return {
                  abort: () => {
                    xhr.abort();
                    abort();
                  }
                };
              }
            };
          }

          const pond = window.FilePond.create(imageInput, filePondOptions);

          const syncPondState = () => {
            const files = pond.getFiles();
            const hasLocalFile = files.some((file) => window.FilePond.FileOrigin && file.origin === window.FilePond.FileOrigin.LOCAL);
            const hasNewFile = files.some((file) => window.FilePond.FileOrigin && file.origin !== window.FilePond.FileOrigin.LOCAL);
            const imageEnabled = addImageToggle ? addImageToggle.checked : true;

            pondDirty = imageEnabled && (hasNewFile || (hadInitialImage && !hasLocalFile));

            if (removeImageInput) {
              if (!imageEnabled) {
                removeImageInput.value = hadInitialImage ? '1' : '0';
              } else {
                removeImageInput.value = hadInitialImage && !hasLocalFile && !hasNewFile ? '1' : '0';
              }
            }

            updateButtons();
          };

          syncPondState();

          pond.on('removefile', function () {
            syncPondState();
          });

          pond.on('addfile', function () {
            syncPondState();
          });

          pond.on('updatefiles', function () {
            syncPondState();
          });
        }

        form.addEventListener('input', function () {
          updateButtons();
        });
        form.addEventListener('change', function () {
          updateButtons();
        });
      })();
    </script>
  {% else %}
    <p>Kein Formular verfügbar.</p>
  {% endif %}
{% endblock %}