<form [formGroup]="setexamform">
  <mat-tab-group [selectedIndex]="selectdIndex" (selectedIndexChange)="selectdIndex = $event">
  <mat-tab label="ข้อมูลทั่วไป">
    <div class="main">
      <div class="flex flex-row justify-between sm:w-48% w-full">
        <div class="flex flex-col w-48% ">
          <mat-slide-toggle formControlName="is_online_register">เปิดรอบสอบ</mat-slide-toggle>
        </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 sm:w-48% w-full">
            <label>ชื่อรอบการสอบ</label>
            <input type="text" formControlName="testing_information_name">
          </div>


          <div class="flex flex-col sm:w-48% w-full">
            <label>รหัสรอบ</label>
            <input type="text" formControlName="testing_information_code" disabled>
          </div>

        </div>

        <div class="flex flex-row justify-between sm:w-48% w-full">
          <div class="flex flex-col w-48% ">
            <label>ภาคเรียน</label>
            <select formControlName="academic_semester_code">
              <option *ngFor="let x of academicSemList" [ngValue]="x.academic_semester_code">
                {{x.academic_semester_name_th}}
              </option>
            </select>
          </div>

          <div class="flex flex-col w-48%">
            <label>ปีการศึกษา</label>
            <select formControlName="academic_year_code">
              <option *ngFor="let x of academicYearList" [ngValue]="x.academic_year_code">
                {{x.academic_year_code}}
              </option>
            </select>
          </div>
        </div>
      </div>

      <div class="flex flex-row  xs:flex-col justify-between">
        <div class="flex flex-col xs:flex-row w-48% xs:w-full">
          <label>ประเภทผู้สอบ</label>
          <select formControlName="type_of_examinee">
            <option *ngFor="let x of EducationTypeLists" [ngValue]="x.candidate_type_name_th">
              {{x.candidate_type_name_th}}
            </option>
          </select>
        </div>
        <div class="flex flex-row xs:flex-col justify-between w-48% xs:w-full">
          <div class="flex flex-col w-48% xs:w-full">
            <br>
            <label> <input type="checkbox"  formControlName="is_student_code" class="form-checkbox rounded text-pink-500"> ระบุรหัสนักศึกษา </label>
          </div>
          <div class="flex flex-row justify-between">
            <div class="flex flex-col w-5/12">
              <label>รหัสนักศึกษาเริ่มต้น</label>
              <input type="text"  [class.disable]="!this.setexamform.get('is_student_code').value" formControlName="first_student_code">
            </div>
            <div class="flex flex-col w-5/12">
              <label>รหัสนักศึกษาสิ้นสุด</label>
              <input type="text" [class.disable]="!this.setexamform.get('is_student_code').value" formControlName="last_student_code">
            </div>
          </div>
        </div>
      </div>


      <div class="flex flex-col sm:flex-row justify-between">
        <div class="flex flex-col sm:w-48% w-full">
          <div class="flex flex-row w-full  justify-between">
            <div class="flex flex-col w-3/12">
              <br>
              <label>ลงทะเบียนสอบ</label>
            </div>
            <div class="flex flex-col w-33%">
              <label>วันที่เริ่มต้น</label>
              <mat-form-field>
                <input matInput [matDatepicker]="picker" formControlName="registration_start_datetime" [min]="Today">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
              </mat-form-field>
            </div>
            <div class="flex flex-col w-33%">
              <label>วันที่สิ้นสุด</label>
              <mat-form-field>
                <input matInput [matDatepicker]="picker2" formControlName="registration_end_datetime" [min]="Today">
                <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                <mat-datepicker #picker2></mat-datepicker>
              </mat-form-field>
            </div>
          </div>
        </div>
        <div class="flex flex-col sm:w-48% w-full">
          <div class="flex flex-row w-full  justify-between">
            <div class="flex flex-col w-4/12">
              <label>
                <input type="checkbox"  formControlName="is_number_of_times_testing" class="form-checkbox rounded text-pink-500"> ระบุจำนวนครั้งที่สอบได้
              </label>
              <input formControlName="number_of_times_testing" [class.disable]="!this.setexamform.get('is_number_of_times_testing').value" type="number">
            </div>
            <div class="flex flex-col w-6/12">
              <label>ลักษณะการคิดคะแนน<span class="error">*</span></label>
              <span class="ml-2"><input type="radio" class="form-radio"  [value]="1" formControlName="times_the_score_is_calculated">
                  ใช้คะแนนที่ดีที่สุด
              </span>
              <span class="ml-2"><input type="radio" class="form-radio"[value]="2"  formControlName="times_the_score_is_calculated">
                  ใช้คะแนนครั้งสุดท้าย
              </span>
              <span class="ml-2"><input type="radio" class="form-radio"  [value]="3"  formControlName="times_the_score_is_calculated">
                  ใช้คะแนนเฉลี่ย
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="flex flex-col sm:flex-row justify-between">
        <div class="flex flex-col sm:w-48% w-full">
          <div class="flex flex-row w-full justify-between">
            <div class="flex flex-col w-3/12">
              <br>
              <label>วันสอบ</label>
            </div>
            <div class="flex flex-col w-33%">
              <label>วันที่เริ่มต้น</label>
              <mat-form-field>
                <input matInput [matDatepicker]="picker3" formControlName="testing_start_datetime" [min]="Today">
                <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
                <mat-datepicker #picker3></mat-datepicker>
              </mat-form-field>
            </div>
            <div class="flex flex-col w-33%">
              <label>วันที่สิ้นสุด</label>
              <mat-form-field>
                <input matInput [matDatepicker]="picker4" formControlName="testing_end_datetime" [min]="Today">
                <mat-datepicker-toggle matSuffix [for]="picker4"></mat-datepicker-toggle>
                <mat-datepicker #picker4></mat-datepicker>
              </mat-form-field>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col sm:flex-row justify-between">
        <div class="flex flex-col sm:w-48% w-full">
          <div class="flex flex-row w-full justify-between">
            <div class="flex flex-col w-3/12">
              <br>
              <label>วันห้ามสอบ</label>
            </div>
            <div class="flex flex-col w-10/12">
              <label>เลือกวัน</label>
              <mat-form-field>
                <mat-chip-list #chipList aria-label="Choose a date" (click)="picker7.open()">
                  <mat-chip
                    *ngFor="let value of model"
                    [selectable]="false"
                    [removable]="true"
                    (removed)="remove(value)"
                  >
                    {{ value | date }}
                    <mat-icon matChipRemove *ngIf="true">cancel</mat-icon>
                  </mat-chip>
                  <input
                    [value]="resetModel"
                    matInput
                    [matDatepicker]="picker7"
                    (dateChange)="dateChanged($event)"
                    [matChipInputFor]="chipList"
                    hidden
                  />
                </mat-chip-list>
                <mat-datepicker-toggle matPrefix [for]="picker7"></mat-datepicker-toggle>
                <mat-datepicker
                  #picker7
                  [startAt]="init"
                  [dateClass]="dateClass"
                ></mat-datepicker>
              </mat-form-field>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col sm:flex-row justify-between">
        <div class="flex flex-col w-8/12">
          <div class="flex flex-row w-full justify-start" >
            <div class="flex flex-col w-2/12">
              <br>
              <label>กำหนด Section</label>
            </div>
            <div
              formArrayName="testing_periods"
              *ngFor="let item of setexamform.get('testing_periods')['controls']; let i=index" class="flex flex-col w-2/12" >
              <br>
              <label [formGroupName]="i">
                <input formControlName="is_check" type="checkbox" class="form-checkbox rounded text-pink-500" (change)="removeChoice(i)"> Section {{item.get('period_id').value}}
