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

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

  <ng-template #bodyTpl let-item>
      <tr>
        <td>{{ item.name }}</td>
        <td>
          @if (item.account) { <span class="mono">{{ item.account.code }}</span> - {{ item.account.name_ar || item.account.name }} }
        </td>
        <td>{{ item.branch?.name_ar || item.branch?.name || '—' }}</td>
        <td class="amount">{{ item.max_amount | number:'1.2-2' }}</td>
        <td class="amount" [class.text-danger]="item.journal_balance < 0">{{ item.journal_balance | number:'1.2-2' }}</td>
        <td>
          <p-tag [value]="item.is_active ? ('COMMON.ACTIVE' | translate) : ('COMMON.INACTIVE' | translate)"
                 [severity]="item.is_active ? 'success' : 'danger'" />
        </td>
        <td>
          <div class="action-buttons">
            <p-button icon="pi pi-list" [rounded]="true" [text]="true" severity="info" (onClick)="viewTransactions(item)" />
            <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="edit(item)" />
            <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="delete(item)" />
          </div>
        </td>
      </tr>
    </ng-template>
  <app-data-table
    [data]="items()"
    [loading]="!!(loading$ | async)"
    [error]="(error$ | async) ?? null"
    (retry)="retry()"
    [columns]="columns"
    [bodyTpl]="bodyTpl"
  >
  </app-data-table>
</div>

<!-- Create/Edit Dialog -->
<app-form-dialog
  [(visible)]="dialogVisible"
  [header]="editing() ? ('PETTY_CASH.EDIT' | translate) : ('PETTY_CASH.NEW' | translate)"
  [saving]="!!(saving$ | async)"
  (save)="onSave()"
>
  <form [formGroup]="form" class="form-grid">
    <div class="form-field">
      <label>{{ 'PETTY_CASH.NAME' | translate }} *</label>
      <input pInputText formControlName="name" />
    </div>
    <div class="form-field">
      <label>{{ 'PETTY_CASH.NAME_EN' | translate }}</label>
      <input pInputText formControlName="name_en" />
    </div>
    <div class="form-field">
      <label>{{ 'PETTY_CASH.ACCOUNT' | translate }}</label>
      <p-select formControlName="account_id" [options]="detailAccounts()" optionLabel="name_ar" optionValue="id"
                [filter]="true" filterBy="name_ar,name_en,code" [placeholder]="'COMMON.AUTO_CREATED' | translate"
                [showClear]="true" [style]="{ width: '100%' }" appendTo="body">
        <ng-template #item let-a><span>{{ a.code }} - {{ a.name_ar }}</span></ng-template>
        <ng-template #selectedOption let-a><span>{{ a.code }} - {{ a.name_ar }}</span></ng-template>
      </p-select>
    </div>
    <div class="form-field">
      <label>{{ 'PETTY_CASH.BRANCH' | translate }}</label>
      <p-select formControlName="branch_id" [options]="(branches$ | async) || []" optionLabel="name" optionValue="id"
                [filter]="true" [showClear]="true" [placeholder]="'PETTY_CASH.SELECT_BRANCH' | translate"
                [style]="{ width: '100%' }" appendTo="body" />
    </div>
    <div class="form-field">
      <label>{{ 'PETTY_CASH.MAX_AMOUNT' | translate }} *</label>
      <p-inputNumber formControlName="max_amount" [min]="0" mode="decimal" [minFractionDigits]="2" [style]="{ width: '100%' }" />
    </div>
    <div class="form-field switch-field">
      <label>{{ 'COMMON.ACTIVE' | translate }}</label>
      <p-toggleSwitch formControlName="is_active" />
    </div>
  </form>
</app-form-dialog>

