<form [formGroup]="form">
    <div class="main">
        <div class="flex flex-row min-w-max justify-between">
            <div class="flex flex-row">
                <div class="flex flex-col w-52 mr-2">
                    <label>username</label>
                    <input #login type="text" [matAutocomplete]="auto" formControlName="invigilator_code">
                    <mat-autocomplete #auto="matAutocomplete">
                        <mat-option *ngFor="let x of user | searchAuto : login.value : 'login_name'" [value]="x.login_name" (click)="setDisplayName(x)">
                            {{x.login_name}}
                        </mat-option>
                    </mat-autocomplete>
                </div>
                <div class="flex flex-col w-52 mr-2">
                    <label>ชื่อ-นามสกุล</label>
                    <input type="text" formControlName="invigilator_name">
                </div>
                <div class="flex flex-col w-32 mr-1">
                    <label>คาบละ (บาท)</label>
                    <input type="text" formControlName="amount" OnlyNumber (input)="calculateTotal()">
                </div>
                <div class="flex flex-col w-32 mr-1">
                    <label>ค่าใช้จ่ายอื่น (บาท)</label>
                    <input type="text" formControlName="other_cost" OnlyNumber (input)="calculateTotal()">
                </div>
                <div class="flex flex-col w-32 mr-1">
                    <label>รวม (บาท)</label>
                    <input type="text" formControlName="total_amount" OnlyNumber disabled>
                </div>
            </div>

            <div class="flex mt-2">
                <ng-container formArrayName="invigilator_cost_date_details">
                    <ng-container *ngFor="let x of form['controls']['invigilator_cost_date_details']['controls']; let i = index;" [formGroupName]="i">
                            <div class="flex flex-col items-center mr-1 w-30">
                                <span>&nbsp;{{x.value.invigilator_date | thaidate}}&nbsp;</span>
                                <mat-checkbox formControlName="is_check"></mat-checkbox>
                            </div>
                    </ng-container>
                </ng-container>
            </div>

            <div class="flex flex-row mt-0 items-end justify-end">
                <button class="search-button mr-1" (click)="onRemove()">ลบ</button>
            </div>
        </div>
    </div>
</form>
