{% embed 'views/macro_card.html.twig' with {'color': 'dark', 'type': 'outline'} %}
    {% block card_body %}
        <table class="table table-bordered table-responsive-lg">
            <thead>
            <tr>
                <th class="align-middle text-center text-bold" style="font-size: 20px;">Quantité par panier</th>
                {% for number in numbers %}
                    <th class="align-middle text-center bg-gradient-lightblue text-bold" style="font-size: 25px;">
                        N°{{ number[1] }}
                    </th>
                {% endfor %}
            </tr>
            </thead>
            <tbody>
            {% for quantity in quantities %}
                <tr>
                    <td class="align-middle text-center bg-warning bg-gradient-yellow text-bold text" style="font-size: 25px;">{{ quantity[1] }} Huîtres</td>
                    {% for number in numbers %}
                        <td class="h-100">
                            {% set _price = huitre_service.huitrePrice(number[1], quantity[1]) %}
                            {% if _price is not same as(null) %}
                                <button style="font-size: 25px;" id="{{ number[1] }}{{ quantity[1] }}" data-commande="{{ fkCommande }}"
                                        data-number="{{ number[1] }}" data-quantity="{{ quantity[1] }}"
                                        class="addToCommande align-middle text-center text-bold btn btn-block bg-gradient-success">
                                    {{ _price|number_format(2, '.', ',') }} €
                                </button>
                            {% endif %}
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% endblock %}
{% endembed %}

{% block javascripts %}
    <script>
        $(".addToCommande").on("click", function () {
            const _number = $(this).attr('data-number');
            const _quantity = $(this).attr('data-quantity');
            const _commande = $(this).attr('data-commande');

            $.ajax({
                type: "POST",
                url: "/admin/commande/article/saved",
                data: {_number: _number, _quantity: _quantity, _commande: _commande},
                cache: false,
                dataType: 'json',
                success: function(result) {
                    document.getElementById('priceCommande').innerHTML = parseFloatFormat(result['priceCommande']);
                    document.getElementById('numberPanierCommande').innerHTML = result['numberPanierCommande'];
                    document.getElementById('totalPriceClientCommande').innerHTML = parseFloatFormat(result['totalPriceClientCommande']);
                    $('#_Table_Commande_View').bootstrapTable('refresh', "{silent: true}");
                }
            });
        });
    </script>
{% endblock %}