@extends('adminlte::page')

@section('title', 'Sigo 2.0')

@section('content_header')
    <h1>Cadastro de Titular {{ $benef->pessoa->pes_nome ?? '' }}</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">Principal</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="abaCobrancae-tab" data-toggle="pill" href="#abaCobranca" role="tab"
                        aria-controls="pills-profile" aria-selected="false">Cobrança</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="dadosPessoais-tab" data-toggle="pill" href="#dadosPessoais" role="tab"
                        aria-controls="dadosPessoais-contact" aria-selected="false">Dados Pessoais</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="abaResidenciais-tab" data-toggle="pill" href="#abaResidenciais" role="tab"
                        aria-controls="pills-contact" aria-selected="false">Dados Residenciais</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="abaDadosFamilia-tab" data-toggle="pill" href="#abaDadosFamilia"
                        role="tab">Família</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="abaCoberturasCarencias-tab" data-toggle="pill" href="#abaCoberturasCarencias"
                        role="tab" onclick="abreAbaCoberturasCarencias();">Coberturas e Carências</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="abaDocumentosUpload-tab" data-toggle="pill" href="#abaDocumentosUpload"
                        role="tab">Documentos</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-4">
                                <div class="form-group">
                                    <label> Tipo do plano</label>
                                    <select class="form-control" id="pla_tipo"
                                        onchange="filtraPlanoPorTipo($('#pla_tipo').val()), limparCampos()" disabled>
                                        <option value="">-- Selecione --</option>
                                        <option value="E">Plano Empresarial</option>
                                        <option value="P">Plano Particular</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-sm-8">
                                <div class="form-group">
                                    <label>Nome do plano</label>
                                    <div id="iconeCarregando" class="loading-container">
                                        <select id="pla_codigo" style="height: 100%;"
                                            class="form-control js-example-basic-single"
                                            onchange="preencheComboTabelaPreco($('#pla_codigo').val()), limparCampos()"
                                            required>
                                            <option value="{{ $benef->plano->pla_codigo ?? '-- Selecione --' }}">
                                                {{ $benef->plano->pla_codigo ?? '' }} - {{ $benef->plano->pla_nome ?? '' }}
                                            </option>

                                        </select>
                                        <div class="loading-spinner"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <span id="cpfError"></span>
                                    <label class="col-form-label loading">CPF</label>
                                    <div class="input-group input-group-sm">
                                        <input id="ben_codigo_titular" type="text" value="{{ $benef->ben_codigo ?? '' }}"
                                            style="display: none;">
                                        <input id="pes_codigo_titular" type="text"
                                            value="{{ $benef->pessoa->pes_codigo ?? '' }}" style="display: none;">
                                        <input id="pes_cpf"
                                            oninput="transfereValoresParaOsDadosPessoais(), digitouTodoCPF()" type="text"
                                            maxlength='14' class="form-control" value="{{ $benef->pessoa->pes_cpf ?? '' }}"
                                            disabled style="height: 37px;">
                                        <span class="input-group-btn" style="">
                                            <span data-target="#modalCadastroPessoa" data-toggle="modal"
                                                class="actModal">
                                                <button type="button" id="btnPesquisarPessoa"
                                                    class="btn btn-primary btn-flat"
                                                    style="height: 37px;">Pesquisar</button>
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="col-form-label">Número da família</label>
                                    <input id="ben_familia" type="text" class="form-control"
                                        value="{{ $benef->ben_familia ?? '' }}" readonly>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="col-form-label ">Nome Pessoa</label>
                                    <input id="pes_nome" oninput="transfereValoresParaOsDadosPessoais()" type="text"
                                        class="form-control" value=" {{ $benef->pessoa->pes_nome ?? '' }}" readonly>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="col-form-label">Numero do cartão</label>
                                    <input id="ben_carteira" type="text" class="form-control"
                                        value="{{ $benef->ben_carteira ?? '' }}" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3" style="">
                                <div class="form-group">
                                    <label class="col-form-label">Vencimento</label>
                                    <input id="ben_vencim" min="1" max="31"
                                        oninput="validarNumeroDoVencimento()" maxlength="2" type="text"
                                        class="form-control" value="{{ $benef->ben_vencim ?? '' }}" disabled required>
                                </div>
                            </div>
                            <div class="col-sm-3" style="margin-top: 6px;">
                                <div class="form-group">
                                    <label>Tipo de adesão</label>
                                    <select id="ben_tipoadesao" class="form-control" disabled required>
                                        <option value="">-- Selecione --</option>
                                        @foreach ($tipos_de_adesao as $tipo_de_adesao)
                                            <option value="{{ $tipo_de_adesao->codigo ?? '' }}">
                                                {{ $tipo_de_adesao->tipo ?? '' }}
                                            </option>
                                        @endforeach
                                    </select>

                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="col-form-label"> Data de inclusão </label>
                                    <input id="ben_dtinclpla" type="date" class="form-control" value="">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="col-form-label"> Data de Exclusão </label>
                                    <input id="ben_dtexcl" type="date" class="form-control" value="" disabled>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6" style="">
                                <div class="form-group">
                                    <label class="col-form-label">Tabela de Preço</label>
                                    <div class="input-group">
                                        <select id="pre_desc" class="form-control" style="">
                                            <option value="">-- Selecione --</option>
                                        </select>
                                        <span class="input-group-btn">
                                            <a type="button" class="btn btn-primary btn-flat" data-toggle="tooltip"
                                                title="Abrir Tabela de Preço"
                                                href="/sigoweb/view_php/pagina.php?url=vue/comercial/preco.php"
                                                target="_blank">TP</a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="col-form-label"> Validade do Cartão </label>
                                    <input id="ben_valcart" type="date" onblur="validacaoDataDeValidadeDoCartao()"
                                        class="form-control" value="">
                                </div>
                            </div>
                            <div class="col-sm-3" style="">
                                <div class="form-group">
                                    <label class="col-form-label"> Código Secundario </label>
                                    <input id="ben_codsec" type="text" class="form-control"
                                        value="{{ $benef->ben_codsec ?? '' }}" disabled>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-9" style="margin-top: 6px;">
                                <div class="form-group">
                                    <label style="font-weight:bold;">Vendedor</label>
                                    <div id="select-wrapper">
                                        <select id="ben_vendedor" class="form-control js-example-basic-single">
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="col-form-label"> Validade Reajuste </label>
                                    <input id="ben_validade_reajuste" type="date" class="form-control" value=""
                                        disabled>
                                </div>
                            </div>
                        </div>

                        @if ($promocao[0]->codigo != null)
                            <div class="col-sm-9" style="margin-top: 6px;">
                                <div class="form-group">
                                    <label style="font-weight:bold;"> Promoção </label>
                                    <select id="promocao" class="form-control">
                                        <option value="$promocao[0]->codigo">{{ $promocao[0]->codigo ?? '' }}</option>
                                    </select>
                                </div>
                            </div>
                        @endif
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="ben_migracao">
                            <label class="form-check-label">Migração</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="ben_cartaodigital">
                            <label class="form-check-label">Emitir Cartão Digital</label>
                        </div>


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

            <div class="tab-pane fade" id="dadosPessoais" role="tabpanel" aria-labelledby="dadosPessoais-tab">
                <div class="card-body">
                    <x-basico.form-dados-pessoais />
                </div>
            </div>

            <div class="tab-pane fade" id="abaResidenciais" role="tabpanel" aria-labelledby="abaResidenciais-tab">
                <div class="card-body">
                    <x-basico.form-dados-residenciais />
                </div>
            </div>

            <div class="tab-pane fade" id="abaDadosFamilia" role="tabpanel" aria-labelledby="abaDadosFamilia-tab">
                <div class="card-body">
                    <x-basico.grid-listagem-familia />
                </div>
            </div>

            <div class="tab-pane fade" id="abaCoberturasCarencias" role="tabpanel"
                aria-labelledby="abaCoberturasCarencias-tab">
                <div class="card-body">
                    <x-basico.aba-coberturas-carencias />
                </div>
            </div>

            <div class="tab-pane fade" id="abaDocumentosUpload" role="tabpanel"
                aria-labelledby="abaDocumentosUpload-tab">
                <div class="card-body">
                    <x-basico.aba-documentos />
                </div>
            </div>

            @include('comercial/beneficiario/cobranca')
            @include('comercial/beneficiario/modalCadastroPessoa')

            <div class="row">
                <div class="col-sm-12">
                    <button id="btnGerarMensalidade" onclick="exibirAbaGerarMensalidade();" type="button"
                        class="btn btn-block btn-warning btn-sm"
                        style="width:15%; display: none; margin-left:10%;">Gerar Mensalidade</button>

                    <button id="btnSalvar" onclick="passarParcoopQuandoSalvarForClicado(this)" type="button"
                        data-par-coop="{{ $parametros['par_coop'] }}" class="btn btn-block btn-success btn-sm"
                        style="width:15%; display: inline-block; margin-bottom: 8px; margin-left: 20%;">Salvar</button>

                    <button id="btnReplicarEndereco" type="button" class="btn btn-block btn-primary btn-sm"
                        style="width:15%; display: inline-block; margin-bottom: 8px;"
                        onclick="replicandoEndereco();">Replicar
                        Endereço</button>

                        <button id="btnImprimirFichaCadastral" type="button" class="btn btn-block btn-danger btn-sm"
                        style="width:15%; display: inline-block; margin-bottom: 8px;"
                        onclick="imprimirFichaCadastral();">Imprimir</button>

                    <button id="btnVoltar" type="button" class="btn btn-block btn-sm btn-info"
                        style="width:15%; display: inline-block; margin-bottom: 8px;"
                        onclick="voltarParaIndex();">Voltar</button>
                </div>
            </div>
        </div>
        <div class="overlay" id="carregamento">
            <i class="fas fa-2x fa-sync fa-spin"></i>
        </div>
        <x-basico.confirm-replica-endereco />
    </div>

    <div class="modal fade bd-example-modal-sm" tabindex="-1" id="confirmNovoCadastroBenef" data-backdrop="static"
        style="display: none; margin-top:5%;" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Beneficiário Inativo</h5>
                </div>
                <div class="modal-body">
                    <p>Deseja realizar um novo cadastro para esse beneficiário?</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="novoCadastroTitular();">Sim</button>
                </div>
            </div>
        </div>
    </div>

