{% extends "maraudes/base.html" %}
{% load bootstrap3 staticfiles %}

{% block title %} {{ block.super }} Compte-rendu du {{ object.date }} {% endblock %}

{% block breadcrumbs %}
  <li><a href="{% url "maraudes:index" %}">{{ object.date }}</a></li>
  <li>Compte-rendu</li>
{% endblock %}

{% block sidebar %}
    {{ block.super }}
    <div class="panel panel-primary">
      <div class="panel-body text-right">
        <h4>{% bootstrap_icon "plus" %} Création</h4>
        <div class="btn-group" role="group" aria-label="...">
          <button id="new-sujet" class="btn btn-default">{% bootstrap_icon "user" %} Sujet</button>
          <button id="new-lieu" class="btn btn-default">{% bootstrap_icon "globe" %} Lieu</button>
        </div>
        <hr />
        <h4>Finaliser</h4>
        <div class="pull-right"><a class="btn btn-primary" href="{% url 'maraudes:finalize' maraude.pk %}">
        {% bootstrap_icon "ok-circle" %} Finaliser</a></div>
      </div>
    </div>
    <div class="panel panel-danger">
      <div class="panel-body text-right">
        <h4>{% bootstrap_icon "warning-sign" %} Attention</h4>
        <p>Si vous devez créer un nouveau sujet ou lieu, pensez à le faire avant de rentrer des données ! (ou pensez à copier les notes pour les reproduire ensuite)</p>
        <p>En effet, la page sera rafraîchie après la création, effaçant toutes les données de formulaire qui n'ont pas été enregistrées</p>
      </div>
    </div>
{% endblock %}

{% block page_content %}
<script type="text/javascript" src="{% static "scripts/jquery.formset.js" %}"></script>
<script type="text/javascript">
  /* Dynamic Formsets */
  $(function() {
    $.fn.onAddForm = function(row) {
      // Load django_select2 fields
      row.find('.django-select2').djangoSelect2();
      var button = row.find('a.btn-delete')
      var text = button.text()
      button.html('<span class="glyphicon glyphicon-minus"></span> ' + text);
    };

    $.fn.onDeleteForm = function(row) {
      /*
      * Custom code when deleting dynamic form
      */
    };
  });
    $(function() {
        $('.dynamic-formset').formset({
                    prefix: '{{ inline_formset.prefix }}',
                    addText: 'Ajouter une personne',
                    deleteText: 'Supprimer',
                    addCssClass: 'btn btn-link btn-add',
                    deleteCssClass: 'btn btn-link btn-delete',
                    added: $.fn.onAddForm,
                    removed: $.fn.onDeleteForm
        });

        var text = $('a.btn-add').text()
        $('a.btn-add').html('<span class="glyphicon glyphicon-plus"></span> ' + text)
        text = $('a.btn-delete:first').text()
        $('a.btn-delete').html('<span class="glyphicon glyphicon-minus"></span> ' + text);
    });
</script>

<div class="row">
  <div class="col-lg-7 col-md-12">
    <form method="post" action="{% url 'maraudes:create' maraude.pk %}">
    {% csrf_token %}
      <div class="panel panel-primary panel-collapse">
        <div class="panel-heading">
          <h4 class="panel-title">Nouvelle rencontre</h4>
        </div>
        <div class="panel-body">
          {% include "maraudes/compterendu_form.html" %}
        </div>
        <div class="panel-footer text-right">
        {% bootstrap_button "Enregistrer" icon="save" button_type="submit" button_class="btn btn-success btn-sm" %}
        </div>
      </div>
    </form>
    {{ form.media.js }}{{ form.media.css }}
  </div>
  <div class="col-lg-5 col-md-12">
    <div id="saved-rencontres">
      <h4 class="page-header">Enregistrées</h4>
      <table class="table table-bordered">
        {% for rencontre in rencontres %}<tr><th colspan="2" class="active">{{ rencontre }}</th></tr>
        {% for observation in rencontre.observations.all %}<tr>
            <td>
              <a href="{% url "notes:details-sujet" observation.sujet.pk %}" id="sujet-name-{{observation.sujet.pk}}">{{observation.sujet}}</a>
              <a class="btn btn-link btn-xs show-stats-btn" href="#" value="{{observation.sujet.pk}}">
              {% bootstrap_icon "stats" %} Mise à jour</a>
            </td></tr>
            <tr><td>{{observation.text | linebreaks }}</td></tr>{% endfor %}{% endfor %}
      </table>
    </div>
    <div id="update-stats">
      <h4 class="page-header"><span id="sujet-name"></span> <small>Fiche statistiques</small>
        <div class="pull-right" id="update-buttons">
        <label for="submit-form" class="btn btn-primary" id="update-stats-btn" pk="">{% bootstrap_icon "floppy-save" %} Enregistrer</label>
        <span class="btn btn-primary btn-sm" id="cancel">{% bootstrap_icon "remove" %}Annuler</span>
      </div></h4>
      <div id="fiche-stats" class="well well-sm">
      </div>
    </div>

  </div>
</div>
<!-- Modal and button linking -->
<div class="modal fade" id="form-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h4 class="modal-title">Modal title</h4>
       </div>
       <div id="form-modal-body" class="modal-body">
         <div class="alert alert-warning">Content should be there...</div>
       </div>
     </div>
   </div>
</div>
<script type="text/javascript" src="{% static 'scripts/bootstrap-modal.js' %}"></script>
<script type="text/javascript">
  $(function(){

  function UpdateStats(pk) {
      var name = $("#sujet-name-" + pk).text();
      console.log("Update stats for ", pk, ":", name);
      $("#fiche-stats").load("/statistiques/update/" + pk);
      $("#sujet-name").text(name);
      $("#saved-rencontres").hide();
      $("#update-stats-btn").attr("pk", pk);
      $("#update-stats").show();
    };

  $("#update-stats").hide();

  $(".show-stats-btn").click(function(e) {
    var value = $(this).attr("value");
    UpdateStats(value);
  });

  $("#update-stats-btn").click(function(e) {
    e.preventDefault();
    var pk = $(this).attr("pk");
    $.post("/statistiques/update/" + pk + "/", $("#update-stats-form").serialize());
    $("#fiche-stats").html("");
    $("#saved-rencontres").show();
    $("#update-stats").hide();
  });

  $("#cancel").click(function() {
        $("#fiche-stats").html("");
        $("#saved-rencontres").show();
        $("#update-stats").hide();
  });

  $.fn.openModalEvent('new-sujet',
  '{% url "notes:create-sujet" %}?next={% url "maraudes:create" pk=maraude.pk %}',
  'Nouveau sujet');

  $.fn.openModalEvent('new-lieu',
  '{% url "maraudes:lieu-create" %}?next={% url "maraudes:create" pk=maraude.pk %}',
  'Nouveau lieu');
  });
</script>

{% endblock %}