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

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

  <ng-template #bodyTpl let-item>
    <tr>
      <td>{{ item.code }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.type_label }}</td>
      <td>{{ getParentName(item.parent_warehouse_id) }}</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)" [pTooltip]="'COMMON.EDIT' | translate" />
          <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="delete(item)" [pTooltip]="'COMMON.DELETE' | translate" />
        </div>
      </td>
    </tr>
  </ng-template>

  <app-data-table
    [data]="(items$ | async) || []"
    [loading]="!!(loading$ | async)"
    [error]="(error$ | async) ?? null"
    (retry)="retry()"
    [columns]="columns"
    [bodyTpl]="bodyTpl"
  />
</div>

<app-form-dialog
  [(visible)]="dialogVisible"
  [header]="editing() ? ('WAREHOUSES.EDIT' | translate) : ('WAREHOUSES.NEW' | translate)"
  [saving]="!!(saving$ | async)"
  (save)="onSave()"
>
  <form [formGroup]="form" class="dialog-form">
    <div class="form-field">
      <label>{{ 'WAREHOUSES.NAME' | translate }} *</label>
      <input pInputText formControlName="name" />
      @if (form.get('name')?.touched && form.get('name')?.hasError('required')) {
        <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
      }
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'WAREHOUSES.NAME_AR' | translate }}</label>
        <input pInputText formControlName="name_ar" />
      </div>
      <div class="form-field">
        <label>{{ 'WAREHOUSES.NAME_EN' | translate }}</label>
        <input pInputText formControlName="name_en" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'WAREHOUSES.TYPE' | translate }}</label>
        <p-select formControlName="type" [options]="typeOptions" optionLabel="label" optionValue="value" />
      </div>
      <div class="form-field">
        <label>{{ 'WAREHOUSES.PARENT' | translate }}</label>
        <p-select formControlName="parent_warehouse_id" [options]="parentWarehouses()" optionLabel="name" optionValue="id"
          [filter]="true" filterBy="name,code" [showClear]="true" [placeholder]="'WAREHOUSES.SELECT_PARENT' | translate" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'WAREHOUSES.BRANCH' | translate }}</label>
        <p-select formControlName="branch_id" [options]="(branches$ | async) || []" optionLabel="name" optionValue="id"
          [filter]="true" [showClear]="true" [placeholder]="'WAREHOUSES.SELECT_BRANCH' | translate" />
      </div>
      <div class="form-field">
        <label>{{ 'WAREHOUSES.ACCOUNT' | translate }}</label>
        <p-select formControlName="account_id" [options]="detailAccounts()" optionLabel="name" optionValue="id"
          [filter]="true" filterBy="name,code" [showClear]="true" [placeholder]="'WAREHOUSES.SELECT_ACCOUNT' | translate" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'WAREHOUSES.MANAGER' | translate }}</label>
        <input pInputText formControlName="manager_name" />
      </div>
      <div class="form-field">
        <label>{{ 'WAREHOUSES.PHONE' | translate }}</label>
        <input pInputText formControlName="phone" />
      </div>
    </div>
    <div class="form-field">
      <label>{{ 'WAREHOUSES.ADDRESS' | translate }}</label>
      <input pInputText formControlName="address" />
    </div>
    <div class="form-field">
      <label>{{ 'WAREHOUSES.NOTES' | translate }}</label>
      <textarea pTextarea formControlName="notes" rows="3"></textarea>
    </div>
    <div class="form-row">
      <div class="form-field switch-field">
        <label>{{ 'COMMON.ACTIVE' | translate }}</label>
        <p-toggleSwitch formControlName="is_active" />
      </div>
      <div class="form-field switch-field">
        <label>{{ 'WAREHOUSES.ALLOW_NEGATIVE' | translate }}</label>
        <p-toggleSwitch formControlName="allow_negative_stock" />
      </div>
    </div>
  </form>
</app-form-dialog>
