<h1 class="title">ค้นหา</h1>
<div class="main">
  <div class="grid grid-cols-12 gap-1">
      <div class="flex-col flex col-span-3">
        <label>วันที่สอบเริ่มต้น</label>
        <mat-form-field>
          <input matInput [matDatepicker]="picker1" [(ngModel)]="query.start_testing_date">
          <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
          <mat-datepicker #picker1></mat-datepicker>
        </mat-form-field>
      </div>

      <div class="flex flex-col col-span-3">
        <label>วันที่สอบสิ้นสุด</label>
        <mat-form-field>
          <input matInput [matDatepicker]="picker" [(ngModel)]="query.end_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 col-span-3">
        <label>คาบสอบ</label>
        <input type="number" [(ngModel)]="query.section">
      </div>

      <div class="flex justify-end items-center col-span-3">
        <button class="search-button mt-3" (click)="search()">ค้นหา</button>
        &nbsp;
        <button class="clear-button mt-3" (click)="clear()">คืนค่า</button>
      </div>
  </div>
</div>
<br>
<div class="main">
  <div class="card">
    <div class="flex flex-row justify-between">
      <h1 class="title">แสดงผลรายการที่นำเข้าของรอบสอบ {{testingInfoData?.testing_information_name}}</h1>
    </div>
    <div class="overflow-x-auto">
      <table mat-table [dataSource]="testingCenterList">
        <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.branch_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="3">
          <th mat-header-cell *matHeaderCellDef> สนามสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_field_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="4">
          <th mat-header-cell *matHeaderCellDef> ห้องสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_room_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="5">
          <th mat-header-cell *matHeaderCellDef> วันที่ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_date | thaidate}} </td>
        </ng-container>
        <ng-container matColumnDef="6">
          <th mat-header-cell *matHeaderCellDef> คาบสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.section}} </td>
        </ng-container>
        <ng-container matColumnDef="7">
          <th mat-header-cell *matHeaderCellDef style="text-align: center;"> สร้างเลขที่นั่งสอบ </th>
          <td mat-cell *matCellDef="let x" style="text-align: center;">
            <mat-icon style="color: green;">{{x.is_generate_seat? 'check_circle' : ''}}</mat-icon>
          </td>
        </ng-container>
        <ng-container matColumnDef="8">
          <th mat-header-cell *matHeaderCellDef> เครื่องมือ </th>
          <td mat-cell *matCellDef="let x">
            <div>
              <button mat-icon-button (click)="edit(x)">
                <mat-icon>edit</mat-icon>
              </button>

              <button class="add-button" (click)="clearData(x)">ล้าง</button>
            </div>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="['1','2','3','4','5','6','7','8']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['1','2','3','4','5','6','7','8'];"></tr>
      </table>
      <mat-paginator
        [pageSizeOptions]="[5,10,25,100]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
