{% extends "agenda/base.html" %}
{% load widget_tweaks %}
{% load url from future %}
{% load apptags %}

{% block extrascripts %}
{{ block.super }}
<script type="text/javascript" src="{{ STATIC_URL }}/js/calebasse.reset-button.js">
</script>
<script>
  function add_datepickers(that) {
    $('input#id_date', that).datepicker({dateFormat: 'd/m/yy', showOn: 'button' });
    $('input#id_recurrence_end_date', that).datepicker({dateFormat: 'd/m/yy', showOn: 'button' });
  }
  $(function () {
    var update_periodic_event_url = "{% url 'update-periodic-event' service=service date=date pk=0 %}";
    var update_periodic_appointment_url = "{% url 'update-periodic-rdv' service=service date=date pk=0 %}";

    $('button.edit-periodic-appointment').on('click', function () {
      var id = $(this).data('event-id');
      var title = $(this).data('title');
      generic_ajaxform_dialog(update_periodic_appointment_url + id,
        title, '#event-dlg', 950, 'Modifier',
        "{% url 'periodic-events' service=service date=date %}", add_datepickers);
    });
    $('button.edit-periodic-event').on('click', function () {
      var id = $(this).data('event-id');
      var title = $(this).data('title');
      generic_ajaxform_dialog(update_periodic_event_url + id,
        title, '#event-dlg', 950, 'Modifier',
        "{% url 'periodic-events' service=service date=date %}", add_datepickers);
    });
  });
</script>
{% endblock %}

{% block appbar %}
<h2>Rendez-vous périodiques{% if worker %} de {{ worker }}{% endif %}</h2>
<a href="{% url 'agenda' service=service date=date %}">Retourner à l'agenda</a>
{% endblock %}
{% block content %}
<div id="sidebar">
  <form id="periodic-events-search-form">
    <div class="field">
      <label for="start_date">Rendez-vous périodiques possédant une occurence dans les trois mois qui suivent le&nbsp;:</label>
      {{ search_form.start_date|add_class:"datepicker-date" }}
    </div>
    <p>OU</p>
    <div class="field">
    <label for="end_date">Rendez-vous périodiques possèdant une occurence avant le&nbsp;:</label>
    {{ search_form.end_date|add_class:"datepicker-date" }}
    </div>
    <div class="field">
      {{ search_form.event_type }}
      <label for="no_end_date">{{ search_form.no_end_date }} Sans date de fin</label>
    </div>
    <div class="field">
      <label for="patient">avec le patient:</label>
      {{ search_form.patient }}
    </div>
    <div class="field">
      <label for="patient">avec le participant:</label>
      {{ search_form.worker }}
    </div>
    {% if request.GET %}
    <div class="search-reset">
    <button id="search">Rechercher</button>
    <button id="reset" class="icon-remove-sign" title="Réinitialiser"></button>
    </div>
    {% else %}
    <button id="search">Rechercher</button>
    {% endif %}
  </form>
</div>
<script>
  $('.datepicker-date').datepicker({dateFormat: 'd/m/yy', showOn: 'button'});
</script>
<div class="content">
  {% if request.GET %}
  <p>{{ object_list|length }} évènement(s) trouvé(s).</p>
  {% endif %}
  {% for event in object_list %}
  <div id="events">
    <div class="event frame" id="event-frame-{{ event.id }}">
      <h3>
        <span>{% if event.patient %}Rendez-vous patient{% else %}Évènement{% endif %}: {{ event.recurrence_description|lower }}</span>
         —
        <span class="hour">{{ event.start_datetime.time }}</span>
        {% if event.title %} — {{ event.title }} {% endif %}
        {% if event.patient.paper_id %} — {{ event.patient.paper_id }} {% endif %}
        {% if event.length %} — {{ event.length }} mn {% endif %}
        {% if event.workers_initial %} — {{ event.workers_initial }} {% endif %}
        {% if event.ressource %} — {{ event.ressource }} {% endif %}
        <span class="right">
          {% for other_service in event.services.all %}
            {% if other_service.name != service_name %}
              <span class="box {{ other_service.slug }}" title="{{ other_service.name }}"></span>
            {% endif %}
          {% endfor %}
          {% if event.description %}
            <span title="Un commentaire existe" class="icon-comment"></span>
          {% endif %}
         {% if event.event_type_id == 1 %}
           <button title="Éditer un rendez-vous" class="edit-periodic-appointment icon-edit" data-event-id="{{ event.id }}"></button>
         {% else %}
           <button title="Éditer un événement" class="edit-periodic-event icon-edit" data-event-id="{{ event.id }}">
         {% endif %}
        </span>
      </h3>
      {% if event.act_type %}
        <p>Type: {{ event.act_type }}</p>
      {% endif %}
        <p>Avec:
          {% for participant in event.participants.all %}
            {{ participant }}{% if not forloop.last %}, {% endif %}
          {% endfor %}
        </p>
    </div>
  </div>
  {% endfor %}
  {% if not request.GET %}
    <div class="big-msg-info">
      Utilisez le formulaire de recherche sur la gauche de l'écran pour afficher
      les rendez-vous périodiques correspondants.
    </div>
  {% elif not object_list %}
    <div>Pas de résultat pour votre recherche</div>
  {% endif %}
</div>
{% endblock %}

{% block dialogs %}
<div id="event-dlg" style="display: none">
</div>
{% endblock %}