{% extends "layout_widget.html" %}
{% from "_macros.html" import render_manage_form_styles, render_manage_form_scripts, render_end_container_handling, render_logo, render_cropper_code, render_crop_image_form, render_jquery_steps_header, render_cropper_header, render_radio_buttons, render_field_with_errors, render_field %}

{%- block title -%}
{{ _('Create event suggestion') }}
{%- endblock -%}

{% block styles %}
{{ render_manage_form_styles() }}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jquery-steps.css')}}" />
{{ super() }}
{% endblock %}

{% block header_before_site_js %}
{{ render_manage_form_scripts() }}
{{ render_jquery_steps_header() }}
{{ render_cropper_header() }}
<script>

  function update_preview(form) {
    handle_request_start();

    var container = $("#preview_container");
    container.empty();

    var req_data = form.serialize();
    $.ajax({
            url: "{{ url_for('event_suggestion_create_for_admin_unit', id=admin_unit.id) }}?preview=true",
            type: "post",
            data: req_data,
            error: function(xhr, status, error) {
                handle_request_error(xhr, status, error);
            },
            success: function (content) {
                container.append(content);
                handle_request_success();
            }
    });
  }

  $( function() {
    var form = $("#wizard-form");
    var wizard = $("#wizard");

    form.validate({
        rules: {
          contact_email: {
            require_from_group: [1, ".contact_method_group"]
          },
          contact_phone: {
            require_from_group: [1, ".contact_method_group"]
          },
          start: {
            dateRange: ["#start", "#end"]
          },
          end: {
            dateRangeDay: ["#start", "#end"]
          }
        }
    });

    $("#start-time").rules("add", "time");
    $("#end-time").rules("add", "time");

    wizard.steps({
      headerTag: "h4",
      bodyTag: "section",
      transitionEffect: "fade",
      enablePagination: false,
      onStepChanging: function (event, currentIndex, newIndex) {
          // Allways allow previous action even if the current form is not valid!
          if (currentIndex > newIndex) {
              return true;
          }

          form.validate().settings.ignore = ":disabled,:hidden";
          var is_valid = form.valid();

          if (is_valid && (newIndex == 6)) {
            update_preview(form);
          }

          return is_valid;
      }
    });

    $('.wizard-next').click(function(e){
      e.preventDefault();
      wizard.steps('next');
    });

    $('.wizard-prev').click(function(e){
      e.preventDefault();
      wizard.steps('previous');
    });

    {{ render_cropper_code() }}

    $('#event_place_id').select2({
      width: '100%',
      language: 'de',
      tags: true,
      theme: 'bootstrap4',
      placeholder: "{{ _('Enter place or address') }}",
      createTag: createSelect2Tag,
      insertTag: insertSelect2Tag,
      templateResult: select2TemplateResult
    }).on('select2:close', function (e) {
        var data = select2GetData(e);

        if ("is_new_tag" in data) {
          if ($('#event_place_id_suffix').length) {
            $('#event_place_id_suffix').val('');
          } else {
            var input = $($.parseHTML('<input type="text" id="event_place_id_suffix" name="event_place_id_suffix" class="form-control mt-2" placeholder="Adresse" />'));
            $('#event_place_id').siblings('.select2').after(input);
          }
          $('#event_place_id_suffix').focus();
        } else {
          $('#event_place_id_suffix').remove();
        }
      });

    $('#organizer_id').select2({
      width: '100%',
      language: 'de',
      tags: true,
      theme: 'bootstrap4',
      placeholder: "{{ _('Enter organizer') }}",
      createTag: createSelect2Tag,
      insertTag: insertSelect2Tag,
      templateResult: select2TemplateResult
    }).on('select2:select', function (e) {
        var data = select2GetData(e);

        if ("is_new_tag" in data) {
          if ($('#organizer_id_suffix').length) {
            $('#organizer_id_suffix').val('');
          } else {
            var input = $($.parseHTML('<input type="text" id="organizer_id_suffix" name="organizer_id_suffix" class="form-control mt-2" placeholder="Adresse" />'));
            $('#organizer_id').siblings('.select2').after(input);
          }
          $('#organizer_id_suffix').focus();
        } else {
          $('#organizer_id_suffix').remove();
        }
      });

    {{ render_end_container_handling() }}

  });
