@extends('layouts.dashboard')
@section('pg-body')
<section class="wf100 subheader">
    <div class="container">
        <h2>Recadastramento</h2>
        <ul>
            <li><a href="{{url('home')}}">Home</a></li>
        </ul>
    </div>
</section>
<!--Sub Header End--> 
<!--Main Content Start-->
<style>
    div, th, td, label{
        color: #4e4c4c;
    }
    
    .btn_remover_funcao{
        float: right; 
        margin-top: 10px; 
        float: right; 
        margin-top: 10px; 
        padding: 5px; 
        margin-right: 14px;
    }
    
</style>

<div class="main-content" style="padding: 60px 0;" id="conteudo">

    <!--Donation Start-->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="">
                    @if(Session::has('sucesso'))
                    <div class="custom-alerts alert alert-success fade in">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
                        <i class="fa fa-check"></i>{!! trans('padrao.sucesso') !!}
                    </div>
                    @endif
                    @if(Session::has('slugexiste'))
                    <div class="custom-alerts alert alert-danger fade in">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
                        <i class="fa fa-check"></i> Esse cadastro já existe!
                    </div>
                    @endif
                </div>
                <div class="well" style="background-color: #fff; -webkit-box-shadow: 3px 3px #f5f5f5;">
                    {!! Form::open(['url' => 'recadastramentogo','onsubmit'=>'getModalAguarde();', 'class' => 'horizontal-form', 'files' => true]) !!}
                    <div class="row">
                        <h6 style="margin: 10px; font-weight: bold;">1 - Documentos Pessoais: </h6>
                        <div class="col-md-3">
                            <label>Nome</label>
                            <input type="text" name="nome" required class="form-control" placeholder="Nome">
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label style="">CPF</label>
                                <input class="form-control" type="text" required name="cpf" id="cpf" maxlength="14" onkeyup='formatar("###.###.###-##", this); return SomenteNumero(event);' value="" placeholder="CPF">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>RG</label>
                                <input class="form-control" type="text" required name="rg" id="rg" value="" placeholder="RG">
                            </div>
                        </div>
                        <div class="col-md-1">
                            <div class="form-group">
                                <label>UF</label>
                                <input class="form-control" type="text" required name="uf_rg" id="uf_rg" value="" placeholder="UF">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Orgão Emissor</label>
                                <input class="form-control" type="text" required name="orgao_emissor" id="orgao_emissor" value="" placeholder="Ex: SSP">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Data Emissão</label>
                                <input class="form-control" type="date" required name="data_emissao" id="data_emissao"  maxlength="10" onkeyup='formatar("##/##/####", this); return SomenteNumero(event);' value="" placeholder="00/00/0000">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Data Nascimento</label>
                                <input class="form-control" type="date" required name="data_nascimento" id="data_nascimento"  maxlength="10" onkeyup='formatar("##/##/####", this); return SomenteNumero(event);' value="" placeholder="00/00/0000">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Nacionalidade</label>
                                <input type="text" name="nacionalidade" required class="form-control" placeholder="Nacionalidade">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Naturalidade/UF</label>
                                <input type="text" name="naturalidade" required class="form-control" placeholder="Nacionalidade">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Estado Civil </label>
                                <select class="form-control" name="genero" required>
                                    <option value="">Escolha</option>
                                    <option value="Solteiro">Solteiro</option>
                                    <option value="Casado">Casado</option>
                                    <option value="Separado">Separado</option>
                                    <option value="Divorciado">Divorciado</option>
                                    <option value="Viúvo">Viúvo</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Gênero </label>
                                <input class="form-control" list="generos" required name="genero" placeholder="Escolha"/>
                                <datalist id="generos">
                                  <option value="Masculino">
                                  <option value="Feminino">
                                  <option value="Outro: ">
                                </datalist>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Grupo Sanguíneo</label>
                                <input class="form-control" type="text" required name="grupo_sanguineo" placeholder="Ex: B+">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Religião</label>
                                <input class="form-control" type="text" required name="religiao" placeholder="Religião">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Raça/Cor</label>
                                <input class="form-control" type="text" required name="raca" placeholder="Raça/Cor">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Nome do Pai</label>
                                <input type="text" name="nome_pai" required class="form-control" placeholder="Nome do Pai">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Nome da Mãe</label>
                                <input type="text" name="nome_mae" required class="form-control" placeholder="Nome da Mãe">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>PIS/PASEP</label>
                                <input class="form-control" type="text" required name="pis" value="" placeholder="PIS/PASEP">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Nº do Titulo de Eleitor</label>
                                <input class="form-control" type="text" required name="titulo" value="" placeholder="Título">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Zona</label>
                                <input class="form-control" type="text" required name="zona" value="" placeholder="Zona">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Secão</label>
                                <input class="form-control" type="text" required name="secao" value="" placeholder="Seção">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Nº Cert. Reservista</label>
                                <input class="form-control" type="text" required name="reservista" value="" placeholder="Seção">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Deficiência </label>
                                <select class="form-control" name="tem_deficiencia" onchange="setDeficiencia(this);" required>
                                    <option value="">Escolha</option>
                                    <option value="Sim">Sim</option>
                                    <option value="Não">Não</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6" id="div_deficiencia" style="display: none;">
                            <div class="form-group">
                                <label>Deficiência</label>
                                <input type="text" name="deficiencia" id="deficiencia" class="form-control" placeholder="Descreva sua deficiência">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>E-mail</label>
                                <input type="text" name="email" class="form-control" placeholder="E-mail">
                            </div>
                        </div>
                        <div class="col-md-4" style="clear: both;">
                            <div class="form-group">
                                <label>Rua</label>
                                <input type="text" name="rua" required class="form-control" placeholder="Rua">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Número</label>
                                <input type="text" name="numero" required class="form-control" placeholder="Nº">
                            </div>                        
                        </div>                        
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Complemento</label>
                                <input type="text" name="complemento" class="form-control" placeholder="Complemento">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Cep</label>
                                <input type="text" name="cep" required class="form-control" maxlength="10" onkeyup='formatar("##.###-###", this); return SomenteNumero(event);' placeholder="Cep">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Bairro</label>
                                <input type="text" name="bairro" required class="form-control" placeholder="Bairro">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Cidade</label>
                                <input type="text" name="cidade" required class="form-control" placeholder="Cidade">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Estado</label>
                                <input type="text" name="estado" required class="form-control" placeholder="Estado">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Telefone</label>
                                <input type="text" name="telefone" class="form-control" placeholder="Telefone">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Celular</label>
                                <input type="text" name="celular" required class="form-control" placeholder="Celular">
                            </div>
                        </div>                        
                        
                        <hr style="clear: both;">                        
                        <h6 style="margin: 10px; font-weight: bold; clear: both;">2 - Dependentes <button class="btn btn-sm btn-primary" type="button" onclick="cloneDependente();"><i class="fa fa-plus"></i> Adicionar</button></h6>
                        <div id="div_modelo_dependentes" style="display: none;">
                            <div id="divint">
                                <div style="border-radius: 10px; border: 1px solid #ccc; height: 90px; padding: 10px; margin-bottom: 27px;">
                                    <div class="col-md-3" style="clear: both;">
                                        <label>Nome</label>
                                        <input type="text" name="nome_dependente[]" id="nome_dependente" class="form-control" placeholder="Nome">
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label style="">CPF</label>
                                            <input class="form-control" type="text" name="cpf_dependente[]" id="cpf_dependente" maxlength="14" onkeyup='formatar("###.###.###-##", this); return SomenteNumero(event);' value="" placeholder="CPF">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>Data Nascimento</label>
                                            <input class="form-control" type="date" name="data_nascimento_dependente[]" id="data_nascimento_dependente"  maxlength="10" onkeyup='formatar("##/##/####", this); return SomenteNumero(event);' value="" placeholder="00/00/0000">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>Gênero </label>
                                            <input class="form-control" list="generos" name="genero_dependente[]" id="genero_dependente" placeholder="Escolha"/>
                                            <datalist id="generos">
                                              <option value="Masculino">
                                              <option value="Feminino">
                                              <option value="Outro: ">
                                            </datalist>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>Parentesco </label>
                                            <select class="form-control" name="parentesco_dependente[]" id="parentesco_dependente">
                                                <option value="">Escolha</option>
                                                <option value="Filho">Filho (a)</option>
                                                <option value="Pai">Pai</option>
                                                <option value="Mãe">Mãe</option>
                                                <option value="Cônjuge">Cônjuge</option>
                                                <option value="Parente">Parente</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-1">
                                        <div class="form-group">
                                            <button class="btn btn-sm btn-danger btn_remover_funcao" style="margin-top: 25px!important; margin: auto; padding: none;" type="button" id="btn_closedf"><i class="fa fa-times"></i> Excluir</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div id="div_dados_dependentes0">
                            
                        </div>
                        
                        <hr style="clear: both;">
                        <h6 style="margin: 10px; font-weight: bold; clear: both;">3 - Documentos Funcionais <button class="btn btn-sm btn-primary" type="button" onclick="cloneFuncao();"><i class="fa fa-plus"></i> Adicionar</button> </h6>
                                                
                        <div id="div_modelo_dados_funcionais" style="display: none;">
                            <div id="divint">
                                <div style="border-radius: 10px; border: 1px solid #ccc; height: 300px; padding: 10px; margin-bottom: 27px;">
                                    <div class="col-md-4">
                                        <label>Função/Cargo para o qual fez o concurso</label>
                                        <input type="text" name="funcao_df[]" class="form-control" placeholder="Sua Resposta">
                                    </div>
                                    <div class="col-md-3">
                                        <label>Matrícula</label>
                                        <input type="text" name="matricula_df[]" class="form-control" placeholder="Sua Resposta">
                                    </div>
                                    <div class="col-md-3">
                                        <label>Goza de algum tipo de licença, qual?</label>
                                        <input type="text" name="goza_licenca_df[]" class="form-control" placeholder="Sua Resposta">
                                    </div>
                                    <div class="col-md-2">
                                        <label>Carga horária</label>
                                        <input type="text" name="carga_horaria_df[]" class="form-control" placeholder="Sua Resposta">
                                    </div>
                                    <div class="col-md-4">
                                        <label>Local de efetivo exercício das atividades</label>
                                        <input type="text" name="local_efetivo_df[]" class="form-control" placeholder="Sua Resposta">
                                    </div>
                                    <div class="col-md-3">
                                        <label>Nome do Chefe imediato</label>
                                        <input type="text" name="nome_chefe_df[]" class="form-control" placeholder="Sua Resposta">
                                    </div>                            
                                    <div class="col-md-5">
                                        <label>Está readaptado para função diferente, qual? </label>
                                        <input type="text" name="readaptado_df[]" class="form-control" placeholder="Sua Resposta">
                                    </div>
                                    <div class="col-md-12">
                                        <label>Tem algum tipo de incapacidade para o exercício da função para a qual fez o concurso, qual?</label>
                                        <input type="text" name="incapacidade_df[]" class="form-control" placeholder="Sua Resposta">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Tem aposentadoria no regime geral do INSS? </label>
                                        <select class="form-control" name="aposentadoria_df[]">
                                            <option value="">Escolha</option>
                                            <option value="Sim">Sim</option>
                                            <option value="Não">Não</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Recebe ou recebeu algum tipo de benefício do INSS no último ano? </label>
                                        <select class="form-control" name="beneficio_df[]">
                                            <option value="">Escolha</option>
                                            <option value="Sim">Sim</option>
                                            <option value="Não">Não</option>
                                        </select>
                                    </div>
                                    <button class="btn btn-sm btn-danger btn_remover_funcao" type="button" id="btn_closedf"><i class="fa fa-times"></i> Excluir</button>
                                </div>
                            </div>
                        </div>
                        
                        <div id="div_dados_funcionais0">
                            
                        </div>
                        
                        <hr style="clear: both;">
                        <h6 style="margin: 10px; font-weight: bold; clear: both;">4 - Formação </h6>
                        
                        <div class="col-md-4" style="clear: both;">
                            <div class="form-group">
                                <label>Maior nível de escolaridade concluído </label>
                                <select class="form-control" required name="escolaridade" onchange="setDadosFormacao(this);" id="escolaridade">
                                    <option value="">Escolha</option>
                                    <option value="Não concluiu o ensino fundamental">Não concluiu o ensino fundamental</option>
                                    <option value="Ensino fundamental">Ensino fundamental</option>
                                    <option value="Ensino médio">Ensino médio</option>
                                    <option value="Educação superior">Educação superior</option>
                                </select>
                            </div>
                        </div>
                        
                        <div id="div_dados_formacao" style="display: none;">
                            <div id="divint">
                                <div>
                                    <div class="col-md-3" style="clear: both;">
                                        <label>Nome do Curso</label>
                                        <input type="text" name="curso" id="curso" class="form-control" placeholder="Curso">
                                    </div>
                                    <div class="col-md-3">
                                        <label>Instituição</label>
                                        <input type="text" name="instituicao" id="instituicao" class="form-control" placeholder="Instituição">
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>Ano Conclusão</label>
                                            <input class="form-control" type="number" name="ano_conclusao"  maxlength="4" value="" placeholder="0000">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>Nivel/Grau </label>
                                            <select class="form-control" name="nivel_gral">
                                                <option value="">Escolha</option>
                                                <option value="Bacharelado">Bacharelado</option>
                                                <option value="Licenciatura">Licenciatura</option>
                                                <option value="Sequencial">Sequencial</option>
                                                <option value="Tecnológico">Tecnológico</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>Pós-Grad. Concluídas </label>
                                            <select class="form-control" name="pos_concluida">
                                                <option value="">Escolha</option>
                                                <option value="Especialização">Especialização</option>
                                                <option value="Mestrado">Mestrado</option>
                                                <option value="Doutorado">Doutorado</option>
                                                <option value="Não tem pós-graduação concluída">Não tem pós-graduação concluída</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <hr style="clear: both;">
                        <h6 style="margin: 10px; font-weight: bold; clear: both;">5 - Anexo </h6>
                        <h6 style="margin: 10px; font-weight: bold; clear: both;">Envie aqui um único arquivo PDF contendo todos os documentos que dão base aos dados fornecidos nesse formulário.</h6>
                        <div class="col-md-4">
                                {!! Form::label('arquivo', "Arquivo") !!}
                                {!! Form::file('image') !!}
                                {!! $errors->first('logo', '<p class="help-block">:message</p>') !!}
                        </div>
                        
                        
                        <div class="col-md-12" style="text-align: center;">
                            <div style="margin: 0 auto; display: table;" class="g-recaptcha" data-sitekey="6LfMR1kpAAAAADJe4-Yk72CY4--tTZQAP2fI6R77" data-action="LOGIN"></div>
                            @if ($errors->has('g-recaptcha-response'))
                            <span class="help-block" style="color: red;">
                                <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                            </span>
                            @endif
                        </div>

                        <div class="col-md-12" style="text-align: center; margin-top: 20px;">
                            <button class="btn btn-success" style="float: none;" type="submit"><i class="fa fa-paper-plane"></i> Enviar Dados</button>
                        </div>
                    </div>								
                    {!! Form::close() !!}
                </div><!-- Well -->
            </div>

            <!-- menu -->

            <!-- menu -->


        </div>
    </div>
