@extends('templates.template')

@push('page-title')
    <h2>Relatório PJBank</h2>
    <p>Todas as trasações do cartão do PJBank</p>
@endpush

@section('content')

    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row">
				<div class='col-sm-3'>
                    <div class="form-group">
                        <div class='input-group date datetimepicker-inicio data'>
                            <input type='text' class="form-control" name="data_inicio" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class='col-sm-3'>
                    <div class="form-group">
                        <div class='input-group date datetimepicker-final data'>
                            <input type='text' class="form-control" name="data_final" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <table class="table table-striped table-bordered table-condensed table-hover">
        <thead>
            <tr>
                <th>TID</th>
                <th>Nº Pedido</th>
                <th>Mensagem</th>
                <th>Aluno</th>
                <th>Valor Líquido</th>
            <tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="4">Total</td>
            <td class="valorTotalLiquido" style="text-align: right; font-weight: bold;"></td>
        </tr>
    </tfoot>
    </table>
    
    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-12">
            <a href="#" class="btn btn-success addTransacoes" data-pagina="1">Add Transações</a>
        </div>
    </div>

@endsection

@section('styles')
    <style>
        table > tbody tr > td:last-child { text-align: right; }
    </style>
@endsection

@section('scripts')
    {!! HTML::script('https://unpkg.com/currency.js/dist/currency.min.js') !!}
    <script>

        $('.addTransacoes').click(function(event){
            event.preventDefault()
            trasacoes($('.addTransacoes').data('pagina'))            
        })


        function trasacoes(pagina = null) {
            let popup = bootbox.dialog({
                message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Carregando as transações, favor aguardar...</p>',
                closeButton: false
            });

            axios.post("{{ route('financeiro.pjcartoesdados') }}", {
                pagina
            })
            .then(function (response) {
                popup.modal('hide')
                let table = $('table tbody'),
                        valorTotalLiquido = 0

                if(response.data.length > 0){
                    
                    buscarDados(response.data, table)

                    let next = $('.addTransacoes').data('pagina') + 1
                    $('.addTransacoes').data('pagina', next)

                } else {
                    bootbox.alert('Você não possui mais tansações')
                }  

            })
            .catch(function (error) {
                console.log(error);
            });
        }
        trasacoes(1)


        function buscarDados(dados, table) {
            
            let total = $('.valorTotalLiquido').text()
            valorTotalLiquido = parseFloat(total.trim().replace('R$', '').replace('.', '').replace('.', '').replace(',', '.'))
            valorTotalLiquido = ((valorTotalLiquido > 0) ? valorTotalLiquido : 0)

            $(dados).each(function(a,b){
                    axios.post("{{ route('financeiro.pjcartoes') }}", { id: b.pedido_numero})
                    .then(function(dados){
                        table.append(
                            $('<tr/>').append(
                                $('<td/>').text(b.tid)
                            ).append(
                                $('<td/>').text(b.pedido_numero)
                            ).append(
                                $('<td>', {
                                    text: `${b.msg_erro}`
                                })
                            ).append(
                                $('<td/>').html(`Aluno(a): <strong>${dados.data.nomecompleto}</strong><br/>Responsável: ${dados.data.descricao}`)
                            ).append(
                                $('<td/>').data('valor_liquido', b.valor_liquido).addClass('valor_liquido').text('R$ ' + (b.valor_liquido).toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}))
                            )
                        )
                        

                        valorTotalLiquido += (parseFloat(b.valor_liquido))


                        $('.valorTotalLiquido').text(valorTotalLiquido.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"})) 
                    })
                })
        }

        $(function () {
        })
    </script>
@endsection