@extends('layouts.app')

@section('conteudo')
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="js/cep.js"></script>
<!-- Hero -->
<div class="bg-image" style="background-image: url('');">
    <div class="bg-black-50">
        <div class="content content-full">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="flex-grow-1 fs-2 text-white my-2">
                    <i class="fa fa-boxes text-white-50 me-1"></i> Beneficiários
                </h1>
                <a class="btn btn-primary my-2" href="/estudantes">
                    <i class="fa fa-fw fa-list"></i>
                    <span class="d-none d-sm-inline ms-1">Listar Beneficiários</span>
                </a>
            </div>
        </div>
    </div>
</div>
<!-- END Hero -->

<div class="content">
    <!-- Elements -->
    <div class="block block-rounded">
        <div class="block-header block-header-default">
            <h3 class="block-title">Editar Beneficiário</h3>
        </div>
        <div class="block-content">

            <div class="row">

                <div class="col-lg-12 space-y-6">

                    <!-- Form Inline - Alternative Style -->
                    <form action="/actualizar_estudante/{{$estudante->id}}" method="POST" enctype="multipart/form-data">
                        <!-- <div class="row row-cols-lg-auto g-4 align-items-center"> -->
                        <div class="row  g-4 align-items-center">
                            @csrf
                            <div class="col-9">
                                <label class="form-label" for="nome">Nome*</label>
                                <input type="text" class="form-control" id="nome" name="nome" placeholder="Nome" required>
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="data_nascimento">Data Nascimento*</label>
                                <input type="date" class="form-control" id="data_nascimento" name="data_nascimento" placeholder="data nascimento" required>
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="rm">RM</label>
                                <input type="text" class="form-control" id="rm" name="rm" placeholder="rm" disabled>
                            </div>
                            <div class="col-3" style="margin-top: 50px;">
                                <input class="form-check-input" type="checkbox" id="gerar_rm" name="gerar_rm" checked>
                                <label class="form-check-label" for="gerar_rm">Gerar RM</label>
                            </div>

                            <!-- <div class="col-3">
                <label class="form-label" for="estado">Estado</label>
                <select class="form-select estado" id="estado" name="estado_nascimento">
                  <option value="">Selecione o estado</option>
                </select>
              </div>

              <div class="col-3">
                <label class="form-label" for="cidade">Cidade</label>
                <select class="form-select cidade" id="cidade" name="cidade_nascimento">
                  <option value="">Selecione a cidade</option>
                </select>
              </div> -->


                            <div class="col-3">
                                <label class="form-label" for="naturalidade">Naturalidade</label>
                                <input type="text" class="form-control" id="naturalidade" name="naturalidade" placeholder="naturalidade">
                            </div>
                            <!-- <div class="col-4">
                <label class="form-label" for="foto">RA</label>
                <input type="text" class="form-control" id="nome" name="ra" placeholder="ra">
              </div> -->
                            <div class="col-3">
                                <label class="form-label" for="sexo">Sexo</label>
                                <select class="form-select" id="sexo" name="sexo">
                                    <option value="1">Prefiro não dizer </option>
                                    <option value="2">Feminino</option>
                                    <option value="3">Masculino</option>
                                </select>
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="rg">RG*</label>
                                <input type="text" class="form-control" id="rg" name="rg" placeholder="rg" required>
                            </div>


                            <div class="col-3">
                                <label class="form-label" for="estado_emissor">Estado Emissor*</label>
                                <select class="form-select estado" id="estado" name="estado_emissor" required>
                                    <option value="">Selecione o estado</option>
                                </select>
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="orgao_emissor">Orgão Emissor*</label>
                                <input type="text" class="form-control" id="orgao_emissor" name="orgao_emissor" placeholder="orgao_emissor" required>
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="data_expedicao">Data de Expedição*</label>
                                <input type="date" class="form-control" id="data_expedicao" name="data_expedicao" placeholder="data_expedicao" required>
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="passe_escolar">Passe Escolar</label>
                                <!-- <input type="text" class="form-control" id="nome" name="passe_escolar" placeholder="passe_escolar"> -->
                                <select class="form-select" id="passe_escolar" name="passe_escolar">
                                    <option>Sim</option>
                                    <option>Não</option>
                                </select>
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="cpf">CPF</label>
                                <input type="text" class="form-control" id="cpf" name="cpf" placeholder="cpf">
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="telefone_residencial">Telefone Residencial</label>
                                <input type="tel" class="form-control" id="telefone_residencial" name="telefone_residencial" placeholder="(00)00000-0000" maxlength="14">
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="telefone_celular">Telefone Celular*</label>
                                <input type="tel" class="form-control" id="telefone_celular" name="telefone_celular" placeholder="(00)00000-0000" maxlength="15" required>
                            </div>
                            <div class="col-6">
                                <label class="form-label" for="email">Email</label>
                                <input type="email" class="form-control" id="email" name="email" placeholder="email">
                            </div>

                            <div class="col-2">
                                <label class="form-label" for="cor_raca">Cor/Raça</label>
                                <select class="form-select" id="cor_raca" name="cor_raca">
                                    <option>Branco</option>
                                    <option>Negro</option>
                                    <option>Pardo</option>
                                    <option>Amarelo</option>
                                </select>
                            </div>
                            <div class="col-2">
                                <label class="form-label" for="possui_irmaos">Possui Irmãos</label>
                                <select class="form-select" id="possui_irmaos" name="possui_irmaos">
                                    <option>Sim</option>
                                    <option>Não</option>
                                </select>
                            </div>
                            <div class="col-2">
                                <label class="form-label" for="ex_beneficiario">Ex-Beneficiário*</label>
                                <select class="form-select" id="ex_beneficiario" name="ex_beneficiario" required>
                                    <option>Sim</option>
                                    <option>Não</option>
                                </select>
                            </div>
                            <hr>
                            <h3>Endereço</h3>
                            <div class="col-3">
                                <label class="form-label" for="endereco_cep">CEP*</label>
                                <input type="text" class="form-control" id="nome" name="endereco_cep" placeholder="cep" required>
                            </div>
                            <div class="col-7">
                                <label class="form-label" for="endereco">Endereço*</label>
                                <input type="text" class="form-control" id="nome" name="endereco" placeholder="endereco" required>
                            </div>
                            <div class="col-2">
                                <label class="form-label" for="numero_endereco">Numero*</label>
                                <input type="text" class="form-control" id="nome" name="numero_endereco" placeholder="numero" required>
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="complemento_endereco">complemento</label>
                                <input type="text" class="form-control" id="nome" name="complemento_endereco" placeholder="complemento">
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="bairro_endereco">Bairro*</label>
                                <input type="text" class="form-control" id="nome" name="bairro_endereco" placeholder="bairro" required>
                            </div>

                            <div class="col-3">
                                <label class="form-label" for="estado_endereco">Estado*</label>
                                <input type="text" class="form-control " id="nome" name="estado_endereco" placeholder="estado" required>
                                <!-- <select class="form-select estado" id="estado" name="estado_endereco">
                  <option value="">Selecione o estado</option>
                </select> -->
                            </div>

                            <div class="col-3">
                                <label class="form-label" for="cidade_endereco">Cidade*</label>
                                <input type="text" class="form-control " id="nome" name="cidade_endereco" placeholder="cidade" required>
                                <!-- <select class="form-select cidade" id="cidade" name="cidade_endereco">
                  <option value="">Selecione a cidade</option>
                </select> -->
                            </div>

                            <hr>
                            <h3>Certidao Nascimento </h3>
                            <div class="col-4">
                                <label class="form-label" for="certidao_nascimento_numero">Numero</label>
                                <input type="text" class="form-control" id="certidao_nascimento_numero" name="certidao_nascimento_numero" placeholder="numero">
                            </div>
                            <div class="col-4">
                                <label class="form-label" for="livro_certidao">Livro</label>
                                <input type="text" class="form-control" id="livro_certidao" name="livro_certidao" placeholder="livro">
                            </div>
                            <div class="col-4">
                                <label class="form-label" for="folha_certidao">Folha</label>
                                <input type="text" class="form-control" id="folha_certidao" name="folha_certidao" placeholder="folha">
                            </div>
                            <div class="col-4">
                                <label class="form-label" for="cartorio_certidao">Cartório</label>
                                <input type="text" class="form-control" id="cartorio_certidao" name="cartorio_certidao" placeholder="cartorio">
                            </div>
                            <div class="col-4">
                                <label class="form-label" for="matricula_certidao">Matricula</label>
                                <input type="text" class="form-control" id="matricula_certidao" name="matricula_certidao" placeholder="matricula">
                            </div>
                            <!-- <div class="col-5">
                <label class="form-label" for="foto">Numero de Eleitor</label>
                <input type="text" class="form-control" id="nome" name="numero_eleitor" placeholder="numero_eleitor">
              </div>
              <div class="col-2">
                <label class="form-label" for="foto">Zona</label>
                <input type="text" class="form-control" id="nome" name="zona_eleitor" placeholder="zona_eleitor">
              </div>
              <div class="col-2">
                <label class="form-label" for="foto">Seção</label>
                <input type="text" class="form-control" id="nome" name="secao_eleitor" placeholder="secao_eleitor">
              </div>
              <div class="col-3">
                <label class="form-label" for="foto">Emissão</label>
                <input type="date" class="form-control" id="nome" name="emissao_eleitor" placeholder="emissao_eleitor">
              </div>


              <div class="col-4">
                <label class="form-label" for="estado">Estado</label>
                <select class="form-select estado" id="estado" name="estado_emissao">
                  <option value="">Selecione o estado</option>
                </select>
              </div>

              <div class="col-4">
                <label class="form-label" for="cidade">Cidade</label>
                <select class="form-select cidade" id="cidade" name="cidade_emissao">
                  <option value="">Selecione a cidade</option>
                </select>
              </div> -->

                            <div class="col-4">
                                <label class="form-label" for="portaria_certidao">Portaria</label>
                                <select class="form-select" id="portaria_certidao" name="portaria_certidao">
                                    <option selected>Open this select menu</option>
                                    <option value="1">portaria #1</option>
                                    <option value="2">portaria #2</option>
                                    <option value="3">portaria #3</option>
                                    <option value="4">portaria #4</option>
                                    <option value="5">portaria #5</option>
                                    <option value="6">portaria #6</option>
                                    <option value="7">portaria #7</option>
                                    <option value="8">portaria #8</option>
                                    <option value="9">portaria #9</option>
                                    <option value="10">portaria #10</option>
                                </select>
                            </div>

                            <hr>
                            <h4 style="margin-bottom: -20px;">Pai</h4>
                            <div class="col-6">
                                <label class="form-label" for="pai">Nome</label>
                                <input type="text" class="form-control" id="pai" name="pai" placeholder="pai">
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="cpf_pai">CPF</label>
                                <input type="text" class="form-control" id="cpf_pai" name="cpf_pai" placeholder="000.000.000-00">
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="telefone_pai">Telefone</label>
                                <input type="tel" class="form-control" id="telefone_pai" name="telefone_pai" placeholder="(00)00000-0000" maxlength="15">
                            </div>
                            <h4 style="margin-bottom: -20px;">Mãe</h4>
                            <div class="col-6">
                                <label class="form-label" for="mae">Nome</label>
                                <input type="text" class="form-control" id="mae" name="mae" placeholder="mae">
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="cpf_mae">CPF</label>
                                <input type="text" class="form-control" id="cpf_mae" name="cpf_mae" placeholder="000.000.000-00">
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="telefone_mae">Telefone</label>
                                <input type="tel" class="form-control" id="telefone_mae" name="telefone_mae" placeholder="(00)00000-0000" maxlength="15">
                            </div>
                            <h4 style="margin-bottom: -20px;">Responsável Legal</h4>
                            <div class="col-6">
                                <label class="form-label" for="nome_responsavel_para_tirar">Nome*</label>
                                <input type="text" class="form-control" id="nome_responsavel_para_tirar" required name="nome_responsavel_para_tirar" placeholder="responsável">
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="cpf_responsavel_para_tirar">CPF*</label>
                                <input type="text" class="form-control" id="cpf_responsavel_para_tirar" required name="cpf_responsavel_para_tirar" placeholder="000.000.000-00">
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="telefone_responsavel_para_tirar">Telefone*</label>
                                <input type="tel" class="form-control" id="telefone_responsavel_para_tirar" required name="telefone_responsavel_para_tirar" placeholder="(00)00000-0000" maxlength="15">
                            </div>

                            <hr>
                            <h3>Informações complementares</h3>

                            <div class="col-3">
                                <label class="form-label" for="meio_transporte">Meio de transporte*</label>
                                <select class="form-select" name="meio_transporte" id="meio_transporte" required>
                                    <option value="1">A pé e sozinho</option>
                                    <option value="2">De ônibus e sozinho</option>
                                    <option value="3">Alguém sempre vem trazê-lo</option>
                                    <option value="4">Transporte escolar</option>
                                </select>
                            </div>

                            <div class="col-9">
                                <label class="form-label" for="aluno_autorizado_sair">O aluno(a) está autorizado(a) a sair da escola sozinho(a)?*</label>
                                <select class="form-select" name="aluno_autorizado_sair" id="aluno_autorizado_sair" required>
                                    <option value="1">Sim</option>
                                    <option value="2">Não</option>
                                </select>
                            </div>

                            <div class="col-8">
                                <label>Quais dias?</label>
                                </br>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" name="quais_dias" type="checkbox" id="sair_sozinho_dias_2" value="2">
                                    <label class="form-check-label" for="sair_sozinho_dias_2">2ªfeira</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" name="quais_dias" type="checkbox" id="sair_sozinho_dias_3" value="3">
                                    <label class="form-check-label" for="sair_sozinho_dias_3">3ª feira</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" name="quais_dias" type="checkbox" id="sair_sozinho_dias_4" value="4">
                                    <label class="form-check-label" for="sair_sozinho_dias_4">4ª feira</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" name="quais_dias" type="checkbox" id="sair_sozinho_dias_5" value="5">
                                    <label class="form-check-label" for="sair_sozinho_dias_5">5ª feira</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" name="quais_dias" type="checkbox" id="sair_sozinho_dias_6" value="6">
                                    <label class="form-check-label" for="sair_sozinho_dias_6">6ª feira</label>
                                </div>
                            </div>

                            <div class="col-4">
                                <label class="form-label" for="autorizacao_uso_imagem">Autorização de uso de imagem*</label>
                                <select class="form-select" name="autorizacao_uso_imagem" id="autorizacao_uso_imagem" required>
                                    <option value="1">Sim</option>
                                    <option value="2">Não</option>
                                </select>
                            </div>

                            <h4 style="margin-bottom: -20px;">Responsável que irá retirar o aluno</h4>
                            <div class="col-12">
                                <a class="btn btn-primary my-2" data-bs-toggle="modal" data-bs-target="#addResponpavelRetiradaModal">
                                    <i class="fa fa-fw fa-plus"></i>
                                    <span class="d-none d-sm-inline ms-1"></span>
                                </a>
                            </div>
                            <div class="col-6">
                                <label class="form-label" for="nome_responsavel_para_tirar">Nome</label>
                                <input type="text" class="form-control" id="nome" name="nome_responsavel_para_tirar" placeholder="responsável">
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="cpf_responsavel_para_tirar">CPF</label>
                                <input type="text" class="form-control" id="nome" name="cpf_responsavel_para_tirar" placeholder="000.000.000-00">
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="telefone_responsavel_para_tirar">Telefone</label>
                                <input type="tel" class="form-control" id="nome" name="telefone_responsavel_para_tirar" placeholder="(00)00000-0000" maxlength="14">
                            </div>


                            <hr>

                            <div class="col-12">
                                <label class="form-label" for="observacoes_responsavel_para_tirar">Observações</label>
                                <input type="text" class="form-control" id="observacoes_responsavel_para_tirar" name="observacoes_responsavel_para_tirar" placeholder="observacoes">
                            </div>

                            <div class="col-12">
                                <label class="form-label" for="foto">Upload Foto*</label>
                                <input type="file" class="form-control" id="nome" name="foto" placeholder="foto" required>
                            </div>
                        </div>
                        <hr>
                        <center> <a type="submit"> <button type="submit" class="btn btn-primary m-1">
                                    <i class="fa fa-fw fa-user-plus opacity-50 me-1"></i> Salvar Alterações
                                </button> </a> </center>

                    </form>
                    <!-- END Form Inline - Alternative Style -->
                </div>
            </div>
            <!-- END Inline Layout -->



        </div>
    </div>
    <!-- END Elements -->
