<div class="flex-auto p-6 sm:p-10 overflow-auto max-h-[calc(100vh-100px)]">
  <div class="machine-details-container">
    <div class="header-bar">
      <button class="back-button" (click)="goBack()">
        <i class="fa fa-arrow-left"></i> Back
      </button>
      <div class="header-actions">
        <button class="save-button" (click)="saveChanges()">
          <i class="fa fa-save"></i> Save Changes
        </button>
      </div>
    </div>

    <!-- Error message display -->
    <div *ngIf="errorMessage" class="error-message">
      <p>{{ errorMessage }}</p>
      <button class="retry-button" (click)="loadMachineData()">Retry</button>
    </div>

    <!-- Information section -->
    <div class="info-card" *ngIf="!errorMessage">
      <h3>Information</h3>
      <div class="info-grid">
        <div class="info-item">
          <span class="label">Machine ID</span>
          <span class="value">{{machine.machine_id}}</span>
        </div>
        <div class="info-item">
          <span class="label">Machine Model</span>
          <span class="value">{{machine.machine_model}}</span>
        </div>
        <div class="info-item">
          <span class="label">Machine Type</span>
          <span class="value">{{machine.machine_type}}</span>
        </div>
        <div class="info-item">
          <span class="label">Client ID</span>
          <span class="value">{{machine.client_id}}</span>
        </div>
        <div class="info-item">
          <span class="label">Client Name</span>
          <span class="value">{{machine.client_name}}</span>
        </div>
        <div class="info-item">
          <span class="label">Branch ID</span>
          <span class="value">{{machine.branch_id}}</span>
        </div>
        <div class="info-item">
          <span class="label">Branch Name</span>
          <span class="value">{{machine.branch_name}}</span>
        </div>
        <div class="info-item">
          <span class="label">Operation Status</span>
          <span class="value status-active">{{machine.operation_status}}</span>
        </div>
        <div class="info-item">
          <span class="label">Connection Status</span>
          <span class="value status-online">{{machine.connection_status}}</span>
        </div>
      </div>
    </div>

    <!-- Vending rows container -->
    <div class="vending-container" *ngIf="!errorMessage">
      <div *ngFor="let row of vendingRows" class="vending-row">
        <div class="row-title">
          <span>{{row.name}}</span>
          <div class="scroll-hint">
            <i class="fa fa-arrow-left"></i>
            <span>Scroll</span>
            <i class="fa fa-arrow-right"></i>
          </div>
        </div>

        <div class="slots-container">
          <div *ngFor="let slot of row.slots" class="slot-card" [ngClass]="{'disabled': !slot.enabled}">
            <div class="slot-header">
              <span class="slot-name">{{slot.name}}</span>
              <div class="toggle-container">
                <label class="switch">
                  <input type="checkbox" [checked]="slot.enabled" (click)="toggleSlotStatus(row, slot, $event)">
                  <span class="slider"></span>
                </label>
                <span class="status-text" [ngClass]="{'enabled': slot.enabled, 'disabled': !slot.enabled}">
                  {{slot.enabled ? 'Enabled' : 'Disabled'}}
                </span>
              </div>
            </div>
            <div class="slot-body" (click)="openProductSelector(row, slot, $event)">
              <ng-container *ngIf="!slot.product; else productAssigned">
                <div class="empty-slot">
                  <div class="add-product-icon">
                    <i class="fa fa-plus-circle"></i>
                  </div>
                  <p class="add-product-text">Assign Product</p>
                </div>
              </ng-container>
              <ng-template #productAssigned>
                <div class="product-image-container">
                  <img *ngIf="slot.product?.product_image"
                    [src]="'https://iotbackend.rootxwire.com/' + slot.product?.product_image"
                    [attr.alt]="slot.product?.product_name" class="product-image">
                </div>
                <div class="product-details">
                  <div class="product-header">
                    <p class="product-name">{{slot.product.product_name}}</p>
                    <button class="remove-product" (click)="removeProductFromSlot(slot, $event)">
                      <i class="fa fa-times"></i>
                    </button>
                  </div>
                  <p class="product-stats">
                    <span class="units-display">{{slot.units}}</span> Units - {{slot.price}} ₹
                  </p>
                </div>
              </ng-template>
            </div>
          </div>
        </div>

        <div class="scroll-shadows"></div>
      </div>
    </div>

    <!-- Product Selector Modal -->
    <div *ngIf="showProductSelector" class="modal-overlay">
      <div class="product-selector-modal" (click)="$event.stopPropagation()">
        <div class="modal-header">
          <h3>Select Product for {{selectedSlot?.name}}</h3>
          <button class="close-modal" (click)="closeProductSelector()">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <div class="modal-body">
          <div class="search-container">
            <input type="text" placeholder="Search products..." class="search-input" [(ngModel)]="searchTerm"
              (input)="filterProducts()">
          </div>

          <div class="products-table">
            <div *ngFor="let product of filteredProducts; let i = index" class="product-row"
              [ngClass]="{'selected': product.selected, 'odd': i % 2 === 0}"
              (click)="onProductSelectionChange(product)">

              <div class="checkbox-cell">
                <input type="checkbox" [checked]="product.selected" [id]="'product-' + product.product_id"
                  (click)="$event.stopPropagation(); onProductSelectionChange(product);">
              </div>

              <div class="number-cell">{{product.product_id}}</div>

              <div class="product-name-cell">{{product.product_name}}</div>

              <div class="price-cell">₹{{product.price}}</div>

              <div class="image-cell">
                <img *ngIf="product.product_image" [src]="'http://localhost:5000/' + product.product_image"
                  alt="{{product.product_name}}" class="product-thumbnail">
              </div>

              <div class="quantity-cell">
                <div class="quantity-spinner" *ngIf="product.selected">
                  <button class="quantity-btn" [disabled]="productQuantity <= 1"
                    (click)="$event.stopPropagation(); decreaseQuantity()">
                    <i class="fa fa-minus"></i>
                  </button>
                  <input type="number" class="quantity-input" [(ngModel)]="productQuantity" min="1"
                    (click)="$event.stopPropagation()" (change)="setQuantity($event)">
                  <button class="quantity-btn" (click)="$event.stopPropagation(); increaseQuantity()">
                    <i class="fa fa-plus"></i>
                  </button>
                </div>
              </div>
            </div>

            <div *ngIf="filteredProducts.length === 0" class="no-products">
              No products found matching "{{searchTerm}}"
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn-cancel" (click)="closeProductSelector()">Cancel</button>
          <button class="btn-add" [disabled]="!selectedProduct" (click)="confirmProductSelection()">
            Add Product
          </button>
        </div>
      </div>
    </div>
  </div>
</div>