@if (form.bFormReady) {
<ng-container [formGroup]="form">

  <!-- ── List / Dashboard View ──────────────────────────────────────── -->
  @if (!showEnrollForm) {
  <div class="enroll-page">

    <!-- ── Page Header ─────────────────────────────────────────── -->
    <div class="page-header">
      <div class="page-header-left">
        <div class="instance-info">
          <span class="instance-code">Enrollment &amp; Attendance</span>
        </div>
      </div>
      <div class="page-header-right">
        <button class="btn-export" type="button">
          <mat-icon>download</mat-icon>
          Export Sheet
        </button>
        <button class="btn-enroll" type="button" (click)="openEnrollForm()">
          <mat-icon>add</mat-icon>
          Enroll Employee
        </button>
      </div>
    </div>

    <!-- ── Workflow Stat Cards ──────────────────────────────────── -->
    <div class="wf-stat-bar">
      <!-- Nominated -->
      <div class="wf-stat-card">
        @if (currentStep() > 1) {
        <mat-icon class="wsc-check">check</mat-icon>
        } @else {
        <span class="wsc-num">{{ nominatedCount() }}</span>
        }
        <span class="wsc-lbl">Nominated</span>
      </div>
      <div class="wsc-arrow" [ngClass]="currentStep() > 1 ? 'wsc-arrow-done' : ''"></div>

      <!-- Mgr Approved -->
      <div class="wf-stat-card">
        @if (currentStep() > 2) {
        <mat-icon class="wsc-check">check</mat-icon>
        } @else {
        <span class="wsc-num">{{ mgrApprovedCount() }}</span>
        }
        <span class="wsc-lbl">Mgr Approved</span>
      </div>
      <div class="wsc-arrow" [ngClass]="currentStep() > 2 ? 'wsc-arrow-done' : ''"></div>

      <!-- HR Approved -->
      <div class="wf-stat-card">
        @if (currentStep() > 3) {
        <mat-icon class="wsc-check">check</mat-icon>
        } @else {
        <span class="wsc-num">{{ hrApprovedCount() }}</span>
        }
        <span class="wsc-lbl">HR Approved</span>
      </div>
      <div class="wsc-arrow" [ngClass]="currentStep() > 3 ? 'wsc-arrow-done' : ''"></div>

      <!-- Enrolled -->
      <div class="wf-stat-card">
        @if (currentStep() > 4) {
        <mat-icon class="wsc-check">check</mat-icon>
        } @else {
        <span class="wsc-num">{{ enrolledCount() }}</span>
        }
        <span class="wsc-lbl">Enrolled</span>
      </div>
      <div class="wsc-arrow" [ngClass]="currentStep() > 4 ? 'wsc-arrow-done' : ''"></div>

      <!-- Completed -->
      <div class="wf-stat-card">
        <span class="wsc-num">{{ completedCount() }}</span>
        <span class="wsc-lbl">Completed</span>
      </div>
    </div>

    <!-- Instance picklist only matters for Session Attendance / Completion Records — the
         Enrollment List tab shows every enrollment across all instances (parameterless
         GetEnrollmentList), so it has nothing to filter by an instance here. -->
    @if (activeTab() === 1 || activeTab() === 2) {
    <div style="padding: 10px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
      <gb-newpicklist (PicklistValue)="OnpicklistLoad($event)" [FormData]="form.value"
        formControlName="FilterInstanceCode" class="inst-filter-pick">
      </gb-newpicklist>
      @if (instanceHeader()) {
      <span class="inst-filter-meta">
        <span class="inst-meta-title">{{ instanceHeader()!.ProgrammeTitle }}</span>
        @if (instanceHeader()!.VenueName) {
        <span class="inst-meta-sep">·</span>
        <span class="inst-meta-venue">{{ instanceHeader()!.VenueName }}</span>
        }
        @if (instanceHeader()!.StartDate) {
        <span class="inst-meta-sep">·</span>
        <span class="inst-meta-dates">
          {{ instanceHeader()!.StartDate | date:'dd MMM yyyy' }}
          @if (instanceHeader()!.EndDate) { &ndash; {{ instanceHeader()!.EndDate | date:'dd MMM yyyy' }} }
        </span>
        }
      </span>
      }
    </div>
    }

    <!-- ── Tab Bar ─────────────────────────────────────────────── -->
    <div class="tab-bar">
      <button class="tab-btn" [ngClass]="{ 'tab-active': activeTab() === 0 }" (click)="activeTab.set(0)" type="button">
        Enrollment List
        @if (totalCount() > 0) {
        <span class="tab-badge">{{ totalCount() }}</span>
        }
      </button>
      <button class="tab-btn" [ngClass]="{ 'tab-active': activeTab() === 1 }"
        (click)="activeTab.set(1); loadAttendanceTab()" type="button">
        Session Attendance
      </button>
      <button class="tab-btn" [ngClass]="{ 'tab-active': activeTab() === 2 }"
        (click)="activeTab.set(2); loadCompletionTab()" type="button">
        Completion Records
      </button>
    </div>

    <!-- ════════════════════════════════════════════════════════
       TAB 0 — Enrollment List
       ════════════════════════════════════════════════════════ -->
    @if (activeTab() === 0) {
    <div class="tab-content">
      @if (enrollments().length === 0) {
      <div class="empty-state">
        <mat-icon style="font-size:48px;width:48px;height:48px;color:#94a3b8">group</mat-icon>
        <p>No enrollments for this instance yet.</p>
        <button class="btn-enroll" type="button" (click)="openEnrollForm()">+ Enroll Employee</button>
      </div>
      } @else {
      <div class="enroll-table-wrap scrollbar">
        <table class="enroll-table">
          <thead>
            <tr>
              <th class="th-num">#</th>
              <th>Employee</th>
              <th>Enrollment Code</th>
              <th>Enrolled On</th>
              <th>Status</th>
              <th class="th-actions">Actions</th>
            </tr>
          </thead>
          <tbody>
            @for (enr of enrollments(); track enr.EnrollmentId; let i = $index) {
            <tr class="enroll-row">
              <td class="td-num td-code">{{ i + 1 }}</td>

              <!-- Employee -->
              <td class="td-employee">
                <div class="emp-cell">
                  <div class="emp-avatar" [ngClass]="getAvatarClass(enr.EmployeeId)">
                    {{ getInitials(enr.EmployeeName) }}
                  </div>
                  <div class="emp-info">
                    <span class="emp-name">{{ enr.EmployeeName }}</span>
                    <span class="emp-code">{{ enr.EnrollmentName }}</span>
                  </div>
                </div>
              </td>

              <!-- Enrollment Code -->
              <td class="td-code">{{ enr.EnrollmentCode || '—' }}</td>

              <!-- Enrolled On -->
              <td class="td-date">
                @if (enr.CreatedOn) {
                {{ enr.CreatedOn | date:'dd MMM yyyy' }}
                } @else { — }
              </td>

              <!-- Status -->
              <td class="td-status">
                <span class="status-badge" [ngClass]="getStatusClass(enr.EnrollmentStatus)">
                  {{ getStatusLabel(enr) }}
                </span>
              </td>

              <!-- Actions -->
              <td class="td-actions">
                <button class="act-btn btn-more" type="button" title="Actions" [matMenuTriggerFor]="menuActions">
                  <mat-icon>more_horiz</mat-icon>
                </button>
                <mat-menu #menuActions="matMenu">
                  @if (enr.EnrollmentStatus === 0) {
                  <button mat-menu-item (click)="nudgeEmployee(enr)">
                    <mat-icon>notifications</mat-icon>
                    Nudge
                  </button>
                  }

                  @if (enr.EnrollmentStatus === 3) {
                  <button mat-menu-item (click)="moveUp(enr)">
                    <mat-icon>arrow_upward</mat-icon>
                    Move Up
                  </button>
                  }

                  @if (enr.EnrollmentStatus === 4 || enr.EnrollmentStatus === 5 || enr.EnrollmentStatus === 6 || enr.EnrollmentStatus === 7 || enr.EnrollmentStatus === 8) {
                  <button mat-menu-item (click)="viewEnrollment(enr)">
                    <mat-icon>visibility</mat-icon>
                    View
                  </button>
                  }

                  @if (enr.EnrollmentStatus === 0 || enr.EnrollmentStatus === 1 || enr.EnrollmentStatus === 2 || enr.EnrollmentStatus === 3 || enr.EnrollmentStatus === 4) {
                  <button mat-menu-item class="menu-item-danger" (click)="withdrawEnrollment(enr, $event)">
                    <mat-icon>cancel</mat-icon>
                    Withdraw
                  </button>
                  }
                </mat-menu>
              </td>
            </tr>
            }
          </tbody>
        </table>
      </div>
      }
    </div>
    }

    <!-- ════════════════════════════════════════════════════════
       TAB 1 — Session Attendance
       ════════════════════════════════════════════════════════ -->
    @if (activeTab() === 1) {
    <div class="tab-content">
      <gb-training-attendance #attendanceRef
        [instanceId]="currentInstanceId()"
        [enrollments]="enrollments()">
      </gb-training-attendance>
    </div>
    }

    <!-- ════════════════════════════════════════════════════════
       TAB 2 — Completion Records
       ════════════════════════════════════════════════════════ -->
    @if (activeTab() === 2) {
    <div class="tab-content">
      @if (completionLoading()) {
      <div class="att-loading">
        <mat-icon class="spin-icon">refresh</mat-icon>
        Loading completion records…
      </div>
      } @else {
      <div class="comp-toolbar">
        <span class="comp-toolbar-title">Completion Records</span>
        <button class="btn-mark-complete" type="button" [disabled]="completionSaving()" (click)="saveCompletions()">
          @if (completionSaving()) { Saving… } @else { Mark Completions }
        </button>
      </div>

      @if (completionRows().length === 0) {
      <div class="empty-state">
        <mat-icon style="font-size:48px;width:48px;height:48px;color:#94a3b8">description</mat-icon>
        <p>No completion records for this instance yet.</p>
      </div>
      } @else {
      <div class="enroll-table-wrap scrollbar">
        <table class="enroll-table comp-table">
          <thead>
            <tr>
              <th class="th-num">#</th>
              <th>Employee</th>
              <th class="th-score">Attendance %</th>
              <th class="th-score">Pre-Score</th>
              <th class="th-score">Post-Score</th>
              <th class="th-score">Improvement</th>
              <th>Result</th>
              <th>Certificate</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            @for (row of completionRows(); track row.EnrollmentId; let i = $index) {
            <tr class="enroll-row">
              <td class="td-num">{{ i + 1 }}</td>

              <td class="td-employee">
                <div class="emp-cell">
                  <div class="emp-avatar" [ngClass]="getAvatarClass(row.EmployeeId)">
                    {{ getInitials(row.EmployeeName) }}
                  </div>
                  <div class="emp-info">
                    <span class="emp-name">{{ row.EmployeeName }}</span>
                    <span class="emp-code">{{ row.EmployeeCode }}</span>
                  </div>
                </div>
              </td>

              <td class="td-score">
                <span class="score-chip"
                  [ngClass]="row.AttendancePct >= 75 ? 'pa-pass' : row.AttendancePct > 0 ? 'pa-mid' : 'pa-fail'">
                  {{ row.AttendancePct }}%
                </span>
              </td>

              <td class="td-score">
                <input class="comp-score-input" type="number" min="0" max="100"
                  [value]="row.PreAssessmentScore ?? ''" placeholder="—"
                  (change)="updateCompletionField(i, 'PreAssessmentScore', $any($event.target).value)">
              </td>

              <td class="td-score">
                <input class="comp-score-input" type="number" min="0" max="100"
                  [value]="row.PostAssessmentScore ?? ''" placeholder="—"
                  (change)="updateCompletionField(i, 'PostAssessmentScore', $any($event.target).value)">
              </td>

              <td class="td-score">
                <span class="score-chip" [ngClass]="getImprovementClass(row)">
                  {{ getImprovement(row) }}
                </span>
              </td>

              <td>
                <select class="comp-status-sel" [value]="row.Result"
                  (change)="updateCompletionField(i, 'Result', $any($event.target).value)"
                  [ngClass]="RESULT_CLASSES[row.Result] ?? 'res-incomplete'">
                  <option value="0">Passed</option>
                  <option value="1">Failed</option>
                  <option value="2">Incomplete</option>
                </select>
              </td>

              <td>
                <select class="comp-status-sel" [value]="row.CertificateStatus"
                  (change)="updateCompletionField(i, 'CertificateStatus', $any($event.target).value)"
                  [ngClass]="CERT_CLASSES[row.CertificateStatus] ?? 'cert-none'">
                  <option value="0">Not Issued</option>
                  <option value="1">Issued</option>
                </select>
              </td>

              <td>
                <select class="comp-status-sel" [value]="row.CompletionStatus"
                  (change)="updateCompletionField(i, 'CompletionStatus', $any($event.target).value)"
                  [ngClass]="COMP_STATUS_CLASSES[row.CompletionStatus] ?? 'cs-incomplete'">
                  <option value="0">Completed</option>
                  <option value="1">Partial</option>
                  <option value="2">Incomplete</option>
                </select>
              </td>
            </tr>
            }
          </tbody>
        </table>
      </div>
      }
      }
    </div>
    }

  </div><!-- /enroll-page -->
  }

  <!-- ── Form View (venue-style) ────────────────────────────────────── -->
  @if (showEnrollForm) {
  <gb-formaction [FormDetails]="form" [FormData]="form.value" [MenuRights]="MenuRights"
    (FormOutput)="FormOutput($event)" [IsListButtonRequired]="true"></gb-formaction>
  <div class="FormOverView">
    <div>
      <gb-newpicklist (PicklistValue)="OnpicklistLoad($event)" [FormData]="form.value"
        formControlName="EnrollmentCode" class="adjacentField"></gb-newpicklist>
      <gb-newpicklist (PicklistValue)="OnpicklistLoad($event)" [FormData]="form.value"
        formControlName="EnrollmentName" class="adjacentField"></gb-newpicklist>
    </div>
    <div>
      <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value"
        formControlName="ProgrammeTitle" class="adjacentField"></gb-newpicklist>
      <gb-newpicklist (PicklistValue)="OnpicklistLoad($event)" [FormData]="form.value"
        formControlName="InstanceTitle" class="adjacentField"></gb-newpicklist>
    </div>
    <div>
      <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value"
        formControlName="EmployeeName" class="adjacentField"></gb-newpicklist>
      <!-- <gb-newpicklist (PicklistValue)="OnpicklistLoad($event)" [FormData]="form.value"
        formControlName="EmployeeCode" class="adjacentField"></gb-newpicklist> -->
    </div>
    <div>
      <gb-combobox formControlName="NominationSource" class="adjacentField"></gb-combobox>
      <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value"
        formControlName="NominatedByName" class="adjacentField"></gb-newpicklist>
    </div>
    <div>
      <gb-combobox formControlName="EnrollmentStatus" class="adjacentField"></gb-combobox>
    </div>
    <div>
      <gb-textbox formControlName="Remarks" class="adjacentField"></gb-textbox>
    </div>
  </div>
  }

</ng-container>
}