@if (!ShowForm) {
<div class="need-dashboard">

  <div class="dash-header">
    <div class="dash-title">
      <h2>Training Need Register</h2>
      <span class="dash-subtitle">All training demands &middot; Submit, review and approve</span>
    </div>
    <div class="header-actions">
      <button class="btn-export" type="button" (click)="openBulkImport()">&#8593; Bulk Import</button>
      <button class="btn-raise" (click)="openNewForm()">+ Raise New Need</button>
    </div>
  </div>

  <div class="status-chips">
    <button class="chip chip-draft" [class.chip-active]="filterStatus() === 0" (click)="setFilterStatus(0)">
      <span class="chip-count">{{ draftCount() }}</span>
      <span class="chip-label">Draft</span>
    </button>
    <button class="chip chip-submitted" [class.chip-active]="filterStatus() === 1" (click)="setFilterStatus(1)">
      <span class="chip-count">{{ submittedCount() }}</span>
      <span class="chip-label">Submitted</span>
    </button>
    <button class="chip chip-review" [class.chip-active]="filterStatus() === 2" (click)="setFilterStatus(2)">
      <span class="chip-count">{{ reviewCount() }}</span>
      <span class="chip-label">Under Review</span>
    </button>
    <button class="chip chip-approved" [class.chip-active]="filterStatus() === 3" (click)="setFilterStatus(3)">
      <span class="chip-count">{{ approvedCount() }}</span>
      <span class="chip-label">Approved</span>
    </button>
    <button class="chip chip-linked" [class.chip-active]="filterStatus() === 4" (click)="setFilterStatus(4)">
      <span class="chip-count">{{ linkedCount() }}</span>
      <span class="chip-label">Linked</span>
    </button>
    <button class="chip chip-rejected" [class.chip-active]="filterStatus() === 6" (click)="setFilterStatus(6)">
      <span class="chip-count">{{ rejectedCount() }}</span>
      <span class="chip-label">Rejected</span>
    </button>
  </div>

  <div class="dash-filters">
    <input class="search-input" type="text" placeholder="Search by code, title, employee..." [value]="searchText()"
      (input)="onSearchChange($any($event.target).value)" />
    <select class="filter-select" (change)="onFilterChange('status', $any($event.target).value)">
      <option value="">All Statuses</option>
      @for (opt of STATUS_OPTIONS; track opt.key) {
      <option [value]="opt.key">{{ opt.label }}</option>
      }
    </select>
    <select class="filter-select" (change)="onFilterChange('domain', $any($event.target).value)">
      <option value="">All Domains</option>
      @for (name of domainOptions(); track name) {
      <option [value]="name">{{ name }}</option>
      }
    </select>
    <select class="filter-select" (change)="onFilterChange('priority', $any($event.target).value)">
      <option value="">All Priorities</option>
      @for (opt of PRIORITY_OPTIONS; track opt.key) {
      <option [value]="opt.key">{{ opt.label }}</option>
      }
    </select>
    <select class="filter-select" (change)="onFilterChange('source', $any($event.target).value)">
      <option value="">All Sources</option>
      @for (opt of SOURCE_OPTIONS; track opt.key) {
      <option [value]="opt.key">{{ opt.label }}</option>
      }
    </select>
    <span class="records-count">{{ filteredNeeds().length }} records</span>
  </div>

  <div class="need-table-wrap">
    <div class="table-scroll scrollbar">
      <table class="need-table">
        <thead>
          <tr>
            <th>Need Code</th>
            <th>Title</th>
            <th>Domain</th>
            <th>Source</th>
            <th>Priority</th>
            <th>Audience</th>
            <th>Raised By</th>
            <th>Raised On</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          @for (need of pagedNeeds(); track need.TrainingNeedId) {
          <tr>
            <td class="td-code">{{ need.NeedCode }}</td>
            <td class="td-title">
              <span class="title-text">{{ need.NeedTitle }}</span>
              @if (getSubtitle(need)) {
              <span class="title-sub">{{ getSubtitle(need) }}</span>
              }
            </td>
            <td>
              <span class="domain-badge" [ngClass]="getDomainClass(need.DomainName)">{{ need.DomainName }}</span>
            </td>
            <td>
              <span class="source-badge">{{ SOURCE_LABELS[need.NeedSourceType] ?? '&mdash;' }}</span>
            </td>
            <td>
              <span class="priority-badge" [ngClass]="PRIORITY_CLS[need.Priority]">
                &bull; {{ PRIORITY_LABELS[need.Priority] ?? '&mdash;' }}
              </span>
            </td>
            <td class="td-audience">{{ getAudienceDisplay(need) }}</td>
            <td class="td-raised-by">{{ getRaisedBy(need) }}</td>
            <td class="td-date">{{ formatDate(need.RaisedOn) }}</td>
            <td>
              <span class="status-badge" [ngClass]="STATUS_CLS[need.NeedStatus]">
                {{ STATUS_LABELS[need.NeedStatus] ?? '&mdash;' }}
              </span>
            </td>
            <td class="td-actions">
              @if (rejectingId() === need.TrainingNeedId) {
              <input class="reject-input" type="text" placeholder="Rejection reason..." [value]="rejectReason()"
                (input)="rejectReason.set($any($event.target).value)" />
              <button class="btn-action btn-reject"
                (click)="confirmReject(need.TrainingNeedId, need.NeedStatus)">Confirm</button>
              <button class="btn-action btn-view" (click)="cancelReject()">Cancel</button>

              } @else if (need.NeedStatus === 0) {
              <button class="btn-action btn-submit" (click)="submitNeed(need, $event)">Submit</button>
              <button class="btn-action btn-more" [matMenuTriggerFor]="menuDraft">
                <mat-icon>more_horiz</mat-icon>
              </button>
              <mat-menu #menuDraft="matMenu">
                <button mat-menu-item (click)="openEditForm(need)">
                  <mat-icon>edit</mat-icon> Edit
                </button>
                <button mat-menu-item class="menu-item-danger" (click)="deleteNeed(need, $event)">
                  <mat-icon>delete</mat-icon> Delete
                </button>
              </mat-menu>

              } @else if (need.NeedStatus === 1) {
              <button class="btn-action btn-approve" (click)="approveNeed(need, $event)">Approve</button>
              <button class="btn-action btn-more" [matMenuTriggerFor]="menuSubmitted">
                <mat-icon>more_horiz</mat-icon>
              </button>
              <mat-menu #menuSubmitted="matMenu">
                <button mat-menu-item (click)="viewNeed(need)">
                  <mat-icon>visibility</mat-icon> View
                </button>
                <button mat-menu-item (click)="reviewNeed(need, $event)">
                  <mat-icon>rate_review</mat-icon> Review
                </button>
                <button mat-menu-item class="menu-item-danger" (click)="openReject(need, $event)">
                  <mat-icon>close</mat-icon> Reject
                </button>
              </mat-menu>

              } @else if (need.NeedStatus === 2) {
              <button class="btn-action btn-approve" (click)="approveNeed(need, $event)">Approve</button>
              <button class="btn-action btn-more" [matMenuTriggerFor]="menuReview">
                <mat-icon>more_horiz</mat-icon>
              </button>
              <mat-menu #menuReview="matMenu">
                <button mat-menu-item (click)="viewNeed(need)">
                  <mat-icon>visibility</mat-icon> View
                </button>
                <button mat-menu-item class="menu-item-danger" (click)="openReject(need, $event)">
                  <mat-icon>close</mat-icon> Reject
                </button>
              </mat-menu>

              } @else if (need.NeedStatus === 3) {
              <button class="btn-action btn-link" (click)="linkNeed(need, $event)">Link</button>
              <button class="btn-action btn-more" [matMenuTriggerFor]="menuApproved">
                <mat-icon>more_horiz</mat-icon>
              </button>
              <mat-menu #menuApproved="matMenu">
                <button mat-menu-item (click)="viewNeed(need)">
                  <mat-icon>visibility</mat-icon> View
                </button>
              </mat-menu>

              } @else {
              <button class="btn-action btn-view" (click)="viewNeed(need)">View</button>
              }
            </td>
          </tr>
          }
          @if (pagedNeeds().length === 0) {
          <tr>
            <td colspan="10" class="empty-state">No training needs found</td>
          </tr>
          }
        </tbody>
      </table>
    </div>
    <div class="table-footer">
      <span>Showing {{ pagedNeeds().length }} of {{ filteredNeeds().length }} records</span>
      <div class="pagination">
        <button class="pg-btn" [class.pg-disabled]="currentPage() === 1" (click)="goToPage(currentPage() - 1)">&#8592;
          Prev</button>
        @for (p of pageNumbers(); track p) {
        <button class="pg-btn" [class.pg-active]="p === currentPage()" (click)="goToPage(p)">{{ p }}</button>
        }
        <button class="pg-btn" [class.pg-disabled]="currentPage() === totalPages()"
          (click)="goToPage(currentPage() + 1)">Next &#8594;</button>
      </div>
    </div>
  </div>

</div>
}

