<div class="flex flex-col sm:flex-row justify-between">
  <div class="flex flex-col sm:w-48% w-full">
    <label>ปีการศึกษา</label>
    <select type="text" [(ngModel)]="query.academic_year_uid">
      <option *ngFor="let x of AcademicYear;" [ngValue]="x.academic_year_uid">
        {{x.academic_year_code}}
      </option>
    </select>
  </div>

  <div class="flex flex-col sm:w-48% w-full">
    <label>ภาคเรียน</label>
    <select type="text" [(ngModel)]="query.academic_semester_uid">
      <option *ngFor="let x of AcademicsemesterMock;" [ngValue]="x.academic_semester_uid">
        {{x.academic_semester_name_th}}
      </option>
    </select>
  </div>
</div>

<div class="flex flex-col sm:flex-row justify-between">
  <div class="flex flex-col sm:w-48% w-full">
    <label>ศูนย์สอบ</label>
    <select type="text" [(ngModel)]="query.branch_uid" (ngModelChange)="filterTestingFiled($event)">
      <option>
        --เลือกศูนย์สอบ--
      </option>
      <option *ngFor="let x of TestcenterLists;" [ngValue]="x.branch_uid">
        {{x.branch_name_th}}
      </option>
    </select>
  </div>

  <div class="flex flex-col sm:w-48% w-full">
    <label>สนามสอบ</label>
    <select type="text" [(ngModel)]="query.testing_field_uid" (ngModelChange)="filterTestingRoom($event)">
      <option>
        --เลือกสนามสอบ--
      </option>
      <option *ngFor="let x of TestFieldLists;" [ngValue]="x.testing_field_uid" >
        {{x.testing_field_name_th}}
      </option>
    </select>
  </div>
</div>

<div class="flex flex-col sm:flex-row justify-between">
  <div class="flex flex-col sm:w-48% w-full">
    <label>ห้องสอบ</label>
    <select type="number" [(ngModel)]="query.testing_center_uid">
      <option>
        --เลือกห้องสอบ--
      </option>
      <option *ngFor="let x of TestRoomLists;" [ngValue]="x.testing_center_uid" >
        {{x.testing_room_name_th}}
      </option>
    </select>
  </div>

  <div class="flex flex-col sm:w-48% w-full">
    <label>กระบวนวิชาที่เลือก</label>
    <input #res 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 SubjectLists | searchAuto : res.value : 'subject_name_th'"
                  [value]="x.subject_uid">
        {{x.subject_name_th}} ({{x.subject_code}})
      </mat-option>
    </mat-autocomplete>
  </div>
</div>

<div class="flex flex-col sm:flex-row justify-between">
  <div class="flex flex-row justify-between sm:w-48% w-full">
    <div class="flex flex-col w-48% ">
      <label>วันที่เริ่มต้น</label>
      <mat-form-field>
        <input matInput [matDatepicker]="picker" [(ngModel)]="query.from_date">
        <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>วันที่สิ้นสุด</label>
      <mat-form-field>
        <input matInput [min]="query.from_date" [disabled]="!query.from_date" [matDatepicker]="picker2" [(ngModel)]="query.to_date">
        <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
        <mat-datepicker #picker2></mat-datepicker>
      </mat-form-field>
    </div>
  </div>
</div>

<div class="flex flex-col sm:flex-row justify-end pt-10">
  <div class="flex flex-row justify-center sm:justify-end">
    <button class="confirm-button mr-1" (click)="onExcel()">Export Excel</button>
    <button class="search-button mr-1" (click)="onSearch()">ค้นหา</button>
    <button class="clear-button mr-1" (click)="clear()">ล้างตัวเลือก</button>
  </div>
</div>
<!--<pre>-->
<!--  {{this.query | json}}-->
<!--</pre>-->
