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

{% block title %}EvaluationComplete Edit
{% endblock %}


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

	
   
	{# Option 2 : Si vous voulez juste afficher la valeur du bâtiment #}
	<div class="container mt-4 mb-4">
		<div class="text-center">
			<h4 class="display-6 pb-3 border-bottom">
				Edition de l'évaluation réalisé le {{ formEvaluation.vars.value.dateCreation|date('d/m/Y') }}
				<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 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-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 mb-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 %}