<ng-container *ngTemplateOutlet="pmsEvaluation"></ng-container>

<ng-template #pmsEvaluation>
    <ng-container *ngIf="appraisalPms">
        <div class="flex flex-col">
            <div class="flex py-2 flex-row gap-2 sticky" style="top:0;z-index:2;background: white;">
                <ng-container *ngIf="currentTap == 'Performance'">
                    <ng-container *ngFor="let item of partShow;let i=index">
                        <button type="button"
                            class="flex justify-center !items-center border bg-white p-1 text-center font-semibold"
                            (click)="scrollToMenu('menu-part-'+(i+1));currentPart=item;toggleAllParts(true,item)"
                            style="border-radius:20px;width: 100px"
                            [ngClass]="{'!bg-primary text-white':currentPart==item}">
                            <span class="leading-none">{{ item }}</span>
                            <ng-container *ngIf="remainList()[i]>=0">
                                &nbsp;
                                <span class="flex align-center justify-center rounded-circle text-white"
                                    [class.bg-danger]="remainList()[i]" [class.bg-success]="!remainList()[i]">
                                    <ng-container *ngIf="remainList()[i]">
                                        {{remainList()[i]}}
                                    </ng-container>
                                    <i *ngIf="!remainList()[i]" class="ti ti-check"></i>
                                </span>
                            </ng-container>
                        </button>
                    </ng-container>
                </ng-container>
                <ng-container *ngIf="currentTap != 'Performance'">
                    <ng-container *ngFor="let item of partShow;let i=index">
                        <button type="button"
                            class="flex justify-center !items-center border bg-white p-1 text-center font-semibold"
                            (click)="scrollToMenu('menu-part-'+(i+(data8List.length?8:9)));currentPart=item;toggleAllParts(true,item)"
                            style="border-radius:20px;width: 100px"
                            [ngClass]="{'!bg-primary text-white':currentPart==item}">
                            <span class="leading-none">{{ item }}</span>
                        </button>
                    </ng-container>
                </ng-container>
                <div class="flex justify-around !items-center border bg-white p-2 text-right"
                    style="border-radius:20px;width: 100px;margin-left: auto;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));">
                    <i title="แสดงทั้งหมด" class="bg-white cursor-pointer border ti ti-chevron-down"
                        style="padding: 1px;border-radius:5px;font-size:27px"
                        (click)="toggleAllParts(true);currentPart=''"></i>
                    <i title="ปิดทั้งหมด" class="bg-white cursor-pointer border ti ti-chevron-up"
                        style="padding: 1px;border-radius:5px;font-size:27px"
                        (click)="toggleAllParts(false);currentPart=''"></i>
                </div>
            </div>
            <div class="flex flex-col gap-2" style="min-height: calc(100vh - 479px);">
                <ng-container *ngIf="currentTap=='Performance'">
                    <ng-container *ngIf="appraisalPms?.part1Detail?.length then part1 else noData"></ng-container>
                    <ng-container *ngIf="appraisalPms?.part2Detail?.length then part2 else noData"></ng-container>
                    <ng-container *ngIf="appraisalPms?.part3Detail?.length then part3 else noData"></ng-container>
                    <ng-container *ngIf="appraisalPms?.part4Detail?.length then part4 else noData"></ng-container>
                    <ng-container *ngIf="appraisalPms?.part5Detail?.length then part5 else noData"></ng-container>
                    <ng-container *ngIf="appraisalPms?.part6Detail?.length then part6 else noData"></ng-container>
                    <ng-container *ngIf="appraisalPms?.part7Detail?.length then part7 else noData"></ng-container>
                </ng-container>
                <ng-container *ngIf="currentTap=='SummaryAndFeedback'">
                    <ng-container *ngIf="data8List.length">
                        <ng-container *ngTemplateOutlet="part8"></ng-container>
                    </ng-container>
                    <ng-container *ngTemplateOutlet="part9"></ng-container>
                    <ng-container *ngTemplateOutlet="part10"></ng-container>
                </ng-container>
            </div>
        </div>
    </ng-container>
</ng-template>

<ng-template #noData>
</ng-template>

