  <div class="main w-full flex flex-row">
    <div class="w-full">
      <br>
      <div>
        <form [formGroup]="oldForm">
          <div class="flex flex-row justify-between">

          <div class="flex flex-row items-center w-33% mt-1">
            <span>เวลาในการทำข้อสอบ</span>
            <input class="w-1/4 ml-2 mr-2 text-center"  type="number" formControlName="time_to_complete_exam" (input)="isMoreThan360($event)">
            <span>นาที</span>
          </div>
            <div class="flex flex-row w-48% items-center justify-end">
              <span class="mr-2">เลือกโครง</span>
              <div class="flex flex-col w-2/3">
                <select [(ngModel)]="data" (ngModelChange)="onChange($event)" [ngModelOptions]="{standalone: true}">
                  <option *ngFor="let x of categoryType;" [ngValue]="x">
                    {{x.question_category_master_name_th}}
                  </option>
                </select>
              </div>
            </div>
          </div>
        </form>
        <br>
        <div class="overflow-x-auto">
          <table mat-table [dataSource]="test">
            <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_category_name_th}} </td>
            </ng-container>
            <ng-container matColumnDef="3">
              <th mat-header-cell *matHeaderCellDef> จำนวนข้อในบท </th>
              <td mat-cell *matCellDef="let x"> {{x.total}} </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;">
                <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;" #porranaiEasy [value]="x.multiple_choice_easy" (input)="inputCheck($event.target.value,i,x,'multiple_choice_easy')" [readonly]="!x.is_ok_easy_porranai || x.porranai_easy == 0">
                    <span style="width: 30px">&nbsp;/&nbsp;{{x.porranai_easy}}</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;" #auttanaiEasy [value]="x.subjective_easy" (input)="inputCheck($event.target.value,i,x,'subjective_easy')" [readonly]="!x.is_ok_easy_auttanai || x.auttanai_easy == 0">
                    <span style="width: 30px">&nbsp;/&nbsp;{{x.auttanai_easy}}</span>
                  </div>
                  <!-- <div class="flex items-center justify-evenly flex-row">
                    <span style="width: 46px">ทั้งหมด</span>
                    <input type="number" style="width: 30%" #easy [value]="x.total_question_easy" (input)="_easy($event.target.value,i,x,'total')" [readonly]="!x.is_ok_easy_auttanai">
                    <span>&nbsp;/&nbsp;{{x.porranai_easy + x.auttanai_easy}}</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;">
                <!-- <input style="width: 30%" type="number" #medium [value]="x.total_question_medium" (input)="_medium($event.target.value,i,x)" [readonly]="!x.is_ok_medium">
                <span>&nbsp;/&nbsp;{{x.medium}}</span> -->
                <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;" #porraniMedium [value]="x.multiple_choice_medium" (input)="inputCheck($event.target.value,i,x,'multiple_choice_medium')" [readonly]="!x.is_ok_medium_porranai || x.porranai_medium == 0">
                    <span style="width: 30px">&nbsp;/&nbsp;{{x.porranai_medium}}</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;" #auttanaiMedium [value]="x.subjective_medium" (input)="inputCheck($event.target.value,i,x,'subjective_medium')" [readonly]="!x.is_ok_medium_auttanai || x.auttanai_medium == 0">
                    <span style="width: 30px">&nbsp;/&nbsp;{{x.auttanai_medium}}</span>
                  </div>
                  <!-- <div class="flex items-center justify-evenly flex-row">
                    <span style="width: 46px">ทั้งหมด</span>
                    <input type="number" style="width: 30%" #medium [value]="x.total_question_medium" (input)="_medium($event.target.value,i,x)" [readonly]="!x.is_ok_medium">
                    <span>&nbsp;/&nbsp;{{x.porranai_medium + x.auttanai_medium}}</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;">
                <!-- <input style="width: 30%" type="number" #hard [value]="x.total_question_hard" (input)="_hard($event.target.value,i,x)" [readonly]="!x.is_ok_hard">
                <span>&nbsp;/&nbsp;{{x.hard}}</span> -->
                <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;" #porranaiHard [value]="x.multiple_choice_hard" (input)="inputCheck($event.target.value,i,x,'multiple_choice_hard')" [readonly]="!x.is_ok_hard_porranai || x.porranai_hard == 0">
                    <span style="width: 30px">&nbsp;/&nbsp;{{x.porranai_hard}}</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;" #auttanaiHard [value]="x.subjective_hard" (input)="inputCheck($event.target.value,i,x,'subjective_hard')" [readonly]="!x.is_ok_hard_auttanai || x.auttanai_hard == 0">
                    <span style="width: 30px">&nbsp;/&nbsp;{{x.auttanai_hard}}</span>
                  </div>
                  <!-- <div class="flex items-center justify-evenly flex-row">
                    <span style="width: 46px">ทั้งหมด</span>
                    <input type="number" style="width: 30%" #hard [value]="x.total_question_hard" (input)="_hard($event.target.value,i,x)" [readonly]="!x.is_ok_hard">
                    <span>&nbsp;/&nbsp;{{x.porranai_hard + x.auttanai_hard}}</span>
                  </div> -->
                </div>
              </td>
            </ng-container>
            <ng-container matColumnDef="7">
              <th mat-header-cell *matHeaderCellDef style="text-align: center;"> จำนวนที่สุ่มไป </th>
              <td mat-cell *matCellDef="let x" style="text-align: center;"> {{x.total_random}} </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="column"></tr>
            <tr mat-row *matRowDef="let row; columns: column;"></tr>
          </table>
        </div>
      </div>
    </div>
  </div>

