tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/add-checklist/add-checklist.component.html

@@ -0,0 +1,1459 @@
+<div class="card" *ngIf="checklistLoading">
+    <div class="row loader d-flex justify-content-center align-items-center">
+        <div class="shimmer">
+            <div class="wrapper">
+                <div class="stroke animate title"></div>
+                <div class="stroke animate link"></div>
+                <div class="stroke animate description"></div>
+            </div>
+        </div>
+        <div class="shimmer">
+            <div class="wrapper">
+                <div class="stroke animate title"></div>
+                <div class="stroke animate link"></div>
+                <div class="stroke animate description"></div>
+            </div>
+        </div>
+    </div>
+</div>
+<div *ngIf="!checklistLoading" id="checklistCreate">
+    <div class="card">
+        <ng-container [formGroup]="ChecklistForm">
+            <div class="card-header border-0 pt-3 pb-3">
+                <div class="row w-100">
+                    <div class="col-md-9">
+                        <h3 class="card-title align-items-center mt-3 mb-0">
+                            <div routerLink="/manage/trax/checklist" class="btn btn-sm btn-outline me-5 ps-2 px-3"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                <path d="M15.8332 10.0003H4.1665M4.1665 10.0003L9.99984 15.8337M4.1665 10.0003L9.99984 4.16699" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                </svg></div>
+                            <div class="flex-column w-800px">
+                                <div class="editablecontent mb-4 w-100"><input type="text" class="checklist plain-input" #checklistName placeholder="Enter Checklist Name" formControlName="checklistName"></div>
+                                <div class="editablecontent w-100"><input type="text" class="checklistDescription plain-input" #checklistDescription placeholder="Enter Checklist Description" formControlName="checklistDescription"></div>
+                            </div>
+                        </h3>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="d-flex my-6 justify-content-end">
+                            <div class="d-flex align-items-center position-relative my-1">
+                                <button type="button" class="btn btn-primary mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val"
+                                    *ngIf="showvalue === 'add'" (click)="saveChecklistQuestions('configure')"><span class="ms-2">Configure</span>
+                                </button>
+                            
+                                <button type="button" class="btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val"
+                                    *ngIf="showvalue === 'add'" (click)="saveAsDraftPop('create')"><span class="ms-2">Save as Draft</span> </button>
+                            
+                                <button type="button" class="btn btn-primary mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val"
+                                    *ngIf="showvalue === 'edit'" (click)="updateChecklistQuestions('configure')"><span class="ms-2">Configure</span>
+                                </button>
+                                <button type="button" class="btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val"
+                                    *ngIf="showvalue === 'edit'" (click)="saveAsDraftPop('update')"><span class="ms-2">Save as Draft</span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ng-container>
+    </div>
+    
+    <div class="row">
+        <div class="col-lg-3 mt-2">
+            <ng-container [formGroup]="ChecklistForm">
+                <div class="section-left card px-7 py-7">
+                    <div class="fs-18px fw-600 text-left mb-3 concise-checklistname">
+                        {{getFormControl('checklistName').value ? getFormControl('checklistName').value : 'ChecklistName'}}
+                    </div>
+                    <div class="left-panel-container" formArrayName="sections">
+                        <div *ngFor="let section of getSectionFormArray().controls;let i=index;">
+                            <ng-container [formGroupName]="i">
+                                <div class="d-flex section align-items-center justify-content-between">
+                                    <div class="fs-18px fw-bold editablecontent-left">{{
+                                        getSectionFormControl(i,'name')?.value === '' ? "Section " : ''}}{{
+                                        getSectionFormControl(i,'name')?.value ? getSectionFormControl(i,'name')?.value
+                                        : getSectionFormControl(i,'sectionNumber')?.value}}</div>
+                                    <hr class="mx-2">
+                                    <svg (click)="deleteSection(i)" xmlns="http://www.w3.org/2000/svg" width="35"
+                                        height="35" viewBox="0 0 18 18" matTooltip="Delete section"
+                                        matTooltipPosition="above" matTooltipClass="custom-test" fill="none">
+                                        <path
+                                            d="M2.25 4.5H3.75M3.75 4.5H15.75M3.75 4.5V15C3.75 15.3978 3.90804 15.7794 4.18934 16.0607C4.47064 16.342 4.85218 16.5 5.25 16.5H12.75C13.1478 16.5 13.5294 16.342 13.8107 16.0607C14.092 15.7794 14.25 15.3978 14.25 15V4.5H3.75ZM6 4.5V3C6 2.60218 6.15804 2.22064 6.43934 1.93934C6.72064 1.65804 7.10218 1.5 7.5 1.5H10.5C10.8978 1.5 11.2794 1.65804 11.5607 1.93934C11.842 2.22064 12 2.60218 12 3V4.5M7.5 8.25V12.75M10.5 8.25V12.75"
+                                            stroke="#667085" stroke-width="1.4" stroke-linecap="round"
+                                            stroke-linejoin="round" />
+                                    </svg>
+                                    <svg (click)="accordian(i)" [ngClass]="{'rotate' : show !== i}"
+                                        xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 20 20"
+                                        fill="none">
+                                        <path d="M5 7.5L10 12.5L15 7.5" stroke="#667085" stroke-width="1.67"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg>
+                                </div>
+                                <ng-container *ngIf="show===i">
+                                    <div cdkDropList (cdkDropListDropped)="dragDrop(i,$event)"
+                                        [cdkDropListData]="getFormArrayQuestions(i).controls" class="question-left">
+                                        <ng-container formArrayName="questions">
+                                            <div *ngFor="let question of getFormArrayQuestions(i).controls;let j=index;"
+                                                class="my-2 cursor-pointer"
+                                                [ngClass]="question.get('active')?.value === true ? 'active-question' : 'q-btn'"
+                                                cdkDrag (mouseenter)="setActiveQuestion(i,j,1)"
+                                                (click)="scrollToQuestion(i,j);"
+                                                (mouseleave)="setActiveQuestion(i,j,-1)">
+                                                <ng-container [formGroupName]="j">
+                                                    <div class="concise-question">
+                                                        {{getQuestionFormControl(i,j,'qname')?.value ? '' : "Question"}}{{ getQuestionFormControl(i,j,'qname')?.value ?
+                                                        getQuestionFormControl(i,j,'qname')?.value :
+                                                        getQuestionFormControl(i,j,'qno')?.value }}
+                                                    </div>
+                                                </ng-container>
+                                            </div>
+                                        </ng-container>
+                                    </div>
+                                </ng-container>
+                            </ng-container>
+                        </div>
+                    </div>
+                </div>
+            </ng-container>
+        </div>
+    
+        <div class="col-lg-9 mt-2">
+            <form [formGroup]="ChecklistForm" #formRef>
+                <div class="card px-7">
+                    <!-- <div class="checklist-card py-5">
+                        <input type="text" class="mt-2" style="text-transform: capitalize;"
+                            placeholder="Enter checklist name here" formControlName="checklistName">
+                        <input type="text" class="mt-4" placeholder="Enter checklist description here"
+                            formControlName="checklistDescription">
+                    </div> -->
+                    <ng-container formArrayName="sections" >
+                        <div class="sectionArea mt-5" *ngFor="let section of getSectionFormArray().controls;let i=index;">
+                            <ng-container [formGroupName]="i">
+                                <div class="section d-flex align-items-center justify-content-between">
+    
+                                    <div class="fs-18px fw-bold editablecontent"><input type="text" class="plain-input"
+                                            #sectionName (change)="updateInputValue(i,sectionName.value)"
+                                            formControlName="name"></div>
+                                    <hr>
+                                    <svg class="ml-5" (click)="deleteSection(i)" xmlns="http://www.w3.org/2000/svg"
+                                        width="20" height="20" matTooltip="Delete section" matTooltipPosition="above"
+                                        matTooltipClass="custom-test" viewBox="0 0 18 18" fill="none">
+                                        <path
+                                            d="M2.25 4.5H3.75M3.75 4.5H15.75M3.75 4.5V15C3.75 15.3978 3.90804 15.7794 4.18934 16.0607C4.47064 16.342 4.85218 16.5 5.25 16.5H12.75C13.1478 16.5 13.5294 16.342 13.8107 16.0607C14.092 15.7794 14.25 15.3978 14.25 15V4.5H3.75ZM6 4.5V3C6 2.60218 6.15804 2.22064 6.43934 1.93934C6.72064 1.65804 7.10218 1.5 7.5 1.5H10.5C10.8978 1.5 11.2794 1.65804 11.5607 1.93934C11.842 2.22064 12 2.60218 12 3V4.5M7.5 8.25V12.75M10.5 8.25V12.75"
+                                            stroke="#667085" stroke-width="1.4" stroke-linecap="round"
+                                            stroke-linejoin="round" />
+                                    </svg>
+                                    <svg (click)="accordian(i)" [ngClass]="{'rotate' : show !== i}"
+                                        xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
+                                        fill="none">
+                                        <path d="M5 7.5L10 12.5L15 7.5" stroke="#667085" stroke-width="1.67"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg>
+                                </div>
+                                <div class="questionsArea" *ngIf="show === i">
+                                    <ng-container formArrayName="questions">
+                                        <div class="Question-sec mt-10"
+                                            *ngFor="let question of getFormArrayQuestions(i).controls;let j = index;"
+                                            (mouseenter)="setActiveQuestion(i,j,1)"
+                                            (mouseleave)="setActiveQuestion(i,j,-1)">
+                                            <ng-container [formGroupName]="j">
+                                                <span class="fs-18px px-3 editablecontent questiontitle"
+                                                    style="cursor: default;"> Question {{j+1}}</span>
+    
+                                                <div class="checklist-card pb-5">
+                                                    <textarea class="form-control form-control-solid" rows="1"
+                                                        type="text" class="mt-0" [id]="'q-' + i + '-' + j"
+                                                        placeholder="Enter question here"
+                                                        formControlName="qname"></textarea>
+                                                    <ng-container
+                                                        *ngIf="question.get('qname')?.invalid && question.get('qname')?.touched">
+                                                        <p style="color: red;"
+                                                            *ngIf="question.get('qname')?.hasError('required')">*
+                                                            Question is required.</p>
+                                                    </ng-container>
+                                                </div>
+    
+                                                <div class="row"
+                                                    *ngIf="!['descriptiveImage','image','multipleImage','image/video'].includes(question.get('answerType')?.value)">
+                                                    <div class="col-md-4 w-90 text-center" *ngFor="let image of question.get('multiQuestionReferenceImage')?.value; let m = index" style="position: relative;">
+                                                        <div *ngIf="image?.imageURL"
+                                                            class="image-container ref_img_cont mb-4 mt-5">
+                                                            <img src="{{environment.TraxAnswerCDN}}{{image.imageURL}}"
+                                                                width="90%" height="300px" class="auto-adjust"
+                                                                alt="Tango Eye" />
+                                                                <div class="overlay-icons">
+                                                                    <span class="cursor-pointer" (click)="question.get('disableRunAI')?.value ? '' : onPopup(image.imageURL)" ngbTooltip="Expand">
+                                                                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+                                                                            <g filter="url(#filter0_d_14557_62513)">
+                                                                            <rect x="2" y="1" width="36" height="36" rx="8" fill="white"/>
+                                                                            <rect x="2.5" y="1.5" width="35" height="35" rx="7.5" stroke="#D0D5DD"/>
+                                                                            <path d="M22.5 11.5H27.5M27.5 11.5V16.5M27.5 11.5L21.6667 17.3333M17.5 26.5H12.5M12.5 26.5V21.5M12.5 26.5L18.3333 20.6667" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                            </g>
+                                                                            <defs>
+                                                                            <filter id="filter0_d_14557_62513" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                                                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                                                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                                                            <feOffset dy="1"/>
+                                                                            <feGaussianBlur stdDeviation="1"/>
+                                                                            <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+                                                                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14557_62513"/>
+                                                                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14557_62513" result="shape"/>
+                                                                            </filter>
+                                                                            </defs>
+                                                                        </svg>
+                                                                    </span>
+                                                                    <input class="d-none" [id]="'fileuploadref_1'+i+j+m" type="file"
+                                                                    name="answerFile" accept="image/png, image/jpeg"
+                                                                    (click)="question.get('disableRunAI')?.value ? $event.preventDefault() : null"
+                                                                    (change)="question.get('disableRunAI')?.value ? '' : loadImageFromDevice(i,refImgQIdx,$event,-1,'multiQuestionReferenceImage',m)">
+                                                                    <label class="cursor-pointer" (click)="refImgQIdx=j;" [for]="'fileuploadref_1'+i+j+m" ngbTooltip="Reupload">
+                                                                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+                                                                            <g filter="url(#filter0_d_14557_62522)">
+                                                                            <rect x="2" y="1" width="36" height="36" rx="8" fill="white"/>
+                                                                            <rect x="2.5" y="1.5" width="35" height="35" rx="7.5" stroke="#D0D5DD"/>
+                                                                            <path d="M27.5 21.5V24.8333C27.5 25.2754 27.3244 25.6993 27.0118 26.0118C26.6993 26.3244 26.2754 26.5 25.8333 26.5H14.1667C13.7246 26.5 13.3007 26.3244 12.9882 26.0118C12.6756 25.6993 12.5 25.2754 12.5 24.8333V21.5M24.1667 15.6667L20 11.5M20 11.5L15.8333 15.6667M20 11.5V21.5" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                            </g>
+                                                                            <defs>
+                                                                            <filter id="filter0_d_14557_62522" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                                                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                                                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                                                            <feOffset dy="1"/>
+                                                                            <feGaussianBlur stdDeviation="1"/>
+                                                                            <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+                                                                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14557_62522"/>
+                                                                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14557_62522" result="shape"/>
+                                                                            </filter>
+                                                                            </defs>
+                                                                        </svg>
+                                                                    </label>
+                                                                    <span class="cursor-pointer" (click)="question.get('disableRunAI')?.value ? '' : clearReferenceImage(i,j,-1,m,'multiQuestionReferenceImage');" ngbTooltip="Delete">
+                                                                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+                                                                            <g filter="url(#filter0_d_14557_62514)">
+                                                                            <rect x="2" y="1" width="36" height="36" rx="8" fill="white"/>
+                                                                            <rect x="2.5" y="1.5" width="35" height="35" rx="7.5" stroke="#D0D5DD"/>
+                                                                            <path d="M12.5 13.9974H14.1667M14.1667 13.9974H27.5M14.1667 13.9974V25.6641C14.1667 26.1061 14.3423 26.53 14.6548 26.8426C14.9674 27.1551 15.3913 27.3307 15.8333 27.3307H24.1667C24.6087 27.3307 25.0326 27.1551 25.3452 26.8426C25.6577 26.53 25.8333 26.1061 25.8333 25.6641V13.9974H14.1667ZM16.6667 13.9974V12.3307C16.6667 11.8887 16.8423 11.4648 17.1548 11.1522C17.4674 10.8397 17.8913 10.6641 18.3333 10.6641H21.6667C22.1087 10.6641 22.5326 10.8397 22.8452 11.1522C23.1577 11.4648 23.3333 11.8887 23.3333 12.3307V13.9974M18.3333 18.1641V23.1641M21.6667 18.1641V23.1641" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                            </g>
+                                                                            <defs>
+                                                                            <filter id="filter0_d_14557_62514" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                                                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                                                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                                                            <feOffset dy="1"/>
+                                                                            <feGaussianBlur stdDeviation="1"/>
+                                                                            <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+                                                                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14557_62514"/>
+                                                                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14557_62514" result="shape"/>
+                                                                            </filter>
+                                                                            </defs>
+                                                                        </svg>
+                                                                    </span>
+                                                                </div>
+                                                                <!-- <div class="ref_del_icon" (click)="clearReferenceImage(i,j);">
+                                                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                                                                        xmlns="http://www.w3.org/2000/svg">
+                                                                        <path
+                                                                            d="M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168"
+                                                                            stroke="#B42318" stroke-width="1.67"
+                                                                            stroke-linecap="round" stroke-linejoin="round" />
+                                                                    </svg>
+                                                                </div> -->
+                                                        </div>
+                                                        
+                                                    </div>
+                                                    <div class="d-flex mb-3">
+                                                        <!-- <div *ngIf="getAnswerFormGroup_FormControl(i,j,'multiQuestionReferenceImage')?.value"
+                                                            class="col-lg-3 btn btn-light-primary mt-2">
+                                                            <input class="d-none" [id]="'fileupload_'+i+j" type="file"
+                                                                name="answerFile" accept="image/png, image/jpeg"
+                                                                (change)="loadImageFromDevice(i,refImgQIdx,$event,-1,'multiQuestionReferenceImage')">
+                                                            <label [for]="'fileupload_'+i+j" (click)="refImgQIdx=j;">
+                                                                <svg xmlns="http://www.w3.org/2000/svg" class="mx-2"
+                                                                    width="21" height="20" viewBox="0 0 21 20"
+                                                                    fill="none">
+                                                                    <g clip-path="url(#clip0_4082_3122)">
+                                                                        <path
+                                                                            d="M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019"
+                                                                            stroke="#009BF3" stroke-width="1.67"
+                                                                            stroke-linecap="round"
+                                                                            stroke-linejoin="round" />
+                                                                    </g>
+                                                                    <defs>
+                                                                        <clipPath id="clip0_4082_3122">
+                                                                            <rect width="20" height="20" fill="white"
+                                                                                transform="translate(0.5)" />
+                                                                        </clipPath>
+                                                                    </defs>
+                                                                </svg>Reupload Image
+                                                            </label>
+                                                        </div> -->
+                                                        <div *ngIf="question.get('multiQuestionReferenceImage')?.value.length <5 && !question.get('disableRunAI')?.value"
+                                                            class="col-lg-3 btn add-ref-btn btn-light-primary my-2">
+                                                            <input class="d-none" [id]="'fileuploadQnRef1_2'+i+j" type="file"
+                                                                name="file" accept="image/png, image/jpeg"
+                                                                (change)="loadImageFromDevice(i,refImgQIdx,$event,-1,'multiQuestionReferenceImage')">
+                                                            <label class="pointer" [for]="'fileuploadQnRef1_2'+i+j"
+                                                                (click)="refImgQIdx=j;"> 
+                                                                <svg
+                                                                    xmlns="http://www.w3.org/2000/svg" width="20"
+                                                                    height="20" viewBox="0 0 20 20" fill="none">
+                                                                    <path
+                                                                        d="M10 4.16797V15.8346M4.16669 10.0013H15.8334"
+                                                                        stroke="#009BF3" stroke-width="1.67"
+                                                                        stroke-linecap="round"
+                                                                        stroke-linejoin="round" />
+                                                                </svg>Add Reference Image 
+                                                            </label>
+                                                        </div>
+                                                        <div *ngIf="question.get('multiQuestionReferenceImage')?.value.length >= 5 || question.get('disableRunAI')?.value"
+                                                            class="col-lg-3 btn-light-disbaled btn add-ref-btn my-2 borderCard">
+                                                            <label class="pointer"> 
+                                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                                                    <path d="M10.0013 4.16406V15.8307M4.16797 9.9974H15.8346" stroke="#6BCAFF" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                </svg> <span>Add Reference Image</span> 
+                                                            </label>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="row">
+                                                    <div class="checklist-card pb-5" [ngClass]="['image','image/video','multiplechoicesingle','yes/no','date','linearscale'].includes(question.get('answerType')?.value) ? 'col-md-8' :'col-md-12'">
+                                                        <select class="mt-5" name="selectoption"
+                                                            (change)="answerTypeSelection(i,j,$event)"
+                                                            formControlName="answerType">
+                                                            <option name="descriptive" value="descriptive">Descriptive
+                                                                Answer</option>
+                                                            <option name="yes/no" value="yes/no">A/B Question</option>
+                                                            <option name="multiplechoicesingle"
+                                                                value="multiplechoicesingle">Multiple Choice Question -
+                                                                Single Answer</option>
+                                                            <option name="multiplechoicemultiple"
+                                                                value="multiplechoicemultiple">Multiple Choice Question -
+                                                                Multiple Answer</option>
+                                                            <option name="descriptiveImage" value="descriptiveImage">Capture
+                                                                Image with Description</option>
+                                                            <option name="image" value="image">Capture Image as answer
+                                                            </option>
+                                                            <option name="video" value="video">Capture video as answer
+                                                            </option>
+                                                            <option name="multipleImage" value="multipleImage">Capture
+                                                                Multiple Image</option>
+                                                            <option name="date" value="date">Date - DD/MM/YYYY</option>
+                                                            <option name="linearscale" value="linearscale">Linear Scale</option>
+                                                            <option name="time" value="time">Time</option>
+                                                            <option name="imageVideo" value="image/video">Capture Image/Video as Answer</option>
+                                                            <option name="dropdown" value="dropdown">Dropdown as an answer</option>
+                                                        </select>
+        
+                                                    </div>
+                                                    <div class="col-md-4" *ngIf="['image','image/video','multiplechoicesingle','yes/no','date','linearscale'].includes(question.get('answerType')?.value)">
+                                                        <div class="form-check form-switch text-left align-items-center btn-sec mt-10" >
+                                                            <input class="form-check-input mx-0 pointer" type="checkbox" name="toc" value="1" ngDefaultControl formControlName="compliance" (change)="getComplianceToast(i,j,$event)" [attr.disabled]="hasValidationEnabled(i,j) ? true : null">
+                                                            <label class="form-check-label pointer fs-16px" for="flexSwitchCheckDefault">Configure Compliance Score</label>
+                                                            
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="col-lg-3 mx-4 d-flex mt-3" *ngIf="['descriptive'].includes(question.get('answerType')?.value)">
+                                                    <div class="form-check" >
+                                                        <input formControlName="descriptivetype" class="form-check-input cursor-pointer" type="radio" value="text" [name]="'descriptivetype'" [id]="'inlineRadio0'+ i + j"  [attr.disabled]="question.get('disableRunAI')?.value ? true : null">
+                                                        <label class="cursor-pointer dscriptiveType" [for]="'inlineRadio0'+ i + j">Text</label>
+                                                    </div>
+                                                    <div class="form-check ms-5">
+                                                        <input formControlName="descriptivetype" class="form-check-input cursor-pointer" type="radio" value="number" [name]="'descriptivetype'" [id]="'inlineRadio1'+ i + j" [attr.disabled]="question.get('disableRunAI')?.value ? true : null">
+                                                        <label class="cursor-pointer dscriptiveType"  [for]="'inlineRadio1'+i + j">Number</label>
+                                                    </div>
+                                                </div>
+                                                <ng-container
+                                                    *ngIf="['yes/no','multiplechoicesingle','multiplechoicemultiple','dropdown'].includes(question.get('answerType')?.value)">
+                                                    <div class="d-flex justify-content-between">
+                                                        <div class="fs-18px fw-bolder" style="cursor: default;">Answer Options</div>
+                                                        <div class="form-check form-switch text-left align-items-center btn-sec mt-2" *ngIf="question.get('answerType')?.value == 'dropdown'">
+                                                            <input class="form-check-input mx-0 pointer" type="checkbox" name="toc" value="1" ngDefaultControl formControlName="allowMultiple">
+                                                            <label class="form-check-label pointer fs-16px" for="flexSwitchCheckDefault">Allow Multiple Response</label>
+                                                            
+                                                        </div>
+                                                    </div>
+                                                    <ng-container formArrayName="answers">
+                                                        <ng-container
+                                                            *ngFor="let answer of getFormArrayQuestionsAnswer(i,j,'answers')?.controls;let k = index;">
+                                                            <div class="row" [formGroupName]="k">
+                                                                <ng-container *ngIf="!answer.get('isdeleted')?.value">
+                                                                    <div class="Answer1" [ngClass]="question.get('compliance')?.value ? 'col-lg-4' : 'col-lg-6'">
+                                                                        <div class="checklist-card pb-0 mt-5">
+                                                                            <input type="text" class="mt-0"
+                                                                                placeholder="Enter answer here"
+                                                                                formControlName="answer">
+                                                                            <span class="vl"></span>
+                                                                            <ng-container
+                                                                                *ngIf="question.get('answerType')?.value === 'yes/no' || question.get('answerType')?.value === 'multiplechoicesingle'"
+                                                                                ngDefaultControl>
+                                                                                <span class="vl2"></span>
+                                                                                <svg class="imgAdd"
+                                                                                    xmlns="http://www.w3.org/2000/svg"
+                                                                                    width="20" height="20"
+                                                                                    viewBox="0 0 20 20" fill="none"
+                                                                                    (click)="question.get('disableRunAI')?.value ?'' :updateLinked(i,j,k)">
+                                                                                    <path
+                                                                                        d="M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333"
+                                                                                        stroke="#344054"
+                                                                                        stroke-width="1.67"
+                                                                                        stroke-linecap="round"
+                                                                                        stroke-linejoin="round" />
+                                                                                </svg>
+                                                                            </ng-container>
+                                                                            <ng-container
+                                                                                *ngIf="answer.get('answer')?.invalid && answer.get('answer')?.touched">
+                                                                                <p style="color: red;"
+                                                                                    *ngIf="answer.get('answer')?.hasError('required')">
+                                                                                    * Answer is required.</p>
+                                                                            </ng-container>
+                                                                            <p style="color: red;"
+                                                                                *ngIf="answer.get('showSOPFlagError')?.value === true">
+                                                                                Every answer can’t be a flag.</p>
+    
+                                                                            <ng-container formControlName="sopFlag"
+                                                                                ngDefaultControl>
+    
+                                                                                <svg (click)="question.get('disableRunAI')?.value ?'' : raiseflag(i,j,k,true)"
+                                                                                    matTooltip="Raise a flag if this answer is selected"
+                                                                                    matTooltipPosition="above"
+                                                                                    matTooltipClass="custom-test"
+                                                                                    *ngIf="answer.get('sopFlag')?.value === false"
+                                                                                    class="kiwi"
+                                                                                    xmlns="http://www.w3.org/2000/svg"
+                                                                                    width="16" height="16"
+                                                                                    viewBox="0 0 16 16">
+                                                                                    <path
+                                                                                        d="M2.66669 10.0007C2.66669 10.0007 3.33335 9.33398 5.33335 9.33398C7.33335 9.33398 8.66669 10.6673 10.6667 10.6673C12.6667 10.6673 13.3334 10.0007 13.3334 10.0007V2.00065C13.3334 2.00065 12.6667 2.66732 10.6667 2.66732C8.66669 2.66732 7.33335 1.33398 5.33335 1.33398C3.33335 1.33398 2.66669 2.00065 2.66669 2.00065V10.0007ZM2.66669 10.0007V14.6673"
+                                                                                        stroke="#D0D5DD"
+                                                                                        stroke-width="2"
+                                                                                        stroke-linecap="round"
+                                                                                        stroke-linejoin="round" />
+                                                                                </svg>
+    
+                                                                                <svg (click)="question.get('disableRunAI')?.value ?'' : raiseflag(i,j,k,false)"
+                                                                                    matTooltip="Raise a flag if this answer is selected"
+                                                                                    matTooltipPosition="above"
+                                                                                    matTooltipClass="custom-test"
+                                                                                    *ngIf="answer.get('sopFlag')?.value === true"
+                                                                                    class="active-flag"
+                                                                                    xmlns="http://www.w3.org/2000/svg"
+                                                                                    width="16" height="16"
+                                                                                    viewBox="0 0 16 16">
+                                                                                    <path
+                                                                                        d="M2.66669 10.0007C2.66669 10.0007 3.33335 9.33398 5.33335 9.33398C7.33335 9.33398 8.66669 10.6673 10.6667 10.6673C12.6667 10.6673 13.3334 10.0007 13.3334 10.0007V2.00065C13.3334 2.00065 12.6667 2.66732 10.6667 2.66732C8.66669 2.66732 7.33335 1.33398 5.33335 1.33398C3.33335 1.33398 2.66669 2.00065 2.66669 2.00065V10.0007ZM2.66669 10.0007V14.6673"
+                                                                                        stroke="#D0D5DD"
+                                                                                        stroke-width="2"
+                                                                                        stroke-linecap="round"
+                                                                                        stroke-linejoin="round" />
+                                                                                </svg>
+                                                                            </ng-container>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div [ngClass]="question.get('compliance')?.value ? 'col-lg-5' : 'col-lg-6'"
+                                                                        *ngIf="!answer.get('showLinked')?.value">
+                                                                        <div class="d-flex justify-content-between">
+                                                                            <div class="d-flex answervalidation">
+                                                                                <input class="mt-7" type="checkbox"
+                                                                                    style="width:16px;height:16px;cursor: pointer;"
+                                                                                    value="1"
+                                                                                    (change)="getvalidation(i,j,k,$event)"
+                                                                                    formControlName="validation">
+                                                                                <div class="chackbox pt-4 mt-2 mx-2"
+                                                                                    style="cursor: default;">
+                                                                                    <h3>Validate response</h3>
+                                                                                    <p class="mb-0">Trigger an action
+                                                                                        for each response to validate it
+                                                                                    </p>
+                                                                                </div>
+                                                                            </div>
+                                                                            <svg *ngIf="question.get('answerType')?.value !== 'yes/no' && getFormArrayQuestionsAnswer(i,j,'answers').value.length > 2 && !question.get('compliance')?.value"
+                                                                                (click)="question.get('disableRunAI')?.value ?'' :deleteAnswer(i,j,k)"
+                                                                                class="mt-8"
+                                                                                xmlns="http://www.w3.org/2000/svg"
+                                                                                matTooltip="Delete answer"
+                                                                                matTooltipPosition="above"
+                                                                                matTooltipClass="custom-test" width="20"
+                                                                                height="20" viewBox="0 0 20 20"
+                                                                                fill="none">
+                                                                                <path d="M15 5L5 15M5 5L15 15"
+                                                                                    stroke="#667085"
+                                                                                    stroke-width="1.66667"
+                                                                                    stroke-linecap="round"
+                                                                                    stroke-linejoin="round" />
+                                                                            </svg>
+                                                                        </div>
+    
+                                                                    </div>
+                                                                    <div class="col-md-3" *ngIf="question.get('compliance')?.value">
+                                                                        <select class="w-150px mt-7" formControlName="complianceScore">
+                                                                            <option *ngFor="let value of dropdownValue" [value]="value">{{value}}</option>
+                                                                        </select>
+                                                                        <svg class="ms-3" *ngIf="question.get('answerType')?.value !== 'yes/no' && getFormArrayQuestionsAnswer(i,j,'answers').value.length > 2"
+                                                                            (click)="question.get('disableRunAI')?.value ?'' :deleteAnswer(i,j,k)"
+                                                                            class=""
+                                                                            xmlns="http://www.w3.org/2000/svg"
+                                                                            matTooltip="Delete answer"
+                                                                            matTooltipPosition="above"
+                                                                            matTooltipClass="custom-test" width="20"
+                                                                            height="20" viewBox="0 0 20 20"
+                                                                            fill="none">
+                                                                            <path d="M15 5L5 15M5 5L15 15"
+                                                                                stroke="#667085"
+                                                                                stroke-width="1.66667"
+                                                                                stroke-linecap="round"
+                                                                                stroke-linejoin="round" />
+                                                                        </svg>
+                                                                    </div>
+                                                                    <!-- *ngIf="moreqn.validation" -->
+                                                                    <div *ngIf="answer.get('validation')?.value"
+                                                                        class="row">
+                                                                        <div class="col-lg-3 pt-7 fs-4 fw-400 mt-1">
+                                                                            If the response is this, then
+                                                                        </div>
+                                                                        <div [ngClass]="answer.get('validationType')?.value === 'Capture Multiple Image with description' ? 'col-md-5' : 'col-lg-3'">
+                                                                            <select class="mt-5 mx-1"
+                                                                                formControlName="validationType"
+                                                                                (change)="updateValidationType($event,i,j,k)">
+                                                                                <option [ngValue]="'Descriptive Answer'">Descriptive Answer</option>
+                                                                                <option [ngValue]="'Capture Image'">Capture Image</option>
+                                                                                <option *ngIf="question.get('answerType')?.value === 'multiplechoicesingle'" [ngValue]="'Capture Multiple Image with description'">Capture Multiple Image with description</option>
+                                                                                <option [ngValue]="'Capture Video'">Capture Video</option>
+                                                                            </select>
+                                                                        </div>
+                                                                        <div class="col-lg-3 mx-4 d-flex pt-8" *ngIf="answer.get('validationType')?.value === 'Descriptive Answer'">
+                                                                            <div class="form-check">
+                                                                                <input formControlName="descriptivetype" class="form-check-input cursor-pointer" type="radio" [id]="'inlineRadio2' + i + j + k"
+                                                                                    value="text" [name]="'descriptivetype'" [attr.disabled]="question.get('disableRunAI')?.value ? true : null">
+                                                                                <label class="cursor-pointer dscriptiveType" [for]="'inlineRadio2' + i + j + k">Text</label>
+                                                                            </div>
+                                                                            <div class="form-check ms-5">
+                                                                                <input formControlName="descriptivetype" class="form-check-input cursor-pointer" type="radio" [id]="'inlineRadio3'+ i + j + k"
+                                                                                    value="number" [name]="'descriptivetype'" [attr.disabled]="question.get('disableRunAI')?.value ? true : null">
+                                                                                <label class="cursor-pointer dscriptiveType" [for]="'inlineRadio3' + i + j + k">Number</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="row"
+                                                                        *ngIf="answer.get('showLinked')?.value">
+                                                                        <div class="col-lg-3 pt-7 fs-4 fw-400 mt-1">
+                                                                            Linked Question
+                                                                        </div>
+                                                                        <div class="col-lg-9">
+                                                                            <select [id]="i+'-'+k" [name]="i+'-'+k" class="mt-5" (change)="updateQuestionType(i,j,k,$event)" [disabled]="question.get('disableRunAI')?.value">
+                                                                                <option value="">Select Question</option>
+                                                                                <option *ngFor="let option of getQuestionList(i,j,k)" [value]="option"
+                                                                                    [selected]="selectOption(option,answer.get('linkedQuestion')?.value)">Question {{option}}</option>
+                                                                            </select>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="row"
+                                                                        *ngIf="answer.get('validation')?.value && (answer.get('validationType')?.value === 'Capture Image' || answer.get('validationType')?.value === 'Capture Multiple Image with description')">
+                                                                        <div *ngFor="let image of getAnswerFormGroup_FormControl(i,j,'multiReferenceImage',k)?.value;let n=index"
+                                                                            class="col-md-4 image-container ref_img_cont mb-4 mt-5">
+                                                                            <img src="{{environment.TraxAnswerCDN}}{{image.imageURL}}"
+                                                                                width="90%" height="300px"
+                                                                                class="auto-adju    st" alt="Tango Eye" />
+                                                                                <div class="overlay-icons">
+                                                                                    <span class="cursor-pointer" (click)="question.get('disableRunAI')?.value ?'' :onPopup(image.imageURL)">
+                                                                                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+                                                                                            <g filter="url(#filter0_d_14557_62513)">
+                                                                                            <rect x="2" y="1" width="36" height="36" rx="8" fill="white"/>
+                                                                                            <rect x="2.5" y="1.5" width="35" height="35" rx="7.5" stroke="#D0D5DD"/>
+                                                                                            <path d="M22.5 11.5H27.5M27.5 11.5V16.5M27.5 11.5L21.6667 17.3333M17.5 26.5H12.5M12.5 26.5V21.5M12.5 26.5L18.3333 20.6667" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                                            </g>
+                                                                                            <defs>
+                                                                                            <filter id="filter0_d_14557_62513" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                                                                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                                                                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                                                                            <feOffset dy="1"/>
+                                                                                            <feGaussianBlur stdDeviation="1"/>
+                                                                                            <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+                                                                                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14557_62513"/>
+                                                                                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14557_62513" result="shape"/>
+                                                                                            </filter>
+                                                                                            </defs>
+                                                                                        </svg>
+                                                                                    </span>
+                                                                                    <span class="cursor-pointer">
+                                                                                        <input class="d-none"
+                                                                                    [id]="'fileupload_validref'+i+j+k+n"
+                                                                                    type="file" name="answerFile"
+                                                                                    accept="image/png, image/jpeg"
+                                                                                    (click)="question.get('disableRunAI')?.value ? $event.preventDefault() : null"
+                                                                                    (change)="question.get('disableRunAI')?.value ? '' : loadImageFromDevice(i,refImgQIdx,$event,k,'multiReferenceImage',n)">
+                                                                                        <label [for]="'fileupload_validref'+i+j+k+n"
+                                                                                    (click)="refImgQIdx=j;">
+                                                                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+                                                                                                <g filter="url(#filter0_d_14557_62522)">
+                                                                                                <rect x="2" y="1" width="36" height="36" rx="8" fill="white"/>
+                                                                                                <rect x="2.5" y="1.5" width="35" height="35" rx="7.5" stroke="#D0D5DD"/>
+                                                                                                <path d="M27.5 21.5V24.8333C27.5 25.2754 27.3244 25.6993 27.0118 26.0118C26.6993 26.3244 26.2754 26.5 25.8333 26.5H14.1667C13.7246 26.5 13.3007 26.3244 12.9882 26.0118C12.6756 25.6993 12.5 25.2754 12.5 24.8333V21.5M24.1667 15.6667L20 11.5M20 11.5L15.8333 15.6667M20 11.5V21.5" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                                                </g>
+                                                                                                <defs>
+                                                                                                <filter id="filter0_d_14557_62522" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                                                                                <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                                                                                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                                                                                <feOffset dy="1"/>
+                                                                                                <feGaussianBlur stdDeviation="1"/>
+                                                                                                <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+                                                                                                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14557_62522"/>
+                                                                                                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14557_62522" result="shape"/>
+                                                                                                </filter>
+                                                                                                </defs>
+                                                                                            </svg>
+                                                                                    </label>
+                                                                                    </span>
+                                                                                    <span class="cursor-pointer" (click)="question.get('disableRunAI')?.value ?'' :clearReferenceImage(i,j,k,n,'multiReferenceImage');">
+                                                                                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+                                                                                            <g filter="url(#filter0_d_14557_62514)">
+                                                                                            <rect x="2" y="1" width="36" height="36" rx="8" fill="white"/>
+                                                                                            <rect x="2.5" y="1.5" width="35" height="35" rx="7.5" stroke="#D0D5DD"/>
+                                                                                            <path d="M12.5 13.9974H14.1667M14.1667 13.9974H27.5M14.1667 13.9974V25.6641C14.1667 26.1061 14.3423 26.53 14.6548 26.8426C14.9674 27.1551 15.3913 27.3307 15.8333 27.3307H24.1667C24.6087 27.3307 25.0326 27.1551 25.3452 26.8426C25.6577 26.53 25.8333 26.1061 25.8333 25.6641V13.9974H14.1667ZM16.6667 13.9974V12.3307C16.6667 11.8887 16.8423 11.4648 17.1548 11.1522C17.4674 10.8397 17.8913 10.6641 18.3333 10.6641H21.6667C22.1087 10.6641 22.5326 10.8397 22.8452 11.1522C23.1577 11.4648 23.3333 11.8887 23.3333 12.3307V13.9974M18.3333 18.1641V23.1641M21.6667 18.1641V23.1641" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                                            </g>
+                                                                                            <defs>
+                                                                                            <filter id="filter0_d_14557_62514" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                                                                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                                                                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                                                                            <feOffset dy="1"/>
+                                                                                            <feGaussianBlur stdDeviation="1"/>
+                                                                                            <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+                                                                                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14557_62514"/>
+                                                                                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14557_62514" result="shape"/>
+                                                                                            </filter>
+                                                                                            </defs>
+                                                                                        </svg>
+                                                                                    </span>
+                                                                                </div>
+                                                                            <!-- <div class="ref_del_icon"
+                                                                                (click)="clearReferenceImage(i,j,k);">
+                                                                                <svg width="20" height="20"
+                                                                                    viewBox="0 0 20 20" fill="none"
+                                                                                    xmlns="http://www.w3.org/2000/svg">
+                                                                                    <path
+                                                                                        d="M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168"
+                                                                                        stroke="#B42318"
+                                                                                        stroke-width="1.67"
+                                                                                        stroke-linecap="round"
+                                                                                        stroke-linejoin="round" />
+                                                                                </svg>
+                                                                            </div> -->
+                                                                        </div>
+                                                                        <div class="d-flex mb-3">
+                                                                            <!-- <div *ngIf="getAnswerFormGroup_FormControl(i,j,'multiReferenceImage',k)?.value"
+                                                                                class="col-lg-3 btn btn-light-primary mt-2">
+                                                                                <input class="d-none"
+                                                                                    [id]="'fileupload_'+i+j+k"
+                                                                                    type="file" name="answerFile"
+                                                                                    accept="image/png, image/jpeg"
+                                                                                    (change)="loadImageFromDevice(i,refImgQIdx,$event,k)">
+                                                                                <label [for]="'fileupload_'+i+j+k"
+                                                                                    (click)="refImgQIdx=j;">
+                                                                                    <svg xmlns="http://www.w3.org/2000/svg"
+                                                                                        class="mx-2" width="21"
+                                                                                        height="20" viewBox="0 0 21 20"
+                                                                                        fill="none">
+                                                                                        <g
+                                                                                            clip-path="url(#clip0_4082_3122)">
+                                                                                            <path
+                                                                                                d="M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019"
+                                                                                                stroke="#009BF3"
+                                                                                                stroke-width="1.67"
+                                                                                                stroke-linecap="round"
+                                                                                                stroke-linejoin="round" />
+                                                                                        </g>
+                                                                                        <defs>
+                                                                                            <clipPath
+                                                                                                id="clip0_4082_3122">
+                                                                                                <rect width="20"
+                                                                                                    height="20"
+                                                                                                    fill="white"
+                                                                                                    transform="translate(0.5)" />
+                                                                                            </clipPath>
+                                                                                        </defs>
+                                                                                    </svg>Reupload Image</label>
+                                                                            </div> -->
+                                                                            <div *ngIf="getAnswerFormGroup_FormControl(i,j,'multiReferenceImage',k)?.value.length >= 5 || question.get('disableRunAI')?.value"
+                                                                                class="col-lg-3 btn-light-disbaled btn add-ref-btn my-2 borderCard">
+                                                                                <label class="pointer"> 
+                                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                                                                        <path d="M10.0013 4.16406V15.8307M4.16797 9.9974H15.8346" stroke="#6BCAFF" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                                    </svg> <span>Add Reference Image</span> 
+                                                                                </label>
+                                                                            </div>
+                                                                            <div *ngIf="!question.get('disableRunAI')?.value && getAnswerFormGroup_FormControl(i,j,'multiReferenceImage',k)?.value.length < 5"
+                                                                                class="col-lg-3 btn add-ref-btn btn-light-primary my-2">
+                                                                                <input class="d-none"
+                                                                                    [id]="'fileupload_validImage1'+i+j+k"
+                                                                                    type="file" name="file"
+                                                                                    accept="image/png, image/jpeg"
+                                                                                    (change)="loadImageFromDevice(i,refImgQIdx,$event,k,'multiReferenceImage')">
+                                                                                <label class="pointer"
+                                                                                    [for]="'fileupload_validImage1'+i+j+k"
+                                                                                    (click)="refImgQIdx=j;"> <svg
+                                                                                        xmlns="http://www.w3.org/2000/svg"
+                                                                                        width="20" height="20"
+                                                                                        viewBox="0 0 20 20" fill="none">
+                                                                                        <path
+                                                                                            d="M10 4.16797V15.8346M4.16669 10.0013H15.8334"
+                                                                                            stroke="#009BF3"
+                                                                                            stroke-width="1.67"
+                                                                                            stroke-linecap="round"
+                                                                                            stroke-linejoin="round" />
+                                                                                    </svg>Add Reference Image </label>
+                                                                            </div>
+                                                                            <div
+                                                                                class="col-lg-4 form-check form-switch mx-2 btn-sec mt-6 text-left align-items-center">
+                                                                                <input
+                                                                                    class="form-check-input mx-0 pointer"
+                                                                                    type="checkbox" name="toc" value="1"
+                                                                                    ngDefaultControl
+                                                                                    formControlName="allowUploadfromGallery">
+                                                                                <label class="form-check-label pointer"
+                                                                                    for="flexSwitchCheckDefault"></label>
+                                                                                Allow upload from gallery
+                                                                            </div>
+                                                                            <div class="col-lg-2"></div>
+                                                                            <div class="col-lg-3 d-flex justify-content-center align-items-center mt-2" *ngIf="userType && userType === 'tango'">
+                                                                                <h3 class="fs16-600 px-12"> Run AI ✨</h3>
+                                                                                <div class="form-check form-switch align-items-center btn-sec ml-5">
+                                                                                    <!-- (click)="RunAINew(i,j,k)" -->
+                                                                                    <input class="form-check-input pointer" type="checkbox"
+                                                                                        formControlName="runAI" name="toc" value="1" (click)="RunAINew(i,j,k,$event)">
+                                                                                    <label class="form-check-label"
+                                                                                        for="flexSwitchCheckDefault"></label>
+                                                                                </div>
+                                                                                <svg [ngClass]="question.get('answerType')?.value === 'multipleImage' ? 'mt-1' : ''"
+                                                                                    xmlns="http://www.w3.org/2000/svg" width="16"
+                                                                                    height="16" viewBox="0 0 16 16" fill="none"
+                                                                                    matTooltip="Enable AI where you want tango to identify, track and alert instances."
+                                                                                    matTooltipPosition="above"
+                                                                                    matTooltipClass="custom-test">
+                                                                                    <g clip-path="url(#clip0_2301_100038)">
+                                                                                        <path
+                                                                                            d="M7.99967 10.6654V7.9987M7.99967 5.33203H8.00634M14.6663 7.9987C14.6663 11.6806 11.6816 14.6654 7.99967 14.6654C4.31778 14.6654 1.33301 11.6806 1.33301 7.9987C1.33301 4.3168 4.31778 1.33203 7.99967 1.33203C11.6816 1.33203 14.6663 4.3168 14.6663 7.9987Z"
+                                                                                            stroke="#98A2B3" stroke-width="2"
+                                                                                            stroke-linecap="round"
+                                                                                            stroke-linejoin="round" />
+                                                                                    </g>
+                                                                                    <defs>
+                                                                                        <clipPath id="clip0_2301_100038">
+                                                                                            <rect width="16" height="16" fill="white" />
+                                                                                        </clipPath>
+                                                                                    </defs>
+                                                                                </svg>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </ng-container>
+                                                            </div>
+                                                        </ng-container>
+                                                        <div *ngIf="question.get('answers')?.hasError('duplicateString')" class="text-danger mt-2">* Same answer cannot be
+                                                            repeated</div>
+                                                        <ng-container class="row"
+                                                            *ngIf="['multiplechoicemultiple','multiplechoicesingle','dropdown'].includes(question.get('answerType')?.value) && allowAddAnswer(question.get('answers')?.value) && !question.get('disableRunAI')?.value">
+                                                            <div (click)="AddMoreAns(i,j,question.get('answerType')?.value)"
+                                                                class="btn col-lg-12 btn-light-primary my-3">
+                                                                Add More Answer</div>
+                                                        </ng-container>
+    
+                                                    </ng-container>
+                                                </ng-container>
+    
+                                                <!-- Image -->
+                                                <ng-container
+                                                    *ngIf="['image','descriptiveImage','multipleImage'].includes(question.get('answerType')?.value)"
+                                                    class="row">
+                                                    <ng-container formGroupName="answers">
+                                                        <div *ngFor="let image of getAnswerFormGroup_FormControl(i,j,'multiReferenceImage')?.value;let n=index"
+                                                            class="col-md-4 image-container ref_img_cont ref_img_cont mb-4">
+                                                            <img src="{{environment.TraxAnswerCDN}}{{image.imageURL}}"
+                                                                width="90%" height="300px" class="auto-adjust"
+                                                                alt="Tango Eye" />
+                                                                <div class="overlay-icons">
+                                                                <span class="cursor-pointer" (click)="onPopup(image.imageURL)">
+                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+                                                                        <g filter="url(#filter0_d_14557_62513)">
+                                                                        <rect x="2" y="1" width="36" height="36" rx="8" fill="white"/>
+                                                                        <rect x="2.5" y="1.5" width="35" height="35" rx="7.5" stroke="#D0D5DD"/>
+                                                                        <path d="M22.5 11.5H27.5M27.5 11.5V16.5M27.5 11.5L21.6667 17.3333M17.5 26.5H12.5M12.5 26.5V21.5M12.5 26.5L18.3333 20.6667" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                        </g>
+                                                                        <defs>
+                                                                        <filter id="filter0_d_14557_62513" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                                                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                                                        <feOffset dy="1"/>
+                                                                        <feGaussianBlur stdDeviation="1"/>
+                                                                        <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+                                                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14557_62513"/>
+                                                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14557_62513" result="shape"/>
+                                                                        </filter>
+                                                                        </defs>
+                                                                    </svg>
+                                                                </span>
+                                                                <span class="cursor-pointer">
+                                                                    <input class="d-none" [id]="'fileuploadImage_45'+n" type="file"
+                                                                    name="file" accept="image/png, image/jpeg"
+                                                                    (click)="question.get('disableRunAI')?.value ? $event.preventDefault() : null"
+                                                                    (change)="question.get('disableRunAI')?.value ? '' : loadImageFromDevice(i,refImgQIdx,$event,-1,'multiReferenceImage',n)">
+                                                                    <label [for]="'fileuploadImage_45'+n" (click)="refImgQIdx=j;">
+                                                                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+                                                                            <g filter="url(#filter0_d_14557_62522)">
+                                                                            <rect x="2" y="1" width="36" height="36" rx="8" fill="white"/>
+                                                                            <rect x="2.5" y="1.5" width="35" height="35" rx="7.5" stroke="#D0D5DD"/>
+                                                                            <path d="M27.5 21.5V24.8333C27.5 25.2754 27.3244 25.6993 27.0118 26.0118C26.6993 26.3244 26.2754 26.5 25.8333 26.5H14.1667C13.7246 26.5 13.3007 26.3244 12.9882 26.0118C12.6756 25.6993 12.5 25.2754 12.5 24.8333V21.5M24.1667 15.6667L20 11.5M20 11.5L15.8333 15.6667M20 11.5V21.5" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                            </g>
+                                                                            <defs>
+                                                                            <filter id="filter0_d_14557_62522" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                                                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                                                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                                                            <feOffset dy="1"/>
+                                                                            <feGaussianBlur stdDeviation="1"/>
+                                                                            <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+                                                                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14557_62522"/>
+                                                                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14557_62522" result="shape"/>
+                                                                            </filter>
+                                                                            </defs>
+                                                                        </svg>
+                                                                    </label>
+                                                                </span>
+                                                                <span class="cursor-pointer" (click)="question.get('disableRunAI')?.value ? '': clearReferenceImage(i,j,-1,n,'multiReferenceImage');">
+                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+                                                                        <g filter="url(#filter0_d_14557_62514)">
+                                                                        <rect x="2" y="1" width="36" height="36" rx="8" fill="white"/>
+                                                                        <rect x="2.5" y="1.5" width="35" height="35" rx="7.5" stroke="#D0D5DD"/>
+                                                                        <path d="M12.5 13.9974H14.1667M14.1667 13.9974H27.5M14.1667 13.9974V25.6641C14.1667 26.1061 14.3423 26.53 14.6548 26.8426C14.9674 27.1551 15.3913 27.3307 15.8333 27.3307H24.1667C24.6087 27.3307 25.0326 27.1551 25.3452 26.8426C25.6577 26.53 25.8333 26.1061 25.8333 25.6641V13.9974H14.1667ZM16.6667 13.9974V12.3307C16.6667 11.8887 16.8423 11.4648 17.1548 11.1522C17.4674 10.8397 17.8913 10.6641 18.3333 10.6641H21.6667C22.1087 10.6641 22.5326 10.8397 22.8452 11.1522C23.1577 11.4648 23.3333 11.8887 23.3333 12.3307V13.9974M18.3333 18.1641V23.1641M21.6667 18.1641V23.1641" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                        </g>
+                                                                        <defs>
+                                                                        <filter id="filter0_d_14557_62514" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                                                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                                                        <feOffset dy="1"/>
+                                                                        <feGaussianBlur stdDeviation="1"/>
+                                                                        <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+                                                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14557_62514"/>
+                                                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14557_62514" result="shape"/>
+                                                                        </filter>
+                                                                        </defs>
+                                                                    </svg>
+                                                                </span>
+                                                            </div>
+                                                            <!-- <div class="ref_del_icon"
+                                                                (click)="(question.get('answerType')?.value === 'image' && question.get('runAIDefault')?.value) ? '': clearReferenceImage(i,j);">
+                                                                <svg width="20" height="20" viewBox="0 0 20 20"
+                                                                    fill="none" xmlns="http://www.w3.org/2000/svg" [style]="(question.get('answerType')?.value === 'image' && question.get('runAIDefault')?.value) ? 'cursor:default':''">
+                                                                    <path
+                                                                        d="M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013M8.33333 9.16797V14.168M11.6667 9.16797V14.168"
+                                                                        stroke="#B42318" stroke-width="1.67"
+                                                                        stroke-linecap="round"
+                                                                        stroke-linejoin="round" />
+                                                                </svg>
+                                                            </div> -->
+                                                        </div>
+                                                        <div class="d-flex mb-3">
+                                                            <!-- <div *ngIf="getAnswerFormGroup_FormControl(i,j,'multiReferenceImage')?.value"
+                                                                class="col-lg-3 btn btn-light-primary mt-2">
+                                                                <input class="d-none" id="fileupload" type="file"
+                                                                    name="file" accept="image/png, image/jpeg"
+                                                                    (change)="loadImageFromDevice(i,refImgQIdx,$event)" *ngIf="(question.get('answerType')?.value !== 'image' || (question.get('answerType')?.value === 'image' && !question.get('runAIDefault')?.value))">
+                                                                <label for="fileupload" (click)="refImgQIdx=j;">
+                                                                    <svg xmlns="http://www.w3.org/2000/svg" class="mx-2"
+                                                                        width="21" height="20" viewBox="0 0 21 20"
+                                                                        fill="none">
+                                                                        <g clip-path="url(#clip0_4082_3122)">
+                                                                            <path
+                                                                                d="M19.6667 3.33527V8.33527M19.6667 8.33527H14.6667M19.6667 8.33527L15.8 4.70193C14.9044 3.80586 13.7964 3.15127 12.5793 2.79925C11.3623 2.44722 10.0759 2.40923 8.84025 2.68882C7.60456 2.96841 6.45984 3.55646 5.5129 4.39812C4.56595 5.23977 3.84765 6.30759 3.42501 7.50193M1.33334 16.6686V11.6686M1.33334 11.6686H6.33334M1.33334 11.6686L5.20001 15.3019C6.09563 16.198 7.20365 16.8526 8.42068 17.2046C9.63771 17.5567 10.9241 17.5946 12.1598 17.3151C13.3955 17.0355 14.5402 16.4474 15.4871 15.6058C16.4341 14.7641 17.1524 13.6963 17.575 12.5019"
+                                                                                stroke="#009BF3" stroke-width="1.67"
+                                                                                stroke-linecap="round"
+                                                                                stroke-linejoin="round" />
+                                                                        </g>
+                                                                        <defs>
+                                                                            <clipPath id="clip0_4082_3122">
+                                                                                <rect width="20" height="20"
+                                                                                    fill="white"
+                                                                                    transform="translate(0.5)" />
+                                                                            </clipPath>
+                                                                        </defs>
+                                                                    </svg>Reupload Image</label>
+                                                            </div> -->
+                                                            <div *ngIf="!question.get('disableRunAI')?.value && getAnswerFormGroup_FormControl(i,j,'multiReferenceImage')?.value.length < 5 && !question.get('disableRunAI')?.value"
+                                                                class="col-lg-3 btn add-ref-btn btn-light-primary my-2">
+                                                                <input class="d-none" id="fileuploadrefImage1" type="file"
+                                                                    name="file" accept="image/png, image/jpeg"
+                                                                    (change)="loadImageFromDevice(i,refImgQIdx,$event,-1,'multiReferenceImage')" *ngIf="(question.get('answerType')?.value !== 'image' || (question.get('answerType')?.value === 'image' && !question.get('runAIDefault')?.value))">
+                                                                <label class="pointer" for="fileuploadrefImage1"
+                                                                    (click)="refImgQIdx=j;"> <svg
+                                                                        xmlns="http://www.w3.org/2000/svg" width="20"
+                                                                        height="20" viewBox="0 0 20 20" fill="none">
+                                                                        <path
+                                                                            d="M10 4.16797V15.8346M4.16669 10.0013H15.8334"
+                                                                            stroke="#009BF3" stroke-width="1.67"
+                                                                            stroke-linecap="round"
+                                                                            stroke-linejoin="round" />
+                                                                    </svg>Add Reference Image </label>
+                                                            </div>
+                                                            <div *ngIf="getAnswerFormGroup_FormControl(i,j,'multiReferenceImage')?.value.length >= 5 || question.get('disableRunAI')?.value"
+                                                            class="col-lg-3 btn-light-disbaled btn add-ref-btn my-2 borderCard">
+                                                            <label class="pointer"> 
+                                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                                                    <path d="M10.0013 4.16406V15.8307M4.16797 9.9974H15.8346" stroke="#6BCAFF" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                </svg> <span>Add Reference Image</span> 
+                                                            </label>
+                                                        </div>
+                                                            <div
+                                                                class="col-lg-4 form-check form-switch mx-2 btn-sec mt-6 text-left align-items-center">
+                                                                <input class="form-check-input mx-0 pointer"
+                                                                    type="checkbox" name="toc" value="1"
+                                                                    ngDefaultControl
+                                                                    formControlName="allowUploadfromGallery">
+                                                                <label class="form-check-label pointer"
+                                                                    for="flexSwitchCheckDefault"></label>
+                                                                Allow upload from gallery
+                                                            </div>
+                                                            <div
+                                                                [ngClass]="(['multipleImage'].includes(question.get('answerType')?.value) && getAnswerFormGroup_FormControl(i,j,'multiReferenceImage')?.value === '') ? 'col-lg-4 mt-6' : ['image','descriptiveImage'].includes(question.get('answerType')?.value) ? 'col-lg-2' : ''">
+                                                                <div class="d-flex" *ngIf="(['multipleImage'].includes(question.get('answerType')?.value) && getAnswerFormGroup_FormControl(i,j,'multiReferenceImage')?.value === '')">
+                                                                    <div class="form-check">
+                                                                        <input formControlName="descriptivetype" class="form-check-input cursor-pointer" type="radio" [id]="'inlineRadio4' + i + j"
+                                                                            value="text" [name]="'descriptivetype'" [attr.disabled]="question.get('disableRunAI')?.value ? true : null">
+                                                                        <label class="cursor-pointer dscriptiveType" [for]="'inlineRadio4' + i + j">Text</label>
+                                                                    </div>
+                                                                    <div class="form-check ms-5">
+                                                                        <input formControlName="descriptivetype" class="form-check-input cursor-pointer" type="radio" [id]="'inlineRadio5' + i + j"
+                                                                            value="number" [name]="'descriptivetype'" [attr.disabled]="question.get('disableRunAI')?.value ? true : null">
+                                                                        <label class="cursor-pointer dscriptiveType" [for]="'inlineRadio5' + i + j">Number</label>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <div *ngIf="getAnswerFormGroup_FormControl(i,j,'multiReferenceImage')?.value && ['image','multipleImage','descriptiveImage'].includes(question.get('answerType')?.value)"
+                                                                [ngClass]="question.get('answerType')?.value === 'multipleImage' ? 'col-lg-5 d-flex mt-6' : 'col-lg-3 d-flex justify-content-center align-items-center mt-2'">
+                                                                <div class="d-flex" *ngIf="question.get('answerType')?.value === 'multipleImage'">
+                                                                    <div class="form-check">
+                                                                        <input formControlName="descriptivetype" class="form-check-input cursor-pointer" type="radio" [id]="'inlineRadio6' + i + j"
+                                                                            value="text" [name]="'descriptivetype'" [attr.disabled]="question.get('disableRunAI')?.value ? true : null">
+                                                                        <label class="cursor-pointer dscriptiveType" [for]="'inlineRadio6' + i + j">Text</label>
+                                                                    </div>
+                                                                    <div class="form-check ms-5">
+                                                                        <input formControlName="descriptivetype" class="form-check-input cursor-pointer" type="radio" [id]="'inlineRadio6' + i + j"
+                                                                            value="number" [name]="'descriptivetype'" [attr.disabled]="question.get('disableRunAI')?.value ? true : null">
+                                                                        <label class="cursor-pointer dscriptiveType" [for]="'inlineRadio6' + i + j">Number</label>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="d-flex" *ngIf="userType && userType === 'tango'">
+                                                                    <h3 class="fs16-600 px-12"> Run AI ✨</h3>
+                                                                    <div class="form-check form-switch align-items-center btn-sec ml-5">
+                                                                        <!-- (click)="RunAINew(i,j)" -->
+                                                                        <input class="form-check-input pointer" type="checkbox"
+                                                                            formControlName="runAI" name="toc" value="1" (click)="RunAINew(i,j,-1,$event)">
+                                                                        <label class="form-check-label"
+                                                                            for="flexSwitchCheckDefault"></label>
+                                                                    </div>
+                                                                    <svg [ngClass]="question.get('answerType')?.value === 'multipleImage' ? 'mt-1' : ''"
+                                                                        xmlns="http://www.w3.org/2000/svg" width="16"
+                                                                        height="16" viewBox="0 0 16 16" fill="none"
+                                                                        matTooltip="Enable AI where you want tango to identify, track and alert instances."
+                                                                        matTooltipPosition="above"
+                                                                        matTooltipClass="custom-test">
+                                                                        <g clip-path="url(#clip0_2301_100038)">
+                                                                            <path
+                                                                                d="M7.99967 10.6654V7.9987M7.99967 5.33203H8.00634M14.6663 7.9987C14.6663 11.6806 11.6816 14.6654 7.99967 14.6654C4.31778 14.6654 1.33301 11.6806 1.33301 7.9987C1.33301 4.3168 4.31778 1.33203 7.99967 1.33203C11.6816 1.33203 14.6663 4.3168 14.6663 7.9987Z"
+                                                                                stroke="#98A2B3" stroke-width="2"
+                                                                                stroke-linecap="round"
+                                                                                stroke-linejoin="round" />
+                                                                        </g>
+                                                                        <defs>
+                                                                            <clipPath id="clip0_2301_100038">
+                                                                                <rect width="16" height="16" fill="white" />
+                                                                            </clipPath>
+                                                                        </defs>
+                                                                    </svg>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </ng-container>
+                                                </ng-container>
+                                                <ng-container  *ngIf="['image'].includes(question.get('answerType')?.value) && question.get('compliance')?.value">
+                                                    <div formGroupName="answers">
+                                                        <div class="row mt-3 dropText" >
+                                                            <div class="mt-3 col-md-6">
+                                                                If the response image is matched, then the score will be
+                                                            </div>
+                                                            <div class="col-md-3">
+                                                                <select class="w-150px ms-10" formControlName="matchedCount">
+                                                                    <option *ngFor="let value of dropdownValue" [value]="value">{{value}}</option>
+                                                                </select>
+                                                            </div>
+                                                        </div>
+                                                        <div class="row mt-3 dropText" >
+                                                            <div class="mt-3 col-md-6">
+                                                                If the response image is not matched, then the score will be
+                                                            </div>
+                                                            <div class="col-md-3">
+                                                                <select class="w-150px ms-10" formControlName="notMatchedCount">
+                                                                    <option *ngFor="let value of dropdownValue" [value]="value">{{value}}</option>
+                                                                </select>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </ng-container>
+    
+                                                <!-- Video -->
+                                                <ng-container *ngIf="question.get('answerType')?.value === 'video'"
+                                                    class="row">
+                                                    <ng-container formGroupName="answers">
+                                                        <div
+                                                            class=" col-lg-4 form-check form-switch text-left align-items-center btn-sec mt-2">
+                                                            <input class="form-check-input mx-0 pointer" type="checkbox"
+                                                                name="toc" value="1" ngDefaultControl
+                                                                formControlName="allowUploadfromGallery">
+                                                            <label class="form-check-label pointer"
+                                                                for="flexSwitchCheckDefault">Allow upload from gallery</label>
+                                                            
+                                                        </div>
+                                                    </ng-container>
+                                                </ng-container>
+
+                                                <!-- <ng-container *ngIf="question.get('answerType')?.value === 'time'" class="row">
+                                                    <ng-container formGroupName="answers">
+                                                        <div class=" col-lg-4 btn-sec mt-2">
+                                                            <input class="form-control form-control-solid flatpickr-input w-200px" type="time" name="time" ngDefaultControl formControlName="answer">
+                                                        </div>
+                                                    </ng-container>
+                                                </ng-container> -->
+
+                                                <ng-container *ngIf="question.get('answerType')?.value === 'linearscale'">
+                                                    <ng-container formGroupName="answers">
+                                                        <div class="row">
+                                                            <div class="col-md-4">
+                                                                <div class="dropText">
+                                                                    Select Type
+                                                                </div>
+                                                                <div class="mt-2">
+                                                                    <select class="" formControlName="linearType" (change)="updateNumber($event,i,j)">
+                                                                       <option value="degree">Degree °C</option>
+                                                                       <option value="number">Whole Number</option>
+                                                                       <option value="percentage">Percentage</option>
+                                                                    </select>
+                                                                </div>
+                                                            </div>
+                                                            <div class="col-md-4">
+                                                                <div class="dropText">
+                                                                    Min Value
+                                                                </div>
+                                                                <div class="mt-2">
+                                                                    <lib-counter style="width: 40%" formControlName="rangeStart" [step]="1" placeholder="0" [type]="getAnswerFormGroup_FormControl(i,j,'linearType')?.value"></lib-counter>
+                                                                </div>
+                                                            </div>
+                                                            <div class="col-md-4">
+                                                                <div class="dropText">
+                                                                    Max Value
+                                                                </div>
+                                                                <div class="mt-2">
+                                                                    <lib-counter style="width: 40%" formControlName="rangeEnd" [step]="1" placeholder="0" [type]="getAnswerFormGroup_FormControl(i,j,'linearType')?.value"></lib-counter>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <ng-container *ngIf="question.get('answers')?.invalid && question.get('answers')?.touched">
+                                                            <div *ngIf="question.get('answers')?.hasError('invalidRange')" class="text-danger mt-2">* Min value must be less than max value.</div>
+                                                        </ng-container>
+                                                        <div *ngIf="question.get('compliance')?.value">
+                                                            <div class="row mt-5" >
+                                                                <div class="col-md-8">
+                                                                    <div class="d-flex align-items-center flex-nowrap">
+                                                                        <span class="dropText me-2">If the response is between</span>
+                                                                        <div class="btn-sec me-2">
+                                                                            <input class="form-control form-control-solid flatpickr-input w-100px" [attr.type]="getAnswerFormGroup_FormControl(i,j,'linearType')?.value === 'degree' ? 'text' : 'number'" [attr.inputmode]="getAnswerFormGroup_FormControl(i,j,'linearType')?.value === 'degree' ? 'text' : 'numeric'" name="start" ngDefaultControl formControlName="minValue" [min]="question.get('answers')?.get('rangeStart')?.value" [max]="question.get('answers')?.get('rangeEnd')?.value" (input)="onRangeValueInput($event, i, j, 'minValue')" (blur)="clampRangeInput(i, j, 'minValue')" />     
+                                                                        </div>
+                                                                        <span class="btn-sec me-2 align-self-center">to</span>
+                                                                        <div class="btn-sec me-2">
+                                                                            <input class="form-control form-control-solid flatpickr-input w-100px" [attr.type]="getAnswerFormGroup_FormControl(i,j,'linearType')?.value === 'degree' ? 'text' : 'number'" [attr.inputmode]="getAnswerFormGroup_FormControl(i,j,'linearType')?.value === 'degree' ? 'text' : 'numeric'" name="start" ngDefaultControl formControlName="maxValue" [min]="question.get('answers')?.get('rangeStart')?.value" [max]="question.get('answers')?.get('rangeEnd')?.value" (input)="onRangeValueInput($event, i, j, 'maxValue')" (blur)="clampRangeInput(i, j, 'maxValue')">
+                                                                        </div>
+                                                                        <span class="dropText ms-1">, then the score will be</span>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="col-md-4 text-end">
+                                                                    <select class="w-150px ms-14" formControlName="matchedCount">
+                                                                        <option *ngFor="let value of dropdownValue" [value]="value">{{value}}</option>
+                                                                    </select>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row mt-3">
+                                                                <div class="dropText mt-5 col-md-8">
+                                                                    If the response is other than the selected range, then the score will be 
+                                                                </div>
+                                                                <div class="col-md-4 text-end">
+                                                                    <select class="w-150px ms-14" formControlName="notMatchedCount">
+                                                                        <option *ngFor="let value of dropdownValue" [value]="value">{{value}}</option>
+                                                                    </select>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </ng-container>
+                                                </ng-container>
+
+                                                <ng-container *ngIf="question.get('answerType')?.value === 'date'">
+                                                    <ng-container formGroupName="answers">
+                                                        <div class="d-flex answervalidation">
+                                                            <input class="" type="checkbox"
+                                                                style="width:16px;height:16px;cursor: pointer;"
+                                                                value="1"
+                                                                formControlName="historicDate">
+                                                            <div class="checkbox mt-1 mx-2"
+                                                                style="cursor: default;">
+                                                                <h3>Allow Historic Dates on Date Picker</h3>
+                                                            </div>
+                                                        </div>
+                                                        <div *ngIf="question.get('compliance')?.value">
+                                                            <div class="d-flex mt-5">
+                                                                <div class="rangeText">Select Range from</div>
+                                                                <div class="col-md-3 px-4 pe-3" id="dateclass"
+                                                                    data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left">
+                                                                    <div class="d-flex align-items-center position-relative my-1">
+                                                                        <span class="svg-icon svg-icon-1 position-absolute ms-3">
+                                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
+                                                                                height="20" viewBox="0 0 20 20" fill="none">
+                                                                                <path
+                                                                                    d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
+                                                                                    stroke="#344054" stroke-width="1.67"
+                                                                                    stroke-linecap="round" stroke-linejoin="round" />
+                                                                            </svg>
+                                                                        </span>
+                                                                        <input class="fx-date-range form-control ps-14" type="text"
+                                                                            matInput ngxDaterangepickerMd [singleDatePicker]="true"
+                                                                            [drops]="'down'" [opens]="'right'"
+                                                                            [alwaysShowCalendars]="false"
+                                                                            [keepCalendarOpeningWithRange]="true" [showCancel]="true"
+                                                                            autocomplete="off"
+                                                                            [autoApply]="true"
+                                                                            [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
+                                                                            (datesUpdated)="dateRange($event,'start',i,j)" name="daterange"
+                                                                            [readonly]="true" formControlName="qnStartDate" [showDropdowns]="true"/> 
+                                                                    </div>
+                                                                </div>
+                                                                <div class="rangeText">To</div>
+                                                                <div class="col-md-3 px-4 pe-3" id="dateclass"
+                                                                    data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left">
+                                                                    <div class="d-flex align-items-center position-relative my-1">
+                                                                        <span class="svg-icon svg-icon-1 position-absolute ms-3">
+                                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
+                                                                                height="20" viewBox="0 0 20 20" fill="none">
+                                                                                <path
+                                                                                    d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
+                                                                                    stroke="#344054" stroke-width="1.67"
+                                                                                    stroke-linecap="round" stroke-linejoin="round" />
+                                                                            </svg>
+                                                                        </span>
+                                                                        <input class="fx-date-range form-control ps-14" type="text"
+                                                                            matInput ngxDaterangepickerMd [singleDatePicker]="true"
+                                                                             [drops]="'down'" [opens]="'right'"
+                                                                            [alwaysShowCalendars]="false"
+                                                                            [keepCalendarOpeningWithRange]="true" [showCancel]="true"
+                                                                            autocomplete="off" 
+                                                                            [autoApply]="true"
+                                                                            [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
+                                                                            (datesUpdated)="dateRange($event,'end',i,j)" name="daterange"
+                                                                            [readonly]="true" formControlName="qnEndDate" [showDropdowns]="true"/>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="d-flex mt-5 dropText" >
+                                                                <div class="mt-3">
+                                                                    If the response date is between the selected range, then the score will be
+                                                                </div>
+                                                                <div>
+                                                                    <select class="w-150px ms-14" formControlName="matchedCount">
+                                                                        <option *ngFor="let value of dropdownValue" [value]="value">{{value}}</option>
+                                                                    </select>
+                                                                </div>
+                                                            </div>
+                                                            <div class="d-flex mt-3 dropText" >
+                                                                <div class="mt-3">
+                                                                    If the response date is other than the selected range, then the score will be
+                                                                </div>
+                                                                <div>
+                                                                    <select class="w-150px ms-10" formControlName="notMatchedCount">
+                                                                        <option *ngFor="let value of dropdownValue" [value]="value">{{value}}</option>
+                                                                    </select>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </ng-container>
+                                                </ng-container>
+
+                                                <ng-container *ngIf="question.get('answerType')?.value === 'image/video'"
+                                                    class="row">
+                                                    <ng-container formGroupName="answers">
+                                                        <div *ngFor="let image of getAnswerFormGroup_FormControl(i,j,'multiReferenceImage')?.value;let n=index"
+                                                            class="col-md-4 image-container ref_img_cont ref_img_cont mb-4">
+                                                            <img src="{{environment.TraxAnswerCDN}}{{image.imageURL}}"
+                                                                width="90%" height="300px" class="auto-adjust"
+                                                                alt="Tango Eye" />
+                                                            <div class="overlay-icons">
+                                                                <span class="cursor-pointer" (click)="onPopup(image.imageURL)">
+                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+                                                                        <g filter="url(#filter0_d_iv_zoom)">
+                                                                        <rect x="2" y="1" width="36" height="36" rx="8" fill="white"/>
+                                                                        <rect x="2.5" y="1.5" width="35" height="35" rx="7.5" stroke="#D0D5DD"/>
+                                                                        <path d="M22.5 11.5H27.5M27.5 11.5V16.5M27.5 11.5L21.6667 17.3333M17.5 26.5H12.5M12.5 26.5V21.5M12.5 26.5L18.3333 20.6667" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                        </g>
+                                                                        <defs>
+                                                                        <filter id="filter0_d_iv_zoom" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                                                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                                                        <feOffset dy="1"/>
+                                                                        <feGaussianBlur stdDeviation="1"/>
+                                                                        <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+                                                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_iv_zoom"/>
+                                                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_iv_zoom" result="shape"/>
+                                                                        </filter>
+                                                                        </defs>
+                                                                    </svg>
+                                                                </span>
+                                                                <span class="cursor-pointer">
+                                                                    <input class="d-none" [id]="'fileuploadIV_'+i+j+n" type="file"
+                                                                        name="file" accept="image/png, image/jpeg"
+                                                                        (click)="question.get('disableRunAI')?.value ? $event.preventDefault() : null"
+                                                                        (change)="question.get('disableRunAI')?.value ? '' : loadImageFromDevice(i,refImgQIdx,$event,-1,'multiReferenceImage',n)">
+                                                                    <label [for]="'fileuploadIV_'+i+j+n" (click)="refImgQIdx=j;">
+                                                                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+                                                                            <g filter="url(#filter0_d_iv_upload)">
+                                                                            <rect x="2" y="1" width="36" height="36" rx="8" fill="white"/>
+                                                                            <rect x="2.5" y="1.5" width="35" height="35" rx="7.5" stroke="#D0D5DD"/>
+                                                                            <path d="M27.5 21.5V24.8333C27.5 25.2754 27.3244 25.6993 27.0118 26.0118C26.6993 26.3244 26.2754 26.5 25.8333 26.5H14.1667C13.7246 26.5 13.3007 26.3244 12.9882 26.0118C12.6756 25.6993 12.5 25.2754 12.5 24.8333V21.5M24.1667 15.6667L20 11.5M20 11.5L15.8333 15.6667M20 11.5V21.5" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                            </g>
+                                                                            <defs>
+                                                                            <filter id="filter0_d_iv_upload" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                                                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                                                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                                                            <feOffset dy="1"/>
+                                                                            <feGaussianBlur stdDeviation="1"/>
+                                                                            <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+                                                                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_iv_upload"/>
+                                                                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_iv_upload" result="shape"/>
+                                                                            </filter>
+                                                                            </defs>
+                                                                        </svg>
+                                                                    </label>
+                                                                </span>
+                                                                <span class="cursor-pointer" (click)="question.get('disableRunAI')?.value ? '' : clearReferenceImage(i,j,-1,n,'multiReferenceImage');">
+                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+                                                                        <g filter="url(#filter0_d_iv_del)">
+                                                                        <rect x="2" y="1" width="36" height="36" rx="8" fill="white"/>
+                                                                        <rect x="2.5" y="1.5" width="35" height="35" rx="7.5" stroke="#D0D5DD"/>
+                                                                        <path d="M12.5 13.9974H14.1667M14.1667 13.9974H27.5M14.1667 13.9974V25.6641C14.1667 26.1061 14.3423 26.53 14.6548 26.8426C14.9674 27.1551 15.3913 27.3307 15.8333 27.3307H24.1667C24.6087 27.3307 25.0326 27.1551 25.3452 26.8426C25.6577 26.53 25.8333 26.1061 25.8333 25.6641V13.9974H14.1667ZM16.6667 13.9974V12.3307C16.6667 11.8887 16.8423 11.4648 17.1548 11.1522C17.4674 10.8397 17.8913 10.6641 18.3333 10.6641H21.6667C22.1087 10.6641 22.5326 10.8397 22.8452 11.1522C23.1577 11.4648 23.3333 11.8887 23.3333 12.3307V13.9974M18.3333 18.1641V23.1641M21.6667 18.1641V23.1641" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                        </g>
+                                                                        <defs>
+                                                                        <filter id="filter0_d_iv_del" x="0" y="0" width="40" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                                                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                                                                        <feOffset dy="1"/>
+                                                                        <feGaussianBlur stdDeviation="1"/>
+                                                                        <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+                                                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_iv_del"/>
+                                                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_iv_del" result="shape"/>
+                                                                        </filter>
+                                                                        </defs>
+                                                                    </svg>
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                        <div class="d-flex mb-3">
+                                                            <div *ngIf="!question.get('disableRunAI')?.value && getAnswerFormGroup_FormControl(i,j,'multiReferenceImage')?.value.length < 5 && !question.get('disableRunAI')?.value"
+                                                                class="col-lg-3 btn add-ref-btn btn-light-primary my-2">
+                                                                <input class="d-none" [id]="'fileuploadrefImageIV'+i+j" type="file"
+                                                                    name="file" accept="image/png, image/jpeg"
+                                                                    (change)="loadImageFromDevice(i,refImgQIdx,$event,-1,'multiReferenceImage')">
+                                                                <label class="pointer" [for]="'fileuploadrefImageIV'+i+j" (click)="refImgQIdx=j;">
+                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                                                        <path d="M10 4.16797V15.8346M4.16669 10.0013H15.8334" stroke="#009BF3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                    </svg>Add Reference Image </label>
+                                                            </div>
+                                                            <div *ngIf="getAnswerFormGroup_FormControl(i,j,'multiReferenceImage')?.value.length >= 5 || question.get('disableRunAI')?.value"
+                                                                class="col-lg-3 btn-light-disbaled btn add-ref-btn my-2 borderCard">
+                                                                <label class="pointer">
+                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                                                        <path d="M10.0013 4.16406V15.8307M4.16797 9.9974H15.8346" stroke="#6BCAFF" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                                    </svg> <span>Add Reference Image</span>
+                                                                </label>
+                                                            </div>
+                                                            <div class="col-lg-4 form-check form-switch mx-2 btn-sec mt-6 text-left align-items-center">
+                                                                <input class="form-check-input mx-0 pointer" type="checkbox" name="toc" value="1"
+                                                                    ngDefaultControl formControlName="allowUploadfromGallery">
+                                                                <label class="form-check-label pointer" for="flexSwitchCheckDefault"></label>
+                                                                Allow upload from gallery
+                                                            </div>
+                                                            <div class="col-lg-2"></div>
+                                                            <div *ngIf="getAnswerFormGroup_FormControl(i,j,'multiReferenceImage')?.value && question.get('answerType')?.value === 'image/video'"
+                                                                [ngClass]="'col-lg-3 d-flex justify-content-center align-items-center mt-2'">
+                                                                <div class="d-flex" *ngIf="userType && userType === 'tango'">
+                                                                    <h3 class="fs16-600 px-12"> Run AI ✨</h3>
+                                                                    <div class="form-check form-switch align-items-center btn-sec ml-5">
+                                                                        <!-- (click)="RunAINew(i,j)" -->
+                                                                        <input class="form-check-input pointer" type="checkbox"
+                                                                            formControlName="runAI" name="toc" value="1" (click)="RunAINew(i,j,-1,$event)">
+                                                                        <label class="form-check-label"
+                                                                            for="flexSwitchCheckDefault"></label>
+                                                                    </div>
+                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16"
+                                                                        height="16" viewBox="0 0 16 16" fill="none"
+                                                                        matTooltip="Enable AI where you want tango to identify, track and alert instances."
+                                                                        matTooltipPosition="above"
+                                                                        matTooltipClass="custom-test">
+                                                                        <g clip-path="url(#clip0_iv_runai_info)">
+                                                                            <path
+                                                                                d="M7.99967 10.6654V7.9987M7.99967 5.33203H8.00634M14.6663 7.9987C14.6663 11.6806 11.6816 14.6654 7.99967 14.6654C4.31778 14.6654 1.33301 11.6806 1.33301 7.9987C1.33301 4.3168 4.31778 1.33203 7.99967 1.33203C11.6816 1.33203 14.6663 4.3168 14.6663 7.9987Z"
+                                                                                stroke="#98A2B3" stroke-width="2"
+                                                                                stroke-linecap="round"
+                                                                                stroke-linejoin="round" />
+                                                                        </g>
+                                                                        <defs>
+                                                                            <clipPath id="clip0_iv_runai_info">
+                                                                                <rect width="16" height="16" fill="white" />
+                                                                            </clipPath>
+                                                                        </defs>
+                                                                    </svg>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <ng-container *ngIf="question.get('compliance')?.value">
+                                                            <span class="limitComplianceText">Compliance score is applicable only for image outputs, not for video.</span>
+                                                            <div class="row mt-3 dropText">
+                                                                <div class="mt-3 col-md-6">
+                                                                    If the response image is matched, then the score will be
+                                                                </div>
+                                                                <div class="col-md-3">
+                                                                    <select class="w-150px ms-10" formControlName="matchedCount">
+                                                                        <option *ngFor="let value of dropdownValue" [value]="value">{{value}}</option>
+                                                                    </select>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row mt-3 dropText">
+                                                                <div class="mt-3 col-md-6">
+                                                                    If the response image is not matched, then the score will be
+                                                                </div>
+                                                                <div class="col-md-3">
+                                                                    <select class="w-150px ms-10" formControlName="notMatchedCount">
+                                                                        <option *ngFor="let value of dropdownValue" [value]="value">{{value}}</option>
+                                                                    </select>
+                                                                </div>
+                                                            </div>
+                                                        </ng-container>
+                                                        <div
+                                                            class=" col-lg-4 form-check form-switch text-left align-items-center btn-sec mt-5" *ngIf="userType && userType === 'tango'">
+                                                            <input class="form-check-input mx-0 pointer" type="checkbox"
+                                                                name="toc" value="1" ngDefaultControl
+                                                                formControlName="limit" (change)="updateLimit($event,i,j)">
+                                                            <label class="form-check-label pointer"
+                                                                for="flexSwitchCheckDefault">Set Limits </label>
+                                                            <svg ngbTooltip="Uploads are allowed as per the configured image/video limits" width="16" height="16" viewBox="0 0 16 16" fill="none" matTooltip="Enable AI where you want tango to identify, track and alert instances." matTooltipPosition="above" matTooltipClass="custom-test" ng-reflect-ng-class=""><g clip-path="url(#clip0_2301_100038)"><path d="M7.99967 10.6654V7.9987M7.99967 5.33203H8.00634M14.6663 7.9987C14.6663 11.6806 11.6816 14.6654 7.99967 14.6654C4.31778 14.6654 1.33301 11.6806 1.33301 7.9987C1.33301 4.3168 4.31778 1.33203 7.99967 1.33203C11.6816 1.33203 14.6663 4.3168 14.6663 7.9987Z" stroke="#98A2B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g><defs><clipPath id="clip0_2301_100038"><rect width="16" height="16" fill="white"></rect></clipPath></defs></svg>
+                                                            
+                                                        </div>
+                                                        <div
+                                                            class=" col-lg-12 form-check form-switch text-left align-items-center btn-sec mt-5" *ngIf="getAnswerFormGroup_FormControl(i,j,'limit')?.value">
+                                                            <div class="d-flex">
+                                                                <div class="me-3 mt-3">Attach</div>
+                                                                <div class="w-70px me-3">
+                                                                    <select formControlName="imageLimit">
+                                                                        <option value="1">1</option>
+                                                                        <option value="2">2</option>
+                                                                        <option value="3">3</option>
+                                                                        <option value="4">4</option>
+                                                                        <option value="5">5</option>
+                                                                    </select>
+                                                                </div>
+                                                                <div class="me-3 mt-3">images and</div>
+                                                                <div class="w-70px me-3">
+                                                                    <select formControlName="videoLimit" placeholder="-">
+                                                                        <option value="1">1</option>
+                                                                        <option value="2">2</option>
+                                                                        <option value="3">3</option>
+                                                                        <option value="4">4</option>
+                                                                        <option value="5">5</option>
+                                                                    </select>
+                                                                </div>
+                                                                <div class="me-3 mt-3">
+                                                                    Videos.
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="limitTooltipText mt-3" *ngIf="getAnswerFormGroup_FormControl(i,j,'limit')?.value && (getAnswerFormGroup_FormControl(i,j,'imageLimit')?.value || getAnswerFormGroup_FormControl(i,j,'videoLimit')?.value)">
+                                                            <svg  width="16" height="16" viewBox="0 0 16 16" fill="none" matTooltip="Enable AI where you want tango to identify, track and alert instances." matTooltipPosition="above" matTooltipClass="custom-test" ng-reflect-ng-class=""><g clip-path="url(#clip0_2301_100038)"><path d="M7.99967 10.6654V7.9987M7.99967 5.33203H8.00634M14.6663 7.9987C14.6663 11.6806 11.6816 14.6654 7.99967 14.6654C4.31778 14.6654 1.33301 11.6806 1.33301 7.9987C1.33301 4.3168 4.31778 1.33203 7.99967 1.33203C11.6816 1.33203 14.6663 4.3168 14.6663 7.9987Z" stroke="#98A2B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g><defs><clipPath id="clip0_2301_100038"><rect width="16" height="16" fill="white"></rect></clipPath></defs></svg>
+                                                            Checklist fillers must capture/upload {{ getAnswerFormGroup_FormControl(i,j,'imageLimit')?.value ? getAnswerFormGroup_FormControl(i,j,'imageLimit')?.value + ' image' + (getAnswerFormGroup_FormControl(i,j,'imageLimit')?.value > 1 ? 's' : '') : '' }} {{ getAnswerFormGroup_FormControl(i,j,'videoLimit')?.value ? ' and ' + getAnswerFormGroup_FormControl(i,j,'videoLimit')?.value + ' video' + (getAnswerFormGroup_FormControl(i,j,'videoLimit')?.value > 1 ? 's' : '') : '' }}
+                                                        </div>
+                                                    </ng-container>
+                                                </ng-container>
+    
+                                                <div class="d-flex justify-content-end py-2">
+                                                    <div class="pt-1" >
+                                                        <svg (click)="question.get('disableRunAI')?.value ? '' : cloneQuestion(i,j)"
+                                                            xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                            matTooltip="Duplicate" matTooltipPosition="above"
+                                                            matTooltipClass="custom-test" viewBox="0 0 20 20"
+                                                            fill="none">
+                                                            <g clip-path="url(#clip0_3385_10578)">
+                                                                <path
+                                                                    d="M4.16663 12.4993H3.33329C2.89127 12.4993 2.46734 12.3238 2.15478 12.0112C1.84222 11.6986 1.66663 11.2747 1.66663 10.8327V3.33268C1.66663 2.89065 1.84222 2.46673 2.15478 2.15417C2.46734 1.84161 2.89127 1.66602 3.33329 1.66602H10.8333C11.2753 1.66602 11.6992 1.84161 12.0118 2.15417C12.3244 2.46673 12.5 2.89065 12.5 3.33268V4.16602M9.16663 7.49935H16.6666C17.5871 7.49935 18.3333 8.24554 18.3333 9.16602V16.666C18.3333 17.5865 17.5871 18.3327 16.6666 18.3327H9.16663C8.24615 18.3327 7.49996 17.5865 7.49996 16.666V9.16602C7.49996 8.24554 8.24615 7.49935 9.16663 7.49935Z"
+                                                                    [attr.stroke]="question.get('disableRunAI')?.value ? '#D0D5DD' : '#667085'" stroke-width="1.66667"
+                                                                    stroke-linecap="round" stroke-linejoin="round" />
+                                                            </g>
+                                                            <defs>
+                                                                <clipPath id="clip0_3385_10578">
+                                                                    <rect width="20" height="20" fill="white" />
+                                                                </clipPath>
+                                                            </defs>
+                                                        </svg>
+                                                        <svg (click)="question.get('disableRunAI')?.value ? '' : deleteQuestion(i,j)"
+                                                            style="margin-left: 24px !important;"
+                                                            xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                            matTooltip="Delete question" matTooltipPosition="above"
+                                                            matTooltipClass="custom-test" viewBox="0 0 20 20"
+                                                            fill="none" [ngbTooltip]="question.get('disableRunAI')?.value ? 'The delete option is disabled as the runAI is enabled' : ''">
+                                                            <path
+                                                                d="M2.5 4.99935H4.16667M4.16667 4.99935H17.5M4.16667 4.99935V16.666C4.16667 17.108 4.34226 17.532 4.65482 17.8445C4.96738 18.1571 5.39131 18.3327 5.83333 18.3327H14.1667C14.6087 18.3327 15.0326 18.1571 15.3452 17.8445C15.6577 17.532 15.8333 17.108 15.8333 16.666V4.99935H4.16667ZM6.66667 4.99935V3.33268C6.66667 2.89065 6.84226 2.46673 7.15482 2.15417C7.46738 1.84161 7.89131 1.66602 8.33333 1.66602H11.6667C12.1087 1.66602 12.5326 1.84161 12.8452 2.15417C13.1577 2.46673 13.3333 2.89065 13.3333 3.33268V4.99935M8.33333 9.16602V14.166M11.6667 9.16602V14.166"
+                                                                [attr.stroke]="question.get('disableRunAI')?.value ? '#D0D5DD' : '#667085'" stroke-width="1.66667"
+                                                                stroke-linecap="round" stroke-linejoin="round" />
+                                                        </svg>
+                                                    </div>
+                                                </div>
+                                            </ng-container>
+                                        </div>
+                                    </ng-container>
+                                </div>
+                            </ng-container>
+                        </div>
+                    </ng-container>
+                    <div>
+                        <div class="row mx-0">
+                            <div class="col-lg-4 px-0" *ngIf="ChecklistForm.get('sections')">
+                                <div class="checklist-card py-7 text-center">
+                                    <div (click)="bulkUploadQuestion()" class="mt-2 btn-sec pointer">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                            viewBox="0 0 20 20" fill="none">
+                                            <path d="M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333" stroke="#344054"
+                                                stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg>Bulk Upload Questions</div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4 pl-5" *ngIf="ChecklistForm.get('sections')">
+                                <div class="checklist-card py-7 text-center">
+                                    <div (click)="addNewQuestion(sectionIndex)" class="mt-2 btn-sec pointer">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                            viewBox="0 0 20 20" fill="none">
+                                            <path d="M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333" stroke="#344054"
+                                                stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg> Add New Question</div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4 pl-5">
+                                <div class="checklist-card py-7 text-center">
+                                    <div (click)="addNewSection()" class="mt-2 px-0 btn-sec pointer"> <svg
+                                            xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                            viewBox="0 0 20 20" fill="none">
+                                            <path d="M9.99999 4.16602V15.8327M4.16666 9.99935H15.8333" stroke="#344054"
+                                                stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg> Add New Section</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>