{% extends 'base.html.twig' %}

{% block title %}Paiement
{% endblock %}

{% block body %}

	<div class="container-xl">

		<h2 class="text-center mt-5 mb-4">Panier > Adresse >
			<strong>Paiement</strong>
			> Confirmation</h2>

		<section class="">
			<div class="container py-5 h-50">
				<div class="row d-flex justify-content-center align-items-center h-100">
					<div class="col-12">
						<div class="card card-registration card-registration-2" style="border-radius: 15px;">
							<div class="card-body p-0">
								<div class="row g-0">
									<div class="col-lg-8">
										<div class="p-5">
											<div class="d-flex justify-content-between align-items-center mb-2">
												<h4 class="fw-bold mb-0 text-black">Récapitulatif de votre commande</h4>
											</div>

											<hr class="my-4">

											<div class="row">

												<div class="col-4 fw-bold">Adresse de livraison :</div>
												<div class="col-8">
													<div>{{userPostAdress.title}}</div>
													<div>{{userPostAdress.lastName}}
														{{userPostAdress.firstName}}</div>
													<div>{{userPostAdress.adress}}</div>
													<div>{{userPostAdress.additionalAdress}}</div>
													<div>{{userPostAdress.postCode}}</div>
													<div>{{userPostAdress.city}}</div>
												</div>

											</div>

											<div class="row my-2">

												<div class="col-4 fw-bold">Articles:
												</div>
												<div class="col-6 ">{{ totalPrice/100 }}€</div>

											</div>

											<div class="row">

												<div class="col-4 fw-bold">Livraison:
												</div>
												<div class="col-6 ">{{ livraison/100 }}€</div>

											</div>

											<hr class="mt-2">

											<div class="row">

												<div class="fw-bold col-4" style="color: rgb(177, 39, 4)">Montant Total :
												</div>
												<div class="col-6 fw-bold" style="color: rgb(177, 39, 4)">{{ totalPriceFinal/100 }}
													€</div>

											</div>


											<div class="pt-5">
												<h6 class="mb-0">
													<a href="{{ path('default_home') }}" class="text-body">
														<i class="fas fa-long-arrow-alt-left me-2"></i>Continuer mes achats</a>
												</h6>
											</div>

										</div>
									</div>


									<div class="col-lg-4 bg-grey">

										<div class="p-5">

                                            <h3 class="fw-bold mb-5 mt-2 pt-1">Paiement</h3>
											<hr class="mt-4 mb-5">

											<a href="{{ path('order_confirmation', {'cart': cart.id}) }}">Valiider</a>

											{{ include(template_from_string(paypal)) }}

											

										</div>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

	</div>

	<div id="loadingPage" style="position: fixed; top: 0; left: 0; z-index: 111; background-color: black; min-height: 100%; width: 100%; height: auto; visibility: hidden; opacity: 0.80">

		<div class="mx-auto" style="max-width: 10vw; max-height: 50px; margin-top: 40vh">
			<div class="loading mx-auto"></div>
			<div class="text-center mt-4" style="color: white">Merci de patienter</div>
		</div>

	</div>

{% endblock %}