{{--  --}}

<div id="rowbtn" class="mx-3 mt-4">
    <div id="carregar-tpc">
        <button class="btn btn-primary" onclick="consultarTPC()">
            Carregar Tabela Totais
        </button>
    </div>
</div>

<div id="rowresult" class="mx-3 mt-4  d-none">
    <div class="border">
        <div id="overlay-tpc" class="overlay d-none">
            <i class="fas fa-3x fa-sync-alt fa-spin"></i>
            <div class="text-bold pt-2">Carregando...</div>
        </div>
        <table id="tabela-tpc" class="d-none table table-sm table-bordered table-hover mb-0">
            <thead>
                <tr class="text-center table-primary">
                    <th>Canal</th>
                    <th>Total Faturado</th>
                    <th>Total Vencido</th>
                    <th class="">% Incumprimento</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>


    </div>
    
</div>
<hr class="mx-3">

<script>
    function numberFormat(number, decimals, decimalSeparator, thousandsSeparator) {
        decimals = decimals || 0;
        decimalSeparator = decimalSeparator || ',';
        thousandsSeparator = thousandsSeparator || '.';

        let parts = Number(number).toFixed(decimals).split('.');
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);

        return parts.join(decimalSeparator);
    }

    function consultarTPC()
    {
        var origem = @json($filtros['origem']);
        var $rowbtn = $('#rowbtn');
        var $rowresult = $('#rowresult');

        var $overlay = $('#overlay-tpc');
        var $tabela = $('#tabela-tpc');

        if($tabela.length < 2){

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });
            $.ajax({
                type: 'GET',
                url: '{{ route('get_totais_por_canal') }}',
                //   cache:false,
                //   contentType: false,
                //   processData: false,
                //   dataType: 'json',
                data: {
                    filtros: @json($filtros),
                },
                beforeSend: function() {
                    $rowbtn.addClass('d-none');
                    $rowresult.removeClass('d-none');
                    $overlay.removeClass('d-none');
                },
                success: function(result) {

                    for(var i = 0; i < result.count; i++){
                        var exist = true;
                        if(origem){
                            exist = origem.find(filtros =>  parseInt(filtros) == parseInt(result.canais[i].id));
                        }
                        
                        if(exist){
                            var totalfaturado = result.canais[i].totalfaturado;
                            var totalvencido = result.canais[i].totalvencido;

                            console.log(totalfaturado);

                            var incumprimento = 0;

                            if(totalfaturado != 0 && totalvencido != 0){
                                incumprimento =  parseFloat((totalvencido / totalfaturado) * 100);
                            }

                            $(`#tabela-tpc tbody`).append('<tr class="text-center"></tr>');

                            $(`#tabela-tpc tbody tr:last`).append('<td>'+ result.canais[i].nome_canal +'</td>')
                            $(`#tabela-tpc tbody tr:last`).append('<td>'+ numberFormat(totalfaturado, 2, ',', '.') +'</td>')
                            $(`#tabela-tpc tbody tr:last`).append('<td>'+ numberFormat(totalvencido, 2, ',', '.') +'</td>')
                            $(`#tabela-tpc tbody tr:last`).append('<td>'+ numberFormat(incumprimento, 2, ',', '.') +'%</td>')
                        }
                    }

                    $(`#tabela-tpc tbody`).append('<tr class="text-center table-secondary"></tr>');

                    var totalfaturado = result.totais['totalfaturado'];
                    var totalvencido = result.totais['totalvencido'];

                    var incumprimento = 0;

                    if(totalfaturado != 0 && totalvencido != 0){
                        incumprimento =  parseFloat((totalvencido / totalfaturado) * 100);
                    }

                    $(`#tabela-tpc tbody tr:last`).append('<td>Total</td>')
                    $(`#tabela-tpc tbody tr:last`).append('<td>'+ numberFormat(totalfaturado, 2, ',', '.') +'</td>')
                    $(`#tabela-tpc tbody tr:last`).append('<td>'+ numberFormat(totalvencido, 2, ',', '.') +'</td>')
                    $(`#tabela-tpc tbody tr:last`).append('<td>'+ numberFormat(incumprimento, 2, ',', '.') +'%</td>')

                },
                complete: function(xhr) {

                    $overlay.addClass('d-none');
                    $tabela.removeClass('d-none');

                }
            });
        }

    }

</script>