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

<div class="container">
    <div class="row">
        <div class="col-12 mb-3 d-flex align-items-center" style="min-height: 100px; border-bottom: 1px solid #ddd;"> <!-- Affichage en flex avec une hauteur minimale -->
            <!-- Inclus le composant Vue ici -->

            <!-- Colonne pour l'image du produit -->
            <div class="col-2">
                <a href="{{ path('sylius_shop_product_show', {'slug': product.slug, '_locale': product.translation.locale}) }}">
                    {% include '@SyliusShop/Product/_mainImage.html.twig' with {'product': product, 'class': 'img-fluid border border-light bg-light w-50 h-auto'} %}
                </a>
            </div>
{#{{ product }}#}
            <!-- Colonne pour le nom du produit -->
            {% set code = product.code %}


            <div class="col-4">
                <h6 class="sylius-product-name" {{ sylius_test_html_attribute('product-name', product.name) }}>
                    <a href="{{ path('sylius_shop_product_show', {'slug': product.slug, '_locale': product.translation.locale}) }}">
                        {{ product.name }}
                    </a>
                </h6>
                <div class="sylius-product-code" {{ sylius_test_html_attribute('product-code') }}>Référence : {{ code }}</div>
                {% for attribute in product.attributes %}
                    {% if attribute.code == 'product_unit' %}
                        <p><i class="fa fa-balance-scale-right"></i> {{ attribute.name }} : {{ attribute.value }}</p>
                    {% endif %}
                {% endfor %}
            </div>
            <div class="col-1 mx-2">
                    {% if product.enabledVariants|length > 1 %}
                        <select class="form-control variant-select" id="variant-{{ product.id }}" data-product-id="{{ product.id }}">
                            {% for variant in product.enabledVariants %}
                                <option value="{{ variant.id }}">{{ variant.name }}</option>
                            {% endfor %}
                        </select>
                    {% endif %}

            </div>
            <!-- Colonne pour le prix du produit -->

                {% if not product.enabledVariants.empty() %}
                    {% set variant = product|sylius_resolve_variant %}
                    {% set price = money.calculatePrice(variant) %}

            {% for attribute in product.attributes %}
                {% if attribute.value == 'KG' %}
                    <div class="col-1 d-flex justify-content-end mx-2">
                        <input class="input-weight form-control" type="number" min="0" id="weight-{{ product.id }}" data-product-id="{{ product.id }}" data-variant-id="{{ variant.id }}">
                    </div>
                {% endif %}
            {% endfor %}
            <div class="col-1 mx-2">
                    <span class="sylius-product-price text-center">{{ price }}</span>
                {% endif %}
            </div>
            <div class="col-3 d-flex justify-content-end">
                <div class="input-group justify-content-end">

                        <button type="button" class="btn btn-sm btn-outline-danger  btn-remove-cart {% if quantity <= 0 %} d-none {% endif %}" id="btn-remove-{{ product.id }}" data-product-id="{{ product.id }}" data-variant-id="variant-{{ variant.id }}">
                            -
                        </button>

                    <input class="input-quantity {% if quantity <= 0 %}border-left-rounded {% endif %}"  name="quantity" type="text" value="{{ quantity }}" id="quantity-{{ product.id }}" data-product-id="{{ product.id }}">
{#                    <button type="button" class="btn btn-lg btn-outline-danger btn-add-cart no-left-radius" data-product-id="{{ product.id }}" onclick="addToCart({{ product.id }})">#}
{#                        {{ 'sylius.ui.plus'|trans }}#}
{#                    </button>#}
                        <button type="button" class="btn btn-sm btn-outline-danger btn-add-cart no-left-radius" id="btn-add-{{ product.id }}" data-product-id="{{ product.id }}" data-variant-id="variant-{{ variant.id }}">
                            {{ 'sylius.ui.plus'|trans }}
                        </button>

                </div>
            </div>
            <div class="col-1 px-5">
                {% if orderItemId is not null %}
{#                <button type="button" class="btn-lg btn-outline-secondary" style="border: none !important; background-color: transparent !important;" id="btn-remove-all-{{ product.id }}" data-variant-id="variant-{{ variant.id }}" data-csrf="{{ csrf_token(variant.id) }}" onclick="deleteCartItem(this)"><i class="fa-solid fa-trash-can"></i></button>#}
                <button type="button" class="btn-lg btn-outline-secondary remove-cart-item" style="border: none !important; background-color: transparent !important;" id="btn-remove-all-{{ product.id }}" data-product-id="{{ product.id }}" data-variant-id="variant-{{ variant.id }}" onclick="deleteCartItem(this)" data-js-remove-from-cart-csrf-token="{{ csrf_token(orderItemId) }}" data-js-remove-from-cart-api-url="{{ path('sylius_shop_ajax_cart_item_remove', {'id': orderItemId}) }}"><i class="fa-solid fa-trash-can"></i></button>
                {% elseif orderItemId is null and quantity == 0 %}
                <button type="button" class="btn-lg btn-outline-secondary" style="border: none !important; background-color: transparent !important;" id="btn-remove-all-{{ product.id }}" data-product-id="{{ product.id }}" data-variant-id="variant-{{ variant.id }}" disabled><i class="fa-solid fa-trash-can"></i></button>
            {% endif %}
            </div>
            <!-- Colonne pour le bouton "Ajouter aux favoris" (à programmer plus tard) -->
            <div class="col-1 px-5">
                <span class="btn-lg btn-outline-secondary">❤</span>
            </div>

        </div> <!-- Fin de la ligne de produit -->
    </div> <!-- Fin du row -->
</div> <!-- Fin du container -->

{% block javascripts %}
    {{ sylius_template_event('sylius.shop.layout.javascripts') }}
{% endblock %}