<div class="createCustomer">
  <div class="createCustomer-header">
    <button class="back__btn" (click)="goBackToCustomerSearch()">Back to Customer Search</button>
  </div>
  <div class="createCustomer-unsavedheader" *ngIf="unsavedCustomerForm">
    <div class="row">
      <div class="col">
        <h3>Unsaved Changes</h3>
        <span>Do you want to save the changes you've made to this Customer?</span>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <button class="btn btn-secondary" (click)="cancelChanges()">Cancel</button>
      </div>
      <div class="col text-right">
        <button class="btn btn-secondary" (click)="ignoreChanges()">Ignore Changes</button>
        <button class="btn btn-primary" (click)="onCustomerCreateFormSubmit()">Save Changes</button>
      </div>
    </div>
  </div>
  
  <div class="createCustomer-form">
    <ng-container *ngIf="showSpinner">
      <app-spinner [message]="'Creating Customer...'"></app-spinner>
    </ng-container>
    
    <app-form-message-panel [status]="status" [message]="message"></app-form-message-panel>

    <form [formGroup]="customerForm" (ngSubmit)="onCustomerCreateFormSubmit()">
      <div class="row">
        <div class="col">
          <label for="dataSource"><span class="mandatory">*</span>
            <b>{{customerLabels?.customerForm_formLabelSource}}</b></label>
          <select formControlName="dataSource" required>
            <option value="" disabled>{{customerLabels?.customerForm_formLabelSource_placeholder}}</option>
            <option *ngFor="let obj of customerLabels.customerForm_formDDLSource">{{obj}}</option>
          </select>
          <div
            *ngIf="customerForm.controls['dataSource'].invalid && (customerForm.controls['dataSource'].dirty || customerForm.controls['dataSource'].touched)"
            class="error-msg">
            <div *ngIf="customerForm.controls['dataSource'].errors.required">
              {{customerLabels?.customerForm_formLabelSource_validation}}
            </div>
          </div>
        </div>
        <div class="col">
          <label for="email"><span
              class="mandatory">*</span><b>{{customerLabels?.customerForm_formLabelEmail}}</b></label>
          <input type="text" class="form-control" formControlName="email"
            placeholder={{customerLabels.customerForm_formLabelEmail_placeHolder}} required />
          <div
            *ngIf="customerForm.controls['email'].invalid && (customerForm.controls['email'].dirty || customerForm.controls['email'].touched)"
            class="error-msg">
            <div *ngIf="customerForm.controls['email'].errors.required">
              {{customerLabels?.customerForm_formLabelEmail_validation}}</div>
            <div [hidden]="!customerForm.controls['email'].errors.patternInvalid">
              {{customerLabels?.customerForm_formLabelEmail_invalid}}</div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <label for="lastName"><span
              class="mandatory">*</span><b>{{customerLabels?.customerForm_formLabelLastName}}</b></label>
          <input type="text" class="form-control" formControlName="lastName"
            placeholder={{customerLabels.customerForm_formLabelLastName_placeHolder}} required />
          <div
            *ngIf="customerForm.controls['lastName'].invalid && (customerForm.controls['lastName'].dirty || customerForm.controls['lastName'].touched)"
            class="error-msg">
            <div *ngIf="customerForm.controls['lastName'].errors.required">
              {{customerLabels?.customerForm_formLabelLastName_validation}}
            </div>
          </div>
        </div>
        <div class="col">
          <label for="gender"><span
              class="mandatory">*</span><b>{{customerLabels?.customerForm_formLabelGender}}</b></label>
          <div class="createCustomer-checkbox">
            <!-- Default inline 1-->
            <div class="custom-control custom-radio custom-control-inline">
              <input type="radio" class="custom-control-input" id="defaultInline1" value="male" formControlName="gender"
                mdbInput>
              <label class="custom-control-label"
                for="defaultInline1">{{customerLabels?.customerForm_formRadioGender[0]}}</label>
            </div>

            <!-- Default inline 2-->
            <div class="custom-control custom-radio custom-control-inline">
              <input type="radio" class="custom-control-input" id="defaultInline2" value="female"
                formControlName="gender" mdbInput>
              <label class="custom-control-label"
                for="defaultInline2">{{customerLabels?.customerForm_formRadioGender[1]}}</label>
            </div>

            <!-- Default inline 3-->
            <div class="custom-control custom-radio custom-control-inline">
              <input type="radio" class="custom-control-input" id="defaultInline3" value="others"
                formControlName="gender" mdbInput>
              <label class="custom-control-label"
                for="defaultInline3">{{customerLabels?.customerForm_formRadioGender[2]}}</label>
            </div>
          </div>
          <div
            *ngIf="customerForm.controls['gender'].invalid && (customerForm.controls['gender'].dirty || customerForm.controls['gender'].touched)"
            class="error-msg">
            <div *ngIf="customerForm.controls['gender'].errors.required">
              {{customerLabels?.customerForm_formLabelGender_validation}}
            </div>
          </div>

        </div>
      </div>
      <div class="row createCustomer-phoneContainer">
        <div class="col createCustomer-mobile">
          <label for="countryCode"><span
              class="mandatory">*</span><b>{{customerLabels?.customerForm_formLabelMobileNumber}}</b></label>
          <select class="createCustomer-mobile_country" formControlName="countryCode" required>
            <option value="" disabled>Select</option>
            <option *ngFor="let obj of customerLabels.customerForm_formDDLCountryCode">{{obj}}</option>
          </select>
          <span class="createCustomer-mobile_hypen">-</span>
          <select class="createCustomer-mobile_city" formControlName="cityCode" required>
            <option value="" disabled>Select</option>
            <option *ngFor="let obj of customerLabels.customerForm_formDDLAreaCode">{{obj}}</option>
          </select>
          <span class="createCustomer-mobile_hypen">-</span>
          <input type="text" class="form-control createCustomer-mobile_area" formControlName="areaCode" placeholder=""
            required />
          <span class="createCustomer-mobile_hypen">-</span>
          <input type="text" class="form-control createCustomer-mobile_number" formControlName="number" placeholder=""
            required />

            <div
                *ngIf="(customerForm.controls['countryCode'].invalid && (customerForm.controls['countryCode'].dirty || customerForm.controls['countryCode'].touched))
                || (customerForm.controls['cityCode'].invalid && (customerForm.controls['cityCode'].dirty || customerForm.controls['cityCode'].touched))
                || (customerForm.controls['areaCode'].invalid && (customerForm.controls['areaCode'].dirty || customerForm.controls['areaCode'].touched))
                || (customerForm.controls['number'].invalid && (customerForm.controls['number'].dirty || customerForm.controls['number'].touched))"
                class="error-msg">
                <div >
                  Please enter valid number.
                </div>
              </div>
        </div>
        <div class="col">
          <label for="state"><span class="mandatory">*</span>
            <b>{{customerLabels?.customerForm_formLabelState}}</b></label>
          <select formControlName="state" required>
            <option value="" disabled>{{customerLabels?.customerForm_formLabelState_placeholder}}</option>
            <option *ngFor="let obj of customerLabels.customerForm_formDDLState">{{obj}}</option>
          </select>
          <div
            *ngIf="customerForm.controls['state'].invalid && (customerForm.controls['state'].dirty || customerForm.controls['state'].touched)"
            class="error-msg">
            <div *ngIf="customerForm.controls['state'].errors.required">
              {{customerLabels?.customerForm_formLabelState_validation}}
            </div>
          </div>
        </div>
      </div>
      <div class="row">
          <div class="col">
              
            </div>
        <!-- <div class="col">
          <div
            *ngIf="customerForm.controls['countryCode'].invalid && (customerForm.controls['countryCode'].dirty || customerForm.controls['countryCode'].touched)"
            class="error-msg">
            <div *ngIf="customerForm.controls['countryCode'].errors.required">
              Country Code is required.
            </div>
          </div>
          <div
            *ngIf="customerForm.controls['cityCode'].invalid && (customerForm.controls['cityCode'].dirty || customerForm.controls['cityCode'].touched)"
            class="error-msg">
            <div *ngIf="customerForm.controls['cityCode'].errors.required">
              City Code is required.
            </div>
          </div>
          <div
            *ngIf="customerForm.controls['areaCode'].invalid && (customerForm.controls['areaCode'].dirty || customerForm.controls['areaCode'].touched)"
            class="error-msg">
            <div *ngIf="customerForm.controls['areaCode'].errors.required">
              Area Code is required.
            </div>
          </div>
          <div
            *ngIf="customerForm.controls['number'].invalid && (customerForm.controls['number'].dirty || customerForm.controls['number'].touched)"
            class="error-msg">
            <div *ngIf="customerForm.controls['number'].errors.required">
              Number is required.
            </div>
          </div>
        </div> -->
        <div class="col createCustomer-btncontainer">
          <button _ngcontent-c4="" class="btn-primary" type="submit">
            <i _ngcontent-c4="" class="fa fa-save"></i> {{customerLabels?.customerForm_buttonSubmit}}</button>
        </div>
      </div>
    </form>
  </div>
</div>