@if (infoResource.isLoading()) {
  <app-skeleton-loader type="card" [count]="1" />
} @else if (infoResource.error()) {
  <app-error-state (retryAction)="infoResource.reload()" />
} @else {
  <h2 class="row-container space-between">
    <span>Product Sale Report</span>
    <span class="spacer"></span>
    <button type="button" mat-icon-button (click)="exportCsv()">
      <mat-icon>save_alt</mat-icon>
    </button>
    <button type="button" mat-icon-button (click)="print()">
      <mat-icon>print</mat-icon>
    </button>
  </h2>

  <form class="flex-col" [formRoot]="form">
    <div class="row-container sm:max-lg:flex-col">
      <mat-form-field class="flex-auto basis-1-3">
        <mat-label>Start Date</mat-label>
        <input
          matInput
          [matDatepicker]="startDate"
          (focus)="startDate.open()"
          [formField]="form.startDate"
          autocomplete="off"
        />
        <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
        <mat-datepicker #startDate></mat-datepicker>
      </mat-form-field>
      <mat-form-field class="flex-auto basis-1-3">
        <mat-label>Finish Date</mat-label>
        <input
          matInput
          [matDatepicker]="finishDate"
          (focus)="finishDate.open()"
          [formField]="form.finishDate"
          autocomplete="off"
        />
        <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
        <mat-datepicker #finishDate></mat-datepicker>
      </mat-form-field>
      <mat-form-field class="flex-auto basis-1-6">
        <mat-label>Section</mat-label>
        <mat-select [formField]="form.section">
          <mat-option [value]="null">-- All --</mat-option>
          @for (p of sections(); track p.id) {
            <mat-option [value]="p.id">
              {{ p.name }}
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
      <button type="button" mat-raised-button class="flex-auto basis-1-6" color="primary" (click)="show()">Show</button>
    </div>
  </form>
  <mat-table #table [dataSource]="dataSource()" aria-label="Elements">
    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
      <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
    </ng-container>

    <!-- Unbilled Column -->
    <ng-container matColumnDef="unbilled">
      <mat-header-cell *matHeaderCellDef class="right">Unbilled</mat-header-cell>
      <mat-cell *matCellDef="let row" class="right">{{ row.kot | number: '1.2-2' }}</mat-cell>
    </ng-container>

    <!-- Sale Column -->
    <ng-container matColumnDef="sale">
      <mat-header-cell *matHeaderCellDef class="right">Sale</mat-header-cell>
      <mat-cell *matCellDef="let row" class="right">{{ row.regularBill | number: '1.2-2' }}</mat-cell>
    </ng-container>

    <!-- No Charge Column -->
    <ng-container matColumnDef="noCharge">
      <mat-header-cell *matHeaderCellDef class="right">No Charge</mat-header-cell>
      <mat-cell *matCellDef="let row" class="right">{{ row.noCharge | number: '1.2-2' }}</mat-cell>
    </ng-container>

    <!-- Staff Column -->
    <ng-container matColumnDef="staff">
      <mat-header-cell *matHeaderCellDef class="right">Staff</mat-header-cell>
      <mat-cell *matCellDef="let row" class="right">{{ row.staff | number: '1.2-2' }}</mat-cell>
    </ng-container>

    <!-- Cancelled Column -->
    <ng-container matColumnDef="cancel">
      <mat-header-cell *matHeaderCellDef class="right">Cancelled</mat-header-cell>
      <mat-cell *matCellDef="let row" class="right">{{ row.cancel | number: '1.2-2' }}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
  </mat-table>
}