<div class="main">
  <div class="flex justify-between flex-row">
    <div class="flex flex-col w-48%">
      <label>รอบสอบ</label>
      <input #name type="text" [(ngModel)]="query.testing_information_uid" [matAutocomplete]="auto1">
      <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayBranch.bind(this)">
        <mat-option>
          --กรุณาเลือก--
        </mat-option>
        <mat-option *ngFor="let x of testingInfo | searchAuto : name.value: 'testing_information_name'" [value]="x.testing_information_uid">
          {{x.testing_information_name}}
      </mat-option>
      </mat-autocomplete>
    </div>

    <div class="flex flex-row justify-start items-end w-48%">
      <button class="search-button mr-1" (click)="onSearch()">ค้นหา</button>
    </div>
  </div>
</div>
<br>
<div class="main flex justify-center" *ngIf="time">
  <div class="w-2/3">
    <table mat-table [dataSource]="time">
      <ng-container matColumnDef="1">
        <th mat-header-cell *matHeaderCellDef> Section </th>
        <td mat-cell *matCellDef="let x"> {{x.period_id}} </td>
      </ng-container>
      <ng-container matColumnDef="2">
        <th mat-header-cell *matHeaderCellDef> เวลาเริ่มต้น </th>
        <td mat-cell *matCellDef="let x; let i = index;">
          {{x.start_time}}
        </td>
      </ng-container>
      <ng-container matColumnDef="3">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> เวลาเริ่มต้น </th>
        <td mat-cell *matCellDef="let x; let i = index;" style="text-align: center;">
          <input style="width: 70%; text-align: center;" type="time" [(ngModel)]="x.print_start_time">
        </td>
      </ng-container>
      <ng-container matColumnDef="4">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> เวลาสิ้นสุด </th>
        <td mat-cell *matCellDef="let x; let i = index;" style="text-align: center;">
          <input style="width: 70%; text-align: center;" type="time" [(ngModel)]="x.print_end_time">
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="['1','2','3','4']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['1','2','3','4'];" class="bg-gray-50"></tr>
    </table>
  </div>
</div>
<br>
<div class="flex flex-row justify-end items-end" *ngIf="time">
  <button class="search-button mr-1" (click)="save()">บันทึก</button>
  <button class="clear-button mr-1" (click)="cancel()">ยกเลิก</button>
</div>
