src/app/user-preferences/user-preferences.component.html

<div class="professional-page">
  <!-- Loader Overlay -->
  <div class="loader-overlay" *ngIf="isLoading">
    <div class="loader-container">
      <img src="assets/Loader.gif" alt="Loading..." style="width:72%;height:50%;display:block;margin:0 auto 25px;" />
    </div>
  </div>

  <!-- Text Input Popup Modal - ONLY FOR SUMMARY OF EXPECTATIONS -->
  <div class="text-input-popup-overlay" *ngIf="showTextInputPopup && isAdditionalRemarksField()" (click)="closeTextInputPopup()">
    <div class="text-input-popup-container" (click)="$event.stopPropagation()">
      <div class="text-input-popup-header">
        <h3>{{ popupQuestion?.question }}</h3>
        <button class="text-input-popup-close" (click)="closeTextInputPopup()">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="text-input-popup-body">
        <textarea class="text-input-popup-field"

                  [(ngModel)]="popupTextValue"

                  [placeholder]="popupQuestion ? 'Enter your answer...' : 'Enter your answer'"

                  (input)="onTextareaInput($event)"

                  rows="1"></textarea>

        <div class="text-input-popup-actions">
          <button class="btn btn-secondary" (click)="closeTextInputPopup()">
            Cancel
          </button>
          <button class="btn btn-primary" (click)="saveTextInputPopup()">
            Save
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Tutorial Icon -->
  <div class="tutorial-icon-container" *ngIf="selectedCategory !== 'review'">
    <button class="tutorial-icon-btn" (click)="openTutorialModal()" title="Learn about mandatory fields">
      <i class="fas fa-exclamation-circle"></i>
    </button>
  </div>

  <!-- Tutorial Modal Overlay - NEW STRUCTURE -->
  <div class="text-input-popup-overlay tutorial-modal-overlay" *ngIf="showTutorialModal" (click)="closeTutorialModal()">
    <div class="text-input-popup-container tutorial-modal-container" (click)="$event.stopPropagation()">
      <div class="text-input-popup-header">
        <h3><i class="fas fa-info-circle" style="color: #e74c3c; margin-right: 10px;"></i> Important: Set Your Match Preferences</h3>
        <button class="text-input-popup-close" (click)="closeTutorialModal()">
          <i class="fas fa-times"></i>
        </button>
      </div>

      <div class="text-input-popup-body">
        <div class="tutorial-content">
          <p class="tutorial-message">
            <strong>You can mark preferences as "Mandatory" if they are essential for your matches.</strong>
          </p>

          <div class="tutorial-features">
            <div class="feature-item">
              <i class="fas fa-star" style="color: #e74c3c;"></i>
              <span><strong>Mandatory:</strong> These preferences must be matched exactly</span>
            </div>
            <div class="feature-item">
              <i class="fas fa-circle" style="color: #95a5a6;"></i>
              <span><strong>Optional:</strong> These are preferred but not required</span>
            </div>
          </div>

          <div class="tutorial-example">
            <p>Look for this section under each question:</p>
            <div class="example-mandatory-section">
              <small class="mandatory-label">Match Type:</small>
              <label class="radio-option small">
                <input type="radio" name="example_mandatory" checked />
                <span class="radio-checkmark"></span>
                <span class="option-text">Mandatory</span>
              </label>
              <label class="radio-option small">
                <input type="radio" name="example_mandatory" />
                <span class="radio-checkmark"></span>
                <span class="option-text">Optional</span>
              </label>
            </div>
          </div>
        </div>

        <div class="text-input-popup-actions">
          <button class="btn btn-primary" (click)="closeTutorialModal()">
            Got it, let's start!
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Header -->
  <div class="container" id="pref-section">
    <div class="header">
      <h1>{{ isEditingExistingPreferences ? 'Update Your Preferences' : 'Set Your Preferences' }}</h1>

      <!-- Progress Bar -->
      <div class="progress-bar">
        <div class="progress-bar-line" [style.width.%]="getProgressBarWidth()"></div>
        <div *ngFor="let cat of categoriesMeta; let i = index"

             class="step"

             [class.active]="selectedCategory === cat.key"

             [class.completed]="getCategoryPercent(cat.key) === 100 && cat.key !== 'review'"

             (click)="selectCategory(cat.key)">
          <span class="step-icon">
            <i class="fas {{ getCategoryIcon(cat.key) }}"></i>
          </span>
          <span class="step-label">{{ getStepLabel(cat.title) }}</span>
        </div>
      </div>
    </div>

    <!-- Category Header with Progress -->
    <div class="category-header">
      <div class="category-info">
        <i class="fas {{ getCurrentCategoryIcon() }} category-header-icon"></i>
        <div class="category-details">
          <h3>{{ getCurrentCategoryTitle() }}</h3>
          <p>{{ getCurrentCategoryDescription() }}</p>
        </div>
      </div>

      <!-- Show completion status for review tab, progress indicator for others -->
      <div *ngIf="selectedCategory !== 'review'" class="category-progress-indicator">
        <div class="progress-bar-mini">
          <div class="progress-fill" [style.width.%]="getCategoryPercent(selectedCategory)"></div>
        </div>
        <span class="progress-text">{{ getCategoryPercent(selectedCategory) }}% Complete</span>
      </div>

      <div *ngIf="selectedCategory === 'review'" class="completion-status" [class.complete]="allFieldsAnswered">
        <span class="status-icon">{{ allFieldsAnswered ? '✓' : '!' }}</span>
        <span class="status-text">
          {{ allFieldsAnswered ? 'All fields completed' : (unansweredCount + ' field(s) remaining') }}
        </span>
      </div>
    </div>

    <!-- Single Mandatory Summary - For non-review tabs -->
    <div *ngIf="selectedCategory !== 'review' && getQuestionsByCategory(selectedCategory).length > 0" class="mandatory-summary">
      <p>
        <i class="fas fa-info-circle"></i>
        <strong>{{ getMandatoryFieldsCount() }} fields marked as mandatory.</strong>
        These will be strictly enforced in matching.
      </p>
    </div>

    <!-- Form Container -->
    <div class="form-container" [class.review-mode]="selectedCategory === 'review'">
      <!-- Category Panels -->
      <ng-container *ngFor="let cat of categoriesMeta">
        <section *ngIf="cat.key !== 'review'"

                 class="tab"

                 [class.active]="selectedCategory === cat.key"

                 [class.blur-background]="showTextInputPopup || showTutorialModal">

          <div class="tab-content">
            <!-- No Questions Message -->
            <div *ngIf="getQuestionsByCategory(cat.key).length === 0" class="no-questions-message">
              <h4>No questions available for this category</h4>
              <p>Category: <strong>{{ cat.key }}</strong> ({{ cat.title }})</p>
              <p>Total questions in system: {{ questions.length }}</p>
            </div>

            <!-- Questions Grid -->
            <div class="form-grid" *ngIf="getQuestionsByCategory(cat.key).length > 0">
              <div *ngFor="let question of getQuestionsByCategory(cat.key); trackBy: trackQuestion"

                   class="form-group"

                   [class.has-mandatory]="isMandatory(question.column_key)"

                   [id]="'q-' + question.column_key">

                <label [attr.for]="'answer' + question.column_key">
                  {{ question.question }}
                  <span *ngIf="isMandatory(question.column_key)" class="required-asterisk mandatory-badge">*Required</span>
                  <span *ngIf="question.required && !isMandatory(question.column_key)" class="required-asterisk">*</span>
                </label>

                <!-- Text Input with Popup for Summary of Expectations -->
                <div *ngIf="question.input_type === 'text'" class="text-input-container">
                  <!-- For Summary of Expectations - use popup -->
                  <div *ngIf="isAdditionalRemarksField(question)"

                       class="text-input-preview"

                       (click)="openTextInputPopup(question)"

                       [class.has-value]="getFormValue(question.column_key)">
                    {{ (getFormValue(question.column_key) || 'Enter your answer...') | truncate:100 }}
                  </div>

                  <!-- For other text fields - use regular inline input -->
                  <input *ngIf="!isAdditionalRemarksField(question)"

                         type="text"

                         class="form-control"

                         [id]="'answer' + question.column_key"

                         [value]="getFormValue(question.column_key)"

                         (input)="onTextInputChange($event, question.column_key)"

                         [placeholder]="isMandatory(question.column_key) ? 'Required field' : 'Enter your answer...'" />
                </div>

                <!-- Select Dropdown -->
                <select *ngIf="question.input_type === 'select'"

                        class="form-control"

                        [id]="'answer' + question.column_key"

                        [value]="getFormValue(question.column_key)"

                        (change)="onSelectChange($event, question.column_key)">
                  <option value="">Select an option</option>
                  <option *ngFor="let option of getOptions(question)" [value]="option">
                    {{ option }}
                  </option>
                </select>

                <!-- Multi-select Dropdown with Checkboxes -->
                <div *ngIf="question.input_type === 'multi_select'" class="multiselect-dropdown-checkbox">
                  <div class="dropdown-toggle"

                       (click)="toggleDropdown(question.column_key)"

                       [class.dropdown-open]="isDropdownOpen(question.column_key)">
                    <span class="selected-text">
                      {{ getSelectedOptionsText(question.column_key) || 'Select options' }}
                    </span>
                    <i class="fas fa-chevron-down dropdown-arrow"></i>
                  </div>

                  <div class="dropdown-options" [class.show]="isDropdownOpen(question.column_key)">
                    <div class="dropdown-options-container">
                      <!-- Select All Option -->
                      <div class="dropdown-option select-all" *ngIf="getOptions(question).length > 1">
                        <input type="checkbox"

                               class="checkbox-input"

                               [id]="'select_all_' + question.column_key"

                               [checked]="areAllOptionsSelected(question)"

                               (change)="toggleSelectAll(question)" />
                        <label [for]="'select_all_' + question.column_key"

                               class="checkbox-label select-all-label">
                          Select All
                        </label>
                      </div>
                      <div class="dropdown-divider" *ngIf="getOptions(question).length > 1"></div>

                      <!-- Regular Options -->
                      <div *ngFor="let option of getOptions(question)"

                           class="dropdown-option">
                        <input type="checkbox"

                               class="checkbox-input"

                               [id]="'dropdown_' + question.column_key + '_' + option"

                               [value]="option"

                               (change)="onCheckboxChange($event, question.column_key)"

                               [checked]="isCheckboxSelected(question.column_key, option)" />
                        <label [for]="'dropdown_' + question.column_key + '_' + option"

                               class="checkbox-label">
                          {{ option }}
                        </label>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Radio Buttons -->
                <div *ngIf="question.input_type === 'radio'" class="radio-group">
                  <div *ngFor="let option of getOptions(question)" class="radio-option">
                    <input type="radio"

                           class="radio-input"

                           [id]="'radio_' + question.column_key + '_' + option"

                           [name]="'radio_' + question.column_key"

                           [value]="option"

                           [checked]="isRadioSelected(question.column_key, option)"

                           (change)="onRadioChange($event, question.column_key)" />
                    <label [for]="'radio_' + question.column_key + '_' + option"

                           class="radio-label">
                      {{ option }}
                    </label>
                  </div>
                </div>

                <!-- Single Checkbox -->
                <div *ngIf="question.input_type === 'checkbox'" class="checkbox-single">
                  <input type="checkbox"

                         class="checkbox-input"

                         [id]="'checkbox_' + question.column_key"

                         [checked]="getFormValue(question.column_key)"

                         (change)="onCheckboxSingleChange($event, question.column_key)" />
                  <label [for]="'checkbox_' + question.column_key"

                         class="checkbox-label">
                    Yes
                  </label>
                </div>

                <!-- Mandatory/Optional Radio Buttons -->
                <div class="mandatory-section">
                  <div class="mandatory-options">
                    <small class="mandatory-label">Match Type:</small>
                    <label class="radio-option small">
                      <input type="radio"

                             [name]="'mandatory_' + question.column_key"

                             value="mandatory"

                             [checked]="isMandatory(question.column_key)"

                             (change)="onMandatoryChange(question.column_key, 'mandatory')" />
                      <span class="radio-checkmark"></span>
                      <span class="option-text">Mandatory</span>
                    </label>
                    <label class="radio-option small">
                      <input type="radio"

                             [name]="'mandatory_' + question.column_key"

                             value="optional"

                             [checked]="!isMandatory(question.column_key)"

                             (change)="onMandatoryChange(question.column_key, 'optional')" />
                      <span class="radio-checkmark"></span>
                      <span class="option-text">Optional</span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="tab-footer">
            <div class="button-group">
              <button *ngIf="selectedCategory !== categoriesMeta[0].key"

                      type="button"

                      class="btn btn-prev"

                      (click)="goToPreviousCategory(cat.key)">
                <i class="fas fa-arrow-left"></i> Previous
              </button>

              <button *ngIf="selectedCategory !== 'review'"

                      type="button"

                      class="btn btn-next"

                      (click)="goToNextCategory(cat.key)">
                Next <i class="fas fa-arrow-right"></i>
              </button>
            </div>
          </div>
        </section>
      </ng-container>

      <!-- Review Panel -->
      <section class="tab review-tab"

               [class.active]="selectedCategory === 'review'"

               [class.blur-background]="showTextInputPopup || showTutorialModal">

        <div class="tab-content">
          <div class="review-section">
            <!-- Review Tab Content with Sidebar -->
            <div class="review-tab-content">
              <!-- Left Sidebar with Category Tabs -->
              <div class="review-sidebar">
                <div class="review-category-tabs">
                  <ng-container *ngFor="let cat of categoriesMeta">
                    <div *ngIf="cat.key !== 'review'"

                         class="review-category-tab"

                         [class.active]="selectedReviewCategory === cat.key"

                         (click)="selectReviewCategory(cat.key)">
                      <span class="category-name">{{ cat.title }}</span>
                      <span class="category-progress">
                        {{ getCategoryAnsweredCount(cat.key) }}/{{ getQuestionsByCategory(cat.key).length }}
                      </span>
                    </div>
                  </ng-container>
                </div>
              </div>

              <!-- Right Content Area -->
              <div class="review-content">
                <div *ngIf="selectedReviewCategory" class="review-category-content">
                  <!-- Category Header -->
                  <div class="review-category-header">
                    <h3 class="review-category-title">
                      {{ getReviewCategoryTitle(selectedReviewCategory) }}
                    </h3>
                    <div class="review-category-stats">
                      <span>{{ getCategoryAnsweredCount(selectedReviewCategory) }}/{{ getQuestionsByCategory(selectedReviewCategory).length }} answered</span>
                      <button type="button"

                              class="btn btn-secondary"

                              (click)="selectCategory(selectedReviewCategory)">
                        Edit Section
                      </button>
                    </div>
                  </div>

                  <!-- Answers List -->
                  <div class="review-answers">
                    <div *ngFor="let question of getQuestionsByCategory(selectedReviewCategory)"

                         class="review-answer-item"

                         [class.unanswered]="!isAnswered(question)">
                      <span class="review-answer-label">
                        {{ question.question }}
                        <span *ngIf="isMandatory(question.column_key)" class="mandatory-badge">Mandatory</span>
                      </span>
                      <span class="review-answer-value" [class.missing]="!isAnswered(question)">
                        {{ getAnswerDisplay(question) }}
                      </span>
                    </div>
                  </div>
                </div>

                <!-- Empty State -->
                <div *ngIf="!selectedReviewCategory" class="review-empty-state">
                  <div style="text-align: center; padding: 60px 20px;">
                    <i class="fas fa-folder-open" style="font-size: 3rem; color: #bdc3c7; margin-bottom: 20px;"></i>
                    <h3 style="color: #2c3e50; margin-bottom: 10px;">Select a Category</h3>
                    <p style="color: #7f8c8d;">Choose a category from the left sidebar to review your answers.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="tab-footer">
          <div class="button-group">
            <button type="button"

                    class="btn btn-prev"

                    (click)="goToPreviousCategory('review')">
              <i class="fas fa-arrow-left"></i> Previous
            </button>

            <button type="button"

                    class="btn btn-submit"

                    (click)="submit()"

                    [disabled]="!form.valid">
              {{ isEditingExistingPreferences ? 'Update Preferences' : 'Save Preferences' }} <i class="fas fa-check"></i>
            </button>
          </div>
        </div>
      </section>
    </div>
  </div>

  <!-- Success Modal -->
  <div class="success-modal-overlay" *ngIf="showModal">
    <div class="success-modal-container">
      <div class="success-modal-header">
        <button class="success-modal-close" (click)="closeModal()">
          <i class="fas fa-times"></i>
        </button>
        <div class="success-modal-icon">
          <i class="fas fa-check-circle"></i>
        </div>
        <h2 class="success-modal-title">
          {{ isEditingExistingPreferences ? 'Preferences Updated!' : 'Preferences Saved!' }}
        </h2>
      </div>

      <div class="success-modal-body">
        <p class="success-modal-message">
          Your preferences have been {{ isEditingExistingPreferences ? 'updated' : 'saved' }} successfully
          and will be used for matching.
        </p>

        <div class="success-modal-stats" *ngIf="getMandatoryFieldsCount() > 0">
          <p>
            <i class="fas fa-star"></i>
            <strong>{{ getMandatoryFieldsCount() }} field(s)</strong> marked as mandatory will be strictly enforced in matching.
          </p>
        </div>

        <div class="success-modal-actions">
          <button class="success-modal-btn success-modal-btn-secondary" (click)="redirectToHome()">
            <i class="fas fa-home"></i>
            Go to Home
          </button>
          <button class="success-modal-btn success-modal-btn-primary" (click)="redirectToAssessment()">
            <i class="fas fa-clipboard-list"></i>
            Take Assessment
          </button>
        </div>
      </div>
    </div>
  </div>
</div>