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

<app-page-header
  title="HR.TRAINING.TITLE"
  subtitle="HR.TRAINING.SUBTITLE"
  (refresh)="loadProgramPage(); loadSessionPage(); loadEnrollmentPage()"
>
</app-page-header>

<p-tabs [value]="0">
  <p-tablist>
    <p-tab [value]="0">{{ 'HR.TRAINING.TAB_PROGRAMS' | translate }}</p-tab>
    <p-tab [value]="1">{{ 'HR.TRAINING.TAB_SESSIONS' | translate }}</p-tab>
    <p-tab [value]="2">{{ 'HR.TRAINING.TAB_ENROLLMENTS' | translate }}</p-tab>
  </p-tablist>
  <p-tabpanels>
  <!-- Tab 1: Programs -->
  <p-tabpanel [value]="0">
    <div class="flex justify-content-end mb-3">
      <p-button
        [label]="'HR.TRAINING.NEW_PROGRAM' | translate"
        icon="pi pi-plus"
        (onClick)="openNewProgram()"
        severity="success"
      />
    </div>

    <p-table
      [value]="programTableData()"
      [loading]="programTableLoading()"
      [paginator]="true"
      [rows]="programRows"
      [totalRecords]="programTotalRecords()"
      [lazy]="true"
      (onLazyLoad)="onProgramPageChange($event)"
      [first]="programFirst"
      [rowsPerPageOptions]="[10, 25, 50]"
      styleClass="p-datatable-sm p-datatable-striped"
      [tableStyle]="{ 'min-width': '70rem' }"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>{{ 'HR.TRAINING.CODE' | translate }}</th>
          <th>{{ 'HR.TRAINING.NAME_AR' | translate }}</th>
          <th>{{ 'HR.TRAINING.CATEGORY' | translate }}</th>
          <th>{{ 'HR.TRAINING.DURATION_HOURS' | translate }}</th>
          <th>{{ 'HR.TRAINING.MAX_PARTICIPANTS' | translate }}</th>
          <th>{{ 'HR.TRAINING.COST' | translate }}</th>
          <th>{{ 'HR.TRAINING.PROVIDER' | 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.name_ar }}</td>
          <td>{{ item.category }}</td>
          <td>{{ item.duration_hours }}</td>
          <td>{{ item.max_participants }}</td>
          <td>{{ item.cost }}</td>
          <td>{{ item.provider }}</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)="editProgram(item)"
              />
              <p-button
                icon="pi pi-trash"
                [rounded]="true"
                [text]="true"
                severity="danger"
                (onClick)="deleteProgram(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>
  </p-tabpanel>

  <!-- Tab 2: Sessions -->
  <p-tabpanel [value]="1">
    <div class="flex justify-content-end mb-3">
      <p-button
        [label]="'HR.TRAINING.NEW_SESSION' | translate"
        icon="pi pi-plus"
        (onClick)="openNewSession()"
        severity="success"
      />
    </div>

    <p-table
      [value]="sessionTableData()"
      [loading]="sessionTableLoading()"
      [paginator]="true"
      [rows]="sessionRows"
      [totalRecords]="sessionTotalRecords()"
      [lazy]="true"
      (onLazyLoad)="onSessionPageChange($event)"
      [first]="sessionFirst"
      [rowsPerPageOptions]="[10, 25, 50]"
      styleClass="p-datatable-sm p-datatable-striped"
      [tableStyle]="{ 'min-width': '70rem' }"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>{{ 'HR.TRAINING.SESSION_CODE' | translate }}</th>
          <th>{{ 'HR.TRAINING.TITLE_AR' | translate }}</th>
          <th>{{ 'HR.TRAINING.PROGRAM' | translate }}</th>
          <th>{{ 'HR.TRAINING.TRAINER' | translate }}</th>
          <th>{{ 'HR.TRAINING.LOCATION' | translate }}</th>
          <th>{{ 'HR.TRAINING.START_DATE' | translate }}</th>
          <th>{{ 'HR.TRAINING.END_DATE' | translate }}</th>
          <th>{{ 'COMMON.STATUS' | translate }}</th>
          <th>{{ 'HR.TRAINING.ENROLLMENTS_COUNT' | translate }}</th>
          <th>{{ 'COMMON.ACTIONS' | translate }}</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-item>
        <tr>
          <td>{{ item.code }}</td>
          <td>{{ item.title_ar }}</td>
          <td>{{ item.program?.name_ar || '-' }}</td>
          <td>{{ item.trainer || '-' }}</td>
          <td>{{ item.location || '-' }}</td>
          <td>{{ item.start_date }}</td>
          <td>{{ item.end_date }}</td>
          <td>
            <p-tag [value]="item.status" [severity]="$any(getStatusSeverity(item.status))"></p-tag>
          </td>
          <td>{{ item.enrollments_count || 0 }}</td>
          <td>
            <div class="flex gap-2">
              <p-button
                icon="pi pi-pencil"
                [rounded]="true"
                [text]="true"
                severity="info"
                (onClick)="editSession(item)"
              />
              <p-button
                icon="pi pi-trash"
                [rounded]="true"
                [text]="true"
                severity="danger"
                (onClick)="deleteSession(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-tabpanel>

  <!-- Tab 3: Enrollments -->
  <p-tabpanel [value]="2">
    <div class="flex justify-content-end mb-3">
      <p-button
        [label]="'HR.TRAINING.NEW_ENROLLMENT' | translate"
        icon="pi pi-plus"
        (onClick)="openNewEnrollment()"
        severity="success"
      />
    </div>

    <p-table
      [value]="enrollmentTableData()"
      [loading]="enrollmentTableLoading()"
      [paginator]="true"
      [rows]="enrollmentRows"
      [totalRecords]="enrollmentTotalRecords()"
      [lazy]="true"
      (onLazyLoad)="onEnrollmentPageChange($event)"
      [first]="enrollmentFirst"
      [rowsPerPageOptions]="[10, 25, 50]"
      styleClass="p-datatable-sm p-datatable-striped"
      [tableStyle]="{ 'min-width': '50rem' }"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>{{ 'HR.TRAINING.EMPLOYEE' | translate }}</th>
          <th>{{ 'HR.TRAINING.SESSION' | translate }}</th>
          <th>{{ 'COMMON.STATUS' | translate }}</th>
          <th>{{ 'HR.TRAINING.COMPLETION_DATE' | translate }}</th>
          <th>{{ 'HR.TRAINING.SCORE' | translate }}</th>
          <th>{{ 'COMMON.ACTIONS' | translate }}</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-item>
        <tr>
          <td>{{ item.employee?.full_name || '-' }}</td>
          <td>{{ item.session?.title_ar || '-' }}</td>
          <td>
            <p-tag [value]="item.status" [severity]="$any(getStatusSeverity(item.status))"></p-tag>
          </td>
          <td>{{ item.completion_date || '-' }}</td>
          <td>{{ item.score || '-' }}</td>
          <td>
            <div class="flex gap-2">
              <p-button
                icon="pi pi-pencil"
                [rounded]="true"
                [text]="true"
                severity="info"
                (onClick)="editEnrollment(item)"
              />
              <p-button
                icon="pi pi-trash"
                [rounded]="true"
                [text]="true"
                severity="danger"
                (onClick)="deleteEnrollment(item)"
              />
            </div>
          </td>
        </tr>
      </ng-template>
      <ng-template pTemplate="emptymessage">
        <tr>
          <td colspan="6" class="text-center p-4">{{ 'COMMON.NO_DATA' | translate }}</td>
        </tr>
      </ng-template>
    </p-table>
  </p-tabpanel>
  </p-tabpanels>
