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

{% block title %}Dashboard
{% endblock %}
{% block body %}

	<div class="container mt-5">
		<h1 class="mb-4">Tableau de bord</h1>
		<div class="row">
			<div class="col-md-6">
				<div class="row mb-3">
					<div class="col-md-4">
						<div class="card text-center shadow">
							<div class="card-header">
								Statut des loyers
							</div>
							<div class="card-body">
								<h5 class="card-title">Loyer&nbsp;({{ count_sched }}/&infin;)</h5>
								<form action="{{ path('app_schedule_index') }}">
									<button class="circular-button shadow">
										<i class="bi bi-building fs-1"></i>
									</button>
								</form>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="card text-center shadow">
							<div class="card-header">
								Statut des locations
							</div>
							<div class="card-body">
								<h5 class="card-title">Locations&nbsp;({{ count_rent }}/{{ maxrents }})</h5>
								<form action="{{ path('app_rental_index') }}">
									<button class="circular-button shadow">
										<i class="bi bi-key fs-1"></i>
									</button>
								</form>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="card text-center shadow">
							<div class="card-header">
								Statut des biens
							</div>
							<div class="card-body">
								<h5 class="card-title">Biens&nbsp;({{ count_prop }}/{{ maxbiens }})</h5>
								<form action="{{ path('app_property_index') }}">
									<button class="circular-button shadow">
										<i class="bi bi-house fs-1"></i>
									</button>
								</form>
							</div>
						</div>
					</div>
				</div>

				{% if is_granted("ROLE_SUPER_ADMIN") %}
					<div class="row mb-3">

						<div class="col-4">
							<div class="card text-center shadow">
								<div class="card-header">
									Agences inscrites
								</div>
								<div class="card-body">
									<h5 class="card-title">Semaine :&nbsp;{{ count_agencesLastWeek }}</h5>
									<form action="{{ path('app_agence_index') }}">
										<button class="circular-button shadow">
											<i class="bi bi-house fs-1"></i>
										</button>
									</form>
								</div>
							</div>
						</div>
						<div class="col-4">
							<div class="card text-center shadow">
								<div class="card-header">
									Agences inscrites
								</div>
								<div class="card-body">
									<h5 class="card-title">Mois :&nbsp;{{ count_agencesLastMonth }}</h5>
									<form action="{{ path('app_agence_index') }}">
										<button class="circular-button shadow">
											<i class="bi bi-house fs-1"></i>
										</button>
									</form>
								</div>
							</div>
						</div>
						<div class="col-4">
							<div class="card text-center shadow">
								<div class="card-header">
									Agences inscrites
								</div>
								<div class="card-body">
									<h5 class="card-title">Total :&nbsp;{{ count_agence }}</h5>
									<form action="{{ path('app_agence_index') }}">
										<button class="circular-button shadow">
											<i class="bi bi-house fs-1"></i>
										</button>
									</form>
								</div>
							</div>
						</div>
					</div>
				{% endif %}

				<div class="row mb-3">
					<div class="col-12">
						<div class="card shadow">
							<div class="card-header">
								Activités récentes
							</div>
							<div class="card-body">
								<ul class="list-group">
									{% for rental in rentals %}
										<li class="list-group-item">
											<a href="{{ path('app_schedule_index', {'rental_filter[id]': rental.id })}}">{{ rental }}...</a>
										</li>
									{% endfor %}
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			{# données du graphique #}
			<div class="col-md-6">
				<script type="text/javascript">
					const months = {{ months|json_encode|raw }};
				</script>
				<script type="text/javascript">
					const totalAmounts = {{ totalAmounts|json_encode|raw }};
				</script>
				<div class="row mb-3">
					<div class="col-12">
						<div class="card shadow">
							<div class="card-header">
								Graphiques et Statistiques
							</div>
							<div class="card-body">
								<div
									class="chart-container">
									<!-- Intégrer des graphiques ici -->
									<canvas id="myChart"></canvas>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script src="{{asset('assets/js/graphic.js?v=122345')}}"></script>
{% endblock %}