<form [formGroup]="form" (keydown.enter)="$event.preventDefault()">
    <h1 class="title">สร้างข้อมูลค่าคุมสอบ</h1>
    <div class="main">
        <div class="flex flex-row justify-between w-full">

            <div class="flex flex-col sm:w-48% w-full">
                <label>ปีการศึกษา</label>
                <select formControlName="academic_year_uid" >
                    <option *ngFor="let x of academicYear$ | async" [ngValue]="x.academic_year_uid" >
                        {{x.academic_year_name_th}}
                    </option>
                </select>
            </div>

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

        <div class="flex flex-row justify-between w-full">

            <div class="flex flex-col sm:w-48% w-full">
                <label>รอบสอบ</label>
                <select formControlName="testing_information_uid" >
                    <option *ngFor="let x of testingInformationList$ | async" [ngValue]="x.testing_information_uid" >
                        {{x.testing_information_name}}
                    </option>
                </select>
            </div>

            <div class="flex flex-col sm:w-48% w-full">
                <label>ศูนย์สอบ</label>
                <select formControlName="branch_uid" >
                    <option *ngFor="let x of branch$ | async" [ngValue]="x.branch_uid" >
                        {{x.branch_name_th}}
                    </option>
                </select>
            </div>

        </div>

        <div class="flex flex-row justify-between w-full">
            <div class="flex flex-col sm:w-48% w-full">
                <label>วันที่เริ่มต้น</label>
                <mat-form-field>
                    <input matInput [matDatepicker]="picker" formControlName="from_date" (dateChange)="addDate()" [max]="this.form.get('to_date').value">
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>
            </div>

            <div class="flex flex-col sm:w-48% w-full">
                <label>วันที่สิ้นสุด</label>
                <mat-form-field>
                    <input matInput [matDatepicker]="picker1" formControlName="to_date" (dateChange)="addDate()" [min]="this.form.get('from_date').value">
                    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                    <mat-datepicker #picker1></mat-datepicker>
                </mat-form-field>
            </div>
        </div>
    </div>
    <mat-tab-group animationDuration="0ms" [disableRipple]="true">
    <ng-container formArrayName="invigilator_cost_groups">
        <ng-container *ngFor="let x of form['controls']['invigilator_cost_groups']['controls']; let i = index" [formGroupName]="i">
            <mat-tab>
                <ng-template mat-tab-label>
                    <div class="tab">
                        <input class="inputname" formControlName="invigilator_group_name">
                        <!-- <div class="edit">
                            <mat-icon class="text-sm mt-1" (click)="removeTab(i)">
                                close
                            </mat-icon>
                        </div> -->
                    </div>
                </ng-template>
                <ng-container formArrayName="invigilator_cost_details">
                    <ng-container *ngFor="let a of x['controls']['invigilator_cost_details']['controls']; let index = index;" [formGroupName]="index">
                        <invigilate-finance-form-array
                            [user]="user"
                            [form]="a"
                            (remove)="removeNameArr(index,x)">
                        </invigilate-finance-form-array>
                    </ng-container>
                </ng-container>
                <div class="main">
                    <button class="add-button" (click)="add(x)">เพิ่มรายชื่อ</button>
                </div>
            </mat-tab>
        </ng-container>
    </ng-container>
    <!-- <mat-tab disabled>
        <ng-template mat-tab-label>
            <div class="addtab" (click)="addTab()">
                <span>+</span>
            </div>
        </ng-template>
    </mat-tab> -->
</mat-tab-group>
<div class="flex flex-row justify-center sm:justify-end mt-2">
    <button class="search-button mr-1" (click)="export()">Export Excel</button>
    <button class="add-button mr-1 " [disabled]="form.invalid" (click)="save()">บันทึก</button>
    <button class="clear-button" (click)="cancel()">ยกเลิก</button>
</div>
</form>


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