{% load sekizai_tags %}
{% load i18n %}

{% addtoblock "js" %}
<script type="text/javascript">
var popup;
var timer;

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

function tipi() {
    var params = {'refdet': function(value) {
        var refdet = value.trim();
        if(isNaN(refdet))
            return false;
        return refdet;
    }, 'montant': function(value) {
        var montant = value.trim();
        montant = parseFloat(montant);
        if (isNaN(montant) && montant > 9999.99)
            return false;
        return montant*100;
    }, 'mel': function(value) {
        var mel = 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;
        return false;
    }};
    var tipi_url = '{{ instance.url }}?saisie={{ instance.saisie }}&numcli={{ instance.numero_client }}';
    var url_params = '&';

    for (var field in params) {
        var valid = params[field](document.getElementById(field).value);
        if(!valid) {
            document.getElementById(field + '_error').style.display='inline';
            return false;
        } else {
            document.getElementById(field + '_error').style.display='none';
            url_params += field + '=' + valid + '&';
        }
    }

    var url = tipi_url + url_params;
    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 {
    position: relative;
}
#tipi li {
    list-style-type: none;
    margin-bottom: .25em;
}
#tipi li label {
    float: left;
    width: 10em;
    font-weight: bold;
}
#tipi li label:after {
    content: ':'
}
#tipi li input[type=text] {
    border: 1px solid #bbb;
}
#tipi .error {
    color: #f00;
    font-size:.9em;
    display: none;
}
#tipi #wip {
    position: absolute;
    background: #fff;
    opacity: .8;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    text-align: center;
}
</style>
{% endaddtoblock %}
<div id="tipi">
  <div id="wip">
    <h3>{% trans "Paiement en cours..." %}</h3>
  </div>
  <form action='javascript:tipi()' name='tipi'>
    <ul>
      <li>
        <label>{% trans "Numéro de facture" %}</label>
        <input type='text' id='refdet' />
        <span class="error" id="refdet_error">{% trans "numéro invalide" %}</span>
      </li>
      <li>
        <label>{% trans "Montant" %}</label>
        <input type='text' id='montant' size="6" maxlength="6" placeholder="0000.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='submit' value='{% trans "Payer" %}' />
      </li>
    </ul>
  </form>
</div>