<div class="main">
  <h1 class="title">แสดงรายการค้นหาของรอบสอบ {{testingInfoData?.testing_information_name}}</h1>
  <div class="flex flex-col justify-between sm:flex-row sm:w-full" >
    <div class="flex flex-col sm:w-33% w-full ">
      <label>ห้องสอบ</label>
      <select type="number" [(ngModel)]="query.testing_room_name_th">
        <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 flex-col sm:w-33% w-full sm:ml-2 sm:mr-2">
      <label>วันที่สอบเริ่มต้น</label>
      <mat-form-field>
        <input matInput [matDatepicker]="picker" [(ngModel)]="query.start_date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </div>
    <div class="flex flex-col sm:w-33% w-full sm:ml-2">
      <label>วันที่สอบสิ้นสุด</label>
      <mat-form-field>
        <input
          matInput
          [matDatepicker]="picker2"
          [disabled]="!query.start_date"
          [min]="query.start_date"
          [(ngModel)]="query.end_date">
        <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
        <mat-datepicker #picker2></mat-datepicker>
      </mat-form-field>
    </div>
    <div class="flex flex-col sm:w-33% w-full sm:ml-2 sm:mr-2">
      <label>คาบสอบ</label>
      <select type="number" [(ngModel)]="query.period_id">
        <option>
          --เลือก คาบสอบ--
        </option>
        <option *ngFor="let x of testingInfoData?.testing_periods;" [ngValue]="x.period_id" >
          คาบสอบ {{x.period_id}}  {{x.start_time}}
        </option>
      </select>
    </div>
    <div class="flex flex-col  sm:w-33% w-full">
      <br>
      <div class="flex flex-row w-1/4">
        <button class="search-button mr-1" (click)="onSearch()">ค้นหา</button>
        <button class="clear-button mr-1" (click)="clear()">ล้างตัวเลือก</button>
      </div>
    </div>
  </div>
</div>
