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

<app-page-header
  title="HR.EMPLOYEES.TITLE"
  subtitle="HR.EMPLOYEES.SUBTITLE"
  (refresh)="loadPage()"
>
  <p-button
    [label]="'HR.EMPLOYEES.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.EMPLOYEES.NUMBER' | translate }}</th>
      <th>{{ 'HR.EMPLOYEES.FULL_NAME' | translate }}</th>
      <th>{{ 'HR.EMPLOYEES.DEPARTMENT' | translate }}</th>
      <th>{{ 'HR.EMPLOYEES.POSITION' | translate }}</th>
      <th>{{ 'HR.EMPLOYEES.HIRE_DATE' | translate }}</th>
      <th>{{ 'HR.EMPLOYEES.CONTRACT_TYPE' | 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_number }}</td>
      <td>{{ item.full_name }}</td>
      <td>{{ item.department?.name_ar || '-' }}</td>
      <td>{{ item.position?.name_ar || '-' }}</td>
      <td>{{ item.hire_date }}</td>
      <td>{{ item.contract_type }}</td>
      <td>
        <p-tag [value]="item.status" [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="8" class="text-center p-4">{{ 'COMMON.NO_DATA' | translate }}</td>
    </tr>
  </ng-template>
</p-table>

<p-dialog
  [header]="
    editingItem()
      ? ('HR.EMPLOYEES.EDIT' | translate)
      : ('HR.EMPLOYEES.NEW' | translate)
  "
  [(visible)]="dialogVisible"
  [modal]="true"
  [style]="{ width: '750px' }"
  [closable]="true"
>
  <form [formGroup]="form" (ngSubmit)="onSave()">
    <p-tabs value="0">
      <p-tablist>
        <p-tab value="0">
          <i class="pi pi-user"></i> {{ 'HR.EMPLOYEES.TAB_PERSONAL' | translate }}
        </p-tab>
        <p-tab value="1">
          <i class="pi pi-briefcase"></i> {{ 'HR.EMPLOYEES.TAB_EMPLOYMENT' | translate }}
        </p-tab>
        <p-tab value="2">
          <i class="pi pi-wallet"></i> {{ 'HR.EMPLOYEES.TAB_SALARY_BANK' | translate }}
        </p-tab>
        <p-tab value="3">
          <i class="pi pi-file"></i> {{ 'HR.EMPLOYEES.TAB_OTHER' | translate }}
        </p-tab>
      </p-tablist>
      <p-tabpanels>
        <!-- TAB 0: Personal Info -->
        <p-tabpanel value="0">
          <div class="flex flex-column gap-3 pt-3">
            <div class="grid">
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.FIRST_NAME_AR' | translate }} *</label>
                  <input pInputText formControlName="first_name_ar" />
                  @if (form.get('first_name_ar')?.touched && form.get('first_name_ar')?.hasError('required')) {
                    <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
                  }
                </div>
              </div>
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.LAST_NAME_AR' | translate }} *</label>
                  <input pInputText formControlName="last_name_ar" />
                  @if (form.get('last_name_ar')?.touched && form.get('last_name_ar')?.hasError('required')) {
                    <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
                  }
                </div>
              </div>
            </div>
            <div class="grid">
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.FIRST_NAME_EN' | translate }}</label>
                  <input pInputText formControlName="first_name_en" />
                </div>
              </div>
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.LAST_NAME_EN' | translate }}</label>
                  <input pInputText formControlName="last_name_en" />
                </div>
              </div>
            </div>
            <div class="grid">
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.EMAIL' | translate }}</label>
                  <input pInputText formControlName="email" type="email" />
                  @if (form.get('email')?.touched && form.get('email')?.hasError('email')) {
                    <small class="p-error">{{ 'COMMON.INVALID_EMAIL' | translate }}</small>
                  }
                </div>
              </div>
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.NATIONAL_ID' | translate }}</label>
                  <input pInputText formControlName="national_id" />
                </div>
              </div>
            </div>
            <div class="grid">
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.PHONE' | translate }}</label>
                  <input pInputText formControlName="phone" />
                </div>
              </div>
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.MOBILE' | translate }}</label>
                  <input pInputText formControlName="mobile" />
                </div>
              </div>
            </div>
            <div class="grid">
              <div class="col-4">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.GENDER' | translate }} *</label>
                  <p-select
                    formControlName="gender"
                    [options]="genderOptions"
                    optionLabel="label"
                    optionValue="value"
                  ></p-select>
                </div>
              </div>
              <div class="col-4">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.DATE_OF_BIRTH' | translate }}</label>
                  <p-datePicker
                    formControlName="date_of_birth"
                    dateFormat="yy-mm-dd"
                    [showIcon]="true"
                  ></p-datePicker>
                </div>
              </div>
              <div class="col-4">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.MARITAL_STATUS' | translate }}</label>
                  <p-select
                    formControlName="marital_status"
                    [options]="maritalStatusOptions"
                    optionLabel="label"
                    optionValue="value"
                    [showClear]="true"
                    [placeholder]="'COMMON.SELECT' | translate"
                  ></p-select>
                </div>
              </div>
            </div>
            <div class="flex flex-column gap-1">
              <label>{{ 'HR.EMPLOYEES.NATIONALITY' | translate }}</label>
              <input pInputText formControlName="nationality" />
            </div>
          </div>
        </p-tabpanel>

        <!-- TAB 1: Employment Info -->
        <p-tabpanel value="1">
          <div class="flex flex-column gap-3 pt-3">
            <div class="grid">
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.DEPARTMENT' | translate }}</label>
                  <p-select
                    formControlName="department_id"
                    [options]="departments"
                    optionLabel="name_ar"
                    optionValue="id"
                    [showClear]="true"
                    [placeholder]="'COMMON.SELECT' | translate"
                    [filter]="true"
                  ></p-select>
                </div>
              </div>
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.POSITION' | translate }}</label>
                  <p-select
                    formControlName="position_id"
                    [options]="positions"
                    optionLabel="name_ar"
                    optionValue="id"
                    [showClear]="true"
                    [placeholder]="'COMMON.SELECT' | translate"
                    [filter]="true"
                  ></p-select>
                </div>
              </div>
            </div>
            <div class="grid">
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.BRANCH' | translate }}</label>
                  <p-select
                    formControlName="branch_id"
                    [options]="branches"
                    optionLabel="name_ar"
                    optionValue="id"
                    [showClear]="true"
                    [placeholder]="'COMMON.SELECT' | translate"
                    [filter]="true"
                  ></p-select>
                </div>
              </div>
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.MANAGER' | translate }}</label>
                  <p-select
                    formControlName="manager_id"
                    [options]="employees"
                    optionLabel="full_name"
                    optionValue="id"
                    [showClear]="true"
                    [placeholder]="'COMMON.SELECT' | translate"
                    [filter]="true"
                  ></p-select>
                </div>
              </div>
            </div>
            <div class="grid">
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.HIRE_DATE' | translate }} *</label>
                  <p-datePicker
                    formControlName="hire_date"
                    dateFormat="yy-mm-dd"
                    [showIcon]="true"
                  ></p-datePicker>
                  @if (form.get('hire_date')?.touched && form.get('hire_date')?.hasError('required')) {
                    <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
                  }
                </div>
              </div>
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.CONTRACT_END_DATE' | translate }}</label>
                  <p-datePicker
                    formControlName="contract_end_date"
                    dateFormat="yy-mm-dd"
                    [showIcon]="true"
                  ></p-datePicker>
                </div>
              </div>
            </div>
            <div class="grid">
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.CONTRACT_TYPE' | translate }}</label>
                  <p-select
                    formControlName="contract_type"
                    [options]="contractTypeOptions"
                    optionLabel="label"
                    optionValue="value"
                  ></p-select>
                </div>
              </div>
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'COMMON.STATUS' | translate }}</label>
                  <p-select
                    formControlName="status"
                    [options]="statusOptions"
                    optionLabel="label"
                    optionValue="value"
                  ></p-select>
                </div>
              </div>
            </div>
            <div class="grid">
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.ADDRESS' | translate }}</label>
                  <input pInputText formControlName="address" />
                </div>
              </div>
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.CITY' | translate }}</label>
                  <input pInputText formControlName="city" />
                </div>
              </div>
            </div>
          </div>
        </p-tabpanel>

        <!-- TAB 2: Salary & Bank -->
        <p-tabpanel value="2">
          <div class="flex flex-column gap-3 pt-3">
            <div class="flex flex-column gap-1">
              <label>{{ 'HR.EMPLOYEES.BASIC_SALARY' | translate }} *</label>
              <p-inputNumber
                formControlName="basic_salary"
                [minFractionDigits]="0"
                [maxFractionDigits]="2"
                mode="decimal"
              ></p-inputNumber>
              @if (form.get('basic_salary')?.touched && form.get('basic_salary')?.hasError('required')) {
                <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
              }
            </div>
            <div class="flex flex-column gap-1">
              <label>{{ 'HR.EMPLOYEES.BANK_NAME' | translate }}</label>
              <input pInputText formControlName="bank_name" />
            </div>
            <div class="flex flex-column gap-1">
              <label>{{ 'HR.EMPLOYEES.BANK_ACCOUNT_NUMBER' | translate }}</label>
              <input pInputText formControlName="bank_account_number" />
            </div>
            <div class="flex flex-column gap-1">
              <label>{{ 'HR.EMPLOYEES.IBAN' | translate }}</label>
              <input pInputText formControlName="iban" />
            </div>
          </div>
        </p-tabpanel>

        <!-- TAB 3: Other / Documents -->
        <p-tabpanel value="3">
          <div class="flex flex-column gap-3 pt-3">
            <div class="grid">
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.EMERGENCY_CONTACT_NAME' | translate }}</label>
                  <input pInputText formControlName="emergency_contact_name" />
                </div>
              </div>
              <div class="col-6">
                <div class="flex flex-column gap-1">
                  <label>{{ 'HR.EMPLOYEES.EMERGENCY_CONTACT_PHONE' | translate }}</label>
                  <input pInputText formControlName="emergency_contact_phone" />
                </div>
              </div>
            </div>
            <div class="flex flex-column gap-1">
              <label>{{ 'HR.EMPLOYEES.NOTES' | translate }}</label>
              <textarea pTextarea formControlName="notes" rows="4"></textarea>
            </div>
          </div>
        </p-tabpanel>
      </p-tabpanels>
    </p-tabs>
  </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>
