<!DOCTYPE html>
<html lang="pt-br">

<head>
    <title>SOLICITAÇÃO DE VAGAS</title>
    <meta charset="ISO-8859-1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <link rel="stylesheet" href="../smerp2010/libx/bootstrap4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="../smerp2010/libx/bootstrap4.0.0/css/fontawesome-all.css">
    <link rel="stylesheet" href="../smerp2010/libx/bootstrap4.0.0/css/dataTables.bootstrap4.min.css">

    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <script src="../smerp2010/libx/bootstrap4.0.0/js/jquery-3.2.1.min.js"></script>
    <script src="../smerp2010/libx/bootstrap4.0.0/js/popper.min.js"></script>
    <script src="../smerp2010/libx/bootstrap4.0.0/js/bootstrap.min.js"></script>
    <script src="../smerp2010/libx/bootstrap4.0.0/js//jquery.dataTables.min.js"></script>
    <script src="../smerp2010/libx/bootstrap4.0.0/js//dataTables.bootstrap4.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

    <script type="module" src="./validacao/app.js" charset="ISO-8859-1"></script>
    <script src="./js/procurarCidades.js"></script>
    <link rel="stylesheet" href="assets/styles.css">
</head>

<body>
    <div class="card-principal mx-auto">
        <div class="card">
            <div class="card-body">

                <div class="titulo">INSCRIÇÃO</div>

                <form id="formInscricao">

                    <h3 class="separador text-center">DADOS DA CRIANÇA</h3>
                    <input type="hidden" id="ano" name="ano" class="form-control" value='2022' required>
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label for="nome">NOME COMPLETO DA CRIANÇA <span class="obg">(OBRIGATÓRIO)</span></label>
                            <input type="text" id="nome" name="nome" class="form-control" data-tipo="nome" required>
                        </div>
                        <div class="col-md-6 form-group">
                            <label for="nascimento">DATA DE NASCIMENTO <span class="obg">(OBRIGATÓRIO)</span></label>
                            <input type="date" id="nascimento" name="nascimento" class="form-control" data-tipo="nascimento" required min='2012-04-01' onblur='verificarNascimento(this.value)'>
                        </div>
                    </div>
                    <div id="campoAmamentada">

                    </div>

                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label for="racacor">RAÇA/COR</label>
                            <select id="racacor" name="racacor" class="form-control">
                            <option value="6"> NÃO DECLARADA </option>
                                <option value="1"> BRANCA </option>
                                <option value="2"> PRETA </option>
                                <option value="3"> PARDA </option>
                                <option value="4"> AMARELA </option>
                                <option value="5"> ÍNDIGENA </option>
                                
                            </select>
                        </div>
                        <div class="col-md-6 form-group">
                            <label for="sexo">SEXO <span class="obg">(OBRIGATÓRIO)</span></label>
                            <select id="sexo" name="sexo" class="form-control" data-tipo="sexo" required>
                                <option> </option>
                                <option value="F"> FEMININO </option>
                                <option value="M"> MASCULINO </option>
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label for="nee">NECESSIDADES ESPECIAIS <span class="obg">(OBRIGATÓRIO)</span></label>
                            <select id="nee" name="nee" class="form-control" data-tipo="nee" required>
                                <option></option>
                                <option value="S">SIM</option>
                                <option value="N">NÃO</option>
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="responsavel">NOME COMPLETO DO RESPONSÁVEL</label>
                            <input type="text" id="responsavel" name="responsavel" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="mae">NOME COMPLETO DA MÃE <span class="obg">(OBRIGATÓRIO)</span></label>
                            <input type="text" id="mae" name="mae" class="form-control" data-tipo="mae" required>
                        </div>

                        <div class="form-group col-md-6">
                            <label for="pai">NOME COMPLETO DO PAI</label>
                            <input type="text" id="pai" name="pai" class="form-control">
                        </div>
                    </div>

                    <h3 class="separador text-center">DOCUMENTOS</h3>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="cpf">CPF</label>
                            <input type="text" id="cpf" name="cpf" class="form-control" data-tipo="cpf" minlength="11">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="sus">CARTÃO SUS</label>
                            <input type="text" id="sus" name="sus" class="form-control">
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="ufnasc">ESTADO <span class="obg">(OBRIGATÓRIO)</span> </label>
                            <select class="form-control" id="ufnasc" name="ufnasc" data-tipo="ufnasc" required>
                                <option value=""></option>
                                <option value='AC'>AC</option><option value='AL'>AL</option><option value='AM'>AM</option><option value='AP'>AP</option><option value='BA'>BA</option><option value='CE'>CE</option><option value='DF'>DF</option><option value='ES'>ES</option><option value='GO'>GO</option><option value='MA'>MA</option><option value='MG'>MG</option><option value='MS'>MS</option><option value='MT'>MT</option><option value='PA'>PA</option><option value='PB'>PB</option><option value='PE'>PE</option><option value='PI'>PI</option><option value='PR'>PR</option><option value='RJ'>RJ</option><option value='RN'>RN</option><option value='RO'>RO</option><option value='RR'>RR</option><option value='RS'>RS</option><option value='SC'>SC</option><option value='SE'>SE</option><option value='SP'>SP</option><option value='TO'>TO</option>                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="cidadenasc">MUNICÍPIO DE NASCIMENTO <span class="obg">(OBRIGATÓRIO)</span></label>
                            <select type="text" id="cidadenasc" name="cidadenasc" class="form-control" data-tipo="cidadenasc" required>
                                <option value=""></option>
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="certidaodataemissao">DATA DE EMISSÃO DA CERTIDÃO <span class="obg">(OBRIGATÓRIO)</span></label>
                            <input class="form-control" type="date" id="certidaodataemissao" name="certidaodataemissao" data-tipo="certidaodataemissao" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="num_cert_nova">NÚMERO DA CERTIDÃO <span class="obg">(OBRIGATÓRIO)</span></label>
                            <input type="text" id="num_cert_nova" name="num_cert_nova" class="form-control" maxlength="32" data-tipo="num_cert_nova" required>
                        </div>
                    </div>
                    <h3 class="separador text-center">CONTATOS</h3>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="telefone">TELEFONE <span class="obg">(OBRIGATÓRIO)</span></label>
                            <input type="tel" id="telefone" name="telefone" class="form-control" data-tipo="telefone" required>
                        </div>

                        <div class="form-group col-md-6">
                            <label for="celular">CELULAR</label>
                            <input type="tel" id="celular" name="celular" class="form-control">
                        </div>
                    </div>

                    <h3 class="separador text-center">ENDEREÇO</h3>
                    <div class="row">
                        <div class="col-md-3 form-group">
                            <label for="cep">CEP <span class="obg">(OBRIGATÓRIO)</span></label>
                            <input type="text" id="cep" name="cep" class="form-control" maxlength="9" data-tipo="cep" pattern="[\d]{5}-?[\d]{3}" required>
                        </div>
                        <div class="col-md-3 form-group">
                            <label for="cidadeuf">ESTADO <span class="obg">(OBRIGATÓRIO)</span></label>
                            <select id="cidadeuf" name="cidadeuf" class="form-control" data-tipo="cidadeuf" required>
                                <option value=""></option>
                                <option value='AC'>AC</option><option value='AL'>AL</option><option value='AM'>AM</option><option value='AP'>AP</option><option value='BA'>BA</option><option value='CE'>CE</option><option value='DF'>DF</option><option value='ES'>ES</option><option value='GO'>GO</option><option value='MA'>MA</option><option value='MG'>MG</option><option value='MS'>MS</option><option value='MT'>MT</option><option value='PA'>PA</option><option value='PB'>PB</option><option value='PE'>PE</option><option value='PI'>PI</option><option value='PR'>PR</option><option value='RJ'>RJ</option><option value='RN'>RN</option><option value='RO'>RO</option><option value='RR'>RR</option><option value='RS'>RS</option><option value='SC'>SC</option><option value='SE'>SE</option><option value='SP'>SP</option><option value='TO'>TO</option>                            </select>
                        </div>
                        <div class="col-md-3 form-group">
                            <label for="cidade">CIDADE <span class="obg">(OBRIGATÓRIO)</span></label>
                            <select type=text id="cidade" name="cidade" class="form-control" data-tipo="cidade" required>
                                <option value=""></option>
                            </select>
                        </div>
                        <div class="col-md-3 form-group">
                            <label for="zona">ZONA</label>
                            <select id="zona" name="zona" class="form-control">
                                <option></option>
                                <option value=1> URBANA </option>
                                <option value=2> RURAL </option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-3">
                            <label for="logradouro"> LOGRADOURO <span class="obg">(OBRIGATÓRIO)</span></label>
                            <input type=text id="logradouro" name="logradouro" class="form-control" data-tipo="logradouro" required>
                        </div>

                        <div class="form-group col-md-3">
                            <label for="bairro"> BAIRRO <span class="obg">(OBRIGATÓRIO)</span></label>
                            <input type=text id="bairro" name="bairro" class="form-control" data-tipo="bairro" required>
                        </div>

                        <div class="form-group col-md-3">
                            <label for="numcasa"> NÚMERO <span class="obg">(OBRIGATÓRIO)</span></label>
                            <input type=text id="numcasa" name="numcasa" class="form-control" data-tipo="numcasa" required>
                        </div>

                        <div class="form-group col-md-3">
                            <label for="complemento"> COMPLEMENTO </label>
                            <input type=text id="complemento" name="complemento" class="form-control">
                        </div>

                    </div>
                    <h3 class="separador text-center">DADOS DA INSCRIÇÃO</h3>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="idescola">ESCOLA <span class="obg">(OBRIGATÓRIO)</span></label>
                            <select name="idescola" id="idescola" data-tipo="escola" class="form-control" required>
                                <option></option>
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="periodo" id='periodoLabel'>PERÍODO </label>
                            <select name="periodo" id="periodo" data-tipo="periodo" class="form-control" required>
                                <option value="INTEGRAL" selected>INTEGRAL</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="idescola">CRITÉRIOS</label>
                            
        <div class='form-check'>
            <input class='form-check-input' type='checkbox' value='25' name='checkCriterios[]' id='25'>
            <label class='form-check-label' for='25'>
                6 - CRIANÇA COM DEFICIÊNCIA 
            </label>
        </div>
    
        <div class='form-check'>
            <input class='form-check-input' type='checkbox' value='26' name='checkCriterios[]' id='26'>
            <label class='form-check-label' for='26'>
                5 - ENCAMINHAMENTO MINISTÉRIO PÚBLICO/PODER JUDICIÁRIO 
            </label>
        </div>
    
        <div class='form-check'>
            <input class='form-check-input' type='checkbox' value='27' name='checkCriterios[]' id='27'>
            <label class='form-check-label' for='27'>
                4 - ENCAMINHAMENTO REDE SOCIOASSISTENCIAL (CONSELHO TUTELAR/CRAS/CREAS) 
            </label>
        </div>
    
        <div class='form-check'>
            <input class='form-check-input' type='checkbox' value='29' name='checkCriterios[]' id='29'>
            <label class='form-check-label' for='29'>
                1 - MÃE/PAI SOLO 
            </label>
        </div>
    
        <div class='form-check'>
            <input class='form-check-input' type='checkbox' value='30' name='checkCriterios[]' id='30'>
            <label class='form-check-label' for='30'>
                1 - FAMÍLIA TRABALHADORA (comprovante do responsável) 
            </label>
        </div>
    
        <div class='form-check'>
            <input class='form-check-input' type='checkbox' value='86' name='checkCriterios[]' id='86'>
            <label class='form-check-label' for='86'>
                1 - IRMÃO ESTUDANTE NA UNIDADE (MEDIANTE DECLARAÇÃO DE MATRÍCULA DO IRMÃO) 
            </label>
        </div>
    
        <div class='form-check'>
            <input class='form-check-input' type='checkbox' value='87' name='checkCriterios[]' id='87'>
            <label class='form-check-label' for='87'>
                1 - ENDEREÇO ATÉ 1.000 METROS DE DISTÂNCIA DA UNIDADE (COMPROVANTE NOMINAL OU CONTRATO DE ALUGUEL) 
            </label>
        </div>
                            </div>
                        <div class="form-group col-md-6" id="addAnexo"></div>
                    </div>
                    <h3 class="separador text-center">OUTROS ANEXOS</h3>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="anexoCertidao">ANEXO DA CERTIDÃO DE NASCIMENTO <span class="obg">(OBRIGATÓRIO)</span></label>
                            <input type="file" class="form-control" name="anexoCertidao" id="anexoCertidao" data-tipo="anexoCertidao" accept="image/jpeg, .pdf" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="anexoEndereco">ANEXO DO COMPROVANTE DE ENDEREÇO EM NOME DOS RESPONSÁVEIS <span class="obg">(OBRIGATÓRIO)</span></label>
                            <input type="file" class="form-control" name="anexoEndereco" id="anexoEndereco" data-tipo="anexoEndereco" accept="image/jpeg, .pdf" required>
                        </div>

                    </div>
                    <div class="alerta">
                        <p>Assumo inteira responsabilidade pelas informações prestadas e autenticidade das cópias dos documentos anexados para INSCRIÇÃO.</p>
                        <p>Declaro estar de inteira responsabilidade pelas informações prestadas, estando ciente de que a falsidade nas informações implicará nas penalidades cabíveis.</p>
                    </div>
                    <div class="form-group">
                        <input type="checkbox" id="confirmacao" data-tipo="confirmacao" required>
                        <label for="confirmacao">CONFIRMO OS DADOS</label>
                    </div>
                    <div id="respostaSalvar"></div>
                    <button type="submit" id="btnSubmit" class="btn btn-block text-white">INSCREVER</button>

                </form>
            </div>
        </div>
    </div>
