@if (itemResource.isLoading()) {
  <app-skeleton-loader type="card" [count]="1" />
} @else if (itemResource.error()) {
  <app-error-state (retryAction)="itemResource.reload()" />
} @else {
  <h2>Bundle</h2>

  <form>
    <div class="row-container">
      <mat-form-field class="basis-3-4">
        <mat-label>Name</mat-label>
        <input matInput [formField]="form.name" />
      </mat-form-field>

      <mat-form-field class="basis-1-4">
        <mat-label>Units</mat-label>
        <input matInput [formField]="form.units" />
      </mat-form-field>
    </div>

    <div class="row-container">
      <mat-form-field class="flex-auto">
        <mat-label>Sale Price</mat-label>
        <input matInput type="number" [value]="formModel().salePrice" readonly />
        <mat-hint>Computed from bundle items</mat-hint>
      </mat-form-field>

      <mat-form-field class="flex-auto">
        <mat-label>Menu Category</mat-label>
        <mat-select [formField]="form.menuCategory">
          @for (mc of menuCategories(); track mc) {
            <mat-option [value]="mc">
              {{ mc.name }}
            </mat-option>
          }
        </mat-select>
      </mat-form-field>

      <mat-form-field class="flex-auto">
        <mat-label>Sale Category</mat-label>
        <mat-select [formField]="form.saleCategory">
          @for (sc of saleCategories(); track sc) {
            <mat-option [value]="sc">
              {{ sc.name }}
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
    </div>
    <div class="row-container">
      <span class="flex-auto"
        >Sale Category is used for Tax Report and displaying in the right bill regimes. For the Sale Report, Discount
        Report and Beer Sale Report, the Sale Category from the Bundle Items is used.</span
      >
    </div>
    <div class="row-container">
      <mat-checkbox [formField]="form.hasHappyHour" class="flex-auto">Has Happy Hour?</mat-checkbox>
      <mat-checkbox [formField]="form.isNotAvailable" class="flex-auto">Not Available?</mat-checkbox>
    </div>

    <h2>Items</h2>

    <div class="nutrition-grid">
      <mat-form-field class="flex-auto">
        <mat-label>Product</mat-label>
        <input
          type="text"
          matInput
          [formField]="form.addRow.sku"
          [matAutocomplete]="autoItem"
          [value]="displayFn(formModel().addRow.sku)"
        />
        <mat-autocomplete #autoItem="matAutocomplete" [displayWith]="displayFn">
          @for (p of itemProducts(); track p) {
            <mat-option [value]="p">{{ p.name }}</mat-option>
          }
        </mat-autocomplete>
      </mat-form-field>

      <mat-form-field class="flex-auto">
        <mat-label>Quantity</mat-label>
        <input matInput type="number" [formField]="form.addRow.quantity" />
      </mat-form-field>

      <mat-form-field class="flex-auto">
        <mat-label>Sale Price</mat-label>
        <input matInput type="number" [formField]="form.addRow.salePrice" />
      </mat-form-field>
      <mat-checkbox [formField]="form.addRow.printInBill" class="basis-1-4">Print in Bill?</mat-checkbox>

      <button type="button" mat-raised-button color="primary" (click)="addRow()" class="flex-auto">Add</button>
    </div>
  </form>

  <div class="row-container wrapped">
    <mat-table [dataSource]="formModel().items" aria-label="Bundle Items" class="flex-auto">
      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Item</mat-header-cell>
        <mat-cell *matCellDef="let row">
          {{ row.sku?.name }}
        </mat-cell>
      </ng-container>

      <!-- Quantity Column -->
      <ng-container matColumnDef="quantity">
        <mat-header-cell *matHeaderCellDef class="right">Qty</mat-header-cell>
        <mat-cell *matCellDef="let row" class="right">
          {{ row.quantity }}
        </mat-cell>
      </ng-container>

      <!-- Sale Price Column -->
      <ng-container matColumnDef="salePrice">
        <mat-header-cell *matHeaderCellDef class="right">Sale Price</mat-header-cell>
        <mat-cell *matCellDef="let row" class="right">
          {{ row.salePrice | currency: 'INR' }}
        </mat-cell>
      </ng-container>

      <!-- Sale Price Column -->
      <ng-container matColumnDef="printInBill">
        <mat-header-cell *matHeaderCellDef class="right">Print in Bill</mat-header-cell>
        <mat-cell *matCellDef="let row" class="right">
          <mat-icon>
            {{ row.printInBill ? 'visibility' : 'visibility_off' }}
          </mat-icon>
        </mat-cell>
      </ng-container>

      <!-- Action Column -->
      <ng-container matColumnDef="action">
        <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
        <mat-cell *matCellDef="let row" class="center">
          <button type="button" mat-icon-button tabindex="-1" (click)="editRow(row)">
            <mat-icon>edit</mat-icon>
          </button>
          <button type="button" mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
            <mat-icon>delete</mat-icon>
          </button>
        </mat-cell>
      </ng-container>

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

  <div class="row-container">
    <button type="button" mat-raised-button color="primary" (click)="save()">Save</button>
    @if (!!item().id) {
      <button type="button" mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
    }
  </div>
}