{{--  --}}
<div class="col-lg-12 col-12">
    <div class="d-flex">
        <ul class="nav nav-pills ml-auto p-2">
            <li class="nav-item"><a class="nav-link active" href="#consumo_zero_tab_geral" data-toggle="tab">Geral</a></li>
            @foreach ($vendasTotais as $key => $vendaTotal )
                <li class="nav-item">
                    <a class="nav-link" href="#consumo_zero_tab_{{ $loop->iteration + 1 }}" data-toggle="tab" onclick="consultarConsumoZero('{{ $vendaTotal['id'] }}')">{{ $vendaTotal['canalAbr'] }}</a>
                </li>
            @endforeach
        </ul>
    </div>
    <div class="tab-content py-4">
        <div class="tab-pane active" id="consumo_zero_tab_geral">
            <table class="tabelashow4 table table-striped table-valign-middle">
                <thead>
                    <tr class=" bg-dark text-white">
                        <th>CONSUMO ZERO - Cliente</th>
                        <th>Litros - {{date('Y', strtotime($filtros['data_inicio']))-1}}</th>
                        <th>Litros - {{date('Y', strtotime($filtros['data_inicio']))-2}}</th>
                        <th>Litros - {{date('Y', strtotime($filtros['data_inicio']))-3}}</th>
                    </tr>
                </thead>
                <tbody style="background-color: #fffdfd">
                    @php
                        $litros1= 'litros_' . date('Y', strtotime($filtros['data_inicio']))-3;   
                        $litros2= 'litros_' . date('Y', strtotime($filtros['data_inicio']))-2;
                        $litros3= 'litros_' . date('Y', strtotime($filtros['data_inicio']))-1;  
        
                        $valor1= 'valor_' . date('Y', strtotime($filtros['data_inicio']))-3;   
                        $valor2= 'valor_' . date('Y', strtotime($filtros['data_inicio']))-2;
                        $valor3= 'valor_' . date('Y', strtotime($filtros['data_inicio']))-1;  
                    @endphp
                    @foreach ($clientesZero as $consumo_zero)
                        <tr>
                            <td>{{ Str::upper($consumo_zero->nome) }}</td>
                            <td>{{$consumo_zero->$litros3}}</td>
                            <td>{{$consumo_zero->$litros2}}</td>
                            <td>{{$consumo_zero->$litros1}}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @foreach ($vendasTotais as $key => $vendaTotal )
            <div class="tab-pane" id="consumo_zero_tab_{{ $vendaTotal['id'] }}">
                {{-- <table class="table table-striped table-valign-middle" id='tabelaCZ_{{ $vendaTotal['id'] }}'>
                    <thead>
                        <tr class=" bg-dark text-white">
                            <th>CONSUMO ZERO - Cliente</th>
                            <th>Litros - {{date('Y', strtotime($filtros['data_inicio']))-1}}</th>
                            <th>Litros - {{date('Y', strtotime($filtros['data_inicio']))-2}}</th>
                            <th>Litros - {{date('Y', strtotime($filtros['data_inicio']))-3}}</th>
                        </tr>
                    </thead>
                    <tbody style="background-color: #fffdfd">
                    </tbody>
                </table> --}}
            </div>
        @endforeach
    </div>
