<h1 class="title">รายงานรับเงินออนไลน์</h1>
<br>
<div class="main">
  <div class="flex justify-between">
    <h1 class="title">รายการนำเข้า</h1>
  </div>
  <div class="overflow-x-auto">
    <table mat-table [dataSource]="dailySummaryTable">
      <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> เลขที่ใบเสร็จ2c2p </th>
        <td mat-cell *matCellDef="let x"> {{x.invoiceNo2C2P}} </td>
      </ng-container>
      <ng-container matColumnDef="3">
        <th mat-header-cell *matHeaderCellDef>หมายเลขบัตร </th>
        <td mat-cell *matCellDef="let x"> {{x.creditCardDetails.cardNumber}} </td>
      </ng-container>
      <ng-container matColumnDef="4">
        <th mat-header-cell *matHeaderCellDef> จำนวนเงิน </th>
        <td mat-cell *matCellDef="let x"> {{x.transactionAmount.amount}} </td>
      </ng-container>
      <ng-container matColumnDef="5">
        <th mat-header-cell *matHeaderCellDef> Approval Code </th>
        <td mat-cell *matCellDef="let x"> {{x.approvalCode}} </td>
      </ng-container>
      <ng-container matColumnDef="6">
        <th mat-header-cell *matHeaderCellDef> สถานะการชำระเงิน </th>
        <td mat-cell *matCellDef="let x"> {{x.pspResponse.responseDescription}} </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>
