<title>leads</title>
<div *ngIf="leadId else Add">
  <app-breadcrumb [title]="'Leads'" [items]="[{'name':'Leads', 'route':'/leads'}]"
    [active_item]="'Edit'"></app-breadcrumb>
</div>
<ng-template #Add>
  <app-breadcrumb [title]="'Leads'" [items]="[{'name':'Leads', 'route':'/leads'}]"
    [active_item]="'Add'"></app-breadcrumb>
</ng-template>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <div class="card">
        <div class="card-body">
          <form [formGroup]="leadForm">
            <div class="row mx-0">
              <div class="col-lg-6 col-md-6">
                <div class="form-group">
                  <label for="name">{{'Full Name'| translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" formControlName="customerFullName" required onlyAlphabets>
                  <mat-error
                    *ngIf="(leadForm.get('customerFullName') && !leadForm.get('customerFullName')!.valid  && leadForm.get('customerFullName')!.touched)">
                    <span *ngIf="leadForm.get('customerFullName')!.errors!['required']">{{'CustomerName
                      is Required'| translate}}</span>
                  </mat-error>
                </div>
              </div>
              <div class="col-lg-6 col-md-6">
                <div class="form-group">
                  <label for="name">{{'lbl_contact_no'| translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" name="contact" formControlName="contactNo" ContactNo required>
                  <mat-error
                    *ngIf="(leadForm.get('contactNo') && !leadForm.get('contactNo')!.valid  && leadForm.get('contactNo')!.touched)">
                    <span *ngIf="leadForm.get('contactNo')!.errors!['required']">
                      {{'message_lbl_contact_no_is_required'| translate}}</span>
                    <span
                      *ngIf="leadForm.get('contactNo')!.errors!['minlength']">{{'message_lbl_enter_valid_contact_no'|
                      translate}}</span>
                  </mat-error>
                </div>
              </div>
            </div>
            <div class="row mx-0">
              <div class="col-lg-6 col-md-6">
                <div class="form-group">
                  <label for="name">{{'lbl_email'| translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" name="name" formControlName="email" required>
                  <mat-error
                    *ngIf="(leadForm.get('email') && !leadForm.get('email')!.valid  && leadForm.get('email')!.touched)">
                    <span *ngIf="leadForm.get('email')!.errors!['required']">{{'message_lbl_email_is_required'|
                      translate}}</span>
                    <span *ngIf="leadForm.get('email')!.errors?.['pattern']">{{'message_lbl_invalid_email'|
                      translate}}</span>
                  </mat-error>
                </div>
              </div>
              <div class="col-lg-6 col-md-6">
                <div class="form-group">
                  <label>{{'lbl_select_employment_type'| translate}} <span style="color: red;">*</span></label>
                  <ng-select [items]="employmentTypes" class="js-example-basic-single p-0"
                    formControlName="employmentTypeId"
                    placeholder="{{ 'placeholder_lbl_select_employment_type' |translate}}" bindLabel="name"
                    bindValue="id" groupBy="parentName" name="commissionType" required>
                  </ng-select>
                  <mat-error
                    *ngIf="(leadForm.get('employmentTypeId') && !leadForm.get('employmentTypeId')!.valid && leadForm.get('employmentTypeId')!.touched)">
                    {{'message_lbl_employment_type_is_required'| translate}}
                  </mat-error>
                </div>
              </div>
            </div>
            <div class="row mx-0">
              <div class="col-lg-6 col-md-6">
                <div class="form-group">
                  <label>{{'lbl_select_loan_type'| translate}} <span style="color: red;">*</span></label>
                  <ng-select [items]="services" class="js-example-basic-single p-0" formControlName="serviceId"
                    placeholder="{{ 'lbl_select_loan_type' |translate}}" bindLabel="name" bindValue="id" required>
                  </ng-select>
                  <mat-error
                    *ngIf="(leadForm.get('serviceId') && !leadForm.get('serviceId')!.valid && leadForm.get('serviceId')!.touched)">
                    {{'message_lbl_loan_type_is_required'| translate}}
                  </mat-error>
                </div>
              </div>
              <div class="col-lg-6 col-md-6">
                <div class="form-group">
                  <label for="name">{{'lbl_loan_amount'| translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" name="name" formControlName="loanAmount" required onlyNumbers>
                  <mat-error
                    *ngIf="(leadForm.get('loanAmount') && !leadForm.get('loanAmount')!.valid  && leadForm.get('loanAmount')!.touched)">
                    <span
                      *ngIf="leadForm.get('loanAmount')!.errors!['required']">{{'message_lbl_loan_amount_is_required'|
                      translate}}</span>
                  </mat-error>
                </div>
              </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-6">
                    <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="row mx-0">
              <div class="col-lg-6 col-md-6">
                <div class="form-group">
                  <label>{{'lbl_label'| translate}}</label>
                  <input class="form-control" type="text" formControlName="label">
                </div>
              </div>
              <div class="col-lg-6 col-md-6">
                <div class="form-group">
                  <label for="name">{{'lbl_address_line1'| translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" name="name" formControlName="addressLine1" required>
                  <mat-error
                    *ngIf="(leadForm.get('addressLine1') && !leadForm.get('addressLine1')!.valid  && leadForm.get('addressLine1')!.touched)">
                    <span *ngIf="leadForm.get('addressLine1')!.errors!['required']">{{'message_lbl_address_is_required'|
                      translate}}</span>
                  </mat-error>
                </div>
              </div>
            </div>
            <div class="row mx-0">
              <div class="col-lg-6 col-md-6">
                <div class="form-group">
                  <label for="name">{{'lbl_address_line_2'| translate}}</label>
                  <input class="form-control" type="text" name="name" formControlName="addressLine2">
                </div>
              </div>
              <div class="col-lg-6 col-md-6">
                <div class="form-group">
                  <label for="name">{{'lbl_pincode'| translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" formControlName="pincode" (keyup)="onKeyUpEvent($event,true)"
                    onlyNumbers maxlength="6" required>
                  <mat-error
                    *ngIf="(leadForm.get('pincode') && !leadForm.get('pincode')!.valid  && leadForm.get('pincode')!.touched)">
                    <span *ngIf="leadForm.get('pincode')!.errors!['required']">{{'message_lbl_pincode_is_required'|
                      translate}}</span>
                    <span *ngIf="leadForm.get('pincode')!.errors!['minlength']">{{'message_lbl_enter_valid_pincode'
                      |translate}}</span>
                  </mat-error>
                </div>
              </div>
            </div>
            <div class="row mx-0">
              <div class="col-lg-4 col-md-6">
                <div class="form-group">
                  <div class="col-form-label">{{'lbl_select_city'| translate}} <span style="color: red;">*</span>
                  </div>
                  <ng-select [items]="cities" class="js-example-basic-single p-0"
                    placeholder="{{ 'lbl_select_city' |translate}}" bindLabel="name" bindValue="id" name="cityName"
                    required formControlName="cityId">
                  </ng-select>
                  <mat-error
                    *ngIf="(leadForm.get('cityId') && !leadForm.get('cityId')!.valid && leadForm.get('cityId')!.touched)">
                    {{'message_lbl_city_is_required'| translate}}
                  </mat-error>
                </div>
              </div>
              <div class="col-lg-4 col-md-6">
                <div class="form-group">
                  <label for="name">{{ 'lbl_district' |translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" formControlName="district" readonly required>
                  <mat-error
                    *ngIf="(leadForm.get('district') && !leadForm.get('district')!.valid && leadForm.get('district')!.touched)">
                    {{'message_lbl_district_is_required'| translate}}
                  </mat-error>
                </div>
              </div>

              <div class="col-lg-4 col-md-6">
                <div class="form-group">
                  <label for="name">{{'lbl_state'| translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" formControlName="state" readonly required>
                  <mat-error
                    *ngIf="(leadForm.get('state') && !leadForm.get('state')!.valid && leadForm.get('state')!.touched)">
                    {{'message_lbl_state_is_required'| translate}}
                  </mat-error>
                </div>
              </div>
            </div>
          </form>
        </div>
        <!-- </div> -->
        <div class="card-footer p-2">
          <button class="btn btn-secondary filterbtn btn-sm pull-right" type="reset" (click)="cancelUser()">
            {{'button_lbl_cancel'| translate}}
          </button>
          <button class="btn btn-info filterbtn btn-sm pull-right" type="submit" (click)="insertLead(leadForm)">
            {{'button_lbl_save'| translate}}
          </button>

        </div>
      </div>
    </div>
  </div>
</div>