<h1 class="title">ค้นหานักศึกษาเพื่อสร้างข้อสอบในรอบสอบ {{testingInfoData?.testing_information_name}}</h1>
<div class="main">
    <div class="flex flex-col sm:flex-row justify-between">
        <div class="flex flex-col sm:w-48% w-full">
            <label>รหัสนักศึกษา</label>
            <input type="text" [(ngModel)]="query.student_code">
        </div>

        <div class="flex flex-col sm:w-48% w-full">
            <label>รหัสวิชา</label>
            <input #res6 type="text" [(ngModel)]="query.subject_uid" [matAutocomplete]="auto1">
            <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displaySubject.bind(this)">
                <mat-option>
                    --กรุณาเลือก--
                </mat-option>
                <mat-option *ngFor="let x of subjectList | searchAuto : res6.value : 'subject_code'"
                            [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% ">
                <div class="flex flex-row w-full justify-between">
                    <div class="flex flex-col w-48% ">
                        <label>วันที่เริ่มต้นสอบ</label>
                        <mat-form-field>
                            <input matInput [matDatepicker]="picker" [(ngModel)]="query.start_testing_date"
                                   (ngModelChange)="checkDatesearch()">
                            <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 [matDatepicker]="picker2" [(ngModel)]="query.end_testing_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 w-48%">
                <label>Section</label>
                <mat-form-field>
                    <mat-select [(ngModel)]="query.period_id" multiple>
                        <mat-option *ngFor="let x of testingInfoData?.testing_periods" [value]="x.period_id">
                            Section {{x.period_id}}  {{x.start_time}}</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>
        <div class="flex flex-row justify-between sm:w-48% w-full">
            <div class="flex flex-col  w-48%">
                <label>สถานะ</label>
                <select [(ngModel)]="query.has_exam">
                    <option [value]="true">
                        มีข้อสอบ
                    </option>
                    <option [value]="false">
                        ไม่มีข้อสอบ
                    </option>
                </select>
            </div>
        </div>
    </div>

    <div class="flex flex-col sm:flex-row justify-end">

        <div class="flex flex-col sm:flex-row justify-end sm:w-48% w-full">
            <div class="flex flex-col">
                <label></label>
                <button class="copy-button-active sm:mr-1 mb-2" (click)="onSearch()">Refresh</button>
            </div>
            <div class="flex flex-col">
                <label></label>
                <button class="delete-button sm:mr-1 mb-2" style="min-width: 168px !important;" (click)="onClear()">
                    ล้างการสร้างข้อสอบ
                </button>
            </div>
            <div class="flex flex-col">
                <label></label>
                <button class="add-button sm:mr-1 mb-2" (click)="onAdd()">สร้างข้อสอบ</button>
            </div>
            <div class="flex flex-col">
                <label></label>
                <button class="search-button sm:mr-1 mb-2" (click)="onSearch()">ค้นหา</button>
            </div>
            <div class="flex flex-col">
                <label></label>
                <button class="clear-button sm:mr-1 mb-2" (click)="clear()">ล้างตัวเลือก</button>
            </div>
        </div>
    </div>
</div>
