{% import "@SyliusShop/Common/Macro/money.html.twig" as money %}
{% import "@SyliusShop/Common/Macro/icons.html.twig" as icons %}

{% set variant = item.variant %}
{% set product = variant.product %}
{% set lot = variant.lot %}
{% set original_price_to_display = sylius_order_item_original_price_to_display(item) %}
{% set is_pack = ('caisse' in variant.code or 'carton' in variant.code) %}

<li class="list-group-item border-top border-bottom border-light" {{ sylius_test_html_attribute('cart-product-row', item.productName) }}>
	<div class="grid py-2 py-lg-4 gap-2 gap-lg-4" {{ sylius_test_html_attribute('cart-item', loop_index|default(null)) }}>
		<div class="g-col-12 g-col-sm-4 g-col-lg-3 g-row-2">
			{% include '@SyliusShop/Product/_mainImage.html.twig' with {'product': product, 'filter': 'sylius_shop_product_tiny_thumbnail'} %}
		</div>

		<div class="g-col-12 g-col-sm-8 g-col-lg-9 hstack align-items-baseline gap-3">
			{% include '@SyliusShop/Product/_info.html.twig' with {variant} %}

			<button type="button" data-js-remove-from-cart-button data-js-remove-from-cart-redirect-url="{{ path('sylius_shop_cart_summary') }}" data-js-remove-from-cart-csrf-token="{{ csrf_token(item.id) }}" data-js-remove-from-cart-api-url="{{ path('sylius_shop_ajax_cart_item_remove', {'id': item.id}) }}" class="btn btn-sm btn-link sylius-cart-remove-button" {{ sylius_test_html_attribute('cart-remove-button', item.productName) }}>{{ icons.times() }}
				{{ 'sylius.ui.delete'|trans }}</button>
		</div>

		<div class="g-col-12 g-col-sm-8 g-col-lg-9 hstack mb-0 gap-3">
			<div class="input-group w-auto" data-item-id="{{ item.id }}">
				<button type="button" class="btn btn-outline-secondary quantity-decrease" data-item-id="{{ item.id }}">
					-
				</button>
				{{ form_widget(form.quantity, {attr: {readonly: 'readonly',min: lot,step: lot,class: 'text-center w-50 quantity-input','data-item-id': item.id}}) }}
				<button type="button" class="btn btn-outline-secondary quantity-increase" data-item-id="{{ item.id }}">
					+
				</button>
			</div>


			<div class="text-end ms-auto">
				<div class="hstack align-items-baseline gap-2">
					<span class="fw-normal text-gray-700">{{ 'sylius.ui.unit_price'|trans }}</span>

					{% if original_price_to_display is not null %}
						<span class="small sylius-regular-unit-price" {{ sylius_test_html_attribute('cart-product-regular-unit-price') }}>
							<s>{{ money.convertAndFormat(original_price_to_display) }}</s>
						</span>
					{% endif %}

					{# Prix unitaire mis en plus gros et en gras #}
					<span class="sylius-unit-price fs-4 fw-bold text-dark" {{ sylius_test_html_attribute('cart-product-unit-price', item.productName) }}>
						{{ money.convertAndFormat(item.discountedUnitPrice) }}
					</span>
				</div>
			</div>
		</div>
	</div>
</li>


<script>
	document.addEventListener("DOMContentLoaded", function () { // Supprime les événements précédents pour éviter le déclenchement multiple
document.querySelectorAll(".quantity-increase, .quantity-decrease").forEach(button => {
button.replaceWith(button.cloneNode(true)); // Clone pour supprimer tous les events attachés
});

let increaseButtons = document.querySelectorAll(".quantity-increase");
let decreaseButtons = document.querySelectorAll(".quantity-decrease");

increaseButtons.forEach(button => {
button.addEventListener("click", function () {
let itemId = this.getAttribute("data-item-id");
let input = document.querySelector(".quantity-input[data-item-id='" + itemId + "']");

let lot = parseInt(input.getAttribute("step"), 10) || 1;
let currentValue = parseInt(input.value, 10) || lot;
let newValue = currentValue + lot;

input.value = newValue;

});
});

decreaseButtons.forEach(button => {
button.addEventListener("click", function () {
let itemId = this.getAttribute("data-item-id");
let input = document.querySelector(".quantity-input[data-item-id='" + itemId + "']");

let lot = parseInt(input.getAttribute("step"), 10) || 1;
let min = parseInt(input.getAttribute("min"), 10) || lot;
let currentValue = parseInt(input.value, 10) || lot;

if (currentValue > min) {
let newValue = currentValue - lot;
input.value = newValue;

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