<div class="main">
  <div class="card">
    <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" disabled [value]="data?.branch_name_th">
      </div>

      <div class="flex flex-col sm:w-48% w-full">
        <label>สนามสอบ</label>
        <input type="text" disabled [value]="data?.testing_field_name_th">
      </div>
    </div>

    <div class="flex flex-col justify-between sm:flex-row mt-1">
      <div class="flex flex-col sm:w-48% w-full">
        <label>ห้องสอบ</label>
        <input type="text" disabled [value]="data?.testing_room_name_th">
      </div>

      <div class="flex flex-row justify-between sm:w-48% w-full">
        <div class="flex flex-col sm:w-48% w-full">
          <label>วันที่สอบ</label>
          <input type="text" disabled [value]="data?.testing_date | thaidate">
        </div>

        <div class="flex flex-col sm:w-48% w-full">
          <label>คาบสอบ</label>
          <input type="text" disabled [value]="data?.section">
        </div>
      </div>
    </div>

    <div class="flex flex-col justify-between sm:flex-row mt-1">
      <div class="flex flex-row justify-between sm:w-48% w-full">
        <div class="flex flex-col sm:w-48% w-full">
          <label>จำนวนนักศึกษาทั้งหมด</label>
          <input type="text" disabled [value]="totalStudent">
        </div>

        <div class="flex flex-col sm:w-48% w-full">
          <label>จำนวนนักศึกษาที่มีที่นั่ง</label>
          <input type="text" disabled [value]="totalSeatGenerate">
        </div>
      </div>

      <div class="flex flex-row justify-end items-center">
        <button class="add-button mr-1" (click)="addStudent()">เพิ่มผู้สอบ</button>
        <button class="search-button" (click)="add()">สร้างที่นั่ง</button>
      </div>
    </div>

  </div>
  <br>
  <div class="card">
    <div class="flex flex-row justify-between">
      <h1 class="title">รายชื่อนักศึกษา</h1>
    </div>
    <div>
      <table mat-table [dataSource]="studentList">
        <ng-container matColumnDef="1">
          <th mat-header-cell *matHeaderCellDef> ลำดับ </th>
          <td mat-cell *matCellDef="let x; let i = index"> {{i+1}} </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>
          <td mat-cell *matCellDef="let x"> {{x.student_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="4">
          <th mat-header-cell *matHeaderCellDef> รหัสวิชา </th>
          <td mat-cell *matCellDef="let x"> {{x.register_subject_code}} </td>
        </ng-container>
        <ng-container matColumnDef="5">
          <th mat-header-cell *matHeaderCellDef> วิชาสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.subject_name_th}} </td>
        </ng-container>
        <ng-container matColumnDef="6">
          <th mat-header-cell *matHeaderCellDef> ที่นั่ง </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_seat}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="['1','2','3','4','5','6']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['1','2','3','4','5','6'];"></tr>
      </table>
      <mat-paginator
        [pageSizeOptions]="[5,10,25,100]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
