<app-page-header [title]="title" activeitem="รายงาน"></app-page-header>

<div class="flex justify-end pb-3">
  <div class="px-1">
    <div id="Grid_toolbarItems" class="e-control e-toolbar e-lib e-keyboard" role="toolbar" aria-disabled="false" aria-orientation="horizontal" style="height: auto; width: auto; border-radius: 0.50rem;" tabindex="-1">
    <div class="e-toolbar-items">
      <div class="e-toolbar-item" title="Print">
        <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_print" tabindex="0" data-tabindex="-1" aria-label="Print" aria-disabled="false" style="width: auto;">
          <span class="e-btn-icon e-print e-icons e-icon-left"></span>
          <span class="e-tbar-btn-text">Print</span>
        </button>
      </div>
      <div class="e-toolbar-item" title="Excel Export">
        <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_excelexport" tabindex="0" data-tabindex="-1" aria-label="Excel Export" aria-disabled="false" style="width: auto;">
          <span class="e-btn-icon ri-file-excel-2-fill e-icons e-icon-left"></span>
          <span class="e-tbar-btn-text">Excel Export</span>
        </button>
      </div>
      <div class="e-toolbar-item" title="PDF Export">
        <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_csvexport" tabindex="0" data-tabindex="-1" aria-label="CSV Export" aria-disabled="false" style="width: auto;">
          <span class="e-btn-icon ri-file-pdf-fill e-icons e-icon-left"></span>
          <span class="e-tbar-btn-text">PDF Export</span>
        </button>
      </div>
    </div>
  </div>
  </div>
</div>

<section class="pp-wrap">

  <table class="pp-table">
    <thead>
      <tr>
        <th>รหัส</th>
        <th>ชื่อ-นามสกุล</th>
        <th>หน่วยงาน</th>
        <th>ตำแหน่ง</th>
        <th>ระดับ</th>
        <th>เกรด</th>
        <th>คะแนน</th>
        <th>Corp.<br />KPI</th>
        <th>Dep.<br />KPI</th>
        <th>Ind.<br />KPI</th>
        <th>Competency</th>
        <th>Time<br />Attendance</th>
        <th>Cross<br />Functional</th>
        <th>Special<br />Activity</th>
        <th>ปีที่ประเมิน</th>
        <th>อนุมัติ 1</th>
        <th>อนุมัติ 2</th>
        <th>อนุมัติ 3</th>
        <th>รายงาน</th>
      </tr>
    </thead>

    <tbody>
      <tr *ngFor="let r of rows">
        <td class="text-center">{{ r.code }}</td>
        <td class="text-center">{{ r.name }}</td>
        <td>{{ r.unit }}</td>
        <td>{{ r.position }}</td>
        <td class="text-center">{{ r.level }}</td>
        <td class="text-center">{{ r.grade }}</td>
        <td class="text-center">{{ r.score }}</td>
        <td class="text-center">{{ r.corp }}</td>
        <td class="text-center">{{ r.dep }}</td>
        <td class="text-center">{{ r.ind }}</td>
        <td class="text-center">{{ r.comp }}</td>
        <td class="text-center">{{ r.time }}</td>
        <td class="text-center">{{ r.cross }}</td>
        <td class="text-center">{{ r.special }}</td>
        <td class="text-center">{{ r.year }}</td>
        <td class="text-center">{{ r.approve1 }}</td>
        <td class="text-center">{{ r.approve2 }}</td>
        <td class="text-center">{{ r.approve3 }}</td>
        <td class="text-red-500 align-middle" style="justify-items: center;">
          <svg class="cursor-pointer" (click)="openReport()" title="เปิดรายงาน PDF" width="18" height="18"
            viewBox="0 0 24 24" fill="red" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M23.63 15.3c-.71-.745-2.166-1.17-4.224-1.17c-1.1 0-2.377.106-3.761.354a19.443 19.443 0 0 1-2.307-2.661c-.532-.71-.994-1.49-1.42-2.236c.817-2.484 1.207-4.507 1.207-5.962c0-1.632-.603-3.336-2.342-3.336c-.532 0-1.065.32-1.349.781c-.78 1.384-.425 4.4.923 7.381a60.277 60.277 0 0 1-1.703 4.507c-.568 1.349-1.207 2.733-1.917 4.01C2.834 18.53.314 20.34.03 21.758c-.106.533.071 1.03.462 1.42c.142.107.639.533 1.49.533c2.59 0 5.323-4.188 6.707-6.707c1.065-.355 2.13-.71 3.194-.994a34.963 34.963 0 0 1 3.407-.745c2.732 2.448 5.145 2.839 6.352 2.839c1.49 0 2.023-.604 2.2-1.1c.32-.64.106-1.349-.213-1.704zm-1.42 1.03c-.107.532-.64.887-1.384.887c-.213 0-.39-.036-.604-.071c-1.348-.32-2.626-.994-3.903-2.059a17.717 17.717 0 0 1 2.98-.248c.746 0 1.385.035 1.81.142c.497.106 1.278.426 1.1 1.348zm-7.524-1.668a38.01 38.01 0 0 0-2.945.674a39.68 39.68 0 0 0-2.52.745a40.05 40.05 0 0 0 1.207-2.555c.426-.994.78-2.023 1.136-2.981c.354.603.745 1.207 1.135 1.739a50.127 50.127 0 0 0 1.987 2.378zM10.038 1.46a.768.768 0 0 1 .674-.425c.745 0 .887.851.887 1.526c0 1.135-.355 2.874-.958 4.861c-1.03-2.768-1.1-5.074-.603-5.962zM6.134 17.997c-1.81 2.981-3.549 4.826-4.613 4.826a.872.872 0 0 1-.532-.177c-.213-.213-.32-.461-.249-.745c.213-1.065 2.271-2.555 5.394-3.904z"
              fill="currentColor" />
          </svg>
        </td>
      </tr>
    </tbody>
  </table>

</section>