@extends('adminlte::page')


@section('title', 'Sigo 2.0')
@section('content_header')
<h1>Boletos Cooperado</h1>
@stop
@section('content')
<div class="card" style="margin-top: 1%">
    <div class="card-header p-2">
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="abaPrincipal-tab" data-toggle="pill" href="#abaPrincipal" role="tab" aria-controls="pills-home" aria-selected="true">Boletos Cooperados</a>
            </li>
        </ul>
    </div>
    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="abaPrincipal" role="tabpanel" aria-labelledby="abaPrincipal-tab">
            <div class="card-body">
                <form id='principal'>
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label>Selecione o cooperado</label>
                                <select class="form-control" id="cooperado" onchange="cooperadoSelecionado($('#cooperado').val())">
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-1" style="">
                            <div class="form-group">
                                <label class="col-form-label">Código</label>
                                <input id="coo_codigo" class="form-control" type="text" disabled>
                            </div>
                        </div>
                        <div class="col-sm-6" style="">
                            <div class="form-group">
                                <label class="col-form-label">Nome Completo</label>
                                <input id="pes_nome" class="form-control" type="text" disabled>
                            </div>
                        </div>
                        <div class="col-sm-2" style="">
                            <div class="form-group">
                                <label class="col-form-label">Data Vencimento</label>
                                <input id="dt_vencim" class="form-control" type="date">
                            </div>
                        </div>
                        <div class="col-sm-2" style="">
                            <div class="form-group">
                                <label class="col-form-label">Nosso Número</label>
                                <input id="nossonumero" class="form-control" type="number">
                            </div>
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-append">
                                <button id="btnBuscar" style="margin-left: 10px;" onclick="buscarClicado(event)" class="btn btn-block btn-success btn-sm">Buscar</button>
                            </div>
                        </div>
                    </div>
                    <label class="col-form-label">Apenas boletos em aberto</label>
                    <input id="boletosemaberto" name="boletosEmAberto" type="checkbox" value='N'>
            </div>
            <div class="row" style="margin-left: 10px">
                <button style="margin-left: 10px" type="button" class="btn btn-default" onclick='retirarBaixaDoCooperado()'>
                    Retirar Baixa
                </button>
                <button style="margin-left: 10px" type="button" class="btn btn-default" onclick="enviaBoletoPorEmail()" id="enviarEmail">
                    Enviar Email
                    <i class="fas fa-info-circle ml-1"></i>
                </button>
                <button style="margin-left: 10px" type="button" class="btn btn-default" onclick="clicouNoBotaoBaixar()">
                    Baixar
                </button>
                <button style="margin-left: 10px" type="button" class="btn btn-default" onclick="botaoCancelarClicado()">
                    Cancelamento
                </button>
                <button style="margin-left: 10px" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-vencimento">
                    Alterar Vencimento
                </button>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title" style="font-weight: bold;">Boletos</h2>
                        </div>

                        <div class="card-body" style="max-height: 300px; overflow-y: auto;">
                            <label>Pesquisar pelo código</label>
                            <input type="number" id="inputPesquisaCodigoBoleto" class="form-control" min="0" style="margin-bottom: 10px;">
                            <table id="tabelaBoletos" class="table table-bordered table-striped">
                                <table id="tabelaBoletos" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Selecionar</th>
                                            <th>Cancelado</th>
                                            <th>Código</th>
                                            <th>Nosso Numero</th>
                                            <th>Nome Cooperado</th>
                                            <th>Data Vencimento</th>
                                            <th>Data Pagamento</th>
                                            <th>Novo Vencimento</th>
                                            <th>Número Registro</th>
                                            <th>Descrição</th>
                                            <th>Valor</th>
                                            <th>Boleto</th>
                                        </tr>
                                    </thead>
                                    <tbody id="corpoTabelaBoletos">
                                    </tbody>
                                </table>
                        </div>
                    </div>
                </div>
            </div>
            </form>
        </div>
        @include ('operacional/cooperado/descontos')
        @include ('operacional/cooperado/modalBaixar')
        @include ('operacional/cooperado/modalAlterarVencimento')
        @include ('operacional/cooperado/modalConfirmacao')


    </div>
    <div class="overlay" id="carregamento">
        <i class="fas fa-2x fa-sync fa-spin"></i>
        <p class="texto-aguarde">Aguarde<span id="texto-aguarde"></span></p>
    </div>

</div>
@stop

@section('css')
<style>
    .texto-aguarde {
        position: absolute;
        bottom: 37%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        font-weight: bold;
    }



    .select2-container--default .select2-selection--single {
        height: 600px;
    }
</style>
<link rel="stylesheet" href="/css/admin_custom.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@stop
@section('plugins.Toastr', true)
@section('plugins.Datatables', true)
@section('plugins.DatatablesPlugins', true)
@section('js')
<script src="{{ asset('js/app.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="{{ asset('js/operacional/cooperadoBoleto.js') }}"></script>
<script src="{{ asset('js/operacional/cooperadoGets.js') }}"></script>
<script src="{{ asset('js/operacional/cooperadoPosts.js') }}"></script>


<script>
    $(document).ready(function() {
        animacaoTelaCarregamento();

        $('#inputPesquisaCodigoBoleto').on('input', function() {
            var nossoNumeroPesquisa = $(this).val();

            $('#tabelaBoletos tbody tr').hide().filter(function() {
                return $(this).find('td:nth-child(3)').text().includes(nossoNumeroPesquisa);
            }).show();
        });

        $('#boletosemaberto').change(function() {
            if ($(this).is(':checked')) {
                $(this).val('S');
            } else {
                $(this).val('N');
            }
        });



        $('#cooperado').select2();
        $('#caixasEmAberto').select2();
        $('#P_LocalPagamento').select2();
        $('.select2-container--default .select2-selection--single').css('height', '37px');
        listagemDeCooperados();
        listagemDeCaixasEmAberto();
            })
</script>
@stop