Dialogues

                
    
//DIALOGUES

    window.onload = () => {
        const smallDialog = new mdc.dialog.MDCDialog(document.querySelector('#small-dialog'));
        const mediumDialog = new mdc.dialog.MDCDialog(document.querySelector('#medium-dialog'));
        const errorDialog = new mdc.dialog.MDCDialog(document.querySelector('#error-dialog'));
        const warningDialog = new mdc.dialog.MDCDialog(document.querySelector('#warning-dialog'));
        const reccDialog = new mdc.dialog.MDCDialog(document.querySelector('#recc-dialog'));
        const infoDialog = new mdc.dialog.MDCDialog(document.querySelector('#info-dialog'));
        
        //Open dialogue buttons
            document.querySelector('#open-small-dialog-button').addEventListener('click', () => {
                smallDialog.open();
            });
            document.querySelector('#open-medium-dialog-button').addEventListener('click', () => {
                mediumDialog.open();
            });
            document.querySelector('#open-error-dialog-button').addEventListener('click', () => {
                errorDialog.open();
            });
            document.querySelector('#open-warning-dialog-button').addEventListener('click', () => {
                warningDialog.open();
            });
            document.querySelector('#open-recc-dialog-button').addEventListener('click', () => {
                reccDialog.open();
            });
            document.querySelector('#open-info-dialog-button').addEventListener('click', () => {
                infoDialog.open();
            });

        //Close dialogue buttons
            document.querySelector('#close-small-dialog-button').addEventListener('click', () => {
                smallDialog.close();
            });
            document.querySelector('#close-medium-dialog-button').addEventListener('click', () => {
                mediumDialog.close();
            });
            document.querySelector('#close-error-dialog-button').addEventListener('click', () => {
                errorDialog.close();
            });
            document.querySelector('#close-warning-dialog-button').addEventListener('click', () => {
                warningDialog.close();
            });
            document.querySelector('#close-info-dialog-button').addEventListener('click', () => {
                infoDialog.close();
            });
            document.querySelector('#close-recc-dialog-button').addEventListener('click', () => {
                reccDialog.close();
            });
        };

        //More Details for dialogues

            const toggleLink = document.getElementById('toggle-details');
            const moreInfo = document.getElementById('more-info');
        
            toggleLink.addEventListener('click', function (e) {
                e.preventDefault();
        
                if (!moreInfo.classList.contains('open')) {
                    // Expand
                    moreInfo.style.height = moreInfo.scrollHeight + "px";
                    moreInfo.classList.add("open");
                    toggleLink.textContent = "Less Details";
        
                    // Clean up inline height after transition for flexibility
                    moreInfo.addEventListener("transitionend", function cleanup() {
                        moreInfo.style.height = "auto";
                        moreInfo.removeEventListener("transitionend", cleanup);
                    });
                } else {
                    // Collapse
                    moreInfo.style.height = moreInfo.scrollHeight + "px"; // Set to current height to trigger transition
                    // Force reflow (important for Chrome)
                    void moreInfo.offsetHeight;
                    moreInfo.style.height = "0px";
                    moreInfo.classList.remove("open");
                    toggleLink.textContent = "More Details";
                }
            });

            
