Preenchimento de dados a partir do CEP na parte de substituir o participante e o plano

resources/views/administrador/substituirParticipanteCompletoForm.blade.php

@@ -110,7 +110,8 @@
             </div>
             <div class="col-6">
                 @component('componentes.input', ['label' => 'CEP'])
-                <input type="text" class="form-control cep" value="" name="cep" placeholder="CEP" id="cep{{$participante->id}}" required />
+                <input name="cep" type="text" id="cep_subCompleta{{$participante->id}}" value="" class="form-control cep"
+                onblur="pesquisacep1(this.value, {{$participante->id}})" required />
                 @error('cep')
                 <span class="invalid-feedback" role="alert" style="overflow: visible; display:block">
                     <strong>{{ $message }}</strong>
@@ -119,13 +120,8 @@
                 @endcomponent
             </div>
             <div class="col-6">
-                @component('componentes.select', ['label' => 'Estado'])
-                <select name="uf" class="form-control" style="visibility: visible" id="estado{{$participante->id}}" required>
-                    <option value="" selected>-- Selecione uma opção --</option>
-                    @foreach ($estados as $sigla => $nome)
-                    <option value="{{ $sigla }}">{{ $nome }}</option>
-                    @endforeach
-                </select>
+                @component('componentes.input', ['label' => 'Estado'])
+                <input name="uf" type="text" class="form-control" value="" id="uf_subCompleta{{$participante->id}}" required />
                 @error('uf')
                 <span class="invalid-feedback" role="alert" style="overflow: visible; display:block">
                     <strong>{{ $message }}</strong>
@@ -136,7 +132,8 @@
 
             <div class="col-6">
                 @component('componentes.input', ['label' => 'Cidade'])
-                <input type="text" class="form-control" value="" name="cidade" placeholder="Cidade" maxlength="50" id="cidade{{$participante->id}}" required />
+                <input name="cidade" type="text" id="cidade_subCompleta{{$participante->id}}" placeholder="Cidade" maxlength="50" class="form-control" 
+                value="" required/>
                 
                 @error('cidade')
                 <span class="invalid-feedback" role="alert" style="overflow: visible; display:block">
@@ -147,7 +144,7 @@
             </div>
             <div class="col-6">
                 @component('componentes.input', ['label' => 'Bairro'])
-                <input type="text" class="form-control" value="" name="bairro" placeholder="Bairro" maxlength="50" id="bairro{{$participante->id}}" required />
+                <input name="bairro" type="text" id="bairro_subCompleta{{$participante->id}}" placeholder="Bairro" class="form-control" value="" required />
                 
                 @error('bairro')
                 <span class="invalid-feedback" role="alert" style="overflow: visible; display:block">
@@ -158,7 +155,7 @@
             </div>
             <div class="col-6">
                 @component('componentes.input', ['label' => 'Rua'])
-                <input type="text" class="form-control" value="" name="rua" placeholder="Rua" maxlength="100" id="rua{{$participante->id}}" required />
+                <input name="rua" type="text" id="rua_subCompleta{{$participante->id}}" class="form-control" placeholder="Rua" maxlength="100" value="" />
                 
                 @error('rua')
                 <span class="invalid-feedback" role="alert" style="overflow: visible; display:block">
@@ -431,4 +428,77 @@
 
         </div>
     </div>
-</form>
+</form>
\ No newline at end of file
+
+
+<script>
+function limpa_formulário_cep1(id) {
+    //Limpa valores do formulário de cep.
+    document.getElementById(`rua_subCompleta${id}`).value=("");
+    document.getElementById(`bairro_subCompleta${id}`).value=("");
+    document.getElementById(`cidade_subCompleta${id}`).value=("");
+    document.getElementById(`uf_subCompleta${id}`).value=("");
+}
+
+
+function meu_callback1(conteudo) {
+    if (!("erro" in conteudo)) {
+        //Atualiza os campos com os valores.
+        console.log(conteudo);
+        document.getElementById(`rua_subCompleta${cont3}`).value=(conteudo.logradouro);
+        document.getElementById(`bairro_subCompleta${cont3}`).value=(conteudo.bairro);
+        document.getElementById(`cidade_subCompleta${cont3}`).value=(conteudo.localidade);
+        document.getElementById(`uf_subCompleta${cont3}`).value=(conteudo.uf);
+    } //end if.
+    else {
+        //CEP não Encontrado.
+        
+        limpa_formulário_cep1(cont3);
+        alert("CEP não encontrado.");
+    }
+}
+    
+function pesquisacep1(valor, id) {
+
+    //Nova variável "cep" somente com dígitos.
+    var cep = valor.replace(/\D/g, '');
+
+    //Verifica se campo cep possui valor informado.
+    if (cep != "") {
+
+    //Expressão regular para validar o CEP.
+    var validacep = /^[0-9]{8}$/;
+
+    //Valida o formato do CEP.
+    if(validacep.test(cep)) {
+
+        //Preenche os campos com "..." enquanto consulta webservice.
+        document.getElementById(`rua_subCompleta${id}`).value="...";
+        document.getElementById(`bairro_subCompleta${id}`).value="...";
+        document.getElementById(`cidade_subCompleta${id}`).value="...";
+        document.getElementById(`uf_subCompleta${id}`).value="...";
+
+        //Cria um elemento javascript.
+        var script = document.createElement('script');
+
+        //Sincroniza com o callback.
+        window.cont3 = id //Deixando o ID global
+        script.src = 'https://viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback1';
+
+        //Insere script no documento e carrega o conteúdo.
+        document.body.appendChild(script);
+
+    } //end if.
+    else {
+        //cep é inválido.
+        limpa_formulário_cep1(id);
+        alert("Formato de CEP inválido.");
+    }
+    } //end if.
+    else {
+        //cep sem valor, limpa formulário.
+        limpa_formulário_cep1(id);
+    }
+};
+
+</script>
\ No newline at end of file