<p-dialog [visible]="true" [closable]="true" (onHide)="cancelled.emit()" [header]="'POS.PAYMENT' | translate" [style]="{width: '500px'}" [modal]="true">
  <div class="total-display">
    <span class="total-label">{{ 'POS.TOTAL_TO_PAY' | translate }}</span>
    <span class="total-amount">{{ cartService.total() | number:'1.2-2' }} {{ currencySymbol() }}</span>
  </div>

  <div class="payment-lines">
    @for (line of paymentLines(); track $index) {
      <div class="payment-line">
        <div class="line-method">
          <p-select [options]="paymentMethods" optionLabel="label" optionValue="value" [ngModel]="line.method" (ngModelChange)="updateLine($index, 'method', $event)" [style]="{width: '100%'}" />
        </div>
        <div class="line-amount">
          <p-inputNumber [ngModel]="line.amount" (ngModelChange)="updateLine($index, 'amount', $event)" [min]="0" mode="decimal" [minFractionDigits]="2" [style]="{width: '100%'}" />
        </div>
        <div class="line-reference">
          <input pInputText [ngModel]="line.reference" (ngModelChange)="updateLine($index, 'reference', $event)" [placeholder]="'POS.REFERENCE' | translate" />
        </div>
        @if (paymentLines().length > 1) {
          <button pButton icon="pi pi-trash" severity="danger" [text]="true" (click)="removeLine($index)"></button>
        }
      </div>
    }
  </div>

  <button pButton [label]="'POS.ADD_PAYMENT_LINE' | translate" icon="pi pi-plus" [text]="true" severity="secondary" (click)="addLine()" class="add-line-btn"></button>

  <div class="payment-summary">
    <div class="summary-row">
      <span>{{ 'POS.TOTAL_PAID' | translate }}</span>
      <span class="amount">{{ totalPaid() | number:'1.2-2' }} {{ currencySymbol() }}</span>
    </div>
    @if (remaining() > 0) {
      <div class="summary-row remaining">
        <span>{{ 'POS.REMAINING' | translate }}</span>
        <span class="amount">{{ remaining() | number:'1.2-2' }} {{ currencySymbol() }}</span>
      </div>
    }
    @if (change() > 0) {
      <div class="summary-row change">
        <span>{{ 'POS.CHANGE' | translate }}</span>
        <span class="amount">{{ change() | number:'1.2-2' }} {{ currencySymbol() }}</span>
      </div>
    }
  </div>

  @if (errorMsg()) {
    <div class="error-msg">
      <i class="pi pi-exclamation-triangle"></i>
      <span>{{ errorMsg() }}</span>
    </div>
  }

  <ng-template pTemplate="footer">
    <button pButton [label]="'POS.PAY' | translate" icon="pi pi-check" [loading]="loading()" [disabled]="remaining() > 0 || cartService.isEmpty()" (click)="pay()"></button>
  </ng-template>
</p-dialog>
<p-toast position="top-center" />