<ng-template #part1>
    <div class="flex flex-col gap-2" [attr.id]="'menu-part-1'">
        <button type="button"
            class="p-4 w-full bg-gradient-to-r from-primary to-secondary text-white text-left font-semibold"
            style="border-radius:20px"
            (click)="scrollToMenu('menu-part-1');toggleAllParts(!partOpen.get('PART 1'),'PART 1');">
            {{"PART 1 : ประเมินผลการปฏิบัติงานตามนโยบายบริษัท (Corporate KPI)" | translate}}
        </button>
        <ng-container *ngIf="partOpen.get('PART 1')">
            <div class="relative">
                <table style="table-layout: fixed; width: 100%;">
                    <thead class="border-b border-gray-200">
                        <tr style="height:35px">
                            <th scope="col">{{'PerformanceIndicator' | translate}}</th>
                            <th scope="col">{{'Weight' | translate}}</th>
                            <th scope="col">{{'Detail' | translate}}</th>
                            <th scope="col" style="width: 300px">{{'TargetDegreeKpi' | translate}}</th>
                            <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                <th scope="col">{{'Score' | translate}}</th>
                            </ng-container>
                            <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                <th scope="col">ประเมินตนเอง</th>
                                <th scope="col">{{'Score' | translate}}</th>
                            </ng-container>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container *ngFor="let item of appraisalPms?.part1Detail;let i = index">
                            <tr class="border-b border-gray-200"
                                (mouseenter)="tableHover.set(item.groupAssessment1.pmsTopic.indicatorsDetail,true)"
                                (mouseleave)="tableHover.clear()"
                                [ngStyle]="{'background':tableHover.get(item.groupAssessment1.pmsTopic.indicatorsDetail)?'#f1f5f9':'#ffffff'}">
                                <td class="py-2" style="vertical-align: top">
                                    {{item.groupAssessment1.pmsTopic.indicatorsDetail}}</td>
                                <td class="py-2 text-center" style="vertical-align: top">{{item.weight}}</td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    <div class="hs-tooltip ti-main-tooltip [--trigger:hover]">
                                        <div class="hs-tooltip-toggle ti-main-tooltip-toggle">
                                            <i class="ti ti-help-circle"></i>
                                            <div class="hs-tooltip-content ti-main-tooltip-content border-secondary"
                                                role="tooltip">
                                                <div class="flex flex-col gap-2 font-weight-700">
                                                    <div>รายละเอียดข้อมูล</div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            ที่มาของนโยบาย
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.tdesc}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            {{'PerformanceIndicator' | translate}}
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.indicatorsDetail}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            เป้าหมาย
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.performanceGoalsDetail}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            หน่วยนับ
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.detailUnit}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            กำหนดเสร็จ
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.completionDate}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            น้ำหนัก
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.weight}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    <div class="flex flex-row justify-center gap-2 mb-2">
                                        <ng-container *ngFor="let item2 of [5,4,3,2,1];let f = first">
                                            <button type="button"
                                                class="h-12 w-12 p-0 shadow border text-soft-secondary-no-hover bg-white"
                                                style="border-radius:5px"
                                                (mouseenter)="partScore.set(item.groupAssessment1.pmsTopic.pmsTopicId,item2)"
                                                (mouseleave)="partScore.clear()"
                                                (click)="setScore(item,item2);allFormRemain()" [ngClass]="{
                            '!border-secondary': (evaluaterId==evaluateeId?item.scoreTopicExpectation>=item2:item.scoreTopicExpectationBoss>=item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)>=item2 ,
                            '!text-secondary':(evaluaterId==evaluateeId?item.scoreTopicExpectation>item2:item.scoreTopicExpectationBoss>item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)>item2,
                            '!text-white !bg-secondary':(evaluaterId==evaluateeId?item.scoreTopicExpectation==item2:item.scoreTopicExpectationBoss==item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)==item2,
                            'pointer-events-none':!canEdit}">
                                                {{item2}}
                                            </button>
                                        </ng-container>
                                    </div>
                                    <div class="flex justify-center"
                                        style="height: 20px;white-space: nowrap; overflow: visible">
                                        <span class="text-indigo-600">
                                            {{getTargetDetailValue(item)}}
                                        </span>
                                    </div>
                                </td>
                                <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{numberFixed2(item.weight * item.scoreTopicExpectation)}}
                                    </td>
                                </ng-container>
                                <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{item.scoreTopicExpectation}}
                                    </td>
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{numberFixed2(item.weight *
                                        (evaluaterId==evaluateeId?item.scoreTopicExpectation:item.scoreTopicExpectationBoss))}}
                                    </td>
                                </ng-container>
                            </tr>
                        </ng-container>
                        <tr class="bg-table-soft-gray">
                            <td class="align-start text-start !white-space-normal py-2" colspan="4">
                                <div class="flex flex-row gap-2">
                                    <div class="flex-1 font-semibold">
                                        {{'RawScore' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calRawScore(appraisalPms?.part1Detail)}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'SumOfWeights' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calWeigth(appraisalPms?.part1Detail)}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'AchievedScore' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calExpectationScore(appraisalPms?.part1Detail)}}</span>
                                    </div>
                                </div>
                            </td>
                            <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                <td
                                    class="align-start !white-space-normal text-center  py-2 font-semibold text-indigo-600">
                                    {{calExpectationTotalScore(appraisalPms?.part1Detail)}}
                                </td>
                            </ng-container>
                            <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                <td class=" py-2"></td>
                                <td
                                    class="align-start !white-space-normal text-center  py-2 font-semibold text-indigo-600">
                                    {{calExpectationTotalScoreBoss(appraisalPms?.part1Detail)}}
                                </td>
                            </ng-container>

                        </tr>
                        <tr class="bg-table-soft-gray">
                            <td class="align-start text-start !white-space-normal  py-2" colspan="4">
                                <div class="flex flex-row gap-2">
                                    <div class="flex-1 font-semibold">
                                        {{'RawScorePercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">100</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'FactorPercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{appraisalPms?.part1Percentage}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'AchievedScorePercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calPercentage(calExpectationTotalScoreBoss(appraisalPms?.part1Detail),calRawScore(appraisalPms?.part1Detail))}}</span>
                                    </div>
                                </div>
                            </td>
                            <td class=" py-2"></td>
                            <td class=" py-2" *ngIf="evaluaterId!=evaluateeId||complete"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </ng-container>
    </div>
</ng-template>

<ng-template #part2>
    <div class=" flex flex-col gap-2" [attr.id]="'menu-part-2'">
        <button type="button"
            class="p-4 w-full bg-gradient-to-r from-primary to-secondary text-white text-left font-semibold"
            style="border-radius:20px"
            (click)="scrollToMenu('menu-part-2');toggleAllParts(!partOpen.get('PART 2'),'PART 2')">
            {{"PART 2 : ประเมินตัวชี้วัดของหน่วยงาน (Department KPI)" | translate}}
        </button>
        <ng-container *ngIf="partOpen.get('PART 2')">
            <div class="relative">
                <table style="table-layout: fixed; width: 100%;">
                    <thead class="border-b border-gray-200">
                        <tr style="height:35px">
                            <th scope="col">{{'PerformanceIndicator' | translate}}</th>
                            <th scope="col">{{'Weight' | translate}}</th>
                            <th scope="col">{{'Detail' | translate}}</th>
                            <th scope="col" style="width: 300px;">{{'TargetDegreeKpi' | translate}}</th>
                            <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                <th scope="col">{{'Score' | translate}}</th>
                            </ng-container>
                            <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                <th scope="col">ประเมินตนเอง</th>
                                <th scope="col">{{'Score' | translate}}</th>
                            </ng-container>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container *ngFor="let item of appraisalPms?.part2Detail;let i = index">
                            <tr class="border-b border-gray-200"
                                (mouseenter)="tableHover.set(item.groupAssessment1.pmsTopic.indicatorsDetail,true)"
                                (mouseleave)="tableHover.clear()"
                                [ngStyle]="{'background':tableHover.get(item.groupAssessment1.pmsTopic.indicatorsDetail)?'#f1f5f9':'#ffffff'}">
                                <td class="py-2" style="vertical-align: top">
                                    {{item.groupAssessment1.pmsTopic.indicatorsDetail}}</td>
                                <td class="py-2 text-center" style="vertical-align: top">{{item.weight}}</td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    <div class="hs-tooltip ti-main-tooltip [--trigger:hover]">
                                        <div class="hs-tooltip-toggle ti-main-tooltip-toggle">
                                            <i class="ti ti-help-circle"></i>
                                            <div class="hs-tooltip-content ti-main-tooltip-content border-secondary"
                                                role="tooltip">
                                                <div class="flex flex-col gap-2 font-weight-700">
                                                    <div>รายละเอียดข้อมูล</div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            ที่มาของนโยบาย
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.tdesc}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            ตัวชี้วัด
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.indicatorsDetail}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            เป้าหมาย
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.performanceGoalsDetail}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            หน่วยนับ
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.detailUnit}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            กำหนดเสร็จ
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.completionDate}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            น้ำหนัก
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.weight}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    <div class="flex flex-row justify-center gap-2 mb-2">
                                        <ng-container *ngFor="let item2 of [5,4,3,2,1];let f = first">
                                            <button type="button"
                                                class="h-12 w-12 p-0 shadow border text-soft-secondary-no-hover bg-white"
                                                style="border-radius:5px"
                                                (mouseenter)="partScore.set(item.groupAssessment1.pmsTopic.pmsTopicId,item2)"
                                                (mouseleave)="partScore.clear()"
                                                (click)="setScore(item,item2);allFormRemain()" [ngClass]="{
                            '!border-secondary': (evaluaterId==evaluateeId?item.scoreTopicExpectation>=item2:item.scoreTopicExpectationBoss>=item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)>=item2 ,
                            '!text-secondary':(evaluaterId==evaluateeId?item.scoreTopicExpectation>item2:item.scoreTopicExpectationBoss>item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)>item2,
                            '!text-white !bg-secondary':(evaluaterId==evaluateeId?item.scoreTopicExpectation==item2:item.scoreTopicExpectationBoss==item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)==item2,
                            'pointer-events-none':!canEdit}">
                                                {{item2}}
                                            </button>
                                        </ng-container>
                                    </div>
                                    <div class="flex justify-center"
                                        style="height: 20px;white-space: nowrap; overflow: visible">
                                        <span class="text-indigo-600">
                                            {{getTargetDetailValue(item)}}
                                        </span>
                                    </div>
                                </td>
                                <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{numberFixed2(item.weight * item.scoreTopicExpectation)}}
                                    </td>
                                </ng-container>
                                <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{item.scoreTopicExpectation}}
                                    </td>
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{numberFixed2(item.weight *
                                        (evaluaterId==evaluateeId?item.scoreTopicExpectation:item.scoreTopicExpectationBoss))}}
                                    </td>
                                </ng-container>
                            </tr>
                        </ng-container>
                        <tr class="bg-table-soft-gray">
                            <td class="align-start text-start !white-space-normal py-2" colspan="4">
                                <div class="flex flex-row gap-2">
                                    <div class="flex-1 font-semibold">
                                        {{'RawScore' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calRawScore(appraisalPms?.part2Detail)}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'SumOfWeights' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calWeigth(appraisalPms?.part2Detail)}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'AchievedScore' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calExpectationScore(appraisalPms?.part2Detail)}}</span>
                                    </div>
                                </div>
                            </td>
                            <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                <td
                                    class="align-start !white-space-normal text-center  py-2 font-semibold text-indigo-600">
                                    {{calExpectationTotalScore(appraisalPms?.part2Detail)}}
                                </td>
                            </ng-container>
                            <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                <td class=" py-2"></td>
                                <td
                                    class="align-start !white-space-normal text-center  py-2 font-semibold text-indigo-600">
                                    {{calExpectationTotalScoreBoss(appraisalPms?.part2Detail)}}
                                </td>
                            </ng-container>
                        </tr>
                        <tr class="bg-table-soft-gray">
                            <td class="align-start text-start !white-space-normal  py-2" colspan="4">
                                <div class="flex flex-row gap-2">
                                    <div class="flex-1 font-semibold">
                                        {{'RawScorePercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">100</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'FactorPercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{appraisalPms?.part2Percentage}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'AchievedScorePercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calPercentage(calExpectationTotalScoreBoss(appraisalPms?.part2Detail),calRawScore(appraisalPms?.part2Detail))}}</span>
                                    </div>
                                </div>
                            </td>
                            <td class=" py-2"></td>
                            <td class=" py-2" *ngIf="evaluaterId!=evaluateeId||complete"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </ng-container>
    </div>
</ng-template>

<ng-template #part3>
    <div class=" flex flex-col gap-2" [attr.id]="'menu-part-3'">
        <button type="button"
            class="p-4 w-full bg-gradient-to-r from-primary to-secondary text-white text-left font-semibold"
            style="border-radius:20px"
            (click)="scrollToMenu('menu-part-3');toggleAllParts(!partOpen.get('PART 3'),'PART 3')">
            {{"PART 3 : ประเมินตัวชี้วัดรายบุคคล (Individual KPI)" | translate}}
        </button>
        <ng-container *ngIf="partOpen.get('PART 3')">
            <div class="relative">
                <table style="table-layout: fixed; width: 100%;">
                    <thead class="border-b border-gray-200">
                        <tr style="height:35px">
                            <th scope="col">{{'PerformanceIndicator' | translate}}</th>
                            <th scope="col">{{'Weight' | translate}}</th>
                            <th scope="col">{{'Detail' | translate}}</th>
                            <th scope="col" style="width: 300px;">{{'TargetDegreeKpi' | translate}}</th>
                            <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                <th scope="col">{{'Score' | translate}}</th>
                            </ng-container>
                            <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                <th scope="col">ประเมินตนเอง</th>
                                <th scope="col">{{'Score' | translate}}</th>
                            </ng-container>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container *ngFor="let item of appraisalPms?.part3Detail;let i = index">
                            <tr class="border-b border-gray-200"
                                (mouseenter)="tableHover.set(item.groupAssessment1.pmsTopic.indicatorsDetail,true)"
                                (mouseleave)="tableHover.clear()"
                                [ngStyle]="{'background':tableHover.get(item.groupAssessment1.pmsTopic.indicatorsDetail)?'#f1f5f9':'#ffffff'}">
                                <td class="py-2" style="vertical-align: top">
                                    {{item.groupAssessment1.pmsTopic.indicatorsDetail}}</td>
                                <td class="py-2 text-center" style="vertical-align: top">{{item.weight}}</td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    <div class="hs-tooltip ti-main-tooltip [--trigger:hover]">
                                        <div class="hs-tooltip-toggle ti-main-tooltip-toggle">
                                            <i class="ti ti-help-circle"></i>
                                            <div class="hs-tooltip-content ti-main-tooltip-content border-secondary"
                                                role="tooltip">
                                                <div class="flex flex-col gap-2 font-weight-700">
                                                    <div>รายละเอียดข้อมูล</div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            ที่มาของนโยบาย
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.tdesc}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            ตัวชี้วัด
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.indicatorsDetail}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            เป้าหมาย
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.performanceGoalsDetail}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            หน่วยนับ
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.detailUnit}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            กำหนดเสร็จ
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.completionDate}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            น้ำหนัก
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.weight}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    <div class="flex flex-row justify-center gap-2 mb-2">
                                        <ng-container *ngFor="let item2 of [5,4,3,2,1];let f = first">
                                            <button type="button"
                                                class="h-12 w-12 p-0 shadow border  text-soft-secondary bg-white"
                                                style="border-radius:5px"
                                                (mouseenter)="partScore.set(item.groupAssessment1.pmsTopic.pmsTopicId,item2)"
                                                (mouseleave)="partScore.clear()"
                                                (click)="setScore(item,item2);allFormRemain()" [ngClass]="{
                            '!border-secondary': (evaluaterId==evaluateeId?item.scoreTopicExpectation>=item2:item.scoreTopicExpectationBoss>=item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)>=item2 ,
                            '!text-secondary': (evaluaterId==evaluateeId?item.scoreTopicExpectation>item2:item.scoreTopicExpectationBoss>item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)>item2,
                            '!text-white !bg-secondary': (evaluaterId==evaluateeId?item.scoreTopicExpectation==item2:item.scoreTopicExpectationBoss==item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)==item2,
                            'pointer-events-none':!canEdit}">
                                                {{item2}}
                                            </button>
                                        </ng-container>
                                    </div>
                                    <div class="flex justify-center"
                                        style="height: 20px;white-space: nowrap; overflow: visible">
                                        <span class="text-indigo-600">
                                            {{getTargetDetailValue(item)}}
                                        </span>
                                    </div>
                                </td>
                                <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{numberFixed2(item.weight * item.scoreTopicExpectation)}}
                                    </td>
                                </ng-container>
                                <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{item.scoreTopicExpectation}}
                                    </td>
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{numberFixed2(item.weight *
                                        (evaluaterId==evaluateeId?item.scoreTopicExpectation:item.scoreTopicExpectationBoss))}}
                                    </td>
                                </ng-container>
                            </tr>
                        </ng-container>
                        <tr class="bg-table-soft-gray">
                            <td class="align-start text-start !white-space-normal py-2" colspan="4">
                                <div class="flex flex-row gap-2">
                                    <div class="flex-1 font-semibold">
                                        {{'RawScore' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calRawScore(appraisalPms?.part3Detail)}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'SumOfWeights' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calWeigth(appraisalPms?.part3Detail)}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'AchievedScore' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calExpectationScore(appraisalPms?.part3Detail)}}</span>
                                    </div>
                                </div>
                            </td>
                            <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                <td
                                    class="align-start !white-space-normal text-center  py-2 font-semibold text-indigo-600">
                                    {{calExpectationTotalScore(appraisalPms?.part3Detail)}}
                                </td>
                            </ng-container>
                            <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                <td class=" py-2"></td>
                                <td
                                    class="align-start !white-space-normal text-center  py-2 font-semibold text-indigo-600">
                                    {{calExpectationTotalScoreBoss(appraisalPms?.part3Detail)}}
                                </td>
                            </ng-container>
                        </tr>
                        <tr class="bg-table-soft-gray">
                            <td class="align-start text-start !white-space-normal  py-2" colspan="4">
                                <div class="flex flex-row gap-2">
                                    <div class="flex-1 font-semibold">
                                        {{'RawScorePercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">100</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'FactorPercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{appraisalPms?.part3Percentage}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'AchievedScorePercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calPercentage(calExpectationTotalScoreBoss(appraisalPms?.part3Detail),calRawScore(appraisalPms?.part3Detail))}}</span>
                                    </div>
                                </div>
                            </td>
                            <td class=" py-2"></td>
                            <td class=" py-2" *ngIf="evaluaterId!=evaluateeId||complete"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </ng-container>
    </div>
</ng-template>

<ng-template #part4>
    <div class=" flex flex-col gap-2" [attr.id]="'menu-part-4'">
        <button type="button"
            class="p-4 w-full bg-gradient-to-r from-primary to-secondary text-white text-left font-semibold"
            style="border-radius:20px"
            (click)="scrollToMenu('menu-part-4');toggleAllParts(!partOpen.get('PART 4'),'PART 4')">
            {{"PART 4 : ประเมินผลสมรรถนะที่สนับสนุนการปฏิบัติงาน (Competency)" | translate}}
        </button>
        <ng-container *ngIf="partOpen.get('PART 4')">
            <div class="relative">
                <table style="table-layout: fixed; width: 100%;">
                    <thead class="border-b border-gray-200">
                        <tr style="height:35px">
                            <th scope="col">{{'CompetencyPart4' | translate}}</th>
                            <th scope="col">{{'Weight' | translate}}</th>
                            <th scope="col" style="width: 300px;">{{'TargetDegreeKpi' | translate}}</th>
                            <th scope="col">{{'Score' | translate}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container *ngFor="let item of appraisalPms?.part4Detail;let i = index">
                            <tr class="border-b border-gray-200"
                                (mouseenter)="tableHover.set(item.competencyType.tdesc,true)"
                                (mouseleave)="tableHover.clear()"
                                [ngStyle]="{'background':tableHover.get(item.competencyType.tdesc)?'#f1f5f9':'#ffffff'}">
                                <td class="py-2" style="vertical-align: top">
                                    {{item.competencyType.tdesc}}</td>
                                <td class="py-2 text-center" style="vertical-align: top">{{item.competencyType.weight}}
                                </td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    <div class="flex flex-row justify-center gap-2 mb-2">
                                        <ng-container *ngFor="let item2 of [5,4,3,2,1];let f = first">
                                            <button type="button"
                                                class="h-12 w-12 p-0 shadow border  text-soft-secondary-no-hover bg-white pointer-events-none"
                                                style="border-radius:5px"
                                                [ngClass]="{
                            '!border-secondary': calAverage(convertToNumber(inforWeight.get(item.competencyType.shortName) !=='null'?inforWeight.get(item.competencyType.shortName): '0'))>=item2 ,
                            '!text-secondary': calAverage(convertToNumber(inforWeight.get(item.competencyType.shortName) !=='null'?inforWeight.get(item.competencyType.shortName): '0'))>item2,
                            '!text-white !bg-secondary':calAverage(convertToNumber(inforWeight.get(item.competencyType.shortName) !=='null'?inforWeight.get(item.competencyType.shortName): '0'))==item2}">
                                                {{item2}}
                                            </button>
                                        </ng-container>
                                    </div>
                                    <div style="height: 20px;">
                                        <span class="text-indigo-600">
                                            <ng-container>
                                                {{convertToNumber(inforWeight.get(item.competencyType.shortName)
                                                !=='null'?inforWeight.get(item.competencyType.shortName): '0')}}
                                            </ng-container>
                                        </span>
                                    </div>
                                </td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    {{numberFixed2(item.competencyType.weight *
                                    calAverage(convertToNumber(inforWeight.get(item.competencyType.shortName)
                                    !=='null'?inforWeight.get(item.competencyType.shortName): '0')))}}
                                </td>
                            </tr>
                        </ng-container>
                        <tr class="bg-table-soft-gray">
                            <td class="align-start text-start !white-space-normal py-2" colspan="3">
                                <div class="flex flex-row gap-2">
                                    <div class="flex-1 font-semibold">
                                        {{'RawScore' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calRawScorePart4(appraisalPms?.part4Detail)}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'SumOfWeights' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calWeigthPart4(appraisalPms?.part4Detail)}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'AchievedScore' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calExpectationScorePart4(appraisalPms?.part4Detail)}}</span>
                                    </div>
                                </div>
                            </td>
                            <td class="align-start !white-space-normal text-center  py-2 font-semibold text-indigo-600">
                                {{calExpectationTotalScoreBossPart4(appraisalPms?.part4Detail)}}
                            </td>
                        </tr>
                        <tr class="bg-table-soft-gray">
                            <td class="align-start text-start !white-space-normal  py-2" colspan="3">
                                <div class="flex flex-row gap-2">
                                    <div class="flex-1 font-semibold">
                                        {{'RawScorePercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">100</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'FactorPercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{appraisalPms?.part4Percentage}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'AchievedScorePercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calPercentage(calExpectationTotalScoreBossPart4(appraisalPms?.part4Detail),calRawScorePart4(appraisalPms?.part4Detail))}}</span>
                                    </div>
                                </div>
                            </td>
                            <td class=" py-2"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </ng-container>
    </div>
</ng-template>

<ng-template #part5>
    <div class=" flex flex-col gap-2" [attr.id]="'menu-part-5'">
        <button type="button"
            class="p-4 w-full bg-gradient-to-r from-primary to-secondary text-white text-left font-semibold"
            style="border-radius:20px"
            (click)="scrollToMenu('menu-part-5');toggleAllParts(!partOpen.get('PART 5'),'PART 5')">
            {{"PART 5 : อัตราการเข้างาน (Time Attendance)" | translate}}
        </button>
        <ng-container *ngIf="partOpen.get('PART 5')">
            <div class="relative">
                <table style="table-layout: fixed; width: 100%;">
                    <thead class="border-b border-gray-200">
                        <tr style="height:35px">
                            <th scope="col">{{'TimeAttendancePart5' | translate}}</th>
                            <th scope="col">{{'Weight' | translate}}</th>
                            <th scope="col">{{'Detail' | translate}}</th>
                            <th scope="col" style="width: 300px;">{{'TargetDegreeKpi' | translate}}</th>
                            <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                <th scope="col">{{'Score' | translate}}</th>
                            </ng-container>
                            <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                <th scope="col">ประเมินตนเอง</th>
                                <th scope="col">{{'Score' | translate}}</th>
                            </ng-container>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container *ngFor="let item of appraisalPms?.part5Detail;let i = index">
                            <tr class="border-b border-gray-200" (mouseenter)="tableHover.set(item.tdesc,true)"
                                (mouseleave)="tableHover.clear()"
                                [ngStyle]="{'background':tableHover.get(item.tdesc)?'#f1f5f9':'#ffffff'}">
                                <td class="py-2" style="vertical-align: top">
                                    {{item.tdesc}}
                                </td>
                                <td class="py-2 text-center" style="vertical-align: top">{{item.weight}}</td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    <div class="hs-tooltip ti-main-tooltip [--trigger:hover]">
                                        <div class="hs-tooltip-toggle ti-main-tooltip-toggle">
                                            <i class="ti ti-help-circle"></i>
                                            <div class="hs-tooltip-content ti-main-tooltip-content border-secondary"
                                                role="tooltip">
                                                <div class="flex flex-col gap-2 font-weight-700">
                                                    <div>รายละเอียดข้อมูล</div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            อัตราการเข้างาน
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.tdesc}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            เป้าหมาย
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.performanceTargets}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            หน่วยนับ
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.detailUnit}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            น้ำหนัก
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.weight}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    <div class="flex flex-row justify-center gap-2 mb-2">
                                        <ng-container *ngFor="let item2 of [5,4,3,2,1];let f = first">
                                            <button type="button"
                                                class="h-12 w-12 p-0 shadow border  text-soft-secondary-no-hover bg-white"
                                                style="border-radius:5px" (mouseenter)="partScore.set(item.tdesc,item2)"
                                                (mouseleave)="partScore.clear()"
                                                (click)="setScorePart5(item,item2);allFormRemain()" [ngClass]="{
                            '!border-secondary': (evaluaterId==evaluateeId?item.pmsWorkingTimeScore>=item2:item.pmsWorkingTimeScoreBoss>=item2)||(partScore.get(item.tdesc) ?? 0)>=item2 ,
                            '!text-secondary': (evaluaterId==evaluateeId?item.pmsWorkingTimeScore>item2:item.pmsWorkingTimeScoreBoss>item2)||(partScore.get(item.tdesc) ?? 0)>item2,
                            '!text-white !bg-secondary': (evaluaterId==evaluateeId?item.pmsWorkingTimeScore==item2:item.pmsWorkingTimeScoreBoss==item2)||(partScore.get(item.tdesc) ?? 0)==item2,
                            'pointer-events-none':!canEdit}">
                                                {{item2}}
                                            </button>
                                        </ng-container>
                                    </div>
                                    <div class="flex justify-center"
                                        style="height: 20px;white-space: nowrap; overflow: visible">
                                        <span class="text-indigo-600">
                                            {{getTargetDetailValuePart5(item)}}
                                        </span>
                                    </div>
                                </td>
                                <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{numberFixed2(item.weight * item.pmsWorkingTimeScore)}}
                                    </td>
                                </ng-container>
                                <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{item.pmsWorkingTimeScore}}
                                    </td>
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{numberFixed2(item.weight *
                                        (evaluaterId==evaluateeId?item.pmsWorkingTimeScore:item.pmsWorkingTimeScoreBoss))}}
                                    </td>
                                </ng-container>
                            </tr>
                        </ng-container>
                        <tr class="bg-table-soft-gray">
                            <td class="align-start text-start !white-space-normal py-2" colspan="4">
                                <div class="flex flex-row gap-2">
                                    <div class="flex-1 font-semibold">
                                        {{'RawScore' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calRawScorePart5(appraisalPms?.part5Detail)}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'SumOfWeights' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calWeigthPart5(appraisalPms?.part5Detail)}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'AchievedScore' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calExpectationScorePart5(appraisalPms?.part5Detail)}}</span>
                                    </div>
                                </div>
                            </td>
                            <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                <td
                                    class="align-start !white-space-normal text-center  py-2 font-semibold text-indigo-600">
                                    {{calExpectationTotalScorePart5(appraisalPms?.part5Detail)}}
                                </td>
                            </ng-container>
                            <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                <td class=" py-2"></td>
                                <td
                                    class="align-start !white-space-normal text-center  py-2 font-semibold text-indigo-600">
                                    {{calExpectationTotalScoreBossPart5(appraisalPms?.part5Detail)}}
                                </td>
                            </ng-container>
                        </tr>
                        <tr class="bg-table-soft-gray">
                            <td class="align-start text-start !white-space-normal  py-2" colspan="4">
                                <div class="flex flex-row gap-2">
                                    <div class="flex-1 font-semibold">
                                        {{'RawScorePercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">100</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'FactorPercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{appraisalPms?.part5Percentage}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'AchievedScorePercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calPercentage(calExpectationTotalScoreBossPart5(appraisalPms?.part5Detail),calRawScorePart5(appraisalPms?.part5Detail))}}</span>
                                    </div>
                                </div>
                            </td>
                            <td class=" py-2" *ngIf="evaluaterId!=evaluateeId||complete"></td>
                            <td class=" py-2"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </ng-container>
    </div>
</ng-template>

<ng-template #part6>
    <div class=" flex flex-col gap-2" [attr.id]="'menu-part-6'">
        <button type="button"
            class="p-4 w-full bg-gradient-to-r from-primary to-secondary text-white text-left font-semibold"
            style="border-radius:20px"
            (click)="scrollToMenu('menu-part-6');toggleAllParts(!partOpen.get('PART 6'),'PART 6')">
            {{"PART 6 : งานที่ได้รับมอบหมายเพิ่มเติม (Cross Functional Project Assignment)" | translate}}
        </button>
        <ng-container *ngIf="partOpen.get('PART 6')">
            <div class="relative">
                <table style="table-layout: fixed; width: 100%;">
                    <thead class="border-b border-gray-200">
                        <tr style="height:35px">
                            <th scope="col">{{'CrossFunctionalProjectAssignment' | translate}}</th>
                            <th scope="col">{{'Weight' | translate}}</th>
                            <th scope="col">{{'Detail' | translate}}</th>
                            <th scope="col" style="width: 300px;">{{'TargetDegreeKpi' | translate}}</th>
                            <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                <th scope="col">{{'Score' | translate}}</th>
                            </ng-container>
                            <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                <th scope="col">ประเมินตนเอง</th>
                                <th scope="col">{{'Score' | translate}}</th>
                            </ng-container>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container *ngFor="let item of appraisalPms?.part6Detail;let i = index">
                            <tr class="border-b border-gray-200"
                                (mouseenter)="tableHover.set(item.groupAssessment1.pmsTopic.tdesc,true)"
                                (mouseleave)="tableHover.clear()"
                                [ngStyle]="{'background':tableHover.get(item.groupAssessment1.pmsTopic.tdesc)?'#f1f5f9':'#ffffff'}">
                                <td class="py-2" style="vertical-align: top">
                                    {{item.groupAssessment1.pmsTopic.tdesc}}</td>
                                <td class="py-2 text-center" style="vertical-align: top">{{item.weight}}</td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    <div class="hs-tooltip ti-main-tooltip [--trigger:hover]">
                                        <div class="hs-tooltip-toggle ti-main-tooltip-toggle">
                                            <i class="ti ti-help-circle"></i>
                                            <div class="hs-tooltip-content ti-main-tooltip-content border-secondary"
                                                role="tooltip">
                                                <div class="flex flex-col gap-2 font-weight-700">
                                                    <div>รายละเอียดข้อมูล</div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            งานที่ได้รับมอบหมายเพิ่มเติม
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.tdesc}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            ตัวชี้วัด
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.indicatorsDetail}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            เป้าหมาย
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.performanceGoalsDetail}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            หน่วยนับ
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.detailUnit}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            กำหนดเสร็จ
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.completionDate}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            น้ำหนัก
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.weight}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    <div class="flex flex-row justify-center gap-2 mb-2">
                                        <ng-container *ngFor="let item2 of [5,4,3,2,1];let f = first">
                                            <button type="button"
                                                class="h-12 w-12 p-0 shadow border  text-soft-secondary-no-hover bg-white"
                                                style="border-radius:5px"
                                                (mouseenter)="partScore.set(item.groupAssessment1.pmsTopic.pmsTopicId,item2)"
                                                (mouseleave)="partScore.clear()"
                                                (click)="setScore(item,item2);allFormRemain()" [ngClass]="{
                            '!border-secondary': (evaluaterId==evaluateeId?item.scoreTopicExpectation>=item2:item.scoreTopicExpectationBoss>=item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)>=item2,
                            '!text-secondary': (evaluaterId==evaluateeId?item.scoreTopicExpectation>item2:item.scoreTopicExpectationBoss>item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)>item2,
                            '!text-white !bg-secondary': (evaluaterId==evaluateeId?item.scoreTopicExpectation==item2:item.scoreTopicExpectationBoss==item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)==item2,
                            'pointer-events-none':!canEdit}">
                                                {{item2}}
                                            </button>
                                        </ng-container>
                                    </div>
                                    <div class="flex justify-center"
                                        style="height: 20px;white-space: nowrap; overflow: visible">
                                        <span class="text-indigo-600">
                                            {{getTargetDetailValue(item)}}
                                        </span>
                                    </div>
                                </td>
                                <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{numberFixed2(item.weight * item.scoreTopicExpectation)}}
                                    </td>
                                </ng-container>
                                <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{item.scoreTopicExpectation}}
                                    </td>
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{numberFixed2(item.weight *
                                        (evaluaterId==evaluateeId?item.scoreTopicExpectation:item.scoreTopicExpectationBoss))}}
                                    </td>
                                </ng-container>
                            </tr>
                        </ng-container>
                        <tr class="bg-table-soft-gray">
                            <td class="align-start text-start !white-space-normal py-2" colspan="4">
                                <div class="flex flex-row gap-2">
                                    <div class="flex-1 font-semibold">
                                        {{'RawScore' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calRawScore(appraisalPms?.part6Detail)}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'SumOfWeights' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calWeigth(appraisalPms?.part6Detail)}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'AchievedScore' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calExpectationScore(appraisalPms?.part6Detail)}}</span>
                                    </div>
                                </div>
                            </td>
                            <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                <td
                                    class="align-start !white-space-normal text-center  py-2 font-semibold text-indigo-600">
                                    {{calExpectationTotalScore(appraisalPms?.part6Detail)}}
                                </td>
                            </ng-container>
                            <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                <td class=" py-2"></td>
                                <td
                                    class="align-start !white-space-normal text-center  py-2 font-semibold text-indigo-600">
                                    {{calExpectationTotalScoreBoss(appraisalPms?.part6Detail)}}
                                </td>
                            </ng-container>
                        </tr>
                        <tr class="bg-table-soft-gray">
                            <td class="align-start text-start !white-space-normal  py-2" colspan="4">
                                <div class="flex flex-row gap-2">
                                    <div class="flex-1 font-semibold">
                                        {{'RawScorePercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">100</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'FactorPercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{appraisalPms?.part6Percentage}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'AchievedScorePercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calPercentage(calExpectationTotalScoreBoss(appraisalPms?.part6Detail),calRawScore(appraisalPms?.part6Detail))}}</span>
                                    </div>
                                </div>
                            </td>
                            <td class=" py-2" *ngIf="evaluaterId!=evaluateeId||complete"></td>
                            <td class=" py-2"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </ng-container>
    </div>
</ng-template>

<ng-template #part7>
    <div class=" flex flex-col gap-2" [attr.id]="'menu-part-7'">
        <button type="button"
            class="p-4 w-full bg-gradient-to-r from-primary to-secondary text-white text-left font-semibold"
            style="border-radius:20px"
            (click)="scrollToMenu('menu-part-7');toggleAllParts(!partOpen.get('PART 7'),'PART 7')">
            {{"PART 7 : กิจกรรมพิเศษ (Special Activities)" | translate}}
        </button>
        <ng-container *ngIf="partOpen.get('PART 7')">
            <div class="relative">
                <table style="table-layout: fixed; width: 100%;">
                    <thead class="border-b border-gray-200">
                        <tr style="height:35px">
                            <th scope="col">{{'SpecialActivities' | translate}}</th>
                            <th scope="col">{{'Weight' | translate}}</th>
                            <th scope="col">{{'Detail' | translate}}</th>
                            <th scope="col" style="width: 300px;">{{'TargetDegreeKpi' | translate}}</th>
                            <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                <th scope="col">{{'Score' | translate}}</th>
                            </ng-container>
                            <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                <th scope="col">ประเมินตนเอง</th>
                                <th scope="col">{{'Score' | translate}}</th>
                            </ng-container>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container *ngFor="let item of appraisalPms?.part7Detail;let i = index">
                            <tr class="border-b border-gray-200"
                                (mouseenter)="tableHover.set(item.groupAssessment1.pmsTopic.tdesc,true)"
                                (mouseleave)="tableHover.clear()"
                                [ngStyle]="{'background':tableHover.get(item.groupAssessment1.pmsTopic.tdesc)?'#f1f5f9':'#ffffff'}">
                                <td class="py-2" style="vertical-align: top">
                                    {{item.groupAssessment1.pmsTopic.tdesc}}</td>
                                <td class="py-2 text-center" style="vertical-align: top">{{item.weight}}</td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    <div class="hs-tooltip ti-main-tooltip [--trigger:hover]">
                                        <div class="hs-tooltip-toggle ti-main-tooltip-toggle">
                                            <i class="ti ti-help-circle"></i>
                                            <div class="hs-tooltip-content ti-main-tooltip-content border-secondary"
                                                role="tooltip">
                                                <div class="flex flex-col gap-2 font-weight-700">
                                                    <div>รายละเอียดข้อมูล</div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            กิจกรรมพิเศษ
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.tdesc}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            ตัวชี้วัด
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.indicatorsDetail}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            เป้าหมาย
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.performanceGoalsDetail}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            หน่วยนับ
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.detailUnit}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            กำหนดเสร็จ
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.groupAssessment1.pmsTopic.completionDate}}
                                                        </div>
                                                    </div>
                                                    <div class="text-start flex flex-row">
                                                        <div style="width: 100px;">
                                                            น้ำหนัก
                                                        </div>
                                                        <div class="px-1">
                                                            &nbsp;:&nbsp;
                                                        </div>
                                                        <div class="flex-1">
                                                            {{item.weight}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    <div class="flex flex-row justify-center gap-2 mb-2">
                                        <ng-container *ngFor="let item2 of [5,4,3,2,1];let f = first">
                                            <button type="button"
                                                class="h-12 w-12 p-0 shadow border  text-soft-secondary-no-hover bg-white"
                                                style="border-radius:5px"
                                                (mouseenter)="partScore.set(item.groupAssessment1.pmsTopic.pmsTopicId,item2)"
                                                (mouseleave)="partScore.clear()"
                                                (click)="setScore(item,item2);allFormRemain()" [ngClass]="{
                            '!border-secondary': (evaluaterId==evaluateeId?item.scoreTopicExpectation>=item2:item.scoreTopicExpectationBoss>=item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)>=item2,
                            '!text-secondary': (evaluaterId==evaluateeId?item.scoreTopicExpectation>item2:item.scoreTopicExpectationBoss>item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)>item2,
                            '!text-white !bg-secondary': (evaluaterId==evaluateeId?item.scoreTopicExpectation==item2:item.scoreTopicExpectationBoss==item2)||(partScore.get(item.groupAssessment1.pmsTopic.pmsTopicId) ?? 0)==item2,
                            'pointer-events-none':!canEdit}">
                                                {{item2}}
                                            </button>
                                        </ng-container>
                                    </div>
                                    <div class="flex justify-center"
                                        style="height: 20px;white-space: nowrap; overflow: visible">
                                        <span class="text-indigo-600">
                                            {{getTargetDetailValue(item)}}
                                        </span>
                                    </div>
                                </td>
                                <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{numberFixed2(item.weight * item.scoreTopicExpectation)}}
                                    </td>
                                </ng-container>
                                <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{item.scoreTopicExpectation}}
                                    </td>
                                    <td class="py-2 text-center" style="vertical-align: top">
                                        {{numberFixed2(item.weight *
                                        (evaluaterId==evaluateeId?item.scoreTopicExpectation:item.scoreTopicExpectationBoss))}}
                                    </td>
                                </ng-container>
                            </tr>
                        </ng-container>
                        <tr class="bg-table-soft-gray">
                            <td class="align-start text-start !white-space-normal py-2" colspan="4">
                                <div class="flex flex-row gap-2">
                                    <div class="flex-1 font-semibold">
                                        {{'RawScore' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calRawScore(appraisalPms?.part7Detail)}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'SumOfWeights' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calWeigth(appraisalPms?.part7Detail)}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'AchievedScore' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calExpectationScore(appraisalPms?.part7Detail)}}</span>
                                    </div>
                                </div>
                            </td>
                            <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                <td
                                    class="align-start !white-space-normal text-center  py-2 font-semibold text-indigo-600">
                                    {{calExpectationTotalScore(appraisalPms?.part7Detail)}}
                                </td>
                            </ng-container>
                            <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                <td class=" py-2"></td>
                                <td
                                    class="align-start !white-space-normal text-center  py-2 font-semibold text-indigo-600">
                                    {{calExpectationTotalScoreBoss(appraisalPms?.part7Detail)}}
                                </td>
                            </ng-container>
                        </tr>
                        <tr class="bg-table-soft-gray">
                            <td class="align-start text-start !white-space-normal  py-2" colspan="4">
                                <div class="flex flex-row gap-2">
                                    <div class="flex-1 font-semibold">
                                        {{'RawScorePercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">100</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'FactorPercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{appraisalPms?.part6Percentage}}</span>
                                    </div>
                                    <div class="flex-1 font-semibold">
                                        {{'AchievedScorePercent' | translate}}&nbsp;:&nbsp;<span
                                            class="text-indigo-600 ">{{calPercentage(calExpectationTotalScoreBoss(appraisalPms?.part7Detail),calRawScore(appraisalPms?.part7Detail))}}</span>
                                    </div>
                                </div>
                            </td>
                            <td class=" py-2" *ngIf="evaluaterId!=evaluateeId||complete"></td>
                            <td class=" py-2"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </ng-container>
    </div>
</ng-template>

<ng-template #part8>
    <div class=" flex flex-col gap-2" [attr.id]="'menu-part-8'">
        <button type="button"
            class="p-4 w-full bg-gradient-to-r from-primary to-secondary text-white text-left font-semibold"
            style="border-radius:20px"
            (click)="scrollToMenu('menu-part-8');toggleAllParts(!partOpen.get('PART 8'),'PART 8')">
            {{'PART 8 : สรุปผลการปฏิบัติงาน (Summary)' | translate}}
        </button>
        <ng-container *ngIf="partOpen.get('PART 8')">
            <table style="table-layout: fixed; width: 100%;">
                <thead class="border-b border-gray-200">
                    <tr style="height:35px">
                        <th scope="col">{{'EvaluationFactor' | translate}}</th>
                        <th scope="col">{{'RawScore%' | translate}}</th>
                        <th scope="col">{{'Factor%' | translate}}</th>
                        <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                            <th scope="col">{{'AchievedScore%' | translate}}</th>
                            <th scope="col">{{'NetScorePart8' | translate}}</th>
                        </ng-container>
                        <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                            <th scope="col">{{'DirectReportScore%' | translate}}</th>
                            <th scope="col">{{'AchievedScore%' | translate}}</th>
                            <th scope="col">{{'DirectReportNetScore' | translate}}</th>
                            <th scope="col">{{'NetScorePart8' | translate}}</th>
                        </ng-container>

                    </tr>
                </thead>
                <tbody>
                    <ng-container *ngFor="let item of data8List;let i = index">
                        <tr class="border-b border-gray-200" (mouseenter)="tableHover.set(item.evaluationFactor,true)"
                            (mouseleave)="tableHover.clear()"
                            [ngStyle]="{'background':tableHover.get(item.evaluationFactor)?'#f1f5f9':'#ffffff'}">
                            <td class="py-2" style="vertical-align: top">
                                {{item.evaluationFactor}}
                            </td>
                            <td class="py-2 text-center" style="vertical-align: top">
                                {{item.rawScore}}
                            </td>
                            <td class="py-2 text-center" style="vertical-align: top">
                                {{item.factors}}
                            </td>
                            <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                                <td class="py-2 text-center" style="vertical-align: top">
                                    {{numberFixed2(item.scoreObtained)}}
                                </td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    {{numberFixed2(item.netScore)}}
                                </td>
                            </ng-container>
                            <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                                <td class="py-2 text-center" style="vertical-align: top">
                                    {{numberFixed2(item.scoreObtained)}}
                                </td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    {{numberFixed2(item.scoreObtainedBoss)}}
                                </td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    {{numberFixed2(item.netScore)}}
                                </td>
                                <td class="py-2 text-center" style="vertical-align: top">
                                    {{numberFixed2(item.netScoreBoss)}}
                                </td>
                            </ng-container>
                        </tr>
                    </ng-container>
                    <tr class="bg-table-soft-gray" style="height:35px">
                        <td class="py-2 align-start text-center font-semibold">
                            {{'SummaryPart8' | translate}}
                        </td>
                        <td class="py-2 align-start text-center">
                        </td>
                        <td class="py-2 align-start text-center font-semibold text-indigo-600">
                            {{calFactors()}}
                        </td>
                        <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                            <td class="py-2 align-start text-center font-semibold text-indigo-600">
                                {{calScoreObtained()}}
                            </td>
                            <td class="py-2 align-start text-center font-semibold text-indigo-600">
                                {{calNetScore()}}
                            </td>
                        </ng-container>
                        <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                            <td class="py-2 align-start text-center font-semibold text-indigo-600">
                                {{calScoreObtained()}}
                            </td>
                            <td class="py-2 align-start text-center font-semibold text-indigo-600">
                                {{calScoreObtainedBoss()}}
                            </td>
                            <td class="py-2 align-start text-center font-semibold text-indigo-600">
                                {{calNetScore()}}
                            </td>
                            <td class="py-2 align-start text-center font-semibold text-indigo-600">
                                {{calNetScoreBoss()}}
                            </td>
                        </ng-container>
                    </tr>
                </tbody>
            </table>
        </ng-container>
    </div>
</ng-template>

<ng-template #part9>
    <div class=" flex flex-col gap-2" [attr.id]="'menu-part-9'">
        <button type="button"
            class="p-4 w-full bg-gradient-to-r from-primary to-secondary text-white text-left font-semibold"
            style="border-radius:20px"
            (click)="scrollToMenu('menu-part-9');toggleAllParts(!partOpen.get('PART 9'),'PART 9')">
            {{'PART 9 : name' | translate}}
        </button>
        <ng-container *ngIf="partOpen.get('PART 9')">
            <div class="space-y-4">
                <div class="pb-1rem" *ngIf="appraisalPms">
                    <div class="pb-2 grid grid-cols-2">
                        <div class="col-span-1 grid-cols-1 text-gray-400">
                            <div class="col-span-1 bg-soft-secondary p-2" style="min-height: 55px;">
                                {{'EMPLOYEE STRENGTHS AND ACCOMPLISHMENTS' | translate}}
                            </div>
                            <div class="col-span-1 p-2">
                                <textarea type="text" rows="2" class="ti-form-input"
                                    [class.!bg-input-readonly]="!canEdit" [readonly]="!canEdit"
                                    [(ngModel)]="appraisalPms.employeeStrengths"></textarea>
                            </div>
                        </div>
                        <div class="col-span-1 grid-cols-1 text-gray-400">
                            <div class="col-span-1  bg-soft-secondary p-2" style="min-height: 55px;">
                                {{'Suggested Learning Topics' | translate}}
                            </div>
                            <div class="col-span-1 p-2">
                                <textarea type="text" rows="2" class="ti-form-input"
                                    [class.!bg-input-readonly]="!canEdit" [readonly]="!canEdit"
                                    [(ngModel)]="appraisalPms.learningTopicsForStrengths"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="pb-2 grid grid-cols-2">
                        <div class="col-span-1 grid-cols-1 text-gray-400">
                            <div class="col-span-1 bg-soft-secondary p-2" style="min-height: 55px;">
                                {{ 'PERFORMANCE AREAS WHICH NEED IMPROVEMENT' | translate}}
                            </div>
                            <div class="col-span-1 p-2">
                                <textarea type="text" rows="2" class="ti-form-input"
                                    [class.!bg-input-readonly]="!canEdit" [readonly]="!canEdit"
                                    [(ngModel)]="appraisalPms.performanceWeaknesses"></textarea>
                            </div>
                        </div>
                        <div class="col-span-1 grid-cols-1 text-gray-400">
                            <div class="col-span-1  bg-soft-secondary p-2" style="min-height: 55px;">
                                {{ 'Suggested Learning Topics2' | translate}}
                            </div>
                            <div class="col-span-1 p-2">
                                <textarea type="text" rows="2" class="ti-form-input"
                                    [class.!bg-input-readonly]="!canEdit" [readonly]="!canEdit"
                                    [(ngModel)]="appraisalPms.learningTopicsForWeaknesses"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="pb-2 grid grid-cols-2">
                        <div class="col-span-1 grid-cols-1 text-gray-400">
                            <div class="col-span-1 bg-soft-secondary p-2" style="min-height: 55px;">
                                {{ 'PLAN OF ACTION TOWARD IMPROVED PERFORMANCE' | translate}}
                            </div>
                            <div class="col-span-1 p-2">
                                <textarea type="text" rows="2" class="ti-form-input"
                                    [class.!bg-input-readonly]="!canEdit" [readonly]="!canEdit"
                                    [(ngModel)]="appraisalPms.improvementPlan"></textarea>
                            </div>
                        </div>
                        <div class="col-span-1 grid-cols-1 text-gray-400">
                            <div class="col-span-1  bg-soft-secondary p-2" style="min-height: 55px;">
                                {{ 'Suggested Learning Topics3' | translate}}
                            </div>
                            <div class="col-span-1 p-2">
                                <textarea type="text" rows="2" class="ti-form-input"
                                    [class.!bg-input-readonly]="!canEdit" [readonly]="!canEdit"
                                    [(ngModel)]="appraisalPms.learningTopicsForImprovement"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ng-container>
    </div>
</ng-template>

<ng-template #part10>
    <div class=" flex flex-col gap-2" [attr.id]="'menu-part-10'">
        <button type="button"
            class="p-4 w-full bg-gradient-to-r from-primary to-secondary text-white text-left font-semibold"
            style="border-radius:20px"
            (click)="scrollToMenu('menu-part-10');toggleAllParts(!partOpen.get('PART 10'),'PART 10')">
            {{'PART 10 : คำชมหรือรางวัลที่ได้รับ (Conversation, Feedback, Recognise : CFR)' | translate}}
        </button>
        <ng-container *ngIf="partOpen.get('PART 10')">
            <div class="space-y-4">
                <div class="pb-1rem p-2" *ngIf="appraisalPms">
                    <textarea type="text" rows="2" class="ti-form-input" [class.!bg-input-readonly]="!canEdit"
                        [readonly]="!canEdit" [(ngModel)]="appraisalPms.cfrDetail"></textarea>
                </div>
            </div>
        </ng-container>
    </div>
</ng-template>

<div class="hidden">
    {{allFormRemain()}}
    {{sendScorePart()}}
</div>