
<h1 class="title">เพิ่มรายการ</h1>
<form [formGroup]="testcenterForm" (keydown.enter)="$event.preventDefault()">
  <div class="main">
    <div class="flex flex-row justify-between">
      <div class="flex flex-col w-1/4 pr-2">
        <label>ปีการศึกษา</label>
        <select type="text" formControlName="academic_year_uid">
          <option *ngFor="let x of AcademicYear;" [ngValue]="x.academic_year_uid">
            {{x.academic_year_code}}
          </option>
        </select>
      </div>

      <div class="flex flex-col w-1/4 pr-2">
        <label>ภาคการศึกษา</label>
        <select type="text" formControlName="academic_semester_uid">
          <option *ngFor="let x of AcademicsemesterMock;" [ngValue]="x.academic_semester_uid">
            {{x.academic_semester_name_th}}
          </option>
        </select>
      </div>
      <div class="flex flex-col w-1/2">
        <label>ชื่อศูนย์สอบ</label>
        <select type="text" formControlName="branch_uid" (ngModelChange)="setTestField($event)">
          <option>
            --กรุณาเลือกศูนย์สอบ--
          </option>
          <option *ngFor="let x of UnivesityMock;" [ngValue]="x.branch_uid">
            {{x.branch_name_th}}
          </option>
        </select>
      </div>
    </div>
    <div class="flex flex-row justify-between">
      <div class="flex flex-col w-1/2 pr-2">
        <label>ชื่อสนามสอบ</label>
        <select type="text" formControlName="testing_field_uid">
          <option>
            --กรุณาเลือกสนามสอบ--
          </option>
          <option *ngFor="let x of TestfiledList;" [ngValue]="x.testing_field_uid">
            {{x.testing_field_name_th}}
          </option>
        </select>
      </div>
<!--      <div class="flex flex-col w-1/2 mr-2">-->
<!--        <label>รหัสห้องสอบ</label>-->
<!--        <input nospec oninput="value = value.toUpperCase()" type="text" formControlName="testing_room_name_en">-->
<!--      </div>-->
      <div class="flex flex-col w-1/2" >
        <label>ชื่อห้องสอบ</label>
        <input type="text" formControlName="testing_room_name_th">
      </div>

    </div>

    <!--ชื่อแถว-->
    <div
      formArrayName="testing_center_rows"
      *ngFor="let item of testcenterForm['controls']['testing_center_rows']['controls'];let i = index"
    >
      <div [formGroupName]="i">
        <div class="flex flex-row justify-start">
          <div class="flex flex-col w-1/4 pr-2">
            <label>ชื่อแถว </label>
            <input type="text" formControlName="row_name">
          </div>
          <div class="flex flex-col w-1/4 pr-2">
            <label>จำนวนที่นั่งต่อแถว</label>
            <input OnlyNumber type="text" formControlName="no_of_seats">
          </div>
          <div class="flex flex-col w-1/8 justify-end">
            <button class="copy-button" (keydown.enter)="$event.preventDefault()" (click)="removeArray(i)" [disabled]="testcenterForm.get('testing_center_rows')['controls'].length <= 1">ลบ</button>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-row justify-center pr-2">
      <div class="flex flex-col w-1/4 pr-2">
        <button class="search-button" (keydown.enter)="$event.preventDefault()" (click)="add()">เพิ่มแถว</button>
      </div>
      <div class="flex flex-col w-1/4 pr-2">
        <button class="search-button" (keydown.enter)="$event.preventDefault()" (click)="putArray()">ยืนยัน</button>
      </div>
    </div>

    <table mat-table [dataSource]="dataSource" class="mat-elevation-z0">

      <ng-container matColumnDef="row_name">
        <th mat-header-cell *matHeaderCellDef> ชื่อแถว</th>
        <td mat-cell *matCellDef="let element"> {{element.row_name}} </td>
      </ng-container>

      <ng-container matColumnDef="no_of_seats">
        <th mat-header-cell *matHeaderCellDef> จำนวนที่นั่งต่อแถว </th>
        <td mat-cell *matCellDef="let element"> {{element.no_of_seats}} </td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef> </th>
        <td mat-cell *matCellDef="let element;let i = index">
          <div *ngIf="i != 0">
            <button mat-icon-button (click)="removeArrayTable(i)">
              <mat-icon >close</mat-icon>
            </button>
          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns; 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="4">ไม่มีข้อมูล</td>
      </tr>
    </table>

