<h1 class="title mt-2 mb-2">รายงานรับเงิน</h1>
<div class="main">
    <div class="overflow-x-auto">
        <table mat-table [dataSource]="dailySummary">
            <ng-container matColumnDef="0">
                <th mat-header-cell *matHeaderCellDef>
                    <mat-checkbox (change)="$event ? masterToggle() : null"
                                  [checked]="selection.hasValue() && isAllSelected()"
                                  [indeterminate]="selection.hasValue() && !isAllSelected()"
                                  [aria-label]="checkboxLabel()">
                    </mat-checkbox>
                </th>
                <td mat-cell *matCellDef="let row">
                    <mat-checkbox (click)="$event.stopPropagation()"
                                  (change)="$event ? selection.toggle(row) : null"
                                  [checked]="selection.isSelected(row)"
                                  [aria-label]="checkboxLabel(row)">
                    </mat-checkbox>
                </td>
            </ng-container>
            <ng-container matColumnDef="1">
                <th mat-header-cell *matHeaderCellDef> หมายเลขเครื่อง</th>
                <td mat-cell *matCellDef="let x"> {{x.counter_no}} </td>
            </ng-container>
            <ng-container matColumnDef="2">
                <th mat-header-cell *matHeaderCellDef> วันที่ทำรายการ</th>
                <td mat-cell *matCellDef="let x"> {{x.payment_date | thaidate}} </td>
            </ng-container>
            <ng-container matColumnDef="3">
                <th mat-header-cell *matHeaderCellDef> คาบ</th>
                <td mat-cell *matCellDef="let x"> {{x.period}} </td>
            </ng-container>
            <ng-container matColumnDef="4">
                <th mat-header-cell *matHeaderCellDef> เวลา</th>
                <td mat-cell *matCellDef="let x"> {{x.counter_open_time}} - {{x.counter_close_time}} </td>
            </ng-container>
            <ng-container matColumnDef="5">
                <th mat-header-cell *matHeaderCellDef> ยอดรับเงินประจำคาบ(บาท)</th>
                <td mat-cell *matCellDef="let x"> {{x.total_amount | number}} </td>
            </ng-container>
            <ng-container matColumnDef="6">
                <th mat-header-cell *matHeaderCellDef> จำนวนนักศึกษาที่รับ(คน)</th>
                <td mat-cell *matCellDef="let x"> {{x.total_student | number}} </td>
            </ng-container>
            <ng-container matColumnDef="7">
                <th mat-header-cell *matHeaderCellDef> จำนวนวิชา</th>
                <td mat-cell *matCellDef="let x"> {{x.number_of_subjects | number}} </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="column"></tr>
            <tr mat-row *matRowDef="let row; columns: column;"></tr>
        </table>
    </div>
    <div class="mt-2 flex flex-col lg:flex-row justify-between">
        <div class="rounded-md w-full lg:w-33% h-24 bg-white flex flex-col justify-center items-center">
            <span class="title">ยอดเงินรวม</span>
            <span class="title text-green-600">{{totalAmount() | number}}</span>
        </div>

        <div class="rounded-md mt-1 lg:mt-0 w-full lg:w-33% h-24 bg-white flex flex-col justify-center items-center">
            <span class="title">จำนวนนักศึกษาลงทะเบียน</span>
            <span class="title text-green-600">{{totalStudent() | number}}</span>
        </div>

        <div class="rounded-md mt-1 lg:mt-0 w-full lg:w-33% h-24 bg-white flex flex-col justify-center items-center">
            <span class="title">จำนวนวิชาที่ลงทะเบียน</span>
            <span class="title text-green-600">{{totalSubject() | number}}</span>
        </div>
    </div>

    <div class="flex flex-row justify-center lg:justify-end mt-2 w-full ">
        <button class="add-button" [disabled]="!dailySummary" (click)="reportEtest101()">
            <div class="justify-center flex items-center flex-row">
                <mat-icon>print</mat-icon>
                <span>&nbsp;etest101&nbsp;</span>
            </div>
        </button>
        <button class="add-button ml-2" [disabled]="!dailySummary" (click)="reportEtest102()">
            <div class="justify-center flex items-center flex-row">
                <mat-icon>print</mat-icon>
                <span>&nbsp;etest102&nbsp;</span>
            </div>
        </button>
        <button class="add-button ml-2" [disabled]="!dailySummary" (click)="reportEtest103()">
            <div class="justify-center flex items-center flex-row">
                <mat-icon>print</mat-icon>
                <span>&nbsp;etest103&nbsp;</span>
            </div>
        </button>
    </div>

</div>

<!-- {{selection.selected | json}} -->