<!--                <input formControlName="start_time">-->
                  <input *ngIf="item.get('is_check').value" type="time" formControlName="start_time" [class.disable]="!item.get('is_check').value">
              </label>
            </div>
          </div>
        </div>
      </div>

      <mat-card class="bg-gray-300">
        <mat-card-header>
          <mat-card-title class="font-bold">ปฏิทินกิจกรรมอื่นๆ</mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <form [formGroup]="calendarForm">
            <div class="flex flex-col sm:flex-row justify-between">
              <div class="flex flex-col sm:w-48% w-full">
                <label>รายการปฏิทิน</label>
                <select formControlName="calendar_type_uid" (ngModelChange)="setcalendarForm($event)">
                  <option *ngFor="let x of calendarLists" [ngValue]="x.calendar_type_uid">
                    {{x.calendar_type_name_th}}
                  </option>
                </select>
              </div>

              <div class="flex flex-row justify-around sm:w-48% w-full">
                <div class="flex flex-col w-4/12">
                  <label>วันที่เริ่มต้น</label>
                  <mat-form-field>
                    <input matInput [matDatepicker]="picker5" formControlName="start_datetime" [min]="Today" (ngModelChange)="setDatecalendarForm('start',$event)">
                    <mat-datepicker-toggle matSuffix [for]="picker5"></mat-datepicker-toggle>
                    <mat-datepicker #picker5></mat-datepicker>
                  </mat-form-field>
                </div>
                <div class="flex flex-col w-4/12">
                  <label>วันที่สิ้นสุด</label>
                  <mat-form-field>
                    <input matInput [matDatepicker]="picker6" formControlName="end_datetime" [min]="Today" (ngModelChange)="setDatecalendarForm('end',$event)">
                    <mat-datepicker-toggle matSuffix [for]="picker6"></mat-datepicker-toggle>
                    <mat-datepicker #picker6></mat-datepicker>
                  </mat-form-field>
                </div>
                <div class="flex flex-col w-2/12">
                  <br>
                  <button class="add-button mr-1" (click)="addCalendar()">เพิ่มรายการ</button>
                </div>
              </div>
            </div>
          </form>
        </mat-card-content>
      </mat-card>
      <mat-card>
        <mat-card-content>
          <table mat-table [dataSource]="dataSource" class="mat-elevation-z0">

            <ng-container matColumnDef="1">
              <th mat-header-cell *matHeaderCellDef> ปฏิทินการสอบ</th>
              <td mat-cell *matCellDef="let element"> {{element.calendar_type_name_th}} </td>
            </ng-container>

            <ng-container matColumnDef="2">
              <th mat-header-cell *matHeaderCellDef> วันที่เริ่มต้น </th>
              <td mat-cell *matCellDef="let element"> {{element.start_datetime | thaidate}} </td>
            </ng-container>

            <ng-container matColumnDef="3">
              <th mat-header-cell *matHeaderCellDef> วันที่สิ้นสุด </th>
              <td mat-cell *matCellDef="let element"> {{element.end_datetime | thaidate}} </td>
            </ng-container>

            <ng-container matColumnDef="4">
              <th mat-header-cell *matHeaderCellDef> </th>
              <td mat-cell *matCellDef="let element;let i = index">
                <div>
                  <button mat-icon-button (click)="removeArray(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>
        </mat-card-content>
      </mat-card>
    </div>
    <div class="flex flex-row justify-center sm:justify-end">
      <button class="search-button mr-1 transform" (click)='moveToSelectedTab("กำหนดวิชาสอบ")'>ถัดไป</button>
      <button class="clear-button">ยกเลิก</button>
    </div>
  </mat-tab>
  <mat-tab label="กำหนดวิชาสอบ">
    <form [formGroup]="subjectForm">
      <div class="main">
