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

{% block title %}EventDetail index
{% endblock %}

{% block body %}
	<h2 class="text-center m-2">Commandes
	</h2>

	{% for message in app.flashes('success') %}
		<div class="alert alert-success">{{ message }}</div>
	{% endfor %}

	<div class="">
		<div class="">
			<form class="d-flex p-md-4 m-0 p-0" method="POST" action="{{ path('app_event_detail_index') }}" data-turbo="false">
				<select class="form-select" name="eventSelected">
					<option value="">Événement</option>
					{% for event in listEvents %}
						<option value="{{ event.1 }}">{{ event.name }}</option>
					{% endfor %}
				</select>

				<select class="form-select mx-3" name="statusSelected">
					<option value="">Sélectionner un statut</option>
					<option value="new">New</option>
					<option value="preparer">Préparer</option>
					<option value="livrer">Livrer</option>
					<option value="retour">Retour</option>
				</select>

				<select class="form-select" name="orderSelected">
					<option value="ASC">Croissant</option>
					<option value="DESC">Décroissant</option>
				</select>

				<button class="btn bg-success ms-3" type="submit">Filtrer</button>
			</form>
		</div>
	</div>
	<div>

		<div class="MyDiv  m-md-4 p-md-4 m-0 p-0">
			<table class="table  ">
				<form method="POST" action="{{ path('app_event_detail_update_all') }}" data-turbo="false">
					<div class="mb-3">
						<button type="submit" class="btn btn-primary me-3">Valider les modifications</button>
						<button type="submit" formaction="{{ path('app_event_detail_delete_all') }}" formmethod="POST" class="btn btn-danger" onclick="return confirm('Confirmer la suppression de tous les éléments sélectionnés ?');">
							Supprimer la sélection
						</button>
					</div>


					<thead>
						<tr>
							<th class="CellStart">EVENT</th>
							<th class="MyCell">
								<select name="statusAll" id="statusAll">
									<option value="">Statut</option>
									<option value="new">New</option>
									<option value="bp ">Pret</option>
									<option value="bl">Livrer</option>
									<option value="br">Retour</option>
								</select>
							</th>
							<th class="MyCell d-none d-md-table-cell ">Préparateur</th>
							<th class="MyCell">Article</th>
							<th class="MyCell">Q</th>
							<th class="MyCell d-none d-md-table-cell">Date</th>
							<th class="cellEnd text-center">
								<input type="checkbox" id="select-all">
							</th>

						</tr>
					</thead>
					<tbody>
						{% for event_detail in event_details %}
							<tr>
								<td class="CellStart">{{ event_detail.event ? event_detail.event.name : 'N/A' }}</td>
								<td class="MyCell">
									<select name="statuses[{{ event_detail.id }}]" class="statusSelect">
										<option value="new" {% if event_detail.mouve == 'new' %} selected {% endif %}>New</option>
										<option value="preparer" {% if event_detail.mouve == 'bp' %} selected {% endif %}>Préparer</option>
										<option value="livrer" {% if event_detail.mouve == 'bl' %} selected {% endif %}>Livrer</option>
										<option value="retour" {% if event_detail.mouve == 'br' %} selected {% endif %}>Retour</option>
									</select>
								</td>
								<td class="MyCell d-none d-md-table-cell">{{ event_detail.user ? event_detail.user.firstName : 'N/A' }}</td>
								<td class="MyCell">{{ event_detail.product ? event_detail.product.name : 'N/A' }}</td>
								<td class="MyCell" style="width: ;">
									<input type="number" name="quantities[{{ event_detail.id }}]" value="{{ event_detail.quantity }}" style="width: 10px; padding: 0; font-size: 0.8rem;">
								</td>
								<td class="MyCell d-none d-md-table-cell">{{ event_detail.date ? event_detail.date|date('Y-m-d') : '' }}</td>
								<td class="cellEnd text-center">
									<input type="checkbox" name="deleteIds[]" value="{{ event_detail.id }}">
								</td>

							</tr>
						{% else %}
							<tr>
								<td colspan="7">Aucun enregistrement trouvé</td>
							</tr>
						{% endfor %}
					</tbody>
				</form>
			</table>


		</div>

	</div>

	<script>
		document.addEventListener("DOMContentLoaded", function () {

const selectAllCheckbox = document.getElementById("select-all");
const deleteCheckboxes = document.querySelectorAll('input[name="deleteIds[]"]');

if (selectAllCheckbox) {
selectAllCheckbox.addEventListener("change", function () {
deleteCheckboxes.forEach(cb => cb.checked = this.checked);
});
}

const statusAllSelect = document.getElementById("statusAll");
const statusSelects = document.querySelectorAll(".statusSelect");

statusAllSelect.addEventListener("change", function () {
statusSelects.forEach(select => {
select.value = this.value;
});
});
});
	</script>
{% endblock %}