<form [formGroup]="form" xmlns="http://www.w3.org/1999/html">
  <h1 class="title">ข้อมูลผู้สอบ</h1>
  <div class="main" style="margin-bottom: 10px">
    <div class="flex flex-col sm:flex-row justify-between">
      <div class="flex flex-row justify-between sm:w-48% w-full">
        <div class="flex flex-col w-48% ">
          <label>หมายเลขบัตรประขาชน</label>
          <input type="text" formControlName="examinee_card">
        </div>

        <div class="flex flex-col w-48%">
          <label>รหัสนักศึกษา</label>
          <input type="text" formControlName="student_code" >
        </div>
      </div>

      <div class="flex flex-col sm:w-48% w-full">
        <label>ชื่อ-นามสกุล</label>
        <input type="text" formControlName="examinee_full_name" >
      </div>
    </div>

    <div class="flex flex-col sm:flex-row justify-between">
      <div class="flex flex-col sm:w-48% w-full">
        <label>คณะ</label>
        <select type="number" formControlName="faculty_uid">
          <option *ngFor="let x of FacultyLists;" [ngValue]="x.faculty_uid">
            {{x.faculty_name_th}}
          </option>
        </select>
      </div>

      <div class="flex flex-col sm:w-48% w-full">
        <label>ภาควิชา</label>
        <input type="text" formControlName="department_name">
      </div>
    </div>

    <div class="flex flex-col sm:flex-row justify-between">
      <div class="flex flex-col sm:w-48% w-full">
        <label>หน่วยงาน</label>
        <input type="text">
      </div>

      <div class="flex flex-col sm:w-48% w-full">
        <label>ประเภทผู้สอบ</label>
        <select type="number" formControlName="candidate_type_uid">
          <option *ngFor="let x of EducationTypeLists;" [ngValue]="x.candidate_type_uid">
            {{x.candidate_type_name_th}}
          </option>
        </select>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row justify-between">
      <div class="flex flex-col sm:w-48% w-full">
        <label>หมายเลขเบอร์โทรศัพท์</label>
        <input type="text" formControlName="examinee_mobile" >
      </div>
    </div>
  </div>

  <div class="main">
    <div class="flex flex-col sm:flex-row justify-between">
      <div class="flex flex-col sm:w-48% w-full">
        <label>รอบสอบ</label>
        <select type="text" formControlName="testing_information_uid">
          <option>
            --เลือกรอบสอบ--
          </option>
          <option *ngFor="let x of TestingInformationLists;" [ngValue]="x.testing_information_uid">
            {{x.testing_information_name}} ({{x.is_main == true? 'หลัก' : 'รอง'}})
          </option>
        </select>
      </div>
      <div class="flex flex-row justify-between sm:w-48% w-full">
        <div class="flex flex-col w-48% ">
          <label>ปีการศึกษา</label>
          <input type="text" readonly [value]="AcademicYearCode?.academic_year_code">
        </div>

        <div class="flex flex-col w-48%">
          <label>ภาคการศึกษา</label>
          <select type="text">
            <option>
              --เลือกภาคการศึกษา--
            </option>
            <option *ngFor="let x of AcademicSemLists;" [ngValue]="x.academic_semester_uid">
              {{x.academic_semester_name_th}}
            </option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <h1 class="title">กระบวนวิชาที่เลือก</h1>
  <div
    formArrayName="testing_subject_selecteds"
    *ngFor="let item of form.get('testing_subject_selecteds')['controls']; let i = index;"
  >
    <div [formGroupName]="i">
      <div class="main" style="margin-bottom: 10px">
        <div class="flex flex-col sm:flex-row justify-between">
          <div class="flex flex-col sm:w-48% w-full">
            <label>กระบวนวิชาที่เลือก</label>
            <select type="text" formControlName="subject_uid"  >
              <option>
                --เลือกวิชา--
              </option>
              <option *ngFor="let x of SubjectLists;" [value]="x.subject_uid" >
                {{x.subject_code}} - {{x.subject_name_th}}
              </option>
            </select>
          </div>
        </div>

        <div class="flex flex-col sm:flex-row justify-between">
          <div class="flex flex-col sm:w-33% w-full">
            <label>ศูนย์สอบ</label>
            <select type="number" formControlName="branch_uid">
              <option>
                --เลือกศูนย์สอบ--
              </option>
              <option *ngFor="let x of TestcenterLists;" [ngValue]="x.branch_uid">
                {{x.branch_name_th}}
              </option>
            </select>
          </div>

          <div class="flex flex-col sm:w-33% w-full">
            <label>สนามสอบ</label>
            <select type="number" formControlName="testing_field_uid">
              <option>
                --เลือกสนามสอบ--
              </option>
              <option *ngFor="let x of TestFieldLists;" [ngValue]="x.testing_field_uid" >
                {{x.testing_field_name_th}}
              </option>
            </select>
          </div>

          <div class="flex flex-col w-33% ">
            <label>ห้องสอบ</label>
            <select type="number" formControlName="testing_center_uid" (ngModelChange)="setregisterdataForm($event)">
              <option>
                --เลือกสนามสอบ--
              </option>
              <option *ngFor="let x of TestRoomLists;" [ngValue]="x.testing_center_uid" >
                {{x.testing_room_name_th}}
              </option>
            </select>
          </div>
        </div>

        <div class="flex flex-row justify-between sm:w-48% w-full">
          <div class="flex flex-col w-48% ">
            <label>เลือกวันที่สอบ</label>
            <input type="date" formControlName="testing_datetime" [min]="this.Daterange?.testing_start_datetime" [max]="this.Daterange?.testing_end_datetime" >
          </div>
          <div class="flex flex-col w-48%">
            <label>Section</label>
            <select type="number" formControlName="period_id" *ngIf="PeriodLists">
              <option>
                --เลือก Section--
              </option>
              <option *ngFor="let x of PeriodLists.testing_center_periods;" [ngValue]="x.period_id" >
                Section {{x.period_id}}  {{x.start_time}}
              </option>
            </select>
          </div>

        </div>

        <div class="flex flex-col sm:flex-row justify-between">
          <div class="flex flex-row justify-between sm:w-48% w-full">
            <div class="flex flex-col w-48%">
              <label>เลขที่นั่งสอบ</label>
              <input type="text" formControlName="testing_seat" [readOnly]="true">
            </div>
            <div class="flex flex-col sm:w-48% w-full">
              <label>หมายเหตุ</label>
              <input type="text"  [readOnly]="true" >
            </div>
          </div>
        </div>


        <div class="flex flex-col sm:flex-row justify-end">
          <div class="flex flex-row w-full justify-end">
            <div class="flex flex-col w-1/12 mr-1">
              <button class="delete-button mr-1" *ngIf="form.get('testing_subject_selecteds')['controls'].length > 1" (click)="removeArray(i)">ลบ</button>
            </div>
            <div class="flex flex-col w-1/12">
              <button class="add-button" (click)="add()" [disabled]="SubjectLists.length <= 1">เพิ่มวิชา</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
<div class="flex flex-row justify-end">
  <button class="search-button mr-1"  style="min-width:153px !important;">รับเงิน</button>
  <!--  <button class="add-button mr-1 " (click)="delete()">ลบข้อมูล</button>-->
  <button class="clear-button" style="min-width:153px !important;">Re-Print</button>
</div>
<pre>{{form.getRawValue() | json}}</pre>
