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

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

  <ng-template #bodyTpl let-e>
      <tr>
        <td>{{ e.name_ar || e.name }}</td>
        <td>{{ e.entry_template?.name_ar || e.entry_template?.name || '-' }}</td>
        <td><p-tag [value]="e.frequency" severity="info" /></td>
        <td>{{ e.next_execution_date || '-' }}</td>
        <td>{{ e.execution_count }}{{ e.max_executions ? ' / ' + e.max_executions : '' }}</td>
        <td><p-tag [value]="e.is_active ? ('COMMON.ACTIVE' | translate) : ('COMMON.INACTIVE' | translate)" [severity]="e.is_active ? 'success' : 'danger'" /></td>
        <td>
          <div class="action-buttons">
            <p-button icon="pi pi-play" [rounded]="true" [text]="true" severity="success" (onClick)="execute(e)" pTooltip="Execute" />
            <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="edit(e)" />
            <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="delete(e)" />
          </div>
        </td>
      </tr>
    </ng-template>
  <app-data-table
    [data]="entries()"
    [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() ? ('RECURRING_ENTRIES.EDIT' | translate) : ('RECURRING_ENTRIES.NEW' | translate)"
  [saving]="saving()"
  (save)="onSave()"
  width="600px"
>
  <form [formGroup]="form" class="dialog-form">
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'RECURRING_ENTRIES.NAME_AR' | translate }} *</label>
        <input pInputText formControlName="name_ar" />
      </div>
      <div class="form-field">
        <label>{{ 'RECURRING_ENTRIES.NAME_EN' | translate }}</label>
        <input pInputText formControlName="name" />
      </div>
    </div>
    <div class="form-field">
      <label>{{ 'RECURRING_ENTRIES.TEMPLATE' | translate }} *</label>
      <p-select formControlName="entry_template_id" [options]="templates()" optionLabel="name_ar" optionValue="id"
        [filter]="true" [placeholder]="'RECURRING_ENTRIES.SELECT_TEMPLATE' | translate" appendTo="body" />
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'RECURRING_ENTRIES.FREQUENCY' | translate }} *</label>
        <p-select formControlName="frequency" [options]="frequencyOptions" 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>{{ 'RECURRING_ENTRIES.START_DATE' | translate }} *</label>
        <p-datePicker formControlName="start_date" dateFormat="yy-mm-dd" [showIcon]="true" appendTo="body" />
      </div>
      <div class="form-field">
        <label>{{ 'RECURRING_ENTRIES.END_DATE' | translate }}</label>
        <p-datePicker formControlName="end_date" dateFormat="yy-mm-dd" [showIcon]="true" appendTo="body" />
      </div>
    </div>
    <div class="form-field">
      <label>{{ 'RECURRING_ENTRIES.MAX_EXECUTIONS' | translate }}</label>
      <p-inputNumber formControlName="max_executions" [min]="0" [placeholder]="'RECURRING_ENTRIES.UNLIMITED' | translate" />
    </div>
  </form>
</app-form-dialog>