<!--        <div class="flex flex-col sm:flex-row justify-between">-->
<!--          <div class="flex flex-col justify-between sm:w-48% w-full">-->
<!--            <label>ค้นหารหัสวิชา</label>-->
<!--            <input (keyup)="applyFilter($event)" #input>-->
<!--            <i class="fas fa-user"></i>-->
<!--          </div>-->
<!--        </div>-->


            <app-table-swap-subject
              [dataSource]="subjectListSend"
              [SubjectGetCheck]="SubjectGetCheck$"
              (SubjectChecked)="GetSubjectChoose($event)"
            >


            </app-table-swap-subject>
<!--            <table mat-table [dataSource]="dataSource2" class="mat-elevation-z0">-->
<!--              &lt;!&ndash; Checkbox Column &ndash;&gt;-->
<!--              <ng-container matColumnDef="select">-->
<!--                <th mat-header-cell *matHeaderCellDef>-->
<!--                  <mat-checkbox (change)="$event ? masterToggle() : null"-->
<!--                                [checked]="selection.hasValue() && isAllSelected()"-->
<!--                                [indeterminate]="selection.hasValue() && !isAllSelected()"-->
<!--                                (change)="$event ? testdata() : null">-->
<!--                  </mat-checkbox>-->
<!--                </th>-->
<!--                <td mat-cell *matCellDef="let row">-->
<!--                  <mat-checkbox (click)="$event.stopPropagation()"-->
<!--                                (change)="$event ? selection.toggle(row) : null"-->
<!--                                [checked]="selection.isSelected(row)"-->
<!--                                [aria-label]="checkboxLabel(row)"-->
<!--                                (change)="$event ? testdata(row) : null">-->
<!--                  </mat-checkbox>-->
<!--                </td>-->
<!--              </ng-container>-->

<!--              <ng-container matColumnDef="1">-->
<!--                <th mat-header-cell *matHeaderCellDef> รหัสวิชา</th>-->
<!--                <td mat-cell *matCellDef="let element"> {{element.subject_code}} </td>-->
<!--              </ng-container>-->

