{% extends '@EasyAdmin/page/content.html.twig' %}


{% block head_stylesheets %}
	{{ parent() }}
	<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
{% endblock %}

{% block head_javascript %}
	{{ parent() }}
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js" integrity="sha512-sW/w8s4RWTdFFSduOTGtk4isV1+190E/GghVffMA9XczdJ2MDzSzLEubKAs5h0wzgSJOQTRYyaz73L3d6RtJSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="{{ asset('js/dashboard.js') }}"></script>

{% endblock %}

{% block content_header %}
	{# <h1 class="title">dashboard</h1> #}
{% endblock %}


{% block page_content %}


	<div class="container">

		{# ----------------------------------------------------------------------------------------- #}


		{# Block 1 #}
			<div class="stats" style="margin-top: 40px; margin-bottom: 40px;"> <div class="stats-container card bg-secondary mb-3">
				<div class="logo-du">
					<i class="fas fa-user div-logo-users"></i>
				</div>
				<div class="data-stats">
					{{ countAllUser }}
					<div class="div-status-stat">Users</div>
				</div>
			</div>

			<div class="stats-container card bg-secondary mb-3">
				<div class="logo-dc">
					<i class="fas fa-building"></i>
				</div>
				<div class="data-stats">
					{{countAllClient}}
					<div class="div-status-stat">Clients</div>
				</div>

			</div>

			<div class="stats-container card bg-secondary mb-3">
				<div class="logo-dt">
					<i class="fas fa-list"></i>
				</div>
				<div class="data-stats">
					{{ countAllTache }}
					<div class="div-status-stat">Taches</div>
				</div>
			</div>
		</div>


		{# Block 2 #}
		<div class="stats" style="margin-top: 40px; margin-bottom: 40px">
			<div class="stats-container card bg-secondary mb-3">
				<div class="logo-dFT">
					<i class="fa-solid fa-check"></i>
				</div>
				<div class="data-stats">
					{{ countAllTaskFT }}
					<div class="div-status-stat">Fait</div>
				</div>
			</div>

			<div class="stats-container card bg-secondary mb-3">
				<div class="logo-dEC">
					<i class="fa-regular fa-hourglass"></i>
				</div>
				<div class="data-stats">
					{{countAllTaskEC}}
					<div class="div-status-stat div-statut-petit">En cours</div>
				</div>

			</div>

			<div class="stats-container card bg-secondary mb-3">
				<div class="logo-dNF">
					<i class="fa-solid fa-xmark"></i>
				</div>
				<div class="data-stats">
					{{ countAllTaskNF }}
					<div class="div-status-stat div-statut-petit">Non fait</div>
				</div>
			</div>
		</div>

		{# Block 3 #}
		<div class="stats" style="margin-top: 40px; margin-bottom: 40px">
			<div class="stats-container card bg-secondary mb-3">
				<div class="logo-Day">
					<i class="fa-solid fa-calendar-day"></i>
				</div>
				<div class="data-stats">
					{{ countResultToday }}
					<div class="div-status-stat div-statut-petit statut-ajd">Aujourd'hui</div>
				</div>
			</div>

			<div class="stats-container card bg-secondary mb-3">
				<div class="logo-Tomorrow">
					<i class="fa-solid fa-calendar"></i>
				</div>
				<div class="data-stats">
					{{countResultTomorrow}}
					<div class="div-status-stat div-statut-petit">Demain</div>
				</div>

			</div>

			<div class="stats-container card bg-secondary mb-3">
				<div class="logo-Week">
					<i class="fa-solid fa-calendar-week"></i>
				</div>
				<div class="data-stats">
					{{ countResultWeek }}
					<div class="div-status-stat div-statut-petit">Semaine</div>
				</div>
			</div>
		</div>
	</div>


	{# ============================ Les GRAPHIQUES ===================================== #}

	{# Graphique en ligne qui affiche le tache par mois #}
	<div class="card bg-secondary mb-3 graph line">
		<div class="card-header" style="color: blue; font-weight: bold">Tache par mois</div>
		<div
			class="card-body">
			{# <h4 class="card-title">Secondary card title</h4> #}
			<p class="card-text">
				<canvas id="graphL" data-dataofmonths="{{ countResultMonth }}"></canvas>
			</p>
		</div>
	</div>


	{# Graphique en cercle qui affiche le nombre de tache par statut #}
	<div class="card bg-secondary mb-3 graph cercle">
		<div class="card-header" style="color: blue; font-weight: bold">Tache par status</div>
		<div
			class="card-body">
			{# <h4 class="card-title">Secondary card title</h4> #}
			<p class="card-text">
				<canvas id="graphC" data-tasklabels="{{ taskLabels }}" data-taskdatas="{{ taskDatas }}"></canvas>
			</p>
		</div>
	</div>


	<!--============================= Tache par status par users  ===============================-->

	<div class="container mt-5 task-status-user">
		<div class="card-header col-6" style="color: blue; font-weight: bold; background-color: white">Utilisateurs</div>
		<div class="col-md-6">
			<ul class="list-group">
				{% for key,data in result %}
					<li
						class="list-group-item d-flex justify-content-between align-items-center">
						{# {{ dump(data) }} #}
						<div style="color: grey; font-weight: 700">
							{{key}}

						</div>
						<div>
							{% for key,value in data %}
								<span {% if key == "NF" %} class="badge badge-primary tache-block-af" {% elseif key == "EC" %} class="badge badge-primary tache-block-ec" {% else %} class="badge badge-primary tache-block-ft" {% endif %} style="color: black !important;">
									{{ value }}
								</span>
							{% endfor %}
						</div>
					</li>
				{% endfor %}
			</ul>
		</div>
	</div>

</div>{% endblock %}