<p-dialog [visible]="true" [closable]="true" (onHide)="cancelled.emit()" [header]="'POS.RETURN' | translate" [style]="{width: '600px'}" [modal]="true">
  <div class="search-section">
    <div class="search-row">
      <input pInputText [(ngModel)]="invoiceSearch" [placeholder]="'POS.SEARCH_INVOICE' | translate" (keyup.enter)="searchInvoice()" [style]="{width: '100%'}" />
      <button pButton icon="pi pi-search" [loading]="searching()" (click)="searchInvoice()"></button>
    </div>
  </div>

  @if (invoice()) {
    <div class="invoice-info">
      <div class="info-row">
        <span class="label">{{ 'POS.INVOICE_NUMBER' | translate }}</span>
        <span class="value">{{ invoice().number || '#' + invoice().id }}</span>
      </div>
      <div class="info-row">
        <span class="label">{{ 'POS.INVOICE_TOTAL' | translate }}</span>
        <span class="value">{{ invoice().total | number:'1.2-2' }}</span>
      </div>
    </div>

    <div class="items-section">
      <h4>{{ 'POS.SELECT_RETURN_ITEMS' | translate }}</h4>
      @for (item of invoiceItems(); track item.id) {
        <div class="return-item" [class.selected]="item.selected">
          <div class="item-header" (click)="toggleItem($index)">
            <i class="pi" [class.pi-check-square]="item.selected" [class.pi-stop]="!item.selected"></i>
            <span class="item-name">{{ item.product_name }}</span>
            <span class="item-qty">x{{ item.quantity }}</span>
            <span class="item-price">{{ item.unit_price | number:'1.2-2' }}</span>
          </div>
          @if (item.selected) {
            <div class="item-details">
              <div class="detail-field">
                <label>{{ 'POS.RETURN_QTY' | translate }}</label>
                <p-inputNumber [ngModel]="item.return_qty" (ngModelChange)="updateReturnQty($index, $event)" [min]="1" [max]="item.quantity" [showButtons]="true" [style]="{width: '120px'}" />
              </div>
              <div class="detail-field">
                <label>{{ 'POS.REASON' | translate }}</label>
                <input pInputText [ngModel]="item.reason" (ngModelChange)="updateReason($index, $event)" [placeholder]="'POS.RETURN_REASON' | translate" />
              </div>
            </div>
          }
        </div>
      }
    </div>

    <div class="refund-section">
      <div class="refund-method">
        <label>{{ 'POS.REFUND_METHOD' | translate }}</label>
        <p-select [options]="refundMethods" optionLabel="label" optionValue="value" [(ngModel)]="refundMethod" [style]="{width: '100%'}" />
      </div>
      @if (refundTotal() > 0) {
        <div class="refund-total">
          <span>{{ 'POS.REFUND_TOTAL' | translate }}</span>
          <span class="amount">{{ refundTotal() | number:'1.2-2' }}</span>
        </div>
      }
    </div>
  }

  <ng-template pTemplate="footer">
    <button pButton [label]="'POS.PROCESS_RETURN' | translate" icon="pi pi-refresh" severity="warn" [loading]="loading()" [disabled]="selectedItems().length === 0" (click)="processReturn()"></button>
  </ng-template>
</p-dialog>
