<div class="row justify-content-md-center">

  <div class="col-md-6">

    <div class="row">
      <div class="col mt-5">

        <h3>Novo Cliente - CPF</h3>
        <p ng-show="mensagem.length" class="alert alert-info">{{mensagem}}</p>

        <form name="formCpf" ng-submit="cadastrar()" novalidate>
          <div class="row">
            <div class="col-6">
              <div class="form-group">
                <input type="text" name="doc" class="form-control" ng-model="doc" placeholder="{{doc}}" readonly>
              </div>
            </div>

            <div class="col-6">
              <div class="form-group">
                <input type="text" ng-model="client.phone" class="form-control" placeholder="Telefone" phone-dir required>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col">
              <div class="form-group">
                <input type="text" name="name" ng-model="client.name" class="form-control" placeholder="Nome" required>
              </div>
            </div>
          </div>

          <div via-cep-form>
            <div class="row">
              <div class="col">
                <div class="form-group">
                  <input type="text" name="zipcode" ng-model="address.zipcode" via-cep="cep" class="form-control" placeholder="CEP" cep-dir required>
                  <span ng-show="formCpf.zipcode.$error.cep" class="alert alert-danger">Cep inválido!</span>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col">
                <div class="form-group">
                  <input type="text" name="street" ng-model="address.street" via-cep="logradouro" class="form-control" placeholder="Endereço" required>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-8">
                <input type="text" name="neighborhood" ng-model="address.neighborhood" via-cep="bairro" class="form-control" placeholder="Bairro" required>
              </div>
              <div class="col-4">
                <input type="text" name="" class="form-control" ng-model="client.numberAddress" placeholder="Número" required>
              </div>
            </div>

            <div class="row mt-3">
              <div class="col">
                <input type="text" class="form-control" ng-model="client.complementAddress" placeholder="Complemento">
              </div>
            </div>

            <div class="row mt-3">
              <div class="col-8">
                <input type="text" name="city" ng-model="address.city" via-cep="localidade" class="form-control" placeholder="Cidade" required>
              </div>
              <div class="col-4">
                <input type="text" name="uf" ng-model="address.uf" via-cep="uf" class="form-control" placeholder="UF" required>
              </div>
            </div>

            <div class="row mt-3">
              <div class="col">
                <input type="email" class="form-control" placeholder="E-mail" ng-model="client.email" required>
              </div>
            </div>
          </div>

          <button type="submit" class="btn btn-success btn-lg mt-3" ng-disabled="formCpf.$invalid">Cadastrar</button>
          <a href="#/bhan" role="button" class="btn btn-primary btn-lg mt-3 bt-hide">Voltar</a>
        </form>

      </div>
    </div>

  </div>

</div>
