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

<div class="page-container">
  <app-page-header title="FIXED_ASSETS.TITLE" subtitle="FIXED_ASSETS.SUBTITLE" (refresh)="retry()">
    <p-button [label]="'FIXED_ASSETS.RUN_DEPRECIATION' | translate" icon="pi pi-calculator" severity="secondary" [outlined]="true" (onClick)="openDepreciation()" />
    <p-button [label]="'FIXED_ASSETS.NEW' | translate" icon="pi pi-plus" (onClick)="openNew()" />
  </app-page-header>

  <div class="filter-bar">
    <p-select [options]="statusOptions" optionLabel="label" optionValue="value"
      [ngModel]="statusFilter()" (ngModelChange)="onStatusFilter($event)"
      [placeholder]="'COMMON.FILTER' | translate" />
  </div>

  <ng-template #bodyTpl let-item>
      <tr>
        <td>{{ item.code }}</td>
        <td class="clickable" (click)="viewDetail(item)">{{ item.name_ar || item.name }}</td>
        <td>{{ item.asset_category?.name_ar || item.asset_category?.name || '-' }}</td>
        <td>{{ item.purchase_cost | number:'1.2-2' }}</td>
        <td>{{ item.current_value | number:'1.2-2' }}</td>
        <td><p-tag [value]="item.status" [severity]="getStatusSeverity(item.status)" /></td>
        <td>
          <div class="action-buttons">
            <p-button icon="pi pi-eye" [rounded]="true" [text]="true" severity="info" (onClick)="viewDetail(item)" pTooltip="View" />
            @if (item.status === 'active') {
              <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="edit(item)" />
              <p-button icon="pi pi-ban" [rounded]="true" [text]="true" severity="warn" (onClick)="dispose(item)" pTooltip="Dispose" />
              <p-button icon="pi pi-dollar" [rounded]="true" [text]="true" severity="success" (onClick)="openSell(item)" pTooltip="Sell" />
              <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="delete(item)" />
            }
          </div>
        </td>
      </tr>
    </ng-template>
  <app-data-table
    [data]="tableData()"
    [loading]="tableLoading()"
    [lazy]="true"
    [totalRecords]="totalRecords()"
    [first]="first"
    (onLazyLoad)="onPageChange($event)"
    (retry)="retry()"
    [columns]="columns"
    [bodyTpl]="bodyTpl"
  >
  </app-data-table>
</div>

<!-- Create/Edit Dialog -->
<app-form-dialog
  [(visible)]="dialogVisible"
  [header]="editing() ? ('FIXED_ASSETS.EDIT' | translate) : ('FIXED_ASSETS.NEW' | translate)"
  [saving]="saving()"
  (save)="onSave()"
  width="850px"
