<title>Connector</title>
<app-breadcrumb [title]="'Connector'" [items]="[{'name':'Connectors', 'route':'/connectors'}]" [active_item]="paramid">
</app-breadcrumb>
<div class="container-fluid">
  <div class="row">

    <div class="col-lg-4 col-md-6 col-sm-12 px-1">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-md-4 col-4">
              <div *ngIf="!dsas?.basicDetail?.profilePicUrl else upload">
                <img src="../../../assets/admin/images/userprofile.png" class="rounded-pill" width="80px" height="80px"
                  alt="" />
              </div>
              <ng-template #upload>
                <img [src]="dsas?.basicDetail?.profilePicUrl" class="rounded-pill" width="80px" height="80px" alt="" />
              </ng-template>
            </div>
            <div class="col-md-8 col-8" style="margin-top: 15px;">
              <h2 style="font-weight:500;  font-family: Georgia, serif; ">{{dsas?.basicDetail?.fullName}}</h2>
            </div>
          </div>
          <table class="table" style="margin-bottom: 5px; margin-top: 10px;" aria-label="basicDetail">
            <tbody>
              <tr>
                <td style="font-weight: 550;">{{ 'lbl_contact_no' | translate}}</td>
                <td>{{dsas?.basicDetail?.contactNo}}</td>
              </tr>
              <tr>
                <td style="font-weight: 550;">{{ 'lbl_gender' | translate}}</td>
                <td>{{dsas?.basicDetail?.gender}}</td>
              </tr>
              <!-- <tr>
                <td style="font-weight: 550;">{{ 'Aadhaar Card No' | translate}}</td>
                <td>{{dsas?.basicDetail?.aadhaarCardNo}}</td>
              </tr>
              <tr>
                <td style="font-weight: 550;">{{ 'lbl_pan_card_no' | translate}}</td>
                <td>{{dsas?.basicDetail?.panCardNo}}</td>
              </tr> -->
              <tr>
                <td style="font-weight: 550;">{{ 'lbl_job_type' | translate}}</td>
                <td>{{dsas?.basicDetail?.jobType}}</td>
              </tr>
              <tr>
                <td style="font-weight: 550;">{{ 'lbl_address' | translate}}</td>
                <td>{{dsas?.basicDetail?.companyName}}, {{dsas?.basicDetail?.partnerAddressLine1}}
                  <span *ngIf="dsas?.basicDetail?.partnerAddressLine2 != ''">
                    , {{dsas?.basicDetail?.partnerAddressLine2}}
                  </span>
                  <span>
                    {{dsas?.basicDetail?.city}}, {{dsas?.basicDetail?.district}}, {{dsas?.basicDetail?.state}} -
                    {{dsas?.basicDetail?.partnerPincode}}
                  </span>
                </td>
              </tr>

              <ng-container *ngFor="let field of dsas?.documentMaster">
                <tr>
                  <td style="font-weight: 550;"> {{field.name}} </td>
                  <td>{{field.documentData}}</td>
                </tr>
              </ng-container>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="col-lg-8 col-md-6 col-sm-12 px-1">
      <div class="card">
        <div class="card-body" style="height:calc(100vh - 200px);overflow: auto;">
          <div class="tabs-menu">
            <ul ngbNav #nav="ngbNav" class=" nav-tabs profile navtab-custom panel-tabs">

              <li [ngbNavItem]="1">
                <a ngbNavLink>
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-user tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{ 'lbl_parent_partner_detail' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="p-1 border-top" style="height: calc(100vh - 335px);">
                    <div class="p-1" *ngIf="dsas?.basicDetail?.parentPartnerId">
                      <h6 class="sub-title">{{ 'lbl_group_detail' | translate}}</h6>
                      <div class="row">
                        <div class="col-md-6">
                          <dl>
                            <dt>{{ 'lbl_partner_code' | translate}} - <span
                                style="font-weight:lighter;">{{dsas?.partners[0]?.parentCode}}</span>
                            </dt>
                            <dt>{{ 'lbl_partner_name' | translate}} - <span
                                style="font-weight:lighter;">{{dsas?.partners[0]?.parentPartner}}</span>
                            </dt>
                            <dt>{{ 'lbl_partner_contact' | translate}} - <span
                                style="font-weight:lighter;">{{dsas?.partners[0]?.parentContactNo}}</span>
                            </dt>
                            <dt>{{ 'lbl_partner_role' | translate}} - <span
                                style="font-weight:lighter;">{{dsas?.partners[0]?.parentRole}}</span>
                            </dt>
                          </dl>
                        </div>
                        <div class="col-md-6" *ngIf="dsas?.partners[0]?.parentParentPartnerId">
                          <dl>
                            <dt>{{ 'lbl_parent_partner_code' | translate}} - <span
                                style="font-weight:lighter;">{{dsas?.partners[0]?.parentParentCode}}</span>
                            </dt>
                            <dt>{{ 'lbl_parent_partner_name' | translate}} -
                              <span style="font-weight:lighter;">{{dsas?.partners[0]?.parentParentPartnerName}}</span>
                            </dt>
                            <dt>{{ 'lbl_parent_partner_contact' | translate}} -
                              <span
                                style="font-weight:lighter;">{{dsas?.partners[0]?.parentParentPartnerContactNo}}</span>
                            </dt>
                            <dt>{{ 'lbl_parent_partner_role' | translate}} -
                              <span style="font-weight:lighter;">{{dsas?.partners[0]?.parentParentRole}}</span>
                            </dt>
                          </dl>
                        </div>
                      </div>
                    </div>
                  </div>
                </ng-template>
              </li>

              <li [ngbNavItem]="2">
                <a ngbNavLink>
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-info tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{ 'lbl_other_detail' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="p-1 border-top" style="height: calc(100vh - 310px);">

                    <table class="table table-bordered" *ngIf="dsas?.partnerBankDetail else OtherDetail"
                      aria-label="partnerBankDetail" aria-label="">
                      <tbody>
                        <tr>
                          <td class="border">
                            <div class="p-1">
                              <h6 class="sub-title">{{ 'lbl_bank_detail' | translate}}</h6>
                              <dl>
                                <dt>{{ 'lbl_account_holder_name' | translate}} - <span
                                    style="font-weight:lighter;">{{dsas?.partnerBankDetail?.accountHolderName}}</span>
                                </dt>
                                <dt>{{ 'lbl_account_no' | translate}} - <span
                                    style="font-weight:lighter;">{{dsas?.partnerBankDetail?.accountNo}}</span></dt>
                                <dt>{{ 'lbl_bank' | translate}} - <span
                                    style="font-weight:lighter;">{{dsas?.partnerBankDetail?.bankName}}</span>
                                </dt>
                                <dt>{{ 'lbl_ifsc_code' | translate}} - <span
                                    style="font-weight:lighter;">{{dsas?.partnerBankDetail?.ifscCode}}</span>
                                </dt>
                              </dl>
                            </div>
                          </td>
                          <td class="border">
                            <div class="p-1">
                              <h6 class="sub-title">{{ 'lbl_other_detail' | translate}}</h6>
                              <dl>
                                <dt>{{ 'lbl_business_commitment_in_amount' | translate}} - <span
                                    style="font-weight:lighter;">{{dsas?.basicDetail?.commitment}}{{currency}}</span>
                                </dt>
                              </dl>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>

                    <ng-template #OtherDetail>
                      <div class="p-1 border-top">
                        <h6 class="sub-title">{{ 'lbl_other_detail' | translate}}</h6>
                        <ng-container>
                          <dl>
                            <dt>{{ 'lbl_business_commitment_in_amount' | translate}} - <span
                                style="font-weight:lighter;">{{dsas?.basicDetail?.commitment}}{{currency}}</span></dt>
                          </dl>
                        </ng-container>
                      </div>
                    </ng-template>

                    <div class="p-1 border-top" *ngIf="dsas?.visitingCard && dsas.visitingCard.length > 0">
                      <h6 class="sub-title">{{ 'lbl_visiting_card' | translate}}</h6>
                      <ng-container>
                        <dl>
                          <img [src]="dsas?.visitingCard[0].location" alt="visiting">

                        </dl>
                      </ng-container>
                    </div>
                  </div>
                </ng-template>
              </li>

              <li [ngbNavItem]="3">
                <a ngbNavLink>
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-users tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{ 'lbl_customer' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="p-1 border-top">

                    <ng-container *ngIf="dsas.customers && dsas.customers.length > 0 else NoDsasData">
                      <div class="customer example-container table-responsive border-top userlist-table">
                        <table mat-table [dataSource]="dsas.customers"
                          class="mat-elevation-z8 table-striped table-vcenter" style="width: 1000px;"
                          aria-label="customer">
                          <ng-container matColumnDef="id">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_id' |translate}}</th>
                            <td mat-cell *matCellDef="let element;let i = index">
                              {{i + 1}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="fullName">
                            <th mat-header-cell *matHeaderCellDef style="width: 25%;">{{ 'lbl_full_name' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let element" style="width: 25%;">
                              {{element.fullName}}-{{element.contactNo}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="birthdate">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_birthdate' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.birthdate | date:'d/M/y'}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="gender">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_gender' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.gender}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="panCardNo">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_pan_card_no' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.panCardNo}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="temporaryCode">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_temporary_code' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.temporaryCode}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="action" stickyEnd>
                            <th mat-header-cell *matHeaderCellDef class="text-right">{{ 'lbl_action' |
                              translate}}
                            </th>
                            <td mat-cell *matCellDef="let element" class="text-right">
                              <a title="{{ 'tooltip_lbl_view_detail' |translate}}" href="javascript:;"
                                class="btn btn-sm btn-info filterbtn" (click)="navigateCustomerDetail(element.id)">
                                <i class="icon-eye"></i>
                              </a>
                            </td>
                          </ng-container>

                          <tr mat-header-row *matHeaderRowDef="customersDisplayColumns; sticky: true"></tr>
                          <tr mat-row *matRowDef="let row; columns: customersDisplayColumns;"
                            class="student-element-row" style="cursor: pointer;"></tr>
                        </table>
                      </div>
                    </ng-container>

                    <ng-template #NoDsasData>
                      <div class="d-flex vertical-center nodata" style="height:calc(100vh - 350px)">
                      </div>
                    </ng-template>
                  </div>
                </ng-template>
              </li>

              <li [ngbNavItem]="4">
                <a ngbNavLink>
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-percent tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{ 'lbl_commission' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="p-1 border-top">

                    <ng-container *ngIf="dsas.commission && dsas.commission.length > 0 else NoDsasData">
                      <div class="table-responsive border-top userlist-table">
                        <table mat-table [dataSource]="dsas.commission"
                          class=" maintable mat-elevation-z8 table-striped table-vcenter" style="display : block;"
                          aria-label="commission">
                          <ng-container matColumnDef="bankName">
                            <th mat-header-cell *matHeaderCellDef style="width: 25%;">{{ 'lbl_bank_name' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let element" style="width: 25%;">
                              {{element.bankName}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="commissionType">
                            <th mat-header-cell *matHeaderCellDef style="width: 35%;">{{ 'lbl_commission_type' |
                              translate}}
                            </th>
                            <td mat-cell *matCellDef="let element" style="width: 35%;">
                              {{element.commissionType}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="serviceName">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_service_name' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.serviceName}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="commission">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_commission' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.commission}}
                            </td>
                          </ng-container>

                          <tr mat-header-row *matHeaderRowDef="commissionDisplayColumns; sticky: true"></tr>
                          <tr mat-row *matRowDef="let row; columns: commissionDisplayColumns;"
                            class="student-element-row" style="cursor: pointer;"></tr>
                        </table>
                      </div>
                    </ng-container>

                    <ng-template #NoDsasData>
                      <div class="d-flex vertical-center nodata" style="height:calc(100vh - 350px)">
                      </div>
                    </ng-template>
                  </div>
                </ng-template>
              </li>

              <li [ngbNavItem]="5">
                <a ngbNavLink>
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-suitcase tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{ 'lbl_loan' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="p-1 border-top">
                    <ng-container *ngIf="dsas.loans && dsas.loans.length > 0 else NoDsasData">
                      <div class="loan example-container table-responsive border-top userlist-table">
                        <table mat-table [dataSource]="dsas.loans" class="mat-elevation-z8 table-striped table-vcenter"
                          style="width: 1000px;" aria-label="loans">
                          <ng-container matColumnDef="fullName">
                            <th mat-header-cell *matHeaderCellDef style="width: 20%;">{{ 'lbl_full_name' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let element" style="width: 20%;">
                              {{element.fullName}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="serviceName">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_loan_type' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.serviceName}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="loanAmount">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_loan_amount' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.loanAmount}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="loanTransactionDate">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_transaction_date' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.loanTransactionDate | date: 'd/M/y'}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="motherName">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_mothers_name' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.motherName}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="action" stickyEnd>
                            <th mat-header-cell *matHeaderCellDef class="text-right">{{ 'lbl_action' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let element" class="text-right">
                              <a title="{{ 'tooltip_lbl_view_detail' |translate}}" href="javascript:;"
                                class="btn btn-sm btn-info filterbtn"
                                style="padding: 10px 12px;border-radius: 10px;margin: 0 3px; text-align: center;"
                                (click)="viewLoanDetail(element)">
                                <i class="icon-eye"></i>
                              </a>
                            </td>
                          </ng-container>

                          <tr mat-header-row *matHeaderRowDef="LoanDisplayColumns; sticky: true"></tr>
                          <tr mat-row *matRowDef="let row; columns: LoanDisplayColumns;" class="student-element-row"
                            style="cursor: pointer;"></tr>
                        </table>
                      </div>
                    </ng-container>

                    <ng-template #NoDsasData>
                      <div class="d-flex vertical-center nodata" style="height:calc(100vh - 350px)">
                      </div>
                    </ng-template>
                  </div>
                </ng-template>
              </li>

              <li [ngbNavItem]="6">
                <a ngbNavLink>
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-users tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{ 'lbl_employee' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="p-1 border-top">
                    <ng-container *ngIf="dsas.employee && dsas.employee.length > 0 else NoEmployee">
                      <div class="employee example-container table-responsive border-top userlist-table">
                        <table mat-table [dataSource]="dsas.employee"
                          class="mat-elevation-z8 table-striped table-vcenter" style="width: 1300px;"
                          aria-label="employee">
                          <ng-container matColumnDef="id">
                            <th mat-header-cell *matHeaderCellDef style="width:75px">{{ 'lbl_id' | translate}}</th>
                            <td mat-cell *matCellDef="let element;let i =index" style="width:75px">
                              {{i + 1}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="code">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_code' | translate}}</th>
                            <td mat-cell *matCellDef="let element;let i =index">
                              <ng-container *ngIf="element.permanentCode else temporary">
                                {{element.permanentCode}}
                              </ng-container>
                              <ng-template #temporary>
                                {{element.temporaryCode}}
                              </ng-template>
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="fullName">
                            <th mat-header-cell *matHeaderCellDef style="width: 25%;">{{ 'lbl_name' | translate}}</th>
                            <td mat-cell *matCellDef="let element" style="width: 25%;">
                              {{element.fullName}} - {{element.contactNo}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="panCardNo">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_pan_card' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.panCardNo}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="gender">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_gender' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.gender}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="city">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_city' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.city}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="companyType">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_company_type' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.companyType}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="companyName">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_company_name' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.companyName}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="createdDate">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_created_date' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element.createdDate | date}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="action" stickyEnd>
                            <th mat-header-cell *matHeaderCellDef class="text-right">{{ 'lbl_action' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let element" class="text-right">
                              <a title="{{ 'tooltip_lbl_view_detail' |translate}}" href="javascript:;"
                                class="btn btn-sm btn-info filterbtn" (click)="navigateEmployeeDetail(element.id)">
                                <i class="icon-eye"></i>
                              </a>
                            </td>
                          </ng-container>

                          <tr mat-header-row *matHeaderRowDef="employeeColumns; sticky: true"></tr>
                          <tr mat-row *matRowDef="let row; columns: employeeColumns;" class="student-element-row"
                            style="cursor: pointer;"></tr>
                        </table>
                      </div>
                    </ng-container>

                    <ng-template #NoEmployee>
                      <div class="d-flex vertical-center nodata" style="height:calc(100vh - 350px)">
                      </div>
                    </ng-template>
                  </div>
                </ng-template>
              </li>

              <li [ngbNavItem]="7">
                <a ngbNavLink>
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-tv tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{ 'lbl_training' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="p-1 border-top">

                    <ng-container *ngIf="dsas.assignTrainings && dsas.assignTrainings.length > 0 else NoDsasData">
                      <div class="file-content border-top">
                        <div class="p-1 file-manager data">
                          <div class="row files mx-0">
                            <div class="col-lg-6 col-md-6 col-sm-12 mt-2" *ngFor="let train of dsas.assignTrainings">
                              <a href="{{train.url}}" target="_blank" class="form-control document" type="upload"
                                id="resume">
                                <h3 class="text-dark title"> {{train.title}}</h3>
                                <div>
                                  <div class="fileUpload text-center">
                                    <i *ngIf="train.documentType == 'text/plain' || train.documentType=='docx' || train.documentType=='doc'"
                                      class="fa fa-file-text txt-info"></i>
                                    <i *ngIf="train.documentType == 'webLink'" class="fa fa-link txt-info"></i>
                                    <i *ngIf="train.documentType == 'video/mp4'" class="fa fa-file-video txt-info"></i>
                                    <i *ngIf="train.documentType == 'application/pdf'"
                                      class="fa fa-file-pdf txt-info"></i>
                                    <i *ngIf="train.documentType == 'image/jpeg' || train.documentType == 'image/png' || train.documentType == 'jpeg'"
                                      class="fa fa-file-image txt-info"></i>
                                    <i *ngIf="train.documentType == 'pptx' || train.documentType == 'ppt'"
                                      class="fa fa-file-powerpoint txt-info"></i>
                                  </div>
                                  <div>
                                    <h6 *ngIf="train.documentType!='webLink' " class="fileName">
                                      {{train.fileName}} </h6>
                                    <h6 *ngIf="train.documentType == 'webLink' " class="fileName">
                                      {{train.url}} </h6>
                                    <div style="height:80px">
                                      <h6 class="text-dark">{{ 'lbl_training_category' | translate}}:
                                        {{train.categoryName}}
                                      </h6>
                                      <h6 *ngIf="train.subCategoryName" class="text-dark">{{'lbl_training_sub_category'
                                        | translate}}: {{train.subCategoryName}}
                                      </h6>
                                      <h6 class="text-dark">{{ 'lbl_assign_on' | translate}}:
                                        {{train.createdDate | date}}
                                      </h6>
                                      <h6 class="text-dark">{{ 'lbl_training_status' | translate}}:
                                        {{train.trainingStatus}}
                                      </h6>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </ng-container>
                    <ng-template #NoDsasData>
                      <div class="d-flex vertical-center nodata" style="height:calc(100vh - 350px)">
                      </div>
                    </ng-template>
                  </div>
                </ng-template>
              </li>

              <li [ngbNavItem]="8">
                <a ngbNavLink>
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-inr tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{ 'lbl_wallet_history' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="p-1 border-top" style="height: calc(100vh - 340px);">
                    <div class="total">
                      <div class="m-auto">
                        <img src="../../../assets/admin/images/favicon-2.jpg" alt="NoData">
                        <ng-container *ngIf="dsas.walletHistory && dsas.walletHistory.length > 0 else NoHistory">
                          <span
                            style="font-size:45px;padding-left:10px;vertical-align: middle;">{{dsas.walletHistory[0].totalCoin}}</span>
                        </ng-container>
                        <ng-template #NoHistory><span
                            style="font-size:45px;padding-left:6px;vertical-align: middle;">0</span>
                        </ng-template>
                      </div>
                    </div>

                    <ng-container *ngIf="dsas.walletHistory && dsas.walletHistory.length > 0 else NoLeads">
                      <div class="table-responsive border-top userlist-table">
                        <table mat-table [dataSource]="dsas.walletHistory"
                          class="walletTable maintable mat-elevation-z8 table-striped table-vcenter"
                          aria-label="wallet">
                          <ng-container matColumnDef="id">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_id' | translate}}</th>
                            <td mat-cell *matCellDef="let element;let  i=index">
                              {{i + 1}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="coin">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_coin' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element?.coin}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="rewardType">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_reward_type' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element?.name}}
                            </td>
                          </ng-container>

                          <ng-container matColumnDef="isWithdrawal">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_is_withdrawal' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              <ng-container *ngIf="element?.isWithdrawal else noWithdrawal">
                                {{ 'lbl_true' | translate}}
                              </ng-container>
                              <ng-template #noWithdrawal>
                                {{ 'lbl_false' | translate}}
                              </ng-template>
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="createdDate">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_transaction_date' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element?.createdDate |date}}
                            </td>
                          </ng-container>
                          <tr mat-header-row *matHeaderRowDef="walletColumns; sticky: true">
                          </tr>
                          <tr mat-row *matRowDef="let row; columns: walletColumns;" class="student-element-row"
                            style="cursor: pointer;"></tr>
                        </table>
                      </div>
                    </ng-container>

                    <ng-template #NoLeads>
                      <div class="d-flex vertical-center nodata">
                      </div>
                    </ng-template>
                  </div>
                </ng-template>

              </li>

              <li [ngbNavItem]="9">
                <a ngbNavLink>
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-inr tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{ 'lbl_payout' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="p-1 border-top" style="height: calc(100vh - 340px);">
                    <div class="total">
                      <div class="m-auto">
                        <img src="../../../assets/admin/images/favicon-2.jpg" alt="favicon">
                        <ng-container
                          *ngIf="dsas.partnerCommission && dsas.partnerCommission.length > 0 else NoHistory">
                          <span
                            style="font-size:45px;padding-left:10px;vertical-align: middle;">{{dsas.partnerCommission[0].PendingCommission}}</span>
                        </ng-container>
                        <ng-template #NoHistory><span
                            style="font-size:45px;padding-left:6px;vertical-align: middle;">0</span>
                        </ng-template>
                      </div>
                    </div>
                    <ng-container *ngIf="dsas.partnerCommission && dsas.partnerCommission.length > 0 else NoLeads">
                      <div class="table-responsive border-top userlist-table">
                        <table mat-table [dataSource]="dsas.partnerCommission"
                          class="walletTable maintable mat-elevation-z8 table-striped table-vcenter"
                          aria-label="partnerCommision">
                          <ng-container matColumnDef="id">
                            <th mat-header-cell *matHeaderCellDef>#{{ 'lbl_id' | translate}}</th>
                            <td mat-cell *matCellDef="let element;let  i=index">
                              {{i + 1}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="type">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_type' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element?.type}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="commission">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_commission' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element?.commission}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="createdDate">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_Date' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element?.createdDate |date}}
                            </td>
                          </ng-container>
                          <tr mat-header-row *matHeaderRowDef="partnerCommissionColumn; sticky: true">
                          </tr>
                          <tr mat-row *matRowDef="let row; columns: partnerCommissionColumn;"
                            class="student-element-row" style="cursor: pointer;"></tr>
                        </table>
                      </div>
                    </ng-container>

                    <ng-template #NoLeads>
                      <div class="d-flex vertical-center nodata">
                      </div>
                    </ng-template>
                  </div>
                </ng-template>

              </li>

              <li [ngbNavItem]="10">
                <a ngbNavLink>
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-suitcase tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{ 'lbl_orders' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="p-1 border-top" style="height: calc(100vh - 330px);">
                    <ng-container *ngIf="dsas.orders && dsas.orders.length > 0 else NoOrders">
                      <div class="order table-responsive userlist-table"
                        style="height: calc(100vh - 338px); overflow: auto;">
                        <table mat-table [dataSource]="dsas.orders" class="mat-elevation-z8 table-striped table-vcenter"
                          style="min-width: 900px;" aria-label="Orders">
                          <ng-container matColumnDef="id">
                            <th mat-header-cell *matHeaderCellDef style="width:7%">#{{ 'lbl_id' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let element;let  i=index" style="width:7%">
                              {{i + 1}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="productName">
                            <th mat-header-cell *matHeaderCellDef style="width:25%">{{ 'lbl_product_name' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let element" style="width:25%">
                              {{element?.productName}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="quantity">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_quantity' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element?.quantity}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="unitCoin">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_unit_coin' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              <ng-container *ngIf="element?.unitCoin else NoUnitCoin">
                                {{element?.unitCoin}}
                              </ng-container>
                              <ng-template #NoUnitCoin>
                                <p>--</p>
                              </ng-template>
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="totalcoin">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_total_coin' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              <ng-container *ngIf="element?.totalCoin else NoTotalcoin">
                                {{element?.totalCoin}}
                              </ng-container>
                              <ng-template #NoTotalcoin>
                                <p>--</p>
                              </ng-template>
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="orderstatus">
                            <th mat-header-cell *matHeaderCellDef style="width:15%">{{ 'lbl_order_status' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let element" style="width:15%">
                              <ng-container *ngIf="element?.status else NoOrderstatus">
                                {{element?.status}}
                              </ng-container>
                              <ng-template #NoOrderstatus>
                                <p>--</p>
                              </ng-template>
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="transactiondate">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_transaction_date' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              <ng-container *ngIf="element?.transactionDate else NoTransactiondate">
                                {{element?.transactionDate | date}}
                              </ng-container>
                              <ng-template #NoTransactiondate>
                                <p>--</p>
                              </ng-template>
                            </td>
                          </ng-container>

                          <tr mat-header-row *matHeaderRowDef="OrderDisplayColumns; sticky: true">
                          </tr>
                          <tr mat-row *matRowDef="let row; columns: OrderDisplayColumns;" class="student-element-row"
                            style="cursor: pointer;"></tr>
                        </table>
                      </div>
                    </ng-container>
                    <ng-template #NoOrders>
                      <div class="d-flex vertical-center nodata" style="height:calc(100vh - 350px)">
                      </div>
                    </ng-template>
                  </div>
                </ng-template>
              </li>

              <li [ngbNavItem]="11">
                <a ngbNavLink>
                  <span class="visible-xs">
                    <i class="fa fa-sm fa-info tx-16 mr-1"></i>
                  </span>
                  <span class="hidden-xs">{{ 'lbl_lead' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <div class="p-1 border-top" style="height: calc(100vh - 330px);">
                    <div class="lead table-responsive userlist-table"
                      style="height: calc(100vh - 338px); overflow: auto;">
                      <ng-container *ngIf="dsas.leads && dsas.leads.length > 0 else NoLeads">
                        <table mat-table [dataSource]="dsas.leads" class="mat-elevation-z8 table-striped table-vcenter"
                          style="min-width: 1200px;" aria-label="Leads">
                          <ng-container matColumnDef="id">
                            <th mat-header-cell *matHeaderCellDef style="width:6%">#{{ 'lbl_id' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let element;let  i=index" style="width:6%">
                              {{i + 1}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="name">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_name' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element?.customerFullName}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="contactNo">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_contact_no' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element?.contactNo}}
                            </td>
                          </ng-container>

                          <ng-container matColumnDef="panCardNo">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_pan_card_no' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              <ng-container *ngIf="element?.panCardNo else NoData">
                                {{currency}}{{element?.panCardNo}}
                              </ng-container>
                              <ng-template #NoData>
                                <p>--</p>
                              </ng-template>
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="leadStatus">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_lead_status' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element?.leadstatus}}
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="assignpartner">
                            <th mat-header-cell *matHeaderCellDef class="text-center">{{ 'lbl_assign_partner' |
                              translate}}
                            </th>
                            <td mat-cell *matCellDef="let element" class="text-center">
                              <ng-container *ngIf="element?.partnerName else NoAssignPartner">
                                {{element?.partnerName}}-{{element?.partnerContactNo}}
                              </ng-container>
                              <ng-template #NoAssignPartner>
                                <p>--</p>
                              </ng-template>
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="loanAmount">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_loan_amount' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              <ng-container *ngIf="element?.loanAmount else NoLoanAmount">
                                {{element?.loanAmount}}
                              </ng-container>
                              <ng-template #NoLoanAmount>
                                <p>--</p>
                              </ng-template>
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="service">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_service' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              <ng-container *ngIf="element?.serviceName else NoService">
                                {{element?.serviceName}}
                              </ng-container>
                              <ng-template #NoService>
                                <p>--</p>
                              </ng-template>
                            </td>
                          </ng-container>
                          <ng-container matColumnDef="createdDate">
                            <th mat-header-cell *matHeaderCellDef>{{ 'lbl_created_date' | translate}}</th>
                            <td mat-cell *matCellDef="let element">
                              {{element?.createdDate |date}}
                            </td>
                          </ng-container>
                          <tr mat-header-row *matHeaderRowDef="leadDisplayColumn; sticky: true">
                          </tr>
                          <tr mat-row *matRowDef="let row; columns: leadDisplayColumn;" class="student-element-row"
                            style="cursor: pointer;"></tr>
                        </table>
                      </ng-container>
                    </div>
                    <ng-template #NoLeads>
                      <div class="d-flex vertical-center nodata" style="height:calc(100vh - 350px)">
                      </div>
                    </ng-template>
                  </div>
                </ng-template>
              </li>

            </ul>
          </div>
          <div class=" border-left border-bottom border-right border-top-0">
            <div [ngbNavOutlet]="nav" class="mt-0 tab-content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>