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

{% block title %}Len's - Client
{% endblock %}

{% block stylesheets %}
	<link rel="stylesheet" href="/css/index.css">
{% endblock %}


{% block body %}

	<header>
		<a href="{{path('home')}}"><img src="/img/logo.svg" alt="logo" width="400"></a>
	</header>
	<form action="{{path('home')}}" method="POST">
		<div>
			<p>Renseignez votre numéro de commande</p>
			<div class="search"><input type="text" name="numero" id="numero" placeholder="Ex : F905A123456">
				<button type="submit">Rechercher</button>
			</div>

		</div>
	</form>


	<main>
		<div class="container">


			{% if numero != null %}


				{% if cmd != null %}
					<p class="descr">
						<b>{{cmd.numero}}
							:</b>
					</p>

					{% if cmd.status.id != 4 %}

						<div class="progress-bar">
							<div class="progress-line">
								<div class="current-progress" style="width:{{progress}}%"></div>
							</div>
							<div class="progress-step active"><img src="/img/process1.png" alt="" width="50"></div>
							<div class="progress-step {% if cmd.status.id in [2,5,1,7,19] %}active{% endif %}">
								{% if cmd.infos != null and cmd.status.id == 5 %}

									<img src="/img/pause.png" alt="" width="40">
								{% else %}

									<img src="/img/checklist.svg" alt="" width="40">
								{% endif %}

							</div>
							<div class="progress-step {% if cmd.status.id in [2,1,7,19] %}active{% endif %}">

								{% if cmd.infos != null and cmd.status.id == 2 %}

									<img src="/img/pause.png" alt="" width="40">
								{% else %}

									<img src="/img/pc-tower.svg" alt="" width="28">
								{% endif %}


							</div>
							<div class="progress-step {% if cmd.status.id in [19,1,7] %}active{% endif %}">

								{% if cmd.infos != null and cmd.status.id == 19 %}

									<img src="/img/pause.png" alt="" width="40">
								{% else %}

									<img src="/img/windows.png" alt="" width="40">
								{% endif %}


							</div>


							<div class="progress-step {% if cmd.status.id in [1,7] %}active{% endif %}"><img src="/img/shipping.svg" alt="" width="45"></div>


						</div>
						<div class="d-flex justify-between descr">
							<div>En cours de traitement</div>
							{% if cmd.infos != null %}
								{% if cmd.status.id == 2 %}
									<div>Composants reservés</div>
								{% elseif cmd.status.id ==  19 %}
									<div>Composants reservés</div>
									<div>Prêt pour assemblage</div>

								{% endif %}


								<div>En Attente
									<br>
									<i>
										{{cmd.infos}}
									</i>
								</div>

								{% if cmd.status.id == 5 %}
									<div>Prêt pour assemblage</div>
									<div>Installation et Test</div>
								{% elseif cmd.status.id == 2 %}
									<div>Installation et Test</div>


								{% endif %}
							{% else %}
								<div>Composants reservés</div>
								<div>Prêt pour assemblage</div>
								<div>Installation et Test</div>

							{% endif %}
							<div>Ordinateur Expediée</div>
						</div>
					{% else %}
						<div class="d-flex justify-center align-items-center">
							<img src="img/cancel.svg" alt="" width="50">
							<p class="cancel">Votre commande a été annulé.</p>
						</div>

					{% endif %}
					{% if cmd.status.id == 1 %}
						<p class="infos">Vous allez recevoir un mail sous 24/48H pour organiser et suivre votre colis.</p>
					{% endif %}

					{% set progress = 0 %}


					<div class="w-50 my-5">
						{% for sav in cmd.getSavs() %}
							<p class="descr">
								<b>SAV-{{loop.index}}
									:</b>
							</p>

							{% if sav.resultat.id == 10 %}
								{% set progress = 50 %}
							{% elseif sav.resultat.id == 11 %}
								{% set progress = 100 %}
							{% endif %}

							<div class="progress-bar">
								<div class="progress-line">
									<div class="current-progress" style="width:{{progress}}%"></div>
								</div>
								<div class="progress-step active">
									<img src="/img/process1.png" alt="processing" width="50">

								</div>


								<div class="progress-step {% if sav.resultat.id in [11,10] %}active{% endif %}">


									{% if sav.resultat.id in [11,10] %}

										<img src="/img/reply-white.svg" alt="" width="50">


									{% else %}
										<img src="/img/reply.svg" alt="" width="50">


									{% endif %}

								</div>


								<div class="progress-step {% if sav.resultat.id in [11] %}active{% endif %}">
									{% if sav.resultat.id == 11 %}
										<img src="/img/check-white.svg" alt="check" width="50">
									{% else %}
										<img src="/img/check.svg" alt="check" width="50">


									{% endif %}
								</div>


							</div>
							<div class="descr d-flex justify-between ">

								<div>En cours de
									<br>
									traitement</div>

								<div>Retour en Atelier</div>

								<div>Terminée</div>
							</div>

						{% endfor %}
					</div>


				{% else %}


					<p class="error">Le numéro de commande est invalide</p>

				{% endif %}

			{% else %}
				<h2>Où trouvez mon numero</h2>
				<div>
					<div class="d-flex">
						<img src="/img/arrow.svg" alt="arrow" class="arrow" id="arrow_boulanger" width="20">

						<h4>Boulanger</h4>
					</div>


					<div class="content" id="content_boulanger">
						<div><img src="/img/1.jpg" alt="1" width="70">
							<p>Pour récupérer votre numéro de commande,
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																								Vous devez vous connecter sur votre espace client BOULANGER avec votre adresse email utilisée lors
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																								de vos commandes, accompagné de votre code secret sur :
								<a href="https://www.boulanger.com/authentication">https://www.boulanger.com/authentication</a>


							</p>
						</div>
						<div><img src="/img/2.jpg" alt="2" width="70">

							<p>Veuillez cliquer sur « Suivre mes commandes », situé
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																sur le menu à gauche.
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																Votre commande apparaîtra avec le numéro de commande associé, sous la forme de F905XXXXXXX</p>
							<img src="/img/boulanger.jpg" alt="image1" width="100%"></div>


					</div>

				</div>
				<div>
					<div class="d-flex">
						<img src="/img/arrow.svg" class="arrow" alt="arrow" id="arrow_darty" width="20">
						<h4>Darty</h4>
					</div>

					<div class="content" id="content_darty">
						<div>
							<img src="/img/1.jpg" alt="1" width="70">
							<p>Pour récupérer votre numéro de commande,
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																								Vous devez vous connecter sur votre espace client DARTY avec votre adresse email utilisée lors de
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																								vos commandes, accompagné de votre code secret sur :
								<a href="https://www.darty.com/espace_client/connexion">https://www.darty.com/espace_client/connexion</a>
							</p>


						</div>


						<div><img src="/img/2.jpg" alt="2" width="70">
							<p>Une fois sur votre espace client DARTY, vous pouvez cliquer sur « mes commandes », situé sur le
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																menu à gauche.</p>
							<img src="/img/darty.jpg" alt="image1" width="100%"></div>


						<div><img src="/img/3.jpg" alt="3" width="70">
							<p>Votre commande apparaîtra avec le numéro de commande associé.</p>

							<img src="/img/darty2.jpg" alt="image2" width="100%"></div>


					</div>

				</div>

			{% endif %}
		</div>


	</main>
	<footer>
		<div>
			<img src="/img/O.png" alt="logo" width="100">
			<div>
				<b>Micro76</b>

				<br>
				Centre Commercial Les Coquets
				<br>
				Place des Coquets
				<br>
				76130, Mont Saint-Aignan
				<br>
				​Tél : 02 35 37 45 83
				<br>
				contact.micro76@gmail.com
			</div>
			<div>
				<iframe frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBm797hjgYpTySvSE2u1vCZILp-BfnISxo
																																																																																																											&q=Micro76" allowfullscreen></iframe>


			</div>
		</div>

	</footer>

	<script src="/js/script.js"></script>


{% endblock %}