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

{% block title %}Résultats{% endblock %}

{% block body %}




<div class="container">
	{% for label, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
        {% endfor %}
</div>


<div class="text-center mt-3 mb-3">
	<a href="{{ path('app_home') }}" class="text-muted">
		<i class="fas fa-arrow-left me-1"></i>Retour à l'accueil
	</a>
</div>


<div class="container mt-4 mb-3">

	

	<div class="container d-flex justify-content-between ">
		<a href="{{ path('app_evaluation_edit', {'id': evaluation.id}) }}" class="btn btn-success">
			<i class="fa-solid fa-pen"></i> Editer
		</a>
	
		<form method="post" action="{{ path('eval_delete', {id: evaluation.id}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette évaluation ?');" style="display: inline;">
			<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ evaluation.id) }}">
				<button class="btn btn-danger">
					<i class="fas fa-trash p-1" aria-hidden="true"></i>Supprimer
				</button>
		</form>

		<a href="{{ path('app_evaluation_pdf', {'id': evaluation.id}) }}" class="btn btn-primary">
    		<i class="fa-solid fa-file-pdf"></i> Télécharger PDF
		</a>


	</div>

{% include "home/data_Bilan.html.twig" %}

</div>


<div
	class="container mt-5">
	{# Navigation des onglets #}
	<ul class="nav nav-tabs" id="evaluationTabs" role="tablist">
		<li class="nav-item" role="presentation">
			<button class="nav-link active" id="fiche-tab" data-bs-toggle="tab" data-bs-target="#fiche" type="button" role="tab" aria-controls="fiche" aria-selected="true">
				Fiche Signalétique
			</button>
		</li>
		<li class="nav-item" role="presentation">
			<button class="nav-link" id="calculateur-tab" data-bs-toggle="tab" data-bs-target="#calculateur" type="button" role="tab" aria-controls="calculateur" aria-selected="false">
				Calculateur
			</button>
		</li>
		<li class="nav-item" role="presentation">
			<button class="nav-link" id="conception-tab" data-bs-toggle="tab" data-bs-target="#conception" type="button" role="tab" aria-controls="conception" aria-selected="false">
				Conception et Installation
			</button>
		</li>
		<li class="nav-item" role="presentation">
			<button class="nav-link" id="physico-tab" data-bs-toggle="tab" data-bs-target="#physico" type="button" role="tab" aria-controls="physico" aria-selected="false">
				Diagnostic Physico-Chimique
			</button>
		</li>
		<li class="nav-item" role="presentation">
			<button class="nav-link" id="bacterio-tab" data-bs-toggle="tab" data-bs-target="#bacterio" type="button" role="tab" aria-controls="bacterio" aria-selected="false">
				Diagnostic Bactériologique
			</button>
		</li>
		<li class="nav-item" role="presentation">
			<button class="nav-link" id="vide-tab" data-bs-toggle="tab" data-bs-target="#vide" type="button" role="tab" aria-controls="vide" aria-selected="false">
				Entretien Vide Sanitaire
			</button>
		</li>
		<li class="nav-item" role="presentation">
			<button class="nav-link" id="cours-tab" data-bs-toggle="tab" data-bs-target="#cours" type="button" role="tab" aria-controls="cours" aria-selected="false">
				Entretien Cours de Lot
			</button>
		</li>
	</ul>

	{# Contenu des onglets #}
	<div class="tab-content" id="evaluationTabsContent">
		
        <div class="tab-pane fade show active" id="fiche" role="tabpanel" aria-labelledby="fiche-tab">
			{% include "home/data_fiche_signaletique.html.twig" %}	
        </div>

        <div class="tab-pane fade" id="calculateur" role="tabpanel" aria-labelledby="calculateur-tab">
				{% include "home/data_calculateur.html.twig" %}
        </div>


		<div class="tab-pane fade" id="conception" role="tabpanel" aria-labelledby="conception-tab">
			{% include "home/data_conceptionInstallation.html.twig" %}
		</div>

       <div class="tab-pane fade" id="physico" role="tabpanel" aria-labelledby="physico-tab">
				{% include "home/data_physicoChimique.html.twig" %}
        </div>

        <div class="tab-pane fade" id="bacterio" role="tabpanel" aria-labelledby="bacterio-tab">
				{% include "home/data_Bacterio.html.twig" %}
        </div>

        <div class="tab-pane fade" id="vide" role="tabpanel" aria-labelledby="vide-tab">
				{% include "home/data_Vide_Sanitaire.html.twig" %}
        </div>

        <div class="tab-pane fade" id="cours" role="tabpanel" aria-labelledby="cours-tab">
				{% include "home/data_cours_lot.html.twig" %}
        </div>
		
	</div>

	<div class="container d-flex justify-content-between mt-4">
		<a href="{{ path('app_evaluation_edit', {'id': evaluation.id}) }}" class="btn btn-success">
			<i class="fa-solid fa-pen"></i> Editer
		</a>
	
		<form method="post" action="{{ path('eval_delete', {id: evaluation.id}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette évaluation ?');" style="display: inline;">
			<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ evaluation.id) }}">
				<button class="btn btn-danger">
					<i class="fas fa-trash p-1" aria-hidden="true"></i>Supprimer
				</button>
		</form>


		<a href="{{ path('app_evaluation_pdf', {'id': evaluation.id}) }}" class="btn btn-primary">
    		<i class="fa-solid fa-file-pdf"></i> Télécharger PDF
		</a>

	</div>

	



