<h1 class="title">ค้นหารายชื่อนักศึกษาสำหรับย้ายที่นั่งสอบในรอบสอบ {{testingInfoData?.testing_information_name}}</h1>
<div class="main">
  <div class="flex flex-col lg:flex-row justify-between">
    <div class="flex flex-col lg:w-48% w-full">
      <label>รหัสวิชา</label>
      <input #res6 type="text" [(ngModel)]="query.subject_uid" [matAutocomplete]="auto1">
      <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayTestInfor.bind(this)">
        <mat-option>
          --กรุณาเลือก--
        </mat-option>
        <mat-option *ngFor="let x of testingInfoData?.testing_subjects | searchAuto : res6.value : 'subject_code'"
                    [value]="x.subject_uid">
          {{x.subject_name_th}} ({{x.subject_code}})
        </mat-option>
      </mat-autocomplete>

    </div>

    <div class="flex flex-col lg:w-48% w-full">
      <label>ศูนย์สอบ</label>
      <!--      <input type="text" [(ngModel)]="query.branch_name_th">-->
      <input #res type="text" [(ngModel)]="query.branch_uid" [matAutocomplete]="auto11">
      <mat-autocomplete #auto11="matAutocomplete" [displayWith]="displayBrand.bind(this)">
        <mat-option>
          --กรุณาเลือก--
        </mat-option>
        <mat-option *ngFor="let x of branchList | searchAuto : res.value : 'branch_name_th'"
                    [value]="x.branch_uid"
                    (click)="filterTestingField(x)">
          {{x.branch_name_th}}
        </mat-option>
      </mat-autocomplete>
    </div>
  </div>

  <div class="flex flex-col lg:flex-row justify-between">
    <div class="flex flex-col lg:w-48% w-full">
      <label>สนามสอบ</label>
      <input #res2 type="text"[(ngModel)]="query.testing_field_uid" [matAutocomplete]="auto2">
      <mat-autocomplete #auto2="matAutocomplete" [displayWith]="displayField.bind(this)">
        <mat-option>
          --กรุณาเลือก--
        </mat-option>
        <mat-option *ngFor="let x of filteredTestingFieldList | searchAuto : res2.value : 'testing_field_name_th'"
                    [value]="x.testing_field_uid"
                    (click)="setRoom(x)">
          {{x.testing_field_name_th}}
        </mat-option>
      </mat-autocomplete>
    </div>

    <div class="flex flex-col lg:w-48% w-full">
      <label>ห้องสอบ</label>
      <input #res3 type="text" [(ngModel)]="query.testing_center_uid" [matAutocomplete]="auto3">
      <mat-autocomplete #auto3="matAutocomplete" [displayWith]="displayCenter.bind(this)">
        <mat-option>
          --กรุณาเลือก--
        </mat-option>
        <mat-option *ngFor="let x of filteredRoomList | searchAuto : res3.value : 'testing_room_name_th'"
                    [value]="x.testing_center_uid">
          {{x.testing_room_name_th}}
        </mat-option>
      </mat-autocomplete>
    </div>
  </div>

  <div class="flex flex-col lg:flex-row justify-between">
    <div class="flex flex-row justify-between lg:w-48% w-full">
      <div class="flex flex-col w-48% ">
        <label>วันที่สอบ</label>
        <mat-form-field>
          <input matInput [matDatepicker]="picker" [(ngModel)]="query.testing_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-48%">
        <label>Section</label>
        <select type="number" [(ngModel)]="query.period_id">
          <option>
            --เลือก Section--
          </option>
          <option *ngFor="let x of testingInfoData?.testing_periods;" [ngValue]="x.period_id" >
            Section {{x.period_id}}  {{x.start_time}}
          </option>
        </select>
      </div>
    </div>

    <div class="flex flex-row justify-between w-full lg:w-48%">
      <div class="flex flex-col w-48%">
        <label>รหัสผู้สอบ</label>
        <input type="text" [(ngModel)]="query.student_code">
      </div>
      <div class="flex flex-row justify-end lg:justify-between items-center mt-6 lg:mt-4">
          <button class="search-button mr-1" (click)="onSearch()">ค้นหา</button>
          <button class="clear-button mr-1" (click)="clear()">ล้างตัวเลือก</button>
      </div>
    </div>
  </div>
</div>
<!--<pre>-->
<!--  {{this.query | json}}-->
<!--</pre>-->
