{% load combo %}

{% if json.data %}

  {% if id %} {# une seule facture #}

    {% for facture in json.data %}{% if facture.num == id %} {# pour trouver facture avec l’id #}
      <div class="cell--body">
        <h3>Détail d’une facture</h3>

        <div class="rsu-part profile-cell">
          <dl class="profile">
            <dt class="label">Numéro de facture</dt>
            <dd class="value">{{ facture.num }}</dd>
            <dt class="label">Débiteur</dt>
            <dd class="value">{{ facture.extra.redevable }}</dd>
            <dt class="label">Date d’émission</dt>
            <dd class="value">{{ facture.date_facture|strptime:"%Y-%m-%d"|date:"d F Y" }}</dd>
            <dt class="label">Date limite de paiement</dt>
            <dd class="value">{{ facture.date_limite_recouvrement|strptime:"%Y-%m-%d"|date:"d F Y"}}</dd>
            <dt class="label">Montant facturé</dt>
            <dd class="value">{{ facture.montant_initial }} €</dd>
            <dt class="label">Montant restant à payer</dt>
            <dd class="value">{{ facture.reste_a_payer }} €</dd>
            <dt class="label">État</dt>
            <dd class="value">{{ facture.etat|upper }}</dd>
          </dl>

          <table class="invoices pk-data-table">
            <thead>
              <tr><th>Libellé</th><th>Montant</th></tr>
            </thead>
            <tbody>
              {% for creance in facture.creances %}
                <tr><td>{{ creance.libelle }}</td><td>{{ creance.montant }} €</td></tr>
              {% endfor %}
            </tbody>
          </table>

          <p><a href="./">Retour à la liste</a></p>

        </div>
      </div>

    {% endif %}{% endfor %} {# pour trouver facture avec l’id #}

  {% else %} {# liste des factures #}

    <div class="cell--body">
      <div class="rsu-part">

        {% with factures=json.data|dictsort:"date_limite_recouvrement" %}

          {% if factures %}

            {% if parameters.paiement_actif %}
              <form method="POST" action="/_plugin/nanterre/saga-transaction/">
                <input type="hidden" name="error_url" value="{{ cell.page.get_online_url }}">
            {% endif %}

            <table class="invoices pk-data-table">
              <thead>
                <tr>
                  {% if parameters.paiement_actif %}<th></th>{% endif %}
                  <th>Facture</th>
                  <th class="invoice-amount">Montant</th>
                </tr>
              </thead>

              <tbody>
                {% for facture in factures %}
                  <tr>
                    {% if parameters.paiement_actif %}
                      <td><input type="checkbox" name="num_factures" value="{{ facture.num }}"
                        data-value="{{ facture.reste_a_payer|stringformat:"s" }}"/></td>
                    {% endif %}
                    <td>
                      <a class="icon-view" href="./?id={{ facture.num }}">
                        {{ facture.num }} - <strong>{% with creance=facture.creances|first %}{{ creance.libelle }}{% endwith %}</strong>
                      </a> <br>
                      <span class="desktop-only">
                        Débiteur : {{ facture.extra.redevable }} <br>
                      </span>
                      {% if etat == 'en cours' %}
                        À payer avant le :
                        <span class="invoice-date">
                          {{ facture.date_limite_recouvrement|strptime:"%Y-%m-%d"|date:"d F Y" }}
                        </span>
                      {% endif %}
                    </td>
                    <td class="amount">
                      {% if etat == 'en cours' %}
                        {{ facture.reste_a_payer|floatformat:2 }} €
                      {% else %}
                        {{ facture.montant_initial|floatformat:2 }} €
                      {% endif %}
                    </td>
                {% endfor %}

                {% if parameters.paiement_actif %}
                  <tr>
                    <td><input type="checkbox" id="checkall"></td>
                    <td class="amout">Montant total des factures sélectionnées</td>
                    <td class="amout"><strong><span id="totalamount">0,00</span> €</strong></td>
                  </tr>
                {% endif %}
              </tbody>
            </table>

            {% if parameters.paiement_actif %}
              {# Adresse pour paiement : <input type="email" name="email" value="{{ request.user.email }}"/> #}
              <div class="buttons">
                <button name="submit" class="submit-button" value="Payer les factures sélectionnées" disabled="disabled">Payer les factures sélectionnées</button>
              </div>
              </form>

              <script>
                $(document).ready(function(){
                  // somme des factures checkées
                  $("input[name='num_factures']").on('click', function () {
                    var sum = 0;
                    $("input:checked[name='num_factures']").each(function(index, elem){
                      sum += parseFloat(elem.getAttribute("data-value"));
                    });
                    $("span#totalamount").text(sum.toFixed(2).replace('.', ','));
                    if (sum > 0.0) {
                      $("button[name=submit]").attr("disabled", null);
                    } else {
                      $("button[name=submit]").attr("disabled", "disabled");
                    }
                  });
                  $("input#checkall").on('click', function (event) {
                    event.preventDefault();
                    $("input[name='num_factures']").click();
                  });
                  // on évite les double-clic en désactivant le bouton au premier clic
                  $('form').on('submit', function(event) {
                    var $form = $(this);
                    $form.addClass('disabled-during-submit');
                  });
                });
              </script>
            {% endif %}

          {% else %}

            {% if etat == 'en cours' %}
              <div class="pk-information">
                <p><em>Aucune facture n’est à payer.</em></p>
              </div>
            {% else %}
              <div class="pk-information">
                <p><em>Aucune facture disponible.</em></p>
              </div>
            {% endif %}

          {% endif %}

        {% endwith %}

      </div>
    </div>

  {% endif %} {# une seule ou plusieurs factures #}

{% else %} {# json.data vide, quelle est l'erreur ? #}

  {% if rsu_status == 500 %}

    <div class="cell--body">
      <div class="rsu-part">
        <div class="pk-error">
          <p>Un problème s’est produit lors de l’appel au service de facturation.</p>
          <p>Veuillez réessayer dans quelques minutes et, si le problème persiste appeler le 0147295050.</p>
          <p style="display: none">L’erreur est la suivante : ERREUR 500 (crash Zoo)</p>
        </div>
      </div>
    </div>

  {% elif rsu_status == 404 %}

    <div class="cell--body">
      <div class="rsu-part">
        <div class="pk-attention">
          <p>
            Pour consulter et régler vos factures en ligne, vous devez d’abord
            <a href="/tableau-de-bord/profil/">demander l’accès à votre dossier administratif</a>.
          </p>
        </div>
      </div>
    </div>

  {% elif json.err %}

    <div class="cell--body">
      <div class="rsu-part">
        <div class="pk-attention">
          {% if "l'individu n'a pas de code tiers SAGA" in json.errors %}
            <p><em>Votre dossier administratif ne présente pas de lien avec des factures.</em></p>
          {% elif "référencé dans la régie" in json.errors.0 %} {# fédération inconnue car pas encore de facture #}
            <p><em>Aucune facture n’est à payer.</em></p>
          {% else %}
            <p>Un problème s’est produit lors de l’appel au service de facturation.</p>
            <p>Veuillez réessayer dans quelques minutes et, si le problème persiste appeler le 0147295050.</p>
            <p style="display: none">L’erreur est la suivante :</p>
            <ul style="display: none">
              {% for error in json.errors %}
                <li>{{ error }}</li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      </div>
    </div>

  {% else %}

    <div class="cell--body">
      <div class="rsu-part">
        <div class="pk-attention">
          {% if json %}
            {% if etat == 'en cours' %}
              <p><em>Aucune facture n’est à payer.</em></p>
            {% else %}
              <p><em>Aucune facture disponible.</em></p>
            {% endif %}
          {% else %} {# en fait c'est une 404 et le json est complétement vide #}
            <p><strong>Vous devez d’abord disposer d’un
              <a href="/tableau-de-bord/profil/">dossier administratif.</a></strong></em></p>
          {% endif %}
        </div>
      </div>
    </div>

  {% endif %}

{% endif %}
