<h1 class="title mb-4 text-center">เลือกศูนย์สอบที่ต้องการปล่อยข้อสอบ</h1>
<div *ngFor="let item of Roomdata" class="mb-2">
    <div [ngClass]="RoomChoose == item.period_id ? 'cardChoose' : 'card'" (click)="choosePeriod(item.testing_center_uid,item.period_id)">
        <div class="flex flex-col sm:flex-row">
        <div class="flex flex-row justify-between w-full">
            <div class="flex flex-col w-45% mr-3" >
    <!--          <label><b>ศูนย์สอบ</b> : {{item.branch_name_th}} <br><b>สนามสอบ</b> : {{item.branch_name_th}} 	<br><b>ห้องสอบ</b> : {{item.testing_room_name_th}}</label>-->
            <label><b>Section</b> : {{item.period_id}} <br><b>ช่วงเวลา</b> : {{item.start_time}}</label>
            </div>
            <div class="flex flex-col w-45% items-end">
            <label><b style="color: crimson" *ngIf="item.testing_release_exam_dates != 0">ปล่อยข้อสอบแล้ว</b></label>
            <mat-form-field *ngIf="RoomChoose == item.period_id" style="min-width:160px !important">
                <input matInput [matDatepicker]="picker" [min]="today" [(ngModel)]="Roomsend.date">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
    <!--          <span class="material-icons" *ngIf="RoomChoose == item.period_id">-->
    <!--            check_circle-->
    <!--            </span>-->
            </div>
        </div>
        </div>
    </div>
</div>
<div class="flex flex-row justify-end mt-4">
    <button class="confirm-button mr-1" *ngIf="RoomChoose !== ''" (click)="confirm()" style="min-width:153px !important" [disabled]="this.Roomsend.date === null">อนุมัติปล่อยข้อสอบ</button>
    <button class="clear-button" (click)="cancel()" style="min-width:153px !important;">ยกเลิกรายการ</button>
</div>
