{# templates/framework/index.html.twig #}
{% extends 'base.html.twig' %}

{% block specificjs %}
  <script type="text/JavaScript" src="{{ app.request.getBaseURL() }}/js/plb/framework.js?version={{ version }}"></script>
  <script type="text/JavaScript">
    $(document).ready(function(){
      $("#copy-div").dialog({
          autoOpen: false,
          modal: true,
          width: 400,
          height: 260
      });

      $('.copy-table').click(function(e){
        e.preventDefault();
        id = $(this).data('id');
        $("#copy-div").dialog('open');
        $("#copy-form").attr("action", "/framework/copy/"+id);
        $("#copy-form#numero").attr("value", id);

      });

      $("#Copy").on('click', function(e){
        $("#copy-form").submit();
        e.preventDefault();
        $("#copy-div").html("<br/><br/><b>Copie en cours. Veuillez patienter ...</b>");
        $(this).unbind(e).click();
      });
    });
  </script>
{% endblock %}

{% block page %}
  <h2>Gestion des tableaux</h2>
  <div id='tableaux-listes' class='tableaux-cfg'>
    <h3>Liste des tableaux</h3>
    <p>
      <a href="{{ asset('framework/add') }}" class='ui-button'>Nouveau tableau</a>
    </p>
    <form name='form' method='get' action='{{ asset("framework")}}'>
      <input type="hidden" name="modification" value ="tableau"/>
      <table class='CJDataTable' id='table-list' data-noExport='1' data-sort='[[1,"asc"]]'>
        <thead>
          <tr>
            <th class='dataTableNoSort'>
              <input type='checkbox' class='CJCheckAll' />
            </th>
            <th>Nom</th>
            {% if nbSites > 1 %}
              <th>Site</th>
            {% endif %}
            <th class='dataTableDateFR'>Dernière utilisation</th>
          </tr>
        </thead>
        <tbody>
          {% for elem in tableaux %}
            <tr id='tr-tableau-{{ elem.tableau }}' >
              <td style='white-space:nowrap;'>
                <input type='checkbox' name='chk{{ loop.index0 }}' value='{{ elem.tableau }}' class='chk1'/>
                <input type='hidden' name='numero' id='numero' value ="{{ elem.tableau }}" />
                <a href="{{ asset('framework') }}/{{ elem.tableau }}">
                  <span class='pl-icon pl-icon-edit' title='Modifier'></span>
                </a>
                <a href="" class="copy-table" data-id ="{{ elem.tableau }}">
                  <span class='pl-icon pl-icon-copy' id="copy-tab-link{{ elem.tableau }}" title='Copier' style="border: none;"></span>
                </a>
                <a href='javascript:supprimeTableau({{ elem.tableau }});'>
                  <span class='pl-icon pl-icon-drop' title='Supprimer'></span>
                </a>
              </td>
              <td id='td-tableau-{{ elem.tableau }}-nom'>{{ elem.nom | raw }}</td>
              {% if nbSites > 1 %}
                <td>{{ elem.multisite }}
              {% endif %}
              <td>{{ elem.tabAffect }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </form>
    <p>
      <input type='button' value='Supprimer la sélection' class='ui-button' onclick="supprime_select('chk1','{{ app.request.getBaseURL() }}/framework-batch_delete');">
    </p>
    {% if tableauxSupprimes is not empty %}
      <p style='margin-top:30px;'>
        Récupération d'un tableau supprimé
        <select id='tableauxSupprimes'>
          <option value=''>&nbsp;</option>
            {% for item in tableauxSupprimes %}
              <option value='{{ item.tableau }}'>{{ item.nom }}&nbsp;(utilisation : {{ item.tabAffect }})</option>
            {% endfor %}
        </select>
      </p>
    {% endif %}
  </div>
  <div id='tableaux-groupes' class='tableaux-cfg' >
    <h3>Groupes</h3>
    <p>
      <input type='button' value='Nouveau groupe' class='ui-button' onclick="location.href='{{ asset("framework-group/add") }}';" />
    </p>
    <table class='CJDataTable' id='table-groups' data-noExport='1' data-sort='[[1,"asc"]]'>
      <thead>
        <tr>
          <th class='dataTableNoSort'>&nbsp;</th>
          <th>Nom</th>
          {% if nbSites > 1 %}
            <th>Site</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% if groupes is iterable %}
          {% for groupe in groupes %}
            <tr id='tr-groupe-{{ groupe.id }}'>
              <td>
                <a href="{{ asset('framework-group') }}/{{ groupe.id }}">
                  <span class='pl-icon pl-icon-edit' title='Modifier'></span>
                </a>
                <a href='javascript:supprimeGroupe({{ groupe.id }});'>
                  <span class='pl-icon pl-icon-drop' title='Supprimer'></span>
                </a>
              </td>
              <td id='td-groupe-{{ groupe.id }}-nom'>{{ groupe.nom | raw }}</td>
              {% if nbSites > 1 %}
                <td>{{ groupe.multisite }} </td>
              {% endif %}
            </tr>
          {% endfor %}
        {% endif %}
      </tbody>
    </table>
  </div>
  <div id='tableaux-separations' class='tableaux-cfg'>
    <h3>Lignes de séparation</h3>
    <p>
      <input type='submit' value='Nouvelle ligne' class='ui-button' onclick='location.href="{{ asset('framework-line/add') }}";'/>
    </p>
    <table class='CJDataTable' id='table-separations' data-noExport='1'  data-sort='[[1, "asc"]]'>
      <thead>
        <tr>
          <th class='dataTableNoSort'>&nbsp;</th>
          <th>Nom</th>
        </tr>
      </thead>
      <tbody>
        {% if lignes %}
          {% for elem in lignes %}
            <tr id='tr-ligne-{{ elem.id }}' >
              <td>
                <a href="{{ asset('framework-line') }}/{{ elem.id }}">
                  <span class='pl-icon pl-icon-edit' title='Modifier'></span>
                </a>
                {% if elem.delete == true %}
                  <a href='javascript:supprimeLigne({{ elem.id }});'>
                    <span class='pl-icon pl-icon-drop' title='Supprimer'></span>
                  </a>
                {% endif %}
              </td>
              <td id='td-ligne-{{ elem.id }}-nom' >{{ elem.nom | raw }}</td>
            </tr>
          {% endfor %}
        {% endif %}
      </tbody>
    </table>
  </div>

  <div id="copy-div" style="display: none;">
    <h3>Copie du tableau</h3>
    <form name='form' id="copy-form" action="" method='get'>
      <input type='hidden' name='CSRFToken' value="{{ CSRFSession }}" />
      <input type='hidden' name='menu' value='off' />
      <input type='hidden' name='confirm' value='on' />
      <input type='hidden' name='numero' id='numero' value="" />
      Nom du nouveau tableau<br/>
      <input type='text' name='nom' />
      <br/><br/><br/>
      <input type='button' id="Cancel" value='Annuler' onclick="$('#copy-div').dialog('close');"/>
      &nbsp;&nbsp;<input type='button' id="Copy" value='Copier'/>
    </form>
  </div>
{% endblock %}