</div>
<script>
    //busca cep
    $(document).ready(function() {
        $("input[name=endereco_cep]").blur(function() {
            var cep = $(this).val().replace(/[^0-9]/, '');
            if (cep) {
                var url = 'https://viacep.com.br/ws/' + cep + '/json/';
                $.ajax({
                    url: url,
                    dataType: 'jsonp',
                    crossDomain: true,
                    contentType: "application/json",
                    success: function(json) {
                        if (json.logradouro) {
                            $("input[name=endereco]").val(json.logradouro);
                            $("input[name=bairro_endereco]").val(json.bairro);
                            $("input[name=cidade_endereco]").val(json.localidade);
                            $("input[name=estado_endereco]").val(json.uf);
                        }
                    }
                });
            }
        });
    });


    //telefone
    function mascara(o, f) {
        v_obj = o
        v_fun = f
        setTimeout("execmascara()", 1)
    }

    function execmascara() {
        v_obj.value = v_fun(v_obj.value)
    }

    function mtel(v) {
        v = v.replace(/\D/g, ""); //Remove tudo o que não é dígito
        v = v.replace(/^(\d{2})(\d)/g, "($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos
        v = v.replace(/(\d)(\d{4})$/, "$1-$2"); //Coloca hífen entre o quarto e o quinto dígitos
        return v;
    }

    function id(el) {
        return document.getElementById(el);
    }
    window.onload = function() {
        id('telefone_residencial').onkeyup = function() {
            mascara(this, mtel);
        }
        id('telefone_celular').onkeyup = function() {
            mascara(this, mtel);
        }
        id('telefone_pai').onkeyup = function() {
            mascara(this, mtel);
        }
        id('telefone_mae').onkeyup = function() {
            mascara(this, mtel);
        }
        id('telefone_responsavel_para_legal').onkeyup = function() {
            mascara(this, mtel);
        }
        id('telefone_responsavel_para_tirar').onkeyup = function() {
            mascara(this, mtel);
        }
    }
</script>
@endsection