</div>

<div class="text-center mt-3 mb-3">
	<a href="{{ path('app_home') }}" class="text-muted">
		<i class="fas fa-arrow-left me-1"></i>Retour à l'accueil
	</a>
</div>



{% endblock %}


{% block stylesheets %}
	{{ parent() }}
	<style>
		/* Style de base pour les onglets */
		.nav-tabs {
			flex-wrap: wrap;
			overflow-x: visible;
			border-bottom: 1px solid #dee2e6;
			width: 100%;
		}

		.nav-tabs .nav-item {
			margin-bottom: -1px;
		}

		.nav-tabs .nav-link {
			border-radius: 0;
			padding: 8px 16px;
			margin: 2px 2px 0 0;
			border-top: 2px solid transparent;
			color: #fff;
			transition: all 0.3s ease;
			position: relative;
		}

		/* Couleurs spécifiques pour chaque onglet */
		#fiche-tab {
			background-color: #0d6efd;
		}

		#calculateur-tab {
			background-color: #8B4513;
		}

		#conception-tab {
			background-color: #dc3545;
		}

		#physico-tab {
			background-color: #198754;
		}

		#bacterio-tab {
			background-color: rgb(156, 216, 164);
			color: rgb(0, 0, 0);
		}

		#vide-tab {
			background-color: #C5E8EF;
			color: rgb(0, 0, 0);
		}

		#cours-tab {
			background-color: #F2E7C3;
			color: rgb(0, 0, 0);
		}

		/* Style pour les onglets actifs */
		.nav-tabs .nav-link.active {
			color: #fff;
			border-color: transparent;
			box-shadow: 0 0 15px rgba(255, 255, 255, 0.5) inset;
			font-weight: bold;
			transform: translateY(-2px);
		}

		/* Ajoute une bordure brillante autour de l'onglet actif */
		.nav-tabs .nav-link.active::after {
			content: '';
			position: absolute;
			top: -2px;
			left: -2px;
			right: -2px;
			bottom: -2px;
			border: 2px solid rgba(255, 255, 255, 0.5);
			pointer-events: none;
		}

		/* Style hover pour les onglets */
		.nav-tabs .nav-link:hover:not(.active) {
			filter: brightness(110%);
			border-color: transparent;
		}

		/* Style pour le conteneur principal */
		.container.mt-5 {
			min-height: calc(100vh - 100px); /* Augmentation de la hauteur minimale */
			height: auto;
			display: flex;
			flex-direction: column;
			padding-bottom: 2rem;
		}

		/* Style pour le conteneur du contenu des onglets */
		.tab-content {
			border: 1px solid #dee2e6;
			border-top: none;
			background-color: #fff;
			flex-grow: 1;
			position: relative;
			min-height: 600px; /* Hauteur minimale définie */
			margin-top: -1px;
		}

		/* Style pour chaque panneau d'onglet */
		.tab-pane {
			height: 100%;
			min-height: 600px; /* Hauteur minimale correspondante */
			overflow-y: auto;
			padding: 20px;
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
		}

		/* Style pour la barre de défilement */
		.tab-pane::-webkit-scrollbar {
			width: 8px;
		}

		.tab-pane::-webkit-scrollbar-track {
			background: #f1f1f1;
			border-radius: 4px;
		}

		.tab-pane::-webkit-scrollbar-thumb {
			background: #888;
			border-radius: 4px;
		}

		.tab-pane::-webkit-scrollbar-thumb:hover {
			background: #555;
		}


		/* Style pour les tableaux */
		.table-responsive {
			margin-bottom: 2rem;
			min-height: 500px; /* Hauteur minimale pour le contenu */
		}

		/* Style pour les titres des sections */
		h4.text-center.bg-primary {
			font-size: 1.5rem;
			padding: 1rem !important;
			margin-bottom: 1.5rem;
			border-radius: 5px;
			text-transform: uppercase;
			font-weight: bold;
		}

		/* Style pour les tableaux */
		.table {
			font-size: 1.1rem;
			margin-bottom: 2rem;
			width: 100%;
		}

		/* Style pour les en-têtes de tableau */
		.table th {
			background-color: #f8f9fa;
			font-weight: bold;
			padding: 1rem;
			vertical-align: middle;
		}

		/* Style pour les cellules de tableau */
		.table td {
			padding: 1rem;
			vertical-align: middle;
		}

		/* Style pour les inputs dans les tableaux */
		.table input.form-control,
		.table select.form-select {
			font-size: 1.1rem;
			padding: 0.5rem;
			height: auto;
		}

		/* Style pour les groupes de checkboxes */
		.btn-group.d-flex.flex-wrap {
			gap: 0.5rem !important;
		}

		.btn-group label {
			margin: 0.25rem;
			padding: 0.5rem 1rem;
			background-color: #f8f9fa;
			border: 1px solid #dee2e6;
			border-radius: 4px;
			cursor: pointer;
			font-size: 1rem;
		}

		.btn-group input[type="checkbox"]:checked + label {
			background-color: #0d6efd;
			color: white;
			border-color: #0d6efd;
		}

		/* Style pour les sections de tableau */
		.mb-4 {
			margin-bottom: 3rem !important;

		}

		/* Amélioration de la lisibilité des labels */
		.bg-light {
			font-weight: bold;
			color: #495057;
		}

		/* Style pour les recommandations */


		/* Style pour les inputs readonly */
		input[readonly] {
			background-color: #e9ecef;
			cursor: not-allowed;
		}

		/* Amélioration de l'espacement vertical */
		.container.mt-5 {
			padding-bottom: 2rem;
		}

		/* Style pour les cellules avec fond clair */
		.table .bg-light {
			background-color: #f8f9fa !important;
		}

		/* Style pour les lignes alternées */
		.table-striped tbody tr:nth-of-type(odd) {
			background-color: rgba(0, 0, 0, 0.02);
		}

		/* Amélioration de la bordure des tableaux */
		.table-bordered {
			border: 2px solid #dee2e6;
		}

		.table-bordered th,
		.table-bordered td {
			border: 1px solid #dee2e6;
		}

		/* Media query pour les petits écrans */
		@media(max-width: 768px) {
			.nav-tabs .nav-link {
				padding: 6px 12px;
				font-size: 0.9em;
			}
		}

		/* Ajustement de l'espacement des titres */
		h4.text-center.bg-primary {
			margin-top: 2rem;
			margin-bottom: 2rem;
		}
	</style>
{% endblock %}