{{--  --}}
<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>Valor - {{date('Y', strtotime($filtros['data_inicio']))-1}}</th>
                        <th>Rácio - {{date('Y', strtotime($filtros['data_inicio']))-1}}</th>

                        <th>Litros - {{date('Y', strtotime($filtros['data_inicio']))-2}}</th>
                        <th>Valor - {{date('Y', strtotime($filtros['data_inicio']))-2}}</th>
                        <th>Rácio - {{date('Y', strtotime($filtros['data_inicio']))-2}}</th>

                        <th>Litros - {{date('Y', strtotime($filtros['data_inicio']))-3}}</th>
                        <th>Valor - {{date('Y', strtotime($filtros['data_inicio']))-3}}</th>
                        <th>Rácio - {{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)
                        @php 
                            $racio1 = $consumo_zero->$litros1 >0 ? $consumo_zero->$valor1/$consumo_zero->$litros1 : 0;
                            $racio2 = $consumo_zero->$litros2 >0 ? $consumo_zero->$valor2/$consumo_zero->$litros2 : 0;
                            $racio3 = $consumo_zero->$litros3 >0 ? $consumo_zero->$valor3/$consumo_zero->$litros3 : 0;
                        @endphp
                        <tr>
                            <td>{{ Str::upper($consumo_zero->nome) }}</td>
                            <td>{{$consumo_zero->$litros3}}</td>
                            <td>{{$consumo_zero->$valor3}}</td>
                            <td>{{$racio3}}</td>

                            <td>{{$consumo_zero->$litros2}}</td>
                            <td>{{$consumo_zero->$valor2}}</td>
                            <td>{{$racio2}}</td>

                            <td>{{$consumo_zero->$litros1}}</td>
                            <td>{{$consumo_zero->$valor1}}</td>
                            <td>{{$racio1}}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @foreach ($vendasTotais as $key => $vendaTotal )
            <div class="tab-pane" id="consumo_zero_tab_{{ $vendaTotal['id'] }}">
       
            </div>
        @endforeach
    </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(' ', ',', 0)
                },
                {
                    targets: 3,
                    render: $.fn.dataTable.render.number(' ', ',', 3)
                },

                {
                    targets:4,
                    render: $.fn.dataTable.render.number(' ', ',', 0)
                },
                {
                    targets: 5,
                    render: $.fn.dataTable.render.number(' ', ',', 0)
                },
                {
                    targets: 6,
                    render: $.fn.dataTable.render.number(' ', ',', 3)
                },

                {
                    targets: 7,
                    render: $.fn.dataTable.render.number(' ', ',', 0)
                },
                {
                    targets: 8,
                    render: $.fn.dataTable.render.number(' ', ',', 0)
                },
                {
                    targets: 9,
                    render: $.fn.dataTable.render.number(' ', ',', 3)
                },
              
            ],
            "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>Valor - {{date('Y', strtotime($filtros['data_inicio']))-1}}</th>",
                "<th>Rácio - {{date('Y', strtotime($filtros['data_inicio']))-1}}</th>",

                "<th>Litros - {{date('Y', strtotime($filtros['data_inicio']))-2}}</th>",
                "<th>Valor - {{date('Y', strtotime($filtros['data_inicio']))-2}}</th>",
                "<th>Rácio - {{date('Y', strtotime($filtros['data_inicio']))-2}}</th>",

                "<th>Litros - {{date('Y', strtotime($filtros['data_inicio']))-3}}</th>",
                "<th>Valor - {{date('Y', strtotime($filtros['data_inicio']))-3}}</th>",
                "<th>Rácio - {{date('Y', strtotime($filtros['data_inicio']))-3}}</th>",

            ];

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });
            $.ajax({
                type: 'GET',
                url: '{{ route('rentabilidadeConsumoZero') }}',
         
                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] : '';

                        var vl1 = result.clientes_zero[i][$valor1] ? result.clientes_zero[i][$valor1] : '';
                        var vl2 = result.clientes_zero[i][$valor2] ? result.clientes_zero[i][$valor2] : '';
                        var vl3 = result.clientes_zero[i][$valor3] ? result.clientes_zero[i][$valor3] : '';

                        var rc1 = lt1 > 0 ? vl1 / lt1 : 0;
                        var rc2 = lt2 > 0 ? vl2 / lt2 : 0;
                        var rc3 = lt3 > 0 ? vl3 / lt3 : 0;

                        $(`#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>'+ vl3 +'</td>')
                        $(`#tabelaCZ_${id} tbody tr:last`).append('<td>'+ rc3 +'</td>')

                        $(`#tabelaCZ_${id} tbody tr:last`).append('<td>'+ lt2 +'</td>')
                        $(`#tabelaCZ_${id} tbody tr:last`).append('<td>'+ vl2 +'</td>')
                        $(`#tabelaCZ_${id} tbody tr:last`).append('<td>'+ rc2 +'</td>')

                        $(`#tabelaCZ_${id} tbody tr:last`).append('<td>'+ lt1 +'</td>')
                        $(`#tabelaCZ_${id} tbody tr:last`).append('<td>'+ vl1 +'</td>')
                        $(`#tabelaCZ_${id} tbody tr:last`).append('<td>'+ rc1 +'</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(' ', ',', 3)
                            },

                            {
                                targets:4,
                                render: $.fn.dataTable.render.number(' ', ',', 0)
                            },
                            {
                                targets: 5,
                                render: $.fn.dataTable.render.number(' ', ',', 0)
                            },
                            {
                                targets: 6,
                                render: $.fn.dataTable.render.number(' ', ',', 3)
                            },

                            {
                                targets: 7,
                                render: $.fn.dataTable.render.number(' ', ',', 0)
                            },
                            {
                                targets: 8,
                                render: $.fn.dataTable.render.number(' ', ',', 0)
                            },
                            {
                                targets: 9,
                                render: $.fn.dataTable.render.number(' ', ',', 3)
                            },
                           
                        ],
                        "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>