 <h1 class="title">ประเภทผู้เข้าสอบ : {{infoData?.type_of_examinee}} / รอบสอบ : {{infoData?.testing_information_name}}</h1>
 <div class="main">
        <div class="flex flex-col justify-between sm:flex-row">
            <div class="flex flex-col    w-33%">
                <label>รหัสนักศึกษา</label>
                <input type="text" [(ngModel)]="query.student_code">
            </div>

            <div class="flex flex-col    w-33%">
                <label>ชื่อ-นามสกุล</label>
                <input type="text" [(ngModel)]="query.student_name_th">
            </div>

            <!-- <div class="flex flex-row justify-end items-end" *ngIf="studentType == 1">
                <button class="add-button w-52" *ngIf="isEt" (click)="et.click()">&nbsp; อัปโหลดไฟล์ ET_STDC &nbsp;</button>
                <input style="display: none;" type="file" (change)="onSelectFile($event)" #et>
            </div> -->

            <div class="flex flex-row justify-end items-end">
                <button class="search-button mr-1" (click)="onSearch()">ค้นหา</button>
                <button class="clear-button mr-1" (click)="clear()">ล้างตัวเลือก</button>
                <button class="confirm-button mr-1" (click)="template()">{{studentType == 1 ? 'ดึงข้อมูล' : 'template'}}</button>
                <button *ngIf="studentType != 1" class="add-button" (click)="uploadDialog()">อัปโหลดไฟล์</button>
            </div>
        </div>

        <div class="flex flex-row justify-end items-end" *ngIf="studentType == 1">
            <button class="add-button mr-1" (click)="uploadDialog()">&nbsp; อัปโหลดไฟล์ RU25et &nbsp;</button>
            <button class="ru-button" *ngIf="isEt" (click)="et.click()">&nbsp; อัปโหลดไฟล์ ET_STDC &nbsp;</button>
            <input style="display: none;" type="file" (change)="onSelectFile($event)" #et>
        </div>

    </div>