</div>
<script>
    function setDeficiencia(e){
        if(e.value == 'Sim'){
            $('#div_deficiencia').css('display','block');
            $('#deficiencia').attr('required','required');
        }else{
            $('#div_deficiencia').css('display','none');
            $('#deficiencia').removeAttr('required');
        }
    }
    function setDadosFormacao(e){
        if(e.value == 'Educação superior'){
            $('#div_dados_formacao').css('display','block');
        }else{
            $('#div_dados_formacao').css('display','none');
        }
            
    }
    
    var id_dependente = 0;
    
    function cloneDependente(){
        var dados_modelo = $("#div_modelo_dependentes").html();
        id_d_old = id_dependente;
        id_dependente = id_dependente+1;
        $("#div_dados_dependentes"+id_d_old).html(dados_modelo+'<div id="div_dados_dependentes'+id_dependente+'"></div>');
        $("#div_dados_dependentes"+id_d_old+" .btn_remover_funcao").attr("onclick","closeDependente("+id_d_old+")");
    }
    
    function closeDependente(id_dep){
        $("#div_dados_dependentes"+id_dep+" > #divint").html('');
    }
    
    var id_funcao = 0;
    
    function cloneFuncao(){
        var dados_modelo = $("#div_modelo_dados_funcionais").html();
        id_f_old = id_funcao;
        id_funcao = id_funcao+1;
        $("#div_dados_funcionais"+id_f_old).html(dados_modelo+'<div id="div_dados_funcionais'+id_funcao+'"></div>');
        $("#div_dados_funcionais"+id_f_old+" > div > div > button").attr("onclick","closeFuncao("+id_f_old+")");
    }
    
    function closeFuncao(id_func){
        $("#div_dados_funcionais"+id_func+" > #divint").html('');
    }
    
    var id = 0;
        
    function addItem(){
        var nome_dependente = $("#nome_dependente").val();
        var cpf_dependente = $("#cpf_dependente").val();
        var data_nascimento_dependente = $("#data_nascimento_dependente").val();
        var genero_dependente = $("#genero_dependente").val();
        var parentesco_dependente = $("#parentesco_dependente").val();
        
        var table_itens = $("#table_itens").html();

        //Set TD
        var td = "";
        td = td +"<td style='display:none;' data-id='"+id+"'>"+id+"</td>";
        td = td +"<td style='display: none;'>"+id+"</td>"; 
        td = td +"<td>"+nome_dependente+"</td>"; 
        td = td +"<td>"+cpf_dependente+"</td>";  
        td = td +"<td>"+data_nascimento_dependente+"</td>"; 
        td = td +"<td>"+genero_dependente+"</td>";
        td = td +"<td>"+parentesco_dependente+"</td>";
        td = td +"<td style='text-align: center;'><i class='fa fa-trash' style='color: #b50000;' onclick='RemoveTableRowItem(this)'></i></td>";

        //Set TR
        var tr = "";
        tr = "<tr>"+td+"</tr>";

        //Set Table
        $("#table_itens").html(table_itens + tr);

        //HIDDENS
        //Get HIDDENS
        var hiddens = $("#hiddens").html();

        var hidden = "";
        hidden = hidden +"<input type='hidden' name='array_id[]' id='id"+id+"' value='true' >";
        hidden = hidden +"<input type='hidden' name='nome_dependente[]' value='"+nome_dependente+"' >";
        hidden = hidden +"<input type='hidden' name='cpf_dependente[]' value='"+cpf_dependente+"' >";
        hidden = hidden +"<input type='hidden' name='data_nascimento_dependente[]' value='"+data_nascimento_dependente+"' >";
        hidden = hidden +"<input type='hidden' name='genero_dependente[]' value='"+genero_dependente+"' >";
        hidden = hidden +"<input type='hidden' name='parentesco_dependente[]' value='"+parentesco_dependente+"' >";

        //SET HIDDENS
        $("#hiddens").html(hiddens + hidden);
        
        $("#nome_dependente").val("");
        $("#cpf_dependente").val("");
        $("#data_nascimento_dependente").val("");
        $("#genero_dependente").val("");
        $("#parentesco_dependente").val("");
        
        id = id + 1;                
    }
    
    function RemoveTableRowItem(handler) {

        var tr = $(handler).closest('tr');

        var id = $(handler).parent().parent().find('td').data('id');
        
        tr.fadeOut(400, function(){ 
          tr.remove();
          $("#id"+id).val('false');
        });
    };
</script>

@endsection