<app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
    <ng-container *ngTemplateOutlet="currentTemplate"></ng-container>
</div>

<ng-template #selfEvaluation>
    <div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
        ประเมินผล ประจำปี {{currentDate.getFullYear()}}
    </div>
    <div class="pt-0.75rem">
        <div class="border-b border-gray-200 dark:border-white/10 px-2rem">
            <nav class=" flex space-x-2 rtl:space-x-reverse">
                <a *ngFor="let item of appraisalCompentency.dataList; let i=index ; let f= first"
                    class="border justify-center rounded-top-4px hs-tab-active:!bg-primary hs-tab-active:text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center hover:text-gray-900"
                    [class.active]="f" href="javascript:void(0);" id="card-type-item-1"
                    [attr.data-hs-tab]="'#underline-'+(i+1)" aria-controls="underline-1"
                    (click)="selectAppraisalCompentency(item)">
                    รอบการประเมินที่ {{i+1}}/{{appraisalCompentency.dataList.length}}
                </a>
            </nav>
        </div>
        <div class="pt-50px">
            <div *ngFor="let item of appraisalCompentency.dataList; let i=index" [id]="'underline-'+(i+1)"
                role="tabpanel">
                <div class="pb-2">
                    <div class="w-full min-height-50px justify-between items-center pb-2">
                        <div class="px-2rem py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary">
                            ข้อมูลพนักงาน
                        </div>
                    </div>
                    <div class="p-2 grid grid-cols-12">
                        <div class="col-span-2"></div>
                        <div class="col-span-1 text-secondary">รหัสพนักงาน</div>
                        <div class="col-span-2">{{employee.data.employeeId}}</div>
                        <div class="col-span-1 text-secondary">ตำเเหน่ง</div>
                        <div class="col-span-6">{{employee.data.position.tdesc}}</div>
                    </div>
                    <div class="p-2 grid grid-cols-12">
                        <div class="col-span-2"></div>
                        <div class="col-span-1 text-secondary">ชื่อ - สกุล</div>
                        <div class="col-span-2">{{employee.data.thFullName}}</div>
                        <div class="col-span-1 text-secondary">ฝ่าย</div>
                        <div class="col-span-6">{{employee.data.bu1.tdesc}}</div>
                    </div>
                    <div class="p-2 grid grid-cols-12">
                        <div class="col-span-2"></div>
                        <div class="col-span-1 text-secondary">แผนก</div>
                        <div class="col-span-2">{{employee.data.bu2.tdesc}}</div>
                        <div class="col-span-1 text-secondary">ส่วน</div>
                        <div class="col-span-6">{{employee.data.bu3.tdesc}}</div>
                    </div>
                    <div class="p-2 grid grid-cols-12">
                        <div class="col-span-2"></div>
                        <div class="col-span-1 text-secondary">ส่วนย่อย</div>
                        <div class="col-span-2">{{employee.data.bu4.tdesc}}</div>
                        <div class="col-span-1 text-secondary">ส่วนย่อย 1 </div>
                        <div class="col-span-6">{{employee.data.bu5.tdesc}}</div>
                    </div>
                </div>
                <div class="pb-2">
                    <div class="w-full min-height-50px justify-between items-center pb-2">
                        <div class="px-2rem py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary">
                            รายละเอียดประเมินสมรรถนะ
                        </div>
                    </div>
                    <div class="overflow-auto rounded-top-0.65rem px-2rem p-2">
                        <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
                            <thead class="height-50px">
                                <tr class="font-size-12px">
                                    <ng-container
                                        *ngFor="let item of ['รหัส','ชื่อเอกสาร','วันที่เริ่มต้น','วันที่สิ้นสุด','สถานะ','Action']; let f = first; let l = last">
                                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
                                            [class.!text-center]="f||l">
                                            <span class="font-size-12px font-weight-700">{{ item }}</span>
                                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
                                                <i class="ti ti-dots-vertical fs-l"></i>
                                            </div>
                                        </th>
                                    </ng-container>
                                </tr>
                            </thead>
                            <tbody *ngIf="appraisalCompentency.loading">
                                <tr>
                                    <td class="text-center" colspan="100%">
                                        <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
                                            role="status" aria-label="loading">
                                            <span class="sr-only">Loading...</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                            <tbody *ngIf="!appraisalCompentency.loading&&!appraisalCompentencyFilter(i).length">
                                <tr>
                                    <td class="text-center" colspan="100%">
                                        ไม่พบข้อมูล
                                    </td>
                                </tr>
                            </tbody>
                            <tbody *ngIf="!appraisalCompentency.loading&&appraisalCompentencyFilter(i).length">
                                <tr
                                    *ngFor="let masfromEvaluationAssessment1 of appraisalCompentencyFilter(i);let i = index">
                                    <td class="flex justify-center items-center">
                                        {{masfromEvaluationAssessment1.competencyType.shortName}}
                                    </td>
                                    <td>
                                        {{masfromEvaluationAssessment1.competencyType.tdesc}}
                                    </td>
                                    <td *ngIf="appraisalCompentency.select">
                                        {{convertDate(appraisalCompentency.select.masfromEvaluationRound.apsPeriodStart)}}
                                    </td>
                                    <td *ngIf="appraisalCompentency.select">
                                        {{convertDate(appraisalCompentency.select.masfromEvaluationRound.apsPeriodEnd)}}
                                    </td>
                                    <td>
                                        {{masfromEvaluationAssessment1.masfromStatusType.tdesc}}
                                    </td>
                                    <td class="flex justify-center items-center">
                                        <span class="rounded-md bg-success text-white px-3 py-1 cursor-pointer"
                                            (click)="getAppraisalCompentencyForm(masfromEvaluationAssessment1.competencyType.competencyTypeId);currentTemplate = selfEvaluationEdit ; pathTitle = ['การประเมินผล', 'ประเมินผล']">
                                            ประเมิน
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="pb-2">
                    <div class="w-full min-height-50px justify-between items-center pb-2">
                        <div class="px-2rem py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary">
                            รายละเอียดประเมินผลงานการปฏิบัติงาน
                        </div>
                    </div>
                    <div class="overflow-auto rounded-top-0.65rem px-2rem p-2">
                        <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
                            <thead class="height-50px">
                                <tr class="font-size-12px">
                                    <ng-container
                                        *ngFor="let item of ['รหัส','ชื่อเอกสาร','วันที่เริ่มต้น','วันที่สิ้นสุด','สถานะ','Action']; let f = first; let l = last">
                                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
                                            [class.!text-center]="f||l">
                                            <span class="font-size-12px font-weight-700">{{ item }}</span>
                                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
                                                <i class="ti ti-dots-vertical fs-l"></i>
                                            </div>
                                        </th>
                                    </ng-container>
                                </tr>
                            </thead>
                            <tbody *ngIf="appraisalPms.loading">
                                <tr>
                                    <td class="text-center" colspan="100%">
                                        <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
                                            role="status" aria-label="loading">
                                            <span class="sr-only">Loading...</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                            <tbody *ngIf="!appraisalPms.loading&&!appraisalPmsFilter().length">
                                <tr>
                                    <td class="text-center" colspan="100%">
                                        ไม่พบข้อมูล
                                    </td>
                                </tr>
                            </tbody>
                            <tbody *ngIf="!appraisalPms.loading&&appraisalPmsFilter().length">
                                <!-- <tr *ngFor="let item of appraisalPmsFilter();let i = index">
                                    <td class="flex justify-center items-center">
                                        {{item.data.masfromEvaluationRound.evaluationRoundId}}
                                    </td>
                                    <td>
                                        {{item.data.masfromEvaluationRound.tdesc}}
                                    </td>
                                    <td>
                                        {{convertDate(item.data.masfromEvaluationRound.apsPeriodStart)}}
                                    </td>
                                    <td>
                                        {{convertDate(item.data.masfromEvaluationRound.apsPeriodEnd)}}
                                    </td>
                                    <td>
                                        {{item.data.masfromStatusType.tdesc}}
                                    </td>
                                    <td class="flex justify-center items-center">
                                        <span class="rounded-md bg-success text-white px-3 py-1 cursor-pointer">
                                            ประเมิน
                                        </span>
                                    </td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-template>