//TUTORIALS

    //Mandatory

        document.getElementById('open-onboarding-dialog-button').addEventListener('click', function() {
            const feedbackHTML = `
                

                    😠
                    😕
                    😐
                    😊
                    😃
                
`;

            // Start Intro.js tutorial
            introJs().setOptions({
                steps: [
                    {
                        intro: "This guide will walk you through the key features of SMART Referrals (powered by Aios).",
                        tooltipClass: 'introjs-floating custom-tooltip mandatory-tutorial',
                        title: "Welcome to SMART Referrals"
                    },
                    {
                        element: document.querySelector('#open-small-dialog-button'),
                        intro: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                        tooltipClass: 'custom-tooltip mandatory-tutorial',
                        title: "Title 1",
                    },
                    {
                        element: document.querySelector('#open-medium-dialog-button'),
                        intro: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
                        tooltipClass: 'custom-tooltip mandatory-tutorial',
                        title: "Title 2",
                    },
                    {
                        element: document.querySelector('#open-info-dialog-button'),
                        intro: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                        tooltipClass: 'custom-tooltip mandatory-tutorial',
                        title: "Title 3",
                    },
                    {
                        title: "How did you like the tour?",
                        intro: feedbackHTML, // Assign HTML as a string
                        tooltipClass: 'custom-tooltip mandatory-tutorial'
                    }
                ],
                showStepNumbers: true, 
                scrollToElement: true,
                positionPrecedence: ["left", "right", "bottom", "top"],
                nextLabel: 'Next',
                prevLabel: 'Previous',
                doneLabel: 'Done',
                exitOnOverlayClick: false,
                exitOnEsc: false,  
                showBullets: false, 
                disableInteraction: true,
            }).start();

            // Handle emoji button clicks inside the tutorial
            document.querySelector('body').addEventListener('click', function(event) {
                // Only trigger if an emoji button is clicked and the feedback container exists
                if (event.target && event.target.classList.contains('emoji-button')) {
                    const feedbackContainer = document.getElementById('feedback-container');
                    if (feedbackContainer) {
                        // Check if "Thank you for your feedback" message already exists
                        if (!feedbackContainer.querySelector('.thank-you-message')) {
                            // Hide all emoji buttons
                            const emojiButtons = document.querySelectorAll('.emoji-button');
                            emojiButtons.forEach(function(button) {
                                button.style.display = 'none'; // Hide the emoji buttons
                            });

                            // Show the "Thank you for your feedback" message only once
                            const thankYouMessage = document.createElement('div');
                            thankYouMessage.textContent = 'Thank you for your feedback';
                            thankYouMessage.classList.add('thank-you-message'); // Add a class to identify it
                            feedbackContainer.appendChild(thankYouMessage);
                        }
                    }
                }
            });
        });


    //Optional

        document.getElementById('OptionalTutorial').addEventListener('click', function() {
            const feedbackHTML = `
                

                    😠
                    😕
                    😐
                    😊
                    😃
                
`;

            // Start Intro.js tutorial
            introJs().setOptions({
                steps: [
                    {
                        element: document.querySelector('#open-small-dialog-button'),
                        intro: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                        tooltipClass: 'custom-tooltip',
                        title: "Title 1",
                    },
                    {
                        element: document.querySelector('#open-medium-dialog-button'),
                        intro: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
                        tooltipClass: 'custom-tooltip',
                        title: "Title 2",
                    },
                    {
                        element: document.querySelector('#open-info-dialog-button'),
                        intro: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                        tooltipClass: 'custom-tooltip',
                        title: "Title 3",
                    },
                    {
                        title: "How did you like the tour?",
                        intro: feedbackHTML, // Assign HTML as a string
                        tooltipClass: 'custom-tooltip mandatory-tutorial'
                    }
                ],
                showStepNumbers: true, 
                scrollToElement: true,
                positionPrecedence: ["left", "right", "bottom", "top"],
                nextLabel: 'Next',
                prevLabel: 'Previous',
                doneLabel: 'Done',
                exitOnOverlayClick: true,
                exitOnEsc: true,  
                showBullets: false, 
                disableInteraction: true,
            }).start();

            // Handle emoji button clicks inside the optional tutorial
            document.querySelector('body').addEventListener('click', function(event) {
                if (event.target && event.target.classList.contains('emoji-button')) {
                    const feedbackContainer = document.getElementById('feedback-container');
                    if (feedbackContainer) {
                        // Check if "Thank you for your feedback" message already exists
                        if (!feedbackContainer.querySelector('.thank-you-message')) {
                            const emojiButtons = document.querySelectorAll('.emoji-button');
                            emojiButtons.forEach(function(button) {
                                button.style.display = 'none'; // Hide the emoji buttons
                            });

                            const thankYouMessage = document.createElement('div');
                            thankYouMessage.textContent = 'Thank you for your feedback!';
                            thankYouMessage.classList.add('thank-you-message'); // Add a class to identify it
                            feedbackContainer.appendChild(thankYouMessage);
                        }
                    }
                }
            });
        });