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

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

  <ng-template #bodyTpl let-t>
      <tr>
        <td>{{ t.name_ar || t.name }}</td>
        <td><p-tag [value]="t.entry_type" severity="info" /></td>
        <td>{{ t.lines?.length || 0 }}</td>
        <td><p-tag [value]="t.is_active ? 'Active' : 'Inactive'" [severity]="t.is_active ? 'success' : 'danger'" /></td>
        <td>
          <div class="action-buttons">
            <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="edit(t)" />
            <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="delete(t)" />
          </div>
        </td>
      </tr>
    </ng-template>
  <app-data-table [data]="templates()" [loading]="tableLoading()" [lazy]="true" [totalRecords]="totalRecords()" [first]="first" (onLazyLoad)="onPageChange($event)" (retry)="retry()" [columns]="columns" [bodyTpl]="bodyTpl">
  </app-data-table>
</div>

<app-form-dialog [(visible)]="dialogVisible" [header]="editing() ? ('ENTRY_TEMPLATES.EDIT' | translate) : ('ENTRY_TEMPLATES.NEW' | translate)" [saving]="saving()" (save)="onSave()" [width]="'800px'">
  <form [formGroup]="form" class="dialog-form">
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'ENTRY_TEMPLATES.NAME_AR' | translate }} *</label>
        <input pInputText formControlName="name_ar" />
      </div>
      <div class="form-field">
        <label>{{ 'ENTRY_TEMPLATES.NAME_EN' | translate }}</label>
        <input pInputText formControlName="name" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'ENTRY_TEMPLATES.TYPE' | translate }} *</label>
        <p-select formControlName="entry_type" [options]="entryTypeOptions" optionLabel="label" optionValue="value" />
      </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>{{ 'ENTRY_TEMPLATES.DESCRIPTION_AR' | translate }}</label>
        <input pInputText formControlName="description_ar" />
      </div>
      <div class="form-field">
        <label>{{ 'ENTRY_TEMPLATES.DESCRIPTION_EN' | translate }}</label>
        <input pInputText formControlName="description" />
      </div>
    </div>

    <h4 class="section-title">{{ 'ENTRY_TEMPLATES.LINES' | translate }}</h4>
    <div class="lines-table">
      <table>
        <thead>
          <tr>
            <th>{{ 'JOURNAL_ENTRIES.ACCOUNT' | translate }} *</th>
            <th>{{ 'JOURNAL_ENTRIES.DEBIT' | translate }}</th>
            <th>{{ 'JOURNAL_ENTRIES.CREDIT' | translate }}</th>
            <th>{{ 'JOURNAL_ENTRIES.COST_CENTER' | translate }}</th>
            <th>{{ 'JOURNAL_ENTRIES.LINE_DESC' | translate }}</th>
            <th></th>
          </tr>
        </thead>
        <tbody formArrayName="lines">
          @for (line of lines.controls; track line; let i = $index) {
            <tr [formGroupName]="$index">
              <td>
                <p-select formControlName="account_id" [options]="(accounts$ | async) || []"
                  optionLabel="name" optionValue="id" [filter]="true" filterBy="name,code"
                  [placeholder]="'JOURNAL_ENTRIES.SELECT_ACCOUNT' | translate" appendTo="body" />
              </td>
              <td><p-inputNumber formControlName="debit" [mode]="'decimal'" [minFractionDigits]="2" /></td>
              <td><p-inputNumber formControlName="credit" [mode]="'decimal'" [minFractionDigits]="2" /></td>
              <td>
                <p-select formControlName="cost_center_id" [options]="(costCenters$ | async) || []"
                  optionLabel="name" optionValue="id" [filter]="true" [showClear]="true"
                  [placeholder]="'JOURNAL_ENTRIES.OPTIONAL' | translate" appendTo="body" />
              </td>
              <td><input pInputText formControlName="description_ar" /></td>
              <td>
                @if (lines.length > 1) {
                  <p-button icon="pi pi-times" [rounded]="true" [text]="true" severity="danger" size="small" (onClick)="removeLine(i)" />
                }
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
    <p-button [label]="'JOURNAL_ENTRIES.ADD_LINE' | translate" icon="pi pi-plus" severity="secondary" [outlined]="true" size="small" (onClick)="addLine()" />
  </form>
</app-form-dialog>
