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


<ng-template #idpEvaluation>
    <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)="returnPage()">
                <i class="ti ti-chevron-left"></i>
                ย้อนกลับ
            </button>
            <div class="font-size-18px font-weight-700 align-center text-primary pl-1rem">
                ประเมินสมรรถนะ
            </div>
        </div>
    </div>
    <div class="pb-2rem px-2rem">
        <div class="font-size-18px font-weight-700 text-primary">
            แผนพัฒนาบุคคลากรรายบุคคล
        </div>
    </div>
    <div class="pb-2rem px-2rem">
        <div class="font-size-18px font-weight-700 text-gray-500">
            ส่วนที่ 1: ข้อมูลทั่วไป
        </div>
    </div>
    <div class="pb-2rem px-2rem">
        <div class="grid grid-cols-6 ">
            <div class="col-span-3 grid grid-cols-6">
                <div class="col-span-6 border p-2 pb-4">
                    <span>ผู้ใต้บังคับบัญชา</span>
                </div>
                <div class="col-span-1 p-2  border pb-4">
                    <span>ชื่อ-สกุล</span>
                </div>
                <div class="col-span-2 p-2  border pb-4">
                    <span>น.ส.พิมพร อูรณาการ</span>
                </div>
                <div class="col-span-1 p-2  border pb-4">
                    <span>ตำแหน่ง</span>
                </div>
                <div class="col-span-2 p-2  border pb-4">
                    <span>Human Resource Development Officer S3</span>
                </div>
                <div class="col-span-1 p-2  border pb-4">
                    <span>งาน</span>
                </div>
                <div class="col-span-2 p-2  border pb-4">
                    <span></span>
                </div>
                <div class="col-span-1 p-2  border pb-4">
                    <span>ฝ่าย</span>
                </div>
                <div class="col-span-2 p-2  border pb-4">
                    <span></span>
                </div>
            </div>
            <div class="col-span-3 grid grid-cols-6">
                <div class="col-span-6 border p-2 pb-4">
                    <span>ผู้ใต้บังคับบัญชา</span>
                </div>
                <div class="col-span-1 p-2  border pb-4">
                    <span>ชื่อ-สกุล</span>
                </div>
                <div class="col-span-2 p-2  border pb-4">
                    <span>น.ส. นดี แป้นศรี</span>
                </div>
                <div class="col-span-1 p-2  border pb-4">
                    <span>ตำแหน่ง</span>
                </div>
                <div class="col-span-2 p-2  border pb-4">
                    <span>HRM Senior Section Manager</span>
                </div>
                <div class="col-span-1 p-2  border pb-4">
                    <span>งาน</span>
                </div>
                <div class="col-span-2 p-2  border pb-4">
                    <span></span>
                </div>
                <div class="col-span-1 p-2  border pb-4">
                    <span>ฝ่าย</span>
                </div>
                <div class="col-span-2 p-2  border pb-4">
                    <span></span>
                </div>
            </div>
        </div>
    </div>
    <div class="pb-2rem px-2rem">
        <div class="font-size-18px font-weight-700 text-gray-500">
            ส่วนที่ 2: แนวทางการพัฒนา
        </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">
                        <th scope="col" rowspan="3"
                            class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                            <span class="font-size-12px font-weight-700 ">{{'สมรรถนะที่พัฒนา\n(Competency)'}}</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>
                        <th scope="col" rowspan="3"
                            class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                            <span class="font-size-12px font-weight-700 ">
                                {{'ประเด็นตัวชี้พฤติกรรมที่ต้องพัฒนา\n(Behavior Indicators : BIs)'}}
                            </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>
                        <th scope="col" colspan="3"
                            class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                            <span class="font-size-12px font-weight-700 ">เครื่องมือพัฒนา</span>
                        </th>
                        <th scope="col" rowspan="3" 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>
                        <th scope="col" colspan="2" rowspan="2"
                            class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                            <span class="font-size-12px font-weight-700 ">หลักสูตรพัฒนาตาม CDR</span>
                        </th>
                        <th scope="col" rowspan="3" 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>
                        <th scope="col" rowspan="3"
                            class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                            <span class="font-size-12px font-weight-700 ">ระยะเวลาที่พัฒนา</span>
                        </th>
                    </tr>
                    <tr class="font-size-12px">
                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary  !text-center">
                            70
                        </th>
                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary  !text-center">
                            20
                        </th>
                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary  !text-center">
                            10
                        </th>
                    </tr>
                    <tr class="font-size-12px">
                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary  !text-center">
                            OJT/Job Assignment
                        </th>
                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary  !text-center">
                            Coach/Mentor
                        </th>
                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary  !text-center">
                            Training
                        </th>
                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary  !text-center">
                            รหัส
                        </th>
                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary  !text-center">
                            ชื่อหลักสูตร
                        </th>
                    </tr>
                </thead>
                <tbody *ngIf="!dataListFilter().length">
                    <tr class="hover:table-hover2-hover">
                        <td class="text-center" colspan="100%">
                            ไม่พบข้อมูล
                        </td>
                    </tr>
                </tbody>
                <tbody *ngIf="dataListFilter().length">
                    <ng-container *ngFor=" let data of dataListFilter();let i = index">
                        <tr *ngIf="!data.bis.length" (mouseenter)="hoveredCode = data.code"
                            (mouseleave)="hoveredCode = null" [ngClass]="{ 'table-hover2': data.code === hoveredCode }">
                            <td class="align-start">
                                {{i+1}}. {{data.code}}
                            </td>
                            <td class="align-start bg-table-gray"></td>
                            <td class="align-start bg-table-gray"></td>
                            <td class="align-start bg-table-gray"></td>
                            <td class="align-start bg-table-gray"></td>
                            <td class="!p-0"></td>
                            <td class="align-start bg-table-gray"></td>
                            <td class="align-start bg-table-gray"></td>
                            <td class="!p-0"></td>
                            <td class="align-start text-center !white-space-normal"
                                [class.bg-table-gray]="!data.startDate&&!data.endDate">
                                <ng-container *ngIf="data.startDate&&data.endDate">
                                    จาก&nbsp;
                                </ng-container>
                                {{data.startDate}}
                                <ng-container *ngIf="data.startDate&&data.endDate">
                                    &nbsp;ถึง&nbsp;
                                </ng-container>
                                {{data.endDate}}
                            </td>
                        </tr>
                        <tr *ngFor=" let item of data.bis;let i2 = index;let f = first"
                            (mouseenter)="hoveredCode = data.code" (mouseleave)="hoveredCode = null"
                            [ngClass]="{ 'table-hover2': data.code === hoveredCode ,'border-none':!f }">
                            <td class="align-start">
                                <ng-container *ngIf="f">
                                    {{i+1}}. {{data.code}}
                                </ng-container>
                            </td>
                            <td class="align-start !white-space-normal" [class.bg-table-gray]="checkBg(data.bis,'oj')">
                                {{i2+1}}. {{item.name}}
                            </td>
                            <td class="align-start text-center" [class.bg-table-gray]="checkBg(data.bis,'oj')">
                                <ng-container *ngIf="item.oj">
                                    <i class="ti ti-check fs-xxl !fw-b"></i>
                                </ng-container>
                            </td>
                            <td class="align-start text-center" [class.bg-table-gray]="checkBg(data.bis,'cm')">
                                <ng-container *ngIf="item.cm">
                                    <i class="ti ti-check fs-xxl !fw-b"></i>
                                </ng-container>
                            </td>
                            <td class="align-start text-center" [class.bg-table-gray]="checkBg(data.bis,'t')">
                                <ng-container *ngIf="item.t">
                                    <i class="ti ti-check fs-xxl !fw-b"></i>
                                </ng-container>
                            </td>
                            <td class="!p-0">
                            </td>
                            <td class="align-start text-center" [class.bg-table-gray]="checkBg(data.bis,'cdr.code')">
                                <ng-container *ngIf="item.cdr.code">
                                    <i class="ti ti-book fs-xxl !fw-b"></i><br>
                                    {{item.cdr.code}}
                                </ng-container>
                            </td>
                            <td class="align-start !white-space-normal"
                                [class.bg-table-gray]="checkBg(data.bis,'cdr.name')">
                                <ng-container *ngIf="item.cdr.name">
                                    <div class="grid grid-cols-6">
                                        <div class="col-span-1">
                                            <input type="checkbox" class="ti-form-checkbox cursor-pointer"
                                                [(ngModel)]="item.cdr.check">
                                        </div>
                                        <div class="col-span-5">
                                            {{item.cdr.name}}
                                        </div>
                                    </div>
                                </ng-container>
                            </td>
                            <td class="!p-0">
                            </td>
                            <td class="align-start !white-space-normal"
                                [class.bg-table-gray]="!data.startDate&&!data.endDate">
                                <ng-container *ngIf="data.startDate&&data.endDate">
                                    จาก<br>
                                </ng-container>
                                <span class="whitespace-nowrap">
                                    {{data.startDate}}
                                </span>
                                <ng-container *ngIf="data.startDate&&data.endDate">
                                    <br>ถึง<br>
                                </ng-container>
                                <span class="whitespace-nowrap">
                                    {{data.endDate}}
                                </span>
                            </td>
                        </tr>
                    </ng-container>
                </tbody>
            </table>
        </div>
    </div>
</ng-template>