@extends('layouts.back')
@section('titulo', 'Transações de Caixa')

@section('page_header','Painel')

@push('header_imports')
    <link href="{{asset('adm/assets/css/financeiro.css')}}" rel="stylesheet" type="text/css" />

    <!--Morris Chart CSS -->
    <link href="{{asset('plugins/morris/morris.css')}}" rel="stylesheet">

    <!--Chartist Chart CSS -->
    <link href="{{asset('plugins/chartist/css/chartist.min.css')}}" rel="stylesheet">

    <!--Chartist Chart-->
    <script src="{{asset('plugins/chartist/js/chartist.min.js')}}"></script>
@endpush

@section('content')

    <div class="spinner custom"></div>

    <div class="row">
        <div class="col-md-12">

            @can('visualizar graficos transacoes de caixa')
                <div class="row justify-content-between" style="">
                    <div class="col-md-4">
                        <div class="card m-b-20" id="grafico-receber">
                            <div class="card-header">
                                <h5 class="card-title text-center">Contas a Receber</h5>
                            </div>
                            <div class="card-body">
                                <div class="row mb-2">
                                    <h6 class="text-muted m-auto grafico-periodo"></h6>
                                </div>
                                <div>
                                    @component('components.financeiro.mensagem-sem-dados', ['mensagem' => 'Não há dados para serem exibidos'])
                                    @endcomponent

                                    @component('components.financeiro.grafico-receber')
                                    @endcomponent
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card m-b-20" id="grafico-barras">
                            <div class="card-header">
                                <h5 class="card-title text-center">Entradas x Saídas</h5>
                            </div>
                            <div class="card-body">
                                <div class="row mb-2">
                                    <h6 class="text-muted m-auto grafico-barras-periodo"></h6>
                                </div>
                                @component('components.financeiro.mensagem-sem-dados', ['mensagem' => 'Não há dados para serem exibidos'])
                                @endcomponent

                                @component('components.financeiro.grafico-barras')
                                @endcomponent
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card m-b-20" id="grafico-pagar">
                            <div class="card-header">
                                <h5 class="card-title text-center">Contas a Pagar</h5>
                            </div>
                            <div class="card-body">
                                <div class="row mb-2">
                                    <h6 class="text-muted m-auto grafico-periodo"></h6>
                                </div>
                                <div>
                                    @component('components.financeiro.mensagem-sem-dados', ['mensagem' => 'Não há dados para serem exibidos'])
                                    @endcomponent

                                    @component('components.financeiro.grafico-pagar')
                                    @endcomponent
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endcan

            <div class="row mt-auto">
                <div class="col-md-12 card">

                    <section class="card-body">
                        <div class="row">
                            <div class="ml-2">
                                <div class="btn-group pull-right pt-2 mr-3">
                                    <i class="fa fa-caret-left modificador-filtro-periodo" id="caret-previous-month"></i>
                                    <span class="font-weight-bolder" id="filtro-mes-ano"></span>
                                    <i class="fa fa-caret-right modificador-filtro-periodo" id="caret-next-month"></i>
                                </div>
                            </div>
                            <div class="tab" id="tabs-contas">
                                <ul class="nav nav-tabs nav-tabs-custom" role="tablist">
                                    <li class="nav-item tab-border">
                                        <a href="#receber" data-tipo="receber" data-path="contas-receber" class="nav-link tabs-contas {{$tipo_conta == 'receber' ? 'active' : ''}}" data-toggle="tab" role="tab">A Receber</a>
                                    </li>
                                    <li class="nav-item tab-border">
                                        <a href="#recebidas" data-tipo="recebidas" data-path="contas-recebidas" class="nav-link tabs-contas {{$tipo_conta == 'recebidas' ? 'active' : ''}}" data-toggle="tab" role="tab">Recebidas</a>
                                    </li>
                                    <li class="nav-item tab-border">
                                        <a href="#pagar" data-tipo="pagar" data-path="contas-pagar" class="nav-link tabs-contas {{$tipo_conta == 'pagar' ? 'active' : ''}}" data-toggle="tab" role="tab">A Pagar</a>
                                    </li>
                                    <li class="nav-item tab-border">
                                        <a href="#pagas" data-tipo="pagas" data-path="contas-pagas" class="nav-link tabs-contas {{$tipo_conta == 'pagas' ? 'active' : ''}}" data-toggle="tab" role="tab">Pagas</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="tab-content">

                            @component('components.financeiro.tabela-receber', compact('tipo_conta'))
                            @endcomponent

                            @component('components.financeiro.tabela-recebidas', compact('tipo_conta'))
                            @endcomponent

                            @component('components.financeiro.tabela-pagar', compact('tipo_conta'))
                            @endcomponent

                            @component('components.financeiro.tabela-pagas', compact('tipo_conta'))
                            @endcomponent

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

    @component('components.financeiro.receber-contas')
    @endcomponent

    @component('components.financeiro.pagar-contas')
    @endcomponent

    <!-- Visualizar Contas Recebidas/Pagas -->
    @component('components.financeiro.modal-visualizacao-contas')
    @endcomponent

    @component('components.financeiro.template-conta-paga')
    @endcomponent

    @component('components.financeiro.template-conta-recebida')
    @endcomponent

@endsection

@push('footer_imports_end')
    <script src="{{asset('plugins/morris/morris.min.js')}}"></script>
    <script src="{{asset('plugins/raphael/raphael-min.js')}}"></script>
    <script src="{{asset('adm/assets/pages/morris.init.js')}}"></script>

    <!-- Datatable init js -->
    <script src="{{asset('adm/assets/pages/datatables.init.js')}}"></script>
    <script src="{{asset('plugins/datatables/datatables.tabletools.js')}}"></script>
    <script src="{{asset('plugins/datatables/dataTables.checkboxes.min.js')}}"></script>

    <script src="{{asset('adm/assets/js/financeiro.js')}}"></script>
@endpush

@push('js')
    <script>
        $(function() {
            nivelarAltura(['grafico-receber','grafico-barras','grafico-pagar']);
        });
    </script>
@endpush