</p-tabs>

<!-- Program Dialog -->
<p-dialog
  [header]="
    editingProgram()
      ? ('HR.TRAINING.EDIT_PROGRAM' | translate)
      : ('HR.TRAINING.NEW_PROGRAM' | translate)
  "
  [(visible)]="programDialogVisible"
  [modal]="true"
  [style]="{ width: '600px' }"
  [closable]="true"
>
  <form [formGroup]="programForm" (ngSubmit)="onSaveProgram()">
    <div class="flex flex-column gap-3 pt-3">
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.TRAINING.NAME_AR' | translate }} *</label>
        <input pInputText formControlName="name_ar" />
        @if (programForm.get('name_ar')?.touched && programForm.get('name_ar')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.TRAINING.NAME_EN' | translate }}</label>
        <input pInputText formControlName="name_en" />
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.TRAINING.CATEGORY' | translate }}</label>
        <input pInputText formControlName="category" />
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.TRAINING.DESCRIPTION' | translate }}</label>
        <textarea pTextarea formControlName="description" rows="3"></textarea>
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.TRAINING.OBJECTIVES' | translate }}</label>
        <textarea pTextarea formControlName="objectives" rows="3"></textarea>
      </div>
      <div class="flex gap-3">
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.TRAINING.DURATION_HOURS' | translate }}</label>
          <p-inputNumber formControlName="duration_hours" [min]="0"></p-inputNumber>
        </div>
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.TRAINING.MAX_PARTICIPANTS' | translate }}</label>
          <p-inputNumber formControlName="max_participants" [min]="0"></p-inputNumber>
        </div>
      </div>
      <div class="flex gap-3">
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.TRAINING.COST' | translate }}</label>
          <p-inputNumber formControlName="cost" [minFractionDigits]="0" [maxFractionDigits]="2" [min]="0"></p-inputNumber>
        </div>
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.TRAINING.PROVIDER' | translate }}</label>
          <input pInputText formControlName="provider" />
        </div>
      </div>
      <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>
  </form>
  <ng-template pTemplate="footer">
    <p-button
      [label]="'COMMON.CANCEL' | translate"
      icon="pi pi-times"
      [text]="true"
      (onClick)="programDialogVisible.set(false)"
    />
    <p-button
      [label]="'COMMON.SAVE' | translate"
      icon="pi pi-check"
      (onClick)="onSaveProgram()"
      [loading]="programSaving()"
    />
  </ng-template>
</p-dialog>

<!-- Session Dialog -->
<p-dialog
  [header]="
    editingSession()
      ? ('HR.TRAINING.EDIT_SESSION' | translate)
      : ('HR.TRAINING.NEW_SESSION' | translate)
  "
  [(visible)]="sessionDialogVisible"
  [modal]="true"
  [style]="{ width: '600px' }"
  [closable]="true"
>
  <form [formGroup]="sessionForm" (ngSubmit)="onSaveSession()">
    <div class="flex flex-column gap-3 pt-3">
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.TRAINING.PROGRAM' | translate }} *</label>
        <p-select
          formControlName="training_program_id"
          [options]="allPrograms"
          optionLabel="name_ar"
          optionValue="id"
          [showClear]="true"
          [placeholder]="'COMMON.SELECT' | translate"
          [filter]="true"
        ></p-select>
        @if (sessionForm.get('training_program_id')?.touched && sessionForm.get('training_program_id')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.TRAINING.TITLE_AR' | translate }} *</label>
        <input pInputText formControlName="title_ar" />
        @if (sessionForm.get('title_ar')?.touched && sessionForm.get('title_ar')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.TRAINING.TITLE_EN' | translate }}</label>
        <input pInputText formControlName="title_en" />
      </div>
      <div class="flex gap-3">
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.TRAINING.TRAINER' | translate }}</label>
          <input pInputText formControlName="trainer" />
        </div>
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.TRAINING.LOCATION' | translate }}</label>
          <input pInputText formControlName="location" />
        </div>
      </div>
      <div class="flex gap-3">
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.TRAINING.START_DATE' | translate }}</label>
          <p-datePicker
            formControlName="start_date"
            dateFormat="yy-mm-dd"
            [showIcon]="true"
            [placeholder]="'HR.TRAINING.START_DATE' | translate"
          ></p-datePicker>
        </div>
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.TRAINING.END_DATE' | translate }}</label>
          <p-datePicker
            formControlName="end_date"
            dateFormat="yy-mm-dd"
            [showIcon]="true"
            [placeholder]="'HR.TRAINING.END_DATE' | translate"
          ></p-datePicker>
        </div>
      </div>
      <div class="flex gap-3">
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.TRAINING.START_TIME' | translate }}</label>
          <input pInputText formControlName="start_time" placeholder="HH:MM" />
        </div>
        <div class="flex flex-column gap-1 flex-1">
          <label>{{ 'HR.TRAINING.END_TIME' | translate }}</label>
          <input pInputText formControlName="end_time" placeholder="HH:MM" />
        </div>
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.TRAINING.MAX_PARTICIPANTS' | translate }}</label>
        <p-inputNumber formControlName="max_participants" [min]="0"></p-inputNumber>
      </div>
      <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 class="flex flex-column gap-1">
        <label>{{ 'HR.TRAINING.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)="sessionDialogVisible.set(false)"
    />
    <p-button
      [label]="'COMMON.SAVE' | translate"
      icon="pi pi-check"
      (onClick)="onSaveSession()"
      [loading]="sessionSaving()"
    />
  </ng-template>
</p-dialog>

<!-- Enrollment Dialog -->
<p-dialog
  [header]="
    editingEnrollment()
      ? ('HR.TRAINING.EDIT_ENROLLMENT' | translate)
      : ('HR.TRAINING.NEW_ENROLLMENT' | translate)
  "
  [(visible)]="enrollmentDialogVisible"
  [modal]="true"
  [style]="{ width: '500px' }"
  [closable]="true"
>
  <form [formGroup]="enrollmentForm" (ngSubmit)="onSaveEnrollment()">
    <div class="flex flex-column gap-3 pt-3">
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.TRAINING.SESSION' | translate }} *</label>
        <p-select
          formControlName="training_session_id"
          [options]="allSessions"
          optionLabel="title_ar"
          optionValue="id"
          [showClear]="true"
          [placeholder]="'COMMON.SELECT' | translate"
          [filter]="true"
        ></p-select>
        @if (enrollmentForm.get('training_session_id')?.touched && enrollmentForm.get('training_session_id')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.TRAINING.EMPLOYEE' | translate }} *</label>
        <p-select
          formControlName="employee_id"
          [options]="employees"
          optionLabel="full_name"
          optionValue="id"
          [showClear]="true"
          [placeholder]="'COMMON.SELECT' | translate"
          [filter]="true"
        ></p-select>
        @if (enrollmentForm.get('employee_id')?.touched && enrollmentForm.get('employee_id')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'COMMON.STATUS' | translate }}</label>
        <p-select
          formControlName="status"
          [options]="enrollmentStatusOptions"
          optionLabel="label"
          optionValue="value"
        ></p-select>
      </div>
    </div>
  </form>
  <ng-template pTemplate="footer">
    <p-button
      [label]="'COMMON.CANCEL' | translate"
      icon="pi pi-times"
      [text]="true"
      (onClick)="enrollmentDialogVisible.set(false)"
    />
    <p-button
      [label]="'COMMON.SAVE' | translate"
      icon="pi pi-check"
      (onClick)="onSaveEnrollment()"
      [loading]="enrollmentSaving()"
    />
  </ng-template>
</p-dialog>
