<h2 class="page-title">
  ภาพรวมผลประเมินการปฏิบัติงานขององค์กร ประจำปี 2568
</h2>

<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>

<div class="card-grid">

  <!-- ── Chart Card ── -->
  <div class="chart-card glass">
    <div echarts [options]="chartOpt" class="chart"></div>
  </div>

  <!-- ── Table Card ── -->
  <div class="table-card glass">
    <table class="grade-table">

      <thead>
        <tr>
          <th rowspan="2" class="sticky-col">ระดับ<br />U</th>
          <th colspan="2">A</th><th colspan="2">B</th>
          <th colspan="2">C</th><th colspan="2">D</th>
          <th colspan="2">E</th>
          <th colspan="2">รวม</th>
        </tr>
        <tr>
          <ng-container *ngFor="let _ of [1,2,3,4,5,6]">
            <th>คน</th><th>%</th>
          </ng-container>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let r of rows">
          <td class="sticky-col">{{ r.level }}</td>
          <td>{{ r.A }}</td><td>–</td>
          <td>{{ r.B }}</td><td>–</td>
          <td>{{ r.C }}</td><td>–</td>
          <td>{{ r.D }}</td><td>–</td>
          <td>{{ r.E }}</td><td>–</td>
          <td>{{ r.sum }}</td><td>100</td>
        </tr>

        <tr class="grand">
          <td class="sticky-col">{{ grand.level }}</td>
          <td>{{ grand.A }}</td><td>–</td>
          <td>{{ grand.B }}</td><td>–</td>
          <td>{{ grand.C }}</td><td>–</td>
          <td>{{ grand.D }}</td><td>–</td>
          <td>{{ grand.E }}</td><td>–</td>
          <td>{{ grand.sum }}</td><td>100</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>
