{% extends "chrono/manager_agenda_view.html" %}
{% load i18n gadjo %}

{% block breadcrumb %}
  {{ block.super }}
  <li class="ariane--list-item">
    <a class="ariane--link" aria-current="page">{% trans "Add booking" %}</a>
  </li>
{% endblock %}

{% block appbar %}
  <h2>{% trans "Add booking" %}</h2>
{% endblock %}

{% block content %}
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form|with_template }}
    <div class="buttons">
      <button class="submit-button">{% trans "Go to booking form" %}</button>
      <a class="cancel" href="..">{% trans 'Cancel' %}</a>
    </div>

    <script>
      $('select#id_meeting_type,select#id_day').change(function(){
        meeting_type = $('select#id_meeting_type').val();
        day = $('#id_day').val();
        parsed_day = new Date(day);
        next_day = parsed_day.setDate(parsed_day.getDate() + 1);
        $.ajax({
          'url': "{% url 'api-agenda-meetings' agenda_identifier=agenda.slug %}" + meeting_type + "/datetimes/",
          'data': {
            date_start: $('#id_day').val(),
            date_end: new Date(next_day).toISOString().split('T')[0],
            hide_disabled: true,
            {% if agenda.ignore_bookings_delays %}bypass_delays: true,{% endif %}
          },
          dataType: "json",
        }).done(function(data) {
          selected_slot = $('select#id_slot_datetime option:selected').text() ;
          $('select#id_slot_datetime').empty();
          $.each(data.data, function(index, slot){
            $('select#id_slot_datetime').append($('<option/>', {
              value: slot.datetime,
              text: new Date(slot.datetime).toLocaleTimeString("{{ locale }}", {hour: '2-digit', minute: '2-digit'}),
            }));
            $('select#id_slot_datetime option:contains("' + selected_slot + '")').attr('selected', 'selected');
          });
        });
      });
    </script>
  </form>
{% endblock %}