<div class="purchase_wrapper">
  <div class="container-fluid">
    <div class="loader_overlay" *ngIf="loader"></div>
    <div class="add_address_wrapper">
      <form [formGroup]="addaddressForm" (ngSubmit)="addressFormSubmit(addaddressForm.value)">
        <h4>Add New Address</h4>
        <div class="row">
          <div class="col-md-6">
            <p>Name*</p>
            <input class="" type="text" formControlName="name" 
            [ngClass]="{'input_error': !addaddressForm.controls['name'].valid && (addaddressForm.controls['name'].dirty || addaddressForm.controls['name'].touched || addressSubmitClick),
                        'input_success': addaddressForm.controls['name'].valid}" (click)="addressSubmitClick = false">
              <div class="s_error" *ngIf="(!addaddressForm.controls['name'].valid && addaddressForm.controls['name'].touched) || (!addaddressForm.controls['name'].valid && addressSubmitClick)">
                  <div class="s_validation" *ngIf="addaddressForm.controls['name'].hasError('required')">{{errorMsg.errorList.required}} </div>
              </div>
          </div>
          <div class="col-md-6">
            <p>Phone Number*</p>
            <input class="" type="text" formControlName="phone_no" 
            [ngClass]="{'input_error': !addaddressForm.controls['phone_no'].valid && (addaddressForm.controls['phone_no'].dirty || addaddressForm.controls['phone_no'].touched || addressSubmitClick),
                        'input_success': addaddressForm.controls['phone_no'].valid}" (click)="addressSubmitClick = false">
            <div class="s_error" *ngIf="(!addaddressForm.controls['phone_no'].valid && addaddressForm.controls['phone_no'].touched) || (!addaddressForm.controls['phone_no'].valid && addressSubmitClick)">
                <div class="s_validation" *ngIf="addaddressForm.controls['phone_no'].hasError('required')">{{errorMsg.errorList.required}} </div>
                <div class="s_validation" *ngIf="addaddressForm.controls['phone_no'].hasError('pattern')">{{errorMsg.errorList.valid}} Mobile Number</div>
              </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <p>House number or Building number*</p>
            <input class="" type="text" formControlName="house_no" 
            [ngClass]="{'input_error': !addaddressForm.controls['house_no'].valid && (addaddressForm.controls['house_no'].dirty || addaddressForm.controls['house_no'].touched || addressSubmitClick),
                        'input_success': addaddressForm.controls['house_no'].valid}" (click)="addressSubmitClick = false">
              <div class="s_error" *ngIf="(!addaddressForm.controls['house_no'].valid && addaddressForm.controls['house_no'].touched) || (!addaddressForm.controls['house_no'].valid && addressSubmitClick)">
                  <div class="s_validation" *ngIf="addaddressForm.controls['house_no'].hasError('required')">{{errorMsg.errorList.required}} </div>
              </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <p>Area, Road or Colony*</p>
            <input class="" type="text" formControlName="area" 
            [ngClass]="{'input_error': !addaddressForm.controls['area'].valid && (addaddressForm.controls['area'].dirty || addaddressForm.controls['area'].touched || addressSubmitClick),
                        'input_success': addaddressForm.controls['area'].valid}" (click)="addressSubmitClick = false">
              <div class="s_error" *ngIf="(!addaddressForm.controls['area'].valid && addaddressForm.controls['area'].touched) || (!addaddressForm.controls['area'].valid && addressSubmitClick)">
                  <div class="s_validation" *ngIf="addaddressForm.controls['area'].hasError('required')">{{errorMsg.errorList.required}} </div>
              </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <p>City*</p>
            <input class="" type="text" formControlName="city" 
            [ngClass]="{'input_error': !addaddressForm.controls['city'].valid && (addaddressForm.controls['city'].dirty || addaddressForm.controls['city'].touched || addressSubmitClick),
                        'input_success': addaddressForm.controls['city'].valid}" (click)="addressSubmitClick = false">
            <div class="s_error" *ngIf="(!addaddressForm.controls['city'].valid && addaddressForm.controls['city'].touched) || (!addaddressForm.controls['city'].valid && addressSubmitClick)">
                <div class="s_validation" *ngIf="addaddressForm.controls['city'].hasError('required')">{{errorMsg.errorList.required}} </div>
            </div>
          </div>
          <div class="col-md-6">
            <p>State*</p>
            <input class="" type="text" formControlName="state" 
            [ngClass]="{'input_error': !addaddressForm.controls['state'].valid && (addaddressForm.controls['state'].dirty || addaddressForm.controls['state'].touched || addressSubmitClick),
                        'input_success': addaddressForm.controls['state'].valid}" (click)="addressSubmitClick = false">
            <div class="s_error" *ngIf="(!addaddressForm.controls['state'].valid && addaddressForm.controls['state'].touched) || (!addaddressForm.controls['state'].valid && addressSubmitClick)">
                <div class="s_validation" *ngIf="addaddressForm.controls['state'].hasError('required')">{{errorMsg.errorList.required}} </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <p>Land mark <span>(Optional)</span></p>
            <input class="" type="text" formControlName="landmark" (click)="addressSubmitClick = false">
          </div>
        </div>
        <div class="row">
          <div class="col-md-2"></div>
          <div class="col-md-5">
            <input class="custom_checkbox" id="custom_checkbox_1" name="address_type" type="radio" value="1" formControlName="address_type">
            <label for="custom_checkbox_1">Home</label>
          </div>
          <div class="col-md-5">
            <input class="custom_checkbox" id="custom_checkbox_2" name="address_type" type="radio" value="2" formControlName="address_type">
            <label for="custom_checkbox_2">Office</label>
          </div>
        </div>
        <div *ngIf="addressResponse" class="s_alert" [ngClass]="(addressResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
            <strong>{{addressResponse.message}}<br></strong>
        </div>
        <div class="row">
          <div class="col-md-6">
            <!-- <button type="submit" class="btn_cart"  (click)="goToPage('address')">Add Address</button> -->

            <button type="submit" class="btn_cart"  (click)="addressSubmitClick = true">{{address_id > 0?'Update Address' : 'Add Address'}}</button>
          </div>
          <div class="col-md-6">
            <button class="add_btn" (click)="goToPage('address')">Cancel</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>