<app-page-header
  [title]="'รายงานสรุปจำนวนพนักงานที่ติด GAP 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="gap-wrap">

  <header class="txt-center mb-8">
    <h1 class="big-title">
      รายงานสรุปจำนวนพนักงานที่ติด <span>GAP Competency</span>
    </h1>
    <h2 class="sub-title">แยกตามหน่วยงาน ฝ่ายการพยาบาล</h2>
    <h3 class="date-title">ข้อมูล ณ วันที่ {{ dateInfo }}</h3>
  </header>

  <!-- ตารางหลัก -->
  <div class="table-scroll">
    <table class="gap-table">
      <thead>
        <tr class="head-row">
          <th class="sticky-col">หน่วยงาน</th>
          <th>พยาบาล</th>
          <th>ผู้ช่วย<br />พยาบาล</th>
          <th>เจ้าหน้าที่<br />พยาบาล</th>
          <th>เจ้าหน้าที่<br />ธุรการ</th>
          <th>ลูกจ้างประจำ</th>
          <th>รวม</th>
          <th class="reason-col">หมายเหตุ</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let r of rows" class="body-row">
          <td class="sticky-col">{{ r.unit }}</td>
          <td>{{ r.nurse }}</td>
          <td>{{ r.asnNurse }}</td>
          <td>{{ r.assistantNurse }}</td>
          <td>{{ r.registrar }}</td>
          <td>{{ r.clerk }}</td>
          <td>{{ r.total }}</td>
          <td class="reason-col">{{ r.reason || '' }}</td>
        </tr>

        <tr class="foot-row">
          <td class="sticky-col">{{ grand.unit }}</td>
          <td>{{ grand.nurse }}</td>
          <td>{{ grand.asnNurse }}</td>
          <td>{{ grand.assistantNurse }}</td>
          <td>{{ grand.registrar }}</td>
          <td>{{ grand.clerk }}</td>
          <td>{{ grand.total }}</td>
          <td class="reason-col"></td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
