<div class="main">
  <div class="card">
    <div class="flex flex-wrap justify-between">
      <h1 class="title">สรุปยอดตามกระบวนวิชา</h1>
      <div>
        <div class="flex flex-row">
          <div class="flex flex-col mr-1" style="width: 164px !important;">
            <mat-form-field>
              <input matInput [matDatepicker]="picker" [(ngModel)]="query.testing_date">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
          </div>
          <div class="flex flex-col mr-1">
            <button mat-raised-button
                    [ngClass]="query.testing_date  == null ? 'copy-button' : 'copy-button-active'"
                    (click)="onSearch()"
                    [disabled]="query.testing_date == null"
            >
              ค้นหา
            </button>
          </div>
<!--          <div class="flex flex-col">-->
<!--            <button class="clear-button">-->
<!--              ล้าง-->
<!--            </button>-->
<!--          </div>-->
        </div>

      </div>
    </div>
    <div class="overflow-x-auto">
      <table mat-table [dataSource]="subjectList">
        <ng-container matColumnDef="1">
          <th mat-header-cell *matHeaderCellDef> ลำดับ </th>
          <td mat-cell *matCellDef="let x; let i = index"> {{i+1}} </td>
        </ng-container>
        <ng-container matColumnDef="2">
          <th mat-header-cell *matHeaderCellDef> รหัสวิชา </th>
          <td mat-cell *matCellDef="let x"> {{x.subject_code}} </td>
        </ng-container>
        <ng-container matColumnDef="3">
          <th mat-header-cell *matHeaderCellDef> วันสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_datetime | thaidate}} </td>
        </ng-container>
        <ng-container matColumnDef="4">
          <th mat-header-cell *matHeaderCellDef> ลงทะเบียน </th>
          <td mat-cell *matCellDef="let x"> {{x.count_register}} </td>
        </ng-container>
        <ng-container matColumnDef="5">
          <th mat-header-cell *matHeaderCellDef> เข้าสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.count_test}} </td>
        </ng-container>
        <ng-container matColumnDef="6">
          <th mat-header-cell *matHeaderCellDef> ขาดสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.count_missing_test}} </td>
        </ng-container>
        <ng-container matColumnDef="7">
          <th mat-header-cell *matHeaderCellDef> มีเกรด </th>
          <td mat-cell *matCellDef="let x"> {{x.count_grade}} </td>
        </ng-container>
        <ng-container matColumnDef="8">
          <th mat-header-cell *matHeaderCellDef> ยังไม่มีเกรด </th>
          <td mat-cell *matCellDef="let x"> {{x.count_no_grade}} </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="column"></tr>
        <tr mat-row *matRowDef="let row; columns: column;"></tr>
      </table>
      <mat-paginator
        [pageSize]="100"
        [pageSizeOptions]="[5, 10, 25  , 100]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
