<h1 class="title">รายงานรับเงินออนไลน์</h1>
<div class="main">
    <div class="flex justify-items-center gap-3">
        <div class="flex flex-col w-33%">
            <label>วันที่ชำระเงิน</label>
            <mat-form-field>
                <input matInput [matDatepicker]="picker" [(ngModel)]="query.date" >
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
        </div>
        <div class="flex flex-col w-33%">
            <label>ช่องทางชำระเงิน</label>
            <mat-form-field>
                <mat-select multiple [(ngModel)]="paymentselect">
                    <mat-option value="CASH">CASH</mat-option>
                    <mat-option value="PAYIN">PAYIN</mat-option>
                    <mat-option value="QRCODE">QRCODE</mat-option>
                    <mat-option value="CREDIT-CARD">CREDIT-CARD</mat-option>
                </mat-select>
            </mat-form-field>
        </div>
        <div class="flex flex-col justify-center" style="padding-top: 15px;">
            <button class="search-button " (click)="onSearch()" [disabled]="!(query.date != null && paymentselect.length != 0)">ค้นหา</button>
        </div>
    </div>
</div>
<br>
<div class="main">
    <div class="flex justify-between">
        <h1 class="title">รายการนำเข้า</h1>
        <h1 class="title">ยอดรวม {{total()}} บาท</h1>
    </div>
    <div class="overflow-x-auto">
        <table mat-table [dataSource]="paymentList">
            <ng-container matColumnDef="1">
                <th mat-header-cell *matHeaderCellDef> ลำดับ</th>
                <td mat-cell *matCellDef="let x; let i = index"> {{this.getIndex(i)}} </td>
            </ng-container>
            <ng-container matColumnDef="2">
                <th mat-header-cell *matHeaderCellDef> รหัสผู้เข้าสอบ</th>
                <td mat-cell *matCellDef="let x"> {{x.student_code}} </td>
            </ng-container>
            <ng-container matColumnDef="3">
                <th mat-header-cell *matHeaderCellDef> ชื่อ-นามสกุล</th>
                <td mat-cell *matCellDef="let x"> {{x.full_name}} </td>
            </ng-container>
            <ng-container matColumnDef="4">
                <th mat-header-cell *matHeaderCellDef> ref1</th>
                <td mat-cell *matCellDef="let x"> {{x.ref1}} </td>
            </ng-container>
            <ng-container matColumnDef="5">
                <th mat-header-cell *matHeaderCellDef> เลขที่ใบเสร็จ</th>
                <td mat-cell *matCellDef="let x"> {{x.payment_code}} </td>
            </ng-container>
            <ng-container matColumnDef="6">
                <th mat-header-cell *matHeaderCellDef> จำนวนเงิน</th>
                <td mat-cell *matCellDef="let x"> {{x.testing_fee}} </td>
            </ng-container>
            <ng-container matColumnDef="7">
                <th mat-header-cell *matHeaderCellDef> ช่องทางชำระเงิน</th>
                <td mat-cell *matCellDef="let x"> {{x.payment_method}} </td>
            </ng-container>
            <ng-container matColumnDef="8">
                <th mat-header-cell *matHeaderCellDef> วันที่ชำระเงิน</th>
                <td mat-cell *matCellDef="let x"> {{x.payment_datetime | thaidate}} </td>
            </ng-container>
            <ng-container matColumnDef="9">
                <th mat-header-cell *matHeaderCellDef> วันที่ลงทะเบียน</th>
                <td mat-cell *matCellDef="let x"> {{x.created_datetime | thaidate}} </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="['1','2','3','4','5','6','7','8','9']"></tr>
            <tr mat-row *matRowDef="let row; columns: ['1','2','3','4','5','6','7','8','9'];"></tr>
        </table>
        <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>
    <div class="flex flex-row justify-end mt-2 w-full ">
        <button class="add-button" [disabled]="paymentList.data.length == 0" (click)="reportEtest('101')">&nbsp;etest101&nbsp;</button>
        &nbsp;
        <button class="add-button" [disabled]="paymentList.data.length == 0" (click)="reportEtest('102')">&nbsp;etest102&nbsp;</button>
        &nbsp;
        <button class="add-button" [disabled]="paymentList.data.length == 0" (click)="reportEtest('103')">&nbsp;etest103&nbsp;</button>
    </div>

</div>

<!-- <pre>{{selection.selected | json}}</pre> -->
<!-- <pre >{{query | json}}</pre> -->
