@foreach ($produits as $produit)
    <div class="backyello {{ $produit->dn>2?'dn_required':'' }}" id="div_{{ $produit->id }}">
        <div class="backyello2">
            @if($mode_liste==3)
            <img src="{{ $produit->img }}" class="image36">
            @endif

            <div class="titlo1">{{ $produit->code }}</div>
            <div class="titlo2">{{ $produit->desgination_produit }}</div>
            <div class="igramme">{{ $produit->poids_net }} g</div>
            <div class="igramme">{{ $produit->colisage }} U/C</div>
            <div class="clr"></div>
            <div class="igramme2">Pré poussé</div>

            <div class="disposi"> <img src="/assets/hamza/box2.png" class="box2">Stock {{ $produit->stock_libelle }}</div>
            @if($produit->stock_limite==3)
            <div class="hab25"> <img src="/assets/hamza/pic37.png" class="image37">Qt Hab : {{ $produit->qte_hab }}</div>
            @endif
        </div>

        <div class="clr"></div>
        <div class="linshop"></div>
        <div class="clr"></div>
        <div class="partla1">
            <div class="pricela2">P.U : {{ $produit->prix_unitaire }} Dh</div>
            @php
                $partie_entiere = floor($produit->prix_ttc);
                $partie_decimale = fmod($produit->prix_ttc, 1) * 100;
                $partie_decimale_formattee = $partie_decimale == 0 ? '00' : $partie_decimale;
            @endphp
            <div class="price1fs">{{ $partie_entiere }}<span>.{{ round($partie_decimale_formattee,0) }} Dh</span></div>

            <div class="clr"></div>
        </div>

        @if($produit->test_ajout==0 && $produit->qte_max>0)
        <div class="pluscart" data-id="{{ $produit->id }}" data-qte_max="{{ $produit->qte_max }}"
            data-colisage="{{ $produit->colisage }}" style="cursor: pointer">+</div>
        @endif

        <div class=""></div>
        <div class="clr"></div>
    </div>
@endforeach

<style>
    .loading {
    position: relative;
    }

    .loading::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        border: 4px solid #3498db;
        border-radius: 50%;
        border-top: 4px solid transparent;
        animation: spin 1s linear infinite;
        transform: translate(-50%, -50%);
    }

</style>


<script>
    $(document).ready(function() {
        $('.pluscart').on('click', function() {
            var clickedPluscart = $(this);
            clickedPluscart.addClass('loading');
            //$(this).hide();
            // Get the id_produit from the data attribute
            var ids = $(this).data('id');
            var qte = $(this).data('qte_max');
            var colisage = $(this).data('colisage');
 
            qte = 1;//colisage ;
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                type: 'POST',
                url: "/commandes/add_produits_details/" + ids + "?qte=" + qte,
                data: {
                    _token: CSRF_TOKEN,
                    qte: qte + ""
                },
                dataType: 'JSON',
                success: function(results) {
                    clickedPluscart.removeClass('loading');
                    clickedPluscart.hide();
                    refresh_all_panier();

                }
            });
        });

    });

    
    function change_qte() {
        var carton = $('#sel_cmd_carton').val();
        var qte = $('#sel_cmd_qte').val();
        var colisage = $('#sel_cmd_colisage').val();

        var total = carton * colisage * 1 + qte * 1;
        $('#sel_cmd_total').val(total);
    }
</script>