<title>Customers</title>
<div *ngIf="customerId else Add">
  <app-breadcrumb [title]="'Customers'" [items]="[{'name':'Customers', 'route':'/customers'}]"
    [active_item]="'Edit'"></app-breadcrumb>
</div>
<ng-template #Add>
  <app-breadcrumb [title]="'Customer'" [items]="[{'name':'Customers', 'route':'/customers'}]"
    [active_item]="'Add'"></app-breadcrumb>
</ng-template>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <app-alert *ngIf="isAlert" class="alert-top" [alertType]="alertType" [alertErrorMessage]="alertMessage">
      </app-alert>
      <div class="card">
        <div class="p-4">
          <form [formGroup]="customerform">

            <div>
              <h2>{{'lbl_personal_detail'| translate}}</h2>
              <div class="form-row">
                <div class="col-lg-2 col-md-2 col-sm-12">
                  <div class="form-row">
                    <div class="form-group">
                      <div class="main-contact-info-header p-2">
                        <div *ngIf="!url else upload">
                          <img src="../../../assets/admin/images/userprofile.png" class="rounded-pill" width="105px"
                            height="105px" alt="" (click)="fileInput.click()" />
                        </div>
                        <ng-template #upload>
                          <img [src]="url" class="rounded-pill" width="105px" height="105px" alt=""
                            (click)="fileInput.click()" />
                        </ng-template>
                      </div>
                      <a>
                        <input type="file" #fileInput id="uploadFile" name="profilePicUrl" accept="image/*"
                          style="display:none;" (change)="selectedImage($event)" />
                      </a>
                      <div class="center">
                        <button class="p-2 text-black" *ngIf="this.url && this.url.length > 0" (click)="removeImage()"
                          style="text-align:center; border: none; border-radius:40%; font-size: 20px;">
                          <i class="icon-trash"></i>
                        </button>
                        <button class="p-2 text-black" *ngIf="!this.url"
                          style="text-align:center; border: none; border-radius:40%; font-size: 18px;">
                          <i class="icon-gallery" (click)="fileInput.click()"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-10 col-md-10 col-sm-12">
                  <div class="form-row">
                    <div class="form-group col-md-6">
                      <label for="fullName">{{'lbl_full_name'| translate}} <span style="color: red;">*</span></label>
                      <input class="form-control" type="text" id="fullName" name="fullName" formControlName="fullName"
                        onlyAlphabets placeholder="{{'lbl_type_here'| translate}}" required />
                      <mat-error
                        *ngIf="(customerform.get('fullName') && !customerform.get('fullName')?.valid && customerform.get('fullName')?.touched)">
                        {{'message_lbl_full_name_is_required'| translate}}
                      </mat-error>
                    </div>
                    <div class="form-group col-md-6">
                      <label for="contactNo">{{'lbl_contact_no'| translate}} <span style="color: red;">*</span></label>
                      <input class="form-control" type="text" maxlength="10" minlength="10" id="contactNo"
                        name="contactNo" formControlName="contactNo"
                        placeholder="{{ 'placeholder_lbl_enter_your_contact_no' |translate}}" ContactNo required>
                      <mat-error
                        *ngIf="(customerform.get('contactNo') && !customerform.get('contactNo')!.valid  && customerform.get('contactNo')!.touched)">
                        <span *ngIf="customerform.get('contactNo')!.errors!['required']">
                          {{'message_lbl_contact_no_is_required'| translate}}</span>
                        <span
                          *ngIf="customerform.get('contactNo')!.errors!['minlength']">{{'message_lbl_enter_valid_contact_no'|
                          translate}}</span>
                      </mat-error>
                    </div>
                  </div>
                  <form [formGroup]="customFieldForm">
                    <div class="row mx-0">
                      <ng-container *ngFor="let controlName of customFieldForm?.controls | keyvalue;let i = index">
                        <div class="col-md-4 pl-0">
                          <div class="form-group">
                            <label>{{ controlName.key | titlecase }}</label>
                            <ng-container *ngIf="hints[i]">
                              <a class="systooltip"><i class="fa fa-info-circle w-4 h-4 ml-1"
                                  style="margin-top:4px"></i>
                                <span class="tooltiptext">{{hints[i]
                                  }}</span>
                              </a>
                            </ng-container>
                            <input class="form-control" [formControlName]="controlName.key" type="text">
                            <mat-error
                              *ngIf="(customFieldForm.get(controlName.key) && !customFieldForm.get(controlName.key)!.valid  && customFieldForm.get(controlName.key)!.touched)">
                              <span
                                *ngIf="customFieldForm.get(controlName.key)!.errors?.['required']">{{controlName.key}}
                                is required</span>
                              <span
                                *ngIf="customFieldForm.get(controlName.key)!.errors?.['pattern']">{{controlName.key}}
                                is invalid</span>
                            </mat-error>
                          </div>
                        </div>
                      </ng-container>
                    </div>
                  </form>
                  <div class="form-row">
                    <div class="form-group col-md-6">
                      <label for="email">{{'lbl_email'| translate}}</label>
                      <input class="form-control" type="text" id="email" formControlName="email"
                        placeholder="Enter your email">
                    </div>
                    <div class="form-group col-md-6">
                      <label>{{'lbl_date_of_birth'| translate}} <span style="color: red;">*</span></label>
                      <mat-form-field appearance="outline" class="birthdate w-100"
                        (click)="toggleMenuService.togglePickerStyles()">
                        <input matInput [matDatepicker]="filterPickerFrom" placeholder="Select Birthdate"
                          formControlName="birthDate" name="birthDate" [readonly]="true"
                          (focus)="filterPickerFrom.open()"
                          (click)="filterPickerFrom.open();toggleMenuService.togglePickerStyles()">
                        <mat-datepicker-toggle matSuffix [for]="filterPickerFrom"
                          (click)="toggleMenuService.togglePickerStyles()">
                        </mat-datepicker-toggle>
                        <mat-datepicker #filterPickerFrom></mat-datepicker>
                      </mat-form-field>
                      <mat-error
                        *ngIf="(customerform.get('birthDate') && !customerform.get('birthDate')?.valid && customerform.get('birthDate')?.touched)">
                        {{'message_lbl_birthdate_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="form-group col-md-4">
                      <label for="maritalStatusId">{{'lbl_marital_status'| translate}} <span
                          style="color: red;">*</span></label>
                      <ng-select [items]="maritalStatuses" class="js-example-basic-single p-0"
                        placeholder="{{ 'lbl_select_marital_status' | translate}}" bindLabel="status" bindValue="id"
                        name="maritalStatusId" formControlName="maritalStatusId"></ng-select>
                      <mat-error
                        *ngIf="(customerform.get('maritalStatusId') && !customerform.get('maritalStatusId')?.valid && customerform.get('maritalStatusId')?.touched)">
                        {{'message_lbl_marital_status_is_required'| translate}}
                      </mat-error>
                    </div>
                    <div class="form-group col-md-4">
                      <label for="fullName">{{'lbl_cibil_score'| translate}}</label>
                      <input class="form-control" type="text" id="cibilScore" name="cibilScore"
                        formControlName="cibilScore" onlyNumbers placeholder="{{'lbl_type_here'| translate}}" />
                    </div>
                    <div class="form-group col-md-4" style="padding-left: 30px;">
                      <label for="gender">{{'lbl_gender'| translate}} <span style="color: red;">*</span></label>
                      <div>
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" id="radioinline1" type="radio" value="Male" name="gender"
                            formControlName="gender">
                          <label class="form-check-label" for="radioinline1">{{'lbl_male'|
                            translate}}</label>
                        </div>
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" id="radioinline2" type="radio" value="Female" name="gender"
                            formControlName="gender">
                          <label class="form-check-label" for="radioinline2">{{'lbl_female'|
                            translate}}</label>
                        </div>
                      </div>
                      <mat-error
                        *ngIf="(customerform.get('gender') && !customerform.get('gender')?.valid && !customerform.get('gender')?.touched)">
                        {{'message_lbl_gender_is_required'| translate}}
                      </mat-error>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <h2>{{'lbl_address'| translate}}</h2>
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <label for="label">{{'lbl_company_name'| translate}} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="email" formControlName="label"
                      placeholder="{{ 'lbl_type_here' |translate}}" required>
                    <mat-error
                      *ngIf="(customerform.get('label') && !customerform.get('label')?.valid && customerform.get('label')?.touched)">
                      {{'message_lbl_company_name_is_required'| translate}} is required
                    </mat-error>
                  </div>
                  <div class="form-group col-md-6">
                    <label for="pincode">{{'lbl_pincode'| translate}} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="pincode" formControlName="pincode"
                      placeholder="{{'lbl_type_here'| translate}}" required (keyup)="onKeyUpEvent($event,true)"
                      onlyNumbers>
                    <mat-error
                      *ngIf="(customerform.get('pincode') && !customerform.get('pincode')?.valid && customerform.get('pincode')?.touched)">
                      {{'message_lbl_pincode_is_required'| translate}}
                    </mat-error>
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-group col-md-6">
                    <label for="addressLine1">{{'lbl_address_line1'| translate}} <span
                        style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="addressLine1" formControlName="addressLine1"
                      placeholder="{{'lbl_type_here'| translate}}" name="addressLine1" required />
                    <mat-error
                      *ngIf="(customerform.get('addressLine1') && !customerform.get('addressLine1')?.valid && customerform.get('addressLine1')?.touched)">
                      {{'message_lbl_address_line_1_is_required'| translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col-md-6">
                    <label for="addressLine2">{{'lbl_address_line_2'| translate}}</label>
                    <input class="form-control" type="text" id="addressLine2" formControlName="addressLine2"
                      placeholder="{{'lbl_type_here'| translate}}" name="addressLine2" />
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-group col-md-4">
                    <label for="cityId">{{'lbl_city'| translate}} <span style="color: red;">*</span></label>
                    <ng-select [items]="cities" class="js-example-basic-single p-0"
                      placeholder="{{ 'lbl_select_city' |translate}}" bindLabel="name" bindValue="id" name="cityId"
                      formControlName="cityId" name="cityId"></ng-select>
                    <mat-error
                      *ngIf="(customerform.get('cityId') && !customerform.get('cityId')?.valid && customerform.get('cityId')?.touched)">
                      {{'message_lbl_city_is_required'| translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col-md-4">
                    <label for="districtName">{{'lbl_district'| translate}} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="districtName" formControlName="districtName"
                      placeholder="{{'lbl_type_here'| translate}}" required>
                    <mat-error
                      *ngIf="(customerform.get('districtName') && !customerform.get('districtName')?.valid && customerform.get('districtName')?.touched)">
                      {{'message_lbl_district_is_required'| translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col-md-4">
                    <label for="state">{{'lbl_state'| translate}} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="state" formControlName="state"
                      placeholder="{{'lbl_type_here'| translate}}" required>
                    <mat-error
                      *ngIf="(customerform.get('state') && !customerform.get('state')?.valid && customerform.get('state')?.touched)">
                      {{'message_lbl_state_is_required'| translate}}
                    </mat-error>
                  </div>
                </div>
              </div>

              <div class="modal-footer">
                <button class="btn btn-info filterbtn btn-sm" type="submit" (click)="insertCustomer(customerform)">
                  {{'button_lbl_save'| translate}}
                </button>
                <button class="btn btn-secondary filterbtn btn-sm" type="reset" (click)="cancelUser()">
                  {{'button_lbl_cancel'| translate}}
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>