@extends('adminlte::page')

@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/adminlte.css')}}">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    <style>
        thead, tbody{
            display: block;  
        }
        th {
            position: sticky;
        }
        tbody{
            overflow-y: scroll;
            height: 400px;
        }
    </style>
@stop

@section('body')
    <div class="container" id="app">
        <div class="col-md-12">
            <div class="card" style="background-color: #343a40; color: #fff;">
                <div class="row" style="padding-top: 5px;border-left-width: 7px;padding-left: 7px;padding-right: 7px;height: 33px;">
                    <div class="col-md-9 form-group" style="max-height:40px">
                        <div class="page-header-actions text-right">
                            <h4 class="text-center">
                                <a href="#" @click="setMesReferencia(0)" title="Mês anterior">
                                    <i class="fas fa-chevron-circle-left white"></i>
                                </a>
                                @{{mesAno}} 
                                <a href="#" @click="setMesReferencia(1)" title="Próximo mês">
                                    <i class="fas fa-chevron-circle-right white"></i>
                                </a>
                            </h4>
                        </div>
                    </div>
                    <div class="col-md-3 form-group">
                        <div class="page-header-actions text-right" style="padding-right: 40px; padding-top: 5px;">
                            <a href="#" @click="relVencidos()" title="Impressão de relatório de boletos vencidos">
                                <i class="fas fa-print fa-lg white"></i>
                            </a>
                            <a href="#" @click="boletoMensal()" title="Gerar boleto de todos os clientes">
                                <i class="fas fa-copy fa-lg white"></i>
                            </a>
                            <a href="#" @click="newModal()" title="Gerar novo boleto para um cliente">
                                <i class="fas fa-file fa-lg white"></i>
                            </a>
                            <a href="#" id="btPrint" :disabled="printDisable" v-show="itensSelected.length>0 && !printDisable" @click="imprimirBoletos()" title="Imprimir boletos selecionados">
                                <i class="fas fa-print fa-lg white"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="loading"><img src="{{url('/')}}/img/spinner.gif" alt=""></div>
            <div class="panel-body">
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover">
                        <thead>
                        <tr style="background-color: #a8bcce;">
                                <th width="30">
                                    <div class="checkbox-custom checkbox-primary">
                                        <input type="checkbox" title="Marca todos os boletos para impressão" :checked="selectedAll" @change="toggleCheckboxAll()"/>
                                    </div>
                                </th>
                                <th width="271">Cliente</th>
                                <th width="80" class="text-center">Vencimento</th>
                                <th width="80" class="text-right">Valor</th>
                                <th width="80" class="text-right">Desconto</th>
                                <th width="80" class="text-right">Multa</th>
                                <th width="80" class="text-right">Juros</th>
                                <th width="80" class="text-right">Tarifa</th>
                                <th width="80" class="text-right">Vr Rec</th>
                                <th width="90" class="text-right">Data Pgto</th>
                                <th width="120">Situação</th>
                                <th width="80" class="text-center">Modify</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr v-for="boleto in boletos" v-show="boletos.length>0" :key="boleto.id">
                                <td width="30">
                                    <div v-if="boleto.pago == false" class="checkbox-custom checkbox-primary">
                                        <input v-if="boleto.pago == false" type="checkbox" title="Marca este Boleto para impressão" @change="toggleCheckbox(boleto.id)" :checked="isSelectedRow(boleto.id)"/>
                                    </div>
                                </td>
                                <td width="271" class="text-left">@{{boleto.nome}}</td>
                                <td width="80" class="text-center">@{{boleto.vencimento | myDate}}</td>
                                <td width="80" class="text-right"> @{{boleto.valor | currency}}</td>
                                <td width="80" class="text-right"> @{{boleto.descontos | currency}}</td>
                                <td width="80" class="text-right"> @{{boleto.multa | currency}}</td>
                                <td width="80" class="text-right"> @{{boleto.juros | currency}}</td>
                                <td width="80" class="text-right"> @{{boleto.tarifa | currency}}</td>
                                <td width="80" class="text-right"> @{{boleto.vrrecebido | currency}}</td>
                                <td width="90" class="text-center">@{{boleto.pagamento | myDate}}</td>
                                <td width="120" :class="{'green': boleto.pago, 'red': boleto.vencido, 'orange': boleto.codStatus=='00', 'purple': boleto.codStatus=='01'}">@{{boleto.status}}</td>
                                <td width="80" class="text-center">
                                    <a href="#" @click="openFile(boleto.files.boleto)" title="Visualizar Boleto" v-show="boleto.files.boleto != false">
                                        <i class="fas fa-file-pdf orange"></i> 
                                    </a>

                                    <a href="#" @click="editModal(boleto)" v-show="boleto.pagamento == null">
                                        <i class="fa fa-edit blue"></i>
                                    </a>
                                    <a href="#" @click="deleteBoleto(boleto.id)" v-show="$gate.isDelBoleto() && boleto.pagamento== null && boleto.remessa == 'false'">
                                        <i class="fa fa-trash red"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr v-show="boletos.length==0">
                                <td colspan="12" class="text-center"><strong style="color: red">Não há boletos neste período</strong></td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr style="background-color: #a8bcce;">
                                <th style="vertical-align: middle;" colspan="12"></th>
                            </tr>   
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- MODAL BOLETO MENSAL -->
        <div class="modal fade" id="newMensal" tabindex="-1" role="dialog" aria-labelledby="newMensalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="newMensalLabel">Gerar boleto mensal</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form @submit.prevent="createBoletoMensal()">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12 form-group">
                                        <label class="typo__label">Banco</label>
                                        <multiselect v-model="form.banco"
                                            :options="optionsBancos"
                                            @input="onChangeBancos" 
                                            placeholder="Selecione..." 
                                            label="nome" track-by="id">
                                        </multiselect>
                                        <has-error :form="form" field="bancos_id"></has-error>
                                    </div>
                                </div>
                            <div class="row">
                                <div class="col-md-7 form-group">
                                    <label for="mesVcto" class="control-label">Mês</label>
                                    <select name="mesVcto" v-model="form.mesVcto" id="mesVcto" class="form-control" :class="{ 'is-invalid': form.errors.has('mesVcto') }">
                                        <option value="1">Janeiro</option>
                                        <option value="2">Fevereiro</option>
                                        <option value="3">Março</option>
                                        <option value="4">Abril</option>
                                        <option value="5">Maio</option>
                                        <option value="6">Junho</option>
                                        <option value="7">Julho</option>
                                        <option value="8">Agosto</option>
                                        <option value="9">Setembro</option>
                                        <option value="10">Outubro</option>
                                        <option value="11">Novembro</option>
                                        <option value="12">Dezembro</option>
                                    </select>
                                    <has-error :form="form" field="mesVcto"></has-error>
                                </div>
                                <div class="col-md-5 form-group">
                                    <label for="anoVcto" class="control-label">Ano</label>
                                    <select name="anoVcto" v-model="form.anoVcto" id="anoVcto" class="form-control" :class="{ 'is-invalid': form.errors.has('anoVcto') }">
                                        @foreach($anos as $ano)
                                            <option value="{{ $ano }}">{{ $ano }}</option>
                                        @endforeach
                                    </select>
                                    <has-error :form="form" field="anoVcto"></has-error>
                                </div>
                            </div>
                        </div>                                       
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary" :disabled="buttonOk == false">Create</button>
                        </div>
                    </form>
                </div>
            </div>
        </div><!-- div modal -->
        <div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header ">
                        <h5 class="modal-title" id="addNewLabel">@{{ this.caption }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <!-- EXIBE O PDF -->
                    <div v-show="showPdf" class="modal-body">
                        <iframe name="_pdf" id="_pdf" :height="frameHeight" width="100%" frameborder="0" scrolling="no">
                
                        </iframe>
                    </div>
                    <!-- EDIT / UPDATE -->
                    <div v-show="!showPdf" class="modal-body">
                        <form @submit.prevent="editmode ? updateBoleto() : createBoleto()">
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-6 form-group">
                                        <label class="typo__label">Cliente</label>
                                        <multiselect v-model="form.cliente"
                                            :disabled=editmode 
                                            :options="optionsClientes"
                                            @input="onChangeCliente" 
                                            placeholder="Selecione..." 
                                            label="nome" track-by="id">
                                        </multiselect>
                                        <has-error :form="form" field="clientes_id"></has-error>
                                    </div>
                                    <div class="col-md-2 form-group">
                                        <label for="vencimento" class="control-label">Vencimento</label>
                                        <date-picker v-model="form.vencimento"  v-mask="'##/##/####'" name="vencimento"
                                            class="form-control " :class="{ 'is-invalid': form.errors.has('vencimento') }" 
                                            :config="optionsVencimento">
                                        </date-picker>
                                        <has-error :form="form" field="vencimento"></has-error>
                                    </div>
                                    <div class="col-md-2 form-group">
                                        <label for="valor" class="control-label">Valor</label>
                                        <money v-model="form.valor" name="valor" id="valor"
                                            class="form-control text-right" :class="{ 'is-invalid': form.errors.has('valor') }"> 
                                        </money>
                                        <has-error :form="form" field="valor"></has-error>
                                    </div>
                                    <div class="col-md-2 form-group">
                                        <label for="pagamento" class="control-label">Pagamento</label>
                                        <date-picker v-model="form.pagamento"  v-mask="'##/##/####'" name="pagamento"
                                            class="form-control " :class="{ 'is-invalid': form.errors.has('pagamento') }" 
                                            :config="optionsPagamento" :disabled="($gate.isAdmin() && !editmode)">
                                        </date-picker>
                                        <has-error :form="form" field="pagamento"></has-error>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 form-group">
                                        <label for="descdemonstrativo1" class="control-label">Descrição Demonstrativo 1</label>
                                        <input v-model="form.descdemonstrativo1" type="text" maxlength="70" name="descdemonstrativo1" id="descdemonstrativo1"
                                            placeholder="DESCRIÇÃO DO DEMONSTRATIVO 1"
                                            class="form-control text-upper" :class="{ 'is-invalid': form.errors.has('descdemonstrativo1') }">
                                        <has-error :form="form" field="descdemonstrativo1"></has-error>
                                    </div>   
                                </div>
                                <div class="row">
                                    <div class="col-md-12 form-group">
                                        <label for="descdemonstrativo2" class="control-label">Descrição Demonstrativo 2</label>
                                        <input v-model="form.descdemonstrativo2" type="text" maxlength="70" name="descdemonstrativo2" id="descdemonstrativo2"
                                            placeholder="DESCRIÇÃO DO DEMONSTRATIVO 2"
                                            class="form-control text-upper" :class="{ 'is-invalid': form.errors.has('descdemonstrativo2') }">
                                        <has-error :form="form" field="descdemonstrativo2"></has-error>
                                    </div>   
                                </div>
                                <div class="row">
                                    <div class="col-md-12 form-group">
                                        <label for="descdemonstrativo3" class="control-label">Descrição Demonstrativo 3</label>
                                        <input v-model="form.descdemonstrativo3" type="text" maxlength="70" name="descdemonstrativo3" id="descdemonstrativo3"
                                            placeholder="DESCRIÇÃO DO DEMONSTRATIVO 3"
                                            class="form-control text-upper" :class="{ 'is-invalid': form.errors.has('descdemonstrativo3') }">
                                        <has-error :form="form" field="descdemonstrativo3"></has-error>
                                    </div>   
                                </div>
                            </div>                                       
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                <button v-show="editmode" type="submit" class="btn btn-success">Update</button>
                                <button v-show="!editmode" type="submit" class="btn btn-primary">Create</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div><!-- div modal -->
    </div>
@stop

@section('js')
      
@stop

@section('adminlte_js')
    @auth
        <script>
            window.user = @json(auth()->user())
        </script>
    @endauth
    <script src="{{ asset('js/app.js')}}"></script> 
    <script src="{{ asset('js/formatMoney.js')}}"></script> 
    <script src="{{ asset('js/apps/boletos.js')}}"></script> 
    <script src="{{ asset('js/blockClick.js') }}"></script>
@stop