</script>
{% endblock %}
{% block content %}
<div class="w-normal">

  <h1>{{ _('Create event suggestion') }}</h1>

  <form id="wizard-form" action="" method="POST" enctype="multipart/form-data">
    <div id="wizard">
    {{ form.hidden_tag() }}

    <h4></h4>
    <section>
      <div class="card mb-4">
        <div class="card-body">
          {% if admin_unit.logo_id %}
            <div class="mb-4 text-center"><img src="{{ url_for_image(admin_unit.logo, s=100) }}" class="img-fluid" style="max-height:10vmin;" /></div>
          {% endif %}
          <p class="card-text">
            Hier kannst du als Gast eine Veranstaltung vorschlagen, die anschließend durch <strong>{{ admin_unit.name }}</strong> geprüft wird.
            Für mehr Optionen und einen eigenen Veranstaltungskalender, kannst du dich <a href="{{ url_for('security.register') }}">kostenlos registrieren</a>.
          </p>
          <div class="text-center">
            <a class="btn btn-primary my-1 wizard-next" href="#" role="button">{{ _('Continue as guest') }}</a>
          </div>
        </div>
      </div>
    </section>

    <h4></h4>
    <section>
      <div class="card mb-4">
        <div class="card-header">
          Nutzungsbedingungen
        </div>
        <div class="card-body">
          <p class="card-text">
            Die offene Veranstaltungsdatenbank stellt allen Nutzern Daten sowohl für private als auch kommerzielle Zwecke frei nutzbar zur Verfügung.
          </p>
          {{ render_field_with_errors(form.accept_tos, ri="checkbox") }}
          <div class="d-flex justify-content-between">
            <a class="btn btn-secondary my-1 wizard-prev" href="#" role="button">{{ _('Previous') }}</a>
            <a class="btn btn-primary my-1 wizard-next" href="#" role="button">{{ _('Next') }}</a>
          </div>
        </div>
      </div>
    </section>

    <h4></h4>
    <section>
    <div class="card mb-4">
      <div class="card-header">
        {{ _('Contact') }}
      </div>
      <div class="card-body">
        <p class="card-text">
          <i class="fa fa-lock"></i> Deine Kontaktdaten werden für etwaige Rückfragen bei der Prüfung durch <strong>{{ admin_unit.name }}</strong> verwendet.
          Die Daten sind nur für die Prüfer:innen sichtbar und werden nicht öffentlich angezeigt.
        </p>

        {{ render_field_with_errors(form.contact_name) }}
        {{ render_field_with_errors(form.contact_email, class="contact_method_group") }}
        {{ render_field_with_errors(form.contact_phone, class="contact_method_group") }}
        {{ render_field_with_errors(form.contact_email_notice, ri="checkbox") }}

        <div class="d-flex justify-content-between">
          <a class="btn btn-secondary my-1 wizard-prev" href="#" role="button">{{ _('Previous') }}</a>
          <a class="btn btn-primary my-1 wizard-next" href="#" role="button">{{ _('Next') }}</a>
        </div>
      </div>
    </div>
  </section>

  <h4></h4>
  <section>
    <div class="card mb-4">
      <div class="card-header">
        {{ _('Event') }}
      </div>
      <div class="card-body">
        {{ render_field_with_errors(form.name, role="presentation", autocomplete="off") }}
        {{ render_field_with_errors(form.event_place_id, class="w-100") }}
        {{ render_field_with_errors(form.organizer_id, class="w-100") }}

        <div id="single-event-container" class="mb-3">
          {{ render_field_with_errors(form.start, **{"data-range-to":"#end", "data-range-max-days": "180", "data-allday": "#allday"}) }}
          {{ render_field_with_errors(form.allday, ri="checkbox") }}
          {{ render_field_with_errors(form.end, is_collapsible=1) }}
          <button type="button" id="recc-button" class="btn btn-outline-secondary"><i class="fas fa-history"></i> {{ _('Recurring event') }}</button>
        </div>
        <div id="recc-event-container">
          {{ render_field_with_errors(form.recurrence_rule, ri="rrule") }}
        </div>

        <div class="d-flex justify-content-between">
          <a class="btn btn-secondary my-1 wizard-prev" href="#" role="button">{{ _('Previous') }}</a>
          <a class="btn btn-primary my-1 wizard-next" href="#" role="button">{{ _('Next') }}</a>
        </div>
      </div>
    </div>
  </section>

  <h4></h4>
  <section>
    <div class="card mb-4">
      <div class="card-header">
        {{ _('Photo') }}
      </div>
      <div class="card-body">
        {% if form.photo.description %}
        <p class="card-text">
          {{ form.photo.description }}
        </p>
        {% endif %}

        {{ render_crop_image_form(form.photo) }}

        <div class="d-flex justify-content-between mt-3">
          <a class="btn btn-secondary my-1 wizard-prev" href="#" role="button">{{ _('Previous') }}</a>
          <a class="btn btn-primary my-1 wizard-next" href="#" role="button">{{ _('Next') }}</a>
        </div>
      </div>
    </div>
  </section>

  <h4></h4>
  <section>
    <div class="card mb-4">
      <div class="card-header">
        {{ _('Optional details') }}
      </div>
      <div class="card-body">
        {{ render_field_with_errors(form.description) }}
        <hr />
        {{ render_field_with_errors(form.accessible_for_free, ri="switch") }}
        {{ render_field_with_errors(form.registration_required, ri="switch") }}
        {{ render_field_with_errors(form.price_info) }}
        {{ render_field_with_errors(form.ticket_link) }}
        {{ render_field_with_errors(form.booked_up, ri="switch") }}
        {{ render_field_with_errors(form.attendance_mode, class="autocomplete w-100") }}
        <hr />
        {{ render_field_with_errors(form.target_group_origin, class="autocomplete w-100") }}
        {{ render_field_with_errors(form.kid_friendly, ri="switch") }}
        {{ render_field_with_errors(form.age_from) }}
        {{ render_field_with_errors(form.age_to) }}
        {{ render_field_with_errors(form.expected_participants) }}
        <hr />
        {{ render_field_with_errors(form.category_ids, class="autocomplete-multi w-100") }}
        {{ render_field_with_errors(form.tags) }}
        {{ render_field_with_errors(form.external_link) }}
        <div class="d-flex justify-content-between">
          <a class="btn btn-secondary my-1 wizard-prev" href="#" role="button">{{ _('Previous') }}</a>
          <a class="btn btn-primary my-1 wizard-next" href="#" role="button">{{ _('Next') }}</a>
        </div>
      </div>
    </div>
  </section>

  <h4></h4>
  <section>
    <div class="card mb-4">
      <div class="card-header">
        {{ _('Preview') }}
      </div>
      <div class="card-body">
        <p class="card-text">
          Bitte prüfe deine Eingaben in der Vorschau. Wenn alles passt, klicke auf den Button <span class="d-inline-block">&quot;{{ form.submit.label() }}&quot;.
        </p>
        <div class="card mb-4 shadow">
          <div class="card-body">
            <div id="result_container">
              <div id="preview_container"></div>
            </div>
            <div class="spinner-border m-3" role="status" id="spinner" style="display: none;">
              <span class="sr-only">Loading&hellip;</span>
            </div>
            <div class="alert alert-danger m-3" role="alert" id="error_alert" style="display: none;"></div>
          </div>
        </div>
        <div class="d-flex flex-wrap justify-content-between align-items-baseline mt-3">
          <a class="btn btn-secondary my-1 wizard-prev" href="#" role="button">{{ _('Previous') }}</a>
          {{ render_field(form.submit) }}
        </div>
      </div>
    </div>
  </section>

    </div>
  </form>

</div>
{% endblock %}