<!--INICIO FORMULÁRIO DO CLIENTE-->

<fieldset class="border border-secondary mb-1" style="border-radius: 5px">
<legend class="btn btn-secondary btn-sm text-left" style="width: 280px;margin-left: 10px">
<div class="text-light" style="font-size: 14px;margin-left:10px">DADOS DO CLIENTE</div>
</legend>


<div class="card-body" style="padding-bottom: 0px;padding-top: 2px">
<form name="clientes" action="" method="POST">

<?php
$servername = "xxxxx";
$username = "xxxxx";
$password = "xxxxx";
$dbname = "xxxxxx";

$dbconn = mysqli_connect($servername, $username, $password, $dbname)or die("Failed to connect to database:" . mysqli_error($dbconn));


$query = "SELECT * FROM clientes ORDER BY nome ";
$dados = mysqli_query($dbconn, $query);
$result = mysqli_num_rows($dados);
$meujson = array();
?>
  <div class="form-row">
    <div class="col">
      <div class="input-group input-group-sm mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm" style=" width: 70px">Cliente:</span>
        </div>
        <select id="clientes" name="nome" class="form-control form-control-sm text-uppercase">
          <option>Selecione...</option>

          <?php while($row = $dados->fetch_assoc()) {
          echo '<option value="'.$row['nome'].'">'.$row['nome'].'</option>';
          $meujson[$row['nome']] = $row; // coleciona as linhas no $meujson
          }
          ?>
        </select>
      </div>
    </div>


    <div class="col-3">
      <div class="input-group input-group-sm mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm" style=" width: 70px">CNPJ/CPF</span>
        </div>
        <input type="text" class="form-control form-control-sm " id="cnpj" name="cnpj" value="" required="required" /></div>
    </div>

<div class="col-3">
      <div class="input-group input-group-sm mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm" style=" width: 70px">Telefone</span>
        </div>
        <input type="text" class="form-control form-control-sm" id="telefone" name="telefone" value="" required="required" /></div>
    </div>


  </div>


  <div class="form-row">
    <div class="col-4">
      <div class="input-group input-group-sm mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm" style=" width: 70px">E-mail</span>
        </div>
        <input type="text" class="form-control form-control-sm " id="email" name="email" value="" required="required" /></div>
    </div>

     <div class="col">
      <div class="input-group input-group-sm mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm" style=" width: 70px">Endereço</span>
        </div>
        <input type="text" class="form-control form-control-sm" id="rua" name="endereco" value="" required="required" /></div>
    </div>

   <div class="col-2">
      <div class="input-group input-group-sm mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm" style=" width: 70px">Nº</span>
        </div>
        <input type="text" class="form-control form-control-sm" id="numero" name="numero" value="" required="required" /></div>
    </div>

  </div>


  <div class="form-row">
     <div class="col">
      <div class="input-group input-group-sm mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm" style=" width: 70px">Cidade</span>
        </div>
        <input type="text" class="form-control form-control-sm" id="cidade" name="cidade" value="" required="required" />
      </div>
    </div>

     <div class="col">
      <div class="input-group input-group-sm mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm" style=" width: 70px">Bairro</span>
        </div>
        <input type="text" class="form-control form-control-sm" id="bairro" name="bairro" value="" required="required" /></div>
    </div>

<div class="col-2">
      <div class="input-group input-group-sm mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm" style=" width: 70px">Estado</span>
        </div>
        <input type="text" class="form-control form-control-sm " id="estado" name="estado" value="" required="required" /></div>
    </div>

   <div class="col-2">
      <div class="input-group input-group-sm mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm" style=" width: 70px">Cep</span>
        </div>
        <input type="text" class="form-control form-control-sm" id="cep" name="cep" value="" required="required" />
      </div>
    </div>

  </div>
  </div>

</fieldset>
<!--FIM FORMULÁRIO DO CLIENTE-->

<script type='text/javascript'>
  $(document).ready(function() {
    $("select[name='nome']").change(function() {
      var $nome = $("input[name='nome']");
      var $email = $("input[name='email']");
      var $telefone = $("input[name='telefone']");
      var $cnpj = $("input[name='cnpj']");
      var $endereco = $("input[name='endereco']");
      var $numero = $("input[name='numero']");
      var $cidade = $("input[name='cidade']");
      var $bairro = $("input[name='bairro']");
      var $estado = $("input[name='estado']");
      var $cep = $("input[name='cep']");
      $.getJSON('funcao_busca_cliente.php', {
        nome: $(this).val()
      }, function(json) {
        $nome.val(json.nome);
        $email.val(json.email);
        $telefone.val(json.telefone);
        $cnpj.val(json.cnpj);
        $endereco.val(json.endereco);
        $numero.val(json.numero);
        $cidade.val(json.cidade);
        $bairro.val(json.bairro);
        $estado.val(json.estado);
        $cep.val(json.cep);
      });
    });
  });
</script>