
  <div class="main">
    <div class="card">
      <div class="flex flex-row justify-between">
        <h1 class="font-bold text-xl">กำหนดกรรมการคุมสอบของรอบสอบ {{testingInfoData?.testing_information_name}}</h1>
      </div>
      <div class="overflow-x-auto">
        <table mat-table [dataSource]="list" >
          <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> Username </th>
            <td mat-cell *matCellDef="let x; let i = index">
              <div class="flex flex-col mr-2">
                <input #login type="text" [matAutocomplete]="auto" [value]="x.invigilator_code">
                <mat-autocomplete #auto="matAutocomplete">
                  <mat-option *ngFor="let x of userList | searchAuto : login.value : 'login_name'" [value]="x.login_name" (click)="setDisplayName(x,i)">
                    {{x.login_name}} ({{x.display_name}})
                  </mat-option>
                </mat-autocomplete>
              </div>
            </td>
          </ng-container>
          <ng-container matColumnDef="3">
            <th mat-header-cell *matHeaderCellDef style="width: 60%;"> ชื่อผู้คุมสอบ </th>
            <td mat-cell *matCellDef="let x"> {{x.invigilator_name}} </td>
          </ng-container>
          <ng-container matColumnDef="4">
            <th mat-header-cell *matHeaderCellDef>  </th>
            <td mat-cell *matCellDef="let x; let i = index;">
              <button class="delete-button" (click)="removeInvigilator(i)">ลบ</button>
              <!-- <mat-icon (click)="removeInvigilator(x)" class="text-red-500">close</mat-icon> -->
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="['1','2','3','4']"></tr>
          <tr mat-row *matRowDef="let row; columns: ['1','2','3','4'];"></tr>
        </table>
        <mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10,25,100]" showFirstLastButtons></mat-paginator>
      </div>
      <div class="flex justify-end">
        <button class="add-button" (click)="addInvigilator()">เพิ่มกรรมการ</button>
      </div>
    </div>
    <br>
    <div class="flex">
      <h1 class="title">กำหนดกรรมการคุมสอบพิเศษ</h1>
      <button class="add-button ml-2" (click)="addSpecial()">เพิ่ม</button>
    </div>

  <ng-container>
    <form [formGroup]="form">
      <ng-container formArrayName="special_list">
        <ng-container *ngFor="let x of form['controls']['special_list']['controls']; let i = index" [formGroupName]="i">
          <div class="grid grid-cols-12 gap-1">
            <div class="flex flex-col col-span-2">
              <label>วันที่คุมสอบ</label>
              <mat-form-field>
                <input matInput [matDatepicker]="picker" formControlName="examination_date" (dateChange)="addDate($event,x)" [min]="testingInfoData.testing_start_datetime" [max]="testingInfoData.testing_end_datetime">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
              </mat-form-field>
            </div>
            <div class="flex flex-col col-span-9">
              <label>กรรมการคุมสอบ</label>
              <mat-form-field>
                <mat-chip-list #chipList>
                  <mat-chip *ngFor="let a of x.controls.invigilator_list.controls; let chip_index = index" (removed)="removeChip(x,chip_index)">
                    {{a.get('invigilator_name').value}}
                    <button matChipRemove>
                      <mat-icon>cancel</mat-icon>
                    </button>
                  </mat-chip>
                  <input #special type="text" [matAutocomplete]="auto1" [matChipInputFor]="chipList">
                </mat-chip-list>
                <mat-autocomplete #auto1="matAutocomplete">
                  <mat-option *ngFor="let user of userList | searchAuto : special.value : 'login_name'" [value]="user.login_name" (click)="addSpecialInvi(user,x)">
                    {{user.login_name}}
                  </mat-option>
                </mat-autocomplete>
              </mat-form-field>
            </div>
            <div class="flex col-span-1 items-center justify-end mt-3">
              <button class="delete-button" (click)="removeSpecial(i)">ลบ</button>
            </div>
          </div>
        </ng-container>
      </ng-container>
    </form>
  </ng-container>

  </div>
  <br>
  <div class="flex flex-row justify-end">
       <button class="add-button" [disabled]="form.invalid" (click)="save()">บันทึก</button>
  </div>
<pre *ngIf="!isHideForm">{{form.getRawValue() | json}}</pre>


