<ng-container *ngTemplateOutlet="idpEvaluation"></ng-container>
<ng-template #idpEvaluation>
    <ng-container *ngIf="appraisalIdp">
        <div style="overflow-y: auto; padding-top: 1rem" #pdfArea class="pdf-container">

            <!-- <ng-container *ngIf="pdfPrintCheck === 1">
            <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>
          </ng-container> -->

            <ng-container>
                <div class="pb-2 flex justify-between items-center">
                    <div class="font-size-18px font-weight-700 text-gray-500">
                        {{'Part1GeneralInformation' | translate}}
                    </div>
                    <!-- <button class="ti-btn m-0 ti-btn-soft-warning" *ngIf="pdfPrintCheck == 0" (click)="exportPdf()" >
                  <i class="ri-draft-fill"></i>
                  PDF
                </button> -->
                    <button class="ti-btn m-0 ti-btn-soft-warning" data-html2canvas-ignore="true" data-hide-in-pdf
                        (click)="exportPdf()">
                        <i class="ri-draft-fill"></i> PDF
                    </button>
                </div>
                <div class="pt-2 pb-2rem">
                    <div class="flex flex-row gap-2 ">
                        <div class="w-1/2 border flex flex-col shadow" style="border-radius: 20px;">
                            <div class="w-full bg-soft-secondary text-primary p-3"
                                style="border-radius: 20px 20px 0 0;">
                                <span class="font-size-18px font-weight-700">{{'SubordinatePart9' | translate}}</span>
                            </div>
                            <div class="w-full p-2">
                                <table class="ti-custom-table border-0 ellipsis-text">
                                    <tbody>
                                        <tr class="!border-0">
                                            <td class="font-medium !p-2 align-start">{{'NameSurname' | translate}}</td>
                                            <td class="!p-2 align-start">:</td>
                                            <td class="font-medium !p-2 align-start">
                                                {{translateText(appraisalIdp.apsassessy.thFullName,appraisalIdp.apsassessy.engFullName
                                                )}}
                                            </td>
                                        </tr>
                                        <tr class="!border-0">
                                            <td class="font-medium !p-2 align-start">{{'Position' | translate}}</td>
                                            <td class="!p-2 align-start">:</td>
                                            <td class="font-medium !p-2 align-start !text-warp">
                                                {{translateText(appraisalIdp.apsassessy.position.tdesc,appraisalIdp.apsassessy.position.tdesc)}}
                                            </td>
                                        </tr>
                                        <tr class="!border-0">
                                            <td class="font-medium !p-2 align-start">{{'Job' | translate}}</td>
                                            <td class="!p-2 align-start">:</td>
                                            <td class="font-medium !p-2 align-start !text-warp">
                                                {{translateText(appraisalIdp.apsassessy.job.tdesc,appraisalIdp.apsassessy.job.tdesc)}}
                                            </td>
                                        </tr>
                                        <tr class="!border-0">
                                            <td class="font-medium !p-2 align-start">{{'DivisionPart9' | translate}}
                                            </td>
                                            <td class="!p-2 align-start">:</td>
                                            <td class="font-medium !p-2 align-start !text-warp">
                                                {{translateText(appraisalIdp.apsassessy.bu1.tdesc,appraisalIdp.apsassessy.bu1.edesc)}}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="w-1/2 border flex flex-col shadow" style="border-radius: 20px;"
                            *ngIf="appraisalIdp.boss">
                            <div class="w-full bg-soft-secondary text-primary p-3"
                                style="border-radius: 20px 20px 0 0;">
                                <span class="font-size-18px font-weight-700">{{'SubordinatePart9' | translate}}</span>
                            </div>
                            <div class="w-full p-2">
                                <table class="ti-custom-table border-0 ellipsis-text">
                                    <tbody>
                                        <tr class="!border-0">
                                            <td class="font-medium !p-2 align-start">{{'NameSurname' | translate}}</td>
                                            <td class="!p-2 align-start">:</td>
                                            <td class="font-medium !p-2 align-start">
                                                {{translateText(appraisalIdp.boss.thFullName,appraisalIdp.boss.engFullName
                                                )}}
                                            </td>
                                        </tr>
                                        <tr class="!border-0">
                                            <td class="font-medium !p-2 align-start">{{'Position' | translate}}</td>
                                            <td class="!p-2 align-start">:</td>
                                            <td class="font-medium !p-2 align-start !text-warp">
                                                {{translateText(appraisalIdp.boss.position.tdesc,appraisalIdp.boss.position.edesc)}}
                                            </td>
                                        </tr>
                                        <tr class="!border-0">
                                            <td class="font-medium !p-2 align-start">{{'Job' | translate}}</td>
                                            <td class="!p-2 align-start">:</td>
                                            <td class="font-medium !p-2 align-start !text-warp">
                                                {{translateText(appraisalIdp.boss.job.tdesc,appraisalIdp.boss.job.edesc)}}
                                            </td>
                                        </tr>
                                        <tr class="!border-0">
                                            <td class="font-medium !p-2 align-start">{{'DivisionPart9' | translate}}
                                            </td>
                                            <td class="!p-2 align-start">:</td>
                                            <td class="font-medium !p-2 align-start !text-warp">
                                                {{translateText(appraisalIdp.boss.bu1.tdesc,appraisalIdp.boss.bu1.edesc)}}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pb-2">
                    <div class="font-size-18px font-weight-700 text-gray-500">
                        {{'Section2DevelopmentPlan' | translate}}
                    </div>
                </div>
                <div class="pb-2">
                    <div class="py-2 grid grid-cols-6 gap-3">
                        <div class="col-span-6">{{'RemarkHRTraining' | translate}}
                        </div>
                        <div class="col-span-6 grid grid-cols-6 gap-2">
                            <div class="grid col-span-1 grid-cols-6 gap-2">
                                <div class="col-span-1">
                                    <input type="checkbox" class="ti-form-checkbox" id="idpStatus-0"
                                        (click)="resetFormIdp()" style="cursor: pointer;"
                                        [class.pointer-events-none]="appraisalIdp.masfromEvaluationIdp.idpStatus=='0'||!canEdit ||appraisalIdp.checkStep!='1'"
                                        name="idpStatus" (change)="appraisalIdp.masfromEvaluationIdp.idpStatus='0'"
                                        [checked]="appraisalIdp.masfromEvaluationIdp.idpStatus=='0'">
                                </div>
                                <div class="col-span-5">
                                    <label for="idpStatus-0" class="text-sm text-gray-500"
                                        [class.pointer-events-none]="appraisalIdp.masfromEvaluationIdp.idpStatus=='0'||!canEdit ||appraisalIdp.checkStep!='1'">
                                        {{'StandardIDP'| translate }}
                                    </label>
                                </div>
                            </div>
                            <div class="grid col-span-1 grid-cols-6 gap-2">
                                <div class="col-span-1">
                                    <input type="checkbox" class="ti-form-checkbox" id="idpStatus-1"
                                        style="cursor: pointer;"
                                        [class.pointer-events-none]="appraisalIdp.masfromEvaluationIdp.idpStatus=='1'||!canEdit ||appraisalIdp.checkStep!='1'"
                                        name="idpStatus" (change)="appraisalIdp.masfromEvaluationIdp.idpStatus='1'"
                                        [checked]="appraisalIdp.masfromEvaluationIdp.idpStatus=='1'">
                                </div>
                                <div class="col-span-5">
                                    <label for="idpStatus-1" class="text-sm text-gray-500"
                                        [class.pointer-events-none]="appraisalIdp.masfromEvaluationIdp.idpStatus=='1'||!canEdit ||appraisalIdp.checkStep!='1'">
                                        {{'RevisedIDP' | translate}}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class=" 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"
                                        style="border-radius: 20px 0 0 0;">
                                        <span class="font-size-12px font-weight-700 ">{{'CompetencyPart9' |
                                            translate}}</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 ">
                                            {{'BehaviorIndicatorsBIs' | translate}}
                                        </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 ">{{'AssessmentToolsPart9'|
                                            translate}}</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 ">{{'CDRPart9'| translate}}</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" style="border-radius: 0 20px 0 0;min-width: 175px"
                                        class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                                        <span class="font-size-12px font-weight-700 ">{{'DevelopmentPeriod'|
                                            translate}}</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">
                                        {{'Code' | translate}}
                                    </th>
                                    <th scope="col"
                                        class="relative px-10px py-10px bg-soft-secondary text-primary  !text-center">
                                        {{'CDRName' | translate}}
                                    </th>
                                </tr>
                            </thead>
                            <tbody *ngIf="!appraisalIdp.competencyIndicatorsCourses1.length">
                                <tr class="hover:table-hover2-hover">
                                    <td class="text-center" colspan="100%">
                                        {{'NoInformation' | translate}}
                                    </td>
                                </tr>
                            </tbody>
                            <tbody *ngIf="appraisalIdp.competencyIndicatorsCourses1.length">
                                <ng-container
                                    *ngFor=" let data of appraisalIdp.competencyIndicatorsCourses1;let i = index">
                                    <tr (mouseenter)="hoveredCode = data.indicatorsCourses0.competencyTopic.competencyTopicId"
                                        (mouseleave)="hoveredCode = null"
                                        [ngClass]="{ 'table-hover2': data.indicatorsCourses0.competencyTopic.competencyTopicId === hoveredCode }">
                                        <td class="align-start">
                                            {{i+1}}. {{data.indicatorsCourses0.competencyTopic.competencyTopicId}}
                                        </td>
                                        <td class="align-start !white-space-normal"
                                            [class.bg-gray-200]="!data.idpDevelopmentPlan||!data.behavioralIndicators||!data.behavioralIndicators.length">
                                            <ng-container *ngIf="data.idpDevelopmentPlan">
                                                <div class="mb-3"
                                                    *ngFor="let bis of data.behavioralIndicators;let i2 = index">
                                                    {{i2+1}}. {{bis.behavioralIndicators }}
                                                </div>
                                            </ng-container>
                                        </td>
                                        <td class="align-start text-center"
                                            [class.bg-gray-200]="!data.idpDevelopmentPlan||!data.idpDevelopmentPlan.ojtJobAssignment">
                                            <ng-container
                                                *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan?.ojtJobAssignment">
                                                <i class="ti ti-check text-danger fs-xl "></i>
                                            </ng-container>
                                        </td>
                                        <td class="align-start text-center"
                                            [class.bg-gray-200]="!data.idpDevelopmentPlan||!data.idpDevelopmentPlan.coachMentor">
                                            <ng-container
                                                *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan?.coachMentor">
                                                <i class="ti ti-check text-danger fs-xl "></i>
                                            </ng-container>
                                        </td>
                                        <td class="align-start text-center"
                                            [class.bg-gray-200]="!data.idpDevelopmentPlan||!data.idpDevelopmentPlan.training">
                                            <ng-container
                                                *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan?.training">
                                                <i class="ti ti-check text-danger fs-xl "></i>
                                            </ng-container>
                                        </td>
                                        <td class="!p-0"></td>
                                        <td class="align-start text-center"
                                            [class.bg-gray-200]="canEdit?(!data.idpDevelopmentPlan?.training||(appraisalIdp.masfromEvaluationIdp.idpStatus!='1' && !data.competencyCourse)):!data.competencyCourse">
                                            <ng-container
                                                *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan?.training">
                                                <div class="flex !items-center"
                                                    *ngFor="let competencyCourse of data.competencyCourse"
                                                    style="min-height: 100px;flex-direction:column">
                                                    <div class="row">
                                                        <div class="col-6"><i class="ti ti-book fs-xxl !fw-b"></i></div>
                                                        <div class="col-6" style="align-content: center;">
                                                            {{competencyCourse.competencyCourseId }}
                                                        </div>
                                                        <div class="col-12">
                                                            <img [src]="'./assets/img/logos/myLearn_Gray.png'">
                                                        </div>
                                                        <!-- <div class="col-12">
                                                        <img [src]="'./assets/img/logos/logo_myLearn.jpg'">
                                                    </div> -->
                                                    </div>
                                                </div>
                                            </ng-container>
                                        </td>
                                        <td class="align-start text-center !white-space-normal"
                                            [class.bg-gray-200]="canEdit?(!data.idpDevelopmentPlan?.training||(appraisalIdp.masfromEvaluationIdp.idpStatus!='1' && !data.competencyCourse)):!data.competencyCourse">
                                            <ng-container
                                                *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan?.training">
                                                <ng-container
                                                    *ngFor="let competencyCourse of data.competencyCourse;let l = index;let last=last">
                                                    <div class="flex !items-center" style="min-height: 100px;">
                                                        {{competencyCourse.tdesc}}
                                                        <span class="ciricon border cursor-pointer"
                                                            *ngIf="canEdit&&appraisalIdp.masfromEvaluationIdp.idpStatus=='1' && pdfPrintCheck == 0"
                                                            (click)="deleteCompetencyCourse(i,l)">
                                                            <i class="ri-close-line text-red-500"></i>
                                                        </span>
                                                    </div>
                                                    <div *ngIf="pdfPrintCheck == 0">
                                                        <button
                                                            *ngIf="last&&canEdit&&appraisalIdp.masfromEvaluationIdp.idpStatus=='1'"
                                                            type="button"
                                                            class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
                                                            (click)="openCompetencycourseDialog(i) ">
                                                            <i class="ri-add-line"></i>
                                                            Add
                                                        </button>
                                                    </div>
                                                </ng-container>
                                            </ng-container>
                                            <ng-container
                                                *ngIf="canEdit&&!data.competencyCourse?.length&&appraisalIdp.masfromEvaluationIdp.idpStatus=='1'&&data.idpDevelopmentPlan?.training">
                                                <div *ngIf="pdfPrintCheck == 0">

                                                    <button type="button"
                                                        class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
                                                        (click)="openCompetencycourseDialog(i)">
                                                        <i class="ri-add-line"></i>
                                                        Add
                                                    </button>
                                                </div>
                                            </ng-container>
                                        </td>
                                        <td class="!p-0"></td>
                                        <td class="align-start text-center !white-space-normal"
                                            [class.bg-gray-200]="(!data.startDate &&!data.endDate) || 
                                            !(data.idpDevelopmentPlan&&(data.idpDevelopmentPlan.training || data.idpDevelopmentPlan.ojtJobAssignment ||data.idpDevelopmentPlan.coachMentor )&& appraisalIdp.apsapprove1.employeeId == evaluaterId)">
                                            <ng-container
                                                *ngIf="(data.idpDevelopmentPlan&&(data.idpDevelopmentPlan.training || data.idpDevelopmentPlan.ojtJobAssignment ||data.idpDevelopmentPlan.coachMentor )&& appraisalIdp.apsapprove1.employeeId == evaluaterId)">
                                                จาก&nbsp;
                                            </ng-container>

                                            <ng-container *ngIf="pdfPrintCheck == 0">
                                                <ng-container
                                                    *ngIf="data.idpDevelopmentPlan&&(data.idpDevelopmentPlan?.training || data.idpDevelopmentPlan?.ojtJobAssignment ||data.idpDevelopmentPlan?.coachMentor )&& appraisalIdp.apsapprove1.employeeId == evaluaterId">
                                                    <input type="date" id="input-label" class="ti-form-input"
                                                        [(ngModel)]="data.startDate">
                                                    <ng-container *ngIf="data.startDate &&data.endDate">
                                                        <p></p>ถึง&nbsp;
                                                    </ng-container>
                                                    <input type="date" id="input-label" class="ti-form-input"
                                                        [(ngModel)]="data.endDate">
                                                </ng-container>
                                                <!-- <ng-container
                                                    *ngIf="!(data.idpDevelopmentPlan&&data.idpDevelopmentPlan?.training) || appraisalIdp.apsapprove1.employeeId  != evaluaterId">
                                                    {{convertDateFormat(data.startDate)}}
                                                    <ng-container *ngIf="data.startDate &&data.endDate">
                                                        <p></p>ถึง&nbsp;
                                                    </ng-container>
                                                    {{convertDateFormat(data.endDate)}}
                                                </ng-container> -->
                                            </ng-container>

                                            <ng-container
                                                *ngIf="pdfPrintCheck != 0 && (data.idpDevelopmentPlan&&(data.idpDevelopmentPlan.training || data.idpDevelopmentPlan.ojtJobAssignment ||data.idpDevelopmentPlan.coachMentor )&& appraisalIdp.apsapprove1.employeeId == evaluaterId)">
                                                {{convertDateFormat(data.startDate)}}
                                                <ng-container *ngIf="data.startDate &&data.endDate">
                                                    <p></p>ถึง&nbsp;
                                                </ng-container>
                                                {{convertDateFormat(data.endDate)}}
                                            </ng-container>
                                        </td>
                                    </tr>
                                </ng-container>
                            </tbody>
                        </table>
                    </div>
                </div>
            </ng-container>


        </div>
    </ng-container>
