<p-toast />
<p-confirmDialog />

<div class="supplier-prices-page">
  <app-page-header title="PURCHASES.SUPPLIER_PRICES" subtitle="PURCHASES.TITLE" (refresh)="retry()">
    <p-button [label]="'COMMON.CREATE' | translate" icon="pi pi-plus" (onClick)="openCreate()" />
  </app-page-header>

  <ng-template #bodyTpl let-sp>
    <tr>
      <td>{{ sp.partner_name }}</td>
      <td>{{ sp.product_name }}</td>
      <td class="amount">{{ sp.price | number:'1.2-2' }}</td>
      <td class="amount">{{ sp.min_quantity }}</td>
      <td>{{ sp.lead_time_days ?? '-' }}</td>
      <td>{{ sp.valid_from || '-' }}</td>
      <td>{{ sp.valid_to || '-' }}</td>
      <td>
        @if (sp.is_preferred) { <p-tag value="★" severity="success" /> }
      </td>
      <td>
        <div class="action-buttons">
          <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="openEdit(sp)" [pTooltip]="'COMMON.EDIT' | translate" />
          <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="deletePrice(sp)" [pTooltip]="'COMMON.DELETE' | translate" />
        </div>
      </td>
    </tr>
  </ng-template>

  <app-data-table [data]="tableData()" [lazy]="true" [totalRecords]="totalRecords()" [first]="first" [loading]="tableLoading()" [rows]="rows" (onLazyLoad)="onPageChange($event)" [columns]="columns" (retry)="retry()" [bodyTpl]="bodyTpl" />
</div>

<!-- Create/Edit Dialog -->
<p-dialog [header]="(dialogMode === 'create' ? 'COMMON.CREATE' : 'COMMON.EDIT') | translate" [(visible)]="dialogVisible" [modal]="true" [style]="{ width: '550px' }" [closable]="true">
  <div class="form-grid">
    <!-- Supplier -->
    <div class="form-field">
      <label>{{ 'PURCHASES.SUPPLIER' | translate }} *</label>
      <p-select
        [options]="supplierResults()"
        [(ngModel)]="form.partner_id"
        optionLabel="name"
        optionValue="id"
        [filter]="true"
        filterBy="name,code"
        (onFilter)="supplierSearch$.next($event.filter)"
        [placeholder]="'PURCHASES.SEARCH_SUPPLIER' | translate"
        [showClear]="true"
        appendTo="body"
      />
    </div>

    <!-- Product -->
    <div class="form-field">
      <label>{{ 'PURCHASES.PRODUCT' | translate }} *</label>
      <p-select
        [options]="productResults()"
        [(ngModel)]="form.product_id"
        optionLabel="name"
        optionValue="id"
        [filter]="true"
        filterBy="name,sku"
        (onFilter)="productSearch$.next($event.filter)"
        [placeholder]="'PURCHASES.SEARCH_PRODUCT' | translate"
        [showClear]="true"
        appendTo="body"
      />
    </div>

    <!-- Price -->
    <div class="form-field">
      <label>{{ 'PURCHASES.PRICE' | translate }} *</label>
      <p-inputNumber [(ngModel)]="form.price" [minFractionDigits]="2" [maxFractionDigits]="4" mode="decimal" />
    </div>

    <!-- Min Quantity -->
    <div class="form-field">
      <label>{{ 'PURCHASES.MIN_QUANTITY' | translate }}</label>
      <p-inputNumber [(ngModel)]="form.min_quantity" [min]="0" mode="decimal" />
    </div>

    <!-- Lead Time -->
    <div class="form-field">
      <label>{{ 'PURCHASES.LEAD_TIME' | translate }}</label>
      <p-inputNumber [(ngModel)]="form.lead_time_days" [min]="0" suffix=" days" />
    </div>

    <!-- Valid From -->
    <div class="form-field">
      <label>{{ 'PURCHASES.VALID_FROM' | translate }}</label>
      <p-datePicker [(ngModel)]="form.valid_from" dateFormat="yy-mm-dd" [showIcon]="true" appendTo="body" />
    </div>

    <!-- Valid To -->
    <div class="form-field">
      <label>{{ 'PURCHASES.VALID_TO' | translate }}</label>
      <p-datePicker [(ngModel)]="form.valid_to" dateFormat="yy-mm-dd" [showIcon]="true" appendTo="body" />
    </div>

    <!-- Is Preferred -->
    <div class="form-field checkbox-field">
      <p-checkbox [(ngModel)]="form.is_preferred" [binary]="true" inputId="is_preferred" />
      <label for="is_preferred">{{ 'PURCHASES.IS_PREFERRED' | translate }}</label>
    </div>

    <!-- Notes -->
    <div class="form-field full-width">
      <label>{{ 'PURCHASES.NOTES' | translate }}</label>
      <textarea pTextarea [(ngModel)]="form.notes" rows="2"></textarea>
    </div>
  </div>

  <ng-template #footer>
    <p-button [label]="'COMMON.CANCEL' | translate" icon="pi pi-times" severity="secondary" (onClick)="dialogVisible.set(false)" />
    <p-button [label]="'COMMON.SAVE' | translate" icon="pi pi-check" (onClick)="save()" [loading]="saving()" />
  </ng-template>
</p-dialog>
