<!-- <h1 class="title">ค้นหา</h1> -->
<div class="main">
    <div class="flex flex-col justify-between sm:flex-row">
        <div class="flex flex-col sm:w-33% w-full">
            <label>รหัสนักศึกษา</label>
            <input type="text" [(ngModel)]="query.student_code" required>
        </div>

        <div class="flex flex-col sm:w-33% w-full">
            <label>ปีการศึกษา</label>
            <select [(ngModel)]="query.academic_year_code" required>
                <option *ngFor="let x of academicYearList" [ngValue]="x.academic_year_code">
                    {{x.academic_year_code}}
                </option>
            </select>
        </div>

        <div class="flex flex-col sm:w-33% w-full">
            <label>ภาคการศึกษา</label>
            <select [(ngModel)]="query.academic_semester_code" required>
                <option *ngFor="let x of academicSemList" [ngValue]="x.academic_semester_code">
                    {{x.academic_semester_code}}
                </option>
            </select>
        </div>
    </div>

    <div class="flex flex-col justify-between sm:flex-row">
        <div class="flex flex-col sm:w-33% w-full">
            <label>วันที่เริ่มต้น</label>
            <mat-form-field>
                <input matInput [matDatepicker]="picker1" [(ngModel)]="query.test_date">
                <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                <mat-datepicker #picker1></mat-datepicker>
            </mat-form-field>
        </div>

        <div class="flex flex-col sm:w-33% w-full">
            <label>Section</label>
            <select [(ngModel)]="query.period">
                <option [value]=1>
                    Section 1
                </option>
                <option [value]=2>
                    Section 2
                </option>
                <option [value]=3>
                    Section 3
                </option>
                <option [value]=4>
                    Section 4
                </option>
            </select>
        </div>

        <div class="flex flex-col sm:w-33% w-full">
            <div class="hidden">
                <label>ภาคการศึกษา</label>
                <select [(ngModel)]="query.academic_semester_code">
                    <option *ngFor="let x of academicSemList" [ngValue]="x.academic_semester_code">
                        {{x.academic_semester_code}}
                    </option>
                </select>
            </div>

        </div>
    </div>

    <div class="flex flex-row justify-center sm:justify-end">
        <button class="search-button mr-1" (click)="onSearch()"
                [disabled]="query.student_code === null || query.academic_year_code === null || query.academic_semester_code === null">
            ค้นหา
        </button>
        <button class="clear-button mr-1" (click)="clear()">ล้างตัวเลือก</button>
    </div>
</div>
<br>
<div class="main">
    <div class="card">
        <h1 class="title">ตรวจสอบผลการสอบทั้งหมด</h1>
        <div class="overflow-x-auto">
            <table mat-table [dataSource]="result">
                <ng-container matColumnDef="1">
                    <th mat-header-cell *matHeaderCellDef> ลำดับ</th>
                    <td mat-cell *matCellDef="let x; let i = index"> {{this.getIndex(i)}} </td>
                </ng-container>
                <ng-container matColumnDef="8">
                    <th mat-header-cell *matHeaderCellDef> ชื่อผู้เข้าสอบ</th>
                    <td mat-cell *matCellDef="let x"> {{x.student_name}} </td>
                </ng-container>
                <ng-container matColumnDef="2">
                    <th mat-header-cell *matHeaderCellDef> รหัสวิชา</th>
                    <td mat-cell *matCellDef="let x"> {{x.subject_code}} </td>
                </ng-container>
                <ng-container matColumnDef="3">
                    <th mat-header-cell *matHeaderCellDef> ชื่อวิชา (TH)</th>
                    <td mat-cell *matCellDef="let x"> {{x.subject_name_th}} </td>
                </ng-container>
                <ng-container matColumnDef="4">
                    <th mat-header-cell *matHeaderCellDef> วันที่สอบ</th>
                    <td mat-cell *matCellDef="let x"> {{x.testing_date | thaidate}} </td>
                </ng-container>
                <ng-container matColumnDef="5">
                    <th mat-header-cell *matHeaderCellDef> คาบสอบ</th>
                    <td mat-cell *matCellDef="let x"> {{x.period_id}} </td>
                </ng-container>
                <ng-container matColumnDef="6">
                    <th mat-header-cell *matHeaderCellDef> ผลการสอบ</th>
                    <td mat-cell *matCellDef="let x"> {{x.grade}} </td>
                </ng-container>
                <ng-container matColumnDef="7">
                    <th mat-header-cell *matHeaderCellDef> ปีการศึกษา</th>
                    <td mat-cell *matCellDef="let x"> {{x.academic_year_name}} </td>
                </ng-container>
                <ng-container matColumnDef="10">
                    <th mat-header-cell *matHeaderCellDef> ภาคการศึกษา</th>
                    <td mat-cell *matCellDef="let x"> {{x.academic_semester_name}} </td>
                </ng-container>
                <ng-container matColumnDef="9">
                    <th mat-header-cell *matHeaderCellDef></th>
                    <td mat-cell *matCellDef="let x">
                        <div>
                            <button class="add-button" (click)="print(x)">&nbsp;พิมพ์ผลสอบ&nbsp;</button>
                        </div>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="['1','8','2','3','4','5','6','7','10','9']"></tr>
                <tr mat-row *matRowDef="let row; columns: ['1','8','2','3','4','5','6','7','10','9'];"></tr>
            </table>
            <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
        </div>
    </div>
</div>

