@foreach($produitCategories as $produitCategorie)
<div class="parti002">
    <img src="/assets/hamza/d1.png" class="pd120">
    <div class="titpanie2">{{ $produitCategorie->categorie_name }}</div>
    <div class="clr"></div>
    <div class="lignou"></div>
    <div class="backbleu" style="margin:-25px 0 0px 0;float: right;width: 140px;">
        <div class="pikiop" style="width: 100%;">
            <div class="clr"></div>
            <div class="clr"></div>
            <div class="">
                <div class="araysi" 
                        title="Min : {{ $produitCategorie->equi_min }} | Ideal : {{ $produitCategorie->equi_ideal }} | Max : {{ $produitCategorie->equi_max }} | SKU : {{ $produitCategorie->dn }}"
                    >
                    <div class="progress progress-striped active" style="margin-top: 6px !important;height: 5px !important;">
                        <div role="progressbar " style="width: {{ $produitCategorie->equilibre_commande }}%;" 
                                class="progress-bar progress-bar-{{ ($produitCategorie->equilibre_commande>=$produitCategorie->equi_min && $produitCategorie->equilibre_commande<=$produitCategorie->equi_max)?'success':'danger' }}"
                            >
                        </div>
                    </div>
                </div>
                <div class="clr"></div>
            </div>
            <div class="clr"></div>
            <div class="txtl01" style="font-size: 7px;"></div>
            <div class="txtl02" style="font-size: 7px;"></div>
            <div class="txtl03" style="font-size: 7px;">{{ $produitCategorie->equilibre_commande }}%</div>
            <div class="clr"></div>
        </div>
        <div class="clr"></div>
    </div>


    @foreach($produitCategorie->paniers as $panier)
    <div class="dep1">
        {{-- <img src="{{ $panier->img }}" class="imagio"> --}}
        <div class="righto">
            <div class="pr1">{{ $panier->produit_code }}</div>
            <div class="pr2">{{ $panier->produit_name }}</div>
        </div>
        <div class="righto2">
            <div class="number-input">
                {{-- <button onclick="updateQuantity(this, {{ $panier->produits_id }},-1)"></button> --}}
                <input class="quantity" min="0" name="quantity" value="{{ $panier->qte }}" type="number" data-id="{{ $panier->produits_id }}" 
                    max="{{ $panier->stock_limite==3?number_format($panier->qte_hab*$panier->quota/100, 0, ',', ' '):10000000000 }}"
                    data-max-message="La quantité dépasse la limite maximale."
                    oninput="validateQuantity(this)"
                >
                {{-- <button onclick="updateQuantity(this, {{ $panier->produits_id }},1)" class="plus"></button> --}}
            </div>
        </div>

        <div class="righto3">
            <div class="price1">{{ $panier->prix_unitaire }}</div>
            <div class="price2">{{ $panier->prix_ligne }}</div>
        </div>
        <div class="righto4 del_ligne_panier" data-id="{{ $panier->produits_id }}" style="cursor: pointer">
            <img src="/assets/hamza/marque-de-croix.png" class="trash">
        </div>
        <div class="clr"></div>

        <div class="backgri div_qte_hab_"   style="display: block"  >
            <div class="pakmo">
            <div class="titgri">Qt habituelle</div>
            <div class="titgri2">{{ $panier->qte_hab }}</div>
            </div>
            <div class="pakmo">
            <div class="titgri">Qt Idéale</div>
            <div class="titgri2">{{ $panier->qte_ideal }}</div>
            </div>
            <div class="pakmo2">
            <div class="titgri">Qt Quota</div>
            <div class="titgri2">{{ $panier->stock_limite==3?number_format($panier->qte_hab*$panier->quota/100, 0, ',', ' '):'--------' }}</div>
            </div>
            <div class="clr"></div>
        </div>


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

    <script>
        
        function validateQuantity(inputElement) {
        const currentValue = parseInt(inputElement.value, 10);
        const maxQuantity = parseInt(inputElement.getAttribute('max'), 10);

        if (currentValue > maxQuantity) {
            inputElement.title = "La quantité dépasse la limite maximale.";
            inputElement.value = maxQuantity;
        } else {
            inputElement.title = ""; // Efface le message d'erreur
        }
        }
