{% extends '@Flexy/FrontBundle/Themes/Mutaweef/templates/layout.html.twig' %}




{% block body %}


	<div class="container p-5">

		
        

		



			<div class="row">
                <div class="col-lg-6 offset-lg-3 col-12  text-center mb-5">
                
                       {% include "@Flexy/FrontBundle/Themes/Mutaweef/templates/missions/small-includes/_steps.html.twig"  %}

                </div>
				<div class="col-12 col-lg-5 col-md-12 mb-5">
					{% include "@Flexy/FrontBundle/Themes/mutaweef/missions/small-includes/_ticket.html.twig" with {order:order,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 {{order.totalAmount - order.walletPaymentAmount}}€</h5>

					{% if order.walletPaymentAmount > 0 %}
						<h5>Montant à payer par remises ATAFRANCE {{order.walletPaymentAmount}}€</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>{{order.totalAmount - order.walletPaymentAmount}}</span>€</button>
					
				</form>
				</div>
				<div class="col-12 d">
					<a class="btn btn-success" href="{{path('front_home')}}">
						Reserver a nouveau</a>
				</div>
			</div>
			
		
						

		

	</div>

{% endblock %}


{% block javascripts %}

{{parent()}}
 <script src="https://js.stripe.com/v3/"></script>
	<script>
			
				document.addEventListener("turbo:load",function(){
					

				
				{% if order.tokenStripe != null %}

										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) => {
						event.preventDefault();

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


						if (error) {
						// 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 %}