@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/form-submission/submit-form/submit-form.component.ts

@@ -0,0 +1,1953 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { FormService } from '../../services/form.service';
+import * as mapper from '../../services/mapper.service';
+import { PublicForm } from '../../models/publicForm.model';
+import { ToastrService } from 'ngx-toastr';
+import { Router } from '@angular/router';
+import { DataService } from '../../services/data.service';
+import { RecaptchaService } from '../../services/recaptcha.service';
+import { ValidationService } from '../../services/validation.service';
+import { ElementTrackerService } from '../../services/element-tracker.service';
+import { NavigationTabsComponent } from '../navigation-tabs/navigation-tabs.component';
+import { FormValidationService } from '../../services/form-validation.service';
+import { AggregationFunctionService } from '../../services/aggregate.service';
+import { EmitterDTO } from '../../models/emitters.model';
+import { ScoreCalculationService } from '../../services/score.service';
+import { MatDialog } from '@angular/material/dialog';
+import { SaveDraftModalComponent } from '../save-as-draft/saveDraftModalComponent ';
+import { WhenClauseService } from '../../services/whenClause.service';
+import { HttpEventType } from '@angular/common/http';
+
+interface Answer {
+  questionId: string;
+  answer: any;
+  answerId?: string;
+  deleteFiles?: string[];
+  fields?: any;
+}
+
+interface Submission {
+  submissionId?: string;
+  answers: Answer[];
+}
+
+interface Form {
+  formId: string;
+  deleted?: boolean;
+  deletedSubmissions: any[];
+  submissions: Submission[];
+  copiedForms: string[];
+  scores?:{
+    scoreType: string;
+    score: number;
+  }[];
+  maximumPossibleScore?:number;
+  show?:boolean;
+}
+
+interface CopyForms{
+  id: string,
+  title: string,
+  description: string,
+  parentSubform: string,
+  questionRelation: Record<string, string>;
+}
+
+interface WhenClauseElements{
+  elementId:string;
+  entityType:string;
+  show:boolean;
+}
+
+interface QuestionAnswersWrapper {
+  parentId: string;
+  answers: Answer[];
+  forms: Form[];
+  copySubForms:CopyForms[];
+  scores?:{
+    scoreType: string;
+    score: number;
+  }[];
+  maximumPossibleScore?:number;
+  whenClauseElements: WhenClauseElements[]
+}
+
+interface SubmissionScore {
+  scoreType: string;
+  score: number;
+}
+
+@Component({
+  selector: 'lib-submit-form',
+  templateUrl: './submit-form.component.html',
+  styleUrls: ['./submit-form.component.scss'],
+})
+export class SubmitFormComponent implements OnInit, OnDestroy {
+  question: PublicForm | null = null;
+  @Input() moduleName: string = '';
+  @Input() edit: boolean = false;
+  @Input() submissionId: string = '';
+  @Input() acceptedLanguage: string = '';
+  @Input() skipMargin: boolean = false;
+  @Input() skipValidation: boolean = false;
+  @Input() navigateTo: string = '';
+  @Input() country: string = '';
+  @Output() submit: EventEmitter<any> = new EventEmitter<any>();
+  @Output() apiCalled: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() currentPageIndexChange: EventEmitter<number> =
+    new EventEmitter<number>();
+  @Input() showCancelButton: boolean = false;
+  @Output() cancel: EventEmitter<string> = new EventEmitter<string>();
+  @ViewChild(NavigationTabsComponent, { static: false })
+  child!: NavigationTabsComponent;
+  @Input() isActionTriggered: boolean = false;
+  isLoading: boolean = false;
+  name: string = '';
+  saveAutomatically: boolean = false;
+  saveInterval: number = 0;
+  customizeFont: boolean = false;
+  fontFamily: string = '';
+  fontSize: number = 0;
+  validationSkip: boolean = false;
+  enableDataExport: boolean = false;
+  fileFormats: string[] = [];
+  enableQuestionNumbering: boolean = false;
+  questionNumbering: string = '';
+  enableGoogleRecaptcha: boolean = false;
+  googleRecaptchaKey: string = '';
+  googleRecaptchaSecret: string = '';
+  navigation: string = '';
+  markAllQuestionsAsRequired: boolean = false;
+  pages: any = [];
+  currentPageIndex: number = 0;
+  previousPage: any = {};
+  currentPage: any = {};
+  nextPage: any = {};
+  lastTab: boolean = false;
+  questionAnswers: QuestionAnswersWrapper = {
+    parentId: '',
+    answers: [],
+    forms: [],
+    copySubForms: [],
+    whenClauseElements: []
+  };
+  webhook: any;
+  files: { questionId: string; file: any ; show?:boolean}[] = [];
+  parentQuestions: any;
+  submission: any = {};
+  parentQuestionAnswers: any;
+  parentSubmissionId: string = '';
+  submissionInProgress: boolean = false;
+  submissionInDraft: boolean = false;
+  recaptchaToken: string = '';
+  private isRefreshing: boolean = false;
+  private intervalId: ReturnType<typeof setInterval> | null = null;
+  pageDetails: any = [];
+  pageNumber: number = 1;
+  rowSet: number = 0;
+  rowSetCount: [number] = [0];
+  retryCount: number = 0;
+  maxRetries: number = 5;
+
+  eligibleForSubmission: { status: boolean; message: string } = {
+    status: true,
+    message: '',
+  };
+  webhookPayloadArray: any[] = [];
+  inValidQuestions: Map<string, string> = new Map<string, string>();
+  visitedRows: Map<number, number> = new Map<number, number>();
+  allElementIds: string[] = [];
+  private debounceTimer: any;
+  primaryColor: string = '#084fff';
+  secondaryColor: string = '';
+  isLoadingPages: boolean = false;
+  copySubforms: CopyForms[] = [];
+  emitters: EmitterDTO[] = [];
+  maxPossibleScore!: number;
+  maxPossibleGoodScore!: number;
+  maxPossibleBadScore!: number;
+  sumOfFindings!: number;
+  sumOfGoodFindings!: number;
+  sumOfBadFindings!: number;
+  draft: boolean = false;
+  submissionProgress = 0;
+  showSubmissionLoader = false;
+  progressInterval: any;
+  currentStep = 'Submitting form';
+  animatedDots = '';
+  private dotInterval: any;
+
+  constructor(
+    private formService: FormService,
+    private toastr: ToastrService,
+    private router: Router,
+    private dataService: DataService,
+    private recaptchaService: RecaptchaService,
+    private validationService: ValidationService,
+    private changeDetectorRef: ChangeDetectorRef,
+    private elementTracker: ElementTrackerService,
+    private formValidationService: FormValidationService,
+    private aggregateService: AggregationFunctionService,
+    private scoreCalcService: ScoreCalculationService,
+    public dialog: MatDialog,
+    private whenClauseService:WhenClauseService
+  ) {
+    const navigation = this.router.getCurrentNavigation();
+    this.submission = navigation?.extras.state?.['submission'];
+    this.parentSubmissionId = this.submission?.id;
+    this.parentQuestionAnswers = this.submission?.questionAnswers;
+    this.parentQuestions = navigation?.extras.state?.['parentQuestions'];
+    this.dataService.setParentQuestions(this.parentQuestions);
+  }
+  ngOnDestroy(): void {
+    this.visitedRows.clear();
+    this.recaptchaService.removeRecaptchaScript();
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+      this.isRefreshing = false;
+    }
+    this.aggregateService.clearAll();
+    this.recaptchaService.removeRecaptchaScript();
+    this.whenClauseService.resetService();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['acceptedLanguage']) {
+      this.currentPageIndex = 0;
+      this.acceptedLanguage = changes['acceptedLanguage'].currentValue;
+      if (!this.edit) this.getFormData();
+    }
+    if(changes['submissionId']){
+      this.submissionId=changes['submissionId'].currentValue;
+      if (this.edit && this.submissionId) {
+        this.getSubmittedFormData();
+      }
+    }
+  }
+
+  ngOnInit() {
+    if (this.edit && this.submissionId) {
+      // this.getSubmittedFormData();
+    } else {
+      // this.getFormData();
+    }
+
+    if (this.enableGoogleRecaptcha) {
+      this.recaptchaInitialized();
+    }
+  }
+
+  async recaptchaInitialized() {
+    await this.recaptchaService.initialize();
+    this.recaptchaService.render('captcha-container', (token) => {});
+  }
+
+  async getToken(): Promise<string> {
+    return new Promise(async (resolve) => {
+      try {
+        await this.recaptchaService.initialize();
+
+        // Check if CAPTCHA was rendered
+        if (!this.recaptchaService.isRendered()) {
+          console.warn('reCAPTCHA not rendered yet.');
+          return resolve('');
+        }
+
+        // If solved, return the token
+        if (this.recaptchaService.isResolved()) {
+          const token = this.recaptchaService.getResponse();
+
+          return resolve(token);
+        }
+
+        // If expired or unsolved, return empty string
+        console.warn('reCAPTCHA not resolved or expired.');
+        return resolve('');
+      } catch (err) {
+        console.error('reCAPTCHA initialization failed:', err);
+        return resolve('');
+      }
+    });
+  }
+
+  loadFont(fontName: string): void {
+    const fontPath = `assets/fonts/${fontName}.woff2`; // Adjust extension as per your font file
+    const style = document.createElement('style');
+    style.innerHTML = `
+      @font-face {
+        font-family: '${fontName}';
+        src: url('${fontPath}') format('woff2');
+        font-weight: normal;
+        font-style: normal;
+      }
+      body {
+        font-family: '${fontName}', sans-serif;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  getFormData() {
+    this.isLoadingPages = true;
+    this.formService
+      .getQuestions(this.moduleName, 1, 0, true,this.country)
+      .subscribe((response: any) => {
+        this.isLoadingPages = false;
+        this.enableGoogleRecaptcha =
+          response.result.moduleConfiguration?.enableGoogleRecaptcha;
+        this.question = mapper.mapPublicFormToModel(response);
+        this.emitters = this.question.emitters || [];
+        this.assignQuestionProperties(this.question);
+        this.setUpFontFamily(response);
+        this.primaryColor = response.result.primaryColor || '#084fff';
+        this.secondaryColor = response.result.secondaryColor;
+        if (this.enableGoogleRecaptcha) this.recaptchaInitialized();
+        if (response?.result?.pageDetails) {
+          this.pageDetails = response.result.pageDetails;
+          this.nextPage = this.pageDetails[1];
+        }
+        this.webhook = response?.result?.webhooks;
+        this.webhookPayloadArray = response?.result?.webhooks?.map(
+          (w: any) => ({
+            id: w.id,
+            ...this.extractGroupedWebhookData([w]),
+          })
+        );
+
+        this.rowSetCount[0] = response.result.totalNumberRow;
+        for (let i = 0; i < this.pageDetails.length; i++) {
+          if (!this.pages[i]) {
+            this.pages[i] = [];
+          }
+        }
+        this.checkSubmissionEligibility();
+      });
+  }
+
+  getSubmittedFormData() {
+    this.formService
+      .getSubmittedForm(
+        this.moduleName,
+        this.submissionId,
+        1,
+        0,
+        this.navigateTo
+      )
+      .subscribe((response) => {
+        this.enableGoogleRecaptcha =
+          response.result.moduleConfiguration.enableGoogleRecaptcha;
+        this.question = mapper.mapPublicFormToModel(response);
+        this.assignQuestionProperties(this.question);
+        this.primaryColor = response.result.primaryColor || '#084fff';
+        this.secondaryColor = response.result.secondaryColor;
+        this.emitters = this.question.emitters || [];
+        if (response?.result?.pageDetails) {
+          this.pageDetails = response.result.pageDetails;
+          this.nextPage = this.pageDetails[1];
+        }
+        this.webhookPayloadArray;
+        this.webhookPayloadArray = response?.result?.webhooks?.map(
+          (w: any) => ({
+            id: w.id,
+            ...this.extractGroupedWebhookData([w]),
+          })
+        );
+        this.rowSetCount[0] = response.result.totalNumberRow;
+        for (let i = 0; i < this.pageDetails.length; i++) {
+          if (!this.pages[i]) {
+            this.pages[i] = [];
+          }
+        }
+        this.setUpFontFamily(response);
+        if (this.navigateTo) {
+          setTimeout(() => {
+            this.navigateToFormElement();
+          });
+        }
+        if (this.enableGoogleRecaptcha) {
+          this.recaptchaInitialized();
+        }
+        this.checkSubmissionEligibility();
+      });
+  }
+
+  setUpFontFamily(response: any) {
+    //set font family and font size
+    if (response.result?.moduleConfiguration?.customizeFont) {
+      this.fontFamily = response.result.moduleConfiguration?.fontFamily;
+      this.fontSize = response.result.moduleConfiguration?.fontSize || 18;
+    } else {
+      this.fontFamily = 'Poppins';
+      this.fontSize = 18;
+    }
+    this.loadFont(this.fontFamily);
+    document.documentElement.style.setProperty(
+      '--library-font-family',
+      this.fontFamily
+    );
+    document.documentElement.style.setProperty(
+      '--library-font-size',
+      this.fontSize + 'px'
+    );
+  }
+
+  navigateToFormElement() {
+    if (!this.pages) return;
+
+    let foundPageIndex: number | null = null;
+
+    // Step 1: find the page index
+    this.pages.forEach((page: any, pageIndex: number) => {
+      if (!page?.rows) return;
+
+      page.rows.forEach((row: any) => {
+        if (!row?.grid) return;
+
+        row.grid.forEach((gridItem: any) => {
+          const element = gridItem?.element;
+          if (!element) return;
+
+          // Case 1: Direct question match
+          if (
+            gridItem.entityType === 'QUESTION' &&
+            element.id === this.navigateTo
+          ) {
+            foundPageIndex = pageIndex;
+          }
+
+          // Case 2: Subform match
+          if (gridItem.entityType === 'SUBFORM') {
+            if (element.id === this.navigateTo) {
+              foundPageIndex = pageIndex;
+            }
+            if (
+              element.submissions?.some(
+                (s: any) => s.submissionId === this.navigateTo
+              )
+            ) {
+              foundPageIndex = pageIndex;
+            }
+          }
+        });
+      });
+    });
+
+    if (foundPageIndex !== null) {
+      // Step 2: Set current page
+      this.currentPageIndex = foundPageIndex;
+      this.currentPage = this.pages[this.currentPageIndex];
+
+      if (this.navigation == 'TAB') {
+        this.child.triggerFunction(this.currentPageIndex);
+      } else {
+
+        this.previousPage = this.pageDetails[this.currentPageIndex - 1];
+        this.nextPage = this.pageDetails[this.currentPageIndex + 1];
+      }
+      // Step 3: Wait for DOM render and scroll
+      setTimeout(() => {
+        const elementId = `question-${this.navigateTo}`;
+        const el = document.getElementById(elementId);
+        if (el) {
+          el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          this.checkSubmissionEligibility();
+        }
+      }, 0);
+    } else {
+      console.warn(`navigateTo id ${this.navigateTo} not found in any page`);
+    }
+  }
+
+  assignQuestionProperties(question: PublicForm) {
+    this.name = question.name;
+    this.pages = question.pages;
+    if (this.parentQuestions) {
+      this.parentQuestionAnswers = question?.questionAnswers;
+      this.parentSubmissionId = question?.parentId;
+    }
+    this.currentPage = this.pages[0];
+    this.nextPage = this.pages[1];
+    this.saveAutomatically = question.formConfiguration.saveAutomatically;
+    this.saveInterval = question.formConfiguration.saveInterval;
+    this.customizeFont = question.formConfiguration.customizeFont;
+    this.fontFamily = question.formConfiguration.fontFamily;
+    this.fontSize = question.formConfiguration.fontSize;
+    this.enableDataExport = question.formConfiguration.enableDataExport;
+    this.fileFormats = question.formConfiguration.fileFormats;
+    this.enableQuestionNumbering =
+      question.formConfiguration.enableQuestionNumbering;
+    this.questionNumbering = question.formConfiguration.questionNumbering;
+    this.enableGoogleRecaptcha =
+      question.formConfiguration.enableGoogleRecaptcha;
+    this.googleRecaptchaKey = question.formConfiguration.googleRecaptchaKey;
+    this.googleRecaptchaSecret =
+      question.formConfiguration.googleRecaptchaSecret;
+    this.navigation = question.formConfiguration.navigation;
+    this.markAllQuestionsAsRequired =
+      question.formConfiguration.markAllQuestionsAsRequired;
+    this.apiCalled.emit(true);
+  }
+
+  navigateToNextPage() {
+    if (!this.isLoading) {
+      this.isLoading = true;
+      const nextIndex = this.currentPageIndex + 1;
+      if (nextIndex < this.pageDetails.length) {
+        if (this.markAllQuestionsAsRequired) {
+          const currentPageData = this.pages[this.currentPageIndex];
+          let validationResponse = true;
+          if (!this.validationSkip) {
+            validationResponse =
+              this.formValidationService.validateRequiredQuestions(
+                currentPageData
+              ).isValid;
+          }
+          if (validationResponse) {
+            this.previousPage = this.pageDetails[this.currentPageIndex];
+            if (this.pages[nextIndex].length != 0) {
+              this.currentPage = this.pages[nextIndex];
+              this.currentPageIndex = nextIndex;
+            } else {
+              this.setCurrentPage(nextIndex);
+            }
+            this.nextPage = this.pageDetails[nextIndex + 1];
+          }
+        } else {
+          this.previousPage = this.pageDetails[this.currentPageIndex];
+          if (this.pages[nextIndex].length != 0) {
+            this.currentPage = this.pages[nextIndex];
+            this.currentPageIndex = nextIndex;
+          } else {
+            this.setCurrentPage(nextIndex);
+          }
+          this.nextPage = this.pageDetails[nextIndex + 1];
+        }
+      }
+      this.isLoading = false;
+      this.checkSubmissionEligibility();
+    }
+  }
+
+  navigateToPreviousPage() {
+    if (this.currentPageIndex > 0) {
+      if (this.markAllQuestionsAsRequired) {
+        const currentPageData = this.pages[this.currentPageIndex];
+        let validationResponse = true;
+        if (!this.validationSkip) {
+          validationResponse =
+            this.formValidationService.validateRequiredQuestions(
+              currentPageData
+            ).isValid;
+        }
+        if (validationResponse) {
+          this.nextPage = this.pageDetails[this.currentPageIndex];
+          this.currentPageIndex--;
+          if (this.pages[this.currentPageIndex].length != 0) {
+            this.currentPage = this.pages[this.currentPageIndex];
+          } else {
+            this.setCurrentPage(this.currentPageIndex);
+          }
+          this.previousPage = this.pageDetails[this.currentPageIndex - 1];
+        }
+      } else {
+        this.nextPage = this.pageDetails[this.currentPageIndex];
+        this.currentPageIndex--;
+        if (this.pages[this.currentPageIndex].length != 0) {
+          this.currentPage = this.pages[this.currentPageIndex];
+        } else {
+          this.setCurrentPage(this.currentPageIndex);
+        }
+        this.previousPage = this.pageDetails[this.currentPageIndex - 1];
+      }
+    }
+    this.checkSubmissionEligibility();
+  }
+
+  checkSubmissionEligibility(): void {
+    this.eligibleForSubmission = this.validateAllElementLoaded();
+  }
+
+  setCurrentPage(index: number) {
+    if (index < this.pages.length) {
+      // If page already exists AND has content → no need to fetch again
+      if (
+        this.pages[index] &&
+        this.pages[index].rows &&
+        this.pages[index].rows.length > 0
+      ) {
+        this.checkSubmissionEligibility();
+        return;
+      }
+    }
+    this.pageNumber = index + 1;
+    if (this.edit) {
+      this.formService
+        .getSubmittedForm(
+          this.moduleName,
+          this.submissionId,
+          this.pageNumber,
+          this.rowSet
+        )
+        .subscribe((response: any) => {          
+          const mappedResponse = mapper.mapPageToModel(response.result.pages[0],response.result?.currency,response.result?.defaultCurrency);
+          if (mappedResponse) {
+            this.pages[index] = mappedResponse;
+          }
+          this.currentPageIndex = index;
+          this.currentPage = this.pages[index];
+          this.rowSetCount[index] = response.result.totalNumberRow;
+          this.checkSubmissionEligibility();
+        });
+    } else {
+      this.formService
+        .getQuestions(this.moduleName, this.pageNumber, this.rowSet, true,this.country)
+        .subscribe((response: any) => {
+          const mappedResponse = mapper.mapPageToModel(response.result.pages[0],response.result?.currency,response.result?.defaultCurrency);
+          if (mappedResponse) {
+            this.pages[index] = mappedResponse;
+          }
+          this.currentPageIndex = index;
+          this.currentPage = this.pages[index];
+          this.rowSetCount[index] = response.result.totalNumberRow;
+          this.checkSubmissionEligibility();
+        });
+    }
+
+    if (this.markAllQuestionsAsRequired) {
+      const currentPageData = this.pages[this.currentPageIndex];
+      let validationResponse = true;
+      if (!this.validationSkip) {
+        validationResponse =
+          this.formValidationService.validateRequiredQuestions(
+            currentPageData
+          ).isValid;
+      }
+      if (validationResponse) {
+        this.currentPageIndex = index;
+      } else {
+        this.checkSubmissionEligibility();
+        return;
+      }
+    } else {
+      this.checkSubmissionEligibility();
+      this.currentPageIndex = index;
+    }
+  }
+
+  loadMoreData(index: number): void {
+    if (!this.isLoading) {
+      this.isLoading = true;
+      let rowCountLimit = this.rowSetCount[index];
+      let i = 0;
+      this.pages[index].rows.forEach((row: any) => {
+        row.grid.forEach((gridItem: any) => {
+          i++;
+        });
+      });
+      let rowCount = i / 20;
+      rowCount = Math.ceil(rowCount);
+
+      if (this.visitedRows.has(index)) {
+        if (this.visitedRows.get(index) === rowCount) {
+          this.isLoading = false;
+          return;
+        }
+      }
+
+      if (rowCount + 1 > rowCountLimit && !this.navigateTo) {
+        this.checkSubmissionEligibility();
+        this.isLoading = false;
+        return;
+      }
+      this.visitedRows.set(index, rowCount);
+
+      if (this.edit) {
+        this.formService
+          .getSubmittedForm(
+            this.moduleName,
+            this.submissionId,
+            index + 1,
+            rowCount
+          )
+          .subscribe((response: any) => {
+            const newRows = response?.result?.pages[0]?.rows ?? [];
+            this.pages[index].rows = [
+              ...(this.pages[index]?.rows ?? []),
+              ...newRows,
+            ];
+            this.currentPageIndex = index;
+            this.currentPage = this.pages[index];
+            this.rowSetCount[index] = response.result.totalNumberRow;
+            this.checkSubmissionEligibility();
+            this.isLoading = false;
+          });
+      } else {
+        this.formService
+          .getQuestions(this.moduleName, index + 1, rowCount)
+          .subscribe((response: any) => {
+            const newRows = response?.result?.pages[0]?.rows ?? [];
+            this.pages[index].rows = [
+              ...(this.pages[index]?.rows ?? []),
+              ...newRows,
+            ];
+            this.currentPageIndex = index;
+            this.currentPage = this.pages[index];
+            this.rowSetCount[index] = response.result.totalNumberRow;
+            this.checkSubmissionEligibility();
+            this.isLoading = false;
+          });
+      }
+
+      this.checkSubmissionEligibility();
+    }
+  }
+
+  generateQuestionAnswers() {
+    this.maxPossibleScore = 1;
+    this.sumOfFindings = 0;
+    this.sumOfBadFindings = 0;
+    this.sumOfGoodFindings = 0;
+    this.maxPossibleBadScore = 0;
+    this.maxPossibleGoodScore = 0;
+    this.copySubforms = [];
+
+    // this.maxPossibleGoodScore = 0;
+    // this.maxPossibleBadScore = 0;
+    const extractQuestions = (
+      formElements: any[],
+      parentFormId: string | null = null,
+      isInSubForm: boolean = false,
+      subFormIndex: number = 0
+    ): { answers: Answer[]; forms: Form[] } => {
+      const questions: Answer[] = [];
+      const forms: Form[] = [];
+      formElements.forEach((element) => {
+        if (element.entityType === 'QUESTION' && element.show) {
+          let baseQuestion: any;
+          if (element.element.formElement.elementType === 'FILE_PICKER') {
+            baseQuestion = {
+              questionId: element.element.id,
+              answer: '',
+            };
+            if (Array.isArray(element.element.answer)) {
+              const questionId = isInSubForm
+                ? `${parentFormId}_${subFormIndex}_${element.element.id}`
+                : element.element.id;
+              this.files.push({
+                questionId: questionId,
+                file: element.element.answer,
+                show: element.show
+              });
+            }
+          } else {
+            baseQuestion = {
+              questionId: element.element.id,
+              answer: element.element.answer,
+              score: element.element.score,
+              maximumPossibleScore: element.element.maxPossibleScore,
+              currencySymbol: element.element?.currencySymbol,
+              amountInWords: element.element?.amountInWords,
+              show: element.show
+            };
+          }
+          if (this.edit) {
+            questions.push({
+              ...baseQuestion,
+              answerId: element.element.answerId || '',
+              deleteFiles: element.element.deleteFiles || [],
+            });
+          } else {
+            questions.push(baseQuestion);
+          }
+
+          if (
+            (element.element.formElement.elementType === 'DROP_DOWN' ||
+              element.element.formElement.elementType === 'RADIO_BUTTON' ||
+              element.element.formElement.elementType === 'CHECK_BOX') &&
+            element.element.formElement.scoring &&
+            element.element.formElement.scoring.enableScoring &&
+            !isInSubForm
+          ) {
+            this.maxPossibleScore *=
+              this.scoreCalcService.getMaxPossibleScoreForQuestion(
+                element.element
+              );
+            if (
+              element.element.score &&
+              element.element.score != null &&
+              element.element.score != undefined
+            ) {
+              this.sumOfFindings += element.element.score;
+            }
+          }
+
+          if (element.element.childLogics) {
+            for (let logic of element.element.childLogics) {
+              if (logic.showLogic) {
+                for (let row of logic.rows) {
+                  const result = extractQuestions(
+                    row.grid,
+                    parentFormId,
+                    isInSubForm,
+                    subFormIndex
+                  );
+                  questions.push(...result.answers);
+                  forms.push(...result.forms);
+                }
+              }
+            }
+          }
+        } else if (element.entityType === 'SUBFORM' && element.show) {
+          const subformId = element.element.id;
+          const submissionId = element.element.submissionId;
+          if (element.element.copySubformMeta) {
+            this.copySubforms.push(element.element.copySubformMeta);
+          }
+          if (element.element.property.subFormStructure === 'single') {
+            let allAnswers: Answer[] = [];
+
+            element.element.rows.forEach((row: any) => {
+              const extracted = extractQuestions(
+                row.grid,
+                subformId,
+                true,
+                forms.length
+              );
+              extracted.answers.forEach((answer) => {
+                allAnswers.push({ ...answer });
+              });
+            });
+            let copiedForms;
+            if (element.element.copiedForms) {
+              copiedForms = element.element.copiedForms;
+            }
+            const subform: Form = {
+              formId: subformId,
+              deleted: element.element.deleted,
+              deletedSubmissions: [],
+              submissions: [
+                {
+                  submissionId: submissionId,
+                  answers: allAnswers,
+                },
+              ],
+              copiedForms: copiedForms,
+            };
+
+            forms.push(subform);
+          } else if (element.element.property.subFormStructure === 'multiple') {
+            const subformAnswers: Answer[] = [];
+            let subformQuestions: any = { answers: [] };
+            element.element.rows.forEach((row: any) => {
+              subformQuestions = extractQuestions(
+                row.grid,
+                subformId,
+                true,
+                forms.length
+              );
+            });
+            const existingSubform = forms.find(
+              (form) => form.formId === subformId
+            );
+            if (
+              (element.element.property.subFormType == 'inline' ||
+                element.element.property.subFormType == 'card') &&
+              element.element.submissions
+            ) {
+              element.element.submissions = this.clearEmptySubmissions(
+                element.element.submissions
+              );
+            }
+            element.element?.submissions?.forEach(
+              (submission: any, index: number) => {
+                for (const s of submission.scores ?? []) {
+                  if (s.scoreType === 'GOOD_SCORE') {
+                    this.sumOfGoodFindings += s.score;
+                  }
+                  if (s.scoreType === 'BAD_SCORE') {
+                    this.sumOfBadFindings += s.score;
+                  }
+                }
+                delete submission.hasAllScoringAnsweredOnce;
+                submission.answers.forEach((answer: any) => {
+                  delete answer.htmlContent;
+                  if (Array.isArray(answer.files)) {
+                    const questionId = `${subformId}_${index}_${answer.questionId}`;
+                    this.files.push({
+                      questionId: questionId,
+                      file: answer.files,
+                    });
+                    delete answer.files;
+                  }
+                  delete answer.attachments;
+                });
+              }
+            );
+            let copiedForms;
+            if (element.element.copiedForms) {
+              copiedForms = element.element.copiedForms;
+            }
+
+            const subform: Form = {
+              formId: subformId,
+              deleted: element.element.deleted,
+              scores: element.element.scores,
+              deletedSubmissions: element.element.deletedSubmissions,
+              submissions: element.element.submissions,
+              copiedForms: copiedForms,
+            };
+            forms.push(subform);
+            this.maxPossibleScore +=
+              element.element?.maxPossibleScore *
+              element.element?.submissions?.length;
+            this.maxPossibleGoodScore +=
+              element.element?.maxPossibleScore?.good *
+              element.element?.submissions?.length || 0;
+            this.maxPossibleBadScore +=
+              element.element?.maxPossibleScore?.bad *
+              element.element?.submissions?.length || 0;
+          }
+        } else if (element.entityType === 'QUESTION_GROUP' && element.show) {
+          // Handle Question Group by iterating through rows
+          element.element.rows.forEach((row: any) => {
+            row.grid.forEach((gridItem: any) => {
+              if (gridItem.entityType === 'QUESTION' && gridItem.show) {
+                let baseQuestion: any;
+                if (
+                  gridItem.element?.formElement.elementType === 'FILE_PICKER'
+                ) {
+                  baseQuestion = {
+                    questionId: gridItem.element.id,
+                    answer: '',
+                  };
+                  if (Array.isArray(gridItem.element.answer)) {
+                    const questionId = isInSubForm
+                      ? `${parentFormId}_${subFormIndex}_${gridItem.element.id}`
+                      : gridItem.element.id;
+                    this.files.push({
+                      questionId: questionId,
+                      file: gridItem.element.answer,
+                    });
+                  }
+                } else {
+                  baseQuestion = {
+                    questionId: gridItem.element.id,
+                    answer: gridItem.element.answer,
+                    amountInWords: gridItem.element.amountInWords
+                  };
+                }
+                if (this.edit) {
+                  questions.push({
+                    ...baseQuestion,
+                    answerId: gridItem.element.answerId || '',
+                    deleteFiles: gridItem.element.deleteFiles || [],
+                  });
+                } else {
+                  questions.push(baseQuestion);
+                }
+
+                if (gridItem.element.childLogics) {
+                  for (let logic of gridItem.element.childLogics) {
+                    if (logic.showLogic) {
+                      for (let row of logic.rows) {
+                        const result = extractQuestions(
+                          row.grid,
+                          parentFormId,
+                          isInSubForm,
+                          subFormIndex
+                        );
+                        questions.push(...result.answers);
+                        forms.push(...result.forms);
+                      }
+                    }
+                  }
+                }
+              }
+            });
+          });
+        } else if (element.entityType === 'MULTIFIELD' && element.show) {
+          element.element.rows.forEach((row: any) => {
+            row.grid.forEach((gridItem: any) => {
+              if (gridItem.entityType === 'QUESTION' && gridItem.show) {
+                questions.push({
+                  questionId: gridItem.element.id,
+                  answer: gridItem.element.answer || '',
+                });
+              }
+            });
+          });
+        }
+      });
+      return { answers: questions, forms: forms };
+    };
+
+    const processPages = (
+      pages: any[]
+    ): { answers: Answer[]; forms: Form[] } => {
+      const questions: Answer[] = [];
+      const forms: Form[] = [];
+
+      pages.forEach((page) => {
+        page.rows.forEach((row: any) => {
+          const result = extractQuestions(row.grid);
+          questions.push(...result.answers);
+          forms.push(...result.forms);
+        });
+      });
+
+      return { answers: questions, forms: forms };
+    };
+    const result = processPages(this.pages);
+    const grids = this.whenClauseService.getActiveWhenClauseGrids();
+    const simplified = grids.map(grid => ({
+      elementId: grid?.element?.id ?? null,
+      entityType: grid?.entityType ?? null,
+      show: grid?.show ?? false
+    }));
+    this.questionAnswers = {
+      parentId: '',
+      answers: result.answers,
+      forms: result.forms,
+      copySubForms: this.copySubforms,
+      whenClauseElements: simplified
+    };
+  }
+
+  clearEmptySubmissions(submissions: any) {
+    const nonEmptySubmissions: Submission[] = [];
+    const emptySubmissionIds: string[] = [];
+
+    submissions.forEach((submission: any) => {
+      const hasValue = submission.answers.some(
+        (answer: any) =>
+          answer.answer !== '' &&
+          answer.answer !== null &&
+          answer.answer !== undefined
+      );
+      if (hasValue) {
+        nonEmptySubmissions.push(submission);
+      } else if (submission.submissionId) {
+        emptySubmissionIds.push(submission.submissionId);
+      }
+    });
+
+    submissions = nonEmptySubmissions;
+    return submissions;
+  }
+
+  validateAllElementLoaded(): { status: boolean; message: string } {
+    if (this.pages.length < this.pageDetails.length) {
+      return {
+        status: false,
+        message:
+          'Please ensure all pages are fully visible before submitting the form.',
+      };
+    }
+
+    const incompletePages: string[] = [];
+
+    this.pages.forEach((p: any, i: number) => {
+      if (p && Array.isArray(p.rows)) {
+        let j = 0;
+        p.rows.forEach((row: any) => {
+          row.grid.forEach((gridItem: any) => {
+            j++;
+          });
+        });
+        if (
+          !p ||
+          !Array.isArray(p.rows) ||
+          (Math.ceil(j / 20) != this.rowSetCount[i] && !this.navigateTo)
+        ) {
+          incompletePages.push(this.pageDetails[i].name);
+        }
+      } else {
+        incompletePages.push(this.pageDetails[i].name);
+      }
+    });
+
+    if (incompletePages.length > 0) {
+      return {
+        status: false,
+        message: `Some sections are still loading. Please scroll through the following pages to ensure all questions are loaded: ${incompletePages.join(
+          ', '
+        )}.`,
+      };
+    }
+
+    return {
+      status: true,
+      message: 'Great! All sections are complete. You can now submit the form.',
+    };
+  }
+  saveasDraftPopup(): void {
+    if (!this.skipValidation) {
+      return;
+    }
+    const dialogRef = this.dialog.open(SaveDraftModalComponent, {
+      width: '450px',
+      panelClass: 'custom-dialog-container',
+      autoFocus: false,
+      disableClose: true,
+      data: {
+        primaryColor: this.primaryColor,
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result) {
+        this.validationSkip = true;
+        this.submitForm();
+      } else {
+        this.validationSkip = false;
+      }
+    });
+  }
+
+  saveAsDraft() {
+    this.validationSkip = true;
+    this.draft = true;
+    this.submitForm();
+  }
+
+  async submitForm() {
+    this.startSubmissionLoader();
+    if (this.webhook) {
+      this.webhookPayloadArray = this.webhook.map((w: any) => ({
+        id: w.id,
+        ...this.extractGroupedWebhookData([w]),
+      }));
+    }
+    if (!this.validateAllElementLoaded().status) {
+      this.toastr.warning('Please wait for all elements to load');
+      this.submit.emit({
+        status: 'failed',
+      });
+      return;
+    }
+    if (this.submissionInProgress || this.submissionInDraft) {
+      this.submit.emit({
+        status: 'failed',
+      });
+      return;
+    }
+    let recaptchaToken: string | undefined;
+    this.inValidQuestions.clear();
+    this.validationService.clearAll();
+    if (this.enableGoogleRecaptcha) {
+      try {
+        recaptchaToken = await this.getToken();
+
+        if (!recaptchaToken) {
+          this.toastr.error(
+            'Please complete the CAPTCHA verification before submitting the form.'
+          );
+          this.submissionInProgress = false;
+          this.submissionInDraft = false;
+          this.resetSubmissionLoader();
+          this.validationSkip = false;
+          this.draft = false;
+          this.submit.emit({
+            status: 'failed',
+          });
+          return;
+        }
+      } catch (error: any) {
+        console.error(
+          'Error while getting reCAPTCHA token:',
+          error.error?.message
+        );
+        this.toastr.error('Failed to verify reCAPTCHA.');
+        this.submissionInProgress = false;
+        this.submissionInDraft = false;
+        this.resetSubmissionLoader();
+        this.validationSkip = false;
+        this.draft = false;
+        this.submit.emit({
+          status: 'failed',
+        });
+        return;
+      }
+    }
+
+    if (this.draft || this.validationSkip) {
+      this.submissionInDraft = true;
+    } else {
+      this.submissionInProgress = true;
+    }
+
+    let validationResponse = true;
+    if (!this.validationSkip) {
+      validationResponse = this.validateForm(this.pages).isValid;
+    }
+
+    if (!validationResponse) {
+      this.saveasDraftPopup();
+      this.submissionInProgress = false;
+      this.submissionInDraft = false;
+      this.resetSubmissionLoader();
+      this.validationSkip = false;
+      this.draft = false;
+      this.submit.emit({
+        status: 'failed',
+      });
+      return;
+    }
+    const getCircularReplacer = () => {
+      const seen = new WeakSet();
+      return (_key: string, value: any) => {
+        if (typeof value === 'object' && value !== null) {
+          if (seen.has(value)) {
+            return undefined;
+          }
+          seen.add(value);
+        }
+        return value;
+      };
+    };
+
+    this.generateQuestionAnswers();
+    const formFinalScore = this.calculateFormFinalScore();
+    this.questionAnswers.scores = formFinalScore;
+    if (validationResponse) {
+      const formData = new FormData();
+      formData.append('skipValidation', this.validationSkip ? 'true' : 'false');
+      this.questionAnswers.parentId = this.parentSubmissionId;
+      formData.append(
+        'json',
+        JSON.stringify(this.questionAnswers, getCircularReplacer())
+      );
+      if (this.webhookPayloadArray) {
+        formData.append(
+          'webhookPayload',
+          JSON.stringify(this.webhookPayloadArray)
+        );
+      } else {
+        formData.append('webhookPayload', JSON.stringify([]));
+      }
+      if (this.files.length > 0) {
+        const seenQuestionIds = new Set<string>();
+
+        const uniqueFiles = this.files.filter((fileItem) => {
+          if (seenQuestionIds.has(fileItem.questionId)) {
+            return false;
+          }
+          seenQuestionIds.add(fileItem.questionId);
+          return true;
+        });
+
+        uniqueFiles.forEach((fileItem) => {
+          fileItem.file.forEach((file: any) => {
+            formData.append(fileItem.questionId, file._file);
+          });
+        });
+      }
+      const formServiceCall =
+        this.edit && this.submissionId
+          ? this.formService.updateForm(
+              this.moduleName,
+              this.submissionId,
+              formData,
+              recaptchaToken ?? ''
+            )
+          : this.formService.submitForm(
+              this.moduleName,
+              formData,
+              recaptchaToken ?? ''
+            );
+
+      formServiceCall.subscribe({
+        next: (event) => {
+          if (event.type === HttpEventType.UploadProgress) {
+            if (event.total) {
+              const percentDone = Math.round((event.loaded / event.total) * 100);
+              this.setProgress(Math.min(95, percentDone));
+            }
+          }
+      
+          if (event.type === HttpEventType.Response) {
+            this.completeSubmissionLoader();
+      
+            const response = event.body;
+      
+            // existing success logic ↓
+            this.toastr.success(
+              this.edit
+                ? 'Form updated successfully'
+                : 'Form submitted successfully'
+            );
+            let emittingValues;
+            if (this.emitters) {
+              emittingValues = this.mapEmittersToValues();
+            }
+  
+            if (this.validationSkip || this.draft) {
+              this.submit.emit({
+                status: 'draft',
+                submissionId: response.result,
+                score: formFinalScore,
+                ...(emittingValues || {}),
+              });
+            } else {
+              this.submit.emit({
+                status: 'success',
+                submissionId: response.result,
+                score: formFinalScore,
+                ...(emittingValues || {}),
+              });
+            }
+            this.submissionInProgress = false;
+            this.submissionInDraft = false;
+            this.draft = false;
+            this.validationSkip = false;
+          }
+        },
+        error: (error) => {
+          this.validationService.clearAll();
+          this.findQuestionPageIndex(
+            this.parseErrorsToMap(error.error.message)
+          );
+          this.currentPageIndex = this.pages.length - 1;
+          this.navigateToFirstError();
+          this.resetSubmissionLoader();
+          this.submissionInProgress = false;
+          this.draft = false;
+          this.validationSkip = false;
+          this.submissionInDraft = false;
+          this.saveasDraftPopup();
+          this.submit.emit({
+            status: 'failed',
+            message: error.error.message
+          });
+        },
+      });
+    } else {
+      // this.toastr.error(validationResponse.message);
+      this.submit.emit({
+        status: 'failed',
+      });
+      this.saveasDraftPopup();
+      this.submissionInProgress = false;
+      this.submissionInDraft = false;
+      this.resetSubmissionLoader();
+      this.validationSkip = false;
+      this.draft = false;
+    }
+  }
+
+setProgress(value: number) {
+  this.submissionProgress = value;
+  this.updateStepText(value);
+}
+
+
+startSubmissionLoader() {
+  this.showSubmissionLoader = true;
+  this.setProgress(0);
+
+  // Simulated progress until backend upload updates it
+  this.progressInterval = setInterval(() => {
+    if (this.submissionProgress < 85) {
+      this.setProgress(this.submissionProgress + 2);
+    }
+  }, 300);
+}
+
+completeSubmissionLoader() {
+  clearInterval(this.progressInterval);
+
+  this.setProgress(100);
+
+  setTimeout(() => {
+    this.showSubmissionLoader = false;
+    this.setProgress(0);
+  }, 500);
+}
+
+resetSubmissionLoader() {
+  clearInterval(this.progressInterval);
+
+  this.showSubmissionLoader = false;
+  clearInterval(this.dotInterval);
+  this.animatedDots = '';
+  this.setProgress(0);
+}
+
+
+startTextLoader() {
+  let dotCount = 0;
+
+  this.dotInterval = setInterval(() => {
+    dotCount = (dotCount + 1) % 4;
+    this.animatedDots = '.'.repeat(dotCount);
+  }, 500);
+}
+
+updateStepText(progress: number) {
+  if (progress < 25) {
+    this.currentStep = 'Validating form';
+  } else if (progress < 60) {
+    this.currentStep = 'Uploading data';
+  } else if (progress < 90) {
+    this.currentStep = 'Saving submission';
+  } else {
+    this.currentStep = 'Finalizing';
+  }
+}
+
+  calculateFormFinalScore(): SubmissionScore[] {
+    const goodScore = this.maxPossibleGoodScore
+      ? 100 - (this.sumOfGoodFindings / this.maxPossibleGoodScore) * 100
+      : 0;
+
+    const badScore = this.maxPossibleBadScore
+      ? 100 - (this.sumOfBadFindings / this.maxPossibleBadScore) * 100
+      : 0;
+
+    return [
+      { scoreType: 'GOOD_SCORE', score: Math.round(goodScore) },
+      { scoreType: 'BAD_SCORE', score: Math.round(badScore) },
+    ];
+  }
+
+  mapEmittersToValues(): { [key: string]: any } {
+    const answerMap = new Map(
+      this.questionAnswers.answers.map((qa) => [qa.questionId, qa.answer])
+    );
+
+    const result: { [key: string]: any } = {};
+
+    this.emitters.forEach((emitter) => {
+      if (emitter.valueSource === 'CUSTOM_INPUT') {
+        result[emitter.keyName] = emitter.inputValue;
+      } else if (
+        emitter.valueSource === 'QUESTION' &&
+        emitter.questionId &&
+        answerMap.has(emitter.questionId)
+      ) {
+        result[emitter.keyName] = answerMap.get(emitter.questionId);
+      }
+    });
+
+    return result;
+  }
+
+  parseErrorsToMap(errorString: string): Map<string, string> {
+    const errorMap = new Map<string, string>();
+    // Convert the incorrect format to a valid object structure
+    errorString
+      .replace(/[{}]/g, '') // Remove curly braces
+      .split(', ') // Split key-value pairs
+      .forEach((pair) => {
+        const [key, value] = pair.split('=');
+        if (key && value) {
+          errorMap.set(key.trim(), value.trim()); // Store in Map
+        }
+      });
+
+    return errorMap;
+  }
+  async navigateToFirstError() {
+    const firstError = this.validationService.getFirstInvalid();
+    if (!firstError) return;
+
+    const elementId = `question-${firstError.id}`;
+
+    this.retryCount = 0;
+
+    // Change page if needed
+    if (this.currentPageIndex !== firstError.pageIndex) {
+      this.currentPageIndex = firstError.pageIndex;
+      if (this.currentPageIndex + 1 < this.pageDetails.length) {
+        this.nextPage = this.pageDetails[this.currentPageIndex + 1];
+      }
+      if (this.currentPageIndex - 1 >= 0) {
+        this.previousPage = this.pageDetails[this.currentPageIndex - 1];
+      }
+
+      this.debounce(() => this.changeDetectorRef.detectChanges(), 100);
+      if (this.navigation === 'TAB')
+        this.child.triggerFunction(firstError.pageIndex);
+    }
+
+    await this.scrollToElementWithRetry(elementId);
+  }
+
+  private async scrollToElementWithRetry(elementId: string): Promise<void> {
+    this.retryCount++;
+    const element = document.getElementById(elementId);
+
+    if (element) {
+      requestAnimationFrame(() => this.scrollAndFocus(element));
+      return;
+    }
+
+    if (this.retryCount < this.maxRetries) {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      return this.scrollToElementWithRetry(elementId);
+    }
+
+    console.error(
+      `Element ${elementId} not found after ${this.maxRetries} attempts`
+    );
+    requestAnimationFrame(() => this.fallbackScroll());
+  }
+
+  private scrollAndFocus(element: HTMLElement) {
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'nearest',
+    });
+
+    const focusable = element.querySelector(
+      'input, select, textarea, button, [tabindex]:not([tabindex="-1"])'
+    ) as HTMLElement;
+    focusable?.focus();
+  }
+
+  private fallbackScroll() {
+    const pageElement = document.querySelector(
+      `.page-${this.currentPageIndex}`
+    );
+    pageElement?.scrollIntoView({ behavior: 'auto' });
+  }
+
+  private debounce(func: () => void, delay: number) {
+    clearTimeout(this.debounceTimer);
+    this.debounceTimer = setTimeout(func, delay);
+  }
+  //   extractId(message: string): string | null {
+  //     const match = message.match(/[0-9a-fA-F-]{36}/);
+  //     return match ? match[0] : null;
+  // }
+
+  //  removeId(message: string): string {
+  //   return message.replace(/[0-9a-fA-F-]{36}$/, "").trim();
+  // }
+
+  findQuestionPageIndex(questionErrors: Map<string, string>): void {
+    for (let pageIndex = 0; pageIndex < this.pages.length; pageIndex++) {
+      const page = this.pages[pageIndex];
+
+      for (const row of page.rows) {
+        for (const element of row.grid) {
+          this.checkAndStoreInvalidQuestions(
+            element,
+            questionErrors,
+            pageIndex
+          );
+        }
+      }
+    }
+  }
+
+  private checkAndStoreInvalidQuestions(
+    element: any,
+    questionErrors: Map<string, string>,
+    pageIndex: number
+  ): void {
+    if (element.element.id && questionErrors.has(element.element.id)) {
+      this.validationService.setInvalid(
+        element.element.id,
+        questionErrors.get(element.element.id)!,
+        pageIndex
+      );
+    }
+
+    // Handle subforms recursively
+    if (element.entityType === 'SUBFORM' && element.element.rows) {
+      for (const row of element.element.rows) {
+        for (const gridItem of row.grid) {
+          this.checkAndStoreInvalidQuestions(
+            gridItem,
+            questionErrors,
+            pageIndex
+          );
+        }
+      }
+    }
+    if (
+      (element.entityType === 'QUESTION_GROUP' ||
+        element.entityType === 'MULTIFIELD') &&
+      element.element.rows
+    ) {
+      for (const row of element.element.rows) {
+        for (const gridItem of row.grid) {
+          this.checkAndStoreInvalidQuestions(
+            gridItem,
+            questionErrors,
+            pageIndex
+          );
+        }
+      }
+    }
+
+    // Handle logic-based conditions recursively
+    if (element.entityType === 'QUESTION' && element.element.childLogics) {
+      for (const logic of element.element.childLogics) {
+        if (logic.showLogic) {
+          for (const row of logic.rows) {
+            for (const gridItem of row.grid) {
+              this.checkAndStoreInvalidQuestions(
+                gridItem,
+                questionErrors,
+                pageIndex
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+
+  focusQuestionElement(container: HTMLElement) {
+    // Find first focusable element within the question
+    const focusable = container.querySelector(
+      'input, select, textarea, [tabindex]'
+    );
+    if (focusable) {
+      (focusable as HTMLElement).focus();
+    } else {
+      container.focus();
+    }
+  }
+  validateForm(jsonData: any): {
+    isValid: boolean;
+    message: string;
+    pageIndex: number | 0;
+  } {
+    const validateQuestions = (
+      formElements: any[]
+    ): { isValid: boolean; message: string; pageIndex: number | 0 } => {
+      for (let element of formElements) {
+        if (element.entityType === 'QUESTION') {
+          const required = element.element.required;
+          const answer = element.element.answer;
+          const validation = element.element.validation;
+          const show = element.show;
+          if (element.element.formElement.elementType === 'FILE_PICKER') {
+            const attachment = element.element.attachments;
+            if (required && show) {
+              if (
+                (!answer || answer?.length === 0) &&
+                (!attachment || attachment?.length == 0)
+              ) {
+                this.inValidQuestions.set(
+                  element.element.id,
+                  'Required file question has no files uploaded.'
+                );
+                return {
+                  isValid: false,
+                  message: `Form is invalid - Required file question ${element.element.questionNumber} has no files uploaded.`,
+                  pageIndex: 0,
+                };
+              }
+            }
+          } else {
+            if (required && show) {
+              if (
+                answer === null ||
+                answer === undefined ||
+                (typeof answer === 'string' && answer.trim() === '') ||
+                (typeof answer === 'object' && Object.keys(answer).length === 0)
+              ) {
+                this.inValidQuestions.set(
+                  element.element.id,
+                  'This is a required question'
+                );
+                return {
+                  isValid: false,
+                  message: `Form is invalid - Question ${element.element.questionNumber} is required but no answer provided.`,
+                  pageIndex: 0,
+                };
+              } else if (validation === false) {
+                this.inValidQuestions.set(
+                  element.element.id,
+                  element.element.validationMessage
+                );
+                return {
+                  isValid: false,
+                  message: `Form is invalid - Question ${element.element.questionNumber} is required but validation is false.`,
+                  pageIndex: 0,
+                };
+              }
+            } else if (!required && answer && Object.keys(answer).length > 0) {
+              if (validation === false) {
+                this.inValidQuestions.set(
+                  element.element.id,
+                  element.element.validationMessage
+                );
+                return {
+                  isValid: false,
+                  message: `Form is invalid - Question ${element.element.questionNumber} is not required but answer provided with validation false.`,
+                  pageIndex: 0,
+                };
+              }
+            }
+          }
+          if (element.element.childLogics) {
+            for (let logic of element.element.childLogics) {
+              if (logic.showLogic) {
+                const result = validateQuestions(logic.rows);
+                if (!result.isValid) return result;
+              }
+            }
+          }
+        } else if (element.entityType === 'SUBFORM' && !element.element.deleted) {
+          if(element.element.property?.subFormStructure == 'single'){
+            for(let row of element.element.rows){
+              const result = validateQuestions(row.grid);
+              if (!result.isValid) return result;
+            }
+          } else {
+            this.validateSubForm(element);
+          }
+        } else if (
+          (element.entityType === 'QUESTION_GROUP' ||
+            element.entityType === 'MULTIFIELD') &&
+          element.element.rows
+        ) {
+          for (const row of element.element.rows) {
+            const result = validateQuestions(row.grid);
+            if (!result.isValid && element.entityType != 'MULTIFIELD')
+              return result;
+          }
+        }
+      }
+      return { isValid: true, message: '', pageIndex: 0 };
+    };
+
+    for (let pageIndex = 0; pageIndex < jsonData.length; pageIndex++) {
+      const page = jsonData[pageIndex];
+      for (let row of page.rows) {
+        const result = validateQuestions(row.grid);
+        this.inValidQuestions.forEach((message: string, id: string) => {
+          this.validationService.setInvalid(id, message, pageIndex);
+        });
+        this.inValidQuestions = new Map<string, string>();
+        // if (!result.isValid) {
+        //   return {
+        //     isValid: false,
+        //     message: `Page ${pageIndex + 1}: ${result.message}`,
+        //     pageIndex: pageIndex,
+        //   };
+        // }
+      }
+    }
+    this.currentPageIndex = jsonData.length - 1;
+    if (this.validationService.getFirstInvalid()) {
+      this.navigateToFirstError();
+      return {
+        isValid: false,
+        message: `Page`,
+        pageIndex: 0,
+      };
+    }
+    return {
+      isValid: true,
+      message: 'Form is valid.',
+      pageIndex: 0,
+    };
+  }
+
+  validateSubForm(element: any) {
+    if (element.entityType !== 'SUBFORM') {
+      return;
+    }
+  
+    const submissions = element.element?.submissions || [];
+  
+    /* ------------------------------
+     * 1️⃣ Subform required but no submission
+     * ------------------------------ */
+    if (element.element?.required && submissions.length === 0) {
+      this.inValidQuestions.set(
+        element.element.id,
+        'At least one submission is required'
+      );
+      return; // nothing else to validate
+    }
+  
+    submissions.forEach((submission: any, submissionIndex: number) => {
+      const answers = submission.answers || [];
+  
+      /* ------------------------------
+       * 2️⃣ Submission exists but no answers
+       * ------------------------------ */
+      const hasAnyAnswer = answers.some(
+        (a: any) =>
+          a.answer !== null &&
+          a.answer !== undefined &&
+          a.answer !== '' &&
+          !(Array.isArray(a.answer) && a.answer.length === 0)
+      );
+  
+      if (element.element?.required && !hasAnyAnswer) {
+        const key = `${element.element.id}`;
+        this.inValidQuestions.set(
+          key,
+          'At least one answer is required in the subform'
+        );
+        return;
+      }
+  
+      /* ------------------------------
+       * 3️⃣ Existing question-level validations
+       * ------------------------------ */
+      answers.forEach((answerObj: any) => {
+        const question = this.findQuestionById(
+          element.element.rows,
+          answerObj.questionId
+        );
+  
+        const ans = answerObj.answer;
+  
+        // Required question check
+        if ((question?.required || answerObj.required) &&
+            (ans === '' || ans === null || ans === undefined || ans?.length === 0)) {
+          const key = `${submissionIndex}-${question.id}`;
+          this.inValidQuestions.set(key, 'This is a required question');
+        }
+  
+        // Email validation
+        if (question?.formElement?.elementType === 'EMAIL' && ans) {
+          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+          if (!emailRegex.test(ans)) {
+            const key = `${submissionIndex}-${question.id}`;
+            this.inValidQuestions.set(
+              key,
+              'Please enter a valid email address'
+            );
+          }
+        }
+      });
+    });
+  }
+  
+
+  // 🔍 Helper: find question definition inside rows
+  private findQuestionById(rows: any[], questionId: string): any {
+    for (const row of rows) {
+      for (const gridElement of row.grid) {
+        if (
+          gridElement.entityType === 'QUESTION' &&
+          gridElement.element.id === questionId
+        ) {
+          return gridElement.element;
+        }
+      }
+    }
+    return null;
+  }
+
+  updateSubFormWithSubmissions(event: any) {
+    this.updateSubForm(this.pages, event);
+  }
+
+  updateSubForm = (pages: any[], updatedSubForm: any) => {
+    pages.forEach((page) => {
+      page.rows.forEach((row: any) => {
+        row.grid.forEach((element: any) => {
+          if (
+            element.entityType === 'SUBFORM' &&
+            element.element.id === updatedSubForm.id
+          ) {
+            // Update the existing subform with the new data
+            element.element = updatedSubForm;
+          } else if (
+            element.entityType === 'SUBFORM' &&
+            element.element.id !== updatedSubForm.formId
+          ) {
+            // Handle multiple subforms logic here if needed
+          } else if (
+            element.entityType === 'QUESTION' &&
+            element.element.childLogics
+          ) {
+            // Recursively update child logics
+            // element.element.childLogics.forEach((logic: any) => {
+            //   if (logic.showLogic) {
+            //     this.updateSubForm(logic.rows, updatedSubForm);
+            //   }
+            // });
+          }
+        });
+      });
+    });
+  };
+
+  extractGroupedWebhookData(webhooks: any[]): {
+    headers: Record<string, string>;
+    params: Record<string, string>;
+    pathVariables: Record<string, string>;
+    requestBodies: Record<string, string>;
+  } {
+    const result: {
+      headers: Record<string, string>;
+      params: Record<string, string>;
+      pathVariables: Record<string, string>;
+      requestBodies: Record<string, string>;
+    } = {
+      headers: {},
+      params: {},
+      pathVariables: {},
+      requestBodies: {},
+    };
+
+    for (const webhook of webhooks ?? []) {
+      for (const item of webhook?.headers ?? []) {
+        const value = this.getValueFromStorage(item.valueSource, item.inputValue);
+        if (value !== null) {
+          result.headers[item.keyName] = value;
+        }
+      }
+
+      for (const item of webhook?.params ?? []) {
+        const value = this.getValueFromStorage(item.valueSource, item.inputValue);
+        if (value !== null) {
+          result.params[item.keyName] = value;
+        }
+      }
+
+      for (const item of webhook?.pathVariables ?? []) {
+        const value = this.getValueFromStorage(item.valueSource, item.inputValue);
+        if (value !== null) {
+          result.pathVariables[item.keyName] = value;
+        }
+      }
+
+      for (const item of webhook?.requestBodies ?? []) {
+        const value = this.getValueFromStorage(item.valueSource, item.inputValue);
+        if (value !== null) {
+          result.requestBodies[item.keyName] = value;
+        }
+      }
+    }
+
+    return result;
+  }
+
+  getValueFromStorage(
+    source: 'LOCAL_STORAGE' | 'SESSION_STORAGE',
+    key: string
+  ): string | null {
+    if (source === 'LOCAL_STORAGE') return localStorage.getItem(key);
+    if (source === 'SESSION_STORAGE') return sessionStorage.getItem(key);
+    return null;
+  }
+
+  cancelled(){
+    this.cancel.emit();
+  }
+}