{% extends 'base.html.twig' %}
{% block title %}Payer ma facture {{ website_name }} {% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/pages/services/payment.css') }}" />
{% endblock %}
{% block body %}
<div class="slider">
<div class="usefull-width item-slider">
<H1 class="item-header-h align">
Payez votre <span class="color">facture en ligne</span>
</H1>
<div class="item-prev-text hidden-xs">
Une facture à régler, un impayé ? Ce service vous permet de payer votre facture en ligne.
</div>
</div>
</div>
<div class="usefull-width">
<H2>
Comment régler ma facture en ligne ?
</H2>
<section class="item-bill">
<div class="item-desp-left">
<H3 class="unl-margin">
Avant de vous lancer !
</H3>
<div class="item-help-bill">
Munissez vous de la référence de paiement et de votre numéro client présent sur la facture.
<br/><br/>
Complétez ensuite les informations demandées dans le formulaire.
</div>
</div>
<div class="item-form-retrieve-bill">
{{ form_start(form) }}
<div class="alert-danger erase displayError">
Nous n'avons pas réussi à vous identifier, merci de vérifier l'exactitude de vos informations...
</div>
<div class="item-frspt FormPart1">
<div>
{{ form_row(form.id_bill) }}
</div>
<div>
{{ form_row(form.order_number) }}
</div>
</div>
<div class="button_theme centerBtn nextStepFm FormPart1">
Régler ma facture
</div>
<div class="FormPart2 erase">
<div class="align with-bold questFm1">
Souhaitez vous faire un règlement partiel ?
</div>
<div class="align with-bold questFm2 erase">
Saisissez le montant souhaité...
</div>
<div class="chooseAmount with-margin-top-20 erase">
{{ form_row(form.amount) }}
</div>
<div class="item-frspt with-margin-top-40">
<div class="item-gradient-anx showAmount">
Choisir le montant
</div>
<button id="regler" class="button_theme">
Régler ma facture
</button>
</div>
</div>
{{ form_end(form) }}
</div>
</section>
<div class="usefull-width unl-padding">
<section class="row-fluid">
<div class="width-max with-margin-top-180 marginT-mob-60" style="padding:0 7.5px;">
<H2>
5 Raisons de choisir Sport adhesion
</H2>
<div class="carroussel with-margin-top-30">
<div class="item-crsl">
{% if deals is not empty %}
{% for deal in deals %}
<div class="crlCntH">
<div class="crlBoxHome blueBoxW">
<div class="picBoxCrl" style="background-image:url('{{ asset('images/pages/home/' ~ deal.getImage) }}');"></div>
<div class="width-max">
{{ deal.getTitleFr }}
</div>
</div>
</div>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</section>
</div>
<section>
<div class="row-fluid with-margin-bottom-100">
<div class="item-try-it unl-margin" style="font-weight:initial;">
Envie d'en savoir plus sur nos services ?
<br/>
<br/>
<a href="{{ path('home') }}" class="button_theme btnlg with-auto-margin with-margin-top-20">
Découvrez Sport adhesion
</a>
</div>
</div>
</section>
</div>
{% endblock %}
{% block javascriptFooter %}
<script>
$(document).ready(function(){
// Calc minimum amount
//
$(document).on('input', '#bill_amount', function() {
var value = $(this).val();
if(parseFloat(value) < 10){
$('.displayError').html("Le montant ne peut être inférieur à 10 € !");
$('.displayError').show();
$('#regler').hide();
}else{
$('.displayError').hide();
$('#regler').show();
}
});
// Show form part
//
$(document).on('click', '.nextStepFm', function() {
var idBill = $('#bill_id_bill').val();
var orderNumber = $('#bill_order_number').val();
$('.FormPart1').hide();
if((typeof idBill !== "undefined" && idBill != '') && (typeof orderNumber !== "undefined" && orderNumber != '')){
maxR++;
$('.displayError').hide();
$.ajax({
url: '/send/paybill',
type: "POST",
data: {
'id_bill' : idBill,
'order_number' : orderNumber,
},
success: function(data, textStatus, jqXHR) {
if(data.statut == 1){
$('.displayError').hide();
$('.FormPart2').show();
$('#bill_amount').val(data.amount);
}else{
$('.displayError').html("Nous n'avons pas réussi à vous identifier, merci de vérifier l'exactitude de vos informations...");
$('.displayError').show();
$('.FormPart1').show();
$('.FormPart2').hide();
if(maxR == 3){
$('.displayError').html('Trop de tentative, veuillez rééssayer ultérieurement !');
$('.displayError').show();
$('.nextStepFm').remove();
}
}
},
complete: function() {
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
}else{
$('.displayError').html('Les champs ne peuvent être vide...');
$('.displayError').show();
$('.FormPart1').show();
$('.FormPart2').hide();
}
});
maxR = 0;
// change amount
//
$(document).on('click', '.showAmount', function() {
$('.showAmount, .questFm1').hide();
$('.chooseAmount, .questFm2').show();
});
if(width >= 1024){
var crsl = (parseFloat($('.item-crsl').parent().width()) / 4);
$('.crlCntH').css({'width':crsl,'max-width':crsl});
}
initCarroussel(width, '.item-crsl', 'crlCntH');
$(window).on('resize',function() {
width = $(window).width();
if(width >= 1024){
$('.item-crsl').cycle('destroy');
var crsl = (parseFloat($('.item-crsl').parent().width()) / 4);
$('.crlCntH').css({'width':crsl,'max-width':crsl});
}
initCarroussel(width, '.item-crsl', 'crlCntH');
});
});
</script>
{% endblock %}