{% extends 'gestion/base.html' %}
{% load i18n %}
{% load static %}

{% block contents %}
<h3>
  {% translate 'Péparation du suivi pour' %}
  « {{ eleve.NomPrenomEleve }} »
  (
  {{ eleve.classe.libelle }},
  {% if eleve.sans_caution %}
    {% translate "Sans caution" %}
  {% else %}
    {% translate "n°" %} {{ eleve.no_caution }},
  {% endif %}
  {% if not eleve.sans_caution %}
    {% if eleve.besoin_carte %}
      <span class="warn">
	{% translate "reçoit sa carte cette année" %}
      </span>
    {% else %}
      <span>
	{% translate "a eu sa carte précédemment" %}
      </span>
    {% endif %}
  {% endif %}
  )
</h3>
{% if caution_rendue %}
<p class="warn">
  {% translate "La caution" %}
  <button onclick="montre_caution({{ no_caution }})"
	  title="{% translate 'en savoir plus...' %}">
    {{ no_caution }}
  </button>
  {% translate "a été rendue !" %}
</p>
{% endif %}

<div id="paiements" data-json="{{ paiements_json }}"></div>
<form action="fiches_suivi_2volets_go" method="post" onsubmit="return valide()">
  {% csrf_token %}
  <input type="hidden" name="id_eleve" value="{{ eleve.id }}"/>
  <div class="container_2c">
    <div class="head">
      {% translate 'Location' %}
      <span class="montant">{{ constantes.location|floatformat:0 }}</span> €
    </div>
    <div class="vertical-middle">
	<span>
	  <label for="r0">{% translate '---' %}</label>
	  <input id="r0" type="radio" name="location" value="fsl" checked />
	</span>
	<span>
	  <label for="r1">{% translate 'Espèces' %}</label>
	  <input id="r1" type="radio" name="location" value="especes"
		 data-val="{{ constantes.location|floatformat:0 }}"/>
	</span>
	<span>
	  <label for="r2">{% translate 'Chèque' %}</label>
	  <input id="r2" type="radio" name="location" value="cheque" />
	</span>
	<span>
	  <div class="hdf"
	       style="display: inline-block; vertical-align:middle;">
	    <label for="r3">{% translate 'Carte HDF' %}</label>
	    <input id="r3" type="radio" name="location" value="hdf"
		 data-val="{{ constantes.location|floatformat:0 }}"/>
	    <div id="hdf-details" style="display: none; border-left: 1px grey solid;">
	      <hr>
	      <label for="num_hdf">Numéro</label>
	      <input type="text" id="num_hdf" name="num_hdf" style="width: 10ex"/>
	      <br>
	      <label for="fameco">Fameco</label>
	      <input type="checkbox" name="fameco" id="fameco" value="fameco"/>
	    </div>
	  </div>
	</span>
    </div>
    <div class="head">
      {% translate 'Masse' %}
      <span class="montant">{{ constantes.masse|floatformat:0 }}</span> €
    </div>
    <div class="vertical-middle">
	<span>
	  <label for="r4">{% translate '---' %}</label>
	  <input id="r4" type="radio" name="masse" value="fsl" checked />
	</span>
	<span>
	  <label for="r5">{% translate 'Espèces' %}</label>
	  <input id="r5" type="radio" name="masse" value="especes"
		 data-val="{{ constantes.masse|floatformat:0 }}" />
	</span>
	<span>
	  <label for="r6">{% translate 'Chèque' %}</label>
	  <input id="r6" type="radio" name="masse" value="cheque" />
	</span>
    </div>
    <div class="head">
      {% translate 'Caution' %}
      <span class="montant">{{ constantes.caution|floatformat:0 }}</span> €
    </div>
    <div class="vertical-middle">
	<span>
	  <label for="r7">{% translate '---' %}</label>
	  <input id="r7" type="radio" name="caution" value="fsl" checked />
	</span>
	<span>
	  <label for="r8">{% translate 'Espèces' %}</label>
	  <input id="r8" type="radio" name="caution" value="especes"
		 data-val="{{ constantes.caution|floatformat:0 }}" />
	</span>
	<span>
	  <label for="r9">{% translate 'Chèque' %}</label>
	  <input id="r9" type="radio" name="caution" value="cheque" />
	</span>
    </div>
    <div class="head cheques">
      <label for="banque">{% translate 'Banque' %}</label>
    </div>
    <div class="vertical-middle cheques">
      <input type="text" id="banque" name="banque"
	     style="width: 22rem; margin-right: 1ex;"/>
    </div>
    <div class="head cheques">
      <label for="titulaire">{% translate 'Titutaire' %}</label>
    </div>
    <div class="vertical-middle cheques">
      <input type="text" id="titulaire" name="titulaire"
	     style="width: 22rem; margin-right: 1ex;" />
    </div>
    <div class="head cheques">
      {% translate 'Détails des chèques' %}
    </div>
    <div class="vertical-middle cheques">
	<div class="ch_detail">
	  <label for="ch_location">{{ constantes.location|floatformat:0 }} €</label>
	  <input type="checkbox" name="ch_location" id="ch_location"
		 value="ch_location"
		 class="details"
		 data-val="{{ constantes.location|floatformat:0 }}"/>
	</div>
	<div class="ch_detail">
	  <label for="ch_masse">{{ constantes.masse|floatformat:0 }} €</label>
	  <input type="checkbox" name="ch_masse" id="ch_masse" class="details"
		 value="ch_masse"
		 data-val="{{ constantes.masse|floatformat:0 }}"/>
	</div>
	<div class="ch_detail">
	  <label for="ch_caution">{{ constantes.caution|floatformat:0 }} €</label>
	  <input type="checkbox" name="ch_caution" id="ch_caution"
		 value="ch_caution"
		 class="details"
		 data-val="{{ constantes.caution|floatformat:0 }}"/>
	</div>
	<div class="ch_detail">
 	  <label for="ch_caution2">{{ constantes.caution|floatformat:0 }} € en deux fois</label>
	  <input type="checkbox" name="ch_caution2" id="ch_caution2"
		 value="ch_caution2"
		 class="details"
		 data-val="{{ constantes.caution|floatformat:0 }}"/>
	</div>
	<br>
	<div class="ch_detail">
	  <label for="ch_location_masse">{{ location_masse|floatformat:0 }} €</label>
	  <input type="checkbox" name="ch_location_masse" id="ch_location_masse"
		 value="ch_location_masse"
		 class="details"
		 data-val="{{ location_masse|floatformat:0 }}"/>
	</div>
	<div class="ch_detail">
	  <label for="ch_total">{{ total|floatformat:0 }} €</label>
	  <input type="checkbox" name="ch_total" id="ch_total" class="details"
		 value="ch_total"
		 data-val="{{ total|floatformat:0 }}"/>
	</div>
    </div>
    <div class="head">
      {% translate 'Message' %}
    </div>
    <div class="vertical-middle">
      <textarea cols="50" rows="3" id="msg" name="msg"
		placeholder="{% translate 'Ne pas oublier de...' %}"
		></textarea>
    </div>
    <div class="head">
      {% translate 'Total :' %} <span id="total"></span> €
	<div id="valid-data" class="valid-data green"></div>
    </div>
    <div class="vertical-middle">
      <input type="submit" name="submit" value="{% translate 'Valider et imprimer la fiche' %}" style="width: 100%;" />
    </div>
  </div>
 <input id="liste_eleves" name="eleves" type="hidden" value="[{{ eleve.id }}]"/>
 <input id="annee" name="annee" type="hidden" value="{{ constantes.AnneeScolaire }}">
