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

{% block title %}Analyse
{% endblock %}

{% block body %}
	<h1>Couleur</h1>
	{# {{ dump(limites) }} #}
	<table id="analyseTable" class="display">
		<thead>
			<tr>
				<th>Number Animal</th>
				<th>Couleur</th>
				<th>FacteurNa</th>
				<th>FacteurCa</th>
				<th>FacteurK</th>
				<th>FacteurMg</th>
				<th>FacteurMn</th>
				<th>FacteurP</th>
				<th>starttime</th>
				{% for element in resultats[0]|keys %}
					{% if element not in ['id', 'numero','number_animal', 'FacteurNa', 'FacteurCa', 'FacteurK', 'FacteurMg', 'FacteurMn', 'FacteurP', 'facteurNa', 'facteurCa', 'facteurK', 'facteurMg', 'facteurMn', 'facteurP', 'couleur', 'starttime'] %}
						<th>{{ element }}</th>
					{% endif %}
				{% endfor %}
				<th>Actions</th>
			</tr>
		</thead>
		<tbody>
			{% for item in resultats %}
				{% if item != 'No data' %}
					<tr>
						<td>{{ item.numero }}</td>
						<td>{{ item.couleur }}</td>
						<td>{{ item.facteur_na }}</td>
						<td>{{ item.facteur_ca }}</td>
						<td>{{ item.facteur_k }}</td>
						<td>{{ item.facteur_mg }}</td>
						<td>{{ item.facteur_mn }}</td>
						<td>{{ item.facteur_p }}</td>
						<td>{{ item.starttime }}</td>
						{% for element, value in item %}
							{% if element not in ['id', 'numero','number_animal', 'FacteurNa', 'FacteurCa', 'FacteurK', 'FacteurMg', 'FacteurMn', 'FacteurP', 'facteurNa', 'facteurCa', 'facteurK', 'facteurMg', 'facteurMn', 'facteurP', 'couleur', 'starttime'] %}
								{% set limits = limites[element] ?? null %}

								{% if limits is not null %}
									{% set low = limits.low|default(0) %}
									{% set high = limits.high|default(0) %}
									{% if value >= low and value <= high %}
										<td class="in-range">{{ value }}</td>
									{% else %}
										<td class="out-of-range">{{ value }}</td>
									{% endif %}
								{% else %}
									<td class="no-limits">{{ value }}</td>
								{% endif %}
							{% endif %}
						{% endfor %}
						<td>
							<a href="{{ path('analyse_show', {'id': item.id}) }}">
								<i class="fa-solid fa-eye"></i>
							</a>
							<a href="{{ path('analyse_edit', {'id': item.id}) }}">
								<i class="fa-solid fa-pen"></i>
							</a>
						</td>
						{# Ajout des actions show et edit #}
					</tr>
				{% endif %}
			{% endfor %}
		</tbody>
	</table>

	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
	<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"/>

	<style>
		.in-range {
			color: green;
		}

		.out-of-range {
			color: red;
		}

		.no-limits {
			color: black;
		}
	</style>
	<script>
		$(document).ready(function () {
$('#analyseTable').DataTable({paging: true, searching: true, ordering: true, scrollX: true});
});
	</script>
{% endblock %}