<div class=" pt-1.5rem mb-2" *ngIf="pageEvalution==''">
    <div class="flex flex-col gap-2">
        <div class="flex flex-row gap-2">
            <div class="flex flex-col gap-2 w-1/4">
                <div class="w-full mb-2">
                    <div class="font-size-18px font-weight-700  text-primary">
                        <div class="absolute " style="transform:translateY(-9px)">
                        </div>
                        <span class="whitespace-nowrap relative" style="left:0px">
                            {{'AnnualEvaluation' | translate}} {{currentDate.getFullYear()}}
                        </span>
                    </div>
                </div>
            </div>
            <div class="flex flex-col w-3/4 gap-2">
                <div class="w-full mb-2 flex">
                    <div class="w-full flex flex-row gap-2">
                        <ng-container *ngFor="let item of subordinate.dataList; let i=index ; let f= first">
                            <div class="font-size-18px font-weight-700">
                                <span class="cursor-pointer"
                                    [ngClass]="{'text-secondary border-secondary border-b':subordinate.select?.tdesc==item.tdesc,'hover:text-gray-900':!(subordinate.select?.tdesc==item.tdesc)}"
                                    (click)="subordinate.select?.tdesc !== item.tdesc && selectDataList(item)">
                                    {{item.tdesc}}
                                </span>
                            </div>
                        </ng-container>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-row gap-2 w-full">
            <div class="flex w-1/3 justify-between ">
                <div class="box shadow-md hover:shadow-xl transition m-0 w-full" style="border-radius:20px">
                    <div class="box-body py-2">
                        <div class="flex flex-col">
                            <div class="flex">
                                <span class="font-size-18px font-weight-700  flex items-center" style="height:50px">
                                    {{'Subordinate' | translate}}
                                </span>
                            </div>
                            <div class="flex flex-row">
                                <div class="flex w-1/2 relative" style="height: 200px;">
                                    <div echarts class="w-full h-full" [options]="subordinateApproveOption"
                                        [autoResize]="true">
                                    </div>
                                    <div class="absolute inset-0 flex justify-center items-center pointer-events-none">
                                        <div class="text-xl font-bold">{{subordinateApprovePer}}%</div>
                                    </div>
                                </div>
                                <div class="flex flex-col w-1/2 gap-2"
                                    style="height: 200px;justify-content: center;align-items: start;">
                                    <span>
                                        {{'CompletedEmployees' | translate}} <span
                                            class="text-indigo-600">{{subordinateApprove()}}</span> {{'Employees' |
                                        translate}}
                                    </span>
                                    <span>
                                        {{'TotalEmployees' | translate}} <span
                                            class="text-indigo-600">{{subordinateAll()}}</span> {{'Employees' |
                                        translate}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex w-1/3 justify-between">
                <div class="box shadow-md hover:shadow-xl transition m-0 w-full" style="border-radius:20px">
                    <div class="box-body py-2">
                        <div class="flex flex-col">
                            <div class="flex">
                                <span class="font-size-18px font-weight-700 flex items-center" style="height:50px">
                                    {{'Approval' | translate}}
                                </span>
                            </div>
                            <div class="flex flex-row">
                                <div class="flex w-1/2 relative" style="height: 200px;">
                                    <div echarts class="w-full h-full" [options]="myApproveOption" [autoResize]="true">
                                    </div>
                                    <div class="absolute inset-0 flex justify-center items-center pointer-events-none">
                                        <div class="text-xl font-bold">{{myApprovePer}}%</div>
                                    </div>
                                </div>
                                <div class="flex flex-col w-1/2 gap-2"
                                    style="height: 200px;justify-content: center;align-items: start;">
                                    <span>
                                        {{'ApprovedEmployees' | translate}} <span
                                            class="text-indigo-600">{{myApprove()}}</span> {{'EmployeesEva' |
                                        translate}}
                                    </span>
                                    <span>
                                        {{'TotalEmployees' | translate}} <span
                                            class="text-indigo-600">{{subordinateAll()}}</span> {{'EmployeesEva' |
                                        translate}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex w-1/3 justify-between">
                <div class="box shadow-md hover:shadow-xl transition m-0 w-full" style="border-radius:20px">
                    <div class="box-body py-2">
                        <div class="flex flex-col">
                            <div class="flex">
                                <span class="font-size-18px font-weight-700  flex items-center" style="height:50px">
                                    {{'PmsOverview' | translate}}
                                </span>
                            </div>
                            <div class="flex flex-row">
                                <div class="flex w-1/2 relative" style="height: 200px;">
                                    <div echarts class="w-full h-full" [options]="pmsOption" [autoResize]="true">
                                    </div>
                                </div>
                                <div class="flex flex-col w-1/2 gap-2"
                                    style="height: 200px;justify-content: center;align-items: start;">
                                    <span *ngFor="let item of ['A','B','C','D','E']; let i=index"
                                        class="flex flex-row gap-2">
                                        <div class="flex">
                                            <span style="width:20px" [ngStyle]="{'background':gradeColor(item)}">
                                                &nbsp;&nbsp;</span>
                                        </div>
                                        <div class="flex" style="width: 55px">
                                            {{'Grade'+item | translate}}
                                        </div>
                                        <div class="flex">
                                            <span
                                                class="text-indigo-600">{{gradeFindLength(item)}}</span>&nbsp;{{'EmployeesEva'
                                            | translate}}
                                        </div>
                                        <div class="flex">
                                            <span class="text-indigo-600">{{gradeFindPer(item)}}</span>&nbsp;%
                                        </div>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-col gap-2 w-full">
            <div class="box shadow-md hover:shadow-xl transition m-0" style="border-radius:20px">
                <div class="box-body py-2">
                    <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)="postBossApproveAll()">
                                    {{'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)="searchDataGrid(search)">
                                    <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>
                    <ng-container *ngIf="syncfution.columns.length && syncfution.dataList.length">
                        <div class="mb-4">
                            <ng-container *ngTemplateOutlet="Datagrid"></ng-container>
                        </div>
                    </ng-container>
                </div>
            </div>

        </div>
    </div>
</div>
<ng-container *ngIf="pageEvalution!=''">
    <app-pms-form-employee [evaluationForm]="'sup'" [currentTap]="'ข้อมูลการประเมิน'"
        (sendReturnPath)="pageEvalution='';getBossList() ; pathTitle =  ['การประเมินผล', 'ประเมินโดยหัวหน้า']"
        [evaluaterId]="formEvaluation.evaluaterId" [evaluateeId]="formEvaluation.evaluateeId"></app-pms-form-employee>
</ng-container>



<ng-template #Datagrid>
    <ejs-grid #grid id='Grid' [locale]="locale" [dataSource]="dataSourceSearch" [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"
        (actionComplete)="actionComplete($event)" (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
                                    [disabled]="!(data.apsapproveType.code!='Apsapprove1'&&(data.masfromStatusType.code=='evaluating'||data.masfromStatusType.code=='pending'))"
                                    [class.cursor-not-allowed]="!(data.apsapproveType.code!='Apsapprove1'&&(data.masfromStatusType.code=='evaluating'||data.masfromStatusType.code=='pending'))"
                                    [class.accent-gray-400]="!(data.apsapproveType.code!='Apsapprove1'&&(data.masfromStatusType.code=='evaluating'||data.masfromStatusType.code=='pending'))"
                                    [class.opacity-50]="!(data.apsapproveType.code!='Apsapprove1'&&(data.masfromStatusType.code=='evaluating'||data.masfromStatusType.code=='pending'))"
                                    type="checkbox" class="ti-form-checkbox cursor-pointer"
                                    [checked]="selectEmp.get(data.apsassessy.employeeId)"
                                    (click)="!selectEmp.get(data.apsassessy.employeeId)?selectEmp.set(data.apsassessy.employeeId , true):selectEmp.delete(data.apsassessy.employeeId);checkSelectAll()">
                                &nbsp;
                                <ng-container
                                    *ngIf="data.apsapproveType.code!='Apsapprove1'&&(data.masfromStatusType.code=='evaluating'||data.masfromStatusType.code=='pending')">
                                    <img (click)="!selectEmp.get(data.apsassessy.employeeId)?selectEmp.set(data.apsassessy.employeeId , true):selectEmp.delete(data.apsassessy.employeeId);checkSelectAll()"
                                        class="cursor-pointer avatar shadow-none rounded-full !ring-transparent object-cover h-12 w-12"
                                        [src]="data.apsassessy.picture?getImg(data.apsassessy.picture):'./assets/img/users/defaultperson.jpg'"
                                        (error)="onImageError($event)">
                                    <span class="cursor-pointer"
                                        (click)="!selectEmp.get(data.apsassessy.employeeId)?selectEmp.set(data.apsassessy.employeeId , true):selectEmp.delete(data.apsassessy.employeeId);checkSelectAll()">
                                        {{data.apsassessy.employeeId}}
                                    </span>
                                </ng-container>
                                <ng-container
                                    *ngIf="!(data.apsapproveType.code!='Apsapprove1'&&(data.masfromStatusType.code=='evaluating'||data.masfromStatusType.code=='pending'))">
                                    <img class=" avatar shadow-none rounded-full !ring-transparent object-cover h-12 w-12"
                                        [src]="data.apsassessy.picture?getImg(data.apsassessy.picture):'./assets/img/users/defaultperson.jpg'"
                                        (error)="onImageError($event)">
                                    {{data.apsassessy.employeeId}}
                                </ng-container>
                            </div>
                        </ng-template>
                        <ng-template #template let-data *ngIf="col.headerText=='Status'">
                            <div class="flex justify-center">
                                <button type="button" class="ti-btn rounded-sm "
                                    [class]="statusButtonClass(data.statusIdp.statusType)"
                                    style="height: 30px; width: auto; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;"
                                    (click)="selectSubordinate(data,'',subordinate.select?.evaluationRoundId,data.statusIdp.statusType);pageEvalution='open'">
                                    {{statusCompetencyText(data.statusIdp.statusType) | translate}}
                                </button>
                            </div>
                        </ng-template>
                    </e-column>
                </ng-container>
            </ng-container>
        </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>