</script> 

    @if($produitCategorie->sum_dn<$produitCategorie->sum_dn_total)
    <div class="btnsug class_complete_dn" data-filter="{{ $produitCategorie->categorie_id }}"  style="cursor: pointer"><img src="/assets/hamza/pluus.png" class="pluus">Compléter MSL ({{ $produitCategorie->sum_dn }}/{{ $produitCategorie->sum_dn_total }})</div>
    @else
        @if($produitCategorie->sum_dn_total>0)
        <div class="btnsug" style="background-color: #7be23a;color: #fff;">MSL Complète </div>
        @else
        <div class="btnsug" style="background-color: #fbecec;color: #000;">Pas de MSL </div>
        @endif
    @endif
    <div class="total">Total</div>
    <img src="/assets/hamza/pw1.png" class="pw1">

    <div class="total2">{{ $produitCategorie->categorie_total }} Dh</div>


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


<script>
    // Function to update quantity via AJAX
    function updateQuantity(button, id,type) {
        // if(type==-1) button.parentNode.querySelector('input[type=number]').stepDown();
        // if(type==1) button.parentNode.querySelector('input[type=number]').stepUp();
        // var input = $(button).siblings('input.quantity');
        var qte = parseInt(button.value); 
        
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        $.ajax({
            type: 'POST',
            url: "/televente/update_panier_qte/" + id + "?qte=" + qte,
            data: {
                _token: CSRF_TOKEN
                ,canals_id: "{{ $canals_id }}"
                ,qte: qte + ""
            },
            dataType: 'JSON',
            success: function(results) {               
                refresh_all_panier();
            }
        });


    }

    // Attach the change event to the quantity input field
    $('.quantity').on('change', function() {
        updateQuantity(this, $(this).data('id'));
    });
</script>

<script>
    $(document).ready(function() {

        
        // Hide the div initially
        $('.div_qte_hab_').hide();
    
        // Show the div when the quantity input field is clicked
        $('.quantity').focus(function() {
            $(this).closest('.dep1').find('.div_qte_hab_').show();
        });
    
        // Hide the div when the quantity input field is blurred (loses focus)
        $('.quantity').blur(function() {
            $(this).closest('.dep1').find('.div_qte_hab_').hide();
        });
        
        
        $('.class_complete_dn').on('click', function() {
            var filterValue = $(this).data('filter');
            // Reset styles for all elements with class 'filtre_categorie'
            $('.filtre_categorie').removeClass('menu1').addClass('menu2');             
            $('.filtre_categorie[data-filter="' + filterValue + '"]').removeClass('menu2').addClass('menu1');

            
            
            /*$('.filtre_dn').removeClass('menay001').addClass('menay002');
            var element_filtre_dn = $('.filtre_dn[data-filter="0"]');
            element_filtre_dn.removeClass('menay002').addClass('menay001');
            filtre_produits_liste(1);*/
            var categorie_id = filterValue;
            reloadWithNewParameter('complete_dn',categorie_id);

        });

        $('.del_ligne_panier').on('click', function() {
            var clickeddel_ligne_panier = $(this);
            clickeddel_ligne_panier.addClass('loading');
            //$(this).hide();
            // Get the id_produit from the data attribute
            var id = $(this).data('id');
            var qte = 0;
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                type: 'POST',
                url: "/televente/update_panier_qte/" + id + "?qte=" + qte,
                data: {
                    _token: CSRF_TOKEN
                    ,canals_id: "{{ $canals_id }}"
                    ,del: 1
                },
                dataType: 'JSON',
                success: function(results) {
                    clickeddel_ligne_panier.removeClass('loading');
                    clickeddel_ligne_panier.hide();
                    refresh_all_panier();
                    filtre_produits_liste();

                }
            });
        });

        $("#panier_total").html("{{ $total_ht }} DH");
        $("#panier_total_tva").html("{{ $total_tva }} DH");
        $("#panier_total_ttc").html("{{ $total_panier }} DH");
        $("#cmd_is_valide").val({{ $cmd_is_valide }});
        // $("#cmd_interpretation").html("{{ $cmd_interpretation }}");
 
    });

    
    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>