<title>Connector</title>
<div *ngIf="paramid else Add">
  <app-breadcrumb [title]="'Connector'" [items]="[{'name':'Connectors', 'route':'/connectors'}]" [active_item]="'Edit'">
  </app-breadcrumb>
</div>
<ng-template #Add>
  <app-breadcrumb [title]="'Connector'" [items]="[{'name':'Connectors', 'route':'/connectors'}]" [active_item]="'Add'">
  </app-breadcrumb>
</ng-template>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <div class="card">
        <div class="p-4">
          <form [formGroup]="connectorform">
            <div>
              <h2>{{ 'lbl_personal_detail' | translate}}</h2>
              <div class="form-row">
                <div class="col-lg-2 col-sm-12">
                  <div class="form-row">
                    <div class="form-group">
                      <div class="main-contact-info-header pt-3">
                        <div *ngIf="!url else upload">
                          <img src="../../../assets/admin/images/userprofile.png" class="rounded-pill" width="120px"
                            height="120px" alt="" (click)="fileInput.click()" />
                        </div>
                        <ng-template #upload>
                          <img [src]="url" class="rounded-pill" width="120px" height="120px" alt=""
                            (click)="fileInput.click()" />
                        </ng-template>
                      </div>
                      <a>
                        <input type="file" #fileInput id="uploadFile" (change)="selectedImage($event)"
                          name="profilePicUrl" accept="image/*" style="display:none;" />
                      </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 class="form-row">
                    <div class="form-group">
                      <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="(connectorform.get('gender') && !connectorform.get('gender')?.valid && connectorform.get('gender')?.touched)">
                        {{ 'message_lbl_gender_is_required' | translate}}
                      </mat-error>
                    </div>
                  </div>
                </div>
                <div class="col-lg-10 col-md-10">
                  <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="(connectorform.get('fullName') && !connectorform.get('fullName')?.valid && connectorform.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="0" id="contactNo"
                        name="contactNo" formControlName="contactNo"
                        placeholder="{{ 'placeholder_lbl_enter_your_contact_no' |translate}}" ContactNo required>
                      <mat-error
                        *ngIf="(connectorform.get('contactNo') && !connectorform.get('contactNo')!.valid  && connectorform.get('contactNo')!.touched)">
                        <span *ngIf="connectorform.get('contactNo')!.errors!['required']">
                          {{ 'message_lbl_contact_no_is_required' | translate}}</span>
                        <span
                          *ngIf="connectorform.get('contactNo')!.errors!['minlength']">{{'message_lbl_enter_valid_contact_no'
                          | translate}}</span>
                      </mat-error>
                    </div>
                    <!-- <div class="form-group col-md-4">
                      <label for="aadhaarCardNo">{{ 'Aadhaar Card No' | translate}} <span
                          style="color: red;">*</span></label>
                      <input class="form-control" type="text" id="aadhaarCardNo" formControlName="aadhaarCardNo"
                        placeholder="{{'lbl_type_here'| translate}}" maxlength="12" onlyNumbers required>
                      <mat-error
                        *ngIf="(connectorform.get('aadhaarCardNo') && !connectorform.get('aadhaarCardNo')?.valid && connectorform.get('aadhaarCardNo')?.touched)">
                        {{ 'message_lbl_aadhar_card_no_is_required' | translate}}
                      </mat-error>
                    </div>
                    <div class="form-group col-md-4">
                      <label for="panCardNo">{{ 'lbl_pan_card_no' | translate}} <span
                          style="color: red;">*</span></label>
                      <input class="form-control" type="text" id="panCardNo" formControlName="panCardNo"
                        placeholder="{{ 'placeholder_lbl_enter_pan_no' |translate}}" maxlength="10"
                        (keypress)="keyPressAlphanumeric($event)" oninput="this.value = this.value.toUpperCase()"
                        required>
                      <mat-error
                        *ngIf="(connectorform.get('panCardNo') && !connectorform.get('panCardNo')?.valid && connectorform.get('panCardNo')?.touched)">
                        {{ 'message_lbl_pan_card_no_is_required' | translate}}
                      </mat-error>
                    </div> -->
                    <div class="form-group col-md-4">
                      <label>{{ 'lbl_job_type' | translate}} <span style="color: red;">*</span></label>
                      <div>
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" id="radioinline2" type="radio" value="FullTime" name="jobType"
                            formControlName="jobType">
                          <label class="form-check-label" for="radioinline2">{{'lbl_full_time' | translate}}</label>
                        </div>
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" id="radioinline1" type="radio" value="PartTime" name="jobType"
                            formControlName="jobType">
                          <label class="form-check-label" for="radioinline1">{{'lbl_part_time' | translate}}</label>
                        </div>
                      </div>

                    </div>

                  </div>
                  <form [formGroup]="customFieldForm">
                    <div class="row">
                      <ng-container *ngFor="let controlName of customFieldForm?.controls | keyvalue;let i= index">
                        <div class="col-lg-4 col-md-6 col-sm-12">
                          <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>
              </div>
            </div>

            <div>
              <h2>{{ 'lbl_address' | translate}}</h2>
              <div class="form-group">
                <label for="label">{{ 'lbl_company_name' | translate}} <span style="color: red;">*</span></label>
                <input class="form-control" type="text" id="label" formControlName="label"
                  placeholder="{{ 'lbl_type_here' |translate}}" onlyAlphabets required>
                <mat-error
                  *ngIf="(connectorform.get('label') && !connectorform.get('label')?.valid && connectorform.get('label')?.touched)">
                  {{ 'message_lbl_company_name_is_required is required' | translate}}
                </mat-error>
              </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="(connectorform.get('addressLine1') && !connectorform.get('addressLine1')?.valid && connectorform.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">
                  <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}}" maxlength="6" onlyNumbers
                    (keyup)="onKeyUpEvent($event,true)" required>
                  <mat-error
                    *ngIf="(connectorform.get('pincode') && !connectorform.get('pincode')?.valid && connectorform.get('pincode')?.touched)">
                    {{ 'message_lbl_pincode_is_required' | translate}}
                  </mat-error>
                </div>
                <div class="form-group col">
                  <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="(connectorform.get('cityId') && !connectorform.get('cityId')?.valid && connectorform.get('cityId')?.touched)">
                    {{ 'message_lbl_city_is_required' | translate}}
                  </mat-error>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col">
                  <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="(connectorform.get('districtName') && !connectorform.get('districtName')?.valid && connectorform.get('districtName')?.touched)">
                    {{ 'message_lbl_district_is_required' | translate}}
                  </mat-error>
                </div>
                <div class="form-group col">
                  <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="(connectorform.get('state') && !connectorform.get('state')?.valid && connectorform.get('state')?.touched)">
                    {{ 'message_lbl_state_is_required' | translate}}
                  </mat-error>
                </div>
              </div>
            </div>

            <div>
              <h2>{{ 'lbl_other_detail' | translate}}</h2>
              <div class="form-group">
                <label for="commitment">{{ 'lbl_business_commitment_in_amount' | translate}} <span
                    style="color: red;">*</span></label>
                <input class="form-control" type="text" id="commitment" formControlName="commitment"
                  placeholder="{{ 'placeholder_lbl_enter_your_commitment' |translate}}" onlyNumbers required>
                <mat-error
                  *ngIf="(connectorform.get('commitment') && !connectorform.get('commitment')?.valid && connectorform.get('commitment')?.touched)">
                  {{ 'message_lbl_business_commitment_is_required' | translate}}
                </mat-error>
              </div>
            </div>

            <div>
              <h2>{{ 'lbl_bank_detail' | translate}}</h2>
              <div class="form-row">
                <div class="form-group col-md-6">
                  <label for="accountHolderName">{{ 'lbl_account_holder_name' | translate}}</label>
                  <input class="form-control" type="text" id="accountHolderName" formControlName="accountHolderName"
                    placeholder="{{'lbl_type_here'| translate}}" onlyAlphabets>
                </div>
                <div class="form-group col-md-6">
                  <label for="bankId">{{ 'lbl_bank' | translate}}</label>
                  <ng-select [items]="banks" class="js-example-basic-single p-0"
                    placeholder="{{'lbl_select_bank'| translate}}" bindLabel="name" bindValue="id" name="bankId"
                    formControlName="bankId"></ng-select>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-md-6">
                  <label for="accountNo">{{ 'lbl_account_no' | translate}}</label>
                  <input class="form-control" type="text" id="accountNo" formControlName="accountNo"
                    placeholder="{{'lbl_type_here'| translate}}" onlyNumbers>
                </div>
                <div class="form-group col-md-6">
                  <label for="ifscCode">{{ 'lbl_ifsc_code' | translate}}</label>
                  <input class="form-control" type="text" id="ifscCode" formControlName="ifscCode"
                    placeholder="{{'lbl_type_here'| translate}}" (keypress)="keyPressAlphanumeric($event)"
                    oninput="this.value = this.value.toUpperCase()">
                </div>
              </div>
            </div>

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


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