<h1 class="title">ยืนยันรายการชำระเงิน</h1>
<div class="main">
  <div class="flex justify-items-center">
    <div class="flex flex-col w-33%">
      <label>วันที่ชำระเงิน</label>
      <mat-form-field>
        <input matInput [matDatepicker]="picker" [(ngModel)]="query.date" (ngModelChange)="onSearch($event)">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </div>
  </div>
</div>
<br>
<div class="main">
  <div class="flex flex-row justify-between">
    <h1 class="title">รายการนำเข้า</h1>
    <button class="delete-button" [disabled]="selection.selected.length == 0" (click)="deletePayment()">ลบรายการ</button>
  </div>

    <div class="overflow-x-auto">
      <table mat-table [dataSource]="confirmList">
        <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>
        <ng-container matColumnDef="7">
          <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox (change)="$event ? masterToggle() : null"
                          [checked]="selection.hasValue() && isAllSelected()"
                          [indeterminate]="selection.hasValue() && !isAllSelected()"
                          [aria-label]="checkboxLabel()">
            </mat-checkbox>
          </th>
          <td mat-cell *matCellDef="let row">
            <mat-checkbox (click)="$event.stopPropagation()"
                          (change)="$event ? selection.toggle(row) : null"
                          [checked]="selection.isSelected(row)"
                          [aria-label]="checkboxLabel(row)">
            </mat-checkbox>
          </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()" [disabled]="selection.selected.length == 0">&nbsp;ยืนยันการออกใบเสร็จ&nbsp;</button>
      <button class="clear-button" (click)="clear()">ล้างตัวเลือก</button>
    </div>
</div>

<!-- <pre>{{selection.selected | json}}</pre> -->
<!-- <pre >{{query | json}}</pre> -->
