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

{% block title %}Journal des stocks -
	{{ 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-list me-2"></i>Journal des mouvements de stock
		</h1>
		<a href="{{ path('app_stock_new') }}" class="btn btn-primary">
			<i class="fas fa-plus me-2"></i>Nouveau mouvement
		</a>
	</div>

	<!-- Filtres -->
	<div class="card mb-4">
		<div class="card-body">
			<form method="GET" class="row g-3">
				<div class="col-md-3">
					<label class="form-label">Date de début</label>
					<input type="date" name="date_debut" class="form-control" value="{{ app.request.get('date_debut') }}">
				</div>
				<div class="col-md-3">
					<label class="form-label">Date de fin</label>
					<input type="date" name="date_fin" class="form-control" value="{{ app.request.get('date_fin') }}">
				</div>
				<div class="col-md-3">
					<label class="form-label">Heure de début</label>
					<input type="time" name="heure_debut" class="form-control" value="{{ app.request.get('heure_debut') }}">
				</div>
				<div class="col-md-3">
					<label class="form-label">Heure de fin</label>
					<input type="time" name="heure_fin" class="form-control" value="{{ app.request.get('heure_fin') }}">
				</div>
				<div class="col-md-3">
					<label class="form-label">Type de mouvement</label>
					<select name="type" class="form-select">
						<option value="">Tous</option>
						<option value="entree" {{ app.request.get('type') == 'entree' ? 'selected' : '' }}>Entrées</option>
						<option value="sortie" {{ app.request.get('type') == 'sortie' ? 'selected' : '' }}>Sorties</option>
					</select>
				</div>
				<div class="col-md-3 d-flex align-items-end">
					<div class="btn-group w-100">
						<button type="submit" class="btn btn-outline-primary">
							<i class="fas fa-filter me-1"></i>Filtrer
						</button>
						<a href="{{ path('app_stock_journal') }}" class="btn btn-outline-secondary">
							<i class="fas fa-times me-1"></i>Reset
						</a>
						<button type="button" class="btn btn-outline-info" onclick="setTodayFilter()">
							<i class="fas fa-calendar-day me-1"></i>Aujourd'hui
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<div class="card">
		<div class="card-body">
			{% if mouvements %}
				<!-- Barre de recherche -->
				<div class="mb-3">
					<div class="input-group">
						<span class="input-group-text">
							<i class="fas fa-search"></i>
						</span>
						<input type="text" class="form-control" id="searchInput" placeholder="Rechercher par référence, description ou commentaire...">
						<button class="btn btn-outline-secondary" type="button" id="clearSearch">
							<i class="fas fa-times"></i>
						</button>
					</div>
				</div>
				<div class="table-responsive">
					<table class="table table-hover">
						<thead class="table-light">
							<tr>
								<th width="120">Date et heure</th>
								<th>Référence produit</th>
								<th>Description</th>
								<th>Type</th>
								<th>Quantité</th>
								<th>Commentaire</th>
								<th width="80">Actions</th>
							</tr>
						</thead>
						<tbody>
							{% for mouvement in mouvements %}
								<tr>
									<td>
										<div>
											<strong>{{ mouvement.dateCourte }}</strong><br>
											<small class="text-muted">
												<i class="fas fa-clock me-1"></i>
												{{ mouvement.heure }}
											</small>
										</div>
									</td>
									<td>
										<strong>{{ mouvement.produit.reference }}</strong>
									</td>
									<td>{{ mouvement.produit.description }}</td>
									<td>
										<span class="badge bg-{{ mouvement.type == 'entree' ? 'success' : 'danger' }}">
											<i class="fas fa-arrow-{{ mouvement.type == 'entree' ? 'up' : 'down' }} me-1"></i>
											{{ mouvement.typeLabel }}
										</span>
									</td>
									<td>
										<span class="fw-bold text-{{ mouvement.type == 'entree' ? 'success' : 'danger' }}">
											{{ mouvement.quantiteFormatee }}
										</span>
									</td>
									<td>
										{% if mouvement.commentaire %}
											<span title="{{ mouvement.commentaire }}">
												{{ mouvement.commentaire|slice(0, 30) }}{{ mouvement.commentaire|length > 30 ? '...' : '' }}
											</span>
										{% else %}
											<span class="text-muted">-</span>
										{% endif %}
									</td>
									<td>
										<button type="button" class="btn btn-sm btn-outline-danger" title="Supprimer" onclick="confirmerSuppression({{ mouvement.id }})">
											<i class="fas fa-trash"></i>
										</button>
									</td>
								</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
			{% else %}
				<div class="text-center py-5">
					<i class="fas fa-clipboard-list fa-4x text-muted mb-3"></i>
					<h5 class="text-muted">Aucun mouvement trouvé</h5>
					<p class="text-muted">Aucun mouvement de stock ne correspond aux critères sélectionnés.</p>
				</div>
			{% endif %}
		</div>
	</div>

	<!-- Modal de confirmation de suppression -->
	<div class="modal fade" id="modalSuppression" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Confirmer la suppression</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
				</div>
				<div class="modal-body">
					<p>Êtes-vous sûr de vouloir supprimer ce mouvement de stock ?</p>
					<div class="alert alert-warning">
						<i class="fas fa-exclamation-triangle me-2"></i>
						Cette action est irréversible. Le mouvement sera supprimé définitivement.
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
					<form id="form-suppression" method="post" class="d-inline">
						<input type="hidden" name="_token" id="csrf-token" value="">
						<button type="submit" class="btn btn-danger">
							<i class="fas fa-trash me-2"></i>Supprimer
						</button>
					</form>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block javascripts %}
<script>
// Stocker les tokens CSRF pour chaque mouvement
const csrfTokens = {
	{% for mouvement in mouvements %}
	{{ mouvement.id }}: '{{ csrf_token('delete' ~ mouvement.id) }}'{{ not loop.last ? ',' : '' }}
	{% endfor %}
};

function confirmerSuppression(id) {
	document.getElementById('form-suppression').action = '{{ path('app_stock_delete', {'id': '__ID__'}) }}'.replace('__ID__', id);
	document.getElementById('csrf-token').value = csrfTokens[id];
	
	new bootstrap.Modal(document.getElementById('modalSuppression')).show();
}

function setTodayFilter() {
	// Obtenir la date actuelle pour le fuseau horaire de Ouagadougou (GMT+0)
	const now = new Date();
	// Le Burkina Faso est en GMT+0, donc on utilise directement la date UTC
	const today = now.toISOString().split('T')[0];
	document.querySelector('input[name="date_debut"]').value = today;
	document.querySelector('input[name="date_fin"]').value = today;
}

// Fonction de recherche
function filterTable() {
	const searchInput = document.getElementById('searchInput');
	const filter = searchInput.value.toLowerCase();
	const table = document.querySelector('.table tbody');
	const rows = table.getElementsByTagName('tr');

	for (let i = 0; i < rows.length; i++) {
		const reference = rows[i].cells[1].textContent.toLowerCase(); // Référence produit
		const description = rows[i].cells[2].textContent.toLowerCase(); // Description
		const commentaire = rows[i].cells[5].textContent.toLowerCase(); // Commentaire
		
		if (reference.includes(filter) || description.includes(filter) || commentaire.includes(filter)) {
			rows[i].style.display = '';
		} else {
			rows[i].style.display = 'none';
		}
	}
}

// Événements
document.addEventListener('DOMContentLoaded', function() {
	const searchInput = document.getElementById('searchInput');
	const clearButton = document.getElementById('clearSearch');
	
	if (searchInput) {
		searchInput.addEventListener('input', filterTable);
		
		if (clearButton) {
			clearButton.addEventListener('click', function() {
				searchInput.value = '';
				filterTable();
				searchInput.focus();
			});
		}
	}
});
</script>
{% endblock %}