>
  <form [formGroup]="form" class="dialog-form">
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'FIXED_ASSETS.NAME_AR' | translate }} *</label>
        <input pInputText formControlName="name_ar" />
      </div>
      <div class="form-field">
        <label>{{ 'FIXED_ASSETS.NAME_EN' | translate }}</label>
        <input pInputText formControlName="name" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'FIXED_ASSETS.CODE' | translate }} *</label>
        <input pInputText formControlName="code" />
      </div>
      <div class="form-field">
        <label>{{ 'FIXED_ASSETS.CATEGORY' | translate }} *</label>
        <p-select formControlName="asset_category_id" [options]="categories()" optionLabel="name_ar" optionValue="id"
          [filter]="true" [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'FIXED_ASSETS.SERIAL_NUMBER' | translate }}</label>
        <input pInputText formControlName="serial_number" />
      </div>
      <div class="form-field">
        <label>{{ 'FIXED_ASSETS.LOCATION' | translate }}</label>
        <input pInputText formControlName="location" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'FIXED_ASSETS.PURCHASE_DATE' | translate }} *</label>
        <p-datePicker formControlName="purchase_date" dateFormat="yy-mm-dd" appendTo="body" />
      </div>
      <div class="form-field">
        <label>{{ 'FIXED_ASSETS.IN_SERVICE_DATE' | translate }}</label>
        <p-datePicker formControlName="in_service_date" dateFormat="yy-mm-dd" appendTo="body" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'FIXED_ASSETS.PURCHASE_COST' | translate }} *</label>
        <p-inputNumber formControlName="purchase_cost" [mode]="'decimal'" [minFractionDigits]="2" />
      </div>
      <div class="form-field">
        <label>{{ 'FIXED_ASSETS.SALVAGE_VALUE' | translate }}</label>
        <p-inputNumber formControlName="salvage_value" [mode]="'decimal'" [minFractionDigits]="2" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'FIXED_ASSETS.USEFUL_LIFE' | translate }} *</label>
        <p-inputNumber formControlName="useful_life_months" [min]="1" />
      </div>
      <div class="form-field">
        <label>{{ 'FIXED_ASSETS.DEP_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>{{ 'FIXED_ASSETS.BRANCH' | translate }}</label>
        <p-select formControlName="branch_id" [options]="(branches$ | async) || []" optionLabel="name" optionValue="id"
          [filter]="true" [showClear]="true" [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
      </div>
      <div class="form-field">
        <label>{{ 'FIXED_ASSETS.PARTNER' | translate }}</label>
        <p-select formControlName="partner_id" [options]="(partners$ | async) || []" optionLabel="name" optionValue="id"
          [filter]="true" [showClear]="true" [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
      </div>
    </div>
    <div class="form-field">
      <label>{{ 'FIXED_ASSETS.NOTES' | translate }}</label>
      <textarea pTextarea formControlName="notes" rows="3"></textarea>
    </div>
  </form>
</app-form-dialog>

<!-- Detail Dialog -->
<p-dialog [header]="'FIXED_ASSETS.VIEW' | translate" [(visible)]="detailVisible" [modal]="true" [style]="{ width: '700px' }">
  @if (detailAsset()) {
    <div class="detail-grid">
      <div class="detail-row"><span class="detail-label">{{ 'FIXED_ASSETS.CODE' | translate }}:</span><span>{{ detailAsset()!.code }}</span></div>
      <div class="detail-row"><span class="detail-label">{{ 'FIXED_ASSETS.NAME' | translate }}:</span><span>{{ detailAsset()!.name_ar || detailAsset()!.name }}</span></div>
      <div class="detail-row"><span class="detail-label">{{ 'FIXED_ASSETS.PURCHASE_COST' | translate }}:</span><span>{{ detailAsset()!.purchase_cost | number:'1.2-2' }}</span></div>
      <div class="detail-row"><span class="detail-label">{{ 'FIXED_ASSETS.CURRENT_VALUE' | translate }}:</span><span>{{ detailAsset()!.current_value | number:'1.2-2' }}</span></div>
      <div class="detail-row"><span class="detail-label">{{ 'FIXED_ASSETS.ACCUMULATED_DEP' | translate }}:</span><span>{{ detailAsset()!.accumulated_depreciation | number:'1.2-2' }}</span></div>
      <div class="detail-row"><span class="detail-label">{{ 'COMMON.STATUS' | translate }}:</span><span><p-tag [value]="detailAsset()!.status" [severity]="getStatusSeverity(detailAsset()!.status)" /></span></div>
    </div>
    @if (detailAsset()!.depreciation_entries?.length) {
      <h4 class="section-title">{{ 'FIXED_ASSETS.DEPRECIATION_SCHEDULE' | translate }}</h4>
      <div class="dep-table">
        <table>
          <thead><tr><th>{{ 'FIXED_ASSETS.PERIOD' | translate }}</th><th>{{ 'FIXED_ASSETS.AMOUNT' | translate }}</th></tr></thead>
          <tbody>
            @for (entry of detailAsset()!.depreciation_entries; track $index) {
              <tr><td>{{ entry.period_date || entry.date }}</td><td>{{ entry.amount | number:'1.2-2' }}</td></tr>
            }
          </tbody>
        </table>
      </div>
    }
  }
</p-dialog>

<!-- Sell Dialog -->
<p-dialog [header]="'FIXED_ASSETS.SELL' | translate" [(visible)]="sellDialogVisible" [modal]="true" [style]="{ width: '400px' }">
  <form [formGroup]="sellForm" class="dialog-form">
    <div class="form-field">
      <label>{{ 'FIXED_ASSETS.SALE_AMOUNT' | translate }} *</label>
      <p-inputNumber formControlName="sale_amount" [mode]="'decimal'" [minFractionDigits]="2" />
    </div>
  </form>
  <ng-template #footer>
    <p-button [label]="'COMMON.CANCEL' | translate" icon="pi pi-times" severity="secondary" (onClick)="sellDialogVisible.set(false)" />
    <p-button [label]="'FIXED_ASSETS.SELL' | translate" icon="pi pi-check" (onClick)="onSell()" [loading]="saving()" />
  </ng-template>
</p-dialog>

<!-- Run Depreciation Dialog -->
<p-dialog [header]="'FIXED_ASSETS.RUN_DEPRECIATION' | translate" [(visible)]="depDialogVisible" [modal]="true" [style]="{ width: '400px' }">
  <form [formGroup]="depForm" class="dialog-form">
    <div class="form-field">
      <label>{{ 'FIXED_ASSETS.PERIOD_DATE' | translate }} *</label>
      <p-datePicker formControlName="period_date" dateFormat="yy-mm-dd" appendTo="body" />
    </div>
  </form>
  <ng-template #footer>
    <p-button [label]="'COMMON.CANCEL' | translate" icon="pi pi-times" severity="secondary" (onClick)="depDialogVisible.set(false)" />
    <p-button [label]="'FIXED_ASSETS.RUN_DEPRECIATION' | translate" icon="pi pi-calculator" (onClick)="onRunDepreciation()" [loading]="saving()" />
  </ng-template>
</p-dialog>
