{% extends "chrono/manager_event_detail.html" %}
{% load static i18n %}

{% block breadcrumb %}
  {{ block.super }}
  <a href="{% url 'chrono-manager-event-check' pk=agenda.pk event_pk=object.pk %}">{% trans "Check" %}</a>
{% endblock %}

{% block appbar_actions %}{% endblock %}

{% block content %}
  <div class="section">
    <h3>
      {% blocktrans with booked_places=object.booked_places places=object.places %}Bookings ({{ booked_places }}/{{ places }}){% endblocktrans %}
    </h3>
    <div>
      <form class="check-bookings-filters">
        {{ filterset.form.as_p }}
        <script>
          $(function() {
            $('form.check-bookings-filters input').on('change',
              function() {
                $(this).parents('form').submit();
              });
          });
        </script>
      </form>
      <table class="main check-bookings">
        <tbody>
          {% if results and not event.checked %}
            <tr class="booking">
              <td class="booking-actions">
                <form method="post" action="{% url 'chrono-manager-event-checked' pk=agenda.pk event_pk=object.pk %}">
                  {% csrf_token %}
                  <button class="submit-button">{% trans "Mark the event as checked" %}</button>
                </form>
              </td>
            </tr>
          {% endif %}
          {% if booked_without_status %}
            {% if not event.checked or not agenda.disable_check_update %}
              <tr class="booking all-bookings">
                <td colspan="2"><b>{% trans "Mark all bookings without status:" %}</b></td>
                <td class="booking-actions">
                  <form method="post" action="{% url 'chrono-manager-event-presence' pk=agenda.pk event_pk=object.pk %}" id="all-bookings-presence">
                    {% csrf_token %}
                    <button class="submit-button">{% trans "Presence" %}</button>
                    {% if presence_form.check_type.field.choices.1 %}{{ presence_form.check_type }}{% endif %}
                    <script>
                      $(function() {
                        $('#all-bookings-presence select').on('change',
                          function() {
                            $('#all-bookings-presence').submit();
                          });
                      });
                    </script>
                  </form>
                  <form method="post" action="{% url 'chrono-manager-event-absence' pk=agenda.pk event_pk=object.pk %}" id="all-bookings-absence">
                    {% csrf_token %}
                    <button class="submit-button">{% trans "Absence" %}</button>
                    {% if absence_form.check_type.field.choices.1 %}{{ absence_form.check_type }}{% endif %}
                    <script>
                      $(function() {
                        $('#all-bookings-absence select').on('change',
                          function() {
                            $('#all-bookings-absence').submit();
                          });
                      });
                    </script>
                  </form>
                </td>
              </tr>
            {% endif %}
          {% endif %}
          {% for result in results %}
            <tr class="booking {% if agenda.booking_extra_user_block_template %}untoggled{% endif %}">
              {% include "chrono/manager_event_check_booking_fragment.html" with booking=result %}
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {% if object.waiting_list_places %}
    <div class="section">
      <h3>
        {% blocktrans with booked_places=object.booked_waiting_list_places places=object.waiting_list_places %}Waiting List ({{ booked_places }}/{{ places }}){% endblocktrans %}
      </h3>
      <div>
        <table class="main check-bookings">
          <tbody>
            {% for booking in waiting %}
              <tr class="booking {% if agenda.booking_extra_user_block_template %}untoggled{% endif %}">
                <td class="booking-username waiting" {% if agenda.booking_extra_user_block_template %}data-extra-user-block-url="{% url 'chrono-manager-booking-extra-user-block' pk=agenda.pk booking_pk=booking.pk %}{% endif %}">
                  {% if agenda.booking_extra_user_block_template %}<span class="togglable"></span>{% endif %}
                  {{ booking.get_user_block }}{% if booking.places_count > 1 %} ({{ booking.places_count }} {% trans "places" %}){% endif %}
                </td>
                <td>{% if booking.cancellation_datetime %}({% trans "Cancelled" %}){% endif %}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  {% endif %}

  <script>
    $(function() {
      $(document).on('click', '.togglable', function(event) {
        event.preventDefault();
        var $toggle = $(this);
        var $tr = $toggle.parents('tr');
        var $td = $toggle.parents('td.booking-username');
        if ($('.extra-user-block', $td).length == 0) {
          $.ajax({
            url: $td.data('extra-user-block-url')
          }).done(function(html) {
            $tr.toggleClass('toggled').toggleClass('untoggled');
            $td.append('<div class="extra-user-block">' + html + '</div>');
          });
        } else {
          if ($tr.hasClass('toggled')) {
            $tr.toggleClass('toggled').toggleClass('untoggled');
            $('.extra-user-block', $td).hide();
          } else {
            $tr.toggleClass('toggled').toggleClass('untoggled');
            $('.extra-user-block', $td).show();
          }
        }
      });
    });
  </script>
{% endblock %}