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

{% block title %}Micro76 - Reparation
{% endblock %}

{% block stylesheets %}
	<link rel="stylesheet" href="/css/index.css">
	{% if rep != null and rep.getValidateDevis() == null and rep.status.id in [16,4,22] %}
		<style>
			.descr > div {
				min-width: 26.85%;
			}
		</style>
	{% endif %}
{% endblock %}

{% block body %}

	<header>
		<a href="{{path('home')}}">
			<img src="/img/logo_micro76.svg" alt="logo">
		</a>

	</header>
	<form action="{{path('home')}}" method="POST">
		<div>
			<p>Renseignez votre numéro de réparation</p>
			<div class="search"><input type="text" name="numero" id="numero" placeholder="Ex : REP-123456">
				<button type="submit">Rechercher</button>
			</div>

		</div>
	</form>


	<main>
		<div class="container">


			{% if numero != null %}


				{% if rep != null %}
					<p>
						<b>{{rep.numero}}
							:</b>

					</p>
					<div>


						<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 rep.status.id in [12,13,15,16,17,22,4,25] %}active{% endif %}">
								{% if rep.status.id in [12,13,15,16,17,22,4,25] %}


									<img src="/img/magnify-white.svg" alt="diag" width="40">


								{% else %}
									<img src="/img/magnify.svg" alt="diag" width="40">


								{% endif %}

							</div>


							<div class="progress-step {% if rep.status.id in [13,15,16,17,22,4,25] %}active{% endif %}">


								{% if rep.status.id in [13,15,16,17,22,4] %}


									<img src="/img/file-earmark-white.svg" alt="diag" width="35">

								{% elseif rep.status.id in [25] %}
									<img style="filter: invert(1)" src="/img/send.svg" alt="diag" width="35">
								{% else %}
									<img src="/img/file-earmark.svg" alt="devis" width="35">


								{% endif %}

							</div>
							{% if rep.getValidateDevis() == null and rep.status.id in [16,4,22] %}
								<div class="progress-step {% if rep.status.id in [16,4,22] %}active{% endif %}">

									{% if rep.status.id in [16,4,22] %}

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


									{% endif %}
								</div>

							{% else %}


								<div class="progress-step {% if rep.status.id in [13,15,22] %}active{% endif %}">

									{% if rep.status.id == 13 %}
										<img src="/img/pause-white.svg" alt="pause" width="40">
									{% else %}
										{% if rep.status.id in [15,22] %}

											<img id="test" src="/img/tools-white.svg" alt="tools" width="40">
										{% else %}
											<img id="test2"src="/img/tools.svg" alt="tools" width="40">

										{% endif %}
									{% endif %}

								</div>


								<div class="progress-step {% if rep.status.id in [15,22] %}active{% endif %}">

									{% if rep.status.id in [15,22] %}

										<img src="/img/check-white.svg" alt="check" width="45">
									{% else %}
										<img src="/img/check.svg" alt="check" width="50">


									{% endif %}
								</div>
							{% endif %}
							<div class="progress-step {% if rep.status.id in [22] %}active{% endif %}">
								{% if rep.status.id == 22 %}
									<img src="/img/client-white.svg" alt="client" width="40">
								{% else %}
									<img src="/img/client.svg" alt="client" width="50">


								{% endif %}
							</div>


						</div>
						<div class="descr">
							<div>En cours de
								<br>
								traitement</div>
							<div>En cours de
								<br>
								diagnostic</div>
							{% if rep.status.id in [17] %}
								<div>Devis prêt</div>
							{% elseif rep.status.id in [25] %}
								<div>Devis envoyé</div>
							{% endif %}
							{% if rep.getValidateDevis() == null and rep.status.id in [16,4,22] %}
								<div>Devis refusé</div>
							{% else %}
								<div>
									{% if rep.status.id == 13 %}
										En Attente d'une pièce
									{% else %}
										Réparation en cours

									{% endif %}
								</div>
								<div>Terminée</div>

							{% endif %}
							<div>Équipement
								<br>
								rendu</div>
						</div>
					</div>


				{% else %}


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

				{% endif %}

			{% else %}
				<div class="btn-info">

					<button>Où trouvez mon numero ?</button>
				</div>


				<div class="content" id='content'>
					<div><img src="/img/1.jpg" alt="1" width="100">
						<p>Vous trouverez votre numéro de réparation sur le haut corps de votre bon d’entrée, sous la mention « Réparation N° », sous la forme « REP-1 » sur l’exemple.
						</p>
						<img src="/img/rep-1.jpg" alt="image1" width="70%">


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


						<p>Une fois votre numéro de commande trouvé, vous pouvez le saisir dans la barre de recherche</p>


						<img src="/img/rep-2.jpg" alt="image1" width="80%"></div>
					<div><img src="/img/3.jpg" alt="3" width="100">


						<p>Une fois votre numéro de réparation renseigné, vous pouvez cliquer sur le bouton « Rechercher ».
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																										Vous pourrez suivre l’état d’avancement de votre ordinateur à travers les différents statuts : En cours
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																										de traitement, En cours de diagnostic, Devis prêt, Réparation en cours, Terminée.</p>


						<img src="/img/rep-3.jpg" alt="image1" width="80%" id="img-3"></div>


				</div>


			{% endif %}
		</div>


	</main>

	<footer>
		<div>
			<div>
				<img src="/img/O.png" alt="logo" width="100">
				<p>
					<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</p>
			</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 %}