<!--              <ng-container matColumnDef="2">-->
<!--                <th mat-header-cell *matHeaderCellDef> ชื่อวิชา </th>-->
<!--                <td mat-cell *matCellDef="let element"> {{element.subject_name_th}} </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">ไม่มีพบข้อมูล จากค้นหาคำว่า "{{input.value}}"</td>-->
<!--              </tr>-->
<!--            </table>-->
<!--            <mat-paginator-->

<!--              [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>-->
      </div>
    </form>
    <div class="flex flex-row justify-center sm:justify-end">
      <button class="search-button mr-1" (click)='moveToSelectedTab("กำหนดห้องสอบ")'>ถัดไป</button>
      <button class="clear-button">ยกเลิก</button>
    </div>
  </mat-tab>
  <mat-tab label="กำหนดห้องสอบ">
    <form [formGroup]="setroomcenterForm">
      <div class="main">
        <div class="flex flex-row justify-between">
          <div class="flex flex-col w-48%">
            <label>เลือกศูนย์สอบ</label>
            <input #res type="text" formControlName="branch_uid" [matAutocomplete]="auto1">
            <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayBranchname.bind(this)" (optionSelected)='setFieldname($event.option.value)'>
              <mat-option>
                --กรุณาเลือก--
              </mat-option>
            <mat-option *ngFor="let x of subjectList | searchAuto : res.value : 'branch_name_th'"
                        [value]="x.branch_uid"
            >
              {{x.branch_name_th}}
            </mat-option>
            </mat-autocomplete>
          </div>

          <div class="flex flex-col w-48%">
            <label>เลือกสนามสอบ</label>
            <input #res2 type="text" formControlName="testing_field_uid" [matAutocomplete]="auto2">
            <mat-autocomplete #auto2="matAutocomplete" [displayWith]="displayFieldname.bind(this)" (optionSelected)='setRoomname($event.option.value)'>
              <mat-option>
                --กรุณาเลือก--
              </mat-option>
              <mat-option *ngFor="let subject2 of subjectList2 | searchAuto : res2.value : 'testing_field_name_th'"
                          [value]="subject2.testing_field_uid"
              >
                {{subject2.testing_field_name_th}}
              </mat-option>
            </mat-autocomplete>
          </div>
        </div>

        <div class="flex flex-row justify-between">
          <div class="flex flex-col w-48%">
            <label>เลือกห้องสอบ</label>
            <input #res3 type="text" formControlName="testing_center_uid" [matAutocomplete]="auto3">
            <mat-autocomplete #auto3="matAutocomplete" [displayWith]="displayRoomname.bind(this)" (optionSelected)='setRoomnameth($event.option.value)'>
              <mat-option>
                  --กรุณาเลือก--
              </mat-option>
              <mat-option *ngFor="let subject3 of subjectList3 | searchAuto : res3.value : 'testing_room_name_th'"
                          [value]="subject3.testing_center_uid">
                {{subject3.testing_room_name_th}}
              </mat-option>
            </mat-autocomplete>
          </div>

          <div class="flex flex-col w-48%">
            <div class="flex flex-row w-full justify-between">
              <div class="flex flex-col w-9/12">
                <label>ชื่อผู้คุมสอบ</label>
                <input type="text" formControlName="testing_auth_name">
              </div>
              <div class="flex flex-col w-2/12">
                <br>
                <button class="search-button mr-1" (click)="add3()" [disabled]="setexamform.get('testing_subjects')['controls'].length === 0">เพิ่ม</button>
              </div>
            </div>
          </div>
        </div>
        <mat-card>
          <p class="font-bold">แสดงรายการค้นหา</p>
          <mat-card-content>
            <table mat-table [dataSource]="dataSource3" class="mat-elevation-z0">

              <ng-container matColumnDef="1">
                <th mat-header-cell *matHeaderCellDef> ศูนย์สอบ </th>
                <td mat-cell *matCellDef="let element"> {{element.branch_name_th}} </td>
              </ng-container>
              <ng-container matColumnDef="2">
                <th mat-header-cell *matHeaderCellDef> สนามสอบ </th>
                <td mat-cell *matCellDef="let element"> {{element.testing_field_name_th}} </td>
              </ng-container>
              <ng-container matColumnDef="3">
                <th mat-header-cell *matHeaderCellDef> ห้องสอบ </th>
                <td mat-cell *matCellDef="let element"> {{element.testing_room_name_th}} </td>
              </ng-container>
              <ng-container matColumnDef="4">
                <th mat-header-cell *matHeaderCellDef> ผู้คุมสอบ </th>
                <td mat-cell *matCellDef="let element"> {{element.testing_auth_name}} </td>
              </ng-container>
              <ng-container matColumnDef="5">
                <th mat-header-cell *matHeaderCellDef> สุ่มที่นั่งสอบ </th>
                <td mat-cell *matCellDef="let element;let i = index">
                  <mat-checkbox
                    [checked]="element.is_random_seat"
                    (change)="selectionValue(element,i)">
                  </mat-checkbox>
                </td>
              </ng-container>
              <ng-container matColumnDef="6">
                <th mat-header-cell *matHeaderCellDef> จัดการที่นั่งสอบ* </th>
                <td mat-cell *matCellDef="let element;let i = index">
                  <button mat-icon-button *ngIf="this.state === 'add'">
                    <mat-icon (click)="openDialogexam(element.testing_center_uid,i)">edit</mat-icon>
                  </button>
                  <button mat-icon-button *ngIf="this.state === 'edit'">
                    <mat-icon (click)="openDialogexam(element.testing_center_uid,i)">edit</mat-icon>
                  </button>

                </td>
              </ng-container>
              <ng-container matColumnDef="7">
                <th mat-header-cell *matHeaderCellDef> </th>
                <td mat-cell *matCellDef="let element;let i = index">
                  <div>
                    <button mat-icon-button (click)="removeArray3(i)">
                      <mat-icon >close</mat-icon>
                    </button>
                  </div>
                </td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="displayedColumns3"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns3; 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="7">ไม่มีข้อมูล</td>
              </tr>
            </table>
          </mat-card-content>
        </mat-card>
      </div>
    </form>

    <div class="flex flex-row justify-center sm:justify-end">
<!--      <button class="search-button mr-1" (click)="save()" [disabled]="false">บันทึก</button>-->
      <div class="flex flex-row justify-center sm:justify-end">
        <button class="search-button mr-1 transform" (click)='moveToSelectedTab("กำหนดวิชาสอบ")'>ถัดไป</button>
        <button class="clear-button">ยกเลิก</button>
      </div>
    </div>
  </mat-tab>
    <mat-tab label="กำหนดเงื่อนไข">
      <div class="main">
        <div class="flex flex-row justify-between">
          <div class="flex flex-col sm:w-48% w-full">
            <label>ประเภทการนำเข้าข้อมูล</label>
            <mat-radio-group aria-label="Select an option" formControlName="registration_type" (ngModelChange)="changeRegisterType()">
              <mat-radio-button [value]="1" class="mr-1">นักศึกษา ม.ราม Upload File & API</mat-radio-button><br>
              <mat-radio-button [value]="2" class="mr-1">นักศึกษาโครงการ / บุคคลทั่วไป แบบ Upload File</mat-radio-button><br>
              <mat-radio-button [value]="3">บุคคลทั่วไป</mat-radio-button>
            </mat-radio-group>
          </div>
          <div class="flex flex-col sm:w-48% w-full">
            <div>
              ระบุเงื่อนไข
            </div>
            <div>
              <div>
                <mat-checkbox formControlName="is_upload_document">อัพโหลดเอกสารยืนยันตัวตน</mat-checkbox>
              </div>
              <div>
                <mat-checkbox  *ngIf="setexamform.get('registration_type').value === 1" formControlName="is_register_verify">ลงทะเบียนเพื่อยืนยันตันตน</mat-checkbox>
              </div>
              <div>
                <mat-checkbox *ngIf="setexamform.get('registration_type').value !== 1" formControlName="is_register">สมัครผ่านระบบลงทะเบียน</mat-checkbox>
              </div>
              <div>
                <mat-checkbox *ngIf="setexamform.get('registration_type').value !== 1" formControlName="is_counter">สมัครผ่านเคาเตอร์รับสมัคร</mat-checkbox>
              </div>

            </div>

          </div>
        </div>
      </div>
      <div class="flex flex-row justify-center sm:justify-end">
        <!--      <button class="search-button mr-1" (click)="save()" [disabled]="false">บันทึก</button>-->
        <button class="search-button mr-1" (click)="save()" [disabled]="setexamform.invalid">บันทึก</button>
        <button class="clear-button">ยกเลิก</button>
      </div>
    </mat-tab>
</mat-tab-group>
</form>

<pre *ngIf="!isHideForm">{{setexamform.getRawValue() | json}}</pre>
<!--<pre *ngIf="!isHideForm">{{setroomcenterForm.getRawValue() | json}}</pre>-->
<!--<label>selection</label>-->
<!--<pre *ngIf="!isHideForm">{{this.selection.selected | json}}</pre>-->
<!--<label>calendarForm</label>-->
<!--<pre *ngIf="!isHideForm">{{calendarForm.getRawValue() | json}}</pre>-->

