<div class="flex item-center w-full font-size-18px font-weight-700  text-primary px-5 mt-1 mb-4"
  style="height: 50px;align-items: center;border-width: 1px;background: #eff6fe; border-radius:20px">
  {{'SubordinateList' | translate}}
</div>
<div class="flex w-full mb-4">
  <div class="flex w-1/4 justify-between">
    <div class="flex">
      <div class="flex items-center">
        <input type="checkbox" class="ti-form-checkbox pointer-events-none" id="hs-default-checkbox"
          [checked]="selectEmp.size-1 > 0">
        <label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2 pointer-events-none">
          {{selectEmp.size-1 < 0 ? 0 : selectEmp.size-1}} {{'Selected' | translate}} </label>
      </div>
      <div class="mx-1 flex items-center">
        <button (click)="toggleSelectAll()" class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
          <i class="fs-l transition-all duration-200"
            [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !selectEmp.get('selectAll'), 'ri-checkbox-multiple-fill text-primary': selectEmp.get('selectAll')}"></i>
        </button>
        <label (click)="toggleSelectAll()" class="text-sm text-gray-500 ml-2 cursor-pointer">
          {{'SelectAll' |translate}}</label>
      </div>
    </div>
  </div>
  <div class="flex w-3/4 justify-end">
    <div class="px-1">
      <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
        [class.ti-btn-disabled]="selectEmp.size-1 <= 0" [disabled]="selectEmp.size-1 <= 0"
        (click)="approveAll()">
        {{'ApproveAll' | translate}}
      </button>
    </div>
    <div class="px-1">
      <div class="relative shadow-md">
        <input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
          [placeholder]="'SearchByNoOrName' | translate" [(ngModel)]="search" (ngModelChange)="setSyncfutionDataList()">
        <div
          class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
          <i class="ri-search-line text-gray"></i>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="flex flex-col w-100">
  <div class="mb-4">
    <ng-container *ngTemplateOutlet="Datagrid"></ng-container>
  </div>
</div>
<ng-template #Datagrid>
  <ejs-grid #grid id='Grid' [locale]="locale" [dataSource]="syncfution.dataList" [allowFiltering]="true"
    [filterSettings]="filterSettings" [selectionSettings]="selectionOptions"
    [searchSettings]="syncfution.searchSettings" [groupSettings]="groupSettings" [toolbar]="toolbarOptions"
    [editSettings]="editSettings" [loadingIndicator]='loadingIndicator' [query]="query"
    [columnMenuItems]="columnMenuItems" [pageSettings]="initialPage" [allowMultiSorting]="true" [allowPaging]="true"
    [allowGrouping]="true" [allowSorting]="true" [showColumnMenu]="true" [allowPdfExport]="true"
    [allowExcelExport]="true" [allowReordering]="true" width="auto" rowHeight="60" allowEditing="false"
    (columnMenuClick)="onColumnMenuClick($event)" (toolbarClick)='toolbarClick($event)'>
    <e-columns>
      <ng-container *ngFor="let col of syncfution.columns">
        <ng-container *ngIf="col.headerText">
          <e-column [field]="col.field" [headerText]="col.headerText" [width]="col.width" [format]="col.format"
            [isPrimaryKey]="col.isPrimaryKey" [validationRules]="col.validationRules" [visible]="col.visible"
            [editType]="false" [allowEditing]="false" [allowFiltering]="true" [allowSorting]="true" [type]="col.type"
            textAlign="center">
            <ng-template #headerTemplate let-data>
              <span class="font-size-12px font-weight-700 text-primary">
                {{ col.headerText | translate}}
              </span>
            </ng-template>
            <ng-template #template let-data *ngIf="col.headerText=='EmployeeCode'">
              <div class="flex-col gap-2">
                <input type="checkbox" class="ti-form-checkbox cursor-pointer"
                  [checked]="selectEmp.get(data.employeeId)"
                  (click)="!selectEmp.get(data.employeeId)?selectEmp.set(data.employeeId , true):selectEmp.delete(data.employeeId);checkSelectAll()">
                &nbsp;
                <img class=" avatar shadow-none rounded-full !ring-transparent object-cover h-12 w-12"
                  [src]="data.picture?getImg(data.picture):'./assets/img/users/defaultperson.jpg'"
                  (error)="onImageError($event)">
                {{data.employeeId}}
              </div>
            </ng-template>
          </e-column>
        </ng-container>
      </ng-container>
      <e-column headerText='action' textAlign='Center'>
        <ng-template #headerTemplate let-data>
          <span class="font-size-12px font-weight-700 text-primary">{{'Action' | translate}}</span>
        </ng-template>
        <ng-template #template let-data>
          <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="openGapDialog()"></i>
        </ng-template>
      </e-column>
    </e-columns>
    <e-aggregates>
      <e-aggregate>
        <e-columns>
          <e-column *ngFor="let col of aggregatesSum" [field]="col.field" [type]="'Sum'"
            [footerTemplate]="'Sum: ${Sum}'" [groupFooterTemplate]="'Sum: ${Sum}'"
            [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
          </e-column>
        </e-columns>
      </e-aggregate>
      <e-aggregate>
        <e-columns>
          <e-column *ngFor="let col of aggregatesCount" [field]="col.field" [type]="'Count'"
            [footerTemplate]="'Count: ${Count}'" [groupFooterTemplate]="'Count: ${Count}'"
            [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
          </e-column>
        </e-columns>
      </e-aggregate>
      <e-aggregate>
        <e-columns>
          <e-column *ngFor="let col of aggregatesAvg" [field]="col.field" [type]="'Average'"
            [footerTemplate]="'Average: ${Average}'" [groupFooterTemplate]="'Average: ${Average}'"
            [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
          </e-column>
        </e-columns>
      </e-aggregate>
      <e-aggregate>
        <e-columns>
          <e-column *ngFor="let col of aggregatesMin" [field]="col.field" [type]="'Min'"
            [footerTemplate]="'Min: ${Min}'" [groupFooterTemplate]="'Min: ${Min}'"
            [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
          </e-column>
        </e-columns>
      </e-aggregate>
      <e-aggregate>
        <e-columns>
          <e-column *ngFor="let col of aggregatesMax" [field]="col.field" [type]="'Max'"
            [footerTemplate]="'Max: ${Max}'" [groupFooterTemplate]="'Max: ${Max}'"
            [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
          </e-column>
        </e-columns>
      </e-aggregate>
    </e-aggregates>
  </ejs-grid>
</ng-template>


<ng-template #gapDialog let-modal>
  <h3 mat-dialog-title>
    <!-- {{'รายงานสรุปผลการประเมิน' | translate}} -->
    <div class="relative">
      <div class="absolute" style="top: -43px;">
        {{'ดำเนินการปิด Gap' | translate}}
      </div>
      <div class="absolute" style="right: 0;top: -43px;">
        <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" mat-button [mat-dialog-close]>
          <span class="sr-only">Close</span>
          <i class="ti ti-circle-x fs-xxl"></i>
        </button>
      </div>
    </div>
  </h3>
  <mat-dialog-content>
    <app-gap-tracking></app-gap-tracking>
  </mat-dialog-content>
  <mat-dialog-actions align="end">
    <button type="button" mat-button [mat-dialog-close]
      class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
      ย้อนกลับ
    </button>
    <button type="button" (click)="save()" class="ti-btn ti-btn-success">
      {{'SaveData' | translate}}
    </button>
  </mat-dialog-actions>
</ng-template>