<p-toast />

<div class="page-container">
  <app-page-header title="TRANSFERS.TITLE" subtitle="TRANSFERS.SUBTITLE" (refresh)="retry()">
    <p-button [label]="'TRANSFERS.NEW' | translate" icon="pi pi-plus" (onClick)="openNew()" />
  </app-page-header>

  <ng-template #bodyTpl let-item>
      <tr>
        <td>{{ item.date }}</td>
        <td>
          @if (item.from_account) { <span class="mono">{{ item.from_account.code }}</span> - {{ item.from_account.name_ar || item.from_account.name }} }
        </td>
        <td>
          @if (item.to_account) { <span class="mono">{{ item.to_account.code }}</span> - {{ item.to_account.name_ar || item.to_account.name }} }
        </td>
        <td class="amount">{{ item.amount | number:'1.2-2' }}</td>
        <td>{{ item.description }}</td>
        <td>{{ item.reference || '-' }}</td>
      </tr>
    </ng-template>
  <app-data-table
    [data]="(transfers$ | async) || []"
    [loading]="!!(loading$ | async)"
    [error]="(error$ | async) ?? null"
    [columns]="columns"
    (retry)="retry()"
    [bodyTpl]="bodyTpl"
  >
  </app-data-table>
</div>

<app-form-dialog
  [(visible)]="dialogVisible"
  [header]="'TRANSFERS.NEW' | translate"
  [saving]="!!(saving$ | async)"
  (save)="onSave()"
  width="600px"
>
  <form [formGroup]="form" class="form-grid">
    <div class="form-field">
      <label>{{ 'TRANSFERS.FROM_ACCOUNT' | translate }} *</label>
      <p-select formControlName="from_account_id" [options]="accountOptions()" optionLabel="label" optionValue="value"
                [filter]="true" filterBy="label" [placeholder]="'COMMON.SELECT' | translate"
                [style]="{ width: '100%' }" appendTo="body" />
    </div>
    <div class="form-field">
      <label>{{ 'TRANSFERS.TO_ACCOUNT' | translate }} *</label>
      <p-select formControlName="to_account_id" [options]="accountOptions()" optionLabel="label" optionValue="value"
                [filter]="true" filterBy="label" [placeholder]="'COMMON.SELECT' | translate"
                [style]="{ width: '100%' }" appendTo="body" />
    </div>
    <div class="form-field">
      <label>{{ 'TRANSFERS.AMOUNT' | translate }} *</label>
      <p-inputNumber formControlName="amount" [min]="0" mode="decimal" [minFractionDigits]="2" [style]="{ width: '100%' }" />
    </div>
    <div class="form-field">
      <label>{{ 'TRANSFERS.DATE' | translate }} *</label>
      <p-datepicker formControlName="date" dateFormat="yy-mm-dd" [showIcon]="true" />
    </div>
    <div class="form-field full-width">
      <label>{{ 'TRANSFERS.DESCRIPTION' | translate }} *</label>
      <input pInputText formControlName="description" />
    </div>
    <div class="form-field full-width">
      <label>{{ 'TRANSFERS.REFERENCE' | translate }}</label>
      <input pInputText formControlName="reference" />
    </div>
  </form>
</app-form-dialog>
