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

{% block stylesheets %}
	{{parent() }}
	<link rel="stylesheet" href="{{ asset('assets/css/style.css')}}">
{% endblock %}


{% block body %}
	{# {% dump(rep_reCaptcha) %} #}
	<div id="container-form">
		<div id="div-logo">
			<img src="{{ asset('assets/img/logo_bonifay.png') }}" alt="">
		</div>
		<!-- SECTION partie affichage des informations (SMS/Docs) -->
		{% if contenu_SMS is not empty and code_tempo is not empty %}
			<div id="container-form">
				<header>
					<h2 id="titre">Choisissez :</h2>
					<span class="btn-bugger hidden" id="bugger">&#x2261;</span>
				</header>

				<!-- ANCHOR menu bugger -->
				<aside class="btn-groupe" id="menu-bugger">
					<span class="btn hidden" id="touche-recherche">Recherche</span>
					<span class="btn" id="touche-docs">Documents</span>
					<span class="btn" id="touche-SMS">SMS</span>
					<span class="btn hidden" id="touche-deco">
						<a href="">Déconnexion</a>
					</span>
				</aside>

				<main>
					<!-- ANCHOR bar de recherche -->
					<div class="hidden" id="search">
						<input class="" type="text" placeholder="  Recherche..." id="search-bar">
						<input type="hidden" name="id-camion" id="id-camion" value="{{ id_camion }}" class="hidden" hidden>
						<input
						type="hidden" name="id-chauffeur" id="id-chauffeur" value="{{ id_chauffeur }}" class="hidden" hidden>
					<!--<span class="btn hidden" id="search-envoyer">Envoyer</span>-->
					</div>

					<!-- ANCHOR div qui contient le dernier SMS de prise de poste du chauffeur -->
					<div id="affichage-SMS">
						{% for i in range(0, contenu_SMS|length -1) %}

							<!-- ANCHOR date du SMS -->
							<p class="date-sms">
								Message du
								{{ date_SMS[i] }}
								:
							</p>
							<!-- ANCHOR contenu du SMS -->
							<p class="contenu-sms">{{ contenu_SMS[i] }}</p>

						{% endfor %}
					</div>

					<!-- ANCHOR div d'affichage des documents -->
					<div
						id="affichage-fichier">
						<!--ANCHOR div qui contient les btns pour afficher les catégories de document -->
						<div id="btns-fichier">
							<span class="btn" id="touche-public">Public</span>
							<span class="btn" id="touche-camion">Camion</span>
							<span class="btn" id="touche-chauffeur">Chauffeur</span>
							<span class="btn" id="touche-typecamion">SpéCamion</span>
							<span class="btn" id="touche-chantier">Chantier</span>
							<span class="btn" id="touche-video">Vidéo</span>
						</div>
						<!--ANCHOR liste de tous les documents -->
						<ul id="ul-liste-docs"></ul>
					</div>
				</main>
			</div>
		{% endif %}
		<div class="alert" id="{{ alert_contact }}">
			<span>{{ msg }}</span>
		</div>
		{% if listeSms is not empty %}
			<a href="./app.php">
				<button class="btn btn-secondary">Deconnexion</button>
			</a>
			<div id="listeSms">
				{% for sms in listeSms %}
					<div>

						<div class="orange titre-sms">SMS envoyé le
							{{sms[1]|date("d/m/Y") }}
							à
							{{sms[1]|date("H:i") }}
							:
						</div>

						<div class="white sms">
							{{sms[0] }}
						</div>
					</div>
					<br>
				{% endfor %}
			</div>


		{% else %}
			<form action="" method="post" id="form-connexion">
				<div >
					<label class="white" for="login">Login :
					</label>
					<input name="login" id="login" type="text"/>
				</div>
				<div>
					<label class="white" for="mdp">Mot de passe :
					</label>
					<input name="mdp" type="password" id="mdp"/>
				</div>
				<button type="submit" class="btn btn-secondary">Connexion</button>
			</form>
		{% endif %}
		<!-- !SECTION partie affichage des informations (SMS/Docs) -->

	<!-- SECTION 3DSECURE partie identification du chauffeur -->
		{# {% if code_tempo is empty %}
																																					<header>
																																						<!-- SECTION titre du formulaire -->
																																						{% if id_chauffeur is not empty %}
																																							<!-- ANCHOR titre chauffeur identifié -->
																																							<h2 id="titre-page">
																																								Bienvenue
																																								{{ prenom_chauffeur }}
																																								{{ nom_chauffeur }}
																																							</h2>
																																						{% elseif id_camion is not empty %}
																																							<!-- ANCHOR titre code chauffeur -->
																																							<h2>Entrez votre code chauffeur</h2>
																																						{% else %}
																																							<!-- ANCHOR titre code camion -->
																																							<h2>Identification du camion</h2>
																																						{% endif %}
																																						<!-- !SECTION titre du formulaire -->
																																					</header>
																																		
																																					<!-- ANCHOR div des message d'allerte -->
																																				
																																		
																																					<main>
																																						<!-- ANCHOR formulaire -->
																																						<form
																																							action="" method="post" id="camion-form">
																																							<!-- SECTION div qui contient tous les champs -->
																																							<div id="champs">
																																		
																																								{% if confir_chauff == true %}
																																									<!-- ANCHOR champ du code -->
																																									<input
																																									type="hidden" name="code-tempo" id="code-tempo" value="" class="hidden" hidden>
																																									<!-- ANCHOR champ de confirmation du chauffeur (si le code est faut)  -->
																																									<input type="hidden" name="confir-chauff" id="confir-chauff" value="true" class="hidden" hidden>
																																		
																																		
																																								{% elseif confir_chauff == false %}
																																		
																																									{% if id_chauffeur is not empty %}
																																										<form method="post" action="">
																																											<h3 class="white">Veuillez saisir votre mot de passe</h3>
																																											<input type="password" id="mdp"/>
																																											<button class="btn btn-primary" type="submit">Se connecter</button>
																																										</form>
																																		
																																										<button class="btn btn-primary">Réinitialiser votre mot de passe</button>
																																		
																																									{% endif %}
																																		
																																									<!-- ANCHOR champ du téléphone du chauffeur -->
																																									<input type="hidden" name="tel-chauffeur" id="tel-chauffeur" value="{{ tel_chauffeur }}" class="hidden" hidden>
																																		
																																								{% endif %}
																																		
																																								{% if id_camion is not empty %}
																																									<!-- ANCHOR champ du code du chauffeur -->
																																									<input type="hidden" name="id-chauffeur" id="id-chauffeur" value="{{ id_chauffeur }}" class="hidden" hidden>
																																								{% endif %}
																																		
																																								<!-- ANCHOR champ du code du camion -->
																																								<input type="hidden" name="id-camion" id="id-camion" value="{{ id_camion }}" class="hidden" hidden>
																																		
																																							</div>
																																							<!-- !SECTION div qui contient tous les champs -->
																																		
																																							<!-- SECTION pavé numérique + écran d'affichage -->
																																							<div id="clavier">
																																		
																																								<div class="ecran-numerique">
																																									<span class="ecran" id="ecran"></span>
																																								</div>
																																		
																																								<div
																																									class="clavier-numerique" id="clavier-numerique">
																																									<!-- ANCHOR ligne 3 -->
																																									<input type="button" class="btn nb" value="7">
																																									<input type="button" class="btn nb" value="8">
																																									<input
																																									type="button" class="btn nb" value="9">
																																									<!-- ANCHOR ligne 2 -->
																																									<input type="button" class="btn nb" value="4">
																																									<input type="button" class="btn nb" value="5">
																																									<input
																																									type="button" class="btn nb" value="6">
																																									<!-- ANCHOR ligne 1 -->
																																									<input type="button" class="btn nb" value="1">
																																									<input type="button" class="btn nb" value="2">
																																									<input
																																									type="button" class="btn nb" value="3">
																																									<!-- ANCHOR ligne 0 -->
																																									<input type="button" class="btn" id="touche-c" value="C">
																																									<input type="button" class="btn nb" value="0">
																																									<input type="button" class="btn" id="suppr" value="CE">
																																								</div>
																																								<!-- !SECTION pavé numérique + écran d'affichage -->
																																		
																																								<!-- ANCHOR btn d'envoi du formulaire et annulation -->
																																								<div class="btn-groupe">
																																									<span class="btn btn-action" id="touche-annuler">
																																										<a href="">Annuler</a>
																																									</span>
																																									<button type="submit" class="btn btn-action" id="touche-envoyer">Envoyer</button>
																																								</div>
																																		
																																							</div>
																																						</form>
																																					</main>
																																				</div>
																																			{% endif %} #}
		<!-- !SECTION 3DSECURE partie identification du chauffeur -->

	{% endblock %}

	{% block javascripts %}


		{% if contenu_SMS is not empty and code_tempo is not empty %}
			<script src="{{ asset('assets/js/gestionaireDeFichier.js')}}" defer></script>
		{% endif %}
		<!-- ANCHOR js pour de l'AJAX -->
		<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
		<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
		<!-- ANCHOR js clef api recaptcha -->
		{# <script src="https://www.google.com/recaptcha/api.js?render=AIzaSyD0YikJB2T_CRkQPnsEmmZNHaRx2SnfUxU"></script>
																																			<script>
																																				grecaptcha.ready(function () {
																																		grecaptcha.execute('AIzaSyD0YikJB2T_CRkQPnsEmmZNHaRx2SnfUxU', {action: 'homepage'}).then(function (token) {
																																		document.getElementById('recaptcha-response').value = token
																																		});
																																		});
																																			</script> #}
	{% endblock %}