</body>
<script>
    $("input[name*='checkCriterios']").each(function() {
        $(this).click(function() {
            let id = this.id;
            let nomeLabel = $(this).parent().children("label").text();
            let peso = nomeLabel.trim().substr(0, 1);

            if ($(this).filter(':checked').val()) {
                $("#addAnexo").append(`
                        <div class='form-group' id='form-${id}'>
                            <label for="anexoCriterio-${id}">ANEXO COMPROVANTE - ${nomeLabel}</label>
                            <input type="file" class="form-control" name="anexoCriterio${id}" id="anexoCriterio-${id}" accept="image/jpeg, .pdf"  required>
                        </div>
                    `);
            } else {
                $("#form-" + id).remove();
            }
        });
    });

    $("#ufnasc").change(function() {
        const UF = $(this).val();
        let retorno = procurarCidades(UF, $("#cidadenasc"), null);
    });
    $("#cidadeuf").change(function() {
        const UF = $(this).val();
        let retorno = procurarCidades(UF, $("#cidade"), null);
    });
    function verificarNascimento(var_nascimento) {
        $.ajax({
            type: "POST",
            url: "verificarNascimento.php",
            data: {
                nascimento: var_nascimento,
                ano: $("#ano").val()
            },
            success: (resp) => {
                console.log(resp);
                if(resp <5 ){
                    $("#campoAmamentada").html(` 
                                                    <div class="row">
                                                        <div class="col-md-6 form-group">
                                                            <label for="racacor">A criança é amamentada ?</label>
                                                                <select id="amamenta" name="amamenta" class="form-control">
                                                                    <option> </option>
                                                                    <option value="S"> SIM </option>
                                                                    <option value="N"> NÃO </option>
                                                                </select>
                                                        </div>
                                                    </div>
                                            `);
                }else{
                    $("#campoAmamentada").html(``);
                }

            },
        });
    }
    $("#formInscricao").submit(function(event) {
        event.preventDefault();
        event.stopImmediatePropagation();
        let dadosForm = new FormData(this);
        $("#btnSubmit").hide();
        $.ajax({
            type: "POST",
            url: "salvarDadosInscricao.php",
            data: dadosForm,
            processData: false,
            contentType: false,
            cache: false,
            beforeSend: () => {
                Swal.fire({
                    title: 'AGUARDE!',
                    allowEscapeKey: false,
                    allowOutsideClick: false
                })
                Swal.showLoading();
            },
            success: (info) => {
                let resposta = JSON.parse(info);
                if (resposta.cod === 1) {
                    $("#btnSubmit").show();
                    Swal.fire({
                        icon: 'error',
                        title: 'INSCRIÇÃO CANCELADA!',
                        text: 'A ESCOLA ESCOLHIDA NÃO CONTÉM UMA TURMA E PERÍODO PARA A DATA BASE DO INSCRITO!'
                    })
                    return;
                }

                Swal.fire({
                    icon: 'success',
                    title: 'INSCRIÇÃO REALIZADA COM SUCESSO!',
                    text: 'SUA INSCRIÇÃO SERÁ VALIDADADA PELA NOSSA SECRETARIA E ENTRAREMOS EM CONTATO!'
                })
                $(".card-body").html(`
                    <h3 class='separador text-center'>ANOTE SEU NÚMERO DE PROTOCOLO: <b>${resposta.idInscricao}</b></h3>
                    <a href='../smerp2010/documentos_escolares/lista.php?tipo=170720201200&idescola=1047&ano=2020&i=${resposta.idInscricao}' 
                    target='_blank' class='btn text-white btn-block'>
                        IMPRIMIR COMPROVANTE DE INSCRIÇÃO
                    </a>
                    <a href='index.php' class='btn text-white btn-block'>
                        VOLTAR PARA PÁGINA INICIAL
                    </a>
                `);
            },
            error: (response) => {
                console.log(response);
                Swal.fire({
                    icon: 'error',
                    title: 'ERRO DE CONEXÃO!',
                    text: 'TENTE NOVAMENTE MAIS TARDE'
                })
            }
        });
    });
</script>

</html>