<form [formGroup]="setroomcenterForm">
  <div class="main">
    <h1 class="font-bold text-2xl">กำหนดห้องสอบของรอบสอบ {{testingInfoData?.testing_information_name}}</h1>
    <div class="flex flex-row justify-between">
      <div class="flex flex-col w-48%">
        <label>เลือกศูนย์สอบ</label>
        <input #res type="text" formControlName="branch_uid" [matAutocomplete]="auto1">
        <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayBranchname.bind(this)" (optionSelected)='setFieldname($event.option.value)'>
          <mat-option>
            --กรุณาเลือก--
          </mat-option>
          <mat-option *ngFor="let x of subjectList | searchAuto : res.value : 'branch_name_th'"
                      [value]="x.branch_uid"
          >
            {{x.branch_name_th}}
          </mat-option>
        </mat-autocomplete>
      </div>

      <div class="flex flex-col w-48%">
        <label>เลือกสนามสอบ</label>
        <input #res2 type="text" formControlName="testing_field_uid" [matAutocomplete]="auto2">
        <mat-autocomplete #auto2="matAutocomplete" [displayWith]="displayFieldname.bind(this)" (optionSelected)='setRoomname($event.option.value)'>
          <mat-option>
            --กรุณาเลือก--
          </mat-option>
          <mat-option *ngFor="let subject2 of subjectList2 | searchAuto : res2.value : 'testing_field_name_th'"
                      [value]="subject2.testing_field_uid"
          >
            {{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 #res3 type="text" formControlName="testing_center_uid" [matAutocomplete]="auto3">
        <mat-autocomplete #auto3="matAutocomplete" [displayWith]="displayRoomname.bind(this)" (optionSelected)='setRoomnameth($event.option.value)'>
          <mat-option>
            --กรุณาเลือก--
          </mat-option>
          <mat-option *ngFor="let subject3 of subjectList3 | searchAuto : res3.value : 'testing_room_name_th'"
                      [value]="subject3.testing_center_uid">
            {{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-end">
          <div class="flex flex-col w-2/12">
            <br>
            <!--                <button class="search-button mr-1" (click)="add3()">เพิ่ม</button>-->
            <button class="search-button mr-1" (click)="add3()" [disabled]="setexamform.get('testing_subjects')['controls'].length === 0">เพิ่ม</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="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)"
                [disabled]="element.is_new === null"
              >
              </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 *ngIf="element.is_new !== null">
                <mat-icon (click)="openDialogexam(element.testing_center_uid,i)">edit</mat-icon>
              </button>
              <button mat-icon-button  *ngIf="element.is_new === null">
                <mat-icon  (click)="onView(element.testing_center_uid,i)">visibility</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)" [disabled]="element.is_new === null">
                  <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>
  <div class="flex flex-row justify-center sm:justify-center">
    <button class="search-button mr-1" (click)="save()">บันทึก</button>
    <button class="clear-button" (click)="back()">ยกเลิก</button>
  </div>
</form>
<pre *ngIf="!isHideForm">
  {{setexamform.getRawValue() | json}}
</pre>
