<ion-header class="theme_dark_bg" [ngClass]="lang=='ar' ? 'ar' : ''">
    <button class="nav_btn theme_color floatLeft" menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <div class="nav_header_title floatLeft">
        {{'profile.Profile'|translate}}
    </div>
    <div class="clear"></div>
  </ion-header>
<ion-content padding [ngClass]="lang=='ar' ? 'ar' : ''">
  <div class="myprofile_wrapper">
      <h4>{{'profile.My Profile'|translate}}</h4>
      <hr>
      <br>
      <form [formGroup]="editForm">
      <div class="profile_circle_pic">
          <img [src]=editForm.value.image >
          <div class="edit">
            <input type="file" (change)="fileChange($event)" accept="image/*">
              <ion-icon name="md-create"></ion-icon>
          </div>
      </div>
      <div class="signup_form_content">
          <ion-item>
              <ion-input type="text" placeholder="{{'profile.Name'|translate}}" formControlName="name"></ion-input>
          </ion-item>
        <div class="er_req textCenter" *ngIf="editForm.controls.name.invalid && (editForm.get('name').dirty || editForm.get('name').touched)">
            {{'profile.Enter a valid Name'|translate}}
        </div>

          <ion-item>
              <ion-input type="text" placeholder="{{'profile.Username'|translate}}" formControlName="username"></ion-input>
          </ion-item>
        <div class="er_req textCenter" *ngIf="editForm.controls.username.invalid && (editForm.get('username').dirty || editForm.get('username').touched)">
            {{'profile.Enter a valid Username'|translate}}
        </div>

          <ion-item>
              <ion-input type="number" placeholder="{{'profile.Mobile Number'|translate}}" formControlName="phone"></ion-input>
          </ion-item>
        <div class="er_req textCenter" *ngIf="editForm.controls.phone.invalid && (editForm.get('phone').dirty || editForm.get('phone').touched)">
            {{'profile.Enter a valid Mobile'|translate}}
        </div>

          <ion-item>
              <ion-input type="email" placeholder="{{'profile.Email'|translate}}" formControlName="email"></ion-input>
          </ion-item>
        <div class="er_req textCenter" *ngIf="editForm.controls.email.invalid && (editForm.get('email').dirty || editForm.get('email').touched)">
            {{'profile.Enter a valid Email'|translate}}
        </div>

        <ion-item>
            <ion-datetime displayFormat="DD MMM YYYY" placeholder="{{'profile.Date of Birth'|translate}}" min="1950" max={{maxDate}} formControlName="dob">
            </ion-datetime>
        </ion-item>
        <div class="er_req textCenter" *ngIf="editForm.controls.dob.invalid && (editForm.get('dob').dirty || editForm.get('dob').touched)">
            {{'profile.Select your DOB'|translate}}
        </div>
    <div radio-group formControlName="gender" class="gender_radio">

        <div class="floatLeft">
            <ion-radio value="male" checked class="floatLeft"></ion-radio>
            <ion-label class="floatLeft">{{'profile.Male'|translate}}</ion-label>
            <div class="clear"></div>
        </div>
        <div class="floatLeft">
            <ion-radio value="female" class="floatLeft"></ion-radio>
            <ion-label class="floatLeft">{{'profile.Female'|translate}}</ion-label>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
            

          <ion-item>
              <ion-input type="text" placeholder="{{'profile.License Number'|translate}}" formControlName="license"></ion-input>
          </ion-item>
        <div class="er_req textCenter" *ngIf="editForm.controls.license.invalid && (editForm.get('license').dirty || editForm.get('license').touched)">
            {{'profile.Enter a valid License Number'|translate}}
        </div>

          <ion-item>
              <ion-select formControlName="cartype" placeholder="{{'profile.Car Type'|translate}}">
                  <ion-option value={{car.car_type}} *ngFor="let car of cars">{{car.car_type}}</ion-option>
              </ion-select>
          </ion-item>
        <div class="er_req textCenter" *ngIf="editForm.controls.cartype.invalid && (editForm.get('cartype').dirty || editForm.get('cartype').touched)">
            {{'profile.Select a valid Car Type'|translate}}
        </div>

        <ion-item>
            <ion-input type="text" placeholder="{{'profile.Car Number'|translate}}" formControlName="car_no"></ion-input>
        </ion-item>
        <div class="er_req textCenter" *ngIf="editForm.controls.car_no.invalid && (editForm.get('car_no').dirty || editForm.get('car_no').touched)">
            {{'profile.Enter a valid Car Number'|translate}}
        </div>
          
          <br>
          <!-- <button ion-button class="primary theme_dark_bg" (click)="updateProfile()">SAVE</button> -->
        <div class="jr_bottom_button_bay">
            <button ion-button class="cab_footer_btn" (click)="updateProfile()">{{'profile.SAVE'|translate}}</button>
        </div>
        </div>
    </form>
  </div>

</ion-content>