</div>
{{-- <div class="overlay"><i class="fas fa-3x fa-sync-alt fa-spin"></i><div class="text-bold pt-2">Loading...</div></div> --}}
<script>

    var $litros1 = 'litros_' + '{{ date("Y", strtotime($filtros["data_inicio"])) - 3 }}';
    var $litros2 = 'litros_' + '{{ date("Y", strtotime($filtros["data_inicio"])) - 2 }}';
    var $litros3 = 'litros_' + '{{ date("Y", strtotime($filtros["data_inicio"])) - 1 }}';

    var $valor1 = 'valor_' + '{{ date("Y", strtotime($filtros["data_inicio"])) - 3 }}';
    var $valor2 = 'valor_' + '{{ date("Y", strtotime($filtros["data_inicio"])) - 2 }}';
    var $valor3 = 'valor_' + '{{ date("Y", strtotime($filtros["data_inicio"])) - 1 }}';

    $(document).ready(function(){

        
        $('.tabelashow4').DataTable( {
            
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
            "order": [[0, "asc"]],
            "buttons": [ "csv", "excel", "pdf", {"extend":"print","text":"Imprimir"}, {"extend":"colvis","text":"Colunas"}],
            "lengthMenu": [[8, 10, 20, 25, 50, -1], [8, 10, 20, 25, 50, "All"]],
            "columnDefs":
            [
                {
                    targets: 1,
                    render: $.fn.dataTable.render.number('.', ',', 0)
                },
                //   {
                //       targets: 2,
                //       render: $.fn.dataTable.render.number('.', ',', 2)
                //   },
    
                {
                    targets: 2,
                    render: $.fn.dataTable.render.number('.', ',', 0)
                },
                //   {
                //       targets: 4,
                //       render: $.fn.dataTable.render.number('.', ',', 2)
                //   },
    
                {
                    targets: 3,
                    render: $.fn.dataTable.render.number('.', ',', 0)
                },
                //   {
                //       targets: 6,
                //       render: $.fn.dataTable.render.number('.', ',', 2)
                //   },
            ],
            "pageLength": 5,
                    "bJQueryUI": true,
                    "oLanguage": {
                        "sProcessing":   "Processando...",
                        "sLengthMenu":   "Registros _MENU_ ",
                        "sZeroRecords":  "Não foram encontrados resultados",
                        "sInfo":         "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                        "sInfoEmpty":    "Mostrando de 0 até 0 de 0 registros",
                        "sInfoFiltered": "",
                        "sInfoPostFix":  "",
                        "sSearch":       "Buscar:",
                        "sUrl":          "",
                        "oPaginate": {
                            "sFirst":    "Primeiro",
                            "sPrevious": "Anterior",
                            "sNext":     "Seguinte",
                            "sLast":     "Último"
                        }
                    }
    
        } ).buttons().container().appendTo('#tabelashow4_wrapper .col-md-6:eq(0)');
    })

    function consultarConsumoZero(id)
    {
        var $tab = $('#consumo_zero_tab_' + id);
        var $tabelaCZ = $('#tabelaCZ_' + id);
        if(!$tabelaCZ.length){

            var thead = [
                "<th>CONSUMO ZERO - Cliente</th>",
                "<th>Litros - {{date('Y', strtotime($filtros['data_inicio']))-1}}</th>",
                "<th>Litros - {{date('Y', strtotime($filtros['data_inicio']))-2}}</th>",
                "<th>Litros - {{date('Y', strtotime($filtros['data_inicio']))-3}}</th>"
            ];

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });
            $.ajax({
                type: 'GET',
                url: '{{ route('dashboardConsumoZero') }}',
                //   cache:false,
                //   contentType: false,
                //   processData: false,
                //   dataType: 'json',
                data: {
                    data_inicio: "{{ $filtros['data_inicio'] }}",
                    data_fim: "{{ $filtros['data_fim'] }}",
                    gestor: "{{ $filtros['gestor'] }}",
                    nome_cliente: "{{ $filtros['nome_cliente'] }}",
                    canal_id: id,
                },
                beforeSend: function() {
                    $tab.append(`<div id="overlay${id}" class="overlay"><i class="fas fa-3x fa-sync-alt fa-spin"></i><div class="text-bold pt-2">Carregando...</div></div>`)
                },
                success: function(result) {
                    $tab.append(`
                        <table id="tabelaCZ_${id}" class="table table-striped table-valign-middle">
                            <thead class="bg-dark text-white">
                                <tr>
                                </tr>
                            </thead>
                            <tbody class="background-color: #fffdfd">
                            </tbody>
                        </table>`);


                    for(var th = 0; th < thead.length; th ++){
                        $(`#tabelaCZ_${id} thead tr:last`).append(thead[th]);
                    }

                    for(var i = 0; i < result.count; i++){
                        var lt1 = result.clientes_zero[i][$litros1] ? result.clientes_zero[i][$litros1] : '';
                        var lt2 = result.clientes_zero[i][$litros2] ? result.clientes_zero[i][$litros2] : '';
                        var lt3 = result.clientes_zero[i][$litros3] ? result.clientes_zero[i][$litros3] : '';

                        $(`#tabelaCZ_${id} tbody`).append('<tr></tr>');

                        $(`#tabelaCZ_${id} tbody tr:last`).append('<td>'+ result.clientes_zero[i].nome.toUpperCase() +'</td>')
                        $(`#tabelaCZ_${id} tbody tr:last`).append('<td>'+ lt3 +'</td>')
                        $(`#tabelaCZ_${id} tbody tr:last`).append('<td>'+ lt2 +'</td>')
                        $(`#tabelaCZ_${id} tbody tr:last`).append('<td>'+ lt1 +'</td>')
                    }

                    $('#preConsumoZero').addClass('d-none')
                    $('#overlayConsumoZero').addClass('d-none')
                    $('#tabelashow-consumozero').removeClass('d-none')
                },
                complete: function(xhr) {
                    var table = $(`#tabelaCZ_${id}`).DataTable( {
                        "paging": true,
                        "lengthChange": false,
                        "searching": true,
                        "ordering": true,
                        "info": true,
                        "autoWidth": false,
                        "responsive": true,
                        "order": [[0, "asc"]],
                        "buttons": [ "csv", "excel", "pdf", {"extend":"print","text":"Imprimir"}, {"extend":"colvis","text":"Colunas"}],
                        "lengthMenu": [[8, 10, 20, 25, 50, -1], [8, 10, 20, 25, 50, "All"]],
                        "columnDefs":
                        [
                            {
                                targets: 1,
                                render: $.fn.dataTable.render.number('.', ',', 0)
                            },

                            {
                                targets: 2,
                                render: $.fn.dataTable.render.number('.', ',', 0)
                            },

                            {
                                targets: 3,
                                render: $.fn.dataTable.render.number('.', ',', 0)
                            },
                           
                        ],
                        "pageLength": 5,
                                "bJQueryUI": true,
                                "oLanguage": {
                                    "sProcessing":   "Processando...",
                                    "sLengthMenu":   "Registros _MENU_ ",
                                    "sZeroRecords":  "Não foram encontrados resultados",
                                    "sInfo":         "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                                    "sInfoEmpty":    "Mostrando de 0 até 0 de 0 registros",
                                    "sInfoFiltered": "",
                                    "sInfoPostFix":  "",
                                    "sSearch":       "Buscar:",
                                    "sUrl":          "",
                                    "oPaginate": {
                                        "sFirst":    "Primeiro",
                                        "sPrevious": "Anterior",
                                        "sNext":     "Seguinte",
                                        "sLast":     "Último"
                                    }
                                }

                    }).buttons().container().appendTo(`#tabelaCZ_${id} .col-md-6:eq(0)`);

                    $(`#overlay${id}`).remove();

                }
            });
        }

    }

