@extends('adminlte::page')

@section('title', 'Lançamentos Cooperados')
@section('content_header')
    <h1 style="margin-left:3px; margin-top:12px; font-weight: bold;">Lançamentos Cooperados
    </h1>
@stop
@section('content')
    <div class="row" id="filtroLancamentos">        
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3">
                            <div class="form-group">
                                <label style="font-weight:400; padding-top: 6px;">Ref. Inicial:</label>
                                <select class="form-control" id="comboRefInicial" onchange="selecionaRefFinal()">
                                </select>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label style="font-weight:400; padding-top: 6px;">Ref. Final:</label>
                                <select class="form-control" id="comboRefFinal">
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label style="font-weight:400; padding-top: 6px;">Cooperado:</label>
                                <select class="form-control" id="comboCooperadosFiltragem">
                                    <option value="">--- Selecione ---</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: -15px;">
                        <div class="col-6" style="margin-top: 6px;">
                            <div class="form-group">
                                <label style="font-weight:400; padding-top: 6px;">Lançamento:</label>
                                <select id="comboLancamentosFiltro" class="form-control">
                                    <option>--- Selecione ---</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6" style="margin-top:48px;">
                            <div class="form-check">
                                <input id="checkLancProLaboreFiltro" class="form-check-input" type="checkbox">
                                <label class="form-check-label">Lançamento Pró-Labore</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-4">
                            <button type="button" class="btn btn-primary" id="btnFiltrar"
                                onclick="filtrarLancamentos()">Filtrar</button>
                            <button type="button" class="btn btn-primary" onclick="exibeFormNovoLancamento()"
                                id="btnNovoLancamento">Novo
                                Lançamento</button>
                        </div>
                    </div>
                </div>
                <div class="overlay" id="carregamento">
                    <i class="fas fa-2x fa-sync fa-spin"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="row" id="gridLancamentos">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row d-flex justify-content-end" style="margin-bottom: 5px;">
                        <div class="col-3" style="">
                            <input type="text" class="form-control" id="inputPesquisarDados"
                                onkeyup="pesquisarDadosTable()" placeholder="Pesquisar:">
                        </div>
                    </div>
                    <div class="row">
                        <div class="table-container col-12">
                            <table class="table table-bordered table-striped text-nowrap">
                                <thead>
                                    <tr>
                                        <th>Cooperado</th>
                                        <th>Lançamento</th>
                                        <th style="text-align: right;">Valor</th>
                                        <th>Observações</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody id="tableLancamentos">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row" id="msgNenhumRegistoEncontrado" style="margin-top: -17px;">
                        <div class="col-12">
                            <div class="d-flex justify-content-center" style="border:1px solid #dee2e6; padding: 20px;">
                                Nenhum Registro Encontrado!</div>
                        </div>
                    </div>
                    <div class="row justify-content-end" id="paginacao" style="margin-top:10px;">
                        <div class="col-12">
                            <div>
                                <ul id="paginacaoGridLancamentos" class="pagination float-right" style=""></ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="overlay" id="loadingGrid">
                    <i class="fas fa-2x fa-sync fa-spin"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="row" id="formNovoLancamento" style="display: none;">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form id="formLancamento" class="form" method="post" action="">
                        <div class="row">
                            <div class="col-5" style="">
                                <div class="form-group">
                                    <label style="font-weight:400; padding-top: 6px;">Referência da produção:</label>
                                    <select id="comboRefProducao" class="form-control"></select>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label style="font-weight:400; padding-top: 6px;">Valor:</label>
                                    <input type="number" value="1" min="1" id="valor" name="valor"
                                        class="form-control">
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label style="font-weight:400; padding-top: 6px;">Parcelas:</label>
                                    <input type="number" value="1" min="1" max="24" id="parcelas"
                                        class="form-control">
                                </div>
                            </div>
                            <div class="col-3" style="margin-top:48px;">
                                <div class="form-check">
                                    <input id="checkLancProLabore" class="form-check-input" type="checkbox">
                                    <label class="form-check-label">Lançamento Pró-Labore</label>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-3">
                                <div class="form-check">
                                    <input id="checkTodosCoperados" class="form-check-input" type="checkbox">
                                    <label class="form-check-label">Todos os cooperados</label>
                                </div>
                            </div>
                        </div>

                        <div class="row" style="margin-top:10px;">
                            <div class="col-5" style="">
                                <div class="form-group">
                                    <div id="selectComboCooperados">
                                        <label style="font-weight:400;">Cooperado:</label>
                                        <select id="comboCooperados" name="comboCooperados" class="form-control"
                                            required>
                                            <option>--- Selecione ---</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label style="font-weight:400;">Lançamento:</label>
                                    <select id="comboLancamentos" name="comboLancamentos" class="form-control" required>
                                        <option>--- Selecione ---</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-7" style="">
                                <div class="form-group">
                                    <label style="font-weight:400;">Observação:</label>
                                    <textarea id="observacao" name="observacao" class="form-control" maxlength="396" style="height: 125px;"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2 offset-md-2"></div>
                            <div class="col-6" style="">
                                <button type="submit" class="btn btn-primary" id="btnSalvarVoltar">Salvar e
                                    Voltar</button>
                                <button type="submit" class="btn btn-primary" onclick=""
                                    id="btnSalvarLimpar">Salvar e
                                    Limpar</button>
                                <button type="button" class="btn btn-primary" onclick="exibeFiltroLancamentos()"
                                    id="">Voltar</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="overlay" id="carregamento">
                    <i class="fas fa-2x fa-sync fa-spin"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" id="confirmRemoverLancamento" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Remover Lançamento</h5>
                </div>
                <div class="modal-body">
                    <p>Deseja realmente remover esse lançamento?</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Não</button>
                    <button type="button" class="btn btn-primary" onclick="removerLancamento()">Sim</button>
                </div>
            </div>
        </div>
    </div>
@section('css')
    <link href="css/badge.css">
    <style>
        .error {
            color: red
        }
        .select2-container {
            width: 100% !important;
        }
        .select2-selection--single {
            height: auto !important;
            padding: 5px 12px !important;
        }
        .select2-selection__arrow {
            top: 50% !important;
            transform: translateY(-50%) !important;
        }
        .table-container {
            max-height: 500px;
            /* Defina a altura máxima desejada */
            overflow: auto;
        }
        table td,
        table th {
            white-space: normal !important;
            word-break: normal !important;
            word-wrap: break-word !important;
        }
    </style>
    <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="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="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/operacional/lancamentosCooperados.js') }}"></script>
@stop
@stop