{% load i18n sekizai_tags %}

{% addtoblock "js" %}
<script type="text/javascript">
var popup;
var timer;
var log = true;
var dgfip_url = 'https://www.tipi.budget.gouv.fr/tpa/paiement.web';
var saisie = 'M';

// for logging purposes
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}

function reinit() {
    document.getElementById('refdet_error').style.display='none';
    document.getElementById('montant_error').style.display='none';
    document.getElementById('mel_error').style.display='none';
}

function checkLen(element,y) {
    if (y.length==element.maxLength) {
        var next=element.tabIndex;
        if (next<document.forms["tipi"].length) {
            document.forms["tipi"].elements[next].focus();
        }
    }
}

function checkpopup() {
    if(popup.closed) {
        document.getElementById('wip').style.display='none';
        document.forms['tipi'].reset();
        clearInterval(timer);
    }
}

function call_tipi() {
    var params = {'refdet': function(id) {
        var idpiece = document.getElementById('idpiece').value.trim();
        var idligne = document.getElementById('idligne').value.trim();
        var idpiece_padding = '';
        var idligne_padding = '';
        var exer = params.exer('exer');
        if (!idpiece || isNaN(idpiece)) {
            document.getElementById('refdet_error').style.display='inline';
            return false;
        }

        if (!idligne || isNaN(idligne)) {
            document.getElementById('refdet_error').style.display='inline';
            return false;
        }

        for (var i=0;i<8-idpiece.length;i++)
            idpiece_padding += '0';
        idpiece = idpiece_padding + idpiece;

        for (var i=0;i<6-idligne.length;i++)
            idligne_padding += '0';
        idligne = idligne_padding + idligne;

        if (saisie == 'T')
            return "999900000000999999";
        else
            return exer + idpiece + idligne;
    }, 'montant': function(id) {
        var euros = document.getElementById(id + '_euros').value.trim();
        var cents = document.getElementById(id + '_cents').value.trim();
        if (euros && cents) {
            if (isNaN(euros) && isNaN(cents)) {
                document.getElementById(value + '_error').style.display='inline';
                return false;
            }
            return parseInt(euros) * 100 + parseInt(cents);
        }
        document.getElementById(id + '_error').style.display='inline';
        return false;
    }, 'mel': function(id) {
        var mel = document.getElementById(id).value.trim();
        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,}))$/;
        if(re.test(mel))
            return mel;
        document.getElementById(id + '_error').style.display='inline';
        return false;
    }, 'exer': function(id) {
        var exer = document.getElementById(id).value.trim();
        if (isNaN(exer)) {
            document.getElementById('refdet_error').style.display='inline';
            return false;
        }
        if (saisie == 'T')
            return "9999";
        else
            return exer;
    }};
    var tipi_url = dgfip_url + '?saisie=' + saisie + '&numcli=' + document.getElementById('numcli').value;
    var log_url = '/?saisie=' + saisie + '&numcli=' + document.getElementById('numcli').value;
    var url_params = '&';
    reinit();

    for (var field in params) {
        var valid = params[field](field);
        if(!valid) {
            return false;
        } else {
            if (document.getElementById(field + '_error'))
                document.getElementById(field + '_error').style.display='none';
            url_params += field + '=' + valid + '&';
        }
    }
    var url = tipi_url;
    url = tipi_url + url_params;
    log_url = log_url + url_params;
    if (log) {
        xmlhttp.open('GET', log_url, true);
        xmlhttp.send();
    }
    popup = window.open(url, 'tipi', 'height=800, width=900, toolbar=no, menubar=no, scrollbars=no, resizable=yes, location=no, directories=no, status=no');
    document.getElementById('wip').style.display='block';
    timer = setInterval(checkpopup, 400);
    return false;
}
</script>
{% endaddtoblock %}
{% addtoblock "css" %}
<style>
#tipi_block {
    position: relative;
}
#tipi_block ul {
    padding-left: 1em;
}
#tipi_block li {
    list-style-type: none;
    margin-bottom: .3em;
    padding: .2em 0;
}
#tipi_block li label {
    float: left;
    width: 11.5em;
}
#tipi_block li label:after {
    content: ':';
    margin-left: .5em;
}
#tipi_block  li input[type=text], #tipi_block li input[type=email] {
    border: 1px solid #bbb;
}
#tipi_block .error {
    color: #f00;
    font-size:.8em;
    display: none;
}
#tipi_block #wip {
    position: absolute;
    background: #fff;
    opacity: .8;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    text-align: center;
}
</style>
{% endaddtoblock %}


<div class="block">
  <h2 style="">Paiement en ligne</h2>

  <p style=""><em>Vous pouvez payer ici les factures &eacute;mises par Montpellier Méditerranée Métropole (service T&eacute;l&eacute;alarme, d&eacute;chets verts,...)</em></p>

  <p style="">Apr&egrave;s avoir rempli les champs du formulaire ci-dessous et cliqu&eacute; sur le bouton &quot;Payer&quot;, vous serez redirig&eacute; vers le serveur de paiement s&eacute;curis&eacute; de la direction g&eacute;n&eacute;rale des finances publiques sur lequel vous pourrez finaliser votre paiement gr&acirc;ce &agrave; votre carte bancaire. Vous recevrez ensuite un courriel de confirmation de la transaction.</p>
  <div id="tipi_block">
    <div id="wip">
      <h3>{% trans "Paiement en cours..." %}</h3>
    </div>
    <form name='tipi'>
      <ul>
        <li>
          <label>{% trans "Identifiant collectivité" %}</label>
          <select id="numcli">
            <option value="005955">005955</option>
            <option value="005956">005956</option>
            <option value="005957">005957</option>
            <option value="006483">006483</option>
            <option value="006484">006484</option>
            <option value="006485">006485</option>
          </select>
        </li>
        <li>
          <label>{% trans "Réference titre" %}</label>
          <input type='text' id='exer' maxlength=4 size=4 tabindex="2" onkeyup="checkLen(this, this.value)" /> -
          <input type='text' id='idpiece' maxlength=8 size=7 tabindex="3" onkeyup="checkLen(this, this.value)" /> -
          <input type='text' id='idligne' maxlength=5 size=4 tabindex="4" onkeyup="checkLen(this, this.value)" />
          <span class="error" id="refdet_error">{% trans "numéro invalide" %}</span>
        </li>
        <li>
          <label>{% trans "Montant" %}</label>
          <input type='text' id='montant_euros' size="4" maxlength="4" placeholder="0000" tabindex="5" onkeyup="checkLen(this, this.value)" /> ,
          <input type='text' id='montant_cents' size="2" maxlength="2" placeholder="00" tabindex="6" onkeyup="checkLen(this, this.value)" value="00" /> €
          <span class="error" id="montant_error">{% trans "montant invalide" %}</span>
        </li>
        <li>
          <label>{% trans "Votre courriel" %}</label>
          <input type='email' id='mel' {% if request.user.email %}value="{{ request.user.email }}" {% else %}placeholder="{% trans "nom@domaine.com" %}"{% endif %} />
          <span class="error" id="mel_error">{% trans "courriel invalide" %}</span></li>
        <li>
          <input type='button' value='{% trans "Payer" %}' onclick='call_tipi()'/>
        </li>
      </ul>
    </form>
  </div>
</div>
