<div class="flex justify-center">
  <h1 class="font-bold">การใช้ห้อง</h1>
</div>
<hr>
<br>
<div class="flex justify-between flex-row">
  <div class="flex flex-col w-33%">
    <label>วันที่เริ่มต้น</label>
    <mat-form-field>
      <input matInput [matDatepicker]="picker" [max]="this.query.to_date" [(ngModel)]="query.from_date">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  </div>

  <div class="flex flex-col w-33%">
    <label>วันที่สิ้นสุด</label>
    <mat-form-field>
      <input matInput [matDatepicker]="picker1" [disabled]="!this.query.from_date" [min]="this.query.from_date" [(ngModel)]="query.to_date">
      <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
      <mat-datepicker #picker1></mat-datepicker>
    </mat-form-field>
  </div>

  <div class="flex items-center justify-center mt-2">
    <button class="search-button" (click)="search()">ค้นหา</button>
  </div>
</div>
<br>
<div>
  <table mat-table [dataSource]="availableSeatList">
    <ng-container matColumnDef="1">
      <th mat-header-cell *matHeaderCellDef> วันที่ </th>
      <td mat-cell *matCellDef="let x"> {{x.date | thaidate}} </td>
    </ng-container>

    <ng-container matColumnDef="2">
      <th mat-header-cell *matHeaderCellDef> ที่นั่งทั้งหมด </th>
      <td mat-cell *matCellDef="let x"> {{x.total_seat}} </td>
    </ng-container>

    <ng-container matColumnDef="3">
      <th mat-header-cell *matHeaderCellDef> ใช้แล้ว </th>
      <td mat-cell *matCellDef="let x"> {{x.total_seat_use}} </td>
    </ng-container>

    <ng-container matColumnDef="4">
      <th mat-header-cell *matHeaderCellDef> คงเหลือ </th>
      <td mat-cell *matCellDef="let x"> {{x.total_seat_left}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="['1','2','3','4']"></tr>
    <tr mat-row *matRowDef="let row; columns: ['1','2','3','4']; let i = index"></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
