<ng-container *ngIf="page==1">
  <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">
    {{'Gap Detail' | translate}}
  </div>
  <div class="flex w-full mb-4">
    <div class="flex w-1/4 justify-between">
    </div>
    <div class="flex w-3/4 justify-end">
      <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-container>
<ng-container *ngIf="page==2">
  <app-pms-form-employee [evaluationForm]="'sup'" [currentTap]="'EvaluationInfo'" (sendReturnPath)="page=1"
    [evaluaterId]="evaluaterId" [evaluateeId]="evaluaterId"></app-pms-form-employee>
</ng-container>


<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">
                <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> -->
            <ng-template #template let-data *ngIf="col.headerText=='Assessment Tools'">
              <div class="flex justify-center">
                <button type="button" class="h-12 w-12 p-0 shadow border text-white bg-black/50 pointer-events-none"
                  style="border-radius:10px">
                  J
                </button>
                <button type="button" class="h-12 w-12 p-0 shadow border text-white bg-warning pointer-events-none"
                  style="border-radius:10px">
                  C
                </button>
                <button type="button" class="h-12 w-12 p-0 shadow border text-white bg-black/50 pointer-events-none"
                  style="border-radius:10px">
                  T
                </button>
              </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>

  <div class="w-full flex justify-end mb-1rem">
    <div class="absolute flex" style="z-index: 9;">
      <div class="px-1">
        <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
          <i class="ti ti-eraser text-base"></i>
          Clear
        </button>
      </div>
    </div>
  </div>
  <mat-dialog-content>
    <div class="row">
      <div class="p-2 col-3">
        <label class="ti-form-label mt-1rem">รหัสสมรรถนะ</label>
        <input type="text" class="ti-form-input" style="background-color:  rgb(241 245 249);" readonly>
      </div>
      <div class="p-2 col-9">
        <label class="ti-form-label mt-1rem">หัวข้อสมรรถนะ</label>
        <input type="text" class="ti-form-input" style="background-color:  rgb(241 245 249);" readonly>
      </div>
    </div>
    <div class="row">
      <div class="p-2 col-12">
        <label class="ti-form-label mt-1rem">ตัวชี้วันที่ติด Gap</label>
        <textarea type="text" rows="3" class="ti-form-input col-12" style="background-color:  rgb(241 245 249);"
          readonly></textarea>
      </div>
    </div>
    <div class="row mt-1rem">
      <div class="p-2 col-12 border row" style="border-radius: 20px;">
        <div class="col-12">
          <nav class="flex rtl:space-x-reverse space-x-2 row" style="justify-content: space-between;">
            <a style="border-radius: 20px;height: 35px;"
              class="col-3-9 border justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900 active"
              href="javascript:void(0);" id="gap-tacking-item-1" data-hs-tab="#gap-tacking-1"
              aria-controls="gap-tacking-1">
              {{'OJT/Job Assignment' }}
            </a>
            <a style="border-radius: 20px;height: 35px;"
              class="col-3-9 border justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
              href="javascript:void(0);" id="gap-tacking-item-2" data-hs-tab="#gap-tacking-2"
              aria-controls="gap-tacking-2">
              {{'Coach/Mentor' }}
            </a>
            <a style="border-radius: 20px;height: 35px;"
              class="col-3-9 border justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
              href="javascript:void(0);" id="gap-tacking-item-3" data-hs-tab="#gap-tacking-3"
              aria-controls="gap-tacking-3">
              {{'Training' }}
            </a>
          </nav>
        </div>
        <div class="col-12 border mt-2 mb-2">
        </div>
        <div class="col-12">
          <div id="gap-tacking-1" role="tabpanel" aria-labelledby="gap-tacking-item-1">
            <ng-container *ngTemplateOutlet="ojt"></ng-container>
          </div>
          <div id="gap-tacking-2" class="hidden" role="tabpanel" aria-labelledby="gap-tacking-item-2">
            <ng-container *ngTemplateOutlet="ojt"></ng-container>
          </div>
          <div id="gap-tacking-3" class="hidden" role="tabpanel" aria-labelledby="gap-tacking-item-3">
            <ng-container *ngTemplateOutlet="ojt"></ng-container>
          </div>
        </div>
      </div>
    </div>
  </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>


<ng-template #ojt>
  <div class="row border p-2" style="border-radius: 20px;">
    <div class="col-6 row" style="justify-content: center;">
      <div class="col-11">
        <input type="text" class="ti-form-input" style="height: 38px;">
      </div>
    </div>
    <div class="col-5 row" style="justify-content: center;">
      <div class="flex rounded-md">
        <input #fileInputMedium id="fileInputMedium" accept=".pdf,.ppt,.pptx,.xls,.xlsx,.doc,.docx" type="file"
          (change)="onFileSelected($event)" hidden>
        <input type="text" [value]="selectedFileName | translate" readonly onclick="fileInputMedium.click();"
          class=" cursor-pointer block w-full border border-gray-200 focus:shadow-sm dark:focus:shadow-white/10 ltr:rounded-l-md rtl:rounded-r-none text-sm focus:z-10 focus:outline-0 focus:border-gray-200 dark:focus:border-white/10 dark:border-white/10 dark:text-white/70 file:border-0 file:bg-gray-100 ltr:file:mr-4 rtl:file:ml-4 file:py-3 file:px-4 dark:file:bg-black/20 dark:file:text-white/70">
        <span
          class="px-4 inline-flex items-center min-w-fit ltr:rounded-r-md rtl:rounded-l-none border ltr:border-l-0 rtl:border-r-0 border-gray-200 bg-gray-50 text-sm dark:bg-black/20 dark:border-white/10">
          <button class="text-sm text-gray-500 dark:text-white/70" onclick="fileInputMedium.click();">Browse</button>
        </span>
      </div>
      <div class="flex items-center ml-2">
        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10px m-0 shadow-md rounded-md"
          (click)="fileInputMedium.value = '';selectedFile=null;selectedFileName = 'PleaseSelectFile';">
          <i class="ri-delete-bin-6-line"></i>
          {{'Delete' | translate}}
        </button>
      </div>
    </div>
    <div class="col-1 row relative" style="justify-content: center;align-content: center;">
      <div class="absolute border" style="height: 145%;top: -9px;left: 0;"></div>
      <i class="ti ti-circle-x   text-danger" style="font-size: 30px;"></i>
    </div>
  </div>
  <div class="row p-2" style="justify-content: center;">
    <button type="button" class="flex text-start items-center cursor-default">
      <i class="ti ti-circle-plus text-green-500 cursor-pointer" style="font-size: 30px;"></i>
    </button>
  </div>
</ng-template>