{{--  --}}
<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="#clientes_tab_geral" data-toggle="tab">Geral</a></li>
            @foreach ($vendasTotais as $key => $vendaTotal )
                <li class="nav-item">
                    <a class="nav-link" href="#clientes_tab_{{ $loop->iteration + 1 }}" data-toggle="tab" onclick="consultarCliente('{{ $vendaTotal['id'] }}')">{{ $vendaTotal['canalAbr'] }}</a>
                </li>
            @endforeach
        </ul>
    </div>
    <div class="tab-content pb-4">
        <div class="tab-pane active" id="clientes_tab_geral">
            <table class="tabelashow table table-striped table-valign-middle">
                <thead>
                    <tr class=" bg-dark text-white">
                        
                        <th>Cliente</th>
                        <th>Litros</th>
                        <th>Euros</th>
                        <th>Rácio</th>
                        
                    </tr>
                </thead>
                <tbody style="background-color: #fffdfd">
                    @foreach ($eurosPorCliente as $venda)
                        <tr>
                            <td>{{ $venda->nome_cliente }}</td>
                            <td>{{ $venda->litrosPorCliente }}</td>
                            <td>{{ $venda->valor }}</td>
                            @if($venda->litrosPorCliente > 0)
                                <td>{{ number_format($venda->valor / $venda->litrosPorCliente, 3, ',', ' ') }}</td>
                            @else
                                <td>0</td>
                            @endif
                        </tr>
                        @endforeach
                </tbody>
            </table>
        </div>
        @foreach ($vendasTotais as $key => $vendaTotal )
            <div class="tab-pane" id="clientes_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(){
        $('.tabelashow').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)
                },
            ],
            "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('#tabelashow_wrapper .col-md-6:eq(0)');
    })

    function consultarCliente(id)
    {
        var $tab = $('#clientes_tab_' + id);
        var $tabelaClientes = $('#tabelaClientes_' + id);
        if(!$tabelaClientes.length){

            var thead = [
                "<th>Cliente</th>",
                "<th>Litros</th>",
                "<th>Valor</th>",
                "<th>Rácio</th>",
            ];

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });
            $.ajax({
                type: 'GET',
                url: '{{ route('get_dashboard_clientes') }}',
                //   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="tabelaClientes_${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 ++){
                        $(`#tabelaClientes_${id} thead tr:last`).append(thead[th]);
                    }

                    for(var i = 0; i < result.count; i++){
                        $(`#tabelaClientes_${id} tbody`).append('<tr></tr>');

                        $(`#tabelaClientes_${id} tbody tr:last`).append('<td>'+ result.eurosPorCliente[i].nome_cliente.toUpperCase() +'</td>')
                        $(`#tabelaClientes_${id} tbody tr:last`).append('<td>'+ result.eurosPorCliente[i].litrosPorCliente +'</td>')
                        $(`#tabelaClientes_${id} tbody tr:last`).append('<td>'+ result.eurosPorCliente[i].valor +'</td>')
                        $(`#tabelaClientes_${id} tbody tr:last`).append('<td>'+parsefloat(result.eurosPorCliente[i].valor / result.eurosPorCliente[i].litrosPorCliente).tofixed(3) +'</td>')
                    }

                    $('#preConsumoZero').addClass('d-none')
                    $('#overlayConsumoZero').addClass('d-none')
                    $('#tabelashow-consumozero').removeClass('d-none')
                },
                complete: function(xhr) {
                    var table = $(`#tabelaClientes_${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(' ', ',', 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('#tabelashow_wrapper .col-md-6:eq(0)');

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

                }
            });
        }

    }

</script>