<div class="main">
  <div class="card">
    <div class="flex flex-row justify-between">
      <h1 class="title">แสดงผลรายการค้นหา</h1>
    </div>
    <div class="overflow-x-auto">
      <table mat-table [dataSource]="userPaymentdata">
        <ng-container matColumnDef="1">
          <th mat-header-cell *matHeaderCellDef> รหัสนักศึกษา </th>
          <td mat-cell *matCellDef="let x"> {{x.student_code}} </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.examinee_full_name}} </td>
        </ng-container>
        <ng-container matColumnDef="4">
          <th mat-header-cell *matHeaderCellDef> ประเภทผู้สอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.candidate_type_uid}} </td>
        </ng-container>
        <ng-container matColumnDef="5">
          <th mat-header-cell *matHeaderCellDef> รอบสอบ </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_information_uid}} </td>
        </ng-container>
        <ng-container matColumnDef="6">
          <th mat-header-cell *matHeaderCellDef> การชำระเงิน </th>
          <td mat-cell *matCellDef="let x"> {{x.is_cancel}} </td>
        </ng-container>
        <ng-container matColumnDef="7">
          <th mat-header-cell *matHeaderCellDef> ยอดค่าใช้จ่าย </th>
          <td mat-cell *matCellDef="let x"> {{x.testing_fee}} </td>
        </ng-container>
        <ng-container matColumnDef="0">
          <th mat-header-cell *matHeaderCellDef> Action </th>
          <td mat-cell *matCellDef="let x">
            <button mat-raised-button class="payment-button mr-1" style="margin-right: 10px" (click)="recieve(x.testing_register_uid)">
              <mat-icon aria-hidden="false" aria-label="Example home icon">payment</mat-icon> รับเงิน
            </button>
            <button mat-raised-button class="add-button mr-1" (click)="onClickPublisher(x)">
              <mat-icon aria-hidden="false" aria-label="Example home 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 [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