<br>
<div class="main">
    <div class="flex flex-row justify-between">
        <h1 class="title">รายชื่อข้อมูลนักศึกษา</h1>
        <button class="delete-button" (click)="remove()">ลบข้อมูล</button>
    </div>
        <div class="overflow-x-auto">
            <table mat-table [dataSource]="studentList" *ngIf="studentType == 1">
                <ng-container matColumnDef="select">
                    <th mat-header-cell *matHeaderCellDef>
                        <mat-checkbox (change)="$event ? masterToggle() : null"
                                                    [checked]="selection.hasValue() && isAllSelected()"
                                                    [indeterminate]="selection.hasValue() && !isAllSelected()"
                                                    [aria-label]="checkboxLabel()">
                        </mat-checkbox>
                    </th>
                    <td mat-cell *matCellDef="let row">
                        <mat-checkbox (click)="$event.stopPropagation()"
                                                    (change)="$event ? selection.toggle(row) : null"
                                                    [checked]="selection.isSelected(row)"
                                                    [aria-label]="checkboxLabel(row)">
                        </mat-checkbox>
                    </td>
                </ng-container>
                <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="2">
                    <th mat-header-cell *matHeaderCellDef> รหัสนักศึกษา </th>
                    <td mat-cell *matCellDef="let x"> {{x.student_code? x.student_code : '-'}} </td>
                </ng-container>
                <ng-container matColumnDef="3">
                    <th mat-header-cell *matHeaderCellDef> ชื่อ-นามสกุล (TH) </th>
                    <td mat-cell *matCellDef="let x"> {{x.student_name_th}} </td>
                </ng-container>
                <ng-container matColumnDef="4">
                    <th mat-header-cell *matHeaderCellDef> ชื่อ-นามสกุล (EN) </th>
                    <td mat-cell *matCellDef="let x"> {{x.student_name_en}} </td>
                </ng-container>
                <ng-container matColumnDef="5">
                    <th mat-header-cell *matHeaderCellDef> รหัสวิชา </th>
                    <td mat-cell *matCellDef="let x"> {{x.subject_code}} </td>
                </ng-container>
                <ng-container matColumnDef="6">
                    <th mat-header-cell *matHeaderCellDef> วันสอบ </th>
                    <td mat-cell *matCellDef="let x">
                        <span *ngIf="x.testing_datetime">{{x.testing_datetime | thaidate}}</span>
                        <span *ngIf="!x.testing_datetime">{{getDate(x.exam_day,x.exam_month,x.exam_year) | thaidate}}</span>
                    </td>
                </ng-container>
                <ng-container matColumnDef="7">
                    <th mat-header-cell *matHeaderCellDef> คาบสอบ </th>
                    <td mat-cell *matCellDef="let x"> {{x.period_id? x.period_id : x.exam_period}} </td>
                </ng-container>
                <ng-container matColumnDef="8">
                    <th mat-header-cell *matHeaderCellDef> ห้องสอบ </th>
                    <td mat-cell *matCellDef="let x"> {{x.testing_room_code? x.testing_room_code : x.room_no}} </td>
                </ng-container>
                <ng-container matColumnDef="9">
                    <th mat-header-cell *matHeaderCellDef> ที่นั่งสอบ </th>
                    <td mat-cell *matCellDef="let x"> {{x.testing_seat? x.testing_seat : x.seat_no}} </td>
                </ng-container>
                <ng-container matColumnDef="10">
                    <th mat-header-cell *matHeaderCellDef></th>
                    <td mat-cell *matCellDef="let x">
                        <div *ngIf="!x.photo_url">
                            <input style="display: none;" type="file" (change)="uploadFile($event,x)" #picture>
                            <button class="add-button" (click)="picture.click()">&nbsp;อัปโหลดรูป&nbsp;</button>
                        </div>
                        <div *ngIf="x.photo_url" class="flex">
                            <button mat-icon-button (click)="view(x.photo_url)">
                                <mat-icon>search</mat-icon>
                            </button>
                            &nbsp;
                            <button mat-icon-button (click)="deletePicture(x)">
                                <mat-icon>delete</mat-icon>
                            </button>
                        </div>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="['select','1','2','3','4','5','6','7','8','9','10']"></tr>
                <tr mat-row *matRowDef="let row; columns: ['select','1','2','3','4','5','6','7','8','9','10'];"></tr>
            </table>

            <table mat-table [dataSource]="studentList" *ngIf="studentType != 1">
                <ng-container matColumnDef="select">
                    <th mat-header-cell *matHeaderCellDef>
                        <mat-checkbox (change)="$event ? masterToggle() : null"
                                                    [checked]="selection.hasValue() && isAllSelected()"
                                                    [indeterminate]="selection.hasValue() && !isAllSelected()"
                                                    [aria-label]="checkboxLabel()">
                        </mat-checkbox>
                    </th>
                    <td mat-cell *matCellDef="let row">
                        <mat-checkbox (click)="$event.stopPropagation()"
                                                    (change)="$event ? selection.toggle(row) : null"
                                                    [checked]="selection.isSelected(row)"
                                                    [aria-label]="checkboxLabel(row)">
                        </mat-checkbox>
                    </td>
                </ng-container>
                <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="2">
                    <th mat-header-cell *matHeaderCellDef> รหัสผู้เข้าสอบ </th>
                    <td mat-cell *matCellDef="let x"> {{x.student_code? x.student_code : '-'}} </td>
                </ng-container>
                <ng-container matColumnDef="3">
                    <th mat-header-cell *matHeaderCellDef> ชื่อ-นามสกุล (TH) </th>
                    <td mat-cell *matCellDef="let x"> {{x.student_name_th}} </td>
                </ng-container>
                <ng-container matColumnDef="4">
                    <th mat-header-cell *matHeaderCellDef> ชื่อ-นามสกุล (EN) </th>
                    <td mat-cell *matCellDef="let x"> {{x.student_name_en}} </td>
                </ng-container>
                <ng-container matColumnDef="5">
                    <th mat-header-cell *matHeaderCellDef> วิชาลงทะเบียน </th>
                    <td mat-cell *matCellDef="let x"> {{x.subject_registers? x.subject_registers : x.register_subject_code}} </td>
                </ng-container>
                <ng-container matColumnDef="6">
                    <th mat-header-cell *matHeaderCellDef></th>
                    <td mat-cell *matCellDef="let x">
                        <div *ngIf="!x.photo_url">
                            <input style="display: none;" type="file" (change)="uploadFile($event,x)" #picture>
                            <button class="add-button" (click)="picture.click()">&nbsp;อัปโหลดรูป&nbsp;</button>
                        </div>
                        <div *ngIf="x.photo_url" class="flex">
                            <button mat-icon-button (click)="view(x.photo_url)">
                                <mat-icon>search</mat-icon>
                            </button>
                            &nbsp;
                            <button mat-icon-button (click)="deletePicture(x)">
                                <mat-icon>delete</mat-icon>
                            </button>
                        </div>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="['select','1','2','3','4','5','6']"></tr>
                <tr mat-row *matRowDef="let row; columns: ['select','1','2','3','4','5','6'];"></tr>
            </table>
            <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
        </div>
</div>

<br>
<div class="flex flex-row justify-end items-end" *ngIf="studentType == 1 && isRuStudent">
    <!-- <button class="search-button mr-1" [disabled]="!isEtUploaded" (click)="save()">บันทึก</button> -->
    <button class="search-button mr-1" [disabled]="!isEtUploaded" (click)="saveRuStudent(true)">&nbsp;บันทึกและสร้างที่นั่งสอบ&nbsp;</button>
    <button class="search-button" [disabled]="!isEtUploaded" (click)="saveRuStudent(false)">&nbsp;บันทึกโดยใช้ที่นั่งสอบเดิม&nbsp;</button>
</div>

<!-- <div class="flex flex-row justify-end items-end" *ngIf="studentType == 1 && isRuStudent">
    <button class="search-button mr-1" [disabled]="!isEtUploaded" (click)="saveRuStudent(true)">บันทึกและสร้างที่นั่งสอบ</button>
    <button class="search-button" [disabled]="!isEtUploaded" (click)="saveRuStudent(false)">บันทึกโดยใช้ที่นั่งสอบเดิม</button>
</div> -->

<!-- <pre>{{selection.selected | json}}</pre> -->
