@extends('layout')

@section('cssUrl')
    <link rel="stylesheet" href="{{ asset('assets/plugins/jquery-datatable/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/fullcalendar/fullcalendar.min.css') }}"/>
@endsection

@section('csss')
    <style>
        tbody {
            cursor: pointer;
        }

    </style>
@endsection

@php
$title = 'Dashboard'
@endphp

@section('title')
    {{ $title }}
@endsection

@section('conteudo')

<section class="content">
    <div class="container-fluid">
        <div class="row clearfix">
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card widget_2 big_icon traffic">
                    <div class="body">
                        <h6>Faturas</h6>
                        <h2>{{ $dataTotalRegistradaPago->total }} <small class="info"> de {{ $dataTotalRegistradaBruto->total }}</small></h2>
                        <small>Faturas total no sistema</small>
                        <div class="progress">
                            <div class="progress-bar l-amber" role="progressbar" aria-valuenow="{{ Funcoes::porcentagem2valores($dataTotalRegistradaPago->total, $dataTotalRegistradaBruto->total) }}" aria-valuemin="0"
                                aria-valuemax="100" style="width: {{ Funcoes::porcentagem2valores($dataTotalRegistradaPago->total, $dataTotalRegistradaBruto->total) }}%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card widget_2 big_icon sales">
                    <div class="body">
                        <h6>Pagos</h6>
                        <h2>R$ {{ Funcoes::mysqlToMoeda($dataTotalValorLiqui->total) }}  <small class="info">de R$ {{ Funcoes::mysqlToMoeda($dataTotalValorBruto->total) }}</small></h2>
                        <small>Total pago no sistema</small>
                        <div class="progress">
                            <div class="progress-bar l-blue" role="progressbar" aria-valuenow="{{ Funcoes::porcentagem2valores($dataTotalValorLiqui->total, $dataTotalValorBruto->total) }}" aria-valuemin="0"
                                aria-valuemax="100" style="width: {{ Funcoes::porcentagem2valores($dataTotalValorLiqui->total, $dataTotalValorBruto->total) }}%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card widget_2 big_icon email">
                    <div class="body">
                        <h6>Fatura do mês</h6>
                        <h2>{{ $dataTotalRegistroPagoMes->total }} <small class="info">de {{ $dataTotalRegistroBrutoMes->total }}</small></h2>
                        <small>Faturas deste mês</small>
                        <div class="progress">
                            <div class="progress-bar l-purple" role="progressbar" aria-valuenow="{{ Funcoes::porcentagem2valores($dataTotalRegistroBrutoMes->total, $dataTotalRegistroPagoMes->total) }}" aria-valuemin="0"
                                aria-valuemax="100" style="width: {{ Funcoes::porcentagem2valores($dataTotalRegistroBrutoMes->total, $dataTotalRegistroPagoMes->total) }}%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card widget_2 big_icon domains">
                    <div class="body">
                        <h6>Pago do mês</h6>
                        <h2>R$ {{ Funcoes::mysqlToMoeda($dataTotalValorPagoMes->total) }} <small class="info">de R$ {{ Funcoes::mysqlToMoeda($dataTotalValorBrutoMes->total) }}</small></h2>
                        <small>Valor pago deste mês</small>
                        <div class="progress">
                            <div class="progress-bar l-green" role="progressbar" aria-valuenow="{{ Funcoes::porcentagem2valores($dataTotalValorPagoMes->total, $dataTotalValorBrutoMes->total) }}" aria-valuemin="0"
                                aria-valuemax="100" style="width: {{ Funcoes::porcentagem2valores($dataTotalValorPagoMes->total, $dataTotalValorBrutoMes->total) }}%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row clearfix">
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card widget_2 big_icon traffic">
                    <div class="body">
                        <h6>Inadimplente</h6>
                        <h2>{{ $dataTotalInadimplente->total }} <small class="info"></small></h2>
                        <small>Inadimplente no sistema</small>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card widget_2 big_icon sales">
                    <div class="body">
                        <h6>Inadimplente do mês</h6>
                        <h2>{{ $dataTotalInadimplenteValor->total }}  <small class="info"></small></h2>
                        <small>Inadimplente no mês</small>         
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card widget_2 big_icon email">
                    <div class="body">
                        <h6>Clientes</h6>
                        <h2>{{ $dataTotalRegistroCliente->total }} <small class="info"></small></h2>
                        <small>Clientes ativo/cancelado no sistema</small>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card widget_2 big_icon domains">
                    <div class="body">
                        <h6>Próximo mês</h6>
                        <h2>R$ {{ Funcoes::mysqlToMoeda($dataTotalValorProximoMes->total) }} <small class="info"></small></h2>
                        <small>Total do próximo mês</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="body">
            <div class="block-header">
                <div class="row">
                    <div class="col-lg-7 col-md-6 col-sm-12">
                        <h2 class="uppercase">Lista de auditoria</h2>
                        <button class="btn btn-primary btn-icon mobile_menu" type="button"><i
                                class="zmdi zmdi-sort-amount-desc"></i></button>
                    </div>
                    <div class="col-sm-12">

                    </div>
                </div>
            </div>

            <div class="row">
                <div class="table-responsive">
                    <table class="table table-striped" id="listarDataTable1">
                        <thead>
                            <tr>
                                <th>Mês:</th>
                                <th>Mês:</th>
                                <th>Ano:</th>
                                <th>Registro(s):</th>
                                <th>Valor Total:</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>Mês:</th>
                                <th>Mês:</th>
                                <th>Ano:</th>
                                <th>Registro(s):</th>
                                <th>Valor Total:</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scriptUrl')
    <!-- Jquery DataTable Plugin Js -->
    <script src="{{ asset('assets/bundles/datatablescripts.bundle.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-datatable/buttons/dataTables.buttons.min.js') }}"></script>
@endsection

@section('scripts')   
<script>
    $(document).ready(function() {
        $('#listarDataTable1').DataTable({
            serverSide: true,
            processing: true,
            responsive: true,
            order: [0, 'desc'],
            ajax: {
                url: "{!! route('relatorioFinanceiro.dashboarddatatables') !!}",
                dataFilter: function(data) {
                    var json = jQuery.parseJSON(data);
                    console.log(data);
                    return JSON.stringify(json);
                }
            },
            columns: [
                {data: 'numero_do_mes', name: 'numero_do_mes'},
                {data: 'mes_por_extenso', name: 'mes_por_extenso'},
                {data: 'ano_numeral', name: 'ano_numeral'},
                {data: 'quantidade_registro', name: 'quantidade_registro'},
                {data: 'valor_total', name: 'valor_total'}
            ],
            language: {
                "info": "Mostrando _START_ a _END_ de _TOTAL_ registros",
                "infoEmpty": "Sem registros",
                "infoFiltered": 'filtrados de _MAX_ registros',
                "emptyTable": "Nenhum registro avaliado na tabela",
                "zeroRecords": "Nenhum registro encontrado para a busca",
                "lengthMenu": "Mostrando _MENU_ registros",
                "searchPlaceHolder": 'Filtro',
                "search": 'Digite sua busca:',
                "processing": "Aguarde por favor",
                paginate: {
                    first: '<<',
                    last: '>>',
                    previous: 'Anterior',
                    next: 'Próximo'
                }
            }
        });           

    });
</script>         
@endsection