<p-dialog [visible]="true" [closable]="true" (onHide)="cancelled.emit()" [header]="'POS.DISCOUNT' | translate" [style]="{width: '420px'}" [modal]="true">

  <!-- Mode Toggle -->
  <div class="mode-toggle">
    <button class="mode-btn" [class.active]="mode() === 'manual'" (click)="mode.set('manual')">
      <i class="pi pi-percentage"></i>
      {{ 'POS.MANUAL_DISCOUNT' | translate }}
    </button>
    <button class="mode-btn" [class.active]="mode() === 'coupon'" (click)="mode.set('coupon')">
      <i class="pi pi-ticket"></i>
      {{ 'POS.COUPON_CODE' | translate }}
    </button>
  </div>

  @if (mode() === 'manual') {
    <!-- Manual Discount -->
    <div class="coupon-form">
      <label>{{ 'POS.DISCOUNT_TYPE' | translate }}</label>
      <p-selectButton [options]="discountTypeOptions" [(ngModel)]="discountType" optionLabel="label" optionValue="value" [style]="{width: '100%'}" />

      <label>{{ 'POS.DISCOUNT_VALUE' | translate }}</label>
      <p-inputNumber [(ngModel)]="discountValue" [min]="0" [max]="discountType() === 'percentage' ? 100 : 999999" mode="decimal" [minFractionDigits]="2" [style]="{width: '100%'}" [inputStyle]="{width: '100%', 'text-align': 'center', 'font-size': '1.3rem'}" (keydown.enter)="applyManualDiscount()" />

      @if (discountType() === 'percentage' && discountValue() > 0) {
        <div class="discount-preview">
          {{ 'POS.DISCOUNT_AMOUNT' | translate }}: <strong>{{ ((cartService.subtotal() - cartService.lineDiscountTotal()) * discountValue() / 100) | number:'1.2-2' }}</strong>
        </div>
      }
    </div>

    <ng-template pTemplate="footer">
      <button pButton [label]="'POS.APPLY_DISCOUNT' | translate" icon="pi pi-check" [disabled]="!discountValue() || discountValue() <= 0" (click)="applyManualDiscount()"></button>
    </ng-template>
  } @else {
    <!-- Coupon Code -->
    <div class="coupon-form">
      <label>{{ 'POS.COUPON_CODE' | translate }}</label>
      <div class="input-row">
        <input pInputText [(ngModel)]="code" [placeholder]="'POS.ENTER_COUPON_CODE' | translate" (keyup.enter)="validate()" [style]="{width: '100%'}" />
      </div>

      @if (error()) {
        <div class="error-message">
          <i class="pi pi-exclamation-circle"></i>
          <span>{{ error() }}</span>
        </div>
      }
    </div>

    <ng-template pTemplate="footer">
      <button pButton [label]="'POS.VALIDATE' | translate" icon="pi pi-check" [loading]="loading()" [disabled]="!code()" (click)="validate()"></button>
    </ng-template>
  }
</p-dialog>
