<div class="main">
    <h1 class="text-bold text-xl">กำหนดค่าใช้จ่ายของรอบการสอบ {{info?.testing_information_name}}</h1>
    <div class="flex flex-col justify-between sm:flex-row">
        <div class="flex flex-col sm:w-48% w-full">
            <label>ชื่อรอบการสอบ</label>
            <input type="text" [value]="info?.testing_information_name" disabled>
        </div>

        <div class="flex flex-row justify-between sm:w-48%">
            <div class="flex flex-col sm:w-48% w-full">
                <label>ภาคเรียน</label>
                <input type="text" [value]="info?.academic_semester_code" disabled>
            </div>
            <div class="flex flex-col sm:w-48% w-full">
                <label>ปีการศึกษา</label>
                <input type="text" [value]="info?.academic_year_code" disabled>
            </div>
        </div>
    </div>

    <div class="flex flex-col justify-between sm:flex-row">
         <div class="flex flex-col sm:w-48% w-full">
            <label>ประเภทผู้สอบ</label>
            <input type="text" [value]="info?.type_of_examinee" disabled>
        </div>

        <div class="flex flex-row justify-between sm:w-48%">
            <div class="flex flex-col sm:w-full lg:w-48% w-full">
                <label>ค่าธรรมเนียมสอบต่อวิชา(บาท)</label>
                <input type="number" OnlyNumber [(ngModel)]="amount" min="1">
            </div>

            <div class="lg:flex flex-row justify-center mt-2 hidden lg:mt-0 lg:w-48% lg:items-end lg:justify-start">
                <button class="search-button" (click)="onAdd()" [disabled]="amount == null">เพิ่ม</button>
            </div>
        </div>
    </div>

    <div class="flex flex-row justify-center sm:justify-end lg:hidden">
        <button class="search-button" (click)="onAdd()">เพิ่ม</button>
    </div>

</div>


<div class="main">
    <div class="card">
        <h1 class="title">แสดงผลรายการกระบวนวิชาสอบ</h1>
        <div class="overflow-x-auto">
            <table mat-table [dataSource]="subjectList">
                <ng-container matColumnDef="1">
                    <th mat-header-cell *matHeaderCellDef> รหัสวิชา </th>
                    <td mat-cell *matCellDef="let x"> {{x.subject_code}} </td>
                </ng-container>
                <ng-container matColumnDef="2">
                    <th mat-header-cell *matHeaderCellDef> ชื่อวิชา </th>
                    <td mat-cell *matCellDef="let x"> {{x.subject_name_th}} </td>
                </ng-container>
                <ng-container matColumnDef="3">
                    <th mat-header-cell *matHeaderCellDef> ค่าธรรมเนียม </th>
                    <td mat-cell *matCellDef="let x"> {{x.amount}} </td>
                </ng-container>
                <ng-container matColumnDef="4">
                    <th mat-header-cell *matHeaderCellDef> เครื่องมือ </th>
                    <td mat-cell *matCellDef="let x">
                        <div>
                            <button mat-icon-button (click)="edit(x)">
                                <mat-icon>create</mat-icon>
                            </button>
                        </div>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="column"></tr>
                <tr mat-row *matRowDef="let row; columns: column;"></tr>
            </table>
            <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
        </div>
    </div>
</div>