<ng-template #selfEvaluationEdit>
    <ng-container *ngIf="appraisalCompentency2.data">
        <div class="pb-2rem px-2rem pt-1.5rem w-full min-height-50px justify-between items-center">
            <div class="flex">
                <button type="button"
                    class="ti-btn ti-btn-outline ti-btn-outline-light h-20px m-0 shadow-md text-blue-500"
                    (click)="currentTemplate = selfEvaluation ;   pathTitle = ['การประเมินผล', 'ประเมินตนเอง']">
                    <i class="ti ti-chevron-left"></i>
                    ย้อนกลับ
                </button>
                <div class="font-size-18px font-weight-700 align-center text-primary pl-1rem">
                    ประเมินผล ประจำปี 2024
                </div>
            </div>
        </div>
        <div class="pb-2rem px-2rem">
            <div class="font-size-18px font-weight-700 text-primary">
                แบบประเมินสมรรถนะพนักงาน ประจำปี 2024
            </div>
        </div>
        <div class="pb-2rem px-2rem">
            <div class="p-2 grid grid-cols-6 gap-3">
                <div class="grid-cols-1">
                    <div class="text-gray-400">เครื่องมือประเมิน</div>
                    <div class="text-gray-400">O = แบบสังเกต</div>
                    <div class="text-gray-400">P = แบบการปฏิบัติงาน</div>
                    <div class="text-gray-400">D = การบันทึก/เอกสาร</div>
                    <div class="text-gray-400">I = การสัมภาษณ์</div>
                    <div class="text-gray-400">T = แบบทดสอบ</div>
                </div>
                <div class="grid-cols-1">
                    <div class="text-gray-400">คำชี้แจง</div>
                    <div class="text-gray-400">- ใช้วิธีประเมินโดย ผู้บังคับบัญชา = 100 %</div>
                </div>
                <div class="col-span-3 grid-cols-1">
                    <div class="text-gray-400">ระดับความสามารถ (Target Degree)</div>
                    <div class="text-gray-400">ระดับ 1 = ไม่มีความรู้พื้นฐานเลย ขาดทักษะในงาน</div>
                    <div class="text-gray-400">ระดับ 2 = มีความรู้ในงานบ้างแต่ยังไม่สามารถ ประยุกต์ใช้ในงานได้</div>
                    <div class="text-gray-400">ระดับ 3 = นำความรู้มาประยุกต์ใช้ในงานได้ ปฏิบัติงานเองได้ด้วยตัวเอง
                        แก้ไขปัญหาหน้างานได้</div>
                    <div class="text-gray-400">ระดับ 4 = สอนผู้อื่นได้ มีความคล่องตัว เชื่อมโยง ความรู้ในงานได้</div>
                    <div class="text-gray-400">ระดับ 5 = มีความชำนาญ เชี่ยวชาญ เป็นที่ยอมรับ ในองค์กร</div>
                </div>
            </div>
        </div>
        <div class="pb-2rem px-2rem">
            <div class="overflow-auto rounded-top-0.65rem">
                <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover2">
                    <thead class="height-50px">
                        <tr class="font-size-12px">
                            <ng-container
                                *ngFor="let item of ['ลำดับที่','รหัสสมรรถนะ','ชื่อสมรรถนะ','Behavior Indicator (BI)','เครื่องมือประเมิน\n(ตัวย่อ)\n(O,P,D,I,T)']">
                                <th scope="col" rowspan="2"
                                    class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                                    <span class="font-size-12px font-weight-700 ">{{ item }}</span>
                                    <div class="absolute top-1/2 transform -translate-y-1/2 right-0">
                                        <i class="ti ti-dots-vertical fs-l"></i>
                                    </div>
                                </th>
                            </ng-container>
                            <th scope="col" colspan="5"
                                class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                                ระดับความสามารถ (Target Degree)
                            </th>
                        </tr>
                        <tr class="font-size-12px">
                            <ng-container *ngFor="let item of [5,4,3,2,1]">
                                <th scope="col"
                                    class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                                    {{item}}
                                </th>
                            </ng-container>
                        </tr>
                    </thead>
                    <tbody *ngIf="appraisalCompentency2.loading">
                        <tr>
                            <td class="text-center" colspan="100%">
                                <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
                                    role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                    <tbody *ngIf="!appraisalCompentency2.loading&&!appraisalCompentency2Filter().length">
                        <tr>
                            <td class="text-center" colspan="100%">
                                ไม่พบข้อมูล
                            </td>
                        </tr>
                    </tbody>
                    <tbody *ngIf="!appraisalCompentency2.loading&&appraisalCompentency2Filter().length">
                        <ng-container *ngFor="let item2 of appraisalCompentency2Filter();let i = index">
                            <tr *ngFor="let bi of item2.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList;let i2 = index;let f = first"
                                (mouseenter)="hoveredCode = item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyCourseId"
                                (mouseleave)="hoveredCode = null"
                                [ngClass]="{ 'table-hover2': item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyCourseId === hoveredCode ,'border-none':!f }">
                                <td class="align-start text-center">
                                    <ng-container *ngIf="f">
                                        {{i+1}}
                                    </ng-container>
                                </td>
                                <td class="align-start text-center">
                                    <ng-container *ngIf="f">
                                        {{item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}
                                    </ng-container>
                                </td>
                                <td class="align-start !white-space-normal">
                                    <ng-container *ngIf="f">
                                        {{item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.tdesc}}
                                    </ng-container>
                                </td>
                                <td class="align-start !white-space-normal">
                                    {{bi.behavioralIndicators}}
                                </td>
                                <td class="align-center text-center">
                                    {{bi.assessmentId}}
                                </td>
                                <td class="align-center text-center" *ngFor="let value of [5,4,3,2,1]; let i3=index">
                                    <input type="radio" [name]="'radio'+i+''+i2" class="ti-form-radio cursor-pointer"
                                        [id]="'radio'+i+''+i2+''+i3" [value]="value"
                                        [disabled]="!employee.evaluate"
                                        [(ngModel)]="bi.competencyBehavioral.scoreTopicExpectation"
                                        (ngModelChange)="calnumberCheck()">
                                </td>
                            </tr>
                        </ng-container>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="pb-1rem px-2rem">
            <div class="py-2 grid grid-cols-11">
                <div class="col-span-8">ระดับความสามารถ (Target Degree)</div>
                <div class="col-span-3 grid grid-cols-5">
                    <div class="col-span-1 text-center" *ngFor="let item of [5,4,3,2,1]">{{item}}</div>
                </div>
            </div>
            <div class="py-2 grid grid-cols-11">
                <div class="col-span-8">รวมจำนวนเครื่องหมายแต่ละช่อง (1)</div>
                <div class="col-span-3 grid grid-cols-5">
                    <div class="col-span-1 text-center">
                        {{appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].numberCheck5}}</div>
                    <div class="col-span-1 text-center">
                        {{appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].numberCheck4}}</div>
                    <div class="col-span-1 text-center">
                        {{appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].numberCheck3}}</div>
                    <div class="col-span-1 text-center">
                        {{appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].numberCheck2}}</div>
                    <div class="col-span-1 text-center">
                        {{appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].numberCheck1}}</div>
                </div>
            </div>
            <div class="py-2 grid grid-cols-11">
                <div class="col-span-8">ตัวคูณคะแนนในแต่ละช่อง (2)</div>
                <div class="col-span-3 grid grid-cols-5">
                    <div class="col-span-1 text-center">{{setting.data.settingScore5}}</div>
                    <div class="col-span-1 text-center">{{setting.data.settingScore4}}</div>
                    <div class="col-span-1 text-center">{{setting.data.settingScore3}}</div>
                    <div class="col-span-1 text-center">{{setting.data.settingScore2}}</div>
                    <div class="col-span-1 text-center">{{setting.data.settingScore1}}</div>
                </div>
            </div>
            <div class="py-2 grid grid-cols-11">
                <div class="col-span-8">ถ่วงน้ำหนักผลรวม 1X2</div>
                <div class="col-span-3 grid grid-cols-5">
                    <div class="col-span-1 text-center" *ngFor="let item of [5,4,3,2,1]">{{calWeightScore(item)}}</div>
                </div>
            </div>
            <div class="py-2 grid grid-cols-11">
                <div class="col-span-8">คะแนนรวมหลังถ่วงน้ำ</div>
                <div class="col-span-3 grid grid-cols-5">
                    <div class="col-span-5 text-center">
                        {{appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].weightedTotal}}</div>
                </div>
            </div>
            <div class="py-2 grid grid-cols-11">
                <div class="col-span-8">คะแนนเฉลี่ยคิดเป็น</div>
                <div class="col-span-3 grid grid-cols-5">
                    <div class="col-span-5 text-center">
                        {{showNumber(appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].averageScore)}}
                    </div>
                </div>
            </div>
        </div>

        <div class="pb-2rem px-2rem">
            <div class="overflow-auto rounded-top-0.65rem">
                <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
                    <thead class="height-50px">
                        <tr class="font-size-12px">
                            <ng-container
                                *ngFor="let item of  ['เกณฑ์การให้คะแนนการประประเมิน Check Sheet E01','ผลประเมิน (A)','สรุปผล Gap'];let f = first ;let l = last">
                                <th scope="col" [attr.rowspan]="f?'1':'2'" [attr.colspan]="f?'2':'1'"
                                    class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                                    <span class="font-size-12px font-weight-700 ">{{ item }}</span>
                                    <div *ngIf="!f&&!l" class="absolute top-1/2 transform -translate-y-1/2 right-0">
                                        <i class="ti ti-dots-vertical fs-l"></i>
                                    </div>
                                </th>
                                <th *ngIf="f" scope="col" rowspan="2"
                                    class="relative bg-soft-secondary text-primary !text-center !p-0">
                                    <div class="absolute top-1/2 transform -translate-y-1/2 right-0">
                                        <i class="ti ti-dots-vertical fs-l"></i>
                                    </div>
                                </th>
                            </ng-container>
                        </tr>
                        <tr class="font-size-12px">
                            <ng-container *ngFor="let item of ['เกณฑ์การให้คะแนน','เงื่อนไข']">
                                <th scope="col"
                                    class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                                    {{item}}
                                </th>
                            </ng-container>
                        </tr>
                    </thead>
                    <tbody *ngIf="checkSheet.length">
                        <tr *ngFor="let item of checkSheet;let i = index">
                            <td class="align-start" rowspan="2">
                                <div *ngFor="let item2 of item.score">
                                    <span>{{item2}} </span><br>
                                </div>
                            </td>
                            <td class="align-start" rowspan="2">
                                <div *ngFor="let item2 of item.condition">
                                    <span>{{item2}} </span><br>
                                </div>
                            </td>
                            <td class="!p-0"></td>
                            <td class="align-start text-center">
                                {{calAverage(appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].averageScore)}}
                            </td>
                            <td class="align-start text-center">
                                {{calGap(appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].averageScore)}}
                            </td>
                        </tr>
                        <tr>
                            <td class="align-start !white-space-normal" colspan="4">
                                หมายเหตุ<br>
                                ผลการประเมินอาจมีการเปลี่ยนแปลงเงื่อนไขข้อ 1-3 เนื่องจากมีคะแนนต่ำกว่าเกณฑ์ในบางข้อ
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="py-1rem px-2rem">
            <div class="py-2 grid grid-cols-7 gap-3">
                <div class="col-span-1">ผู้ถูกประเมิน</div>
                <div class="col-span-1">
                    {{appraisalCompentency2.data.apsassessy.thFullName}}</div>
                <div class="col-span-1">
                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
                checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none "
                        [checked]="appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsassessyStatus=='2'">
                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
                </div>
                <div class="col-span-2">
                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
                        [class.!bg-input-readonly]="!appraisalCompentency2.data||appraisalCompentency2.data.currentStep!='0'||!employee.evaluate"
                        [readonly]="!appraisalCompentency2.data||appraisalCompentency2.data.currentStep!='0'||!employee.evaluate"
                        [(ngModel)]="appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsassessyComment"></textarea>
                    <span class="pt-2">
                        วันที่ :
                        {{convertDate(appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsassessyDate)}}
                    </span>
                </div>
            </div>
            <div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency2.data.apsapprove1.employeeId">
                <div class="col-span-1">
                    {{appraisalCompentency2.data.apsapprove2.employeeId?'ผู้ประเมิน1':'ผู้อนุมัติ'}}
                </div>
                <div class="col-span-1">
                    {{appraisalCompentency2.data.apsapprove1.thFullName}}</div>
                <div class="col-span-1">
                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
                checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
                        [checked]="appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove1Status=='2'">
                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
                </div>
                <div class="col-span-2">
                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
                        [class.!bg-input-readonly]="!appraisalCompentency2.data||appraisalCompentency2.data.currentStep!='1'||!employee.evaluate"
                        [readonly]="!appraisalCompentency2.data||appraisalCompentency2.data.currentStep!='1'||!employee.evaluate"
                        [(ngModel)]="appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove1Comment"></textarea>
                    <span class="pt-2">
                        วันที่ :
                        {{convertDate(appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove1Date)}}
                    </span>
                </div>
            </div>
            <div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency2.data.apsapprove2.employeeId">
                <div class="col-span-1">
                    {{appraisalCompentency2.data.apsapprove3.employeeId?'ผู้ประเมิน2':'ผู้อนุมัติ'}}
                </div>
                <div class="col-span-1">
                    {{appraisalCompentency2.data.apsapprove2.thFullName}}</div>
                <div class="col-span-1">
                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
                checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
                        [checked]="appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove2Status=='2'">
                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
                </div>
                <div class="col-span-2">
                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
                        [class.!bg-input-readonly]="!appraisalCompentency2.data||appraisalCompentency2.data.currentStep!='2'||!employee.evaluate"
                        [readonly]="!appraisalCompentency2.data||appraisalCompentency2.data.currentStep!='2'||!employee.evaluate"
                        [(ngModel)]="appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove2Comment"></textarea>
                    <span class="pt-2">
                        วันที่ :
                        {{convertDate(appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove2Date)}}
                    </span>
                </div>
            </div>
            <div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency2.data.apsapprove3.employeeId">
                <div class="col-span-1">
                    {{appraisalCompentency2.data.apsapprove4.employeeId?'ผู้ประเมิน3':'ผู้อนุมัติ'}}
                </div>
                <div class="col-span-1">
                    {{appraisalCompentency2.data.apsapprove3.thFullName}}</div>
                <div class="col-span-1">
                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
                checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
                        [checked]="appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove3Status=='2'">
                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
                </div>
                <div class="col-span-2">
                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
                        [class.!bg-input-readonly]="!appraisalCompentency2.data||appraisalCompentency2.data.currentStep!='3'||!employee.evaluate"
                        [readonly]="!appraisalCompentency2.data||appraisalCompentency2.data.currentStep!='3'||!employee.evaluate"
                        [(ngModel)]="appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove3Comment"></textarea>
                    <span class="pt-2">
                        วันที่ :
                        {{convertDate(appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove3Date)}}
                    </span>
                </div>
            </div>
            <div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency2.data.apsapprove4.employeeId">
                <div class="col-span-1">
                    {{appraisalCompentency2.data.apsapprove5.employeeId?'ผู้ประเมิน4':'ผู้อนุมัติ'}}
                </div>
                <div class="col-span-1">
                    {{appraisalCompentency2.data.apsapprove4.thFullName}}</div>
                <div class="col-span-1">
                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
                checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
                        [checked]="appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove4Status=='2'">
                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
                </div>
                <div class="col-span-2">
                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
                        [class.!bg-input-readonly]="!appraisalCompentency2.data||appraisalCompentency2.data.currentStep!='4'||!employee.evaluate"
                        [readonly]="!appraisalCompentency2.data||appraisalCompentency2.data.currentStep!='4'||!employee.evaluate"
                        [(ngModel)]="appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove4Comment"></textarea>
                    <span class="pt-2">
                        วันที่ :
                        {{convertDate(appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove4Date)}}
                    </span>
                </div>
            </div>
            <div class="py-2 grid grid-cols-7 gap-3" *ngIf="appraisalCompentency2.data.apsapprove5.employeeId">
                <div class="col-span-1">
                    ผู้อนุมัติ
                </div>
                <div class="col-span-1">
                    {{appraisalCompentency2.data.apsapprove5.thFullName}}</div>
                <div class="col-span-1">
                    <input type="checkbox" id="hs-basic-usage1" class="ti-switch checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600
                checked:before:bg-green-200 dark:checked:before:bg-green-200 pointer-events-none"
                        [checked]="appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove5Status=='2'">
                    <label for="hs-basic-usage1" class="sr-only">ยืนยันผล</label>
                </div>
                <div class="col-span-2">
                    <textarea type="text" rows="2" class="ti-form-input mb-2" placeholder="ใส่ Comment ที่นี่"
                        [class.!bg-input-readonly]="!appraisalCompentency2.data||appraisalCompentency2.data.currentStep!='5'||!employee.evaluate"
                        [readonly]="!appraisalCompentency2.data||appraisalCompentency2.data.currentStep!='5'||!employee.evaluate"
                        [(ngModel)]="appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove5Comment"></textarea>
                    <span class="pt-2">
                        วันที่ :
                        {{convertDate(appraisalCompentency2.data.masfromEvaluationAssessment1lList[0].apsapprove5Date)}}
                    </span>
                </div>
            </div>
        </div>

        <div class="flex justify-center mb-1rem pb-2rem" *ngIf="employee.evaluate">
            <button type="submit" class="ti-btn ti-btn-success mx-2rem" (click)="saveDraft()">
                บันทึกร่าง
            </button>
            <button type="submit" class="ti-btn ti-btn-success mx-2rem" (click)="save()">
                บันทึกข้อมูล
            </button>
        </div>
    </ng-container>
</ng-template>