{% extends 'site/site.html.twig' %}

{% block headtitle %}
	{{ parent() }}
	- Accueil
{% endblock %}

{% block page %}
<div class="container-fluid">
		<div class="row mb-5">
			<div class="col-12 pr-0 pl-0 text-center">
				<div class="nom-page">
					Accueil > <span>Espace candidat</span>
				</div>
			</div>
		</div>
	</div>
<div class="container">
		<div class="row padding-fixed">
			<div class="col-12 col-md-6 mb-4">
				<div class="bordure">
					<div class="back-icon">
						<div class="icon-details-espace-client">
							{% if user.photoDeProfil is null %}
									<img src="{{asset('assets/site/images/profil.png')}}" width="70px" />
									{% else %}
									<img src="{{ asset('uploads/user/photo/' ~ user.photoDeProfil) }}" width="70px" />
									{% endif %}
						</div>
					</div>
					<input type="file" name="photo" id="imgavatar" data-userid="{{user.id}}" accept="image/*" >
				</div>
				<div class="texte-bordure pt-3 pb-3">
					BONJOUR<br> <span>{{user.civilite}} {{user.prenom}} {{user.nom}}</span>
				</div>
			</div>
			<div class="col-12 col-md-6 mb-2">
				<div class="details-client">
					<p class="titre-details">TEL: </p>
					<p class="contenu-details"> {{user.tel}} </p><br>
					<p class="titre-details">EMAIL: </p>
					<p class="contenu-details"> {{user.email}} </p><br>
					<p class="titre-details">DATE DE NAISSANCE: </p>
					<p class="contenu-details"> {{user.dateNaissance| date('d/m/y')}} </p><br>
					<p class="titre-details">ADRESSE: </p>
					<p class="contenu-details"> {{user.adresse}} </p><br>
					<p class="titre-details">CODE POSTAL: </p>
					<p class="contenu-details"> {{user.codePostal}} </p><br>
					<p class="titre-details">VILLE: </p>
					<p class="contenu-details">{{user.ville}}</p><br>
				</div>
			</div>

		</div>
	</div>

	<div class="container">
		<div class="row mt-5 mb-3">
			<div class="col-12 text-center">
				<div class="block-formation-titre">
					MES FORMATIONS
				</div>
			</div>
		</div>
	</div>

	{% for inscription in user.inscriptions %}
	<div class="container">
		<div class="row mt-5">
			<div class="col-12">
				<div class="info-formation">
					<div class="row">
						<div class="col-12 col-md-4">
							<div class="titre-formation-details">
								TITRE DE LA FORMATION <span>Formation IAA</span>
							</div>
						</div>
						<div class="col-12 col-md">
							<div class="titre-formation-details back-opacity">
								SESSION <span>{{inscription.session.libele}}</span>
							</div>
						</div>
						<div class="col-12 col-md">
							<div class="titre-formation-details">
								CYCLE<span>{{inscription.cycle.libele}}</span>
							</div>
						</div>
						<div class="col-12 col-md">
							<div class="titre-formation-details back-opacity">
								Groupe <span>{{inscription.groupe}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="container">
		<div class="bouton-solution-details-espac-client mb-5">
			<div class="row">
				<div class="col-12">
					<div class="poop-formation">
						<div class="row">
							<div class="col-12 col-md-6 pt-4 mb-5 ">
								<div class="poop-formation-details">
									<img src="{{asset('assets/site/images/image-popup.png')}}" />
								</div>
								{# <table>
									<tr>
										<td>Date/heure</td>
										<td>Module</td>
										<td>Lien</td>
									</tr>
									{% for seance in seances %}
									<tr>
										<td>{{seance.dateTimeDebut|date(('d/m/y'))}} à {{seance.heureDebut}}</td>
										<td>{{seance.engagement.module.libele}}</td>
										<td><a target="_blank" href="{{seance.lien}}">Lien</td>
									</tr>
									{% endfor %}
								</table> #}
								
							</div>
							<div class="col-12 col-md-6 my-auto">
								<div class="btn-2 mb-5">
									<a href="{{ path('app_attestation_inscription', {'id': inscription.id}) }}"><button  class="btn--vert"><img src="{{asset('assets/site/images/attestation.png')}}"
											width="30px" /></i>ATTESTATION D'INSCRIPTION</button></a>
											{# <a href="{{ path('app_attestation_inscription', {'id': inscription.id}) }}">
																				<i class="fa fa-solid fa-download"></i> #}
											
											
								</div>
								<div class="btn-2 mb-5">
								
									<button href="#" class="btn--vert"><img src="{{asset('assets/site/images/facture-dachat.png')}}"
											width="30px" /></i>FACTURE</button>
								</div>
								<div class="btn-2 mb-5">
								<a href="{{ path('releve_note_site', {'id': user.id}) }}">
									<button href="#" class="btn--vert"><img src="{{asset('assets/site/images/bulletin-dinformation.png')}}"
											width="30px" /></i>BULLETIN</button></a>
								</div>
								
							</div>
							<div class="col-12 ">
							<h1 class="titre-table-seances">Les séances</h1>
							<table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
  									<thead>
									<tr>
									<th class="th-sm">Date/heure

									</th>
									<th class="th-sm">Module

									</th>
									<th class="th-sm">Lien
									</tr>
									</thead>
								<tbody>
								{% for seance in seances %}
									<tr>
									<td>{{seance.dateTimeDebut|date(('d/m/y'))}} à {{seance.heureDebut}}</td>
									<td>{{seance.engagement.module.libele}}</td>
									<td><a target="_blank" href="{{seance.lien}}">Lien</td>
								
									</tr>
									{% endfor %}
								</tbody>
								
								</table>
// 								<script>
// 								// Basic example
// $(document).ready(function () {
//   $('#dtBasicExample').DataTable({
//     "paging": false // false to disable pagination (or any other option)
//   });
//   $('.dataTables_length').addClass('bs-select');
// });
// </script>
							</div>
						</div>
					</div>
					<div class="plus">
						<i class="fa fa-plus"></i>
					</div>
					<div class="moins">
						<i class="fa fa-minus"></i>
					</div>
				</div>
				
			</div>
		</div>
	</div>
	{% endfor %}

{% endblock %}