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

<app-page-header
  title="HR.PAYROLL.TITLE"
  subtitle="HR.PAYROLL.SUBTITLE"
  (refresh)="loadPage()"
>
  <p-button
    [label]="'HR.PAYROLL.NEW' | translate"
    icon="pi pi-plus"
    (onClick)="openNew()"
    severity="success"
  />
</app-page-header>

<p-table
  [value]="tableData()"
  [loading]="tableLoading()"
  [paginator]="true"
  [rows]="rows"
  [totalRecords]="totalRecords()"
  [lazy]="true"
  (onLazyLoad)="onPageChange($event)"
  [first]="first"
  [rowsPerPageOptions]="[10, 25, 50]"
  styleClass="p-datatable-sm p-datatable-striped"
  [tableStyle]="{ 'min-width': '70rem' }"
>
  <ng-template pTemplate="header">
    <tr>
      <th>{{ 'HR.PAYROLL.CODE' | translate }}</th>
      <th>{{ 'HR.PAYROLL.PERIOD_START' | translate }}</th>
      <th>{{ 'HR.PAYROLL.PERIOD_END' | translate }}</th>
      <th>{{ 'HR.PAYROLL.MONTH_YEAR' | translate }}</th>
      <th>{{ 'HR.PAYROLL.EMPLOYEE_COUNT' | translate }}</th>
      <th>{{ 'HR.PAYROLL.TOTAL_EARNINGS' | translate }}</th>
      <th>{{ 'HR.PAYROLL.TOTAL_DEDUCTIONS' | translate }}</th>
      <th>{{ 'HR.PAYROLL.NET_SALARY' | translate }}</th>
      <th>{{ 'COMMON.STATUS' | translate }}</th>
      <th>{{ 'COMMON.ACTIONS' | translate }}</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <td>{{ item.code }}</td>
      <td>{{ item.period_start }}</td>
      <td>{{ item.period_end }}</td>
      <td>{{ item.month }}/{{ item.year }}</td>
      <td>{{ item.employee_count }}</td>
      <td>{{ item.total_earnings | number:'1.2-2' }}</td>
      <td>{{ item.total_deductions | number:'1.2-2' }}</td>
      <td>{{ item.net_salary | number:'1.2-2' }}</td>
      <td>
        <p-tag [value]="item.status" [severity]="$any(getStatusSeverity(item.status))"></p-tag>
      </td>
      <td>
        <div class="flex gap-2">
          @if (item.status === 'draft') {
            <p-button
              icon="pi pi-calculator"
              [rounded]="true"
              [text]="true"
              severity="info"
              [pTooltip]="'HR.PAYROLL.CALCULATE' | translate"
              (onClick)="calculatePayroll(item)"
              [loading]="processing()"
            />
          }
          @if (item.status === 'calculated') {
            <p-button
              icon="pi pi-check-circle"
              [rounded]="true"
              [text]="true"
              severity="success"
              [pTooltip]="'HR.PAYROLL.APPROVE' | translate"
              (onClick)="approvePayroll(item)"
              [loading]="processing()"
            />
          }
          @if (item.status === 'approved') {
            <p-button
              icon="pi pi-send"
              [rounded]="true"
              [text]="true"
              severity="warn"
              [pTooltip]="'HR.PAYROLL.POST' | translate"
              (onClick)="postPayroll(item)"
              [loading]="processing()"
            />
          }
          <p-button
            icon="pi pi-pencil"
            [rounded]="true"
            [text]="true"
            severity="info"
            (onClick)="editItem(item)"
          />
          @if (item.status === 'draft') {
            <p-button
              icon="pi pi-trash"
              [rounded]="true"
              [text]="true"
              severity="danger"
              (onClick)="deleteItem(item)"
            />
          }
        </div>
      </td>
    </tr>
  </ng-template>
  <ng-template pTemplate="emptymessage">
    <tr>
      <td colspan="10" class="text-center p-4">{{ 'COMMON.NO_DATA' | translate }}</td>
    </tr>
  </ng-template>
</p-table>

<p-dialog
  [header]="
    editingItem()
      ? ('HR.PAYROLL.EDIT' | translate)
      : ('HR.PAYROLL.NEW' | translate)
  "
  [(visible)]="dialogVisible"
  [modal]="true"
  [style]="{ width: '550px' }"
  [closable]="true"
>
  <form [formGroup]="form" (ngSubmit)="onSave()">
    <div class="flex flex-column gap-3 pt-3">
      <div class="flex gap-3">
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.PAYROLL.PERIOD_START' | translate }} *</label>
          <p-datePicker formControlName="period_start" dateFormat="yy-mm-dd" [showIcon]="true"></p-datePicker>
          @if (form.get('period_start')?.touched && form.get('period_start')?.hasError('required')) {
            <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
          }
        </div>
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.PAYROLL.PERIOD_END' | translate }} *</label>
          <p-datePicker formControlName="period_end" dateFormat="yy-mm-dd" [showIcon]="true"></p-datePicker>
          @if (form.get('period_end')?.touched && form.get('period_end')?.hasError('required')) {
            <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
          }
        </div>
      </div>
      <div class="flex gap-3">
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.PAYROLL.MONTH' | translate }} *</label>
          <p-inputNumber formControlName="month" [min]="1" [max]="12" [showButtons]="true"></p-inputNumber>
          @if (form.get('month')?.touched && form.get('month')?.hasError('required')) {
            <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
          }
        </div>
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.PAYROLL.YEAR' | translate }} *</label>
          <p-inputNumber formControlName="year" [min]="2020" [max]="2100" [showButtons]="true" [useGrouping]="false"></p-inputNumber>
          @if (form.get('year')?.touched && form.get('year')?.hasError('required')) {
            <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
          }
        </div>
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.PAYROLL.NOTES' | translate }}</label>
        <textarea pTextarea formControlName="notes" rows="3"></textarea>
      </div>
    </div>
  </form>
  <ng-template pTemplate="footer">
    <p-button
      [label]="'COMMON.CANCEL' | translate"
      icon="pi pi-times"
      [text]="true"
      (onClick)="dialogVisible.set(false)"
    />
    <p-button
      [label]="'COMMON.SAVE' | translate"
      icon="pi pi-check"
      (onClick)="onSave()"
      [loading]="saving()"
    />
  </ng-template>
</p-dialog>
