{% extends "calebasse/base.html" %}

{% load url from future %}

{% block extrascripts %}
{{ block.super }}
<script src="{{ STATIC_URL }}js/calebasse.datesel.js"></script>
<script>
  $(function() {
    $('.date').datepicker();
    $('table#actes tr').click(function() {

      $('#acte-dlg').dialog({title: 'Acte',
        width: '500px',
        buttons: [ { text: "Annuler",
          click: function() { $(this).dialog("close"); } },
        { text: "Enregistrer",
          click: function() { $(this).dialog("close"); } }
        ]}
      );

    });
    $('#new-acte').click(function() {
      $('#new-acte-dlg').dialog({title: 'Nouvel acte',
        width: '550px',
        buttons: [ { text: "Fermer",
          click: function() { $(this).dialog("close"); } },
        { text: "Ajouter",
          click: function() { $(this).dialog("close"); } }
        ]}
      );
    });
    $('#search-form input[type="checkbox"]').on('change', function () {
      $('#search-form').submit();
    });

  });
</script>
{% endblock %}

{% block header %}
  {{ block.super }}
  <span>Actes - {{ service_name }}</spam>
{% endblock %}

{% block appbar %}
<div id="appbar">
  <h2>Saisie des actes</h2>
  <a href="../..">Retourner à l'accueil</a>
  <button class="dialog-button"
          data-url="nouvel-acte/"
          data-default-button="Ajouter"
      >Ajouter un acte</button>
</div>
{% endblock %}


{% block content %}
<div id="sidebar">
  <form method="post" id="search-form">
    {% csrf_token %}
    <div>
      <h3>Rechercher dans les actes</h3>
      <h4>Patient</h4>
      {{ search_form.non_field_errors }}
      <label>Nom: {{ search_form.last_name }}</label>
      {{ search_form.last_name.errors }}
      <label>Numéro de dossier: {{ search_form.patient_record_id }}</label>
      {{ search_form.patient_record_id.errors }}
      <label>Numéro de sécu: {{ search_form.social_security_number }}</label>
      {{ search_form.social_security_number.errors }}
      <button>Rechercher</button>
      <h4>Intervenant</h4>
      <label>Nom: {{ search_form.doctor_name }}</label>
      {{ search_form.doctor_name.errors }}
      <button>Rechercher</button>
    </div>
    <div id="filtre">
      <h3>Filtrer les actes</h3>
      {{ search_form.filters }}
    </div>
  </form>
</div>

<div class="content">
  {% include 'calebasse/datesel.html' %}
  <br/>

  <table id="actes" class="main">
    <thead>
    <tr>
      <th>Dossier</th>
      <th>État</th>
      <th>Type d'acte</th>
      <th>Validation</th>
      <th>Facturation</th>
      <th>Intervenants</th>
      <th>Heure</th>
      <th>Durée</th>
    </tr>
    </thead>
    <tbody>
      {% for act in object_list %}
      {% comment %}
      FIXME: comment mettre la classe non-factu ?
      <tr class="non-factu">
      {% endcomment %}
      <tr>
        <td>
            {{ act.patient.id }}
            {{ act.patient.first_name }}
            <span class="lastname">{{ act.patient.last_name }}</span>
        </td>
        <td>FIXME: c'est quoi état ?</td>
        <td>({{ act.act_type.id }}) {{ act.act_type }}</td>
        <td>{{ act.get_state }}</td>
        <td>FIXME: facturation !!</td>
        <td>
            {% for doctor in act.doctors.all %}
            ({{ doctor.id }}) {{ doctor }}
            {% if not forloop.last %}
            <br/>
            {% endif %}
            {% endfor %}
        </td>
        <td>{{ act.parent_event.start_time|date:"H:i" }}</td>
        <td>{{ act.duration }}</td>
      </tr>
    {% endfor %}
    <!--
    <tr>
      <td>1234 Bob Léponge</td>
      <td>Traitement</td>
      <td>(11) Ortophonie</td>
      <td>Validé</td>
      <td>123-123456</td>
      <td>(10) Peyrard</td>
      <td>17:15</td>
      <td>00:45</td>
    </tr>

    <tr class="non-factu">
      <td>2345 Cindy Lop</td>
      <td>Traitement</td>
      <td>(29) Travail perso</td>
      <td>Non facturable<br/>Validé</td>
      <td></td>
      <td>(62) Grangy<br/>(81) Blondiau</td>
      <td>10:00</td>
      <td>01:00</td>
    </tr>


    <tr class="non-factu">
      <td>3456 Mark Spencer</td>
      <td>Traitement</td>
      <td>(29) Travail perso</td>
      <td>Non facturable<br/>Absence non excusée</td>
      <td></td>
      <td>(62) Grangy<br/>(81) Blondiau</td>
      <td>11:00</td>
      <td>01:00</td>
    </tr>

    <tr>
      <td>4567 John Doe</td>
      <td>Diagnostic</td>
      <td>(10) Entretien</td>
      <td>Validé</td>
      <td>124-en cours</td>
      <td>(5) Roudon</td>
      <td>14:15</td>
      <td>00:45</td>
    </tr>

    <tr class="non-factu">
      <td>5678 Philippe Maurice</td>
      <td>Traitement</td>
      <td>(16) Groupe langage</td>
      <td>Validé</td>
      <td>Acte perdu</td>
      <td>(11) Douare</td>
      <td>14:00</td>
      <td>01:00</td>
    </tr>
    -->
    </tbody>
  </table>
</div>
{% endblock %}

{% block dialogs %}

<div id="acte-dlg" style="display: none;">
  <p>1234 Bob Leponge (Traitement)</p>
  <p><select><option>(11) Ortophonie</option></select></p>
  <p>8 août 2012 - 17:15 - 45 minutes</p>

  <table>
    <tr><td width="50%">
        <h4>Intervenants</h4>
        <div id="intervenants">
          <ul>
            <li><input type="checkbox" value="Bob Léponge" checked="checked">Bob Léponge</input></li>
            <li><input type="checkbox" value="Sandy Kilo" checked="checked">Sandy Kilo</input></li>
          </ul>
          <a href="#">Ajouter</a><br/>
          <a href="#">Tout le monde</a>
        </div>
      </td>

      <td width="50%">

        <ul>
          <li>Rendez-vous pris le 5 juillet 2012 à 10:36</li>
          <li>Acte validé le 10 août 2012 à 9h10</li>
          <li>En cours de facturation (123) <button class="flat">Acte perdu</button></li>
        </ul>
      </td>
    </tr>
  </table>

  <br/>
  <br/>
  <textarea cols="50">Bla bla bla</textarea>

</div>
{% endblock %}