</script>

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

        var $litros1 = 'litros_' + '{{ date("Y", strtotime($filtros["data_inicio"])) - 3 }}';
        var $litros2 = 'litros_' + '{{ date("Y", strtotime($filtros["data_inicio"])) - 2 }}';
        var $litros3 = 'litros_' + '{{ date("Y", strtotime($filtros["data_inicio"])) - 1 }}';

        var $valor1 = 'valor_' + '{{ date("Y", strtotime($filtros["data_inicio"])) - 3 }}';
        var $valor2 = 'valor_' + '{{ date("Y", strtotime($filtros["data_inicio"])) - 2 }}';
        var $valor3 = 'valor_' + '{{ date("Y", strtotime($filtros["data_inicio"])) - 1 }}';

        
      $('#carregarConsumoZero').click(function(e){

          e.preventDefault();


          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': '{{ csrf_token() }}'
              }
          });


          $.ajax({
              type: 'GET',
              url: '{{ route('get_consumo_zero') }}',
            //   cache:false,
            //   contentType: false,
            //   processData: false,
            //   dataType: 'json',
              data: {
                data_inicio: "{{ $filtros['data_inicio'] }}",
                data_fim: "{{ $filtros['data_fim'] }}",
                gestor: "{{ $filtros['gestor'] }}",
                nome_cliente: "{{ $filtros['nome_cliente'] }}",
              },
              beforeSend: function() {
                $('#carregarConsumoZero').html('Carregando').prop('disabled', true);
                $('#preConsumoZero').addClass('d-none')
                $('#overlayConsumoZero').removeClass('d-none')
              },
              success: function(result) {


                console.log(result);


                $('#tabelashow-consumozero tbody tr:last').remove();

                for(var i = 0; i < result.count; i++){
                    var lt1 = result.clientes_zero[i][$litros1] ? result.clientes_zero[i][$litros1] : '';
                    var lt2 = result.clientes_zero[i][$litros2] ? result.clientes_zero[i][$litros2] : '';
                    var lt3 = result.clientes_zero[i][$litros3] ? result.clientes_zero[i][$litros3] : '';
                    
                    $('#tabelashow-consumozero tbody').append('<tr></tr>');
                    $('#tabelashow-consumozero tbody tr:last').append('<td>'+ result.clientes_zero[i].nome.toUpperCase() +'</td>')
                    $('#tabelashow-consumozero tbody tr:last').append('<td>'+ lt3 +'</td>')
                    $('#tabelashow-consumozero tbody tr:last').append('<td>'+ lt2 +'</td>')
                    $('#tabelashow-consumozero tbody tr:last').append('<td>'+ lt1 +'</td>')
                }


                $('#preConsumoZero').addClass('d-none')
                $('#overlayConsumoZero').addClass('d-none')
                $('#tabelashow-consumozero').removeClass('d-none')
              },
              complete: function(xhr) {
                var table = $('#tabelashow-consumozero').DataTable( {
                    "paging": true,
                    "lengthChange": false,
                    "searching": true,
                    "ordering": true,
                    "info": true,
                    "autoWidth": false,
                    "responsive": true,
                    "order": [[0, "asc"]],
                    "buttons": [ "csv", "excel", "pdf", {"extend":"print","text":"Imprimir"}, {"extend":"colvis","text":"Colunas"}],
                    "lengthMenu": [[8, 10, 20, 25, 50, -1], [8, 10, 20, 25, 50, "All"]],
                    "columnDefs":
                    [
                        {
                            targets: 1,
                            render: $.fn.dataTable.render.number('.', ',', 0)
                        },
                        //   {
                        //       targets: 2,
                        //       render: $.fn.dataTable.render.number('.', ',', 2)
                        //   },

                        {
                            targets: 2,
                            render: $.fn.dataTable.render.number('.', ',', 0)
                        },
                        //   {
                        //       targets: 4,
                        //       render: $.fn.dataTable.render.number('.', ',', 2)
                        //   },

                        {
                            targets: 3,
                            render: $.fn.dataTable.render.number('.', ',', 0)
                        },
                        //   {
                        //       targets: 6,
                        //       render: $.fn.dataTable.render.number('.', ',', 2)
                        //   },
                    ],
                    "pageLength": 5,
                            "bJQueryUI": true,
                            "oLanguage": {
                                "sProcessing":   "Processando...",
                                "sLengthMenu":   "Registros _MENU_ ",
                                "sZeroRecords":  "Não foram encontrados resultados",
                                "sInfo":         "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                                "sInfoEmpty":    "Mostrando de 0 até 0 de 0 registros",
                                "sInfoFiltered": "",
                                "sInfoPostFix":  "",
                                "sSearch":       "Buscar:",
                                "sUrl":          "",
                                "oPaginate": {
                                    "sFirst":    "Primeiro",
                                    "sPrevious": "Anterior",
                                    "sNext":     "Seguinte",
                                    "sLast":     "Último"
                                }
                            }

                } ).buttons().container().appendTo('#tabelashow4_wrapper .col-md-6:eq(0)');
              }
          });

      });
  })
</script> --}}