<app-page-header
  [title]="'รายงานภาพรวม Competency ขององค์กร'"
  activeitem="รายงาน">
</app-page-header>

<div class="flex justify-end">
  <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="report-wrap">

  <!-- ── หัวเรื่อง ── -->
  <header class="title-box">
    <h1 class="big-title">รายงานภาพรวม <span>Competency</span> ขององค์กร</h1>
    <h2 class="sub-title">จำนวนพนักงาน <span class="emp-num">200 คน</span></h2>
  </header>

  <!-- ── ตาราง 3 ช่อง ── -->
  <div class="grid-table">

    <!-- ปีที่แล้ว -->
    <div class="tbl-card">
      <h3 class="tbl-head">ปีก่อนหน้า</h3>
      <table>
        <thead><tr><th>สรุปผลประเมิน</th><th>%</th></tr></thead>
        <tbody>
          <tr *ngFor="let r of lastYear"><td>{{ r.label }}</td><td>{{ r.value }}</td></tr>
        </tbody>
      </table>
    </div>

    <!-- ปีปัจจุบัน -->
    <div class="tbl-card">
      <h3 class="tbl-head">ปีปัจจุบัน</h3>
      <table>
        <thead><tr><th>สรุปผลประเมิน</th><th>%</th></tr></thead>
        <tbody>
          <tr *ngFor="let r of thisYear"><td>{{ r.label }}</td><td>{{ r.value }}</td></tr>
        </tbody>
      </table>
    </div>

    <!-- สรุปคะแนน -->
    <div class="tbl-card">
      <h3 class="tbl-head">สรุปคะแนนรวม</h3>
      <table>
        <thead><tr><th></th><th>%</th></tr></thead>
        <tbody>
          <tr *ngFor="let r of summary"><td>{{ r.label }}</td><td>{{ r.value }}</td></tr>
        </tbody>
      </table>
    </div>

  </div>

  <!-- ── Progress Section ── -->
  <div class="progress-card">

    <div class="bar-row">
      <span class="bar-label">Status ประเมิน :</span>

      <div class="bar-track">
        <div class="bar-fill" [style.width.%]="statusEvaluate * 100"></div>
      </div>
      <span class="bar-val">{{ statusEvaluate * 100 | number:'1.0-0' }}%</span>

      <span class="bar-date">วันที่ประเมินล่าสุด : 20 ก.พ. 2568</span>
    </div>

    <div class="bar-row">
      <span class="bar-label">Status IDP :</span>

      <div class="bar-track">
        <div class="bar-fill blue" [style.width.%]="statusIdp * 100"></div>
      </div>
      <span class="bar-val">{{ statusIdp * 100 | number:'1.0-0' }}%</span>

      <span class="bar-date">วันที่ทำ IDP ล่าสุด : 10 พ.ค. 2568</span>
    </div>

    <div class="bar-row">
      <span class="bar-label">Status การพัฒนา :</span>

      <div class="bar-track">
        <div class="bar-fill indigo" [style.width.%]="statusDev * 100"></div>
      </div>
      <span class="bar-val">ปิด GAP {{ statusDev * 100 | number:'1.0-0' }}%</span>

      <span class="bar-date">วันที่พัฒนาล่าสุด : 20 พ.ค. 2568</span>
    </div>

  </div>

  <!-- ── footer note ── -->
  <footer class="note">ข้อมูล ณ วันที่ : {{ today }}</footer>
</section>
