From fa2d848f4dd88f5395d7204fb830efc5bb174a55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Andr=C3=A9?= <carlos.andre1270@gmail.com>
Date: Tue, 1 Jun 2021 15:59:53 -0300
Subject: [PATCH] mascara de cpf

---
 .../evento/formulario/participantes.blade.php |   2 +-
 .../views/evento/submeterTrabalho.blade.php   | 239 ++++--------------
 2 files changed, 57 insertions(+), 184 deletions(-)

diff --git a/resources/views/evento/formulario/participantes.blade.php b/resources/views/evento/formulario/participantes.blade.php
index 759eec8..1ab8b3d 100644
--- a/resources/views/evento/formulario/participantes.blade.php
+++ b/resources/views/evento/formulario/participantes.blade.php
@@ -52,7 +52,7 @@
                         </div>                              
                         <div class="col-6">
                               @component('componentes.input', ['label' => 'CPF'])
-                                <input type="text" class="form-control cpf"  name="cpf[]" placeholder="CPF" required/>
+                                <input type="text" class="form-control cpf"  name="cpf[]" placeholder="CPF" required onchange="checarCPFdoCampo(this)" onkeyup="mascaraCPF(this)"/>
                                 <span id="cpf-invalido-1" class="invalid-feedback cpf-invalido" role="alert" style="overflow: visible; display:none">
                                   <span style="font-style: italic;">CPF inválido.</span>
                                 </span>
diff --git a/resources/views/evento/submeterTrabalho.blade.php b/resources/views/evento/submeterTrabalho.blade.php
index 3ccc14a..87437bc 100644
--- a/resources/views/evento/submeterTrabalho.blade.php
+++ b/resources/views/evento/submeterTrabalho.blade.php
@@ -38,174 +38,8 @@
           </div>
         </a>
       </div>
