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

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

  <ng-template #bodyTpl let-item>
      <tr>
        <td class="mono">{{ item.check_number }}</td>
        <td>
          {{ item.beneficiary_name }}
          @if (item.partner_id) {
            <div style="font-size: 0.75rem; color: #64748b;">{{ getPartnerName(item.partner_id) }}</div>
          }
        </td>
        <td class="amount">{{ item.amount | number:'1.2-2' }}</td>
        <td>{{ item.issue_date }}</td>
        <td>{{ item.due_date }}</td>
        <td>{{ item.bank_account?.bank_name || '-' }}</td>
        <td>
          <p-tag [value]="'CHECKS_ISSUED.STATUS_' + item.status.toUpperCase() | translate"
                 [severity]="getStatusSeverity(item.status)" />
        </td>
        <td>
          <div class="action-buttons">
            @if (item.status === 'new') {
              <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="edit(item)" />
              <p-button icon="pi pi-send" [rounded]="true" [text]="true" severity="warn"
                        (onClick)="deliver(item)" [pTooltip]="'CHECKS_ISSUED.DELIVER' | translate" />
              <p-button icon="pi pi-ban" [rounded]="true" [text]="true" severity="danger"
                        (onClick)="cancel(item)" [pTooltip]="'CHECKS_ISSUED.CANCEL_ACTION' | translate" />
              <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="delete(item)" />
            }
            @if (item.status === 'delivered') {
              <p-button icon="pi pi-check" [rounded]="true" [text]="true" severity="success"
                        (onClick)="cash(item)" [pTooltip]="'CHECKS_ISSUED.CASH' | 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"
  >
  </app-data-table>
</div>

<!-- Create/Edit Dialog -->
<app-form-dialog
  [(visible)]="dialogVisible"
  [header]="editing() ? ('CHECKS_ISSUED.EDIT' | translate) : ('CHECKS_ISSUED.NEW' | translate)"
  width="600px"
  [saving]="!!(saving$ | async)"
  (save)="onSave()"
>
  <form [formGroup]="form" class="form-grid">
    <div class="form-field full-width">
      <label>{{ 'CHECKS_ISSUED.SUPPLIER' | translate }}</label>
      <p-select [options]="(suppliers$ | async) || []" optionLabel="name_ar" [optionValue]="undefined"
                [filter]="true" filterBy="name_ar,name_en,code"
                [showClear]="true" [placeholder]="'COMMON.SELECT' | translate"
                [style]="{ width: '100%' }" appendTo="body"
                [ngModel]="null" [ngModelOptions]="{standalone: true}"
                (ngModelChange)="onPartnerSelect($event)">
        <ng-template #selectedItem let-p>
          <span>{{ p.code }} - {{ p.name_ar || p.name }}</span>
        </ng-template>
        <ng-template #item let-p>
          <span>{{ p.code }} - {{ p.name_ar || p.name }}</span>
        </ng-template>
      </p-select>
    </div>
    <div class="form-field">
      <label>{{ 'CHECKS_ISSUED.BANK_ACCOUNT' | translate }} *</label>
      <p-select formControlName="bank_account_id" [options]="(bankAccounts$ | async) || []" optionLabel="bank_name" optionValue="id"
                [placeholder]="'COMMON.SELECT' | translate" [style]="{ width: '100%' }" appendTo="body" />
    </div>
    <div class="form-field">
      <label>{{ 'CHECKS_ISSUED.CHECK_NUMBER' | translate }} *</label>
      <input pInputText formControlName="check_number" />
    </div>
    <div class="form-field">
      <label>{{ 'CHECKS_ISSUED.AMOUNT' | translate }} *</label>
      <p-inputNumber formControlName="amount" [min]="0" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="2" [style]="{ width: '100%' }" />
    </div>
    <div class="form-field">
      <label>{{ 'CHECKS_ISSUED.BENEFICIARY' | translate }} *</label>
      <input pInputText formControlName="beneficiary_name" />
    </div>
    <div class="form-field">
      <label>{{ 'CHECKS_ISSUED.ISSUE_DATE' | translate }} *</label>
      <p-datepicker formControlName="issue_date" dateFormat="yy-mm-dd" [showIcon]="true" />
    </div>
    <div class="form-field">
      <label>{{ 'CHECKS_ISSUED.DUE_DATE' | translate }} *</label>
      <p-datepicker formControlName="due_date" dateFormat="yy-mm-dd" [showIcon]="true" />
    </div>
    <div class="form-field full-width">
      <label>{{ 'CHECKS_ISSUED.NOTES' | translate }}</label>
      <input pInputText formControlName="notes" />
    </div>
  </form>
</app-form-dialog>