<!-- Transactions Dialog -->
<p-dialog [header]="'PETTY_CASH.TRANSACTIONS' | translate"
          [(visible)]="txDialogVisible" [modal]="true" [style]="{ width: '750px' }" [closable]="true">
  @if (selectedItem(); as pc) {
    <div class="tx-header-info">
      <span><strong>{{ pc.name }}</strong></span>
      <span>{{ 'PETTY_CASH.CURRENT_BALANCE' | translate }}: <strong [class.text-danger]="selectedBalance() < 0">{{ selectedBalance() | number:'1.2-2' }}</strong></span>
    </div>
  }

  <div class="tx-form">
    <form [formGroup]="txForm" class="tx-form-row">
      <p-select formControlName="type" [options]="txTypeOptions" optionLabel="label" optionValue="value" [style]="{ width: '130px' }" />
      <p-inputNumber formControlName="amount" [min]="0" mode="decimal" [minFractionDigits]="2" [style]="{ width: '130px' }" [placeholder]="'PETTY_CASH.AMOUNT_COL' | translate" />
      <p-datepicker formControlName="date" dateFormat="yy-mm-dd" [showIcon]="true" [style]="{ width: '160px' }" />
      <input pInputText formControlName="description" [placeholder]="'PETTY_CASH.DESCRIPTION' | translate" style="flex: 1" />
      <p-button icon="pi pi-plus" (onClick)="addTransaction()" [loading]="!!(saving$ | async)" />
    </form>
  </div>

  <p-table [value]="(transactions$ | async) || []" styleClass="p-datatable-sm" [paginator]="false">
    <ng-template #header>
      <tr>
        <th>{{ 'PETTY_CASH.TYPE' | translate }}</th>
        <th>{{ 'PETTY_CASH.AMOUNT_COL' | translate }}</th>
        <th>{{ 'PETTY_CASH.DATE' | translate }}</th>
        <th>{{ 'PETTY_CASH.DESCRIPTION' | translate }}</th>
        <th></th>
      </tr>
    </ng-template>
    <ng-template #body let-tx>
      <tr>
        <td>
          <p-tag [value]="tx.type === 'receipt' ? ('PETTY_CASH.TYPE_RECEIPT' | translate) : ('PETTY_CASH.TYPE_PAYMENT' | translate)"
                 [severity]="tx.type === 'receipt' ? 'success' : 'danger'" />
        </td>
        <td class="amount">{{ tx.amount | number:'1.2-2' }}</td>
        <td>{{ tx.date }}</td>
        <td>{{ tx.description }}</td>
        <td>
          <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" size="small" (onClick)="deleteTx(tx.id)" />
        </td>
      </tr>
    </ng-template>
    <ng-template #emptymessage>
      <tr><td colspan="5" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
    </ng-template>
  </p-table>

  <h4 style="margin: 1rem 0 0.5rem;">{{ 'PETTY_CASH.JOURNAL_ENTRIES' | translate }}</h4>
  <p-table [value]="accountEntries()" styleClass="p-datatable-sm" [paginator]="false" [loading]="loadingEntries()">
    <ng-template #header>
      <tr>
        <th>{{ 'PETTY_CASH.DATE' | translate }}</th>
        <th>{{ 'PETTY_CASH.ENTRY_NUMBER' | translate }}</th>
        <th>{{ 'PETTY_CASH.DESCRIPTION' | translate }}</th>
        <th>{{ 'PETTY_CASH.DEBIT' | translate }}</th>
        <th>{{ 'PETTY_CASH.CREDIT' | translate }}</th>
      </tr>
    </ng-template>
    <ng-template #body let-entry>
      <tr>
        <td>{{ entry.date }}</td>
        <td>{{ entry.entry_number }}</td>
        <td>{{ entry.description }}</td>
        <td class="amount">{{ entry.debit | number:'1.2-2' }}</td>
        <td class="amount">{{ entry.credit | number:'1.2-2' }}</td>
      </tr>
    </ng-template>
    <ng-template #emptymessage>
      <tr><td colspan="5" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
    </ng-template>
    <ng-template #footer>
      <tr class="font-bold">
        <td colspan="3" style="text-align: end;">{{ 'PETTY_CASH.CURRENT_BALANCE' | translate }}</td>
        <td class="amount" [class.text-danger]="selectedBalance() < 0" colspan="2">{{ selectedBalance() | number:'1.2-2' }}</td>
      </tr>
    </ng-template>
  </p-table>
</p-dialog>