</ng-template>





<ng-template #competencycourseModal let-modal>
    <h3 mat-dialog-title>
        ข้อมูลหลักสูตรพัฒนาตาม CDR
    </h3>
    <mat-dialog-content>
        <div class="flex justify-end pb-1rem">
            <div class="px-1">
                <div class="relative shadow-md">
                    <input type="text" id="hs-leading-icon" name="hs-leading-icon"
                        class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
                        [placeholder]="'SearchByNoOrName' | translate" [(ngModel)]="competencycourseTable.search"
                        (ngModelChange)="onCompetencycourseSearch()">
                    <div
                        class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
                        <i class="ri-search-line text-gray"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="overflow-auto border">
            <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
                <thead>
                    <tr>
                        <ng-container
                            *ngFor="let item of ['ลำดับ','รหัสหลักสูตร','รายละเอียด (ไทย)','รายละเอียด (อังกฤษ)']; let f = first; let l = last">
                            <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
                                [class.!text-center]="f">
                                <span class="text-sm">{{ 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="!filterCompetencycourse().length">
                    <tr>
                        <td class="text-center" colspan="100%">
                            ไม่พบข้อมูล
                        </td>
                    </tr>
                </tbody>
                <tbody *ngIf="filterCompetencycourse().length">
                    <tr *ngFor="let item of filterCompetencycourse() | slice:((competencycourseTable.currentPage-1) * competencycourseTable.pageSize) : (((competencycourseTable.currentPage-1) * competencycourseTable.pageSize) + competencycourseTable.pageSize);let i = index"
                        class="cursor-pointer" (click)="addCompetencycourse(item);closeCompetencycourseDialog()">
                        <td class="flex justify-center">
                            {{((competencycourseTable.currentPage-1) * competencycourseTable.pageSize)+(i+1)}}
                        </td>
                        <td>{{item.competencyCourseId}}</td>
                        <td>{{item.tdesc}}</td>
                        <td>{{item.edesc}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <app-pagination [totalItems]="filterCompetencycourse().length" [pageSize]="competencycourseTable.pageSize"
            (pageChange)="competencycourseTable.currentPage = $event"
            (pageSizeChange)="competencycourseTable.pageSize = $event;competencycourseTable.currentPage = 1"></app-pagination>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
        <button type="button" mat-button [mat-dialog-close]
            class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
            ย้อนกลับ
        </button>
    </mat-dialog-actions>
</ng-template>