<div class="flex flex-col sm:flex-row justify-between">
  <div class="flex flex-col sm:w-48% w-full">
    <label>รอบสอบ</label>
    <input #res type="text" [(ngModel)]="query.testing_information_uid" [matAutocomplete]="auto1">
    <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayTestInfor.bind(this)" (optionSelected)="chooseInfor($event.option.value)">
      <mat-option>
        --กรุณาเลือก--
      </mat-option>
      <mat-option *ngFor="let x of TestingInformationLists | searchAuto : res.value : 'testing_information_name'"
                  [value]="x.testing_information_uid">
        {{x.testing_information_name}}
      </mat-option>
    </mat-autocomplete>
  </div>
  <div class="flex flex-col sm:w-48% w-full">
    <label>ศูนย์สอบ</label>
    <select type="text" [(ngModel)]="query.branch_uid" (ngModelChange)="setregisterdataForm($event)">
      <option>
        --เลือกศูนย์สอบ--
      </option>
      <option *ngFor="let x of TestcenterLists;" [ngValue]="x.branch_uid">
        {{x.branch_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)="setregisterdataForm($event)">-->
<!--      <option>-->
<!--        &#45;&#45;เลือกศูนย์สอบ&#45;&#45;-->
<!--      </option>-->
<!--      <option *ngFor="let x of TestcenterLists;" [ngValue]="x.branch_uid">-->
<!--        {{x.branch_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>Section</label>
    <select type="number" [(ngModel)]="query.period_id">
      <option>
        --เลือก Section--
      </option>
      <option *ngFor="let x of sectionsFake;" [ngValue]="x.period_id" >
        Section {{x.period_id}}
      </option>
    </select>
  </div>
  <div class="flex flex-col sm:w-48% w-full">
    <label>วันที่สอบ</label>
    <mat-form-field>
      <input
        matInput
        [matDatepicker]="picker6"
        [(ngModel)]="query.test_date">
      <mat-datepicker-toggle matSuffix [for]="picker6"></mat-datepicker-toggle>
      <mat-datepicker #picker6></mat-datepicker>
    </mat-form-field>
  </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>
