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

{% block contents %}
{% if svgfiles %}
<h1>Sélectionnez d'abord un plan de salle afin de le vérifier</h1>
<select id="sel" onchange="choix_salle()">
  <option>--------------</option>
  {% for f in svgfiles %}
  <option>{{ f }}</option>
  {% endfor %}
</select>
<script>
  function choix_salle(){
      var param = $("#sel").val().replace(".svg", "");
      location = /verif_plan/ + param;
  }
</script>
{% else %}
<script>
  function onlyUnique(value, index, array) {
      return array.indexOf(value) === index;
  }

  function light_piles(evt){
      var a = $(evt.target).text();
      var piles = $("svg").find("g.livres");
      piles.each(function(i, pile){
	  var tspans = $(pile).find("tspan");
	  var texts = [];
	  var circle = $(pile).find("circle");
	  // attention le cercle peut être aussi une ellipse
	  if (! circle.length){
	      circle = $(pile).find("ellipse");
	  }
	  circle.css({
	      fill: "#0000ff",
	      "fill-opacity": "1",
	  });
	  circle.attr({
		  "r": 2,
		  "rx": 2,
		  "ry": 2,
	  });
	  tspans.each(function(j,t){
	      var tt = $(t).text();
	      if (tt.indexOf("(") == -1)
		  texts.push(tt); // pas de textes parenthésés
	  });
	  if (texts.join(" ") == a){
	      circle.css("fill", "#ff0000");
	      circle.attr({
		  "r": 10,
		  "rx": 10,
		  "ry": 10,
	      });
	  }
      });
      
  }

  function check_piles_livres(){
      var liste_abreges = JSON.parse($("#liste_abreges").val());
      var piles = $("svg").find("g.livres");
      var abreges = [];
      piles.each(function(i, pile){
	  var tspans = $(pile).find("tspan");
	  var texts = [];
	  tspans.each(function(j,t){
	      var tt = $(t).text();
	      if (tt.indexOf("(") == -1)
		  texts.push(tt); // pas de textes parenthésés
	  });
	  abreges.push(texts.join(" "));
	  abreges=abreges.filter(onlyUnique);
	  abreges.sort();
      });
      var dejavu=[];
      liste_abreges.forEach(function(a){
        if (abreges.indexOf(a) >= 0 && dejavu.indexOf(a) == -1){
          dejavu.push(a);
          var d = $("<div class='abg' title='Cliquer pour trouver'>").text(a);
          d.on("click", light_piles);
          $("#interaction").append(d);
        }
      });
      var tous_correct=true;
      var erreurs1 = [];
      abreges.forEach(function(a){
	  if (! liste_abreges.includes(a)){
	      tous_correct=false;
	      erreurs1.push(a);
	  }
      });
      if(tous_correct) $("#tous_abreges_corrects").prop("checked", true);
      if (erreurs1.length){
	  $("#erreurs").append($("<p>").text(
	      "piles à abrégés incorrects : " + erreurs1.join(", ")));
      }
      var tous_presents = true;
      var erreurs2 = []
      liste_abreges.forEach(function(a){
	  if (! abreges.includes(a)){
	      tous_presents=false;
	      erreurs2.push(a);
	  }
      });
      if(tous_presents) $("#tous_abreges_presents").prop("checked", true);
      if (erreurs2.length){
	  $("#erreurs").append($("<p>").html(
	      "<b>étiquettes définies dans le catalogue, pas en rayon :</b> " + erreurs2.join(", ")));
      }
      
  }

  /**
   * on recherche toutes les étagères avec un texte commençant par "classes:"
   **/
  function check_etageres(){
      var rects = $("svg").find("rect");
      var etageres = new Object();
      rects.each(function(i, rect){
	  var g = $(rect).parent("g");
	  var tspans = g.find(">text>tspan");
	  tspans.each(function(j,t){
	      var tt = $(t).text();
	      if (tt.startsWith("classes:")){
		  var classes = tt.substring(9);
		  if (classes in etageres){
		      etageres[classes].push(g.attr("id"));
		  } else {
		      etageres[classes] = [g.attr("id")];
		  }
	      }
	  });
      });
      $("#dico_etageres").val(JSON.stringify(etageres));
      var ul = $("#liste_etageres")
      ul.html("");
      var i = 0;
      var toutes_piles=[]; // pour conserver tous les gids des piles
      for( var e in etageres){
	  var groupes = ""
	  etageres[e].forEach(function(gid){
	      var svgrect = $("#"+gid)[0].getBoundingClientRect()
	      var piles = [];
	      $(".livres").each(function(i,pile){
		  if (rectOverlap(svgrect, pile.getBoundingClientRect())){
		      var texts=[];
		      $(pile).find("tspan").each(function(j, text){
			  texts.push($(text).text().replace(" ", " "));
		      });
		      piles.push(texts.join(" "));
		      toutes_piles.push($(pile).attr("id"));
		  }
	      });
	      piles.sort();
	      groupes += "<span class='etagere' onmouseover='showetagere(this)'>"+gid+"</span> <div class='piles'>" + JSON.stringify(piles) + "</div>";
	  });
	  var id = "et_" + i++;
	  var li = $("<li>").html(
	      "<label for='"+id+"'>"+e+"</label> <input type='checkbox' id='"+id+"' checked /> : " + groupes);
	  ul.append(li)
      }
      /* on vérifie bien que tous les éléments de classe "livres" sont */
      /* dans les piles posées sur les étagères                        */
      toutes_sur_etageres = true;
      $("svg .livres").each(function(i, pile){
	  var gid = $(pile).attr("id");
	  if (toutes_piles.indexOf(gid) == -1) toutes_sur_etageres = false;
      });
      if (toutes_sur_etageres) $("#check_piles_etageres").prop("checked", true);
  }

  /**
   * Met en évidence une ou des étagères et ne remet pas en évidence
   * les autres
   **/
  function showetagere (elt){
      var dico_etageres = JSON.parse($("#dico_etageres").val());
      for (var e in dico_etageres){
	  dico_etageres[e].forEach(function(gid){
	      $("#"+gid).removeAttr("filter");
	  });
      }
      var gid = $(elt).text();
      $("#"+gid).attr("filter", "drop-shadow(0px 0px 20px rgb(0 0 255 / 0.8))");
  }
  
  $("body").ready(function(){
      $("input").prop("checked", false);
  });
