<h1 class="title">ค้นหา</h1>
<div class="main">
    <div class="flex flex-row justify-items-start">
        <div class="flex flex-col  w-1/4" style="margin-right: 10px">
            <label>ปีการศึกษา</label>
            <select [(ngModel)]="query.academic_year_code">
                <option *ngFor="let x of academicYearList" [ngValue]="x.academic_year_code">
                    {{x.academic_year_code}}
                </option>
            </select>
        </div>
        
        <div class="flex flex-col w-1/4" style="margin-right: 10px">
            <label>ภาคเรียน</label>
            <select [(ngModel)]="query.academic_semester_code">
                <option *ngFor="let x of academicSemList" [ngValue]="x.academic_semester_code">
                    {{x.academic_semester_name_th}}
                </option>
            </select>
        </div>

        <div class="flex flex-col  w-1/4">
            <label>รอบสอบ</label>
            <input #res type="text" [matAutocomplete]="auto3" [(ngModel)]="query.testing_information_uid">
            <mat-autocomplete #auto3="matAutocomplete" [displayWith]="display.bind(this)">
                <mat-option>
                    กรุณาเลือก
                </mat-option>
                <mat-option
                    *ngFor="let x of testingInformationList | searchAuto : res.value : 'nameandcode'"
                    [value]="x.testing_information_uid">
                    {{x.nameandcode}}
                </mat-option>
            </mat-autocomplete>
        </div>
    </div>
    <div class="flex flex-row justify-items-start">
        <div class="flex flex-col w-1/4" style="margin-right: 10px">
            <input type="text" placeholder="เลขที่ใบเสร็จ" [(ngModel)]="query.payment_code">
        </div>
        <div class="flex flex-col w-1/4" style="margin-right: 10px">
            <input type="text" placeholder="counter" [(ngModel)]="query.counter_no">
        </div>
        <div class="flex flex-col w-1/4">
            <div class="flex flex-row">
                <div class="flex flex-col w-full">
                    <button class="search-button mr-1" (click)="onSearch()">ค้นหา</button>
                </div>
                <div class="flex flex-col w-full">
                    <button class="clear-button mr-1" (click)="clear()">ล้างตัวเลือก</button>
                </div>


            </div>
        </div>
    </div>
</div>
