@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>


<!-- Toastr CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />

<!-- Toastr JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.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> Beneficiários
        </h1>
        @can('pode_visualizar_estudante')
        <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>
        @endcan
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->
{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_estudante')

<br>
<center>
  @if (session('erro'))
  {{-- expr --}}
  <div class="alert alert-danger" role="alert">
    {{session('erro')}}
  </div>
  @endif
</center>

<div class="content">
  <!-- Elements -->
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">Registrar Novo 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="/salvar_estudante" 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-1">
                <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-2" 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="naturalidade">Nacionalidade</label>
                <input type="text" class="form-control" id="naturalidade" name="naturalidade" placeholder="Nacionalidade">
              </div>
              <!-- novo -->
              <div class="col-3">
                <label class="form-label" for="cidade_nascimento">Cidade de nascimento</label>
                <input type="text" class="form-control" id="cidade_nascimento" name="cidade_nascimento">
              </div>

              <div class="col-3">
                <label class="form-label" for="sexo">Sexo</label>
                <select class="form-select" id="sexo" name="sexo">
                  <option value="0">Prefiro não dizer </option>
                  <option value="2">Feminino</option>
                  <option value="1">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" onkeyup="this.value = mascaraRG(this.value)" maxlength="9" >
              </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">

              </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">
              </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">
              </div>

              <div class="col-4">
                <label class="form-label" for="cpf">CPF</label>
                <input type="text" class="form-control" id="cpf" name="cpf" 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-3">
                <label class="form-label" for="telefone_residencial">Telefone Residencial</label>
                <input type="tel" class="form-control" id="telefone_residencial" name="telefone_residencial" onkeyup="this.value = formatarTelefone(this.value)" maxlength="15">
              </div>
              <div class="col-3">
                <label class="form-label" for="telefone_celular">Telefone Cel. / Whatsapp</label>
                <input type="tel" class="form-control" id="telefone_celular" name="telefone_celular" placeholder="(00)00000-0000" maxlength="15">
              </div>
              <!-- campo novo -->
              <div class="col-3">
                <label class="form-label" for="telefone1">Telefone1</label>
                <input type="tel" class="form-control" id="telefone1" name="telefone1" onkeyup="this.value = formatarTelefone(this.value)" maxlength="15">
              </div>
              <!-- campo novo -->
              <div class="col-3">
                <label class="form-label" for="telefone2">Telefone2</label>
                <input type="tel" class="form-control" id="telefone2" name="telefone2" onkeyup="this.value = formatarTelefone(this.value)" maxlength="15">
              </div>


              <div class="col-3">
                <label class="form-label" for="cor_raca">Cor/Raça</label>
                <select class="form-select" id="cor_raca" name="cor_raca">
                  <option value="1">Branco</option>
                  <option value="2">Negro</option>
                  <option value="3">Pardo</option>
                  <option value="4">Amarelo</option>
                </select>
              </div>
              <div class="col-3">
                <label class="form-label" for="possui_irmaos">Possui Irmãos</label>
                <select class="form-select" id="possui_irmaos" name="possui_irmaos">
                  <option value="1">Sim</option>
                  <option value="0">Não</option>
                </select>
              </div>
              {{-- <div class="col-3 hidden">
                <label class="form-label" for="ex_beneficiario">Ex-Beneficiário*</label>
                <select class="form-select" id="ex_beneficiario" name="ex_beneficiario" required>
                  <option value="1">Sim</option>
                  <option value="0" selected>Não</option>
                </select>
              </div> --}}
              <div class="col-3">
                <label class="form-label" for="vulnerabilidade">Vulnerabilidade</label>
                <select class="form-select" id="vulnerabilidade" name="vulnerabilidade" >
                  <option value="1">Sim</option>
                  <option value="0">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>

              </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>

              </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-4">
                <label class="form-label" for="portaria_certidao">Portaria</label>
                <input type="text" class="form-control" id="portaria_certidao" name="portaria_certidao" placeholder="portaria_certidao">

              </div>

              <hr>
              <h4 style="margin-bottom: -20px;">Pai</h4>
              <div class="col-4">
                <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" 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>
              <div class="col-2">
                <label class="form-label" for="mora_junto_pai">Mora Junto</label>
                <select class="form-select" id="mora_junto_pai" name="mora_junto_pai">
                  <option value="1">Sim</option>
                  <option value="0">Não</option>
                </select>
              </div>
              <h4 style="margin-bottom: -20px;">Mãe</h4>
              <div class="col-4">
                <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" 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>
              <div class="col-2">
                <label class="form-label" for="mora_junto_mae">Mora Junto</label>
                <select class="form-select" id="mora_junto_mae" name="mora_junto_mae">
                  <option value="1">Sim</option>
                  <option value="0">Não</option>
                </select>
              </div>
              <h4 style="margin-bottom: -20px;">Responsável Legal</h4>

              <div class="input-group input-group-lg">
                <input type="text" id="search-input" name="id" class="form-control form-control-alt" placeholder="Pesquise por nome ou cpf" onblur="limparResultados()">
                <span class="input-group-text border-0 bg-body">
                  <i class="fa fa-fw fa-search"></i>
                </span>
              </div>
              <div class="col-12">
                <a data-bs-toggle="modal" data-bs-target="#modalAddResponsavel">
                  <button type="button" class="btn btn-alt-primary">
                    <i class="fa fa-fw fa-plus"> </i> Responsável
                  </button>
                </a>
              </div>
              <div style="cursor: pointer;">
                {{-- Listagem do resultado da pesquisa --}}
                <ul id="search-results"></ul>
              </div>

              <div class="col-4">
                <label class="form-label" for="responsavel_legal_id">Responsável Legal*</label>
                <input type="text" id="estudante_nome" class="form-control" readonly required>
              </div>
              <input type="hidden" class="form-control" id="responsavel_legal_id" name="responsavel_legal_id" placeholder="responsável">
              <div class="col-4">
                <label class="form-label" for="parentesco_responsavel_legal">Grau de Parentesco</label>
                <input type="text" class="form-control" id="parentesco_responsavel_legal" name="parentesco_responsavel_legal">
              </div>
              <div class="col-4">
                <label class="form-label" for="mora_junto_responsavel_legal">Mora Junto</label>
                <select class="form-select" id="mora_junto_responsavel_legal" name="mora_junto_responsavel_legal">
                  <option value="1">Sim</option>
                  <option value="0">Não</option>
                </select>
              </div>

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

              <div class="col-3">
                <label class="form-label" for="escola">Nome da Escola</label>
                <input type="text" class="form-control" id="escola" name="escola" placeholder="">
              </div>

              <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">
                  <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">
                  <option value="1">Sim</option>
                  <option value="0">Não</option>
                </select>
              </div>

              <div class="col-7">
                <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>

              <br>

              <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">
                  <option value="S">Sim</option>
                  <option value="N">Não</option>
                </select>
              </div>
              <!-- <h4 style="margin-bottom: -20px;">Responsáveis para retirar o aluno</h4>



               {{-- <div class="col-12"> --}}
                <a data-bs-toggle="modal" data-bs-target="#modalAddResponsavel">
                  <button type="button" class="btn btn-alt-primary">
                    <i class="fa fa-fw fa-plus"> </i> Responsável
                  </button>
                </a>
              <input type="hidden" name="responsavel_para_tirar_id1" id="responsavel_para_tirar_id1" class="form-control" >
              <input type="hidden" name="responsavel_para_tirar_id2" id="responsavel_para_tirar_id2" class="form-control" >
              <input type="hidden" name="responsavel_para_tirar_id3" id="responsavel_para_tirar_id3" class="form-control" >


              <div class="col-4">
                <label class="form-label" for="responsavel_para_tirar_id">1º Responsável</label>
                <input type="text" id="estudante_nome2"  class="form-control" placeholder="Nome" onblur="limparResultados()">
              </div>
              <div class="col-4">
                <label class="form-label" for="responsavel_para_tirar_id">2º Responsável</label>
                <input type="text" id="estudante_nome3" class="form-control" placeholder="Nome" onblur="limparResultados()">
              </div>
              <div class="col-4">
                <label class="form-label" for="responsavel_para_tirar_id">3º Responsável</label>
                <input type="text" id="estudante_nome4" class="form-control" placeholder="Nome" onblur="limparResultados()">
              </div>

              <div style="cursor: pointer;">
                {{-- Listagem do resultado da pesquisa --}}
                <ul id="search-results2"></ul>
              </div> -->

              <hr>
                <h3 class="mb-4">Entrega de Documentos</h3>
                <div class="row g-3">
                @php
                    $documentos = [
                    'RG do Beneficiário', 'Certidão do Beneficiário', 'RG do Responsável',
                    'DVA', 'Comprovante de Residência', 'Declaração Escolar', 'Cartão do SUS',
                    'Cadastro Único', 'Atestado Médico', 'Foto Entregue'
                    ];
                @endphp

                @foreach($documentos as $documento)
                    <div class="col-md-6 mb-3">
                    <div class="p-3 border rounded-3 shadow-sm">
                        <h5 class="mb-3">{{ $documento }}</h5>
                        <div class="form-check">
                        <input class="form-check-input" type="radio" name="{{ Str::slug($documento) }}" id="{{ Str::slug($documento) }}-entregue" value="entregue">
                        <label class="form-check-label" for="{{ Str::slug($documento) }}-entregue">
                            Entregue
                        </label>
                        </div>
                        <div class="form-check">
                        <input class="form-check-input" type="radio" name="{{ Str::slug($documento) }}" id="{{ Str::slug($documento) }}-nao-entregue" value="nao_entregue" checked>
                        <label class="form-check-label" for="{{ Str::slug($documento) }}-nao-entregue">
                            Não Entregue
                        </label>
                        </div>
                    </div>
                    </div>
                @endforeach
                </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">
              </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 Estudante
                </button> </a> </center>

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

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



    </div>
  </div>
  <!-- END Elements -->
</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 src="/js/axios.min.js"></script>

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

  $(document).ready(function() {
    $('#salvarResponsavel').on('click', function(e) {
      e.preventDefault();
      var formData = $('#form').serialize();
      $.ajax({
        type: 'POST',
        url: '/salvar_responsavel_modal',
        data: formData,
        success: function(response) {
          console.log(response); // Mostra a resposta no console
          toastr.success("Responsável inserido com sucesso");
          document.getElementById("nome_completo").value = "";
          document.getElementById("cpf_cnpj").value = "";
          document.getElementById("telefone_celular").value = "";
          $("#modalAddResponsavel").modal("hide");
        },
        error: function(xhr, status, error) {
          console.log("Ocorreu um erro na requisição: " + error); // Mostra mensagem de erro no console
        },
      });
    });
  });

  // Responsável Legal
  const searchInput = document.getElementById('search-input');
  const searchResults = document.getElementById('search-results');

  function addToInput(element) {
    let id = element.parentElement.getAttribute("data-id");
    var input = document.querySelector("#responsavel_legal_id");
    input.value = id;
    input.setAttribute("name", "responsavel_legal_id");

    var input2 = document.querySelector("#estudante_nome");
    input2.value = element.innerText;

    searchResults.innerHTML = '';
  }




  searchInput.addEventListener('input', () => {


    axios.get('/search_responsavel', {
        params: {
          query: searchInput.value
        }
      })
      .then(response => {
        searchResults.innerHTML = '';
        response.data.forEach(item => {
          const link = document.createElement('a');
          link.textContent = item.nome_completo;
          link.setAttribute("onclick", "addToInput(this)");
          const li = document.createElement('li');
          li.setAttribute("data-id", item.id);
          li.appendChild(link);
          searchResults.appendChild(li);
        });
      });

    if (searchInput.value === '') {
      setTimeout(() => {
        searchResults.innerHTML = '';
      }, 2000);
    }
  });

  // Responsável para retirar 1
  const searchInput2 = document.getElementById('estudante_nome2');
  const searchResults2 = document.getElementById('search-results2');

  function addToInput2(element) {
    let id = element.parentElement.getAttribute("data-id2");
    var input = document.querySelector("#responsavel_para_tirar_id1");
    input.value = id;
    input.setAttribute("name", "responsavel_para_tirar_id1");

    searchInput2.value = element.innerText;

    searchResults2.innerHTML = '';
  }

  searchInput2.addEventListener('input', () => {
    axios.get('/search_responsavel', {
        params: {
          query: searchInput2.value
        }
      })
      .then(response => {
        searchResults2.innerHTML = '';
        response.data.forEach(item => {
          const link2 = document.createElement('a');
          link2.textContent = item.nome_completo;
          link2.setAttribute("onclick", "addToInput2(this)");
          const li = document.createElement('li');
          li.setAttribute("data-id2", item.id);
          li.appendChild(link2);
          searchResults2.appendChild(li);
        });
      });
  });


  // Responsável para retirar 2
  const searchInput3 = document.getElementById('estudante_nome3');
  const searchResults3 = document.getElementById('search-results2');

  function addToInput3(element) {
    let id = element.parentElement.getAttribute("data-id3");
    var input = document.querySelector("#responsavel_para_tirar_id2");
    input.value = id;
    input.setAttribute("name", "responsavel_para_tirar_id2");

    searchInput3.value = element.innerText;

    searchResults3.innerHTML = '';
  }

  searchInput3.addEventListener('input', () => {
    axios.get('/search_responsavel', {
        params: {
          query: searchInput3.value
        }
      })
      .then(response => {
        searchResults3.innerHTML = '';
        response.data.forEach(item => {
          const link3 = document.createElement('a');
          link3.textContent = item.nome_completo;
          link3.setAttribute("onclick", "addToInput3(this)");
          const li = document.createElement('li');
          li.setAttribute("data-id3", item.id);
          li.appendChild(link3);
          searchResults3.appendChild(li);
        });
      });
  });




  // Responsável para retirar 3
  const searchInput4 = document.getElementById('estudante_nome4');
  const searchResults4 = document.getElementById('search-results2');

  function addToInput4(element) {
    let id = element.parentElement.getAttribute("data-id4");
    var input = document.querySelector("#responsavel_para_tirar_id3");
    input.value = id;
    input.setAttribute("name", "responsavel_para_tirar_id3");

    searchInput4.value = element.innerText;

    searchResults4.innerHTML = '';
  }

  searchInput4.addEventListener('input', () => {
    axios.get('/search_responsavel', {
        params: {
          query: searchInput4.value
        }
      })
      .then(response => {
        searchResults4.innerHTML = '';
        response.data.forEach(item => {
          const link4 = document.createElement('a');
          link4.textContent = item.nome_completo;
          link4.setAttribute("onclick", "addToInput4(this)");
          const li = document.createElement('li');
          li.setAttribute("data-id4", item.id);
          li.appendChild(link4);
          searchResults4.appendChild(li);
        });
      });
  });


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




  function formatarTelefone(telefone) {
    // Remove todos os caracteres que não são números
    telefone = telefone.replace(/\D/g, '');

    // Formata o telefone de acordo com a quantidade de dígitos
    if (telefone.length === 11) {
      return telefone.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
    } else if (telefone.length === 10) {
      return telefone.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
    } else {
      return telefone;
    }
  }

  // Exemplo de uso
  console.log(formatarTelefone('11987654321')); // (11) 98765-4321
  console.log(formatarTelefone('1187654321')); // (11) 8765-4321
  console.log(formatarTelefone('11')); // 11




  //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);
    }
  }

  //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(9);

    if (x.length > 10) {
      event.target.value = y;
    }
  });
</script>

@include('conteudos.responsaveis.modal_add_responsavel')
@endsection