<!--<pre>-->
<!--  {{this.data.subjectlist | json}}-->
<!--</pre>-->
<form [formGroup]="form">
    <div class="p-3 space-y-4" *ngIf="this.data">
        <div
            formArrayName="testing_seat"
            *ngFor="let item of form['controls']['testing_seat']['controls'];let i = index"
        >
            <div [formGroupName]="i">
                <div class="flex flex-row justify-between">
                    <div class="flex flex-col w-48%">
                        <label>ชื่อแถว</label>
                        <input type="text" formControlName="row_name" disabled style="background: lightgray">
                    </div>
                    <div class="flex flex-col w-48%">
                        <label>จำนวนที่นั่งต่อแถว</label>
                        <input type="text" formControlName="no_of_seats" disabled style="background: lightgray">
                    </div>
                </div>
                <div class="flex flex-row justify-between">
                    <mat-radio-group aria-label="Select an option" formControlName="is_specify_subject"
                                     (ngModelChange)="settestingseat(i,$event)">
                        <div class="flex flex-col w-48%">
                            <mat-radio-button [value]="false">ไม่กำหนดวิชา</mat-radio-button>
                        </div>
                        <div class="flex flex-col w-48%">
                            <mat-radio-button [value]="true">กำหนดวิชา</mat-radio-button>
                        </div>
                    </mat-radio-group>
                </div>

                <div class="flex flex-row justify-between"
                     *ngIf="form.get('testing_seat')['controls'][i].get('is_specify_subject').value === true">
                    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"
                           formArrayName="testing_seat_subjects">

                        <ng-container matColumnDef="1">
                            <th mat-header-cell *matHeaderCellDef> รหัสวิชา</th>
                            <td mat-cell *matCellDef="let element; let row; let j = index" [formGroupName]="j">
                                <div>
                                    <input type="text" class="w-1/2" formControlName="subject_code" disabled>
                                </div>
                            </td>
                        </ng-container>

                        <ng-container matColumnDef="2">
                            <th mat-header-cell *matHeaderCellDef> ชื่อวิชา</th>
                            <td mat-cell *matCellDef="let element; let row; let j = index" [formGroupName]="j">
                                <div>
                                    <input type="text" style=" width: 200px !important;"
                                           formControlName="subject_name_th" disabled>
                                </div>
                            </td>
                        </ng-container>

                        <ng-container matColumnDef="3">
                            <th mat-header-cell *matHeaderCellDef> เลขที่นั่งเริ่มต้น
                                (เลขที่นั่งสูงสุด {{item.getRawValue() | checkmaxseat}})
                            </th>
                            <td mat-cell *matCellDef="let row; let j = index" [formGroupName]="j">
                                <div>
                                    <!--                  <input-->
                                    <!--                    OnlyNumber-->
                                    <!--                    type="number"-->
                                    <!--                    class="w-1/2"-->
                                    <!--                    formControlName="start_seat_no"-->
                                    <!--                    [readonly]="j === 0 ? false :-->
                                    <!--                    item.get('testing_seat_subjects')['controls'][j-1].get('start_seat_no').value == null &&-->
                                    <!--                    item.get('testing_seat_subjects')['controls'][j-1].get('end_seat_no').value == null"-->
                                    <!--                  >-->
                                    <input
                                        [min]="item.getRawValue() | checkmaxseat"
                                        OnlyNumber
                                        [placeholder]="(item.getRawValue() | checkmaxseat )!== null ? 'ต้องมากกว่า '+(item.getRawValue() | checkmaxseat) : 'กรุณาระบุที่นั่ง'"
                                        type="number"
                                        class="w-3/4"
                                        formControlName="start_seat_no"
                                        [readonly]="
                    j === 0 ?
                    (!item.get('testing_seat_subjects')['controls'][j].get('end_seat_no').value == null && item.getRawValue() | checkfield) :
                    item.get('testing_seat_subjects')['controls'][j].get('start_seat_no').value == null && item.get('testing_seat_subjects')['controls'][j].get('end_seat_no').value == null && item.getRawValue() | checkfield "
                                    >
                                </div>
                            </td>

                        </ng-container>

                        <ng-container matColumnDef="4">
                            <th mat-header-cell *matHeaderCellDef> เลขที่นั่งสิ้นสุด
                                (เลขที่นั่งสูงสุด {{item.getRawValue() | checkmaxseat}})
                            </th>
                            <td mat-cell *matCellDef="let row; let j = index" [formGroupName]="j">
                                <div *ngIf="j != 0">
                                    <!--                  end_seat_no :{{item.get('testing_seat_subjects')['controls'][j].get('start_seat_no').value}}-->
                                </div>
                                <div>
                                    <!--                  <input-->
                                    <!--                    [min]="item.get('testing_seat_subjects')['controls'][j].get('start_seat_no').value"-->
                                    <!--                    OnlyNumber-->
                                    <!--                    type="number"-->
                                    <!--                    class="w-1/2"-->
                                    <!--                    formControlName="end_seat_no"-->
                                    <!--                    [readonly]="j === 0 ? false :-->
                                    <!--                    item.get('testing_seat_subjects')['controls'][j-1].get('start_seat_no').value == null &&-->
                                    <!--                    item.get('testing_seat_subjects')['controls'][j-1].get('end_seat_no').value == null"-->
                                    <!--                  >-->
                                    <input
                                        [min]="item.getRawValue() | checkmaxseat"
                                        [placeholder]="(item.getRawValue() | checkmaxseat )!== null ? 'ต้องมากกว่า '+(item.getRawValue() | checkmaxseat) : 'กรุณาระบุที่นั่ง'"
                                        OnlyNumber
                                        type="number"
                                        class="w-3/4"
                                        formControlName="end_seat_no"
                                        (ngModelChange)="checkInput($event,i,j)" x
                                        [readonly]="
                    j === 0 ?
                    (item.get('testing_seat_subjects')['controls'][j].get('start_seat_no').value == null && item.get('testing_seat_subjects')['controls'][j].get('end_seat_no').value == null &&
                     item.getRawValue() | checkfield)
                    :
                    (item.get('testing_seat_subjects')['controls'][j].get('start_seat_no').value == null && item.get('testing_seat_subjects')['controls'][j].get('end_seat_no').value == null &&
                    (item.getRawValue() | checkfield))"
                                    >
                                </div>
                            </td>
                        </ng-container>

                        <ng-container matColumnDef="5" class="lg:max-w-min">
                            <th mat-header-cell *matHeaderCellDef>
                                หมายเหตุ <br>
                                <div class="font-bold" style="color:crimson"
                                     *ngIf="form.get('testing_seat')['controls'][i].get('testing_seat_subjects').getRawValue() | checkdupicateseat">
                                    ช่วงเลขที่นั่งซ้ำ
                                </div>
                            </th>
                            <td mat-cell *matCellDef="let element; let row; let j = index" [formGroupName]="j">
                                <!--                {{form.get('testing_seat')['controls'][i].get('testing_seat_subjects')['controls'][j].get('start_seat_no').value == 0 && form.get('testing_seat')['controls'][i].get('testing_seat_subjects')['controls'][j].get('end_seat_no').value == 0}}-->
                                <!--                {{form.get('testing_seat')['controls'][i].get('testing_seat_subjects')['controls'][j].getRawValue() | checklessmoreseat}}-->
                                <!--                <pre *ngIf="j != 0">-->
                                <!--                  แถว:{{j}}<br>-->
                                <!--                  เลขที่นั่งเริ่มต้น <br>-->
                                <!--                  &lt;!&ndash;                  end_seat_no :{{item.get('testing_seat_subjects')['controls'][j-1].get('end_seat_no').value}}<br>&ndash;&gt;-->
                                <!--                  IsNull_end_seat_no{{j}} :{{item.get('testing_seat_subjects')['controls'][j].get('end_seat_no').value == null}}<br>-->
                                <!--                  IsNull_start_seat_no{{j-1}} :{{item.get('testing_seat_subjects')['controls'][j-1].get('start_seat_no').value != null}}<br>-->
                                <!--                  checkfield :{{!(item.getRawValue() | checkfield)}}-->

                                <!--                  เลขที่นั่งสิ้นสุด <br>-->
                                <!--                  {{item.get('testing_seat_subjects')['controls'][j].get('start_seat_no').value}}-->
                                <!--                  {{item.getRawValue() | checkfield}}-->

                                <!--                </pre>-->
                                <div class="font-bold" style="color:crimson"
                                     *ngIf="item.getRawValue() | checkinrange: item.get('testing_seat_subjects')['controls'][j].get('start_seat_no').value : item.get('testing_seat_subjects')['controls'][j].get('end_seat_no').value">
                                    มีที่นั่งนี้อยู่แล้ว
                                </div>
                                <div class="font-bold" style="color:crimson"
                                     *ngIf="form.get('testing_seat')['controls'][i].get('testing_seat_subjects')['controls'][j].get('start_seat_no').value == 0 && form.get('testing_seat')['controls'][i].get('testing_seat_subjects')['controls'][j].get('end_seat_no').value == 0">
                                    ไม่เปิดแถวนั่งสอบ
                                </div>
                                <div
                                    *ngIf="form.get('testing_seat')['controls'][i].get('testing_seat_subjects')['controls'][j].getRawValue() | checklessmoreseat">
                                    <label class="font-bold"
                                           style="color:crimson;font-size: 13px">
                                        ที่นั่งเริ่มต้นมากกว่าสิ้นสุด
                                    </label>
                                </div>
                            </td>
                        </ng-container>
                        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                    </table>
                </div>

                <br>
                <label
                    *ngIf="(form.get('testing_seat')['controls'][i].get('testing_seat_subjects').getRawValue() | checkseat) -(form.get('testing_seat')['controls'][i].get('no_of_seats').value) <= 0 ">
                    จำนวนที่เหลือ {{(form.get('testing_seat')['controls'][i].get('no_of_seats').value) - (form.get('testing_seat')['controls'][i].get('testing_seat_subjects').getRawValue() | checkseat)}}
                </label>
                <label class="font-bold" style="color:crimson"
                       *ngIf="(form.get('testing_seat')['controls'][i].get('testing_seat_subjects').getRawValue() | checkseat) -(form.get('testing_seat')['controls'][i].get('no_of_seats').value) > 0 ">
                    จำนวนที่นั่งเกิน*
                </label>
            </div>
        </div>
        <div class="flex flex-row justify-center mt-3 w-full ">
            <!--      checklessmoreallseat: {{form.get('testing_seat').getRawValue() | checklessmoreallseat}}<br>-->
            <!--      cheakseatall: {{form.get('testing_seat').getRawValue() | cheakseatall}}<br>-->
            <!--      checkdupicateallseat: {{form.get('testing_seat').getRawValue() | checkdupicateallseat}}<br>-->
            <!--      checkinrangeallseat: {{form.get('testing_seat').getRawValue() | checkinrangeallseat}}<br>-->
            <button class="search-button mr-3"
                    [disabled]="
              (form.get('testing_seat').getRawValue() | checklessmoreallseat) ||
              (form.get('testing_seat').getRawValue() | checkdupicateallseat) ||
              (form.get('testing_seat').getRawValue() | cheakseatall)|| (form.invalid) ||
              (form.get('testing_seat').getRawValue() | checkinrangeallseat)"
                    (click)="save()" *ngIf="this.data.state != 'view'">บันทึก
            </button>
            <button class="clear-button" (click)="cancel()">ปิด</button>
        </div>
    </div>
</form>
<!--<pre>{{form.getRawValue() | json}}</pre>-->


