Untitled

jQuery(document).ready(function($){
    // create a new variable for a pop chat sound to be used below
    var pop;
    pop = new Audio('/wp-content/plugins/punch-chatbot/assets/media/pop.mp3');

    // wait for the users first click and then play a pop sound to attract interest in the chatbot - trigger it only once
    document.addEventListener('click', function(){
        pop.play();
    }, {once : true});

    // hide the popup message on click
    $('.punch-chatbot-icon-message__close').click(function(){
        $('.punch-chatbot-icon-message').hide();

        // register the click in the db for reporting - 3 is Chatbot Prompt Refused
        var data = {'action': 'punch_chatbot_ajax','chatbot_action': 3};
        $.post('wp-admin/admin-ajax.php', data, function(response) {
            console.log(response);
        });
    });

    // open the settings on click
    $('.punch-chatbot-holder__header__settings').click(function(){
        if($('.punch-chatbot-holder__header__settings__content').hasClass('active')){
            $('.punch-chatbot-holder__header__settings__content').removeClass('active');
        } else {
            $('.punch-chatbot-holder__header__settings__content').addClass('active');
        }
    });

    // set the chatbot body for appending and internal scrolling below
    var chatbot_body = $('.punch-chatbot-holder__body');

    // loop through each result as we now have an option for going back to the start on the final results
    $('.punch-chatbot-holder__message.result').each(function(){
        // get the result back link
        var backLink = $('.result_link.back_link', this).data('next');

        // register a click of this
        $('.result_link.back_link', this).click(function(){
            // do the date stuff for the message time/date update
            var currentDate = new Date();
            var month = currentDate.getMonth()+1;
            if (month < 10) { month = "0" + month;}
            var minutes = currentDate.getMinutes();
            if (minutes < 10) { minutes = "0" + minutes;}
            var time = currentDate.getHours() + ":" + minutes;
            var ampm = currentDate.getHours() >= 12 ? 'pm' : 'am';
            var dayString = currentDate.getDate() + '/' + month + '/' + currentDate.getFullYear();

            // add a delay to make it look like its thinking about whats happening
            setTimeout(function(){
                // loop through each question and get the 1st one so we can start the journey again
                $('.punch-chatbot-holder__message.question').each(function(){
                    questionNext = $(this).data('question-id');
                    var current = $(this);
                    // allow clicking of the buttons on the questions again as we are restarting
                    current.find('button').prop('disabled', false);
                    current.find('.cbButton').attr("disabled", false);

                    if(questionNext == backLink){
                        $('.date', this).html(dayString + " " + time + ampm);
                        $(this).addClass('active');

                        // append the first question back to the bottom of the chatbot and scroll to this
                        chatbot_body.append($(this));
                        chatbot_body.animate({scrollTop: chatbot_body.prop("scrollHeight")}, 500);
                        
                        // play a funky sound
                        pop.play();
                    }
                });
            }, 2000);
        });
    });

    // loop through each question and set the answer on select
    $('.punch-chatbot-holder__message.question').each(function(){
        var question = $(this).data('question-id');
        var current = $(this);

        // used below to set the next question
        var questionNext;

        // show the first question on load
        if(question == 1){
            $(this).show();
        }

        // record a click of the button options below each question
        $('button', current).each(function(){
            var button = $(this);

            $(button).click(function(){
                // use selection as some questions have more than 1 result so this helps to identify which we need
                var selection = $(this).data('selection');
                // get the next question id if set
                var next = $(this).data('next');
                // get the result id if set
                var result = $(this).data('result');

                // date stuff used below for getting message time making it look like a real chat
                var currentDate = new Date();
                var month = currentDate.getMonth()+1;
                if (month < 10) { month = "0" + month;}
                var minutes = currentDate.getMinutes();
                if (minutes < 10) { minutes = "0" + minutes;}
                var time = currentDate.getHours() + ":" + minutes;
                var ampm = currentDate.getHours() >= 12 ? 'pm' : 'am';
                var dayString = currentDate.getDate() + '/' + month + '/' + currentDate.getFullYear();

                // find the answer and show it for this question, fill the answer with the selection
                $('.punch-chatbot-holder__message.answer').each(function(){
                    var answer = $(this).data('question-id');
                    // disable button clicks on the above question so they cant mess up the journey
                    current.find('button').prop('disabled', true);
                    current.find('.cbButton').attr("disabled", "disabled");

                    // show the answer given
                    if(answer == question){
                        $(this).addClass('active');
                        $(this).find('.answer.chat_response_holder').html(selection);

                        chatbot_body.append($(this));
                        chatbot_body.animate({scrollTop: chatbot_body.prop("scrollHeight")}, 500);
                        $('.date', this).html(dayString + " " + time + ampm);
                    }
                });

                // add a delay to make it look like its thinking about whats happening
                setTimeout(function(){
                    // load the next question only
                    if(next){
                            $('.punch-chatbot-holder__message.question').each(function(){
                            questionNext = $(this).data('question-id');

                            // show the next question based on the given data next id
                            if(questionNext == next){
                                $('.date', this).html(dayString + " " + time + ampm);
                                // allow button clicks on the next question
                                $(this).find('button').prop('disabled', false);
                                $(this).find('.cbButton').attr("disabled", false);
                                $(this).addClass('active');

                                chatbot_body.append($(this));    
                                chatbot_body.animate({scrollTop: chatbot_body.prop("scrollHeight")}, 500);
                                pop.play();
                            }
                        });
                    }

                    // if we are showing a result instead of another question
                    if(result){
                        $('.punch-chatbot-holder__message.result').each(function(){
                            questionNext = $(this).data('question-id');
                            resultSelection = $(this).data('selection');
                            
                            // get the correct result as mentioned above some question id's have 2-3 results
                            if(questionNext == result && resultSelection == selection){
                                $('.date', this).html(dayString + " " + time + ampm);
                                $(this).addClass('active');

                                chatbot_body.append($(this));
                                chatbot_body.animate({scrollTop: chatbot_body.prop("scrollHeight")}, 500);
                                pop.play();
                            }
                        });
                    }
                }, 2000);
            });
        });
    });

    // wait 3 seconds then add the cta message to attract interest
    setTimeout(function(){
        if($('.punch-chatbot-holder').is(":hidden")){
            $('.punch-chatbot-icon-message').addClass('active');        
        }
    }, 3000);

    // hide message on click of the chat and show the chat
    $('.punch-chatbot-icon').click(function(){
        $('.punch-chatbot-icon-message').hide();
        $('.punch-chatbot-icon').hide();
        $('.punch-chatbot-holder').addClass('active');

        // register the click in the db for reporting - 1 is Chatbot Clicked
        var data = {'action': 'punch_chatbot_ajax','chatbot_action': 1};
        $.post('wp-admin/admin-ajax.php', data, function(response) {
            console.log(response);
        });
    });

    // close the chat on click and just keep the icon to not annoy users
    $('.punch-chatbot-holder__header__close').click(function(){
        $('.punch-chatbot-icon-message').hide();
        $('.punch-chatbot-icon').show();
        $('.punch-chatbot-holder').removeClass('active');

        // register the click in the db for reporting - 2 is Chatbot Closed
        var data = {'action': 'punch_chatbot_ajax','chatbot_action': 2};
        $.post('wp-admin/admin-ajax.php', data, function(response) {
            console.log(response);
        });
    });

    // download the chat transcript to a txt file
    function downloadDiv(filename, element, mimeType) {
        var elementHtml = document.getElementsByClassName(element)[0].innerHTML;
        var link = document.createElement('a');
        mimeType = mimeType || 'text/plain';
        link.setAttribute('download', filename);
        link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elementHtml));
        link.click(); 
    }

    // create the file
    var fileName =  'punch-chatbot-transcript.txt';

    //click action to download the div contents
    $('.download-chat-transcript').click(function(){
        downloadDiv(fileName, 'punch-chatbot-holder__body','text/html');
    });
});