const { css } = require("jquery");

// Initialize an array to store the expanded section data-ids
const expandedSections = [];
function navpane() {

    // Sample JSON data
    let isHighlighted = false;
    let currentlyHighlightedElement = null; // Track the currently highlighted element
    // console.log('navpane called');
    var jsonData = JSON.parse(localStorage.getItem('JSON_FOR_NAV'));
    var editPage = localStorage.getItem('EditNavExpend');
    // console.log(localStorage.getItem('JSON_FOR_NAV'));
    // var arr = JSON.parse( localStorage.getItem('memoriesdata') );
    // var jsonData2 = JSON.parse(jsonData);
    // console.log(typeof jsonData);
    // console.log('jsonData', jsonData);

   

    function removeParagraphTags(html) {
        // return html.replace(/<p>/g, '').replace(/<\/p>/g, '');

        var html = html.replace(/<[^>]*>/g, '');
        // if (html.length >= 30) {
        //     html=html.slice(0, 25) + '...';
        // }
        return html

    }
    
    //function for remove <img> tag
    function removeTagsAndTruncate(html, maxLength) {

        const doc = new DOMParser().parseFromString(html, 'text/html');

        // Remove <p> tags
        const paragraphs = doc.getElementsByTagName('p');
        for (let i = paragraphs.length - 1; i >= 0; i--) {
            const paragraph = paragraphs[i];
            paragraph.parentNode.replaceChild(document.createTextNode(paragraph.textContent), paragraph);
        }
    
        // Remove <img> tags
        const images = doc.getElementsByTagName('img');
        for (let i = images.length - 1; i >= 0; i--) {
            const image = images[i];
            image.parentNode.removeChild(image);
        }
    
        // Get the text content
        const textContent = doc.body.textContent;
    
        // Truncate the content
        var truncatedContent = "";
        if(textContent.length > 20)
        {
            truncatedContent = textContent.substring(0, maxLength) + '...';
        }
        else{
            truncatedContent = textContent;
        }
    
        return truncatedContent;
    }

    function createTreeWithHeading(data, container) {
        const treeTitle = removeParagraphTags(data.question_paper_title);
        const heading = document.createElement('a');
        heading.style.color = '#1D3557';
        // const truncatedTitle = treeTitle.length > 20 ? treeTitle.substring(0, 20) + '.....' : treeTitle;
        const truncatedTitle = treeTitle.length > 30 ? treeTitle + '..' : treeTitle;
        heading.innerHTML = truncatedTitle;
        container.appendChild(heading);
        createTree(data, container);
    }
    
    function createTree(data, container) {
            data.sections.forEach(section => {
            var sectionDiv = document.createElement('div');
            const sectionId = section.section_id;;
            sectionDiv.setAttribute('data-id', sectionId);
            sectionDiv.className = 'section main-heading';

        //   console.log(section);
                // console.log(typeof sectionDiv);
               var a= sectionDiv.outerHTML
            var splitedSectionId = sectionId.split("_")[3];
            var SectionBox_RawID = 'SectionBox_'+splitedSectionId;
            var SectionBoxID = document.getElementById(SectionBox_RawID)
            // console.log(SectionBoxID);
            
               
            // Check if the section should be initially expanded based on expandedSections
            if (expandedSections.includes(sectionId)) {
                sectionDiv.classList.remove('collapsed');
                
            } else {
                sectionDiv.classList.add('collapsed');
            }
            
            if(editPage == 1 || editPage == null)
            {
               sectionDiv.classList.add('collapsed');
            }

            container.appendChild(sectionDiv);
    
            const sectionArrow = document.createElement('span');
            sectionArrow.style.cursor = 'pointer';
            sectionDiv.appendChild(sectionArrow);

            const contentDiv = document.createElement('div');
            contentDiv.className = 'content';

            // Update the arrow icon based on the section's initial state
            if (sectionDiv.classList.contains('collapsed')) {
                sectionArrow.className = 'arrow-right';
            } else {
                sectionArrow.className = 'arrow-down';
                contentDiv.classList.add('visible');
            }

            sectionArrow.addEventListener('click', () => {
                
                contentDiv.classList.toggle('visible');
                sectionDiv.classList.toggle('collapsed');
    
                // Check if the section is expanded or collapsed
                if (sectionDiv.classList.contains('collapsed')) {
                    const index = expandedSections.indexOf(sectionId);
                    if (index !== -1) {
                        expandedSections.splice(index, 1);
                    }
                    sectionArrow.classList.remove('arrow-down');
                    sectionArrow.classList.add('arrow-right');
                } else {
                    expandedSections.push(sectionId);
                    sectionArrow.classList.remove('arrow-right');
                    sectionArrow.classList.add('arrow-down');
                }
            });

            if(editPage == 1 || editPage == null)
             {
                sectionDiv.classList.add('collapsed');

                contentDiv.classList.toggle('visible');
                sectionDiv.classList.toggle('collapsed');
    
                // Check if the section is expanded or collapsed
                if (sectionDiv.classList.contains('collapsed')) {
                    const index = expandedSections.indexOf(sectionId);
                    if (index !== -1) {
                        expandedSections.splice(index, 1);
                    }
                    sectionArrow.classList.remove('arrow-down');
                    sectionArrow.classList.add('arrow-right');
                } else {
                    expandedSections.push(sectionId);
                    sectionArrow.classList.remove('arrow-right');
                    sectionArrow.classList.add('arrow-down');
                }

             }  

            //  s {
            //     text-decoration: none !important;
            //     color: inherit;
            //     cursor: auto;
            // }
            var sectionLink = document.createElement('a');
            sectionLink.href = '#' + section.section_id;
            sectionLink.style.textOverflow ='ellipsis';
            sectionLink.style.whiteSpace= 'nowrap';
            sectionLink.style.overflow ='hidden';
            sectionLink.style.display ='-webkit-inline-box';
            sectionLink.style.maxWidth = '190px';
            sectionLink.style.fontWeight = '100';

                        // Attach the scroll function to the hyperlinks
            sectionLink.addEventListener('click', function(e) {
                e.preventDefault(); // Prevent the default behavior of the link
                const targetId = this.getAttribute('href').substring(1); // Get the target element's ID
                scrollToElement(targetId);
            });
            

            sectionLink.style.color = '#000000';

            //click event listener to toggle highlighting and boldness if click the Section
            // sectionLink.addEventListener('click', function () {
            //     if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
            //         currentlyHighlightedElement.style.fontWeight = 'normal';
            //     }
    
            //     if (currentlyHighlightedElement === sectionLink) {
            //         sectionLink.style.fontWeight = sectionLink.style.fontWeight === '400' ? 'normal' : '400';
            //     } else {
            //         sectionLink.style.fontWeight = '400';
            //         currentlyHighlightedElement = sectionLink;
            //     }
            // });

            sectionLink.addEventListener('mouseover', function () {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
                    currentlyHighlightedElement.style.fontWeight = '100';
                }
    
                sectionDiv.style.backgroundColor ='#fcdddd';
                sectionDiv.style.border = '5px solid #fcdddd';
                sectionDiv.style.color ='black';
                sectionDiv.style.marginLeft ='-67px';
                sectionDiv.style.paddingLeft='67px';
                sectionDiv.style.marginRight= '-75px'
                currentlyHighlightedElement = sectionLink;
               
            });

            sectionLink.addEventListener('mouseout', function () {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
                    currentlyHighlightedElement.style.fontWeight = '100';
                }
                    sectionDiv.style.backgroundColor='white'
                    sectionDiv.style.border='white'
                    sectionLink.style.fontWeight = '100';

                    
            });
            // SectionBoxID.addEventListener('click', function() {
            //     if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
            //         currentlyHighlightedElement.style.fontWeight = 'normal';
            //     }
    
            //     if (currentlyHighlightedElement === sectionLink) {
            //         sectionLink.style.fontWeight = sectionLink.style.fontWeight === '400' ? 'normal' : '400';
            //     } else {
            //         sectionLink.style.fontWeight = '400';
            //         currentlyHighlightedElement = sectionLink;
            //     }
            // });
    
            SectionBoxID.addEventListener('mouseover', function() {
                    if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
                        currentlyHighlightedElement.style.fontWeight = '100';
                    }

                    sectionDiv.style.backgroundColor ='#fcdddd';
                    sectionDiv.style.border = '5px solid #fcdddd';
                    sectionDiv.style.borderRadius = '5px';
                    sectionDiv.style.color ='black';
                    sectionDiv.style.marginLeft ='-67px';
                    sectionDiv.style.paddingLeft='67px';
                    sectionDiv.style.marginRight= '-75px'
                    sectionLink.style.fontWeight = '100';

                        currentlyHighlightedElement = sectionLink;
                        // sectionDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });

                });

                SectionBoxID.addEventListener('mouseout', function() {
                    if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
                        currentlyHighlightedElement.style.fontWeight = '100';
                    }
                    sectionDiv.style.backgroundColor='white'
                    sectionDiv.style.border='white'
                    sectionLink.style.fontWeight = '100';       
                    // sectionDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
     
                });


            if (section.section_title == null || typeof section.section_title === 'undefined') {
                section.section_title = "sampletitle";
            }
    
            sectionLink.innerHTML = removeParagraphTags(section.section_title);
            sectionDiv.appendChild(sectionLink);
    
            section.questions.forEach(question => {
                createTreeNode(question, contentDiv);
            });
    
            container.appendChild(contentDiv);
        });
    }
    
    function createTreeNode(nodeData, parentNode) {
        const nodeDiv = document.createElement('div');
        nodeDiv.className = "navContain";
        // nodeDiv.id = nodeData.textQuestion_Id || nodeData.choice_question_id;
        const nodeDataId = nodeData.question_Id
        const nodeDataType = nodeData.question_type
        // console.log('nodeDataType:',nodeDataType);
        parentNode.appendChild(nodeDiv);


        var bulletPoint = "";
        if (nodeData.question) {
            
            var RawID = "";
            if(nodeDataType == 'text')
            {
                bulletPoint = document.createElement('img');
                bulletPoint.src = 'assets/images/navtext.svg';
                bulletPoint.style.marginRight = '5px';
                bulletPoint.style.width = '13px';
                bulletPoint.style.fontWeight = 'bold';
                bulletPoint.style.color = '#00aaff';
                // bulletPoint.textContent = '\u2022';
                bulletPoint.setAttribute("title", "Descriptive");
                nodeDiv.appendChild(bulletPoint);
                
                var splitedId = nodeDataId.split("_")[1];
                RawID = 'removeAndCloneTextQuestion_'+splitedId;


            }else if(nodeDataType == 'group')
            {
                bulletPoint = document.createElement('img');
                bulletPoint.src = 'assets/images/navchoice.svg';
                bulletPoint.style.marginRight = '5px';
                bulletPoint.style.width = '13px';
                bulletPoint.style.fontWeight = 'bold';
                bulletPoint.style.color = '#00aaff';
                bulletPoint.setAttribute("title", "MCQ");
                // bulletPoint.textContent = '\u2022';
                nodeDiv.appendChild(bulletPoint);

                var splitedId = nodeDataId.split("_")[1];
                RawID = 'removeAndCloneQroupQuestion_'+splitedId;
    
            }
            
            var QuestionID = document.getElementById(RawID)
            // console.log(QuestionID)
           
            const questionLink = document.createElement('a');
            questionLink.href = '#' + nodeDataId;
            // const questionlinkDiv =document.querySelectorAll('.navContain')
            // console.log(questionlinkDiv);
            // Attach the scroll function to the hyperlinks
            questionLink.addEventListener('click', function(e) {
                e.preventDefault(); // Prevent the default behavior of the link
                const targetId = this.getAttribute('href').substring(1); // Get the target element's ID
                scrollToElement(targetId);
            });
            questionLink.style.color = '#000000';
            questionLink.style.fontSize = '13px';
            questionLink.style.textOverflow ='ellipsis';
            questionLink.style.whiteSpace= 'nowrap';
            questionLink.style.overflow ='hidden';
            questionLink.style.display ='-webkit-inline-box';
            questionLink.style.maxWidth = '190px';
            questionLink.style.fontWeight = '100';

            if(nodeDataType == 'text')
            {
                questionLink.setAttribute("title", "Descriptive");
            }else if(nodeDataType == 'text'){
                questionLink.setAttribute("title", "MCQ");

            }
              
            // QuestionID.addEventListener('click', function () {
            //     if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
            //         currentlyHighlightedElement.style.fontWeight = 'normal';
            //     }
    
            //     if (currentlyHighlightedElement === questionLink) {
            //         questionLink.style.fontWeight = questionLink.style.fontWeight === '400' ? 'normal' : '400';
            //         questionLink.style.backgroundColor = 'white';
            //         currentlyHighlightedElement =null
            //     } else {
            //         questionLink.style.fontWeight = '400';
            //         questionLink.style.backgroundColor = '#1D3557';
            //         QuestionID.style.fontWeight = 'normal';
            //         currentlyHighlightedElement = questionLink;
            //     }
            // });

            QuestionID.addEventListener('mouseover', function () {
                // console.log(QuestionID);
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
                    currentlyHighlightedElement.style.fontWeight = '100';
                }
                // questionLink.style.fontWeight = '500';
                // nodeDiv.style.fontWeight = '500';
                nodeDiv.style.backgroundColor ='#fcdddd';
                nodeDiv.style.border = '5px solid #fcdddd';
                nodeDiv.style.borderRadius = '5px';
                nodeDiv.style.color ='black';
                nodeDiv.style.marginLeft ='-67px';
                nodeDiv.style.paddingLeft='67px';
                nodeDiv.style.marginRight= '-75px'
                    QuestionID.style.fontWeight = '100';
                    currentlyHighlightedElement = nodeDiv;
                    // nodeDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    var a=nodeDiv.querySelector('a').href
                    var aa=a.split('#')[1];
                    // scrollToElement(aa)

            });

            QuestionID.addEventListener('mouseout', function () {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
                    currentlyHighlightedElement.style.fontWeight = 'normal';
                }
    
                // questionLink.style.fontWeight = questionLink.style.fontWeight === '400' ? 'normal' : '400';
                // questionLink.style.backgroundColor = 'white';
                // questionLink.style.border = 'none';
                // questionLink.style.borderRadius = '5px';
                questionLink.style.color = ' black';

                // nodeDiv.style.fontWeight = questionLink.style.fontWeight === '400' ? 'normal' : '400';
                nodeDiv.style.backgroundColor = 'white';
                nodeDiv.style.border = 'none';
                nodeDiv.style.borderRadius = '5px';
                nodeDiv.style.color = ' black';
                nodeDiv.style.marginLeft ='0px';
                nodeDiv.style.paddingLeft='0px';
                    currentlyHighlightedElement =null
                    // nodeDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    
                    var a=nodeDiv.querySelector('a').href
                    var aa=a.split('#')[1];
                    // scrollToElement(aa)

                });

            // questionLink.addEventListener('click', function () {
            //     if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
            //         currentlyHighlightedElement.style.fontWeight = 'normal';
            //     }
    
            //     if (currentlyHighlightedElement === questionLink) {
            //         questionLink.style.fontWeight = questionLink.style.fontWeight === '400' ? 'normal' : '400';
            //         questionLink.style.backgroundColor = 'white';
            //         currentlyHighlightedElement =null
            //     } else {
            //         questionLink.style.fontWeight = '400';
            //         questionLink.style.backgroundColor = '#1D3557';
            //         currentlyHighlightedElement = questionLink;
            //     }
            // });
    
            questionLink.addEventListener('mouseover', function () {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
                    currentlyHighlightedElement.style.fontWeight = '100';
                }
    
                // questionLink.style.fontWeight = '500';
                // questionLink.style.color = ' rgb(255 255 255)';
                // nodeDiv.style.fontWeight = '500';
                nodeDiv.style.backgroundColor = '#fcdddd';
                nodeDiv.style.border = '5px solid #fcdddd';
                nodeDiv.style.borderRadius = '5px';
                // nodeDiv.style.color = ' rgb(255 255 255)';
                nodeDiv.style.color ='black';
                nodeDiv.style.marginLeft ='-67px';
                nodeDiv.style.paddingLeft='67px';
                nodeDiv.style.marginRight= '-75px';
                nodeDiv.style.borderLeftWidth= '-75px';
                    currentlyHighlightedElement = questionLink;
            });
            questionLink.addEventListener('mouseout', function () {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
                    currentlyHighlightedElement.style.fontWeight = '100';
                }

                // questionLink.style.fontWeight = questionLink.style.fontWeight === '400' ? 'normal' : '400';
                questionLink.style.color = ' black';
                // nodeDiv.style.fontWeight = questionLink.style.fontWeight === '400' ? 'normal' : '400';
                nodeDiv.style.backgroundColor = 'white';
                nodeDiv.style.border = 'none';
                nodeDiv.style.borderRadius = '5px';
                nodeDiv.style.color = ' black';
                nodeDiv.style.marginLeft ='0px';
                nodeDiv.style.paddingLeft='0px';
                    currentlyHighlightedElement =null
            });



            // if (nodeData.question.length > 20) {
            //     // questionLink.innerHTML = removeParagraphTags(nodeData.question.substring(0, 20) + '...');
            //     questionLink.innerHTML = removeParagraphTags(nodeData.question);

            // } else {
            //     questionLink.innerHTML = removeParagraphTags(nodeData.question);
            // }
   
            
                questionLink.innerHTML = removeTagsAndTruncate(nodeData.question, 20);
           

            // console.log('questionLink : ', questionLink)

    
            nodeDiv.appendChild(questionLink);
        } else if (nodeData.group_title) {
            const groupTitleDiv = document.createElement('div');
            const groupTitleId = nodeData.question_group_id;
            groupTitleDiv.setAttribute('data-id', groupTitleId);
            groupTitleDiv.className = 'question-group';
            
            // console.log(groupTitleId);

            var splitedGroupId = groupTitleId.split("_")[3];
            var SplitedGroupRawID = 'QuestionGroupButtons_'+splitedGroupId;
            var GroupBoxID = document.getElementById(SplitedGroupRawID);
            // console.log(GroupBoxID);

    
            // Check if the group should be initially expanded based on expandedSections
            if (expandedSections.includes(groupTitleId)) {
                groupTitleDiv.classList.remove('collapsed');
            } else {
                groupTitleDiv.classList.add('collapsed');
            }

            if(editPage == 1 || editPage == null){

                groupTitleDiv.classList.add('collapsed');

            }
    
            parentNode.appendChild(groupTitleDiv);
    
            const groupTitleArrow = document.createElement('span');
            groupTitleArrow.className = 'arrow-right';
            
            groupTitleArrow.style.cursor = 'pointer';
            groupTitleDiv.appendChild(groupTitleArrow);

            const groupQuestionsDiv = document.createElement('div');
            groupQuestionsDiv.className = 'content';

            // Update the arrow icon based on the section's initial state
            if (groupTitleDiv.classList.contains('collapsed')) {
                groupTitleArrow.className = 'arrow-right';
            } else {
                groupTitleArrow.className = 'arrow-down';
                groupQuestionsDiv.classList.add('visible');
            }
    
            groupTitleArrow.addEventListener('click', () => {
                groupQuestionsDiv.classList.toggle('visible');
                groupTitleDiv.classList.toggle('collapsed');
    
                // Check if the group is expanded or collapsed
                if (groupTitleDiv.classList.contains('collapsed')) {
                    const index = expandedSections.indexOf(groupTitleId);
                    if (index !== -1) {
                        expandedSections.splice(index, 1);
                    }
                    groupTitleArrow.classList.remove('arrow-down');
                    groupTitleArrow.classList.add('arrow-right');
                } else {
                    expandedSections.push(groupTitleId);
                    groupTitleArrow.classList.remove('arrow-right');
                    groupTitleArrow.classList.add('arrow-down');
                }
            });


            if(editPage == 1 || editPage == null){
                
                groupQuestionsDiv.classList.toggle('visible');
                groupTitleDiv.classList.toggle('collapsed');
    
                // Check if the group is expanded or collapsed
                if (groupTitleDiv.classList.contains('collapsed')) {
                    const index = expandedSections.indexOf(groupTitleId);
                    if (index !== -1) {
                        expandedSections.splice(index, 1);
                    }
                    groupTitleArrow.classList.remove('arrow-down');
                    groupTitleArrow.classList.add('arrow-right');
                } else {
                    expandedSections.push(groupTitleId);
                    groupTitleArrow.classList.remove('arrow-right');
                    groupTitleArrow.classList.add('arrow-down');
                }

            }
    
            const groupQuestionLink = document.createElement('a');
            groupQuestionLink.href = '#' + groupTitleId;
             
            // Attach the scroll function to the hyperlinks
            groupQuestionLink.addEventListener('click', function(e) {
                e.preventDefault(); // Prevent the default behavior of the link
                const targetId = this.getAttribute('href').substring(1); // Get the target element's ID
                scrollToElement(targetId);
            });
            groupQuestionLink.style.color = '#000000';
            let currentlyHighlightedElement = null;

            // groupQuestionLink.addEventListener('click', () => {
            //   if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
            //     currentlyHighlightedElement.style.fontWeight = 'normal';
            //     currentlyHighlightedElement.style.border = 'none';
            //     currentlyHighlightedElement.style.backgroundColor = 'white';
            //     currentlyHighlightedElement.style.borderWidth = 'none';
            //   }
            
            //   if (currentlyHighlightedElement === groupQuestionLink) {
            //     groupQuestionLink.style.fontWeight = 'normal';
            //     groupQuestionLink.style.border = 'none';
            //     groupQuestionLink.style.backgroundColor = 'white';
            //     groupQuestionLink.style.borderWidth = 'none';
            //     groupQuestionLink.style.color = 'black';
            //     currentlyHighlightedElement = null;
            //   } else {
            //     groupQuestionLink.style.fontWeight = '400';
            //       groupQuestionLink.style.border = '5px solid #1D3557';
            //        groupQuestionLink.style.borderRadius = '5px';
            //     //    groupQuestionLink.style.borderWidth= '10px'
            //        groupQuestionLink.style.backgroundColor = '#1D3557';
            //        groupQuestionLink.style.color=' rgb(255 255 255)'
            //       currentlyHighlightedElement = groupQuestionLink;
            //   }
            // });
            
            groupQuestionLink.addEventListener('mouseover', () => {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
                  currentlyHighlightedElement.style.fontWeight = '100';
                  currentlyHighlightedElement.style.border = 'none';
                  currentlyHighlightedElement.style.backgroundColor = 'white';
                  currentlyHighlightedElement.style.borderWidth = 'none';
                }
              
                //   groupQuestionLink.style.fontWeight = '400';
                //   groupQuestionLink.style.border = '5px solid #1D3557';
                //    groupQuestionLink.style.borderRadius = '5px';
                // //    groupQuestionLink.style.borderWidth= '10px'
                //    groupQuestionLink.style.backgroundColor = '#1D3557';
                //    groupQuestionLink.style.color=' rgb(255 255 255)';
                groupQuestionLink.style.color= 'black';
                groupTitleDiv.style.color='black';
                groupTitleDiv.style.fontWeight = '100';
                groupTitleDiv.style.border = '5px solid #fcdddd';
                groupTitleDiv.style.borderRadius = '5px';
              groupTitleDiv.style.backgroundColor = '#fcdddd';
              groupTitleDiv.style.marginLeft ='-67px';
              groupTitleDiv.style.paddingLeft='67px';
              groupTitleDiv.style.marginRight= '-75px';
              groupTitleDiv.style.borderLeftWidth= '-75px';

                  currentlyHighlightedElement = groupQuestionLink;

              });

              groupQuestionLink.addEventListener('mouseout', () => {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
                  currentlyHighlightedElement.style.fontWeight = 'normal';
                  currentlyHighlightedElement.style.border = 'none';
                  currentlyHighlightedElement.style.backgroundColor = 'white';
                  currentlyHighlightedElement.style.borderWidth = 'none';
                }
              
                //   groupQuestionLink.style.fontWeight = 'normal';
                //   groupQuestionLink.style.border = 'none';
                //   groupQuestionLink.style.backgroundColor = 'white';
                //   groupQuestionLink.style.borderWidth = 'none';
                  groupQuestionLink.style.color = 'black';
                //   currentlyHighlightedElement = null;
                
                groupTitleDiv.style.fontWeight = 'normal';
                groupTitleDiv.style.border = 'none';
                groupTitleDiv.style.backgroundColor = 'white';
                groupTitleDiv.style.borderWidth = 'none';
                groupTitleDiv.style.color = 'black';
                groupTitleDiv.style.marginLeft ='0px';
                groupTitleDiv.style.paddingLeft='0px';
                  currentlyHighlightedElement = null;
              });

            // GroupBoxID.addEventListener('click', function () {
                
            //     if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
            //         currentlyHighlightedElement.style.fontWeight = 'normal';
            //         currentlyHighlightedElement.style.border = 'none';
            //         currentlyHighlightedElement.style.backgroundColor = 'white';
            //         currentlyHighlightedElement.style.borderWidth = 'none';
            //     }
    
            //     if (currentlyHighlightedElement === groupQuestionLink) {
            //         groupQuestionLink.style.fontWeight = 'normal';
            //     groupQuestionLink.style.border = 'none';
            //     groupQuestionLink.style.backgroundColor = 'white';
            //     groupQuestionLink.style.borderWidth = 'none';
            //     groupQuestionLink.style.borderRadius = '0px';
            //     groupQuestionLink.style.color = 'black';
            //     currentlyHighlightedElement = null;
            //     } else {
            //         groupQuestionLink.style.fontWeight = '400';
            //         groupQuestionLink.style.border = '5px solid #1D3557';
            //         groupQuestionLink.style.backgroundColor = '#1D3557';
            //         groupQuestionLink.style.borderWidth= '10px'
            //         // groupQuestionLink.style.borderWidth = '5px';
            //         groupQuestionLink.style.borderRadius = '5px';
            //         groupQuestionLink.style.color = 'rgb(255 255 255)';
            //         GroupBoxID.style.fontWeight = 'normal';
            //         currentlyHighlightedElement = groupQuestionLink;
            //     }
            // });


            GroupBoxID.addEventListener('mouseout', function () {
                
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
                    currentlyHighlightedElement.style.fontWeight = 'normal';
                    currentlyHighlightedElement.style.border = 'none';
                    currentlyHighlightedElement.style.backgroundColor = 'white';
                    currentlyHighlightedElement.style.borderWidth = 'none';
                }

                groupQuestionLink.style.color = 'black';

                groupTitleDiv.style.fontWeight = 'normal';
                groupTitleDiv.style.border = 'none';
                groupTitleDiv.style.backgroundColor = 'white';
                groupTitleDiv.style.borderWidth = 'none';
                groupTitleDiv.style.color = 'black';
                groupTitleDiv.style.marginLeft ='0px';
                groupTitleDiv.style.paddingLeft='0px';
                currentlyHighlightedElement = null;
                // groupTitleDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });

            });

            GroupBoxID.addEventListener('mouseover', function () {
                
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
                    currentlyHighlightedElement.style.fontWeight = 'normal';
                    currentlyHighlightedElement.style.border = 'none';
                    currentlyHighlightedElement.style.backgroundColor = 'white';
                    currentlyHighlightedElement.style.borderWidth = 'none';
                }


                groupTitleDiv.style.fontWeight = '400';
                groupTitleDiv.style.border = '5px solid #fcdddd';
                groupTitleDiv.style.borderRadius = '5px';
              groupTitleDiv.style.backgroundColor = '#fcdddd';
            groupQuestionLink.style.color= 'black';
              groupTitleDiv.style.marginLeft ='-67px';
              groupTitleDiv.style.paddingLeft='67px';
              groupTitleDiv.style.marginRight= '-75px';
              groupTitleDiv.style.borderLeftWidth= '-75px';
                GroupBoxID.style.fontWeight = 'normal';
                currentlyHighlightedElement = groupQuestionLink;
                // groupTitleDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });

            });
            
    
            if (nodeData.group_title.length > 20) {
                // groupQuestionLink.innerHTML = removeParagraphTags(nodeData.group_title.substring(0, 20) + '..');
                groupQuestionLink.innerHTML = removeParagraphTags(nodeData.group_title);

            } else {
                groupQuestionLink.innerHTML = removeParagraphTags(nodeData.group_title);
            }
            groupTitleDiv.appendChild(groupQuestionLink);
    
            
            nodeData.questions.forEach(groupQuestion => {
                createTreeNode(groupQuestion, groupQuestionsDiv);
            });
            parentNode.appendChild(groupQuestionsDiv);
        }
    }

    var questionPaperContainer = document.getElementById('questionPaper');
    
    createTreeWithHeading(jsonData, questionPaperContainer);
    localStorage.setItem("collapse", JSON.stringify((expandedSections)));
    // console.log('expandedSections:',expandedSections);
    // console.log('questionPaperContainer:',questionPaperContainer);

		window.addEventListener('DOMContentLoaded', event => {
			// Toggle the side navigation
			const sidebarToggle = document.body.querySelector('#sidebarToggle');
			if (sidebarToggle) {
				sidebarToggle.addEventListener('click', event => {
					event.preventDefault();
					document.body.classList.toggle('sb-sidenav-toggled');
					let qP = document.getElementById('questionPaper');
					qP.classList.toggle('qP-style');
					localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
				});
			}
            const sidebarToggle1 = document.body.querySelector('#sidebarToggle1');
			if (sidebarToggle1) {
				sidebarToggle1.addEventListener('click', event => {
					event.preventDefault();
					document.body.classList.toggle('sb-sidenav-toggled');
					let qP = document.getElementById('questionPaper');
					qP.classList.toggle('qP-style');
					localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
				});
			}
		});


    }

   // Function to scroll to the specified element with smooth behavior
    function scrollToElement(elementId) {
        const element = document.getElementById(elementId);
        if (element) {
            element.scrollIntoView({ behavior: "smooth", block: "center" });
        }
    }