<form [formGroup]="form">
  <div class="flex flex-col mb-1">
    <div class="flex flex-col w-full ">
      <label>ศูนย์สอบ</label>
      <select formControlName="new_branch_uid" (ngModelChange)="filterTestingField($event)">
        <option [ngValue]="null">
          --กรุณาเลือก--
        </option>
        <option *ngFor="let x of branchList" [ngValue]="x.branch_uid" >
          {{x.branch_name_th}}
        </option>
      </select>
    </div>
  </div>

  <div class="flex flex-col mb-1">
    <div class="flex flex-col w-full ">
      <label>สนามสอบ</label>
      <select formControlName="new_testing_field_uid" (ngModelChange)="findTestingCenter()">
        <option [ngValue]="null">
          --กรุณาเลือก--
        </option>
        <option *ngFor="let x of filteredTestingFieldList" [ngValue]="x.testing_field_uid">
          {{x.testing_field_name_th}}
        </option>
      </select>
    </div>
  </div>

  <div class="flex flex-col">
    <div class="flex flex-col w-full">
      <label>ห้องสอบ</label>
      <select formControlName="new_testing_center_uid">
        <option [ngValue]="null">
          {{filteredTestingCenterList.length == 0 ? 'ไม่มีห้องสอบ':'--กรุณาเลือก--'}}
        </option>
        <option *ngFor="let x of filteredTestingCenterList" [ngValue]="x.testing_center_uid">
          {{x.testing_room_code}}
        </option>
      </select>
    </div>
  </div>

  <div class="flex flex-col">
    <div class="flex flex-col w-full">
      <label>วันที่สอบ</label>
      <mat-form-field>
        <input matInput [matDatepicker]="picker2" formControlName="new_testing_datetime">
        <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
        <mat-datepicker #picker2></mat-datepicker>
      </mat-form-field>
    </div>
  </div>

  <div class="flex flex-col">
    <div class="flex flex-col w-full">
      <label>section</label>
      <select formControlName="new_period_id">
        <!-- <option [ngValue]="null">
          {{data.testing_information.testing_periods.length == 0 ? 'ไม่มีห้องสอบ':'--กรุณาเลือก--'}}
        </option> -->
        <option *ngFor="let x of data.testing_information.testing_periods" [ngValue]="x.period_id">
          {{x.period_id}} ({{x.start_time}})
        </option>
      </select>
    </div>
  </div>

  <div class="flex flex-col">

    <div class="flex flex-col w-full">
      <label>remark</label>
      <textarea type="text" formControlName="room_remark"></textarea>
    </div>
  </div>

  <div class="flex flex-col mt-1">
    <span class="text-red-400">*เก้าอี้จะมีการสุ่มใหม่</span>
  </div>

  <br>
  <div class="flex justify-evenly">
    <button class="search-button" (click)="confirm()" [disabled]="form.invalid">ยืนยัน</button>
    <button class="clear-button" (click)="cancel()">ยกเลิก</button>
  </div>

</form>
