<br>
<div class="card">
  <div class="flex flex-row justify-between">
    <h1 class="title">แสดงผลรายการค้นหา</h1>
  </div>
  <div class="overflow-x-auto">
    <table mat-table [dataSource]="paymentData">
      <ng-container matColumnDef="0">
        <th mat-header-cell *matHeaderCellDef> เลขที่ใบเสร็จ </th>
        <td mat-cell *matCellDef="let x"> {{x.payment_code}} </td>
      </ng-container>
      <ng-container matColumnDef="1">
        <th mat-header-cell *matHeaderCellDef> วันที่ออกใบเสร็จ </th>
        <td mat-cell *matCellDef="let x">  {{x.payment_datetime | thaidate }} {{x.payment_datetime | date: 'hh:mm:ss' }} </td>
      </ng-container>
      <ng-container matColumnDef="2">
        <th mat-header-cell *matHeaderCellDef> Counter </th>
        <td mat-cell *matCellDef="let x"> {{x.counter_no}} </td>
      </ng-container>
      <ng-container matColumnDef="3">
        <th mat-header-cell *matHeaderCellDef> สถานะ </th>
        <td mat-cell *matCellDef="let x">
          <div *ngIf="x.is_cancel">
            ยกเลิก
          </div>
          <div *ngIf="!x.is_cancel">
            ใช้งาน
          </div>
        </td>
      </ng-container>
      <ng-container matColumnDef="4">
        <th mat-header-cell *matHeaderCellDef> จำนวนเงิน(บาท) </th>
        <td mat-cell *matCellDef="let x"> {{x.total_amount}} </td>
      </ng-container>

      <ng-container matColumnDef="5">
        <th mat-header-cell *matHeaderCellDef> เครื่องมือ  </th>
        <td mat-cell *matCellDef="let x">
          <button mat-raised-button class="add-button mr-1" style="margin-right: 10px" (click)="print(x.testing_register_uid,'pdf')">
            <mat-icon>print</mat-icon> Reprint
          </button>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="column"></tr>
      <tr mat-row *matRowDef="let row; columns: column;"></tr>
    </table>
    <mat-paginator
      [pageSize]="5"
      [pageSizeOptions]="[5, 10, 25 , 100]" showFirstLastButtons></mat-paginator>
  </div>
</div>
