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

{% block title %}Evaluation
{% endblock %}

{% block body %}
	{{form_start(formEvaluation)}}


	{# Option 2 : Si vous voulez juste afficher la valeur du bâtiment #}
	<div class="container mt-2 mb-4">
		<div class="text-center">
			<h4 class="display-6 pb-3 border-bottom">
				Nouvelle Évaluation
				<div class="text-muted fs-5 mt-2">
					Exploitation : "{{formEvaluation.vars.value.exploitation}}"
					<br>
					Bâtiment : "{{ formEvaluation.vars.value.batiment }}"
				</div>
			</h4>
		</div>
	</div>



	<div class="text-center mt-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-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 "evaluation_complete/fiche_signaletique.html.twig" %}
			</div>
			<div class="tab-pane fade" id="calculateur" role="tabpanel" aria-labelledby="calculateur-tab">
				{% include "evaluation_complete/calculateur.html.twig" %}
			</div>
			<div class="tab-pane fade" id="conception" role="tabpanel" aria-labelledby="conception-tab">
				{% include "evaluation_complete/conceptionInstallation.html.twig" %}
			</div>
			<div class="tab-pane fade" id="physico" role="tabpanel" aria-labelledby="physico-tab">
				{% include "evaluation_complete/physicoChimique.html.twig" %}
			</div>
			<div class="tab-pane fade" id="bacterio" role="tabpanel" aria-labelledby="bacterio-tab">
				{% include "evaluation_complete/Bacterio.html.twig" %}
			</div>
			<div class="tab-pane fade" id="vide" role="tabpanel" aria-labelledby="vide-tab">
				{% include "evaluation_complete/VideSanitaire.html.twig" %}
			</div>
			<div class="tab-pane fade" id="cours" role="tabpanel" aria-labelledby="cours-tab">
				{% include "evaluation_complete/CoursDeLot.html.twig" %}
			</div>
		</div>

		<div class="mt-4 mb-4">
			<button type="submit" class="btn btn-primary">
				<i class="fa fa-calculator" aria-hidden="true"></i>
				Enregistrer
			</button>
		</div>


		
	</div>
	{% include "evaluation_complete/Bilan.html.twig" %}


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

		{{ form_widget(formEvaluation._token) }} <!--Ligne ajoutée car problème CRF token  -->

	{{form_end(formEvaluation, {'render_rest': false})}} <!-- Permet de ne pas voir les champs qui ne sont pas utilisés dans le form-->
	
{% 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 %}