{% extends '@Flexy/FrontBundle/Themes/' ~ settings.get.assetFolderName|capitalize ~ '/templates/layout.html.twig' %}


{% block body %}


	<div class="container p-lg-5 pt-5 pb-5">

		
        

		



			<div class="row">
                <div class="col-lg-6 offset-lg-3 col-12  text-center mb-5">
                
                        {% include "@Flexy/FrontBundle/Themes/" ~ settings.get.assetFolderName|capitalize ~ "/templates/missions/small-includes/_steps.html.twig" with {invoice:invoice} %}

                </div>
				<div class="col-12 col-lg-5 col-md-12 mb-5">
					{% include "@Flexy/FrontBundle/Themes/" ~ settings.get.assetFolderName|capitalize ~ "/templates/missions/small-includes/_ticket.html.twig" with {invoice:invoice,missions:missions} %}
				</div>
				
				<div class="col-lg-7 col-12 col-md-12 text-center">
				<form id="checkout-form">
					<img width="300" class="mb-4" src="{{asset('flexy/img/paiement-securise.png')}}"  />
					
					
					
					<h5>Montant à payer par carte {{invoice.payedAmount - invoice.walletPaymentAmount}}{{settings.get.currency|trans}} </h5>
					{% if invoice.payedAmount < invoice.totalAmount %}
						<h6>Il vous reste <b> {{invoice.totalAmount - invoice.payedAmount }} {{settings.get.currency|trans}} </b> à payer à bord du véhicule</h6>
					{% endif %}

					{% if invoice.walletPaymentAmount > 0 %}
						<h5>Montant à payer par remises ATAFRANCE {{invoice.walletPaymentAmount}}{{settings.get.currency|trans}} </h5>
					{% endif %}
					
					<div id="error-message" class="mt-4"></div>
					<div  id="card-element" class="mt-2"></div>
					<button id="btn-pay" class="btn btn-success" type="submit" >Payer <span>{{invoice.payedAmount - invoice.walletPaymentAmount}}</span>{{settings.get.currency|trans}} </button>
					
				</form>
				</div>
				
			</div>
			
		
						

		

	</div>

{% endblock %}


{% block javascripts %}

{{parent()}}
	<script>
			
				document.addEventListener("turbo:load",function(){
					

				
				{% if invoice.tokenStripe != null %}
										 var stripe = Stripe('pk_test_tmxAK3KmZuLoSuHJAsD1AwFp');
										//var stripe = Stripe('pk_live_K6GKbj0ZqtOuKcb0I74cQOi4');

						const options = {
						clientSecret: '{{ CLIENT_SECRET }}',
						// Fully customizable with appearance API.
						appearance: { /*...*/
						}
						};
						const elements = stripe.elements(options);

						// Create and mount the Payment Element
						const cardElement = elements.create('payment');
						cardElement.mount('#card-element');


						const form = document.getElementById('checkout-form');

						form.addEventListener('submit', async (event) => {
							$(".mask-loading").fadeIn();
						event.preventDefault();

						const {error} = await stripe.confirmPayment({ // `Elements` instance that was used to create the Payment Element
						elements,
						confirmParams: {
						return_url: '{{settings.get.rootUrl}}{{ path("bookingSuccess") }}'
						}
						});


						if (error) {
							$(".mask-loading").fadeOut();
						// This point will only be reached if there is an immediate error when
						// confirming the payment. Show error to your customer (for example, payment
						// details incomplete)
						const messageContainer = document.querySelector('#error-message');
						messageContainer.textContent = error.message;
						} else {
						// Your customer will be redirected to your `return_url`. For some payment
						// methods like iDEAL, your customer will be redirected to an intermediate
						// site first to authorize the payment, then redirected to the `return_url`.
						}


						});
						{% else %}


						//Update Payment Stripe : To review
						{# $.ajax({
								url: "https://api.stripe.com/v1/payment_intents/pi_3M1YezA7MugRUi1a1GXU21BY",
								method: "POST",
								data: {
								amount: 1500
								},
								beforeSend: function (xhr) {
								xhr.setRequestHeader('Authorization', 'Bearer sk_test_y8HfPRMlAF05dV3hrstYxXtc');
								},
								success: function (data) {
								console.log(data);
								}
								}); #}
						{% endif %}



						});
			</script>
{% endblock %}