<app-page-header [title]="'Dashboard'" activeitem="Home">
</app-page-header>

<div class="dashboard">

  <!-- ░ Row 1 – KPI ░ -->
  <div class="kpi-grid">
    <ng-container *ngFor="let card of kpiCards">
      <div class="kpi-card">
        <div class="kpi-icon" [ngStyle]="{'background': card.bg}">
          <i [ngClass]="card.icon"></i>
        </div>
        <div class="kpi-text">
          <p class="kpi-label">{{ card.label }}</p>
          <p class="kpi-number">{{ card.value | number }}</p>
          <span class="kpi-rate" [ngClass]="card.change >= 0 ? 'text-up' : 'text-down'">
            {{ card.change | number:'1.0-2' }}%
          </span>
        </div>
      </div>
    </ng-container>
  </div>

  <!-- ░ Row 2 – Bar Chart ░ -->
  <div class="glass-card">
    <h2 class="section-head">การประเมินตามแผนก</h2>
    <div echarts class="chart-xl" [options]="deptScoreOption"></div>
  </div>

  <!-- ░ Row 3 – Mini Charts ░ -->
  <div class="mini-grid">
    <div class="glass-card bg-white rounded-2xl shadow transition
             motion-safe:hover:-translate-y-1 hover:shadow-xl p-6 flex flex-col items-center">
      <!-- <div echarts class="h-[220px] w-full" [options]="summaryDonutOption" [autoResize]="true"></div>
      <p class="mt-3 text-sm text-gray-500">
        {{ 'ผลการประเมินโดยรวม' }}
      </p> -->
      <h3 class="text-sm font-medium text-gray-600 mb-2">
        ผลการประเมินโดยรวม
      </h3>
      <div class="relative w-full h-[220px]">
        <div echarts class="w-full h-full" [options]="summaryDonutOption" [autoResize]="true"></div>
        <div class="absolute inset-0 flex justify-center items-center pointer-events-none">
          <div class="text-xl font-bold">87%</div>
        </div>

      </div>
    </div>
    <!-- Year compare -->
    <div class=" glass-card bg-white rounded-2xl shadow transition
             motion-safe:hover:-translate-y-1 hover:shadow-xl p-6">
      <h3 class="text-sm font-medium text-gray-600 mb-2">
        เปรียบเทียบผลการประเมินปัจจุบัน กับ ผลการประเมินครั้งก่อน
      </h3>
      <div echarts class="h-[220px] w-full" [options]="yearlyCompareOption" [autoResize]="true"></div>
    </div>
    <!-- Level distribution -->
    <div class="glass-card bg-white rounded-2xl shadow transition
             motion-safe:hover:-translate-y-1 hover:shadow-xl p-6">
      <h3 class="text-sm font-medium text-gray-600 mb-2">
        สัดส่วนผลการประเมินในเกณฑ์เเต่ละระดับ
      </h3>
      <div echarts class="h-[220px] w-full" [options]="levelDistOption" [autoResize]="true"></div>
    </div>
  </div>

  <!-- ░ Row 4 – Tables ░ -->
  <div class="tbl-grid">
    <div class="glass-card bg-white rounded-2xl shadow overflow-hidden transition
             motion-safe:hover:-translate-y-1 hover:shadow-xl">
      <h2 class="px-6 py-3 bg-slate-50 border-b font-semibold text-slate-600">
        รายชื่อพนักงานที่ยังไม่ได้ประเมิน
      </h2>
      <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
          <thead class="bg-slate-50 text-slate-500">
            <tr>
              <th class="px-6 py-3 text-left">ผู้ถูกประเมิน</th>
              <th class="px-6 py-3 text-left">ผู้ประเมิน</th>
              <th class="px-6 py-3 text-left">รอบ</th>
              <th class="px-6 py-3 text-left">ฝ่าย</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let row of pendingList" class="odd:bg-white even:bg-slate-50 hover:bg-sky-50">
              <td class="px-6 py-3">{{ row.employee }}</td>
              <td class="px-6 py-3">{{ row.evaluator }}</td>
              <td class="px-6 py-3">{{ row.round }}</td>
              <td class="px-6 py-3">{{ row.department }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- top-score table -->
    <div class="glass-card bg-white rounded-2xl shadow overflow-hidden transition
             motion-safe:hover:-translate-y-1 hover:shadow-xl">
      <h2 class="px-6 py-3 bg-slate-50 border-b font-semibold text-slate-600">
        รายชื่อพนักงานที่มีการประเมินสูงสุด (top5)
      </h2>
      <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
          <thead class="bg-slate-50 text-slate-500">
            <tr>
              <th class="px-6 py-3 text-left">ผู้ถูกประเมิน</th>
              <th class="px-6 py-3 text-left">คะแนน</th>
              <th class="px-6 py-3 text-left">เกรด</th>
              <th class="px-6 py-3 text-left">รอบ</th>
              <th class="px-6 py-3 text-left">ผู้ประเมิน</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let row of topScoreList" class="odd:bg-white even:bg-slate-50 hover:bg-sky-50">
              <td class="px-6 py-3">{{ row.employee }}</td>
              <td class="px-6 py-3 font-semibold text-slate-700">{{ row.score }}</td>
              <td class="px-6 py-3">
                <!-- <span class="px-2 py-0.5 rounded text-white" [ngClass]="{
                        'bg-emerald-600': row.grade === 'S',
                        'bg-sky-600'    : row.grade === 'A',
                        'bg-amber-600'  : row.grade === 'B'
                      }">
                  {{ row.grade }}
                </span> -->
                <span [ngClass]="{
                          'text-emerald': row.grade === 'S',
                          'text-sky'    : row.grade === 'A',
                          'text-amber'  : row.grade === 'B',
                          'text-redorange'  : row.grade === 'C',
                          'text-danger'  : row.grade === 'D',
                        }">{{ row.grade }}</span>
              </td>
              <td class="px-6 py-3">{{ row.round }}</td>
              <td class="px-6 py-3">{{ row.evaluator }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