-      <div class="col-md-12">
-        <div class="collapse" id="collapseParticipante">
-          <div class="container">
-              <div class="row">
-                <input type="hidden"  name="funcaoParticipante[]" value="4">
-                <div class="col-md-12 mt-3"><h5>Dados do participante</h5></div>
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'Nome completo'])
-                        <input type="text" class="form-control " id="nomeParticipante"  name="nomeParticipante[]" placeholder="Nome Completo" required />
-                      @endcomponent
-                </div>                              
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'E-mail'])
-                        <input type="email" class="form-control"  name="emailParticipante[]" placeholder="E-mail" required/>
-                      @endcomponent
-                </div>                              
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'Data de nascimento'])
-                        <input type="date" class="form-control" name="data_de_nascimento[]" placeholder="Data de nascimento" required/>
-                      @endcomponent
-                </div>                              
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'CPF'])
-                        <input type="text" class="form-control cpf"  name="cpf[]" placeholder="CPF" required/>
-
-                        <span id="cpf-invalido-1" class="invalid-feedback cpf-invalido" role="alert" style="overflow: visible; display:none">
-                          <strong style="font-style: italic;">CPF inválido.</strong>
-                        </span>
-                        <span id="cpf-valido-1" class="valid-feedback" role="alert" style="overflow: visible; display:none">
-                          <strong style="font-style: italic;">CPF válido.</strong>
-                        </span>
-                      @endcomponent
-                </div>                              
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'RG'])
-                        <input type="number" class="form-control"  min="1" maxlength="8" name="rg[]" placeholder="RG" required/>
-                      @endcomponent
-                </div>                              
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'Celular'])
-                        <input type="tel" class="form-control celular"  name="celular[]" placeholder="Celular" required/>
-                      @endcomponent
-                </div>
-                <div class="col-md-12"><h5>Endereço</h5></div>                              
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'CEP'])
-                        <input type="number" class="form-control" name="cep[]" placeholder="CEP" required/>
-                      @endcomponent
-                </div>           
-                                   
-                <div class="col-6">
-                  @component('componentes.select', ['label' => 'Estado'])
-                    <select name="uf[]" id="estado" class="form-control"   style="visibility: visible" required>
-                      <option value="" disabled selected>-- Selecione uma opção --</option>
-                      @foreach ($estados as $sigla => $nome)
-                        <option @if(old('uf') == $sigla ) selected @endif value="{{ $sigla }}">{{ $nome }}</option>
-                      @endforeach
-                    </select>
-                  @endcomponent
-                </div>                              
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'Cidade'])
-                        <input type="text" class="form-control"  name="cidade[]" placeholder="Cidade" required/>
-                      @endcomponent
-                </div>                              
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'Bairro'])
-                        <input type="text" class="form-control"  name="bairro[]" placeholder="Bairro" required/>
-                      @endcomponent
-                </div>                              
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'Rua'])
-                        <input type="text" class="form-control"  name="rua[]" placeholder="Rua" required/>
-                      @endcomponent
-                </div>                              
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'Número'])
-                        <input type="text" class="form-control"  name="numero[]" placeholder="Número" required/>
-                      @endcomponent
-                </div>                              
-                <div class="col-12">
-                      @component('componentes.input', ['label' => 'Complemento'])
-                        <input type="text" id="complemento" class="form-control" name="complemento[]"  pattern="[A-Za-z]+" placeholder="Complemento" required/>
-                      @endcomponent
-                </div>
-                <div class="col-md-12"><h5>Dados do curso</h5></div>                               
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'Universidade'])
-                        <input type="text" class="form-control" name="universidade[]" placeholder="Universidade" required/>
-                      @endcomponent
-                </div>                              
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'Curso'])
-                        <input type="text" class="form-control" name="curso[]" placeholder="Curso" required/>
-                      @endcomponent
-                </div>                              
-                <div class="col-6">
-                  @component('componentes.select', ['label' => 'Turno'])
-                    <select name="turno[]" class="form-control" required>
-                      <option value="" disabled selected>-- Selecione uma opção --</option>
-                      @foreach ($enum_turno as $key => $value)
-                        <option @if(old('turno') == $value ) selected @endif value="{{ $value }}">{{ $value }}</option>
-                      @endforeach
-                    </select>
-                  @endcomponent
-                </div>
-                @php
-                  $options = array('6' => 6, '7' => 7,'8' => 8,'9' => 9,'10' => 10,'11' => 11,'12' => 12); 
-                @endphp                              
-                <div class="col-6">
-                  @component('componentes.select', ['label' => 'Total de períodos do curso'])
-                    <select name="total_periodos[]"  class="form-control" onchange="gerarPeriodo(this)" required>
-                      <option value="" disabled selected>-- Selecione uma opção --</option>
-                      @foreach ($options as $key => $value)
-                        <option @if(old('total_periodos') == $key ) selected @endif value="{{ $key }}">{{ $value }}</option>
-                      @endforeach
-                    </select>
-                  @endcomponent
-                </div>                              
-                <div class="col-6">
-                  @component('componentes.select', ['label' => 'Período atual'])
-                    <select name="periodo_atual[]"  class="form-control" required >
-                      <option value="" disabled selected>-- Selecione uma opção --</option>
-                      
-                    </select>
-                  @endcomponent
-                </div>                              
-                <div class="col-6">
-                      @component('componentes.select', ['label' => 'Ordem de prioridade'])
-                        <select name="ordem_prioridade[]"  class="form-control" required>
-                          <option value="" disabled selected>-- ORDEM --</option>
-                          <option value="1">1</option>
-                          <option value="2">2</option>
-                          <option value="3">3</option>
-                        </select>
-                      @endcomponent
-                </div>                              
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'Coeficiente de rendimento'])
-                      <input type="number" class="form-control media" name="media_geral_curso[]" min="0" max="10" step="0.01"  required>
-                      @endcomponent
-                </div>
-                <div class="col-md-12"><h5>Plano de trabalho</h5></div>                              
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'Título'])
-                        <input type="text" class="form-control" name="nomePlanoTrabalho[]" placeholder="Digite o título do plano de trabalho" required>
-                      @endcomponent
-                </div>                              
-                <div class="col-6">
-                      @component('componentes.input', ['label' => 'Anexo(.pdf)'])
-                        <input type="file" class="input-group-text" name="anexoPlanoTrabalho[]" accept=".pdf" placeholder="Anexo do Plano de Trabalho" required/>
-                      @endcomponent
-                </div>                              
-              </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="form-row" style="display: none">
-      {{-- <button type="button" onload="myScript(this)" onclick="subir(this)" >Subir</button>
-      <button type="button" onload="myScript(this)" onclick="descer(this)">Descer</button> --}}
-      <button type="button" class="btn btn-danger" id="buttonRemover" onclick="removerPart(this)" >Remover participante</button>
-      <div class="col-md-12">
-        <a class="btn btn-light" data-toggle="collapse" id="idCollapseParticipante" href="#collapseParticipante" role="button" aria-expanded="false" aria-controls="collapseParticipante" style="width: 100%; text-align:left">
-          <div class="d-flex justify-content-between align-items-center">
-            <h4 id="tituloParticipante" style="color: #01487E; font-size:17px; margin-top:5px">Participante<span id="pontos" style="display: none;">:</span> <span style="display: none;" id="display"></span>  </h4>
-          </div>
-        </a>
+      <div class="col-1">
+        <button type="button" class="btn btn-danger" id="buttonRemover" onclick="removerPart(this)" >X</button>
       </div>
       <div class="col-md-12">
         <div class="collapse" id="collapseParticipante">
