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

<app-page-header
  title="HR.ATTENDANCE.TITLE"
  subtitle="HR.ATTENDANCE.SUBTITLE"
  (refresh)="loadPage()"
>
  <div class="flex gap-2 flex-wrap">
    <p-button
      [label]="'HR.ATTENDANCE.CHECK_IN' | translate"
      icon="pi pi-sign-in"
      severity="success"
      (onClick)="checkIn()"
      [loading]="checkingIn()"
    />
    <p-button
      [label]="'HR.ATTENDANCE.CHECK_OUT' | translate"
      icon="pi pi-sign-out"
      severity="warn"
      (onClick)="checkOut()"
      [loading]="checkingOut()"
    />
    <p-button
      [label]="'HR.ATTENDANCE.NEW' | translate"
      icon="pi pi-plus"
      (onClick)="openNew()"
    />
  </div>
</app-page-header>

<!-- Filters -->
<div class="filter-bar">
  <div class="flex gap-2 flex-wrap align-items-end">
    <div class="flex flex-column gap-1">
      <label class="filter-label">{{ 'HR.ATTENDANCE.EMPLOYEE' | translate }}</label>
      <p-select
        [(ngModel)]="filterEmployeeId"
        [options]="employees"
        optionLabel="full_name"
        optionValue="id"
        [showClear]="true"
        [filter]="true"
        [placeholder]="'COMMON.SELECT' | translate"
        [style]="{ width: '200px' }"
      ></p-select>
    </div>
    <div class="flex flex-column gap-1">
      <label class="filter-label">{{ 'HR.ATTENDANCE.DATE_FROM' | translate }}</label>
      <p-datepicker
        [(ngModel)]="filterDateFrom"
        dateFormat="yy-mm-dd"
        [showIcon]="true"
        [style]="{ width: '180px' }"
      ></p-datepicker>
    </div>
    <div class="flex flex-column gap-1">
      <label class="filter-label">{{ 'HR.ATTENDANCE.DATE_TO' | translate }}</label>
      <p-datepicker
        [(ngModel)]="filterDateTo"
        dateFormat="yy-mm-dd"
        [showIcon]="true"
        [style]="{ width: '180px' }"
      ></p-datepicker>
    </div>
    <div class="flex flex-column gap-1">
      <label class="filter-label">{{ 'COMMON.STATUS' | translate }}</label>
      <p-select
        [(ngModel)]="filterStatus"
        [options]="statusOptions"
        optionLabel="label"
        optionValue="value"
        [showClear]="true"
        [placeholder]="'COMMON.SELECT' | translate"
        [style]="{ width: '160px' }"
      ></p-select>
    </div>
    <p-button
      icon="pi pi-search"
      (onClick)="applyFilters()"
      severity="info"
      [style]="{ 'align-self': 'flex-end' }"
    />
    <p-button
      icon="pi pi-filter-slash"
      (onClick)="clearFilters()"
      severity="secondary"
      [outlined]="true"
      [style]="{ 'align-self': 'flex-end' }"
    />
  </div>
</div>

<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': '60rem' }"
>
  <ng-template pTemplate="header">
    <tr>
      <th>{{ 'HR.ATTENDANCE.EMPLOYEE' | translate }}</th>
      <th>{{ 'HR.ATTENDANCE.DATE' | translate }}</th>
      <th>{{ 'HR.ATTENDANCE.CHECK_IN' | translate }}</th>
      <th>{{ 'HR.ATTENDANCE.CHECK_OUT' | translate }}</th>
      <th>{{ 'HR.ATTENDANCE.WORKED_HOURS' | translate }}</th>
      <th>{{ 'HR.ATTENDANCE.OVERTIME_HOURS' | translate }}</th>
      <th>{{ 'HR.ATTENDANCE.LATE_MINUTES' | translate }}</th>
      <th>{{ 'COMMON.STATUS' | translate }}</th>
      <th>{{ 'COMMON.ACTIONS' | translate }}</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <td>{{ item.employee?.full_name || getEmployeeName(item.employee_id) }}</td>
      <td>{{ item.date }}</td>
      <td>{{ item.check_in || '-' }}</td>
      <td>{{ item.check_out || '-' }}</td>
      <td>{{ item.worked_hours != null ? item.worked_hours : '-' }}</td>
      <td>{{ item.overtime_hours != null ? item.overtime_hours : '-' }}</td>
      <td>{{ item.late_minutes != null ? item.late_minutes : '-' }}</td>
      <td>
        <p-tag
          [value]="'HR.ATTENDANCE.STATUS_' + (item.status || 'present').toUpperCase() | translate"
          [severity]="$any(getStatusSeverity(item.status))"
        ></p-tag>
      </td>
      <td>
        <div class="flex gap-2">
          <p-button
            icon="pi pi-pencil"
            [rounded]="true"
            [text]="true"
            severity="info"
            (onClick)="editItem(item)"
          />
          <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="9" class="text-center p-4">{{ 'COMMON.NO_DATA' | translate }}</td>
    </tr>
  </ng-template>
</p-table>

<!-- Create/Edit Dialog -->
<p-dialog
  [header]="
    editingItem()
      ? ('HR.ATTENDANCE.EDIT' | translate)
      : ('HR.ATTENDANCE.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 flex-column gap-1">
        <label>{{ 'HR.ATTENDANCE.EMPLOYEE' | translate }} *</label>
        <p-select
          formControlName="employee_id"
          [options]="employees"
          optionLabel="full_name"
          optionValue="id"
          [showClear]="true"
          [filter]="true"
          [placeholder]="'COMMON.SELECT' | translate"
        ></p-select>
        @if (form.get('employee_id')?.touched && form.get('employee_id')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.ATTENDANCE.DATE' | translate }} *</label>
        <p-datepicker formControlName="date" dateFormat="yy-mm-dd" [showIcon]="true"></p-datepicker>
        @if (form.get('date')?.touched && form.get('date')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="flex gap-3">
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.ATTENDANCE.CHECK_IN' | translate }}</label>
          <input pInputText formControlName="check_in" placeholder="08:00" />
        </div>
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.ATTENDANCE.CHECK_OUT' | translate }}</label>
          <input pInputText formControlName="check_out" placeholder="17:00" />
        </div>
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.ATTENDANCE.SHIFT' | translate }}</label>
        <p-select
          formControlName="shift_id"
          [options]="shifts"
          optionLabel="name_ar"
          optionValue="id"
          [showClear]="true"
          [filter]="true"
          [placeholder]="'COMMON.SELECT' | translate"
        ></p-select>
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.ATTENDANCE.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>
