<form [formGroup]="form">
  <div class="flex flex-col space-y-4">
    <div class="flex justify-center">
      <h1 class="font-bold">ห้องสอบที่สามารถเปลี่ยนได้</h1>
    </div>
    <div class="flex flex-col">
      <label>ศูนย์สอบ</label>
      <input type="text" [value]="data.branch_name_th" disabled>
    </div>
    <div class="flex flex-col">
      <label>สนามสอบ</label>
      <input type="text" [value]="data.testing_field_name_th" disabled>
    </div>
    <div class="flex flex-col">
      <label>ห้องสอบ (แสดงเฉพาะห้องสอบที่มีที่นั่งว่าง)</label>
      <select formControlName="testing_center_uid">
        <option [ngValue]=null>
         เลือกห้องสอบ
        </option>
        <option *ngFor="let x of room" [ngValue]="x.testing_center_uid">
          {{x.testing_room_name_th}}
        </option>
      </select>
    </div>
    <div class="flex flex-col">
      <label>ที่นั่งสอบใหม่ (แสดงเฉพาะที่นั่งว่าง)</label>
      <select formControlName="testing_seat">
        <option [ngValue]=null>
         เลือกที่นั่งสอบ
        </option>
        <option *ngFor="let x of seat?.seats" [ngValue]="x">
          {{x}}
        </option>
      </select>
    </div>
    <div class="flex justify-evenly">
      <button class="search-button" (click)="confirm()" [disabled]="form.invalid">อนุมัติ</button>
      <button class="clear-button" (click)="cancel()">ไม่อนุมัติ</button>
    </div>
  </div>
</form>
<!-- <pre>{{form.getRawValue() | json}}</pre> -->
