<h1 class="title">จัดการวันกำหนดสอบของรอบสอบ {{testingInfoData?.testing_information_name}}</h1>
<form [formGroup]="setexamform">
  <div class="main">
    <div class="flex flex-col sm:flex-row justify-between">
      <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" formControlName="testing_information_name" [readOnly]="true">
        </div>
        <div class="flex flex-col sm:w-48% w-full">
          <label>รหัสรอบ</label>
          <input type="text" formControlName="testing_information_code" [readOnly]="true">
        </div>
      </div>
      <div class="flex flex-row justify-between sm:w-48% w-full">
        <div class="flex flex-col w-48% ">
          <label>ภาคเรียน</label>
          <select formControlName="academic_semester_code" >
            <option *ngFor="let x of academicSemList" [ngValue]="x.academic_semester_code">
              {{x.academic_semester_name_th}}
            </option>
          </select>
        </div>

        <div class="flex flex-col w-48%">
          <label>ปีการศึกษา</label>
          <select formControlName="academic_year_code" [disabled]="true">
            <option *ngFor="let x of academicYearList" [ngValue]="x.academic_year_code">
              {{x.academic_year_code}}
            </option>
          </select>
        </div>
      </div>
    </div>

    <div class="flex flex-row  xs:flex-col justify-between">
      <div class="flex flex-col xs:flex-row w-48% xs:w-full">
        <label>ประเภทผู้สอบ</label>
        <select formControlName="type_of_examinee">
          <option *ngFor="let x of candidateTypes" [ngValue]="x.candidate_type_name_th">
            {{x.candidate_type_name_th}}
          </option>
        </select>
      </div>
      <div class="flex flex-row xs:flex-col justify-between w-48% xs:w-full">
        <div class="flex flex-col w-48% xs:w-full">
          <br>
          <label> <input type="checkbox" class="form-checkbox rounded text-pink-500" formControlName="is_student_code"> ระบุรหัสนักศึกษา </label>
        </div>
        <div class="flex flex-row justify-between">
          <div class="flex flex-col w-5/12">
            <label>รหัสนักศึกษาเริ่มต้น</label>
            <input type="text"  [class.disable]="true" formControlName="first_student_code">
          </div>
          <div class="flex flex-col w-5/12">
            <label>รหัสนักศึกษาสิ้นสุด</label>
            <input type="text" [class.disable]="true" formControlName="last_student_code">
          </div>
        </div>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row justify-between">
      <div class="flex flex-col sm:w-48% w-full">
        <div class="flex flex-row w-full  justify-between">
          <div class="flex flex-col w-3/12">
            <br>
            <label>ลงทะเบียนสอบ</label>
          </div>
          <div class="flex flex-col w-33%">
            <label>วันที่เริ่มต้น</label>
            <mat-form-field>
              <input matInput [matDatepicker]="picker" formControlName="start_datetime" disabled>
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
          </div>
          <div class="flex flex-col w-33%">
            <label>วันที่สิ้นสุด</label>
            <mat-form-field>
              <input matInput [matDatepicker]="picker2" formControlName="end_datetime" disabled>
              <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
              <mat-datepicker #picker2></mat-datepicker>
            </mat-form-field>
          </div>
        </div>
      </div>
    </div>


    <div class="flex flex-col sm:flex-row justify-between">
      <div class="flex flex-col sm:w-48% w-full">
        <div class="flex flex-row w-full  justify-between">
          <div class="flex flex-col w-3/12">
            <br>
            <label>ลงทะเบียนสอบ</label>
          </div>
          <div class="flex flex-col w-33%">
            <label>วันที่เริ่มต้น</label>
            <mat-form-field>
              <input matInput
                     [matDatepicker]="picker"
                     formControlName="registration_start_datetime"
                     disabled>
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
          </div>
          <div class="flex flex-col w-33%">
            <label>วันที่สิ้นสุด</label>
            <mat-form-field>
              <input matInput [matDatepicker]="picker2" formControlName="registration_end_datetime" disabled>
              <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
              <mat-datepicker #picker2></mat-datepicker>
            </mat-form-field>
          </div>
        </div>
      </div>
      <div class="flex flex-col sm:w-48% w-full">
        <div class="flex flex-row w-full  justify-start">
          <div class="flex flex-col w-3/12">
            <br>
            <label>ลงทะเบียนสอบที่เพิ่มใหม่</label>
          </div>
          <div class="flex flex-col w-33%">
            <label>วันที่สิ้นสุด</label>
            <mat-form-field>
              <input
                matInput
                [matDatepicker]="picker3"
                [min]="testingInfoData?.registration_end_datetime"
                [max]="testingInfoData?.end_datetime"
                formControlName="registration_end_datetime"
              >
              <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
              <mat-datepicker #picker3></mat-datepicker>
            </mat-form-field>
          </div>
        </div>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row justify-between">
      <div class="flex flex-col sm:w-48% w-full">
        <div class="flex flex-row w-full justify-between">
          <div class="flex flex-col w-3/12">
            <br>
            <label>วันสอบ</label>
          </div>
          <div class="flex flex-col w-33%">
            <label>วันที่เริ่มต้น</label>
            <mat-form-field>
              <input matInput [matDatepicker]="picker4" formControlName="testing_start_datetime" disabled>
              <mat-datepicker-toggle matSuffix [for]="picker4"></mat-datepicker-toggle>
              <mat-datepicker #picker4></mat-datepicker>
            </mat-form-field>
          </div>
          <div class="flex flex-col w-33%">
            <label>วันที่สิ้นสุด</label>
            <mat-form-field>
              <input matInput [matDatepicker]="picker5" formControlName="testing_end_datetime" disabled>
              <mat-datepicker-toggle matSuffix [for]="picker5"></mat-datepicker-toggle>
              <mat-datepicker #picker5></mat-datepicker>
            </mat-form-field>
          </div>
        </div>
      </div>

      <div class="flex flex-col sm:w-48% w-full">
        <div class="flex flex-row w-full justify-start">
          <div class="flex flex-col w-3/12">
            <br>
            <label>วันสอบที่เพิ่มใหม่</label>
          </div>
          <div class="flex flex-col w-33%">
            <label>วันที่สอบที่เพิ่มใหม่</label>
            <mat-form-field>
              <input matInput
                     [matDatepicker]="picker6"
                     formControlName="testing_end_datetime"
                     [min]="testingInfoData?.testing_start_datetime"
                     [max]="testingInfoData?.end_datetime"
              >
              <mat-datepicker-toggle matSuffix [for]="picker6"></mat-datepicker-toggle>
              <mat-datepicker #picker6></mat-datepicker>
            </mat-form-field>
          </div>
        </div>
      </div>
    </div>
  </div>
  <form [formGroup]="setroomcenterForm">
    <div class="main">
      <div class="flex flex-row justify-between">
        <div class="flex flex-col w-48%">
          <label>เลือกศุนย์สอบ</label>
          <input #testing_center_id type="text" formControlName="testing_center_id" [matAutocomplete]="auto1">
          <mat-autocomplete #auto1="matAutocomplete">
            <mat-option>
              --กรุณาเลือก--
            </mat-option>
            <mat-option *ngFor="let subject of subjectList | searchAuto : setroomcenterForm.value.branch_name_th : 'branch_name_th'"
                        [value]="subject.branch_name_th"
                        (onSelectionChange)="setFormtestcentername(subject,'branch_name_th')">
              {{subject.branch_name_th}}
            </mat-option>
          </mat-autocomplete>
        </div>

        <div class="flex flex-col w-48%">
          <label>เลือกสนามสอบ</label>
          <input #testing_center_name_th type="text" formControlName="testing_center_name_th" [matAutocomplete]="auto2">
          <mat-autocomplete #auto2="matAutocomplete">
            <mat-option>
              --กรุณาเลือก--
            </mat-option>
            <mat-option *ngFor="let subject2 of subjectList2 | searchAuto : setroomcenterForm.value.testing_field_name_th : 'testing_field_name_th'"
                        [value]="subject2.testing_field_name_th"
                        (onSelectionChange)="setFormtestcentername(subject2,'testing_field_name_th')">
              {{subject2.testing_field_name_th}}
            </mat-option>
          </mat-autocomplete>
        </div>
      </div>

      <div class="flex flex-row justify-between">
        <div class="flex flex-col w-48%">
          <label>เลือกห้องสอบ</label>
          <input #testing_room_name_th type="text" formControlName="testing_room_name_th" [matAutocomplete]="auto3">
          <mat-autocomplete #auto3="matAutocomplete">
            <mat-option>
              --กรุณาเลือก--
            </mat-option>
            <mat-option *ngFor="let subject3 of subjectList3 | searchAuto : setroomcenterForm.value.testing_room_name_th : 'testing_room_name_th'"
                        [value]="subject3.testing_room_name_th"
                        (onSelectionChange)="setFormtestcentername(subject3,'testing_room_name_th')">
              {{subject3.testing_room_name_th}}
            </mat-option>
          </mat-autocomplete>
        </div>

        <div class="flex flex-col w-48%">

          <div class="flex flex-row w-full justify-between">
            <div class="flex flex-col w-9/12">
              <label>ชื่อผู้คุมสอบ</label>
                <input type="text" formControlName="testing_auth_name">
            </div>
            <div class="flex flex-col w-2/12">
              <br>
              <button class="search-button mr-1" (click)="add3()" >เพิ่ม</button>
            </div>
          </div>
        </div>
      </div>
      <mat-card>
        <p class="font-bold">แสดงรายการค้นหา</p>
        <mat-card-content>
          <table mat-table [dataSource]="dataSource3" class="mat-elevation-z0">

            <ng-container matColumnDef="1">
              <th mat-header-cell *matHeaderCellDef> ศูนย์สอบ </th>
              <td mat-cell *matCellDef="let element"> {{element.branch_name_th}} </td>
            </ng-container>
            <ng-container matColumnDef="2">
              <th mat-header-cell *matHeaderCellDef> สนามสอบ </th>
              <td mat-cell *matCellDef="let element"> {{element.testing_field_name_th}} </td>
            </ng-container>
            <ng-container matColumnDef="3">
              <th mat-header-cell *matHeaderCellDef> ห้องสอบ </th>
              <td mat-cell *matCellDef="let element"> {{element.testing_room_name_th}} </td>
            </ng-container>
            <ng-container matColumnDef="4">
              <th mat-header-cell *matHeaderCellDef> ผู้คุมสอบ </th>
              <td mat-cell *matCellDef="let element"> {{element.testing_auth_name}} </td>
            </ng-container>
            <ng-container matColumnDef="5">
              <th mat-header-cell *matHeaderCellDef> สุ่มที่นั่งสอบ </th>
              <td mat-cell *matCellDef="let element;let i = index">
                <mat-checkbox
                  [checked]="element.is_random_seat"
                  (change)="selectionValue(element,i)">
                </mat-checkbox>
              </td>
            </ng-container>
            <ng-container matColumnDef="6">
              <th mat-header-cell *matHeaderCellDef> จัดการที่นั่งสอบ* </th>
              <td mat-cell *matCellDef="let element;let i = index">
                <button mat-icon-button>
                  <mat-icon (click)="openDialogexam(element.testing_center_uid,i)">edit</mat-icon>
                </button>
              </td>
            </ng-container>
            <ng-container matColumnDef="7">
              <th mat-header-cell *matHeaderCellDef> </th>
              <td mat-cell *matCellDef="let element;let i = index">
                <div>
                  <button mat-icon-button (click)="removeArray3(i)">
                    <mat-icon >close</mat-icon>
                  </button>
                </div>
              </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns3"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns3; let i = index">
            </tr>
            <!-- Row shown when there is no matching data that will be provided to the wrapper table. -->
            <tr class="mat-row" *matNoDataRow>
              <td class="mat-cell" colspan="7">ไม่มีข้อมูล</td>
            </tr>
          </table>
        </mat-card-content>
      </mat-card>
    </div>
  </form>
</form>
<div class="flex flex-row justify-center sm:justify-end">
  <button class="search-button mr-1" (click)="save()" [disabled]="this.isInfo">บันทึก</button>
  <button class="clear-button" (click)="back()">ยกเลิก</button>
</div>
<pre *ngIf="!isHideForm">{{setexamform.getRawValue() | json}}</pre>
