<pre *ngIf="!isHideForm">
  {{calendarForm.getRawValue() | json}}
</pre>
<div class="main">
  <h1 class="font-bold text-2xl">กำหนดปฎิทินของรอบสอบ {{testingInfoData?.testing_information_name}}</h1>
  <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
                  [min]="calendarForm.get('start_datetime').value"
                  [disabled]="!(calendarForm.get('start_datetime').value !== null)"
                  matInput
                  [matDatepicker]="picker6"
                  formControlName="end_datetime"
                  (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" [disabled]="calendarForm.invalid" (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 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]="testingInfoData?.is_open !== null">บันทึก</button>
    <button class="clear-button" (click)="back()">ยกเลิก</button>
  </div>
</div>

<pre *ngIf="!isHideForm">
  {{setexamform.getRawValue() | json}}
</pre>
