@if (billResource.isLoading()) {
  <app-skeleton-loader type="card" [count]="1" />
} @else if (billResource.error()) {
  <app-error-state (retryAction)="billResource.reload()" />
} @else {
  <h2>Bill</h2>
  <table mat-table #table [dataSource]="dataSource()" class="mat-elevation-z8" [trackBy]="trackByRow">
    <ng-container matColumnDef="bill-no-title">
      <mat-header-cell *matHeaderCellDef class="deep-purple-200 bold">Bill / KOT number</mat-header-cell>
    </ng-container>
    <ng-container matColumnDef="bill-no-details">
      <mat-header-cell *matHeaderCellDef class="deep-purple-200 bold right-align"
        >{{ bs.bill().billId }} / K-{{ bs.bill().kotId }}</mat-header-cell
      >
    </ng-container>
    <ng-container matColumnDef="time-title">
      <mat-header-cell *matHeaderCellDef class="deep-purple-100 bold"
        >Time / Start Time / Last Edit Time
      </mat-header-cell>
    </ng-container>
    <ng-container matColumnDef="time-details">
      <mat-header-cell *matHeaderCellDef class="deep-purple-100 bold right-align"
        ><span [matTooltip]="bs.bill().dateTip">{{ bs.bill().date }}</span
        >&nbsp;/&nbsp;<span [matTooltip]="bs.bill().creationDateTip">{{ bs.bill().creationDate }}</span
        >&nbsp;/&nbsp;<span [matTooltip]="bs.bill().lastEditDateTip">{{
          bs.bill().lastEditDate
        }}</span></mat-header-cell
      >
    </ng-container>
    <ng-container matColumnDef="table-title">
      <mat-header-cell *matHeaderCellDef class="deep-purple-50 bold">Table / Pax / Customer</mat-header-cell>
    </ng-container>
    <ng-container matColumnDef="table-details">
      <mat-header-cell *matHeaderCellDef class="deep-purple-50 bold right-align"
        ><button>Table: {{ bs.bill().table.name }}</button> /
        <button type="button" mat-button (click)="choosePax()">{{ bs.bill().pax }} Pax</button> /
        <button type="button" mat-button (click)="chooseCustomer()">
          {{ bs.bill().customer?.name ?? 'Customer' }}
        </button></mat-header-cell
      >
    </ng-container>

    <!-- Checkbox Column -->
    <ng-container matColumnDef="selectKot">
      <mat-cell *matCellDef="let row">
        @if (row.id) {
          <mat-checkbox
            (change)="$event ? masterToggle(row) : null"
            [checked]="bs.selection.hasValue() && isAllSelected(row)"
            [indeterminate]="isAnySelected(row)"
          >
          </mat-checkbox>
        }
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef="selectInv">
      <mat-cell *matCellDef="let row">
        <mat-checkbox
          [disabled]="!row.id"
          (click)="$event.stopPropagation()"
          (change)="$event ? toggle(row) : null"
          [checked]="isSelected(row)"
        >
        </mat-checkbox>
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef="selectChild">
      <mat-cell *matCellDef="let row"> </mat-cell>
    </ng-container>
    <!-- Info Column -->
    <ng-container matColumnDef="infoKot">
      <mat-cell *matCellDef="let row">
        <span>{{ row.id ? `Kot: ${row.kot.code} / ${row.kot.date} (${row.kot.user.name})` : '== New Kot ==' }}</span>
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef="infoInv">
      <mat-cell *matCellDef="let row">
        <span>{{ `${row.inv.sku.name} @ ${row.inv.price} - ${discountPct(row.inv)}%` }}</span>
        <ul>
          @for (m of row.inv.modifiers; track m.id) {
            <li>{{ m.name }}</li>
          }
        </ul>
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef="infoChild">
      <mat-cell *matCellDef="let row" class="child-product">
        <span>{{ `${row.inv.sku.name} @ ${row.inv.price} - ${discountPct(row.inv)}%` }}</span>
        <ul>
          @for (m of row.inv.modifiers; track m.id) {
            <li>{{ m.name }}</li>
          }
        </ul>
      </mat-cell>
    </ng-container>
    <!-- Quantity Column -->
    <ng-container matColumnDef="kotActions">
      <mat-header-cell *matHeaderCellDef>Quantity</mat-header-cell>
      <mat-cell *matCellDef="let row" class="right-align">
        <button type="button" mat-icon-button (click)="moveKot(row)" [disabled]="!row.kot.id">
          <mat-icon class="del">open_in_new</mat-icon>
        </button>
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef="quantity">
      <mat-header-cell *matHeaderCellDef>Quantity</mat-header-cell>
      <mat-cell *matCellDef="let row" class="right-align">
        <button
          type="button"
          mat-icon-button
          class="small-icon-button"
          (click)="subtractOne(row)"
          [disabled]="!!row.kot.id"
        >
          <mat-icon>indeterminate_check_box</mat-icon>
        </button>
        <button
          type="button"
          mat-icon-button
          class="small-icon-button"
          (click)="quantity(row)"
          [disabled]="rowQuantityDisabled(row)"
        >
          {{ row.inv.quantity }}
        </button>
        <button type="button" mat-icon-button class="small-icon-button" (click)="addOne(row)" [disabled]="!!row.kot.id">
          <mat-icon>control_point</mat-icon>
        </button>
        <button
          type="button"
          mat-icon-button
          class="small-icon-button"
          (click)="modifier(row)"
          [disabled]="!!row.kot.id"
        >
          <mat-icon>assignment</mat-icon>
        </button>
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef="childQuantity">
      <mat-header-cell *matHeaderCellDef>Quantity</mat-header-cell>
      <mat-cell *matCellDef="let row" class="right-align">
        <span mat-icon-button class="small-icon-button"> </span>
        <button type="button" mat-icon-button class="small-icon-button" (click)="quantity(row)" [disabled]="true">
          {{ row.inv.quantity }}
        </button>
        <span mat-icon-button class="small-icon-button"> </span>
        <button
          type="button"
          mat-icon-button
          class="small-icon-button"
          (click)="modifier(row)"
          [disabled]="!!row.kot.id"
        >
          <mat-icon>assignment</mat-icon>
        </button>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="['bill-no-title', 'bill-no-details']"></mat-header-row>
    <mat-header-row *matHeaderRowDef="['time-title', 'time-details']"></mat-header-row>
    <mat-header-row *matHeaderRowDef="['table-title', 'table-details']"></mat-header-row>
    <mat-row
      *matRowDef="let row; columns: kotColumns; when: isKot"
      [class.old-kot]="!!row.id"
      [class.new-kot]="!row.id"
    ></mat-row>
    <mat-row
      *matRowDef="let row; columns: displayedColumns; when: !isKot"
      [class.is-printed]="!!row.kot.id && !row.inv.isHappyHour"
      [class.hh-new]="!row.kot.id && row.inv.isHappyHour"
      [class.hh-printed]="!!row.kot.id && row.inv.isHappyHour"
    ></mat-row>
    <mat-row
      *matRowDef="let row; columns: childColumns; when: isChild"
      class="child-row"
      [class.is-printed]="!!row.kot.id && !row.inv.isHappyHour"
      [class.hh-new]="!row.kot.id && row.inv.isHappyHour"
      [class.hh-printed]="!!row.kot.id && row.inv.isHappyHour"
    ></mat-row>
    <mat-footer-row *matFooterRowDef="['gross-title', 'gross-amount']"></mat-footer-row>
    <ng-container matColumnDef="gross-title">
      <mat-footer-cell *matFooterCellDef class="bold">Gross</mat-footer-cell>
    </ng-container>
    <ng-container matColumnDef="gross-amount">
      <mat-footer-cell *matFooterCellDef class="bold right-align">{{
        bs.grossAmount() | currency: 'INR'
      }}</mat-footer-cell>
    </ng-container>

    <mat-footer-row *matFooterRowDef="['hh-title', 'hh-amount']"></mat-footer-row>
    <ng-container matColumnDef="hh-title">
      <mat-footer-cell *matFooterCellDef class="bold">Happy Hour Discount</mat-footer-cell>
    </ng-container>
    <ng-container matColumnDef="hh-amount">
      <mat-footer-cell *matFooterCellDef class="bold right-align">{{
        bs.hhAmount() | currency: 'INR'
      }}</mat-footer-cell>
    </ng-container>

    <mat-footer-row *matFooterRowDef="['discount-title', 'discount-amount']"></mat-footer-row>
    <ng-container matColumnDef="discount-title">
      <mat-footer-cell *matFooterCellDef class="bold">Discount</mat-footer-cell>
    </ng-container>
    <ng-container matColumnDef="discount-amount">
      <mat-footer-cell *matFooterCellDef class="bold right-align">{{
        bs.discountAmount() | currency: 'INR'
      }}</mat-footer-cell>
    </ng-container>

    <mat-footer-row *matFooterRowDef="['tax-title', 'tax-amount']"></mat-footer-row>
    <ng-container matColumnDef="tax-title">
      <mat-footer-cell *matFooterCellDef class="bold">Tax</mat-footer-cell>
    </ng-container>
    <ng-container matColumnDef="tax-amount">
      <mat-footer-cell *matFooterCellDef class="bold right-align">{{
        bs.taxAmount() | currency: 'INR'
      }}</mat-footer-cell>
    </ng-container>

    <mat-footer-row *matFooterRowDef="['amount-title', 'amount-amount']"></mat-footer-row>
    <ng-container matColumnDef="amount-title">
      <mat-footer-cell *matFooterCellDef>Amount</mat-footer-cell>
    </ng-container>
    <ng-container matColumnDef="amount-amount">
      <mat-footer-cell *matFooterCellDef class="bold right-align">{{ bs.amount() | currency: 'INR' }}</mat-footer-cell>
    </ng-container>
  </table>

  <router-outlet></router-outlet>
}