<div class="flex flex-col justify-center">
  <h1 class="title">ค้นหาห้องว่าง</h1>
</div>
<div class="flex flex-row justify-between">
  <div class="flex flex-col w-4/12">
    <label>วันที่สอบ</label>
    <mat-form-field>
      <input matInput [matDatepicker]="picker" [(ngModel)]="testingDate" [min]="currentDate" [max]="data.information.end_datetime">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  </div>
  <div class="flex flex-col w-3/12">
    <label>คาบสอบ</label>
<!--    <mat-form-field>-->
<!--      <mat-select>-->
<!--        <mat-option *ngFor="let x of PeriodLists" [value]="x.period_id">-->
<!--          {{x.period_id}}-->
<!--        </mat-option>-->
<!--      </mat-select>-->
<!--    </mat-form-field>-->
    <select type="text" [(ngModel)]="query.period_id">
      <option value="">
        --เลือกทั้งหมด--
      </option>
      <option *ngFor="let x of testingInfoData?.testing_periods;" [ngValue]="x.period_id" >
        {{x.period_id}}
      </option>
    </select>
  </div>
  <div class="flex flex-col w-3/12">
    <label>ห้องสอบ</label>
    <select type="text" [(ngModel)]="query.testing_room_code">
      <option value="">
        --เลือกทั้งหมด--
      </option>
      <option *ngFor="let x of testingInfoData?.testing_rooms;" [ngValue]="x.testing_room_name_th" >
        {{x.testing_room_name_th}}({{x.testing_room_code}})
      </option>
  </select>
  </div>

  <div class="flex justify-end items-center mt-3">
    <button class="search-button" (click)="search()">ค้นหา</button>
  </div>
</div>
<br>
<div class="overflow-x-auto">
  <h1 class="title">แสดงผลรายการค้นหา</h1>
  <table mat-table [dataSource]="seatLists">
    <ng-container matColumnDef="1">
      <th mat-header-cell *matHeaderCellDef> ศูนย์สอบ </th>
      <td mat-cell *matCellDef="let x">{{x.branch_name_th}}</td>
    </ng-container>
    <ng-container matColumnDef="2">
      <th mat-header-cell *matHeaderCellDef> สนามสอบ </th>
      <td mat-cell *matCellDef="let x"> {{x.testing_field_name_th}} </td>
    </ng-container>
    <ng-container matColumnDef="3">
      <th mat-header-cell *matHeaderCellDef> ห้องสอบ </th>
      <td mat-cell *matCellDef="let x"> {{x.testing_room_name_th}} </td>
    </ng-container>
    <ng-container matColumnDef="4">
      <th mat-header-cell *matHeaderCellDef> เวลา </th>
      <td mat-cell *matCellDef="let x"> {{x.start_time}}</td>
    </ng-container>
    <ng-container matColumnDef="5">
      <th mat-header-cell *matHeaderCellDef> คาบ </th>
      <td mat-cell *matCellDef="let x"> {{x.period_id}} </td>
    </ng-container>
    <ng-container matColumnDef="6">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let x">
        <button class="add-button" (click)="select(x)">เลือก</button>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="['1','2','3','4','5','6']"></tr>
    <tr mat-row *matRowDef="let row; columns: ['1','2','3','4','5','6'];"></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
