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

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

  <ng-template #bodyTpl let-item>
      <tr>
        <td>{{ item.code }}</td>
        <td>{{ item.name_ar || item.name }}</td>
        <td><p-tag [value]="item.depreciation_method" severity="info" /></td>
        <td>{{ item.useful_life_months }} {{ 'ASSET_CATEGORIES.MONTHS' | translate }}</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()" (retry)="retry()" [columns]="columns" [bodyTpl]="bodyTpl">
  </app-data-table>
</div>

<app-form-dialog [(visible)]="dialogVisible" [header]="editing() ? ('ASSET_CATEGORIES.EDIT' | translate) : ('ASSET_CATEGORIES.NEW' | translate)" [saving]="saving()" (save)="onSave()" [width]="'700px'">
  <form [formGroup]="form" class="dialog-form">
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'ASSET_CATEGORIES.NAME_AR' | translate }} *</label>
        <input pInputText formControlName="name_ar" />
      </div>
      <div class="form-field">
        <label>{{ 'ASSET_CATEGORIES.NAME_EN' | translate }}</label>
        <input pInputText formControlName="name" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'ASSET_CATEGORIES.CODE' | translate }} *</label>
        <input pInputText formControlName="code" />
      </div>
      <div class="form-field">
        <label>{{ 'ASSET_CATEGORIES.METHOD' | translate }} *</label>
        <p-select formControlName="depreciation_method" [options]="depMethodOptions" optionLabel="label" optionValue="value" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'ASSET_CATEGORIES.USEFUL_LIFE' | translate }} *</label>
        <p-inputNumber formControlName="useful_life_months" [min]="1" />
      </div>
      <div class="form-field switch-field-wrap">
        <label>{{ 'COMMON.ACTIVE' | translate }}</label>
        <p-toggleSwitch formControlName="is_active" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'ASSET_CATEGORIES.ASSET_ACCOUNT' | translate }} *</label>
        <p-select formControlName="asset_account_id" [options]="(accounts$ | async) || []"
          optionLabel="name" optionValue="id" [filter]="true" filterBy="name,code"
          [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
      </div>
      <div class="form-field">
        <label>{{ 'ASSET_CATEGORIES.DEPRECIATION_ACCOUNT' | translate }} *</label>
        <p-select formControlName="depreciation_account_id" [options]="(accounts$ | async) || []"
          optionLabel="name" optionValue="id" [filter]="true" filterBy="name,code"
          [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'ASSET_CATEGORIES.ACCUMULATED_ACCOUNT' | translate }} *</label>
        <p-select formControlName="accumulated_depreciation_account_id" [options]="(accounts$ | async) || []"
          optionLabel="name" optionValue="id" [filter]="true" filterBy="name,code"
          [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
      </div>
      <div class="form-field"></div>
    </div>
  </form>
</app-form-dialog>
