<ion-header>

  <ion-navbar>
    <ion-title>Voltar</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="transparent-header">
  <img class="logo" src="assets/imgs/sb.png">
  <form (ngSubmit)="register()" #registerForm="ngForm">
  <ion-grid>
      <ion-list inset>
        <ion-row>
          <ion-col>
            <ion-item>
              <ion-label>
                <ion-icon name="person"></ion-icon>
              </ion-label>
              <ion-input type="text" placeholder="Name" name="userName" [(ngModel)]="userName" required></ion-input>
            </ion-item>
          </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
              <ion-item>
                <ion-label>
                  <ion-icon name="person"></ion-icon>
                </ion-label>
                <ion-input type="number" name="userRg" [(ngModel)]="userRg" placeholder="RG"></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-item>
                <ion-label>
                  <ion-icon name="person"></ion-icon>
                </ion-label>
                <ion-input name="userCpf" [(ngModel)]="userCpf" placeholder="CPF"></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-item>
                <ion-label>
                  <ion-icon name="person"></ion-icon>
                </ion-label>
                <ion-input type="email" placeholder="Email" [(ngModel)]="userEmail" name="email" required></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-item>
                <ion-label>
                  <ion-icon name="phone-portrait"></ion-icon>
                </ion-label>
                <ion-input type="number" placeholder="(xx)99999-9999" [(ngModel)]="userCel" name="celular" required></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-item>
                <ion-label>
                  <ion-icon name="lock"></ion-icon>
                </ion-label>
                <ion-input name="userPassword" [(ngModel)]="userPassword" placeholder="Senha" type="password" required></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-item>
                <ion-label>
                  <ion-icon name="lock"></ion-icon>
                </ion-label>
                <ion-input name="confirmPassword" [(ngModel)]="confirmPassword" placeholder="Confirmar Senha" type="password" required></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
          <br>
          <ion-row>
            <ion-col>
              <ion-item>
                <ion-select class="sexo" placeholder="Sexo" [(ngModel)]="userSexo" name="userSexo" required>
                  <ion-option>Masculino</ion-option>
                  <ion-option>Feminino</ion-option>
                </ion-select>
              </ion-item>
            </ion-col>
          </ion-row>
          <br>
          <ion-row>
            <ion-col>
              <ion-item>
                <ion-label>
                  <ion-icon name="calendar"></ion-icon>Data de Nascimento</ion-label>
                <ion-datetime displayFormat="DD/MM/YYYY" [(ngModel)]="dataNasc" name="dataNasc">Data de Nascimento</ion-datetime>
              </ion-item>
            </ion-col>
          </ion-row>
          <br>
          <ion-row>
            <ion-col col-10>
              <ion-item name="inputCep">
                <ion-label>
                  <ion-icon name="person"></ion-icon>
                </ion-label>
                <ion-input type="number" name="userCep" [(ngModel)]="userCep" placeholder="CEP"></ion-input>
              </ion-item>
            </ion-col>
            <ion-col col-2>
              <button name="btnCep" (click)="consultaCep()">GO</button>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-item id="logradouroRes">
                <ion-input name="userLogradouro" [(ngModel)]="userLogradouro" placeholder="Logradouro" required></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col col-2>
              <ion-item>
                <ion-input name="userNumber" [(ngModel)]="userNumber" placeholder="Nº"></ion-input>
              </ion-item>
            </ion-col>
            <ion-col col-10>
              <ion-item>
                <ion-input name="userComp" [(ngModel)]="userComp" placeholder="Complemento"></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-item>
                <ion-input name="userBairro" [(ngModel)]="userBairro" placeholder="Bairro"></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-item>
                <ion-input name="userMun" [(ngModel)]="userMun" placeholder="Município"></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-item>
                <ion-input name="userUF" [(ngModel)]="userUF" placeholder="UF"></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col class="signup-col">
              <!-- <button ion-button class="submit-btn" full type="submit" [disabled]="!registerForm.form.valid">Register</button> -->
              <button ion-button class="submit-btn" full type="submit" (click)="registraPessoa()" class="continue-button">Registrar-se</button>
            </ion-col>
          </ion-row>
        </ion-list>
    </ion-grid>
  </form>
</ion-content>