<div class="main">
  <h1 class="font-bold text-2xl">กำหนดวิชาสอบของรอบสอบ {{testingInfoData?.testing_information_name}}</h1>
  <div class="flex flex-row justify-between">

    <div class="flex flex-col w-48%" *ngIf="dataSource">
      <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>
      <br>
      <mat-card>
        <mat-card-content>
<!--          <mat-progress-bar *ngIf="dataSource.data.length == 0 && checkedDataSource.data.length == 0" mode="indeterminate"></mat-progress-bar>-->
          <mat-table #table [dataSource]="dataSource" class="mat-elevation-z0">
            <!-- Checkbox Column -->
            <ng-container matColumnDef="1">
              <mat-header-cell *matHeaderCellDef>
                <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()">
                </mat-checkbox>
              </mat-header-cell>
              <mat-cell *matCellDef="let row">
                <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                </mat-checkbox>
              </mat-cell>
            </ng-container>

            <!-- Position Column -->
            <ng-container matColumnDef="2">
              <mat-header-cell *matHeaderCellDef> รหัสวิชา </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.subject_code}} </mat-cell>
            </ng-container>
            <ng-container matColumnDef="3">
              <mat-header-cell *matHeaderCellDef> ชื่อวิชา </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.subject_name_th}} </mat-cell>
            </ng-container>

            <mat-header-row *matHeaderRowDef="column"></mat-header-row>
            <mat-row *matRowDef="let row; columns: column;" (click)="selection.toggle(row)">
            </mat-row>
<!--            <tr class="mat-row" *matNoDataRow>-->
<!--              <td class="mat-cell" colspan="4">ไม่มีพบข้อมูล จากค้นหาคำว่า "{{input.value}}"</td>-->
<!--            </tr>-->
          </mat-table>


          <mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]">
          </mat-paginator>
        </mat-card-content>
      </mat-card>
    </div>
    <div class="flex flex-col place-content-center" style="margin: 10px">
      <div class="flex flex-row justify-center">
        <button class="search-button" (click)="transferSelectedRows()">
          >>
        </button>
      </div>
      <br>
      <div class="flex flex-row justify-center">
        <button class="search-button" (click)="removeSelectedRows()">
          <<
        </button>
      </div>
    </div>
    <div class="flex flex-col w-48%">
      <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)="applyFilter2($event)" #input2>
          <i class="fas fa-user"></i>
        </div>
      </div>
      <br>
      <mat-card >
        <mat-card-content *ngIf="dataSource.length !== 0">
          <mat-progress-bar *ngIf="dataSource.data.length == 0 && checkedDataSource.data.length == 0" mode="indeterminate"></mat-progress-bar>

          <mat-table #table [dataSource]="checkedDataSource" class="mat-elevation-z0">
            <ng-container matColumnDef="1">
              <mat-header-cell *matHeaderCellDef>
                <mat-checkbox (change)="$event ? masterCheckedToggle() : null" [checked]="checkedSelection.hasValue() && isAllCheckedSelected()" [indeterminate]="checkedSelection.hasValue() && !isAllCheckedSelected()">
                </mat-checkbox>
              </mat-header-cell>
              <mat-cell *matCellDef="let row">
                <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? checkedSelection.toggle(row) : null" [checked]="checkedSelection.isSelected(row)">
                </mat-checkbox>
              </mat-cell>
            </ng-container>
            <ng-container matColumnDef="2">
              <mat-header-cell *matHeaderCellDef> รหัสวิชา </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.subject_code}} </mat-cell>
            </ng-container>
            <ng-container matColumnDef="3">
              <mat-header-cell *matHeaderCellDef> ชื่อวิชา </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.subject_name_th}} </mat-cell>
            </ng-container>
            <mat-header-row *matHeaderRowDef="column"></mat-header-row>
            <mat-row *matRowDef="let row; columns: column;" (click)="checkedSelection.toggle(row)">
            </mat-row>
<!--            <tr class="mat-row" *matNoDataRow>-->
<!--              <td class="mat-cell" colspan="4">ไม่มีพบข้อมูล จากค้นหาคำว่า "{{input2.value}}"</td>-->
<!--            </tr>-->
          </mat-table>
          <mat-paginator #checkedpaginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]">
          </mat-paginator>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
  <div class="flex flex-row justify-center sm:justify-center">
    <button class="search-button mr-1" (click)="saveSend()" [disabled]="testingInfoData?.is_open !== null">บันทึก</button>
    <button class="clear-button" (click)="back()">ยกเลิก</button>
  </div>
</div>



