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

{% block title %}Votre panier
{% endblock %}

{% block body %}

	<div class="container-xl">

		<h2 class="text-center mt-5 mb-4"><strong>Panier</strong> > Adresse > Paiement > 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">Votre panier</h4>
												{% if cart is not null %}
												
													<a class="text-black me-auto ps-4" href="{{ path('delete_all_product', {'id': cart.id}) }}"> Vider le panier</a>
													<h6 class="mb-0 text-muted">{{ numberOfItem }} produits</h6>

												{% endif %}
											</div>
											<hr class="my-4">

											{% if cartProducts is not null %}
											

												{% for cartProduct in cartProducts %}
													
												
													<div class="row mb-4 d-flex justify-content-between align-items-center">
														<a 
														href="{{ path('view_products', {'id': cartProduct.products.id}) }}"
														class="col-md-2 col-lg-2 col-xl-2">
															<img src="{{ asset('images/' ~ cartProduct.photo) }}" class="img-fluid rounded-3" alt="{{ cartProduct.title }}">
														</a>
														<div class="col-md-3 col-lg-3 col-xl-3">
															<h6 class="text-muted">{{ cartProduct.subCategory }}</h6>
															<h5 class="text-black fw-bold mb-0">{{ cartProduct.title }}</h5>
															{% if cartProduct.color is not empty %}
																<p class="text-black mb-0">Couleur : {{ cartProduct.color }}</p>
															{% endif %}
															{% if cartProduct.size %}
																<p class="text-black mb-0">Taille : {{ cartProduct.size }}</p>
															{% endif %}
														</div>
														<div class="col-md-3 col-lg-3 col-xl-2 d-flex">

															<form action="" id="form-quantity{{cartProduct.id}}" method="POST" class="d-flex">

																<button class="btn btn-link px-1" id="minusOne{{cartProduct.id}}">
																	<i class="fas fa-minus"></i>
																</button>
															
																	{{ form(formQuantity[loop.index0]) }}
														
																<button class="btn btn-link px-1" id="plusOne{{cartProduct.id}}">
																	<i class="fas fa-plus"></i>

																	{# JS pour le bouton moins et plus de quantité #}
																	<script>
																	function minusOne() {
																		var tmp = document.getElementById('form' + {{cartProduct.id}} + '_quantity');
																		
																		if (tmp.value > 1) {
																			tmp.value = tmp.value - 1;
																		}
																		
																	}

																	function plusOne() {
																		var tmp = document.getElementById('form' + {{cartProduct.id}} + '_quantity');
																		tmp.value = parseInt(tmp.value) + 1;
																		document.getElementById('form-quantity' + {{cartProduct.id}}).submit();
																	}

																	document.getElementById('minusOne' + {{cartProduct.id}}).addEventListener("click", minusOne);

																	document.getElementById('plusOne' + {{cartProduct.id}}).addEventListener("click", plusOne);
										
																	</script>

																</button> 

															</form> 
														</div>
														<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
															<h4 class="mb-0 fw-bold">{{ (((cartProduct.price)/100) * cartProduct.quantity) | number_format(2)  }} €</h4>
														</div>
														<div class="col-md-1 col-lg-1 col-xl-1 text-end">
															<a href="{{ path('delete_product', {'id': cartProduct.id }) }}" class="text-muted">
																<i class="fas fa-times"></i>
															</a>
														</div>
													</div>

													<hr class="my-4">

												{% endfor %}

											{% endif %}

											<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">Résumé </h3>
											<hr class="my-4">

											<div class="d-flex justify-content-between mb-4">
												<h5 class="">Produits {{ numberOfItem }} </h5>
												<h5>{{ (totalPrice/100) | number_format(2) }} €</h5>
											</div>

											{# <h5 class=" mb-3">Livraison</h5>

											<div class="mb-4 pb-2">
												<select class="select" id="postFee">
													<option value="500">Livraison standard - €5.00</option>
													<option value="2">Two</option>
												</select>
											</div> #}

											<hr class="my-4">

											<div class="d-flex justify-content-between mb-5">
												<h5 class="text-uppercase">Total</h5>
												<h5>{{ (totalPrice/100 ) | number_format(2) }} €</h5>
											</div>

											{% if app.user is not empty %}	

												{% if userPostAdress is not empty %}

													{% if numberOfItem > 0 %}
												
														<a href="{{ path('choose_adress', {"user": app.user.id, "cart": cart.id}) }}" class="col-12 btn btn-dark btn-block btn-lg no-border-radius" data-mdb-ripple-color="dark">Valider</a>

													{% else %}
														
														<a href="#" class="col-12 btn btn-dark btn-block btn-lg no-border-radius" data-mdb-ripple-color="dark">Valider</a>

													{% endif %}

												{% else %}

													{% if numberOfItem > 0 %}
													
													
														<a href="{{ path('new_adress', {"user": app.user.id, "cart": cart.id}) }}" class="col-12 btn btn-dark btn-block btn-lg no-border-radius" data-mdb-ripple-color="dark">Valider</a>

													{% else %}
														
														<a href="#" class="col-12 btn btn-dark btn-block btn-lg no-border-radius" data-mdb-ripple-color="dark">Valider</a>

													{% endif %}

												{% endif %}

											{% else %}
											
												<a href="{{ path('app_login') }}" class="col-12 btn btn-dark btn-block btn-lg no-border-radius" data-mdb-ripple-color="dark">Continuer</a>

											{% endif %}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

	</div>


{% endblock %}