
  <h1>กำหนดการสุ่มคำถาม</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" [value]="data?.subject_code" readonly>
      </div>

      <div class="flex flex-col w-33%">
        <label>ชื่อวิชา</label>
        <input type="text" [value]="data?.subject_name_th" readonly>
      </div>

      <div class="flex flex-col w-33%">
        <ng-container *ngIf="data?.random_question_type != 1">
          <label>เวลาในการทำข้อสอบ (นาที)</label>
          <input type="number" [value]="data?.time_to_complete_exam" readonly>
        </ng-container>
      </div>
    </div>

    <h1>ลักษณะการสุ่ม</h1>
    <div class="flex flex-col ml-2">
      <mat-radio-group class="flex flex-col space-y-2" [value]="data?.random_type" style="pointer-events: none;">
        <mat-radio-button [value]=1>ไม่มีการสลับข้อใด ๆ เลย</mat-radio-button>
        <mat-radio-button [value]=2>สลับข้อคำถาม แต่ตัวเลือกไม่สลับ</mat-radio-button>
        <mat-radio-button [value]=3>สลับตัวเลือก แต่ข้อคำถามไม่สลับ</mat-radio-button>
        <mat-radio-button [value]=4>สลับทุกอย่าง ทั้งข้อคำถามและตัวเลือก</mat-radio-button>
      </mat-radio-group>
    </div>

    <h1>วิธีการสุ่มข้อสอบ</h1>
    <div class="flex flex-col ml-2">
      <mat-radio-group class="flex flex-col space-y-2" [value]="data?.random_question_type" style="pointer-events: none;">
        <mat-radio-button [value]=1>สุ่มแบบชุด</mat-radio-button>
        <mat-radio-button [value]=2>สุ่มแยกบท</mat-radio-button>
        <mat-radio-button [value]=3>สุ่มโดยอาจารย์</mat-radio-button>
      </mat-radio-group>
    </div>
  </div>
  <br>
  <div class="main w-full" *ngIf="data?.random_question_type != 1">
    <div class="items-center flex flex-row">
      <span>เวลาในการทำข้อสอบ</span>
      <input type="number" class="w-24 mr-1 ml-1 text-center" [value]="data?.time_to_complete_exam" readonly>
      <span>นาที</span>
    </div>

  </div>

  <div class="overflow-x-auto main" *ngIf="data?.random_question_type == 1">
    <table mat-table [dataSource]="data?.random_question_details">
      <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.question_set_name}} </td>
      </ng-container>
      <ng-container matColumnDef="3">
        <th mat-header-cell *matHeaderCellDef> จำนวนข้อ </th>
        <td mat-cell *matCellDef="let x"> {{x.total_question}} </td>
      </ng-container>
      <ng-container matColumnDef="4">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> ปรนัย </th>
        <td mat-cell *matCellDef="let x; let i = index;" style="text-align: center;">
          {{x.total_question_porranai}}
        </td>
      </ng-container>
      <ng-container matColumnDef="5">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> อัตนัย </th>
        <td mat-cell *matCellDef="let x; let i = index;" style="text-align: center;">
          {{x.total_question_auttanai}}
        </td>
      </ng-container>
      <ng-container matColumnDef="6">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> เวลาในการทำข้อสอบ</th>
        <td mat-cell *matCellDef="let x; let i = index;" style="text-align: center;">
          {{x.exam_time}}
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="['1','2','3','6']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['1','2','3','6'];"></tr>
    </table>
  </div>

  <div class="overflow-x-auto main" *ngIf="data?.random_question_type == 2">
    <table mat-table [dataSource]="dataTable">
      <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.question_sub_set_name}} </td>
      </ng-container>
      <ng-container matColumnDef="3">
        <th mat-header-cell *matHeaderCellDef> จำนวนข้อ </th>
        <td mat-cell *matCellDef="let x"> {{x.total_question? x.total_question : '0'}} </td>
      </ng-container>
      <ng-container matColumnDef="4">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> ระดับง่าย </th>
        <td mat-cell *matCellDef="let x; let i = index;" style="text-align: center;">
          <div class="flex flex-col">
            <div class="flex items-center justify-evenly flex-row">
              <span style="width: 46px">ปรนัย</span>
              <input type="number" style="width: 30%; text-align: center;"  [value]="x.multiple_choice_easy">
              <span>&nbsp;</span>
            </div>
            <div class="flex items-center justify-evenly flex-row">
              <span style="width: 46px">อัตนัย</span>
              <input type="number" style="width: 30%; text-align: center;" [value]="x.subjective_easy">
              <span>&nbsp;</span>
            </div>
          </div>
        </td>
      </ng-container>
      <ng-container matColumnDef="5">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> ระดับปานกลาง </th>
        <td mat-cell *matCellDef="let x; let i = index;" style="text-align: center;">
          <div class="flex flex-col">
            <div class="flex items-center justify-evenly flex-row">
              <span style="width: 46px">ปรนัย</span>
              <input type="number" style="width: 30%; text-align: center;"  [value]="x.multiple_choice_medium">
              <span>&nbsp;</span>
            </div>
            <div class="flex items-center justify-evenly flex-row">
              <span style="width: 46px">อัตนัย</span>
              <input type="number" style="width: 30%; text-align: center;" [value]="x.subjective_medium">
              <span>&nbsp;</span>
            </div>
          </div>
        </td>
      </ng-container>
      <ng-container matColumnDef="6">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> ระดับยาก </th>
        <td mat-cell *matCellDef="let x; let i = index;" style="text-align: center;">
          <div class="flex flex-col">
            <div class="flex items-center justify-evenly flex-row">
              <span style="width: 46px">ปรนัย</span>
              <input type="number" style="width: 30%; text-align: center;"  [value]="x.multiple_choice_hard">
              <span>&nbsp;</span>
            </div>
            <div class="flex items-center justify-evenly flex-row">
              <span style="width: 46px">อัตนัย</span>
              <input type="number" style="width: 30%; text-align: center;" [value]="x.subjective_hard">
              <span>&nbsp;</span>
            </div>
          </div>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="column"></tr>
      <tr mat-row *matRowDef="let row; columns: column;"></tr>
    </table>
  </div>

  <div class="overflow-x-auto main" *ngIf="data?.random_question_type == 3">
    <table mat-table [dataSource]="data?.random_question_details">
      <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.instructor_name}} </td>
      </ng-container>
      <ng-container matColumnDef="3">
        <th mat-header-cell *matHeaderCellDef> จำนวนข้อ </th>
        <td mat-cell *matCellDef="let x"> {{x.total_question}} </td>
      </ng-container>
      <ng-container matColumnDef="4">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> ระดับง่าย </th>
        <td mat-cell *matCellDef="let x; let i = index;" style="text-align: center;">
          <div class="flex flex-col">
            <div class="flex items-center justify-evenly flex-row">
              <span style="width: 46px">ปรนัย</span>
              <input type="number" style="width: 30%; text-align: center;"  [value]="x.multiple_choice_easy">
              <span>&nbsp;</span>
            </div>
            <div class="flex items-center justify-evenly flex-row">
              <span style="width: 46px">อัตนัย</span>
              <input type="number" style="width: 30%; text-align: center;" [value]="x.subjective_easy">
              <span>&nbsp;</span>
            </div>
          </div>
        </td>
      </ng-container>
      <ng-container matColumnDef="5">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> ระดับปานกลาง </th>
        <td mat-cell *matCellDef="let x; let i = index;" style="text-align: center;">
          <div class="flex flex-col">
            <div class="flex items-center justify-evenly flex-row">
              <span style="width: 46px">ปรนัย</span>
              <input type="number" style="width: 30%; text-align: center;"  [value]="x.multiple_choice_medium">
              <span>&nbsp;</span>
            </div>
            <div class="flex items-center justify-evenly flex-row">
              <span style="width: 46px">อัตนัย</span>
              <input type="number" style="width: 30%; text-align: center;" [value]="x.subjective_medium">
              <span>&nbsp;</span>
            </div>
          </div>
        </td>
      </ng-container>
      <ng-container matColumnDef="6">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> ระดับยาก </th>
        <td mat-cell *matCellDef="let x; let i = index;" style="text-align: center;">
          <div class="flex flex-col">
            <div class="flex items-center justify-evenly flex-row">
              <span style="width: 46px">ปรนัย</span>
              <input type="number" style="width: 30%; text-align: center;"  [value]="x.multiple_choice_hard">
              <span>&nbsp;</span>
            </div>
            <div class="flex items-center justify-evenly flex-row">
              <span style="width: 46px">อัตนัย</span>
              <input type="number" style="width: 30%; text-align: center;" [value]="x.subjective_hard">
              <span>&nbsp;</span>
            </div>
          </div>
        </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>
  </div>

  <br>
  <div class="flex flex-row justify-end">
    <div class="flex flex-col">
      <label class="text-xs">&nbsp;</label>
      <button class="clear-button" (click)="cancel()">ยกเลิก</button>
    </div>
  </div>
