<!-- payment-success.component.html -->
<div class="payment-result-container">
  <div class="success-card" *ngIf="transactionDetails">
    <div class="success-header">
      <div class="success-icon">✓</div>
      <h1>Payment Successful!</h1>
      <p class="success-message">Thank you for your purchase. Your transaction has been completed successfully.</p>
    </div>
    
    <div class="transaction-details">
      <h2>Transaction Details</h2>
      <div class="details-grid">
        <div class="detail-item">
          <span class="label">Transaction ID:</span>
          <span class="value">{{ transactionDetails.transactionId }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Payment ID:</span>
          <span class="value">{{ transactionDetails.paymentId }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Amount:</span>
          <span class="value amount">₹{{ transactionDetails.amount }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Status:</span>
          <span class="value status-success">{{ transactionDetails.status }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Customer Name:</span>
          <span class="value">{{ transactionDetails.customerName }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Email:</span>
          <span class="value">{{ transactionDetails.customerEmail }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Phone:</span>
          <span class="value">{{ transactionDetails.customerPhone }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Products:</span>
          <span class="value">{{ transactionDetails.products }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Payment Mode:</span>
          <span class="value">{{ transactionDetails.paymentMode }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Transaction Date:</span>
          <span class="value">{{ transactionDetails.transactionDate }}</span>
        </div>
        <div class="detail-item" *ngIf="transactionDetails.bankRefNumber">
          <span class="label">Bank Reference:</span>
          <span class="value">{{ transactionDetails.bankRefNumber }}</span>
        </div>
      </div>
    </div>

    <div class="dispensing-status">
      <div class="dispensing-icon">🎁</div>
      <p>Your products are being dispensed from the vending machine!</p>
      <p class="dispensing-note">Please collect your items from the machine.</p>
    </div>

    <div class="action-buttons">
      <button class="btn-primary" (click)="goToMachine()">Continue Shopping</button>
      <button class="btn-secondary" (click)="printReceipt()">Print Receipt</button>
    </div>
  </div>
  
  <div class="loading-card" *ngIf="loading">
    <div class="loading-spinner"></div>
    <p>Processing transaction details...</p>
  </div>
  
  <div class="error-card" *ngIf="error">
    <div class="error-icon">⚠</div>
    <h2>Error Loading Transaction Details</h2>
    <p>{{ error }}</p>
    <button class="btn-primary" (click)="goToMachine()">Return to Machine</button>
  </div>
</div>