</form>

<div id="msg2" style="display:none; height: 400px;"></div>

<script>
  $('input[type="radio"][name="location"]').change(function() {
      if (this.value == 'hdf') {
	  $("#hdf-details").show()
      }
      else {
	  $("#hdf-details").hide()
      }
      })

  /**
   * Mise à jour de tous les conteneurs qui ont un bouton radio coché
   * puis recherche des cases radios "cheque" cochés pour ajouter ou retirer
   * des lignes du tableau, totalisation des sommes payées, enfin mise en
   * conformité des détails des chèques avec les boutons radio. On termine
   * par le total des cases cochées qui ont une donnée data-val. Les calculs
   * de total par les boutons radio et par les cases à cocher doivent
   * coïncider... Sinon il y a une faute.
   **/
  function update_rs(){
      $("#msg2").dialog()
      $("#msg2").dialog("close") // retire le message d'erreur
      var aumoinsUnCheque = false
      $('input[type="radio"]').each (function(idx, i){
	  i=$(i)
	  // on parcourt tous les boutons radio
	  if (i.prop("checked")){
	      i.parent().addClass("radio-select")
	  } else {
	      i.parent().removeClass("radio-select")
	  }
	  if (i.val() == "cheque" && i.prop("checked")) {
	      aumoinsUnCheque=true
	  }
      })
      if (aumoinsUnCheque){
	  $("tr.cheques").show()
      } else {
	  $("tr.cheques").hide()
      }
      /* mise en conformité des détails des chèques */
      if($("#ch_location").prop("checked")){
	  $("#r2").prop("checked", true)
      }
      if($("#ch_masse").prop("checked")){
	  $("#r6").prop("checked", true)
      }
      if($("#ch_caution").prop("checked")){
	  $("#r9").prop("checked", true)
	  $("#ch_caution2").prop("checked",false)
      }
      if($("#ch_caution2").prop("checked")){
	  $("#r9").prop("checked", true)
	  $("#ch_caution").prop("checked",false)
      }
      if($("#ch_location_masse").prop("checked")){
	  $("#r2").prop("checked", true)
	  $("#r6").prop("checked", true)	  
	  $("#ch_location").prop("checked", false)
	  $("#ch_masse").prop("checked", false)
      }
      if($("#ch_total").prop("checked")){
	  $("#r2").prop("checked", true)
	  $("#r6").prop("checked", true)	  
	  $("#r9").prop("checked", true)
	  $("#ch_location").prop("checked", false)
	  $("#ch_masse").prop("checked", false)
	  $("#ch_caution").prop("checked", false)
	  $("#ch_caution2").prop("checked", false)
	  $("#ch_location_masse").prop("checked", false)
      }
      /* calcul du total à partir des boutons radio activés */
      var total = 0
      $(".montant").each(function(idx, span){
	  span=$(span)
	  var tr = span.parent().parent()
	  var input = tr.find('input:checked[type="radio"]')
	  if (input.val() != "fsl"){
	      total += parseInt(span.text())
	  }
      })
      $("#total").text(total)
      /* calcul du total à partir des données data-val de boutons actifs */
      var total2 = 0
      $("input").each(function(idx, i){
	  var val = $(i).data("val")
	  if(val && $(i).prop("checked")){
	      total2 += parseFloat(val)
	  }
      })
      if(total2 != total){
	  $("#valid-data").removeClass("green")
	  $("#msg2").html("")
	  var p1 = $("{% translate '<p>Attention, le total donnée par le haut du tableau ne coïncide pas avec les détails des chèques</p>' %}")
	  var p2 = $("<p>"+total+" ≠ "+total2+"</p>")
	  $("#msg2").append(p1)
	  $("#msg2").append(p2)
	  $("#msg2").dialog({
	      title: "{% translate 'Revoir les détails des chèques' %}"
	  })
      } else {
	  $("#valid-data").addClass("green")
      }
  }
  
  $('input[type="radio"]').change(update_rs)
  $('input.details').change(update_rs)

  /**
   * Vérifie que le numéro de carte HDF soit entré au cas où le bouton
   * radio est coché, puis vérifie la feu vert au niveau du total des
   * paiements. Si tout va bien, des champs input cachés sont rajoutés
   * après chaque checkbox automatiquement et portent l'état coché ou décoché
   * du checkbox
   **/
  function valide(){
      if ($("#r3").prop("checked") && $("#num_hdf").val().length == 0){
	  $("#msg2").html("{% translate 'Il manque le code de carte HDF' %}")
	  $("#msg2").dialog()
	  return false
      }
      if (! $("#valid-data").hasClass("green")){
	  $("#msg2").html("{% translate 'Détails des chèques mal cochés' %}")
	  $("#msg2").dialog()
	  return false
      }
      $("input[type='checkbox']").each( function(idx, i) {
	  i= $(i)
	  var id = i.attr("id")
	  var valId = id+"_val"
	  // création de nouvel INPUT caché si nécessaire
	  if ($("#"+valId).length == 0){
	      $("<input type='hidden' id='"+valId+"' name='"+valId+"' />").insertAfter(i)
	  }
	  $("#"+valId).val(i.prop("checked"))
      })
      return true
  }

  /**
   * Cette fonction interpète $("#paiements").data("json") pour initaliser
   * les cases à cocher et les boutons radio du tableau
   **/
  function process_paiements(){
      var p = $("#paiements").data("json")
      // les boutons radio
      $("input[type='radio'][name='location'][value='"+p.location+"']").prop(
	  "checked", true)
      $("input[type='radio'][name='masse'][value='"+p.masse+"']").prop(
	  "checked", true)
      $("input[type='radio'][name='caution'][value='"+p.caution+"']").prop(
	  "checked", true)
      // les données de hdf
      $("#num_hdf").val(p.hdf[0].numero)
      $("#fameco").prop("checked", p.hdf[0].fameco)
      // lignes de banque
      $("#banque").val(p.banque)
      $("#titulaire").val(p.titulaire)
      // détails des chèques
      // on décoche toutes les cases
      $(".ch_detail input[type='checkbox']").prop("checked",false)
      // et on recoche selon les données
      p.cheques.forEach(function(c){
	  c = parseInt(c)
	  if(c == {{ total|floatformat:0 }}) $("#ch_total").prop(
	      "checked", true)
	  if(c == {{ location_masse|floatformat:0 }}) $("#ch_location_masse").prop(
	      "checked", true)
	  if(c == {{ constantes.caution|floatformat:0 }}) $("#ch_caution").prop(
	      "checked", true)
	  if(c*2 == {{ constantes.caution|floatformat:0 }}) $("#ch_caution2").prop(
	      "checked", true)
	  if(c == {{ constantes.masse|floatformat:0 }}) $("#ch_masse").prop(
	      "checked", true)
	  if(c == {{ constantes.location|floatformat:0 }}) $("#ch_location").prop(
	      "checked", true)
      })
      // message
      $("#msg").val(p.msg)
  }

  
  $(document).ready(function(){
      process_paiements()
      update_rs()
  })

</script>
{% endblock %}