{% 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 mb-5">

		{# ------------------------------------------------------------------------------------------------------------------------------ #}
		<!-- Content Row -->
			<div
			class="row"> <!-- Utilisateur -->
			<div class="col-xl-3 col-md-6 mb-4">
				<div class="card border-left-primary shadow h-100 py-2">
					<div class="card-body">
						<div class="row no-gutters align-items-center">
							<div class="col mr-2">
								<div class="text-xs text-uppercase mb-1 count-users-label">
									Utilisateurs</div>
								<div class="h5 mb-0 count-users-data">{{ countAllUser }}</div>
							</div>
							<div class="col-auto">
								<i class="fas fa-user fa-2x text-gray count-users-icon"></i>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Clients -->
			<div class="col-xl-3 col-md-6 mb-4">
				<div class="card border-left-success shadow h-100 py-2">
					<div class="card-body">
						<div class="row no-gutters align-items-center">
							<div class="col mr-2">
								<div class="text-xs text-success text-uppercase mb-1 count-clients-label">
									Clients</div>
								<div class="h5 mb-0 count-clients-data">{{countAllClient}}</div>
							</div>
							<div class="col-auto">
								<i class="fas fa-building fa-2x text-gray count-clients-icons"></i>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Tache réalisée -->
			<div class="col-xl-3 col-md-6 mb-4">
				<div class="card border-left-info shadow h-100 py-2">
					<div class="card-body">
						<div class="row no-gutters align-items-center">
							<div class="col mr-2">
								<div class="text-xs text-info text-uppercase mb-1 count-tasks-label">Tache réalisée
								</div>
								<div class="row no-gutters align-items-center">
									<div class="col-auto">
										<div class="h5 mb-0 count-tasks-data">{{moyennePourcentageTache}}%</div>
									</div>
									<div class="col">
										<div class="progress progress-sm mr-2">
											<div class="progress-bar bg-info" role="progressbar" style="width: {{moyennePourcentageTache}}%" aria-valuenow="{{moyennePourcentageTache}}" aria-valuemin="0" aria-valuemax="100"></div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-auto">
								<i class="fas fa-clipboard-list fa-2x text-gray-300 count-tasks-icons"></i>
							</div>
						</div>
					</div>
				</div>
			</div>


			<!-- Tache -->
			<div class="col-xl-3 col-md-6 mb-4">
				<div class="card border-left-warning shadow h-100 py-2">
					<div class="card-body">
						<div class="row no-gutters align-items-center">
							<div class="col mr-2">
								<div class="text-xs text-warning text-uppercase mb-1 count-taskC-label">
									Taches</div>
								<div class="h5 mb-0 count-taskC-data">{{ countAllTache }}</div>
							</div>
							<div class="col-auto">
								<i class="fas fa-list fa-2x text-gray-300 count-taskC-icons"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		{# ------------------------------------------------------------------------------------------------------------------------------ #}
		<div
			class="row">

			<!-- Fait -->
			<div class="col-xl-3 col-md-6 mb-4">
				<div class="card border-left-taskFt shadow h-100 py-2">
					<div class="card-body">
						<div class="row no-gutters align-items-center">
							<div class="col mr-2">
								<div class="text-xs text-uppercase mb-1 count-taskFT-label">
									Fait</div>
								<div class="h5 mb-0 count-taskFT-data">{{ countAllTaskFT }}</div>
							</div>
							<div
								class="col-auto">
								{# <i class="fa-solid fa-check"></i> #}
								<i class="fas fa-check fa-2x text-gray-300 count-taskFT-icons"></i>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- En cours -->
			<div class="col-xl-3 col-md-6 mb-4">
				<div class="card border-left-taskEc shadow h-100 py-2">
					<div class="card-body">
						<div class="row no-gutters align-items-center">
							<div class="col mr-2">
								<div class="text-xs text-success text-uppercase mb-1 count-taskEC-label">
									En cours</div>
								<div class="h5 mb-0 count-taskEC-data">{{countAllTaskEC}}</div>
							</div>
							<div
								class="col-auto">
								{# <i class="fa-regular fa-hourglass"></i> #}
								<i class="fas fa-hourglass fa-2x text-gray count-taskEC-icons"></i>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Non fait -->
			<div class="col-xl-3 col-md-6 mb-4">
				<div class="card border-left-danger shadow h-100 py-2">
					<div class="card-body">
						<div class="row no-gutters align-items-center">
							<div class="col mr-2">
								<div class="text-xs text-warning text-uppercase mb-1 count-taskNF-label">
									Non fait</div>
								<div class="h5 mb-0 count-taskNF-data">{{ countAllTaskNF }}</div>
							</div>
							<div
								class="col-auto">
								{# <i class="fa-solid fa-xmark"></i> #}
								<i class="fas fa-xmark fa-2x text-gray-300 count-taskNF-icons"></i>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Aujourd'hui -->
			<div class="col-xl-3 col-md-6 mb-4">
				<div class="card border-left-taskAJD shadow h-100 py-2">
					<div class="card-body">
						<div class="row no-gutters align-items-center">
							<div class="col mr-2">
								<div class="text-xs text-uppercase mb-1 count-taskAJD-label">
									Aujourd'hui</div>
								<div class="h5 mb-0 count-taskAJD-data">{{ countResultToday }}</div>
							</div>
							<div
								class="col-auto">
								{# <i class="fa-solid fa-check"></i> #}
								<i class="fas fa-calendar-day fa-2x text-gray-300 count-taskAJD-icons"></i>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		{# ----------------------------------------------------------------------------------------------------------------------- #}
		<div
			class="row">

			<!-- Demain -->
			<div class="col-xl-3 col-md-6 mb-4">
				<div class="card border-left-taskTOM shadow h-100 py-2">
					<div class="card-body">
						<div class="row no-gutters align-items-center">
							<div class="col mr-2">
								<div class="text-xs text-success text-uppercase mb-1 count-taskTOM-label">
									Demain</div>
								<div class="h5 mb-0 count-taskTOM-data">{{countResultTomorrow}}</div>
							</div>
							<div
								class="col-auto">
								{# <i class="fa-regular fa-hourglass"></i> #}
								<i class="fas fa-calendar fa-2x text-gray count-taskTOM-icons"></i>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Semaine -->
			<div class="col-xl-3 col-md-6 mb-4">
				<div class="card border-left-TaskSemaine shadow h-100 py-2">
					<div class="card-body">
						<div class="row no-gutters align-items-center">
							<div class="col mr-2">
								<div class="text-xs text-warning text-uppercase mb-1 count-taskS-label">
									Semaine</div>
								<div class="h5 mb-0 count-taskS-data">{{ countResultWeek }}</div>
							</div>
							<div
								class="col-auto">
								{# <i class="fa-solid fa-xmark"></i> #}
								<i class="fas fa-calendar-week fa-2x text-gray-300 count-taskS-icons"></i>
							</div>
						</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 text-uppercase" style="color: blue; font-weight: bold; font-size: 12px;">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 text-uppercase" style="color: blue; font-weight: bold; font-size: 12px;">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="col-md-8">
				<ul class="list-group">
					{% for key,data in result %}
						<li
							class="list-group-item d-flex justify-content-between align-items-center" style="background-color: rgba(0,0,0,.03);">
							{# {{ dump(data) }} #}
							<div style="font-weight: bold">
								{{key}}

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

	</div>


{% endblock %}