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

<div class="page-container">
  <app-page-header title="CHECKS_RECEIVED.TITLE" subtitle="CHECKS_RECEIVED.SUBTITLE" (refresh)="retry()">
    <p-button [label]="'CHECKS_RECEIVED.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.drawer_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.receive_date }}</td>
        <td>{{ item.due_date }}</td>
        <td>
          <p-tag [value]="'CHECKS_RECEIVED.STATUS_' + item.status.toUpperCase() | translate"
                 [severity]="getStatusSeverity(item.status)" />
        </td>
        <td>
          <div class="action-buttons">
            @if (item.status === 'received') {
              <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="edit(item)" />
              <p-button icon="pi pi-building" [rounded]="true" [text]="true" severity="warn"
                        (onClick)="openDeposit(item)" [pTooltip]="'CHECKS_RECEIVED.DEPOSIT' | translate" />
              <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="delete(item)" />
            }
            @if (item.status === 'under_collection') {
              <p-button icon="pi pi-check" [rounded]="true" [text]="true" severity="success"
                        (onClick)="collect(item)" [pTooltip]="'CHECKS_RECEIVED.COLLECT' | translate" />
            }
            @if (item.status === 'deposited') {
              <p-button icon="pi pi-undo" [rounded]="true" [text]="true" severity="warn"
                (onClick)="returnCheck(item)" [pTooltip]="'CHECKS_RECEIVED.RETURN' | translate" tooltipPosition="top" />
            }
          </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_RECEIVED.EDIT' | translate) : ('CHECKS_RECEIVED.NEW' | translate)"
  width="600px"
  [saving]="!!(saving$ | async)"
  (save)="onSave()"
>
  <form [formGroup]="form" class="form-grid">
    <div class="form-field full-width">
      <label>{{ 'CHECKS_RECEIVED.CLIENT' | translate }}</label>
      <p-select [options]="(clients$ | 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_RECEIVED.CHECK_NUMBER' | translate }} *</label>
      <input pInputText formControlName="check_number" />
    </div>
    <div class="form-field">
      <label>{{ 'CHECKS_RECEIVED.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_RECEIVED.RECEIVE_DATE' | translate }} *</label>
      <p-datepicker formControlName="receive_date" dateFormat="yy-mm-dd" [showIcon]="true" />
    </div>
    <div class="form-field">
      <label>{{ 'CHECKS_RECEIVED.DUE_DATE' | translate }} *</label>
      <p-datepicker formControlName="due_date" dateFormat="yy-mm-dd" [showIcon]="true" />
    </div>
    <div class="form-field">
      <label>{{ 'CHECKS_RECEIVED.DRAWER' | translate }} *</label>
      <input pInputText formControlName="drawer_name" />
    </div>
    <div class="form-field">
      <label>{{ 'CHECKS_RECEIVED.DRAWER_BANK' | translate }}</label>
      <input pInputText formControlName="drawer_bank" />
    </div>
    <div class="form-field full-width">
      <label>{{ 'CHECKS_RECEIVED.BANK_ACCOUNT' | translate }}</label>
      <p-select formControlName="bank_account_id" [options]="(bankAccounts$ | async) || []" optionLabel="bank_name" optionValue="id"
                [showClear]="true" [placeholder]="'COMMON.SELECT' | translate" [style]="{ width: '100%' }" appendTo="body" />
    </div>
    <div class="form-field full-width">
      <label>{{ 'CHECKS_RECEIVED.NOTES' | translate }}</label>
      <input pInputText formControlName="notes" />
    </div>
  </form>
</app-form-dialog>

<!-- Deposit Dialog -->
<p-dialog [header]="'CHECKS_RECEIVED.DEPOSIT' | translate"
          [(visible)]="depositDialogVisible" [modal]="true" [style]="{ width: '400px' }" [closable]="true">
  <div class="form-field">
    <label>{{ 'CHECKS_RECEIVED.SELECT_BANK' | translate }}</label>
    <p-select [(ngModel)]="depositBankAccountId" [options]="(bankAccounts$ | async) || []" optionLabel="bank_name" optionValue="id"
              [placeholder]="'COMMON.SELECT' | translate" [style]="{ width: '100%' }" appendTo="body" />
  </div>
  <ng-template #footer>
    <p-button [label]="'COMMON.CANCEL' | translate" icon="pi pi-times" severity="secondary" (onClick)="depositDialogVisible.set(false)" />
    <p-button [label]="'CHECKS_RECEIVED.DEPOSIT' | translate" icon="pi pi-check" (onClick)="confirmDeposit()"
              [disabled]="!depositBankAccountId" [loading]="!!(saving$ | async)" />
  </ng-template>
</p-dialog>
