<h1 class="title mt-2 mb-2">สรุปยอดประจำคาบ</h1>
<div id="section-to-print">
<div class="main">
  <div class="overflow-x-auto">
    <table mat-table [dataSource]="periodSummary">
      <ng-container matColumnDef="1">
        <th mat-header-cell *matHeaderCellDef> หมายเลขเครื่อง </th>
        <td mat-cell *matCellDef="let x"> {{x.counter_no}} </td>
      </ng-container>
      <ng-container matColumnDef="2">
        <th mat-header-cell *matHeaderCellDef> วันที่ทำรายการ </th>
        <td mat-cell *matCellDef="let x"> {{x.payment_date | thaidate}} </td>
      </ng-container>
      <ng-container matColumnDef="3">
        <th mat-header-cell *matHeaderCellDef> คาบ </th>
        <td mat-cell *matCellDef="let x"> {{x.period}} </td>
      </ng-container>
      <ng-container matColumnDef="4">
        <th mat-header-cell *matHeaderCellDef> เวลา </th>
        <td mat-cell *matCellDef="let x"> {{x.counter_open_time}} - {{x.counter_close_time}} </td>
      </ng-container>
      <ng-container matColumnDef="5">
        <th mat-header-cell *matHeaderCellDef> ยอดรับเงินประจำคาบ(บาท) </th>
        <td mat-cell *matCellDef="let x"> {{x.total_amount | number}} </td>
      </ng-container>
      <ng-container matColumnDef="6">
        <th mat-header-cell *matHeaderCellDef> จำนวนนักศึกษาที่รับ(คน) </th>
        <td mat-cell *matCellDef="let x"> {{x.total_student | number}} </td>
      </ng-container>
      <ng-container matColumnDef="7">
        <th mat-header-cell *matHeaderCellDef> จำนวนวิชา </th>
        <td mat-cell *matCellDef="let x"> {{x.number_of_subjects | number}} </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>
<br>
<div class="main">
  <h1 class="title flex justify-center">สรุปเงินที่ได้รับ</h1>

  <div class="flex flex-row justify-center">
    <div class="flex flex-col space-y-2">
      <div class="flex flex-row">
        <span class="mr-2 mt-2 w-33%">1000</span>
        <input [(ngModel)]="price1000" OnlyNumber>
        <span>&nbsp;</span>
        <input disabled [value]="1000 * price1000">
        <span class="ml-2 mt-2 w-33% opacity-0">1000</span>
      </div>

      <div class="flex flex-row">
        <span class="mr-2 mt-2 w-33%">500</span>
        <input [(ngModel)]="price500" OnlyNumber>
        <span>&nbsp;</span>
        <input disabled [value]="500 * price500">
        <span class="ml-2 mt-2 w-33% opacity-0">500</span>
      </div>

      <div class="flex flex-row">
        <span class="mr-2 mt-2 w-33%">100</span>
        <input [(ngModel)]="price100" OnlyNumber>
        <span>&nbsp;</span>
        <input disabled [value]="100 * price100">
        <span class="ml-2 mt-2 w-33% opacity-0">100</span>
      </div>

      <div class="flex flex-row">
        <span class="mr-2 mt-2 w-33%">50</span>
        <input [(ngModel)]="price50" OnlyNumber>
        <span>&nbsp;</span>
        <input disabled [value]="50 * price50">
        <span class="ml-2 mt-2 w-33% opacity-0">50</span>
      </div>

      <div class="flex flex-row">
        <span class="mr-2 mt-2 w-33%">20</span>
        <input [(ngModel)]="price20" OnlyNumber>
        <span>&nbsp;</span>
        <input disabled [value]="20 * price20">
        <span class="ml-2 mt-2 w-33% opacity-0">20</span>
      </div>

      <div class="flex flex-row">
        <span class="mr-2 mt-2 w-33%">10</span>
        <input [(ngModel)]="price10" OnlyNumber>
        <span>&nbsp;</span>
        <input disabled [value]="10 * price10">
        <span class="ml-2 mt-2 w-33% opacity-0">10</span>
      </div>

      <div class="flex flex-row">
        <span class="mr-2 mt-2 w-33%">5</span>
        <input [(ngModel)]="price5" OnlyNumber>
        <span>&nbsp;</span>
        <input disabled [value]="5 * price5">
        <span class="ml-2 mt-2 w-33% opacity-0">5</span>
      </div>

      <div class="flex flex-row">
        <span class="mr-2 mt-2 w-33%">2</span>
        <input [(ngModel)]="price2" OnlyNumber>
        <span>&nbsp;</span>
        <input disabled [value]="2 * price2">
        <span class="ml-2 mt-2 w-33% opacity-0">2</span>
      </div>

      <div class="flex flex-row">
        <span class="mr-2 mt-2 w-33%">1</span>
        <input [(ngModel)]="price1" OnlyNumber>
        <span>&nbsp;</span>
        <input disabled [value]="1 * price1">
        <span class="ml-2 mt-2 w-33% opacity-0">1</span>
      </div>

      <div class="flex flex-row">
        <span class="mr-2 mt-2 w-33%">0.50</span>
        <input [(ngModel)]="price050" OnlyNumber>
        <span>&nbsp;</span>
        <input disabled [value]="0.5 * price050">
        <span class="ml-2 mt-2 w-33% opacity-0">1</span>
      </div>

      <div class="flex flex-row">
        <span class="mr-2 mt-2 w-33%">0.25</span>
        <input [(ngModel)]="price025" OnlyNumber>
        <span>&nbsp;</span>
        <input disabled [value]="0.25 * price025">
        <span class="ml-2 mt-2 w-33% opacity-0">1</span>
      </div>

      <div class="flex flex-row">
        <span class="mr-2 mt-2 w-33%">รวมเป็นเงิน</span>
        <input disabled [value]="sum()">
        <span class="ml-2 mt-2 w-33% ">บาท</span>
      </div>

    </div>
  </div>
  <div class="flex flex-row justify-end mr-5 mb-5">
    <mat-icon *ngIf="sum() == sumPrice" class="text-5xl text-green-600">check_circle</mat-icon>
    <mat-icon *ngIf="sum() != sumPrice" class="text-5xl text-red-600">cancel</mat-icon>
  </div>
</div>
</div>
<div class="flex flex-row justify-end mt-2 w-full ">
  <button class="search-button" [disabled]="!periodSummary" (click)="printScreen()">&nbsp;Print Screen&nbsp;</button>
  &nbsp;
<!--  <button class="add-button" [disabled]="!periodSummary" (click)="reportEtest('101')">&nbsp;etest101&nbsp;</button>-->
<!--  &nbsp;-->
<!--  <button class="add-button" [disabled]="!periodSummary" (click)="reportEtest('102')">&nbsp;etest102&nbsp;</button>-->
<!--  &nbsp;-->
<!--  <button class="add-button" [disabled]="!periodSummary" (click)="print()">&nbsp;พิมพ์สรุปยอดประจำคาบ&nbsp;</button>-->
</div>


