<form [formGroup]="check">
  <div class="main w-full flex flex-row -mb-2" *ngIf="first">
    <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>
</form>
<form [formGroup]="form">
  <div class="main w-full flex flex-row">
    <div class="mr-8 flex flex-col">
      <label>&nbsp;</label>
      <span>{{index+1}}.</span>
    </div>

    <div class="w-full">
      <div class="grid grid-cols-11 gap-2">

        <div class="col-span-4">
          <div class="flex flex-col w-full">
            <label>ชื่ออาจารย์</label>
            <select [(ngModel)]="data" (ngModelChange)="selectInsturctor($event)"
              [ngModelOptions]="{standalone: true}">
              <option *ngFor="let x of instructor" [ngValue]="x">
                {{x.instructor_name_th}}
              </option>
            </select>
          </div>
        </div>

        <div class="col-span-2 flex flex-col">
          <div class="flex flex-col items-center w-full">
            <label>ปรนัยระดับง่าย / {{form.get('total_question_porranai_easy').value}}</label>
            <input style="text-align: center;" #porranaiEasy type="number" [readonly]="form.get('total_question_porranai_easy').value == 0 || form.get('total_question_porranai_easy').value == null" formControlName="multiple_choice_easy" (input)="inputCheck($event.target.value,'multiple_choice_easy')">
          </div>
          <div class="flex flex-col items-center w-full">
            <label>ปรนัยระดับกลาง / {{form.get('total_question_porranai_medium').value}} </label>
            <input style="text-align: center;" #porranaiMedium type="number" [readonly]="form.get('total_question_porranai_medium').value == 0 || form.get('total_question_porranai_medium').value == null" formControlName="multiple_choice_medium" (input)="inputCheck($event.target.value,'multiple_choice_medium')">
          </div>
          <div class="flex flex-col items-center w-full">
            <label>ปรนัยระดับยาก / {{form.get('total_question_porranai_hard').value}} </label>
            <input style="text-align: center;" #porranaiHard type="number" [readonly]="form.get('total_question_porranai_hard').value == 0 || form.get('total_question_porranai_hard').value == null" formControlName="multiple_choice_hard" (input)="inputCheck($event.target.value,'multiple_choice_hard')">
          </div>
        </div>

        <div class="col-span-2">
          <div class="flex flex-col items-center w-full">
            <label>อัตนัยระดับง่าย / {{form.get('total_question_auttanai_easy').value}}</label>
            <input style="text-align: center;" #auttanaiEasy type="number" [readonly]="form.get('total_question_auttanai_easy').value == 0 || form.get('total_question_auttanai_easy').value == null" formControlName="subjective_easy" (input)="inputCheck($event.target.value,'subjective_easy')">
          </div>
          <div class="flex flex-col items-center w-full">
            <label>อัตนัยระดับกลาง / {{form.get('total_question_auttanai_medium').value}}</label>
            <input style="text-align: center;" #auttanaiMedium type="number" [readonly]="form.get('total_question_auttanai_medium').value == 0 || form.get('total_question_auttanai_medium').value == null" formControlName="subjective_medium" (input)="inputCheck($event.target.value,'subjective_medium')">
          </div>
          <div class="flex flex-col items-center w-full">
            <label>อัตนัยระดับยาก / {{form.get('total_question_auttanai_hard').value}}</label>
            <input style="text-align: center;" #auttanaiHard type="number" [readonly]="form.get('total_question_auttanai_hard').value == 0 || form.get('total_question_auttanai_hard').value == null" formControlName="subjective_hard" (input)="inputCheck($event.target.value,'subjective_hard')">
          </div>
        </div>

        <div class="col-span-1">
          <div class="flex flex-col items-center w-full">
            <label class="whitespace-nowrap overflow-ellipsis overflow-hidden text-center w-full">จำนวนข้อ</label>
            <input style="text-align: center;" type="number" formControlName="total_question" readonly>
          </div>
        </div>

        <div class="flex justify-evenly flex-row mt-3 col-span-2">
          <div class="flex flex-col mr-2 w-full">
            <label class="text-xs">&nbsp;</label>
            <button class="add-button" style="min-width: 10px !important;" (click)="add()">เพิ่ม</button>
          </div>

          <div class="flex flex-col w-full">
            <label class="text-xs">&nbsp;</label>
            <button class="delete-button" style="min-width: 10px !important;" (click)="remove()" [disabled]="first">ลบ</button>
          </div>
        </div>

      </div>
    </div>

  </div>
</form>