@if (ShowForm) {
<div class="detail-wrap">
  @if (form.bFormReady) {
  <form [formGroup]="form">
    <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="NeedCode"
          class="adjacentField" [gbReadOnly]="isViewOnly()"></gb-newpicklist>
        <gb-newpicklist (PicklistValue)="OnpicklistLoad($event)" [FormData]="form.value" formControlName="NeedTitle"
          class="adjacentField" [gbReadOnly]="isViewOnly()"></gb-newpicklist>
      </div>
      <div>
        <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value" formControlName="DomainName"
          class="adjacentField" [gbReadOnly]="isViewOnly()"></gb-newpicklist>
        <gb-combobox formControlName="NeedSourceType" class="adjacentField"></gb-combobox>
        <gb-combobox formControlName="Priority" class="adjacentField"></gb-combobox>
      </div>
      <div>
        <gb-combobox formControlName="AudienceType" class="adjacentField"></gb-combobox>
        <div style="display: inline-flex; flex-direction: column; vertical-align: top;">
          <gb-newpicklist (PicklistValue)="OnPicklistChange($event)" [FormData]="form.value"
            formControlName="RaisedByName" class="adjacentField" [gbReadOnly]="isViewOnly()"></gb-newpicklist>
          <p class="emp-code">{{ raisedByCode }}</p>
        </div>
      </div>
      <div>
        <gb-combobox formControlName="IsMandatory" class="adjacentField"></gb-combobox>
        <gb-date formControlName="ComplianceDeadline" class="adjacentField" [DateRefresh]="dateact"
          [ReadOnly]="isViewOnly()"></gb-date>
      </div>
      <gb-textarea formControlName="Description"></gb-textarea>
    </div>
  </form>
  }
</div>
}