@stop
@section('css')

    <style>
        .input-group>.select2-container {
            width: 93% !important;
        }

        .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;
        }

        #nomeDoPlano {
            padding-top: 6px;
            padding-bottom: 6px;
            box-sizing: border-box;

        }

        .loading-spinner::after {
            content: '';
            position: absolute;
            top: 58%;
            left: 93%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            border: 2px solid #ccc;
            border-top-color: #333;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            display: none;
        }

        .loading-container.loading .loading-spinner::after {
            display: block;
        }

        @keyframes spin {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }
    </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="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/app.js') }}"></script>
    <script src="{{ asset('js/comercial/beneficiario.js') }}"></script>
    <script src="{{ asset('js/comercial/beneficiarioGets.js') }}"></script>
    <script src="{{ asset('js/comercial/beneficiarioPosts.js') }}"></script>
    <script src="{{ asset('js/comercial/cadastroDePessoa.js') }}"></script>
    <script>
        let permissaoDeCadastroBeneficiario = JSON.parse('{!! json_encode($permissaoDeCadastroBeneficiario) !!}');
        let vendedores = JSON.parse('{!! json_encode($allVendedores) !!}')
        let benef = JSON.parse('{!! json_encode($benef) !!}')
        $(document).ready(function() {
            let parCoop = $('#btnSalvar').data("par-coop");
            $('#pla_codigo').select2();
            $('#ben_vendedor').select2();
            $('#pre_desc').select2();
            $('#ben_banco').select2();
            $('.overlay').hide();
            verificaTelaDeCadastroOuEdicao();
            getVendedores();
            colocarMascaraNoCampoCPF('#cpfResponsavel');
            colocarMascaraNoCampoCPF('#pes_cpf');
            modalCadastroPessoa();
            verificaParametroUrl();
            preencheComboCobrancaBanco();
            carregaDadosAbaDocumentos();
            $('[data-toggle="tooltip"]').tooltip({});
        });

        function replicandoEndereco() {
            pla_codigo = $('#pla_codigo').val();
            ben_familia = $('#ben_familia').val();
            abreConfirmReplicarEndereco(pla_codigo, ben_familia, tamanhoFamiliaBenef);
        }

        function imprimirFichaCadastral() {
            ben_codigo = $('#ben_codigo_titular').val();
            window.open('/sigoweb/relatorios/jasperphp/repFichaCadastralBenef.php?P_Codigo=' + ben_codigo);
        }
    </script>
@stop