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

{% block title %}Tableau de bord -
	{{ parent() }}
{% endblock %}

{% block body %}
	<div class="d-flex justify-content-between align-items-center mb-4">
		<h1 class="h3 mb-0">
			<i class="fas fa-tachometer-alt me-2"></i>Tableau de bord
		</h1>
		<div>
			<a href="{{ path('app_stock_new') }}" class="btn btn-primary">
				<i class="fas fa-plus me-2"></i>Nouveau mouvement
			</a>
		</div>
	</div>

	<!-- Cartes de statistiques -->
	<div class="row mb-4">
		<div class="col-md-3 mb-3">
			<div class="card card-stats primary h-100">
				<div class="card-body">
					<div class="d-flex justify-content-between align-items-center">
						<div>
							<p class="card-text text-muted mb-1">Total produits</p>
							<h3 class="card-title mb-0">{{ stats.total_produits }}</h3>
						</div>
						<div class="text-primary">
							<i class="fas fa-boxes fa-2x"></i>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-md-3 mb-3">
			<div class="card card-stats success h-100">
				<div class="card-body">
					<div class="d-flex justify-content-between align-items-center">
						<div>
							<p class="card-text text-muted mb-1">Entrées aujourd'hui</p>
							<h3 class="card-title mb-0">{{ stats.mouvements_today.entrees }}</h3>
						</div>
						<div class="text-success">
							<i class="fas fa-arrow-up fa-2x"></i>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-md-3 mb-3">
			<div class="card card-stats danger h-100">
				<div class="card-body">
					<div class="d-flex justify-content-between align-items-center">
						<div>
							<p class="card-text text-muted mb-1">Sorties aujourd'hui</p>
							<h3 class="card-title mb-0">{{ stats.mouvements_today.sorties }}</h3>
						</div>
						<div class="text-danger">
							<i class="fas fa-arrow-down fa-2x"></i>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-md-3 mb-3">
			<div class="card card-stats warning h-100">
				<div class="card-body">
					<div class="d-flex justify-content-between align-items-center">
						<div>
							<p class="card-text text-muted mb-1">Stocks faibles</p>
							<h3 class="card-title mb-0">{{ stats.stocks_faibles }}</h3>
						</div>
						<div class="text-warning">
							<i class="fas fa-exclamation-triangle fa-2x"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div
		class="row">
		<!-- Mouvements récents -->
		<div class="col-lg-8 mb-4">
			<div class="card">
				<div class="card-header d-flex justify-content-between align-items-center">
					<h5 class="card-title mb-0">
						<i class="fas fa-clock me-2"></i>Mouvements récents
					</h5>
					<a href="{{ path('app_stock_journal') }}" class="btn btn-sm btn-outline-primary">
						Voir tout
					</a>
				</div>
				<div class="card-body">
					{% if mouvements_recents %}
						<div class="table-responsive">
							<table class="table table-hover mb-0">
								<thead class="table-light">
									<tr>
										<th>Date</th>
										<th>Produit</th>
										<th>Type</th>
										<th>Quantité</th>
									</tr>
								</thead>
								<tbody>
									{% for mouvement in mouvements_recents %}
										<tr>
											<td>
												<div>
													<strong>{{ mouvement.dateCourte }}</strong><br>
													<small class="text-muted">{{ mouvement.heure }}</small>
												</div>
											</td>
											<td>
												<strong>{{ mouvement.produit.reference }}</strong><br>
												<small class="text-muted">{{ mouvement.produit.description }}</small>
											</td>
											<td>
												<span class="badge badge-{{ mouvement.type }}">
													{{ mouvement.typeLabel }}
												</span>
											</td>
											<td>
												<span class="text-{{ mouvement.type == 'entree' ? 'success' : 'danger' }}">
													{{ mouvement.quantiteFormatee }}
												</span>
											</td>
										</tr>
									{% endfor %}
								</tbody>
							</table>
						</div>
					{% else %}
						<div class="text-center py-4">
							<i class="fas fa-inbox fa-3x text-muted mb-3"></i>
							<p class="text-muted">Aucun mouvement récent</p>
						</div>
					{% endif %}
				</div>
			</div>
		</div>

		<!-- Alertes stocks faibles -->
		<div class="col-lg-4 mb-4">
			<div class="card">
				<div class="card-header">
					<h5 class="card-title mb-0">
						<i class="fas fa-exclamation-triangle me-2 text-warning"></i>Alertes stocks
					</h5>
				</div>
				<div class="card-body">
					{% if produits_stock_faible %}
						{% for produit in produits_stock_faible %}
							<div class="alert alert-warning py-2 px-3 mb-2" role="alert">
								<div class="d-flex justify-content-between align-items-center">
									<div>
										<strong>{{ produit.reference }}</strong><br>
										<small>{{ produit.description|slice(0, 30) }}{{ produit.description|length > 30 ? '...' : '' }}</small>
									</div>
									<span class="badge bg-warning text-dark">
										{{ produit.stockFinal }}
									</span>
								</div>
							</div>
						{% endfor %}
						<div class="mt-3">
							<a href="{{ path('app_stock_etat') }}" class="btn btn-sm btn-outline-warning w-100">
								Voir tous les stocks
							</a>
						</div>
					{% else %}
						<div class="text-center py-4">
							<i class="fas fa-check-circle fa-3x text-success mb-3"></i>
							<p class="text-muted">Tous les stocks sont suffisants</p>
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
{% endblock %}