<!--    &lt;!&ndash;Section&ndash;&gt;-->
<!--    <div-->
<!--      formArrayName="testing_center_periods"-->
<!--      *ngFor="let item of testcenterForm.get('testing_center_periods')['controls']; let i = index;"-->
<!--    >-->
<!--      <div [formGroupName]="i">-->
<!--        <div class="flex flex-row justify-start">-->
<!--          <div class="flex flex-col w-1/4 pr-2">-->
<!--            <label>Section</label>-->
<!--            <input type="text" formControlName="period_id">-->
<!--          </div>-->
<!--          <div class="flex flex-col w-1/4 pr-2">-->
<!--            <label>เวลาที่เริ่มต้น</label>-->
<!--            <input type="time" formControlName="start_time">-->
<!--          </div>-->
<!--          <div class="flex flex-col w-1/8 justify-end">-->
<!--            <button class="copy-button " (click)="removeArray2(i)">ลบ</button>-->
<!--          </div>-->
<!--&lt;!&ndash;          <div class="flex flex-col w-1/8 justify-end pr-2">&ndash;&gt;-->
<!--&lt;!&ndash;            <button class="search-button" (click)="putArray2()">เพิ่ม</button>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->

<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="flex flex-row  justify-center pr-2">-->
<!--      <div class="flex flex-col w-1/4 pr-2">-->
<!--        <button class="search-button" (click)="add2()">เพิ่ม Section</button>-->
<!--      </div>-->
<!--      <div class="flex flex-col w-1/4 pr-2">-->
<!--        <button class="search-button" (click)="putArray2()">ยืนยัน</button>-->
<!--      </div>-->
<!--    </div>-->


<!--    <table mat-table [dataSource]="dataSource2" class="mat-elevation-z0">-->
<!--      <ng-container matColumnDef="period_id">-->
<!--        <th mat-header-cell *matHeaderCellDef> Section</th>-->
<!--        <td mat-cell *matCellDef="let element"> {{element.period_id}} </td>-->
<!--      </ng-container>-->

<!--      <ng-container matColumnDef="start_time">-->
<!--        <th mat-header-cell *matHeaderCellDef> เวลาที่เริ่มต้น </th>-->
<!--        <td mat-cell *matCellDef="let element"> {{element.start_time}} </td>-->
<!--      </ng-container>-->

<!--      <ng-container matColumnDef="actions">-->
<!--        <th mat-header-cell *matHeaderCellDef> </th>-->
<!--        <td mat-cell *matCellDef="let element;let i = index">-->
<!--          <div>-->
<!--            <button mat-icon-button (click)="removeArray2(i)">-->
<!--              <mat-icon >close</mat-icon>-->
<!--            </button>-->
<!--          </div>-->
<!--        </td>-->
<!--      </ng-container>-->

<!--      <tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr>-->
<!--      <tr mat-row *matRowDef="let row; columns: displayedColumns2; let i = index">-->
<!--      </tr>-->
<!--      &lt;!&ndash; Row shown when there is no matching data that will be provided to the wrapper table. &ndash;&gt;-->
<!--      <tr class="mat-row" *matNoDataRow>-->
<!--        <td class="mat-cell" colspan="4">ไม่มีข้อมูล</td>-->
<!--      </tr>-->
<!--    </table>-->
  </div>
</form>

<div class="flex flex-row justify-end">
  <button class="confirm-button mr-1 mt-2" (click)="preview()" [disabled]="this.state === 'add'">&nbsp;Preview ผังที่นั่งสอบ&nbsp;</button>
  <button class="search-button mr-1 mt-2" (click)="save()" [disabled]="testcenterForm.invalid">บันทึก</button>
  <button class="add-button mt-2" (click)="cancel()">ยกเลิก</button>
</div>
<pre *ngIf="!isHideForm">{{testcenterForm.getRawValue() | json}}</pre>



