<div class="container  card" STYLE="background: #144dc3">
  <div class="container mt-3">
    <div class="row">
      <div class="col-lg-12">
        <form class="row" id="form_test">
          <div class="form-row">
            <div class="form-group col-3">
              <label class="sr-only" for="inlineFormInputGroupUsername2">CEP</label>
              <div class="input-group mb-2 mr-sm-2">
                <input type="text" class="form-control mascCEP" placeholder="CEP" name="cep" type="text" id="cep" value="" size="10" maxlength="9"
                       onblur="pesquisacep(this.value);">
                <div class="input-group-prepend">
                  <div class="input-group-text btn"><i class="fa fa-search mascCEP" aria-hidden="true" onclick="pesquisacep(this.value)"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group col-2">
              <button class="form-control btn btn-outline-light" data-toggle="modal" data-target="#ncep" type="button">Nao sei meu cep</button>
            </div>
            <div class="form-group col-md-7">
              <input id="rua" name='rua' type="text" class="form-control"  placeholder="Endereço">
            </div>
            <div class="form-group col-4">
              <input id="numero" name='numero' type="text" class="form-control" placeholder="Número">
            </div>
            <div class="form-group col-8">
              <input id="complemento" name='complemento' type="text" class="form-control" placeholder="Complemento">
            </div>
            <div class="form-group col-5">
              <input id="bairro" name='bairro' type="text" class="form-control" placeholder="Bairro">
            </div>
            <div class="form-group col-5">
              <input id="cidade" name='cidade' type="text" class="form-control" placeholder="Cidade">
            </div>
            <div class="form-group col-2">
              <input id="uf" name='uf' type="text" class="form-control" placeholder="Estado">
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- model ver detalhes Clientes-->
<div id='ncep'  class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h5 class="modal-title" >Consulta Cep Por Endereço</h5>
        </div>
        <div class="modal-body">
          <div class="col-12" style="background: #00b44e">
            ...
          </div>
        </div>
        <div class="modal-footer text-center">
          <button type="button" class="btn btn-secondary col-3" data-dismiss="modal">Selecionar</button>
          <button type="button" class="btn btn-primary col-3">Fechar</button>
        </div>
      </div>
    </div>
  </div>

<script>
  //verifica enter formulario de cadastro de endereco do cliente
  document.querySelectorAll("input").forEach( function(input) {
    input.addEventListener("keypress", function(event) {
      const el = event.target ;
      const id = el.id;
      if (event.key === "Enter") {
        if(id == 'cep'){
          pesquisacep(this.value);
          $(document).ready(function(){
            document.getElementById("cep").value = $("#cep").mask("99.999-999");
          });
          if(document.getElementById("rua").value == ""){
            document.getElementById("rua").focus();
          }else{
            document.getElementById("numero").focus();
          }
        };
        if(id == 'rua'){document.getElementById("numero").focus();}
        if(id == 'numero'){document.getElementById("complemento").focus();}
        if(id == 'complemento'){document.getElementById("bairro").focus();}
        if(id == 'bairro'){document.getElementById("cidade").focus();}
        if(id == 'cidade'){document.getElementById("uf").focus();}
      }
    });
  });

</script>
