<div class="main mb-4" *ngIf="summaryData != null">
    <!--  <div class="flex flex-col sm:flex-row justify-between">-->
    <!--    <div class="flex flex-row justify-start sm:w-48% w-full">-->
    <!--      <div class="flex flex-col w-33% mr-3">-->
    <!--        <label>ค่าธรรมเนียมทั้งหมด(บาท)</label>-->
    <!--        <input type="text" [value]="summaryData?.testing_fee" [disabled]="summaryData!= null">-->
    <!--      </div>-->

    <!--      <div class="flex flex-col w-33%">-->
    <!--        <label>Payment ID</label>-->
    <!--        <input type="text" [value]="summaryData?.payment_code" [disabled]="summaryData!= null">-->
    <!--      </div>-->
    <!--    </div>-->
    <!--  </div>-->
    <div class="overflow-x-auto" style="border-radius: 2px">
        <div class="card">
            <h1 class="title">รายการค่าธรรมเนียม</h1>
            <table mat-table [dataSource]="paymentList">
                <ng-container matColumnDef="1">
                    <th mat-header-cell *matHeaderCellDef> ลำดับ</th>
                    <td mat-cell *matCellDef="let x; let i = index"> {{i + 1}} </td>
                </ng-container>
                <ng-container matColumnDef="2">
                    <th mat-header-cell *matHeaderCellDef> รหัสวิชา - ชื่อวิชา</th>
                    <td mat-cell *matCellDef="let x"> {{x.subject_code}} - {{x.subject_name_th}}</td>
                </ng-container>
                <ng-container matColumnDef="22">
                    <th mat-header-cell *matHeaderCellDef> เวลาสอบ</th>
                    <td mat-cell *matCellDef="let x"> {{x.testing_datetime | thaidate}} ({{x.start_time}})</td>
                </ng-container>
                <ng-container matColumnDef="23">
                    <th mat-header-cell *matHeaderCellDef> คาบสอบ</th>
                    <td mat-cell *matCellDef="let x"> {{x.period_id}}</td>
                </ng-container>
                <ng-container matColumnDef="3">
                    <th mat-header-cell *matHeaderCellDef> ค่าธรรมเนียม</th>
                    <td mat-cell *matCellDef="let x"> {{x.fee}} </td>
                </ng-container>
                <ng-container matColumnDef="4">
                    <th mat-header-cell *matHeaderCellDef> จำนวน</th>
                    <td mat-cell *matCellDef="let x"> {{x.total_subject}} </td>
                </ng-container>
                <ng-container matColumnDef="5">
                    <th mat-header-cell *matHeaderCellDef> ค่าใช้จ่าย</th>
                    <td mat-cell *matCellDef="let x"> {{x.total_fee}} </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="column"></tr>
                <tr mat-row *matRowDef="let row; columns: column;"></tr>
            </table>
            <!--    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>-->
        </div>
    </div>
    <div class="flex flex-row justify-end">
        <button class="delete-button mr-1" style="min-width:153px !important;" (click)="cancelMoney()" *ngIf="!isMoney">
            ยกเลิกรายการ
        </button>
        <button class="add-button mr-1" style="min-width:153px !important;" (click)="register()"
                *ngIf="isPaymentBillChild">สมัครใหม่
        </button>
        <!--    <button class="payment-button mr-1" style="min-width:153px !important;"  *ngIf="!isMoney" (click)="recievemoney('credit')">บัตรเครดิต</button>-->
        <!--    <button class="payment-button mr-1" style="min-width:153px !important;" *ngIf="!isMoney" (click)="recievemoney('paypal')">Paypal</button>-->
        <button class="search-button mr-1" style="min-width:153px !important;" (click)="recievemoney('cash')"
                *ngIf="!isMoney">รับเงิน
        </button>
        <!--  <button class="add-button mr-1 " (click)="delete()">ลบข้อมูล</button>-->
        <button *ngIf="isPrint" class="payment-button" style="min-width:153px !important;" (click)="print()">
            พิมพ์ใบเสร็จ
        </button>
        <!--    <button class="clear-button" style="min-width:153px !important;" (click)="recievemoney()">Re-Print</button>-->
    </div>
</div>
<!--<pre>-->
<!--  {{this.summaryData | json}}-->
<!--</pre>-->


