{% extends 'base-cms.html' %}
{% load i18n %}
{% load orleans_tags %}
{% load facturier_tags %}

{% block breadcrumbs %}
<li><a href="/factures/">Mes factures</a></li>
<li class="separ">&nbsp;/&nbsp;</li>
<li class="last">Détails de la facture n°{{ invoice.id }}</li>
{% endblock %}

{% block sidebar %}

    {% if perms.facturier %}
    <p>
    <em>Les informations ci-dessous sont visibles car vous avec
    les droits "staff" sur l'application. Un utilisateur habituel
    ne verra rien.</em>
    </p>

    <div class="blocProgram">
    <h2 class="title">Mode test</h2>
    <div class="rteContent">
    <p>
      En tant qu'utilisateur {{ request.user }} vous pouvez lancer un faux paiement (test)
      en cochant cette case :<br /><label><input type="checkbox" name="test" id="test" />
      <strong>appeler TIPI en mode test</strong></label>
    </p>
    </div>
    {% if user.is_superuser %}
    <h2 class="title">Infos techniques</h2>
    <div class="rteContent">
    <p>
    {% for k,v in invoice.items %}
    <strong>{{ k }}</strong>:&nbsp;{{ v }}<br />
    {% endfor %}
    </p>
    </div>
    {% endif %}
    </div>

    {% endif %}

{% endblock sidebar %}

{% block content %}

    <h1>Facture {{ invoice.id }}</h1>
    <div class="wrapSpecial"><div class="rteContent">

    <h2>Montant restant à régler : {{ invoice.amount }} €</h2>
    <p>Montant total : {{ invoice.total_amount }} €</p>

    <p>Facture émise le
      {{ invoice.creation_date|iso8601|date:"l j F Y" }}
      {% if invoice.prelevement_automatique %}
      <br />
      Prélèvement automatique effectué le {{ invoice.expiration_date|iso8601|date:"l j F Y" }}
      {% endif %}
    </p>

    <h2>Détails de la facture</h2>

    <p id="download">
    {% if invoice.download_url %}
        <a href="{{ invoice.download_url }}#{{invoice.id}}.pdf"
          title="facture_{{ invoice.id }}.pdf"
          download="facture_{{ invoice.id }}.pdf"
          class="download">Télécharger la version PDF complète de la facture</a>
    {% else %}
    {% if user.is_authenticated %}
    Cette facture ne vous est pas destinée, vous ne pouvez pas en
    voir les détails, uniquement la payer en ligne.
    {% else %}
    Pour voir les détails de cette facture, vous devez vous
    connecter à votre compte citoyen. Sans être connecté,
    vous pouvez uniquement la payer en ligne.
    {% endif %}
    {% endif %}
    </p>

    <h2>Paiement en ligne</h2>

    {% if invoice.prelevement_automatique %}
      <p>Facture en prélévement automatique, vous ne pouvez pas la payer en ligne.</p>

    {% elif invoice.paid %}
      <p>
        Cette facture a déjà été payée
        {% if invoice.paid_date %}le {{ invoice.paid_date }}{% endif %}
      </p>

    {% elif invoice.expired %}
      <p>
        Cette facture est expirée depuis le
        {{ invoice.expiration_date|iso8601|date:"l j F Y" }}&nbsp;:
        vous ne pouvez plus la payer en ligne.
      </p>

    {% elif invoice.amount|decimal < 1.0 %}
      <p>
        Le montant de cette facture est inférieur à 1 € (un euro),
        vous ne pouvez pas la payer en ligne.
      </p>
      <p>
        Il s'agit d'une contrainte imposée par le système de paiement
        «TIPI» de la Direction Générale des Finances Publiques.
      </p>

    {% else %}

    <p>
      Si vous désirez payer cette facture en ligne, indiquez d'abord votre
      adresse mail ci-dessous, puis cliquez sur le bouton «payer en ligne».
    </p>
    <p>
      <label>Votre adresse mail :</label>
      <input type="email" name="email" id="email" placeholder="nom@domaine.fr" 
        {% if request.user.email %}
          value="{{ request.user.email }}"
        {% else %}
          placeholder="nom@domaine.fr"
        {% endif %}
      />
      <span id="error" style="display: none; color: red;">
        Adresse mail invalide ! Vous devez indiquer votre adresse mail correcte
        pour payer.
      </span>
    </p>

    <div id="pay">
      <p>
        <button style="font-size: 1.2em;" onclick="tipi()">Payer cette facture en ligne</button>
      </p>
      <p>
        En cliquant sur ce bouton, vous allez être redirigé vers le site TIPI
        de la Direction générale des Finances publiques (DGFiP), qui vous permettra de
        payer cette facture.
      </p>
      <p>
        <strong>Attention : le système de paiement va s'ouvrir dans une fenêtre «popup»&nbsp;:
        avant de cliquer, veillez à désactiver tout bloqueur de fenêtre publicitaire
        (système «anti-pop-up»).</strong>
      </p>
    </div>
    <div id="pay-open" style="display: none;">
      <p>
        Vous avez cliqué sur le bouton de paiement. Si la fenêtre de paiement
        n'apparait pas, vérifiez qu'elle n'est pas bloquée par un système
        «anti-publicité» ou tout autre système «anti-pop-up».
      </p>
    </div>
    <div id="pay-close" style="display: none;">
      <p>
        Vous venez de fermer la fenêtre du paiement.
        La ville est désormais en attente de
        validation du paiement de la part de la DGFiP.
      </p>
      <p>
        Note : si vous n'avez pas réussi à effectuer le paiement ou si vous avez
        fermé la fenêtre avant de le terminer, vous pouvez
        <a href="javascript:tipi()">relancer le paiement</a>.
      </p>
    </div>

    </div>
    </div>

    <script>
      var popup;
      var timer;

      var error = document.getElementById('error');
      var pay = document.getElementById('pay');
      var pay_open = document.getElementById('pay-open');
      var pay_close = document.getElementById('pay-close');

      function validateEmail(email) {
          var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
          return re.test(email);
      }

      function tipi() {
        var email = document.getElementById('email');
        var test = document.getElementById('test');

        pay_close.style.display='none';

        var url = '{{ invoice.url|safe }}';
        if (url.indexOf('?') == -1) {
            url = url + '?';
        } else {
            url = url + '&';
        }

        if (validateEmail(email.value)) {
            url +='email=' + email.value;
            error.style.display='none';
        } else {
            error.style.display='block';
            return false;
        }

        if (test)
          if (test.checked)
            url += '&saisie=T';

        pay.innerHTML = '<p><strong>Paiement en cours.</strong></p>';
        pay_open.style.display='block';

        popup = window.open(url, 'tipi', 'height=800, width=900, toolbar=no, menubar=no, scrollbars=no, resizable=yes, location=no, directories=no, status=no');
        timer = setInterval(checkChild, 500);
        return false;
      }

      function checkChild() {
          if (popup.closed) {
              pay_open.style.display='none';
              pay_close.style.display='block';
              document.getElementById('pay').innerHTML = '<p><strong>Fenêtre de paiement fermée.</strong></p>';
              clearInterval(timer);
          }
      }

    </script>

    {% endif %}

    {% endblock %}