{% if cart.products is defined and cart.products|length > 0 %}
	<p>
		<strong>Évènement :</strong>
		{{ cart.eventName }}</p>
	<p>
		<strong>Statut :</strong>
		{{ cart.status }}</p>
	<hr>
	<ul class="list-group list-group-flush">
		{% for key, item in cart.products %}
			<li class="list-group-item d-flex justify-content-between align-items-center">
				<div>
					<div class="text-dark">
						<strong>{{ item.product.name }}</strong>
					</div>

					<small class="text-muted">{{ item.product.category ? item.product.category.name : '' }}</small><br>
					<input type="number" class="form-control form-control-sm mt-1 quantity-update" data-key="{{ key }}" data-action="{{ path('app_technician_cart_update_quantity') }}" value="{{ item.quantity }}" min="1" style="width: 80px;">
				</div>

<a href="{{ path('app_technician_cart_remove', { 'key': key }) }}"
   class="btn btn-sm btn-outline-danger"
   title="Supprimer">
    <i class="fas fa-times"></i>
</a>


			</li>
		{% endfor %}
	</ul>

	<div class="mt-3 d-flex justify-content-between">
		<a href="{{ path('app_technician_cart_clear') }}" class="btn btn-outline-danger btn-sm">🗑 Vider</a>
		<a href="{{ path('app_technician_cart_validate') }}" class="btn btn-success btn-sm">✅ Valider</a>
	</div>
{% else %}
	<p class="text-muted">Aucun matériel sélectionné</p>
{% endif %}
<script>
	document.addEventListener("DOMContentLoaded", function () { // Suppression produit
document.querySelectorAll('.btn-remove-item').forEach(button => {
button.addEventListener('click', function () {
const action = this.dataset.action;
fetch(action, {
method: 'GET',
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
}).then(response => response.json()).then(data => {
if (data.success && data.cartHtml) {
const detailDiv = document.getElementById('tech-cart-details');
if (detailDiv) {
detailDiv.innerHTML = data.cartHtml;
}

// MAJ du badge
const badge = document.getElementById('tech-cart-count');
if (badge) {
badge.textContent = data.cartCount;
}

// 🔁 Rebind les événements sur les nouveaux éléments
rebindCartDropdownEvents();
}
});
});
});

// Mise à jour des quantités
document.querySelectorAll('.quantity-update').forEach(input => {
input.addEventListener('change', function () {
const action = this.dataset.action;
const key = this.dataset.key;
const quantity = this.value;

fetch(action, {
method: 'POST',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams(
{key: key, quantity: quantity}
)
}).then(response => response.json()).then(data => {
if (!data.success) 
alert(data.message);

});
});
});

// Fonction pour rebind après MAJ du DOM
document.addEventListener("DOMContentLoaded", function () {
    function rebindCartDropdownEvents() {
       

        // Gestion des changements de quantité
        document.querySelectorAll('.quantity-update').forEach(input => {
            input.addEventListener('change', function () {
                const action = this.dataset.action;
                const key = this.dataset.key;
                const quantity = this.value;

                fetch(action, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: new URLSearchParams({ key: key, quantity: quantity })
                })
                .then(response => response.json())
                .then(data => {
                    if (!data.success) {
                        alert(data.message || 'Erreur lors de la mise à jour.');}



});

});
});
}
});
});
</script>