{% extends "personnes/simple-form.html" %}

{% block extrascripts %}
{{ block.super }}
<script>
  $(function () {
    $('td.service ul').checkboxwidget({allCaption: "Tous"});
    $('td.periodicity').each(function (i, e) {
      var $divmenu = $('> div', e).divmenu();
      var $inputs = $('input, select', $divmenu);
      var f = function () {
        $('div .eo-divmenu-element', e).each(function (i, v) {
          if ($('select, input', v).val()) {
            console.log(i);
            $divmenu.divmenu('select', i);
          }
        });
      };
      f();
      $divmenu.on('change', 'select', function () {
        f();
      });
      var timeout;
      $divmenu.on('mouseenter', function () {
        $divmenu.divmenu('open');
      });
      $divmenu.on('mouseleave', function (e) {
        if ((typeof e.fromElement != 'undefined' && !e.fromElement.length) ||
          (typeof e.fromElement == 'undefined' && e.target.tagName != 'SELECT')) {
          $divmenu.divmenu('close');
        }
      });
      $inputs.focusin(function () {
        clearTimeout(timeout);
        $divmenu.divmenu('open');
      });
      $inputs.focusout(function () {
        timeout = setTimeout(function () {
          $divmenu.divmenu('close');
        }, 300);
      });
    });
  });
</script>
<style>
</style>
{% endblock %}

{% block appbar %}
<h2>Horaire du {{weekday}} de <span class="lastname">{{object.last_name}}</span> {{object.first_name}}</h2>
  <a href="..">Retour à la page de <span class="lastname">{{object.last_name}}</span> {{object.first_name}}</a>
{% endblock %}


{% block content %}
    <form method="post">
      <div id="form-content">
        {% csrf_token %}
        {% with formset=form %}
        {{ formset.management_form }}
        <p>Le format des dates est jj/mm/aaaa.</p>
        <table id="schedules" class="inline">
          <thead>
            <tr>
              <td><label class="required">Services</label></td>
              <td><label class="required">Heure de début</label></td>
              <td><label class="required">Heure de fin</label></td>
              <td><label class="required">Date de début</label></td>
              <td><label>Date de fin</label></td>
              <td><label>Périodicité</label></td>
              <td><label>Supprimer</label></td>
            </tr>
          </thead>
          <tbody id="timetables">
          {% for form in formset %}
            {% if form.non_field_errors %}
            <tr>
              <td colspan="6">
                <p class="error">{{ form.non_field_errors }}</p>
              </td>
             {% endif %}
            <tr class="timetable">
              <td class="service">{{ form.services }}{{ form.services.errors }}</td>
              <td class="timepicker">{{ form.start_time }}{{ form.start_time.errors }}</td>
              <td class="timepicker">{{ form.end_time }}{{ form.end_time.errors }}</td>
              <td id="start-{{ forloop.counter0 }}" class="datepicker" data-before-selector="#end-{{ forloop.counter0 }}" data-number-of-months="3">{{ form.start_date }}{{ form.start_date.errors }}</td>
              <td id="end-{{ forloop.counter0 }}" class="datepicker" data-after-selector="#start-{{ forloop.counter0 }}" data-number-of-months="3">{{ form.end_date }}{{ form.end_date.errors }}</td>
              <td>{{ form.periodicity }}{{ form.periodicity.errors }}</td>
              <td>{% if form.id.value %}{{ form.DELETE }}{% endif %}
                {% for field in form %}
                {% if field.is_hidden %}
                {{field}}
                {% endif %}
                {% endfor %}
              </td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
        {% endwith %}
      </div>
      {% block buttons %}
      <button class="enable-on-change">Modifier</button>
      <button id="add-form">Ajouter une ligne</button>
      {% endblock %}
<!--      <a href="..">{% block back-link %}Retour{% endblock %}</a>-->
    </form>
{% endblock %}

{% block page-end %}
{{ block.super }}
<script>
  $(function () {
    var completions = [];
    for (var i = 8*60; i < 21*60; i += 15) {
      var completion = ''
      var hour = Math.floor(i/60);
      var minute = i % 60;
      var c = function (v) {
        if (v < 10) {
          return '0'+v;
        }
        return v;
      }
      completions.push(''+c(hour)+':'+c(minute));
    }
    $('.timepicker input').autocomplete({delay:0, source: completions, minLength: 0});
    function addForm() {
      var count = $('.timetable').length
      var new_row = $('.timetable:first').clone(false).get(0);
      $('input', new_row).val('');
      $('input, select', new_row).each(function (i, v) {
        v.name = v.name.replace('-0-', '-' + count + '-');
      });
      $('.delete input[type="checkbox"]', new_row).remove();
      $('*', new_row).each(function (i, v) {
        if (v.id) {
          v.id = v.id.replace('-0', '-' + count);
          if ($(v).data('before-selector')) {
            var old_value = $(v).data('before-selector');
            $(v).data('before-selector', old_value.replace('-0', '-' + count));
          }
          if ($(v).data('after-selector')) {
            var old_value = $(v).data('after-selector');
            $(v).data('after-selector', old_value.replace('-0', '-' + count));
          }
        }
      });

      $(new_row).appendTo($('#timetables'));
      $('#id_timetable_set-TOTAL_FORMS').val(count+1);
      window.calebasse_dialogs();
      return false;
    }
    $('#add-form').click(addForm);
  });
</script>
{% endblock %}