<!-- ── Bulk Import Modal ────────────────────────────────────────────── -->
@if (showBulkImport()) {
<div class="bi-modal-overlay" (click)="closeBulkImport()">
  <div class="bi-modal-content" (click)="$event.stopPropagation()">
    <div class="bi-modal-header">
      <div class="bi-modal-title">Bulk Import Training Needs</div>
      <mat-icon (click)="closeBulkImport()" class="bi-close-icon">clear</mat-icon>
    </div>
    <div class="bi-modal-body scrollbar">
      <p class="bi-desc">
        Domain is matched by name against the Training Domain master automatically — no need to look
        up a numeric id. Employee Id / Raised By still need the actual numeric employee id (the
        Employee master is too large to match by name here) — leave blank if not applicable.
      </p>

      @if (bulkLookupsLoading()) {
      <div class="bi-hints">Loading Training Domain master list&hellip;</div>
      }
      @if (bulkLookupsError()) {
      <div class="bi-hints bi-hints-error">
        Couldn't load the Training Domain master list needed to match names. <a href="javascript:void(0)" (click)="retryBulkLookups()">Retry</a>
      </div>
      }

      <div class="bi-toolbar">
        <button class="btn-export" type="button" [disabled]="!bulkLookupsReady()" (click)="downloadBulkTemplate()">&#8595; Download Template</button>
        <label class="btn-raise bi-upload-label" [class.bi-disabled]="!bulkLookupsReady()">
          &#8593; Choose File
          <input type="file" accept=".xlsx,.xls,.csv" [disabled]="!bulkLookupsReady()" (change)="onBulkFileSelected($event)" hidden />
        </label>
        @if (bulkFileName()) { <span class="bi-filename">{{ bulkFileName() }}</span> }
      </div>

      @if (bulkRows().length === 0) {
      <div class="bi-hints">
        <p>Expected columns:</p>
        <ul>
          @for (col of bulkColumns; track col.key) {
          <li>
            <strong>{{ col.label }}</strong>
            @if (col.required) { <span class="bi-required">*</span> }
            @if (col.hint) { <span class="bi-hint"> &mdash; {{ col.hint }}</span> }
          </li>
          }
        </ul>
      </div>
      }

      @if (bulkRows().length > 0) {
      <div class="bi-summary">
        <span class="bi-chip">{{ bulkRows().length }} rows</span>
        @if (bulkInvalidCount() > 0) { <span class="bi-chip bi-chip-warn">{{ bulkInvalidCount() }} invalid</span> }
        @if (bulkSuccessCount() > 0) { <span class="bi-chip bi-chip-ok">{{ bulkSuccessCount() }} imported</span> }
        @if (bulkErrorCount() > 0) { <span class="bi-chip bi-chip-error">{{ bulkErrorCount() }} failed</span> }
        @if (bulkImporting()) { <span class="bi-progress">Importing&hellip; {{ bulkProcessedCount() }} / {{ bulkValidCount() }}</span> }
      </div>

      <div class="bi-table-wrap scrollbar">
        <table class="bi-table">
          <thead>
            <tr>
              <th>#</th>
              @for (col of bulkColumns; track col.key) { <th>{{ col.label }}</th> }
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            @for (row of bulkRows(); track row._rowNum) {
            <tr [ngClass]="'bi-row-' + row._status">
              <td>{{ row._rowNum }}</td>
              @for (col of bulkColumns; track col.key) { <td>{{ row[col.key] }}</td> }
              <td class="bi-status-cell">
                <span class="bi-status-badge" [ngClass]="'bi-status-' + row._status">{{ row._status }}</span>
                @if (row._errors.length) { <div class="bi-row-msg">{{ row._errors.join(', ') }}</div> }
                @if (row._message) { <div class="bi-row-msg bi-row-msg-error">{{ row._message }}</div> }
              </td>
            </tr>
            }
          </tbody>
        </table>
      </div>
      }
    </div>
    <div class="bi-actions">
      <button class="btn-export" type="button" (click)="closeBulkImport()">{{ bulkDone() ? 'Close' : 'Cancel' }}</button>
      <button class="btn-raise" type="button" [disabled]="bulkImporting() || bulkValidCount() === 0 || bulkDone()"
        (click)="startBulkImport()">
        {{ bulkImporting() ? 'Importing…' : 'Start Import (' + bulkValidCount() + ')' }}
      </button>
    </div>
  </div>
</div>
}