<h1 class="title">นำเข้ารายการชำระเงิน</h1>
<div class="main">
  <div>
    <input style="display: none;" type="file" (change)="onSelectFile($event)" #fileInput>
    <button class="add-button" (click)="fileInput.click()">อัพโหลดไฟล์</button>
  </div>
</div>
<br>
<div class="main">
  <h1 class="title">รายการนำเข้า</h1>
    <div class="overflow-x-auto">
      <table mat-table [dataSource]="data">
        <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.payer_name}} </td>
        </ng-container>
        <ng-container matColumnDef="3">
          <th mat-header-cell *matHeaderCellDef> ref1 </th>
          <td mat-cell *matCellDef="let x"> {{x.ref1}} </td>
        </ng-container>
        <ng-container matColumnDef="4">
          <th mat-header-cell *matHeaderCellDef> ref2 </th>
          <td mat-cell *matCellDef="let x"> {{x.ref2}} </td>
        </ng-container>
        <ng-container matColumnDef="5">
          <th mat-header-cell *matHeaderCellDef> จำนวนเงิน </th>
          <td mat-cell *matCellDef="let x"> {{x.transaction_amount}} </td>
        </ng-container>
        <ng-container matColumnDef="6">
          <th mat-header-cell *matHeaderCellDef> วันที่ชำระเงิน </th>
          <td mat-cell *matCellDef="let x"> {{x.transaction_date | thaidate}} </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 class="flex flex-row mt-2 w-full justify-end">
      <button class="search-button mr-1" (click)="save()">บันทึก</button>
      <button class="clear-button" (click)="clear()">ล้างตัวเลือก</button>
    </div>
</div>
