@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(''); margin-top: 70px;">
  <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> Responsáveis
        </h1>
        @can('pode_visualizar_responsavel')
        <a class="btn btn-primary my-2" href="/responsaveis">
          <i class="fa fa-fw fa-list"></i>
          <span class="d-none d-sm-inline ms-1">Listar Responsáveis</span>
        </a>
        @endcan
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->
{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_responsavel')
<div class="content">
  <!-- Elements -->
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">Registrar Novo Responsável</h3>
    </div>
    <div class="block-content">

      <div class="row">

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

          <!-- Form Inline - Alternative Style -->
          <form action="/salvar_responsavel" 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-2">
                <label class="form-label" for="foto">Foto</label>
                <input type="file" class="form-control" id="foto" name="foto" >
              </div> -->
              <div class="col-9">
                <label class="form-label" for="nome_completo">Nome*</label>
                <input type="text" class="form-control" id="nome" name="nome_completo" placeholder="nome" required>
              </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="1">Masculino</option>
                </select>
              </div>
              <div class="col-4">
                <label class="form-label" for="data_nascimento">Data de Nascimento*</label>
                <input type="date" class="form-control" id="data_nascimento" name="data_nascimento" placeholder="data_nascimento" required>
              </div>
              <div class="col-4">
                <label class="form-label" for="nacionalidade">Nacionalidade</label>
                <input type="text" class="form-control" id="nacionalidade" name="nacionalidade" placeholder="nacionalidade">
              </div>
              <div class="col-4">
                <label class="form-label" for="estado_civil">Estado Civil</label>
                <!-- <input type="text" class="form-control" id="nome" name="estado_civil" placeholder="estado_civil" > -->
                <select class="form-select" id="estado_civil" name="estado_civil">
                  <option value="1">Solteiro</option>
                  <option value="2">Casado</option>
                  <option value="3">Divorciado</option>
                  <option value="4">Viúvo</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" required>
              </div>
              <div class="col-3">
                <label class="form-label" for="data_expedicao">Data de Expedicao</label>
                <input type="date" class="form-control" id="data_expedicao" name="data_expedicao">
              </div>
              <div class="col-3">
                <label class="form-label" for="estado_emissor">Estado Emissor</label>
                <input type="text" class="form-control" id="estado_emissor" name="estado_emissor">
                <!-- <select class="form-select estado" id="estado_emissor" name="estado_emissor">
                  <option value="">Selecione o estado</option>
                </select> -->
              </div>
              <div class="col-3">
                <label class="form-label" for="orgao_emissor">Orgao Emissor</label>
                <input type="text" class="form-control" id="orgao_emissor" name="orgao_emissor">
              </div>
              <div class="col-4">
                <label class="form-label" for="cpf_cnpj">CPF</label>
                <input type="text" class="form-control" id="cpf" name="cpf_cnpj" maxlength="14">
              </div>
              <div class="col-8">
                <label class="form-label" for="email">Email</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="email">
              </div>
              <div class="col-4">
                <label class="form-label" for="telefone_residencial">Telefone Residencial</label>
                <input type="tel" class="form-control" id="telefone_residencial" name="telefone_residencial" placeholder="(00)0000-0000" maxlength="14">
              </div>
              <div class="col-4">
                <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">
              </div>
              <div class="col-4">
                <label class="form-label" for="escolaridade">Escolaridade</label>
                <input type="text" class="form-control" id="escolaridade" name="escolaridade" placeholder="escolaridade">
              </div>
              <div class="col-4">
                <label class="form-label" for="profissao">Profissao</label>
                <input type="text" class="form-control" id="profissao" name="profissao" placeholder="profissao">
              </div>
              <div class="col-4">
                <label class="form-label" for="local_trabalho">Local de Trabalho</label>
                <input type="text" class="form-control" id="local_trabalho" name="local_trabalho" placeholder="local trabalho">
              </div>
              <div class="col-4">
                <label class="form-label" for="cargo">Cargo</label>
                <input type="text" class="form-control" id="cargo" name="cargo" placeholder="cargo">
              </div>
              <div class="col-3">
                <label class="form-label" for="grau_parentesco">Grau de Parentesco</label>
                <input type="text" class="form-control" id="grau_parentesco" name="grau_parentesco" placeholder="grau parentesco" >
              </div>
              <div class="col-2">
                <label class="form-label" for="cep">CEP*</label>
                <input type="text" class="form-control" id="cep" name="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="endereco" name="endereco" placeholder="endereco" required>
              </div>
              <div class="col-2">
                <label class="form-label" for="numero">Numero*</label>
                <input type="text" class="form-control" id="numero" name="numero" placeholder="nº" required>
              </div>
              <div class="col-2">
                <label class="form-label" for="complemento">Complemento</label>
                <input type="text" class="form-control" id="complemento" name="complemento" placeholder="complemento">
              </div>
              <div class="col-2">
                <label class="form-label" for="bairro">Bairro*</label>
                <input type="text" class="form-control" id="bairro" name="bairro" placeholder="bairro" required>
              </div>
              <div class="col-3">
                <label class="form-label" for="estado">estado*</label>
                <input type="text" class="form-control" id="estado" name="estado" placeholder="estado" required>
              </div>
              <div class="col-3">
                <label class="form-label" for="cidade">cidade*</label>
                <input type="text" class="form-control" id="cidade" name="cidade" placeholder="cidade" required>
              </div>
              <div class="col-7">
                <label class="form-label" for="email_profissional">Email Profissional</label>
                <input type="email" class="form-control" id="email_profissional" name="email_profissional" placeholder="email profissional">
              </div>
              <div class="col-3">
                <label class="form-label" for="telefone_comercial">Telefone Comercial</label>
                <input type="tel" class="form-control" id="telefone_comercial" name="telefone_comercial" placeholder="(00)0000-0000" maxlength="14">
              </div>
              <div class="col-2">
                <label class="form-label" for="ramal">Ramal</label>
                <input type="text" class="form-control" id="ramal" name="ramal" placeholder="ramal">
              </div>
              <!-- <div class="col-3">
                <label class="form-label" for="religiao">Religiao</label>
                <input type="text" class="form-control" id="religiao" name="religiao" placeholder="religiao" >
              </div> -->
              <div class="col-6">
                <label class="form-label" for="como_conheceu">Como Conheceu</label>
                <input type="text" class="form-control" id="como_conheceu" name="como_conheceu">
              </div>
              <div class="col-3">
                <label class="form-label" for="telefone_recado">Telefone Recado</label>
                <input type="tel" class="form-control" id="telefone_recado" name="telefone_recado" placeholder="(00)0000-0000" maxlength="14">
              </div>
              <!-- <div class="col-3">
                <label class="form-label" for="">Emitir Nota Fiscal</label>
                <input type="text" class="form-control" id="nome" name="emitir_nota_fiscal" placeholder="emitir_nota_fiscal" >
              </div> -->
              <div class="col-3">
                <label class="form-label" for="estado_nascimento">Estado de Nascimento</label>
                <!-- <input type="text" class="form-control" id="nome" name="estado_nascimento" placeholder="estado_nascimento" > -->
                <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_nascimento">Cidade de Nascimento</label>
                <!-- <input type="text" class="form-control" id="nome" name="cidade_nascimento" placeholder="cidade_nascimento" > -->
                <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="">Ativo</label>
                <input type="text" class="form-control" id="nome" name="ativo" placeholder="ativo" >
              </div>
              <div class="col-4">
                <label class="form-label" for="">Banco</label>
                <input type="text" class="form-control" id="nome" name="banco" placeholder="banco" >
              </div>
              <div class="col-4">
                <label class="form-label" for="">Grau Referente Aluno</label>
                <input type="text" class="form-control" id="nome" name="grau_referente_aluno" placeholder="grau_referente_aluno" >
              </div> -->
              <div class="col-3">
                <label class="form-label" for="pode_tirar_aluno">Pode Tirar Aluno</label>
                <!-- <input type="text" class="form-control" id="nome" name="pode_tirar_aluno" placeholder="pode_tirar_aluno" > -->
                <select class="form-select" id="pode_tirar_aluno" name="pode_tirar_aluno">
                  <option value="1">Sim</option>
                  <option value="2">Não</option>
                </select>
              </div>
              <div class="mb-4">
                <label class="form-label" for="outras_informacoes">Outras Informações</label>
                <textarea class="form-control" id="outras_informacoes" name="outras_informacoes" rows="4"></textarea>
              </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 Responsável
                </button> </a> </center>

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

        </div>
        <!-- END Inline Layout -->



      </div>
    </div>
    <!-- END Elements -->
  </div>
</div>
{{-- Pra quem não tem permissão de visualizar essa página aparecerá a mensagem abaixo --}}
@else

<center>
  <br>
  <div class="alert alert-danger" role="alert">
    Você não tem permissão pra visualizar essa página!
  </div>
</center>

@endcan



<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/main.js"></script>
<script>
  //busca cep
  $(document).ready(function() {
    $("input[name=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]").val(json.bairro);
              $("input[name=cidade]").val(json.localidade);
              $("input[name=estado]").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_celular').onkeyup = function() {
      mascara(this, mtel);
    }
    id('telefone_residencial').onkeyup = function() {
      mascara(this, mtel);
    }
    id('telefone_comercial').onkeyup = function() {
      mascara(this, mtel);
    }
    id('telefone_recado').onkeyup = function() {
      mascara(this, mtel);
    }
    id('tel_resp1').onkeyup = function() {
      mascara(this, mtel);
    }
    id('tel_resp2').onkeyup = function() {
      mascara(this, mtel);
    }
    id('tel_resp3').onkeyup = function() {
      mascara(this, mtel);
    }
  }


  //cpf
  const cpfInput = document.querySelector("#cpf");

  cpfInput.addEventListener("input", function(event) {
    let x = event.target.value.replace(/\D/g, "");
    let y = x.slice(0, 3) + "." + x.slice(3, 6) + "." + x.slice(6, 9) + "-" + x.slice(10);

    if (x.length > 11) {
      event.target.value = y;
    }
  });

  //mascara RG
  function mascaraRG(valor) {
    valor = valor.replace(/[^\da-z]/g, ""); // remove todos os caracteres que não são números ou letras
    valor = valor.replace(/^(\d{2})(\d{3})(\d{3})(\w{1})$/, "$1.$2.$3-$4"); // adiciona a máscara, permitindo uma letra no final
    return valor;
 }
</script>
@endsection