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

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

  <ng-template #bodyTpl let-item>
      <tr>
        <td>{{ item.bank_name }}</td>
        <td class="mono">{{ item.account_number }}</td>
        <td class="mono">{{ item.iban }}</td>
        <td>
          @if (item.account) { <span class="mono">{{ item.account.code }}</span> - {{ item.account.name_ar || item.account.name }} }
        </td>
        <td class="amount" [class.text-danger]="item.journal_balance < 0">{{ item.journal_balance | number:'1.2-2' }}</td>
        <td>{{ item.currency?.code || '-' }}</td>
        <td>
          <div class="branch-badges">
            @for (branch of (item.branches || []); track branch.id) {
              <p-tag [value]="branch.name" severity="info" />
            }
            @if (!item.branches || item.branches.length === 0) {
              <span class="text-text-muted text-xs">{{ 'USERS.ALL_BRANCHES' | translate }}</span>
            }
          </div>
        </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-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" [columns]="columns" (retry)="retry()" [bodyTpl]="bodyTpl">
  </app-data-table>
</div>

<app-form-dialog [(visible)]="dialogVisible" [header]="editing() ? ('BANK_ACCOUNTS.EDIT' | translate) : ('BANK_ACCOUNTS.NEW' | translate)" [saving]="!!(saving$ | async)" (save)="onSave()" [width]="'600px'">
  <form [formGroup]="form" class="form-grid">
    <div class="form-field">
      <label>{{ 'BANK_ACCOUNTS.BANK_NAME' | translate }} *</label>
      <input pInputText formControlName="bank_name" />
    </div>
    <div class="form-field">
      <label>{{ 'BANK_ACCOUNTS.BANK_NAME_EN' | translate }}</label>
      <input pInputText formControlName="bank_name_en" />
    </div>
    <div class="form-field">
      <label>{{ 'BANK_ACCOUNTS.ACCOUNT_NUMBER' | translate }} *</label>
      <input pInputText formControlName="account_number" />
    </div>
    <div class="form-field">
      <label>{{ 'BANK_ACCOUNTS.IBAN' | translate }}</label>
      <input pInputText formControlName="iban" />
    </div>
    <div class="form-field">
      <label>{{ 'BANK_ACCOUNTS.SWIFT_CODE' | translate }}</label>
      <input pInputText formControlName="swift_code" />
    </div>
    <div class="form-field">
      <label>{{ 'BANK_ACCOUNTS.LINKED_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 #selectedItem let-a><span>{{ a.code }} - {{ a.name_ar }}</span></ng-template>
      </p-select>
    </div>
    <div class="form-field">
      <label>{{ 'BANK_ACCOUNTS.CURRENCY' | translate }}</label>
      <p-select formControlName="currency_id" [options]="(currencies$ | async) || []" optionLabel="name" optionValue="id"
                [showClear]="true" [placeholder]="'COMMON.SELECT' | translate" [style]="{ width: '100%' }" appendTo="body" />
    </div>
    <div class="form-field">
      <label>{{ 'BANK_ACCOUNTS.BRANCHES' | translate }}</label>
      <p-multiSelect
        formControlName="branch_ids"
        [options]="(branches$ | async) || []"
        optionLabel="name"
        optionValue="id"
        [placeholder]="'USERS.SELECT_BRANCHES' | translate"
        [showClear]="true"
        display="chip"
        [style]="{ width: '100%' }"
        appendTo="body"
      />
      <small class="text-text-muted text-[0.65rem]">{{ 'USERS.BRANCHES_HINT' | translate }}</small>
    </div>
    <div class="form-field switch-field">
      <label>{{ 'COMMON.ACTIVE' | translate }}</label>
      <p-toggleSwitch formControlName="is_active" />
    </div>
  </form>
</app-form-dialog>
