{include file="admin/_head.tpl" title="%s"|args:$plugin.nom current="plugin_%s"|args:$plugin.id}

{* barre de navigation *}
<nav class="tabs noprint">
  <ul>
    <li><a>Page 1</a></li>
    <li><a>Page 2</a></li>
    <li><a>Page 3</a></li>
  </ul>
</nav>

{* TODO : Temporaire - à supprimer (?) *}
<h2>Liste des activités, cotisations et comptes associés</h2>
<table class="list">
  <thead>
    <tr>
      <th>Nom</th>
      <th>Description</th>
      <th>Tarif</th>
      <th>Description</th>
      <th>N° Compte</th>
      <th>Nom Compte</th>
    </tr>
  </thead>
  <tbody>
    {foreach from=$activitesTarifsComptes item="activite"}
      <tr>
        <td>{$activite.label}</td>
        <td>{$activite.descService}</td>
        <td>{$activite.Tarif}</td>
        <td>{$activite.descTarif}</td>
        <td>{$activite.numero_cpt}</td>
        <td>{$activite.nom_cpt}</td>
      </tr>
    {/foreach}
  </tbody>
</table>

<h2>Liste des versements par activité et tarif</h2>

{* TODO : vérifier le détail de ce div *}
<div class="year-header noprint">
  <button type="button" data-icon="↓" class="icn-btn" id="open_details">Déplier toutes les activités</button>
  <button type="button" data-icon="↑" class="icn-btn" id="close_details">Replier toutes les activités</button>
</div>

<form method="post" action="action.php" class="memberList">

{* Itération sur les activités *}
{foreach from=$listeParActiviteEtTarif item="activite"}

  {* Itération sur les tarifs de l'activité *}
  {foreach from=$activite->tarifs item="tarif"}

    {* TODO : s'inspirer du fonctionnement de <details pour (dé)sélectionner les lignes d'une table *}
    <details open="open">
      <summary>
        <h3>Activité « {$activite->label} »</h3>
        {if !empty($activite->description)}
          <h4>{$activite->description}</h4>
        {/if}
        <h4>tarif « {$tarif->titreTarif} », montant : {if $tarif->montantTarif > 0}{$tarif->montantTarif}
          €{else}libre
          {/if}
        </h4>
      </summary>

    {*
      Itération sur les versements d'un tarif d'une activité
      présentation : une table pour les versements d'une personne
TODO : régler la fermeture de table lors du changement de personne
    *}
    <?php $currentUser = -1; $firstLine = true; ?>
    {foreach from=$lesVersements key="rang" item="versement"}
      {if $versement.idActivite == $activite->id &&
          $versement.idTarif == $tarif->idTarif}
        {if $versement.idUser != $currentUser}
          {* changement de personne *}
          {if $firstLine}
            <?php $firstLine = false; ?>
          {else}
            {* fermer le tableau précédent *}
            </tbody>
            </table>
            <?php $firstLine = true; ?>
          {/if}
          <h3>Versements de {$versement.Nom}</h3>
          <table class="myList" id="versements_{$versement->idUser}">
            {* on ne met pas thead pour éviter l'écouteur prédéfini ... *}
            {* mais du coup, il faut mettre le mien ... *}
            {* <thead> *}
            <tbody>
              <tr style="background: rgba(var(--gSecondColor), 0.5);">
                {* TODO : voir common/dynamic_list_head.tpl *}
                <?php $tableau = "check_" . $versement->idUser; ?>
                <th class="check"><input class="{$tableau}" type="checkbox" title="Tout cocher / décocher" id="f_all" /><label
                    for="f_all"></label>
                </th>
                <th>Versement</th>
                <th>Date</th>
              </tr>
              {* </thead> *}
              {* <tbody> *}
          <?php $currentUser = $versement->idUser; ?>
        {/if}
              <tr>
                {* TODO : voir admin/membres/index.tpl *}
                <td class="check">{input class=$tableau type="checkbox" name="selected[]" value=$rang}</td>
                <td>{$versement.Versement}</td>
                <td>{$versement.Date|date_format:"%d/%m/%Y"}</td>
              </tr>
      {/if}
    {/foreach} {* Itération sur les versements *}
      </tbody>
    </table>
  </details>
  {/foreach} {* Itération sur les tarifs de l'activité *}
{/foreach} {* Itération sur les activités *}
</form>

{literal}
<script type="text/javascript">
/**
 * Cocher/décocher toutes les cases d'un tableau
 * en fonction de l'état de la première (ligne d'entête)
 * @param evt : événement déclencheur
 */
function cocherDecocher(evt) {
  var input = evt.target;
  console.log("Input = " + input.className);
  // voir si la case tousCochés est cochée
  var tousCoches = input.checked;
  // chercher la table englobante
  var laTable = input.closest("table");
  console.log("Table trouvée = " + laTable.id);
  // et la liste des lignes
  var rows = laTable.getElementsByTagName("tr");
  // et modifier les autres cases en fonction de celle-ci
  for (let i = 1; i < rows.length; ++i) {
    var input = rows[i].getElementsByTagName("input")[0];
    input.checked = tousCoches;
  }
}

// ouvrir/fermer les détails
document.querySelector('#open_details').onclick = () => {
  document.querySelectorAll('details').forEach((e) => {
    e.setAttribute('open', 'open');
  });
};
document.querySelector('#close_details').onclick = () => {
  document.querySelectorAll('details').forEach((e) => {
    e.removeAttribute('open');
  });
};

/**
 * Associer un écouteur à la première case à cocher de chaque table
 */
const lesTables = document.querySelectorAll("table.myList");
console.log("Associer un écouteur à la première case à cocher de chaque table");
for (let i = 0; i < lesTables.length; ++i) {
  // vérifier si c'est l'une des tables qui nous intéresse
  // l'id est du genre : versements_xx où xx est un entier
  const id = lesTables[i].id;
  console.log("id de la table = " + id);
  const re = /^versements_[0-9]+/;
  if (re.test(id)) {
    // chercher le premier élément input
    const premierInput = lesTables[i].querySelector("input");
    console.log("input trouvé = " + premierInput.className);
    // supprimer l'écouteur précédent
    //premierInput.removeAttribute('onchange'); // marche pas
    // associer un écouteur à la première case à cocher
    premierInput.addEventListener('change', cocherDecocher); // ok
  }
}

</script>
{/literal}

<!-- footer -->
{include file="admin/_foot.tpl"}