{% extends 'layout/backEndLayout.html.twig' %}

{% block title %}Tableau de bord Finance
{% endblock %}

{% block stylesheets %}
	{{ parent() }}
	<link rel="stylesheet" href="{{ asset('assets/css/finance-custom.css') }}">
{% endblock %}

{% block body %}
	<div class="all-title-box" style="background: linear-gradient(135deg, #ff7b00 0%, #e66a00 100%);">
		<div class="container text-center">
			<h1 style="color: white;">Finance<span class="m_1" style="color: #fff3cd;">Tableau de bord</span>
			</h1>
		</div>
	</div>

	<div id="overviews" class="section lb">
		<div class="container">
			{% include 'layout/partials/flash_messages.html.twig' %}

			{% if current_year %}
				<div class="alert alert-info mb-4">
					<i class="fa fa-calendar"></i>
					<strong>Année scolaire en cours:</strong>
					{{ current_year.wording }}
				</div>
			{% endif %}

			<div class="row mb-4">
				<div class="col-lg-3 col-md-6 mb-3">
					<div class="card finance-stats-card finance-stats-orange text-white">
						<div class="card-body text-center">
							<i class="fa fa-money fa-3x mb-2"></i>
							<h5>Total Attendu</h5>
							<h3>{{ stats.total_expected|number_format(0, ',', ' ') }}
								FCFA</h3>
						</div>
					</div>
				</div>

				<div class="col-lg-3 col-md-6 mb-3">
					<div class="card finance-stats-card finance-stats-green text-white">
						<div class="card-body text-center">
							<i class="fa fa-check-circle fa-3x mb-2"></i>
							<h5>Total Collecté</h5>
							<h3>{{ stats.total_collected|number_format(0, ',', ' ') }}
								FCFA</h3>
						</div>
					</div>
				</div>

				<div class="col-lg-3 col-md-6 mb-3">
					<div class="card finance-stats-card text-white" style="background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);">
						<div class="card-body text-center">
							<i class="fa fa-clock-o fa-3x mb-2"></i>
							<h5>En attente</h5>
							<h3>{{ stats.total_pending|number_format(0, ',', ' ') }}
								FCFA</h3>
						</div>
					</div>
				</div>

				<div class="col-lg-3 col-md-6 mb-3">
					<div class="card finance-stats-card text-white" style="background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);">
						<div class="card-body text-center">
							<i class="fa fa-exclamation-triangle fa-3x mb-2"></i>
							<h5>Élèves insolvables</h5>
							<h3>{{ stats.insolvent_count }}</h3>
						</div>
					</div>
				</div>
			</div>

			<div class="row mb-4">
				<div class="col-lg-4 col-md-6 mb-3">
					<div class="card h-100 shadow-sm">
						<div class="card-body text-center">
							<i class="fa fa-money fa-4x finance-icon-orange mb-3"></i>
							<h5 class="card-title">Nouveau paiement</h5>
							<p class="card-text">Enregistrer un paiement cash pour un élève</p>
							<a href="{{ path('app_finance_payment_new') }}" class="btn btn-finance-primary">
								<i class="fa fa-plus"></i>
								Nouveau paiement
							</a>
						</div>
					</div>
				</div>

				<div class="col-lg-4 col-md-6 mb-3">
					<div class="card h-100 shadow-sm">
						<div class="card-body text-center">
							<i class="fa fa-cog fa-4x finance-icon-green mb-3"></i>
							<h5 class="card-title">Définitions de frais</h5>
							<p class="card-text">Gérer les types de frais et leurs montants</p>
							<a href="{{ path('app_finance_fee_definition_index') }}" class="btn btn-finance-secondary">
								<i class="fa fa-list"></i>
								Gérer les frais
							</a>
						</div>
					</div>
				</div>

				<div class="col-lg-4 col-md-6 mb-3">
					<div class="card h-100 shadow-sm">
						<div class="card-body text-center">
							<i class="fa fa-search fa-4x text-info mb-3"></i>
							<h5 class="card-title">Rechercher un compte</h5>
							<p class="card-text">Consulter le compte financier d'un élève</p>
							<a href="{{ path('app_finance_payment_list') }}" class="btn btn-info">
								<i class="fa fa-search"></i>
								Rechercher
							</a>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-lg-6 mb-4">
					<div class="card shadow">
						<div class="card-header" style="background: linear-gradient(135deg, #ff7b00 0%, #e66a00 100%); color: white;">
							<h5 class="mb-0">
								<i class="fa fa-info-circle"></i>
								Informations
							</h5>
						</div>
						<div class="card-body">
							<ul class="list-group list-group-flush">
								<li class="list-group-item d-flex justify-content-between align-items-center">
									Définitions actives
									<span class="badge badge-finance-orange badge-pill">{{ stats.active_definitions }}</span>
								</li>
								<li class="list-group-item d-flex justify-content-between align-items-center">
									Taux de recouvrement
									<span class="badge badge-finance-green badge-pill">
										{% if stats.total_expected > 0 %}
											{{ ((stats.total_collected / stats.total_expected) * 100)|number_format(1) }}%
										{% else %}
											0%
										{% endif %}
									</span>
								</li>
							</ul>
						</div>
					</div>
				</div>

				<div class="col-lg-6 mb-4">
					<div class="card shadow">
						<div class="card-header" style="background: linear-gradient(135deg, #228B22 0%, #1a6b1a 100%); color: white;">
							<h5 class="mb-0">
								<i class="fa fa-chart-bar"></i>
								Taux de recouvrement
							</h5>
						</div>
						<div class="card-body">
							{% set collection_rate = stats.total_expected > 0 ? (stats.total_collected / stats.total_expected * 100) : 0 %}
							<div class="progress" style="height: 30px;">
								<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: {{ collection_rate }}%" aria-valuenow="{{ collection_rate }}" aria-valuemin="0" aria-valuemax="100">
									{{ collection_rate|number_format(1) }}%
								</div>
							</div>
							<p class="text-center mt-3 mb-0">
								<strong>{{ stats.total_collected|number_format(0, ',', ' ') }}
									FCFA</strong>
								collectés sur
								<strong>{{ stats.total_expected|number_format(0, ',', ' ') }}
									FCFA</strong>
								attendus
							</p>
						</div>
					</div>
				</div>
			</div>

			{% if stats.total_expected == 0 and stats.total_collected == 0 %}
				<div class="row">
					<div class="col-12">
						<div class="alert alert-warning">
							<i class="fa fa-info-circle"></i>
							<strong>Note:</strong>
							Le module de paiement est en cours de développement. Les statistiques seront disponibles une fois les paiements activés.
						</div>
					</div>
				</div>
			{% endif %}

		</div>
	</div>
{% endblock %}