<div class="vending-container" *ngIf="!error">
  <div class="header">
    <button class="logout-button" (click)="logout()">Logout</button>
    <button class="cart-button" (click)="toggleCart()">
      <span class="cart-icon">🛒</span>
      <span class="cart-count" *ngIf="cart.length > 0">{{ cart.length }}</span>
    </button>
  </div>

  <!-- Vending Machine Grid -->
  @for (row of ['A', 'B', 'C', 'D', 'E', 'F']; track row) {
  <div class="vending-row">
    <div class="row-title">
      <span>Row {{ row }}</span>
      <div class="scroll-hint">
        <span>Scroll</span>
      </div>
    </div>
    <div class="slots-container">
      @for (col of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track col) {
      <div class="slot-card" [ngClass]="{'disabled': !getSlot(row, col)?.enabled}">
        <div class="slot-header">
          <span class="slot-name">{{ row + col }}</span>
        </div>
        <div class="slot-body">
          @if (getSlot(row, col)?.product_id) {
          <div class="product-image-container">
            <img *ngIf="getSlot(row, col)?.product_image"
              [src]="'http://localhost:5001/' + getSlot(row, col)?.product_image"
              [attr.alt]="getSlot(row, col)?.product_name" class="product-image">
          </div>
          
          <div class="product-details">
            <p class="product-name">{{ getSlot(row, col)?.product_name }}</p>

            <!-- Price and Quantity Selector -->
            <div class="price-quantity-row">
              <p class="product-price">{{ getSlot(row, col)?.price }} ₹</p>

              <div class="quantity-selector"
                *ngIf="getSlot(row, col)?.enabled && getSlot(row, col)?.units && getSlot(row, col)!.units > 0">
                <button class="quantity-btn minus-btn" (click)="decrementQuantity(row, col)"
                  [disabled]="selectedQuantities[row + col] <= 1">
                  <span class="minus-icon">-</span>
                </button>

                <span class="quantity-display">{{ selectedQuantities[row + col] || 1 }}</span>

                <button class="quantity-btn plus-btn" (click)="incrementQuantity(row, col)"
                  [disabled]="selectedQuantities[row + col] >= getSlot(row, col)!.units">
                  <span class="plus-icon">+</span>
                </button>
              </div>
            </div>

            <div class="product-actions">
              <button class="add-to-cart-btn"
                [disabled]="!getSlot(row, col)?.enabled || !getSlot(row, col)?.units || getSlot(row, col)!.units <= 0"
                (click)="addToCart(getSlot(row, col)!, row + col)">
                Add to Cart
              </button>
            </div>
          </div>
          } @else {
          <div class="empty-slot">
            <p class="add-product-text">No Product Assigned</p>
          </div>
          }
        </div>
      </div>
      }
    </div>
    <div class="scroll-shadows"></div>
  </div>
  }

  <!-- Shopping Cart Sidebar -->
  <div class="shopping-cart" [ngClass]="{'open': cartOpen}">
    <div class="cart-header">
      <h2>Shopping Cart</h2>
      <button class="close-cart" (click)="toggleCart()">×</button>
    </div>

    <div class="cart-items">
      @if (cart.length === 0) {
      <p class="empty-cart-message">Your cart is empty</p>
      } @else {
      @for (item of cart; track item; let i = $index) {
      <div class="cart-item">
        <div class="cart-item-image">
          <img *ngIf="item.productImage" [src]="'http://localhost:5001/' + item.productImage"
            [attr.alt]="item.productName">
        </div>
        <div class="cart-item-details">
          <p class="cart-item-name">{{ item.productName }}</p>
          <div class="cart-item-controls">
            <button class="quantity-btn" (click)="updateCartItemQuantity(item, item.quantity - 1)"
              [disabled]="item.quantity <= 1">-</button>
            <span class="quantity">{{ item.quantity }}</span>
            <button class="quantity-btn" (click)="updateCartItemQuantity(item, item.quantity + 1)"
              [disabled]="item.quantity >= (getSlot(item.slotId[0], +item.slotId.substring(1))?.units || 0)">+</button>
          </div>
          <p class="cart-item-price">₹{{ item.price.toFixed(2) }} × {{ item.quantity }} = ₹{{ item.totalPrice.toFixed(2) }}</p>
        </div>
        <button class="remove-item" (click)="removeFromCart(i)">×</button>
      </div>
      }
      }
    </div>

    <div class="cart-footer" *ngIf="cart.length > 0">
      <div class="cart-total">
        <span>Total:</span>
        <span class="total-price">₹{{ totalCartPrice.toFixed(2) }}</span>
      </div>
      <button class="checkout-btn" (click)="proceedToPayment()">
  Proceed to Payment
</button>
    </div>
  </div>

  <!-- Cart Overlay -->
  <div class="cart-overlay" *ngIf="cartOpen" (click)="toggleCart()"></div>

  <!-- Payment Confirmation Dialog -->
  <div class="payment-dialog-overlay" *ngIf="showPaymentDialog">
    <div class="payment-dialog">
      <div class="dialog-header">
        <h2>Confirm Payment</h2>
        <button class="close-dialog" (click)="closePaymentDialog()" [disabled]="processingTransaction">×</button>
      </div>

      <div class="dialog-body">
        <div class="order-summary">
          <h3>Order Summary</h3>
          <div class="summary-items">
            @for (item of paymentDialogData?.cart; track item) {
              <div class="summary-item">
                <div class="summary-item-left">
                  <span class="item-name">{{ item.productName }}</span>
                  <span class="item-quantity">Qty: {{ item.quantity }}</span>
                </div>
                <span class="item-price">₹{{ item.totalPrice.toFixed(2) }}</span>
              </div>
            }
          </div>
          <div class="summary-total">
            <span class="total-label">Total Amount:</span>
            <span class="total-amount">₹{{ formattedTotalAmount }}</span>
          </div>
        </div>
      </div>

      <div class="dialog-footer">
        <button 
          class="dialog-btn cancel-btn" 
          (click)="handlePaymentCancel()"
          [disabled]="processingTransaction">
          Cancel
        </button>
        <button 
          class="dialog-btn paid-btn" 
          (click)="handlePaymentPaid()"
          [disabled]="processingTransaction">
          {{ processingTransaction ? 'Processing...' : 'Paid' }}
        </button>
      </div>
    </div>
  </div>
</div>

<div *ngIf="error" class="error">{{ error }}</div>
<p *ngIf="loading">Loading...</p>