@@ -230,14 +64,15 @@
                 </div>                              
                 <div class="col-6">
                       @component('componentes.input', ['label' => 'CPF'])
-                        <input type="text" class="form-control cpf"  name="cpf[]" placeholder="CPF" required/>
+                        <input type="text" class="form-control cpf"  name="cpf[]" placeholder="CPF" required onchange="checarCPFdoCampo(this)" onkeyup="mascaraCPF(this)"/>
+                      
                         <span id="cpf-invalido-1" class="invalid-feedback cpf-invalido" role="alert" style="overflow: visible; display:none">
-                          <strong style="font-style: italic;">CPF inválido</strong>
+                          <span style="font-style: italic;">CPF inválido.</span>
                         </span>
                         <span id="cpf-valido-1" class="valid-feedback" role="alert" style="overflow: visible; display:none">
-                          <strong style="font-style: italic;">CPF válido!</strong>
+                          <span style="font-style: italic;">CPF válido.</span>
                         </span>
-                      @endcomponent                      
+                      @endcomponent
                 </div>                              
                 <div class="col-6">
                       @component('componentes.input', ['label' => 'RG'])
@@ -550,7 +385,7 @@
     });
 
     $('.cep').mask('00000000');
-    $('.cpf').mask('000.000.000-00');
+    // $('.cpf').mask('000.000.000-00');
     $('.numero').mask('0000000000000');
     var SPMaskBehavior = function (val) {
         return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
@@ -898,19 +733,34 @@
   //   });
   // });
 
-  $(document).ready(function(){
-    $(".cpf").change(function(){
-      console.log(this.parentElement.children[0])
-      if (validarCPF(retirarFormatacao(this.value))) {
+  // $(document).ready(function(){
+  //   $(".cpf").change(function(){
+  //     console.log(this.parentElement.children[0])
+  //     if (validarCPF(retirarFormatacao(this.value))) {
 
-        this.parentElement.children[1].style.display = "none";
-        this.parentElement.children[2].style.display = "block";
+  //       this.parentElement.children[1].style.display = "none";
+  //       this.parentElement.children[2].style.display = "block";
+  //     } else {
+  //       this.parentElement.children[1].style.display = "block";
+  //       this.parentElement.children[2].style.display = "none";
+  //     }
+  //   });
+  // });
+
+  function checarCPFdoCampo(input) {
+    if (input.value.length == 14) {
+      if (validarCPF(retirarFormatacao(input.value))) {
+        input.parentElement.children[1].style.display = "none";
+        input.parentElement.children[2].style.display = "block";
       } else {
-        this.parentElement.children[1].style.display = "block";
-        this.parentElement.children[2].style.display = "none";
+        input.parentElement.children[1].style.display = "block";
+        input.parentElement.children[2].style.display = "none";
       }
-    });
-  });
+    } else {
+      input.parentElement.children[1].style.display = "none";
+      input.parentElement.children[2].style.display = "none";
+    }
+  }
 
   function validarCPF(strCPF) {
     var soma;
@@ -986,5 +836,28 @@
       $("#modalCpfInvalido").modal('show');
     }
   }
+
+  function mascaraCPF(input) {
+    var numeros = "0123456789.-";
+    var resultado = "";
+    if (input.value.length < 14) {
+      for (var i = 0; i < input.value.length; i++) {
+        if (numeros.indexOf(input.value[i]) > -1) {
+          if ((i == 2 || i == 6) && input.value[i+1] != ".") {
+            resultado += input.value[i] + ".";
+          } else if (i == 10 && input.value[i+1] != "-") {
+            resultado += input.value[i] + "-";
+          } else {
+            resultado += input.value[i];
+          }
+        }
+      }
+    } else {
+      for (var i = 0; i < 14; i++) { 
+        resultado += input.value[i];
+      }
+    }
+    input.value = resultado;
+  }
 </script>
 @endsection
-- 
GitLab