</script>
<div id="retour">
  <a href="/verif_plan/">Choix d&apos;une autre salle ?</a>
</div>

<div id="conteneur">
  <div id="checks">
    <ul>
      <li>
	<button onclick="check_piles_livres()" id="check_piles_livres">
	  Vérification des piles de livres
	</button>
	<br>
	<label for="tous_abreges_corrects">Tous les abrégés sont corrects</label>
	<input type="checkbox" id="tous_abreges_corrects" onclick="return false" />
	<br>
	<label for="tous_abreges_presents">Tous les abrégés sont présents en rayons</label>
	<input type="checkbox" id="tous_abreges_presents"  onclick="return false" />
      </li>
      <li>
	<button onclick="check_etageres()" id="check_etageres">
	  Vérification des étagères
	</button>
	<br>
	<label for="check_piles_etageres">
	  Chaque pile de livres est dans une étagère identifiée
	</label>
	<input type="checkbox" id="check_piles_etageres" onclick="return false" />
	<br>
	Liste des étagères (cocher celles où on recherche des piles de livres)
	<ul id="liste_etageres">
	  <li>... pas encore évaluée ...</li>
	</ul>
      </li>
      <li>
	<button onclick="location='/abreges/{{ filename }}/2'">
	  Imprimer les étiquettes
	</button>
	... des abrégés, après vérification.
      </li>
    </ul>
  </div>
  <div id="interaction"></div>
  <div id="erreurs"></div>
</div>
<style>
  #conteneur {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 10px;
      grid-auto-rows: minmax(100px, auto);
  }

  #checks {
      grid-column: 1;
      grid-row: 1 / 3;
      border: 1px black solid;
      border-radius: 5px;
  }

  #interaction {
      grid-column: 2;
      grid-row: 1;
      border: 1px black solid;
      border-radius: 5px;
  }

  #erreurs {
      grid-column: 2;
      grid-row: 2;
      border: 1px black solid;
      border-radius: 5px;
  }

  .abg {
      display: inline-block;
      margin: 2px;
      padding: 0 2px;
      width: 80px;
      vertical-align: top;
      height: 36px;
      background: purple;
      color: yellow;
      font-size: 12px;
  }

  .abg:hover {
      background: red;
  }

  .etagere {
  background: wheat;
  border: 1px solid black;
  padding: 0 5px;
  border-radius; 5px;
  }

  #liste_etageres li {
  line-height: 30px;
  }

  .piles {
      display: inline-block;
      background: white;
      border: 1px solid black;
      padding: 0 5px;
      border-radius: 5px;
      width: 200px;
      height: 32px;
      overflow: scroll;
      vertical-align: top;
  }
</style>
<div id="svg" style="width:95vw; height: 50vh; overflow: auto; border: 20px dashed navy; border-radius: 50px; padding: 10px;">
   {{ svg }}
</div>
<input type="hidden" id="liste_abreges" value="{{ liste_abreges }}"/>
<input type="hidden" id="dico_etageres" />
{% endif %}
{% endblock %}
