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

{% block contents %}
<h1>Impression de cartes de membres</h1>
<button id="inventaire" onclick="location ='/cartes'" style="margin:5px 0;">
  ⏮ Retour à la page de choix des cartes
</button>
<br>
<!-- Ce formulaire caché permet de lancer l'impression des cartes de membre  -->
<form id="go" action="/cartes_membres_print_go" method="post"
      style="display: none">
  {% csrf_token %}
  <input type="text" name="id_eleves" value="{{ id_eleves }}"/>
  <input type="text" name="max_nb" value="{{ max_nb }}"/>
</form>
<button id="printButton" onclick="cartes_membres_print_go()" class="actionbuttons" style="vertical-align: top;">
  <img src="{% static '/img/document-print.svg' %}" alt="Créer le fichier PDF" title="Créer le fichier PDF"/>
</button>

{% if classes %}
<div id="info"  style="display: inline-block; width: 500px; padding: 5px;">
  <p>
    <b>Classes visées</b> :
    {{ classes }}
    ({{ len_eleves }} éleves).
  </p>
  <p>
    Il faut prévoir <b>{{ derniere }} feuilles</b>
    pré-découpées dans l'imprimante.
  </p>
</div>
{% endif %}

<!-- ce formulaire permet de choisir le nombre de cartes de la première page -->
<form action="#" method="post">
  {% csrf_token %}
  <input type="hidden" name="classes_chosen" value="{{ classes }}"/>
  <input type="hidden" name="nomprenom" value="{{ nomprenom }}"/>
  <fieldset>
    <p>
      La première page peut être une page où il manque déjà des morceaux.
      Les pages suivantes sont supposée complètes, au format A4.
    </p>
    <label for="max_nb">Nombre de cartes imprimables en première feuille</label>
    <div id="myslider" style="display: inline-block; width: 60px; padding:5px;">
    <select id="max_nb" name="max_nb" style="width: 50px;">
      <option {% if max_nb == 2 %}selected{% endif %}>2</option>
      <option {% if max_nb == 3 %}selected{% endif %}>3</option>
      <option {% if max_nb == 4 %}selected{% endif %}>4</option>
      <option {% if max_nb == 5 %}selected{% endif %}>5</option>
      <option {% if max_nb == 6 %}selected{% endif %}>6</option>
    </select>
    </div>
    <button>Prévisualiser</button>
  </fieldset>
</form>

<h2>
  Prévisualisation de la première page
  {% if max_nb < 6 %}
  (limitée à {{ max_nb }} cartes)
  {% endif %}
</h2>
<div id="previsualisation_cartes_membre" style="display: inline-block;">
  <svg width ="210" height="297">
    <pattern id="diagonalHatch" patternUnits="userSpaceOnUse"
	     width="4" height="4">
      <path d="M-1,1 l2,-2
               M0,4 l4,-4
               M3,5 l2,-2" 
            style="stroke:black; stroke-width:1" />
    </pattern>
    <rect width ="210" height="297" fill="url(#diagonalHatch)" style="stroke-width:1;stroke:rgb(0,0,0)"/>
    {% for r in rects %}
    {{ r | safe }}
    {% endfor %}
  </svg>
</div>
<div id="pagination" style="display: inline-block;">
  <table class="tableau-donnees">
    <tr>
      <th>Page</th><th>Cartes de<br> membre</th>
    </tr>
    {% for c in cartes %}
    <tr>
      <td>{{ c.page }}</td><td>{{ c.imprime }} </td>
    </tr>
    {% endfor %}
  </table>
</div>

<script>
  function cartes_membres_print_init(){
      var select = $( "#max_nb" );
      var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
	  min: 1,
	  max: 5,
	  range: "min",
	  value: select[ 0 ].selectedIndex + 1,
	  slide: function( event, ui ) {
	      select[ 0 ].selectedIndex = ui.value - 1;
	  }
      });
      
      $( "#max_nb" ).on( "change", function() {
	  slider.slider( "value", this.selectedIndex );
      });
  }
  
  function cartes_membres_print_go(){
      var form = $("#go");
      form.submit();
  }
</script>
<script>
  cartes_membres_print_init();
</script>
{% endblock %}
