{% extends '@kohinos/common/layout.html.twig' %}

{% block header %}
	<div class="header-placeholder"></div>
{% endblock header %}

{% block content %}
<div class='container' style='max-width: 800px;'>
	{% if validation != true %}
		<div class="mt-3 payment-page-header">
			<a href='{{ path('index') }}'>
				<i class="fas fa-chevron-circle-left"></i> {{ 'Retour'|trans }}
			</a>
			<b>{{ app.session.get('_prestagere') }}</b>
		</div>

		<h2 class='text-center w-100 mt-4 mb-4'>{{ "Paiement"|trans }}</h2>
	{% else %}
		<div class="mt-3 payment-page-header">
			<a href='{{ path('encaissement') }}'>
				<i class="fas fa-chevron-circle-left"></i> {{ 'Retour'|trans }}
			</a>
			<b>{{ app.session.get('_prestagere') }}</b>
		</div>

		<h2 class='text-center w-100 mt-4 mb-4 payment-recap'></h2>
		<div id="payment-validation-subheader">{{ "Veuillez entrer votre code de validation"|trans }}</div>
	{% endif %}

	{# SHOW BALANCE MODALE#}
	{% if insufficientBalance is not null %}
		{% set modal_id = 'showbalancemodal' %}
		{% set modal_title = 'Mon solde'|trans %}
		{% set modal_content %}
			<div>
				{{ "Solde restant :"|trans }} {{ insufficientBalance }} {{ KOH_MLC_NAME_SMALL|default('') }}
			</div>
		{% endset %}
		{% include '@kohinos/block/modal.html.twig' with {'btn_primary' : null, 'btn_secondary' : 'Ok'} %}
		<div id="display-balance-text-container">
			<div>
				Votre solde est insuffisant, voulez-vous consulter votre solde ? 
			</div>
			<a class='btn btn-primary' data-toggle="modal" data-target="#{{ modal_id }}" title='{{ 'Mon solde'|trans }}' href="#">{{ 'Oui'|trans }}</a>
			<a class='btn btn-primary' id="display-balance-button-no" href="#">{{ 'Non'|trans }}</a>
		</div>
	{% endif %}
	<br/>

    <div class='text-center mb-5'>
		{{ form_start(form, {'attr': {'autocomplete': 'off'}}) }}
			{% if validation == true %}
				<div id="code-visual"></div>
				<div id="code-digits-container">
					<button type="button" class="payment-code-button" data-value="1">1</button>
					<button type="button" class="payment-code-button" data-value="2">2</button>
					<button type="button" class="payment-code-button" data-value="3">3</button>
					<button type="button" class="payment-code-button" data-value="4">4</button>
					<button type="button" class="payment-code-button" data-value="5">5</button>
					<button type="button" class="payment-code-button" data-value="6">6</button>
					<button type="button" class="payment-code-button" data-value="7">7</button>
					<button type="button" class="payment-code-button" data-value="8">8</button>
					<button type="button" class="payment-code-button" data-value="9">9</button>
					<button type="button" class="payment-code-correction-button">
						<i class="fa fa-backspace"></i>
					</button>
					<button type="button" class="payment-code-button" data-value="0">0</button>
					<div class="payment-code-button-placeholder"></div>
				</div>

				<div style="display:none;">
					{{ form_row(form.adherent) }}
					{{ form_row(form.montant) }}

					{% if form.montantPanier is defined %}
						{{ form_row(form.montantPanier) }}
					{% endif %}
				</div>
			{% else %}
				{{ form_row(form.adherent) }}

				{% if form.montantPanier is defined %}
					{{ form_row(form.montantPanier) }}
					<div class="presta-conventionnement-applied-text form-text text-muted" style="display:none;">
						Conventionnement du point de vente : {{ conventionnement * 100 }}% ; 
						<span class="encaissment-emlc-max-amount-container">
							le montant maximum payable en MonA est de : <span class="encaissment-emlc-max-amount"></span> MonA
						</span>
					</div>
					<div class="montant-panier-error form-text" style="display:none;">La valeur est invalide.</div>
				{% endif %}

				{{ form_row(form.montant) }}

				<br/>
			{% endif %}
			<br/>

		{{ form_end(form) }}
	</div>
</div>
<script type="text/javascript">
	var formEncaissementValidation = '{{ validation }}';
	var KOH_MLC_NAME_SMALL = "{{ KOH_MLC_NAME_SMALL|default('') }}";
</script>

{% if conventionnement is defined %}
	<script type="text/javascript">
		var formEncaissementConventionnement = '{{ conventionnement }}';
	</script>
{% endif %}

{% endblock %}

{% block footer %}{% endblock footer %}