@foreach(Cart::content() as $article)
  <li class="list-group-item py-3 ps-0 border-top">
      <div class="row align-items-center">
          <div class="col-3 col-md-2">
              <img src="{{ url($article->options->photo) }}" alt="solar"
                  class="img-fluid">
          </div>
          <div class="col-4 col-md-6 col-lg-5">
              <a href="javascript:void(0)" class="text-inherit">
                  <p class="mb-0 font-small">{{ $article->name }}</p>
              </a>

              <input id="row{{$article->id}}" value="{{$article->rowId}}" type="hidden">
              
              <div class="mt-2 small lh-1" onclick="retirer{{$article->id}}()"> <a href="#!"
                      class="text-decoration-none text-inherit">
                      <span class="me-1 align-middle"><i class="bi bi-trash"></i></span>
                      <span class="text-muted font-extra-small">Retirer</span></a>
              </div>
          </div>
          <!-- input group -->
          <div class="col-3 col-md-3 col-lg-3">
            <input id="qty-add{{$article->id}}" type="hidden" value="{{ ($article->qty)+1 }}">
            <input id="qty-subtract{{$article->id}}" type="hidden" value="{{ ($article->qty)-1 }}">
              <div class="input-group input-spinner">
                  <span class="button-minus btn btn-sm" onclick="update_subtract{{$article->id}}()">-</span>
                  <input id="qty-{{$article->id}}" type="text" value="{{ $article->qty }}"
                      class="quantity-field form-control-sm form-input" name="qty-{{$article->rowId}}">
                  <span class="button-plus btn btn-sm" onclick="update_add{{$article->id}}()">+</span>
              </div>
          </div>
          <div class="col-2 text-lg-end text-start text-md-end col-md-2">
              <span class="fw-bold">{{number_format($article->price * $article->qty, 2) }} XOF</span>
          </div>
      </div>
  </li>
  <script type="text/javascript">
      function retirer{{$article->id}}() {
          

          var id = {{$article->id}};
          var rowId = document.getElementById("row{{$article->id}}").value; 
          console.log(rowId);
          // var nombre = 1;
          
                  var csrfToken = $('meta[name="csrf-token"]').attr('content');
                  
                  
                  $.ajax({
                  type: 'POST',
                  enctype: 'multipart/form-data',
                  url: '{{url('remove')}}',
                  data: {
                  'id': id,
                  'rowId': rowId,
                  "_token":csrfToken
                      },

                  success:function(result) {
                      console.log(result);
                  if(result.number == '1'){
                      console.log(result);


                  Swal.fire({
                    icon: 'success',
                    title: 'Article bien retiré du panier',
                    showConfirmButton: false,
                    timer: 1500
                  });

                  
                    $(".cart").html(result.data);
                    $(".listepanier").html(result.data2);
                    $(".total").html(result.data3);
                                                          
                                              
                                                          
                                                          
                  }
              }
          });
              
      };


      function update_add{{$article->id}}() {
          

          var id = {{$article->id}};
          var rowId = document.getElementById("row{{$article->id}}").value;

          var qty = document.getElementById("qty-add{{$article->id}}").value;  
          // console.log(rowId);
          // var nombre = 1;
          
                  var csrfToken = $('meta[name="csrf-token"]').attr('content');
                  
                  
                  $.ajax({
                  type: 'POST',
                  enctype: 'multipart/form-data',
                  url: '{{url('update')}}',
                  data: {
                  'id': id,
                  'rowId': rowId,
                  'qty': qty,
                  "_token":csrfToken
                      },

                  success:function(result) {
                      console.log(result);
                  if(result.number == '1'){
                      console.log(result);


                  Swal.fire({
                    icon: 'success',
                    title: 'Panier actualisé',
                    showConfirmButton: false,
                    timer: 1500
                  });

                  
                    $(".cart").html(result.data);
                    $(".listepanier").html(result.data2);
                    $(".total").html(result.data3);
                                                          
                                              
                                                          
                                                          
                  }
              }
          });
              
      };

      function update_subtract{{$article->id}}() {
          

          var id = {{$article->id}};
          var rowId = document.getElementById("row{{$article->id}}").value;

          var qty = document.getElementById("qty-subtract{{$article->id}}").value;  
          // console.log(rowId);
          // var nombre = 1;
          
                  var csrfToken = $('meta[name="csrf-token"]').attr('content');
                  
                  
                  $.ajax({
                  type: 'POST',
                  enctype: 'multipart/form-data',
                  url: '{{url('update')}}',
                  data: {
                  'id': id,
                  'rowId': rowId,
                  'qty': qty,
                  "_token":csrfToken
                      },

                  success:function(result) {
                      console.log(result);
                  if(result.number == '1'){
                      console.log(result);


                  Swal.fire({
                    icon: 'success',
                    title: 'Panier actualisé',
                    showConfirmButton: false,
                    timer: 1500
                  });

                  
                    $(".cart").html(result.data);
                    $(".listepanier").html(result.data2);
                    $(".total").html(result.data3);
                                                          
                                              
                                                          
                                                          
                  }
              }
          });
              
      };
  </script>
@endforeach