<h1 class="title">ค้นหา</h1>
<div class="main">
  <div class="flex flex-col justify-between sm:flex-row">
    <div class="flex flex-col sm:w-5/12 w-full">
      <label>เลือกวันที่</label>
      <mat-form-field>
        <input matInput [matDatepicker]="picker" [(ngModel)]="query.payment_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-3/12 w-full">
      <label>รอบสอบ</label>
      <select [(ngModel)]="query.testing_information_uid" (ngModelChange)="testing($event)">
        <option *ngFor="let x of testingInfo" [ngValue]="x.testing_information_uid" >
          {{x.testing_information_name}}
        </option>
      </select>
    </div> -->

    <div class="flex flex-col sm:w-2/12 w-full">
      <label>คาบ</label>
      <input type="text" [(ngModel)]="query.period">
    </div>

    <div class="flex flex-col sm:w-2/12 w-full">
      <label>หมายเลขเครื่อง</label>
      <input type="text" [(ngModel)]="query.counter_no">
    </div>

    <div class="flex flex-row justify-center mt-2 w-full sm:mt-4 sm:w-2/12 sm:items-center sm:justify-end">
      <button class="search-button mr-1" (click)="onSearch()">ค้นหา</button>
    </div>

  </div>

</div>
