jQuery(document).ready(function(){

    var chatstate = 1 ;
    var start = 1;
    var asst_id = 'asst_HOzHdv0uWtGv5RdD98E1TQi5';

    var icon_option = 'only_icon' ;
    var starters = `<button class="toggler select_service" >Hey there! We're Systara, a mobile games growth partnership company. We provide tailored strategies and AI lead generation agents to help mobile games businesses expand and grow, especially in the U.S. market. Feel free to book a call at https://zentara.setmore.com/</button>`;


    $('body').delegate('.chat_close_b','click', async function(){

        
        
        // var back_btn_text = '<span class="backbtn backbtn2"><span class="backtip">Back</span><img src="'+ back_img +'"></span>';
        
        if ( chatstate === 1 ) {

            if ( icon_option != 'sidebar_icon') {
                jQuery('.btntext').hide();
                var src = 'https://catcheverycallai.com/chat_assets/images/cross-button.png';
                jQuery(this).find('img').attr('src',src);
            }

            chatstate = 0;
            jQuery('.insideChat').slideDown(500);

            await delay(1300).then(function(){
                jQuery('.chat_landing1').slideUp(1000);
                jQuery('.chat_box').slideDown(1000);
            });
            
        
        }else{

            if ( icon_option != 'sidebar_icon') {
                var src = 'https://catcheverycallai.com/chat_assets/images/bot-icon.svg';
                jQuery(this).find('img').attr('src',src);
            }

            chatstate = 1;
            jQuery('.insideChat').slideUp();
            await delay(300).then(function(){
                jQuery('.chat_box').hide();
                jQuery('.chat_landing1').show();
            });
            if ( icon_option != 'sidebar_icon' && icon_option != 'only_icon') {
                jQuery('.btntext').show();
            }
        }

        if (start == 1) {
            start = 0;
            await delay(1300).then(async function(){
                startBot();
            });
                
        }
        
    });


    $("body").delegate('.bot_close_btn',"click", async function(event){  

        if ( icon_option != 'sidebar_icon') {
            var src = 'https://catcheverycallai.com/chat_assets/images/bot-icon.svg';
            jQuery('.chat_close_b').find('img').attr('src',src);
        }

            chatstate = 1;
            jQuery('.insideChat').slideUp();
            await delay(300).then(function(){
                jQuery('.chat_box').hide();
                jQuery('.chat_landing1').show();
            });

        if ( icon_option != 'sidebar_icon' && icon_option != 'only_icon') {
            jQuery('.btntext').show();
        }
        

    });



    async function delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }


    function startBot(){

        printMsg(`Hello! I'm really sorry we missed your call earlier. How can I assist you today? I'd love to help with anything you need! <br>`+starters,'bot');

    }


    async function printMsg(msg, user, mode = 1) {

        jQuery('#textbox').prop('disabled', true);
        jQuery('#textbox').val('');

        //jQuery('.backbtn').hide();
        

        var currentDate = new Date();
        var monthNames = [  "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        var day = currentDate.getDate();
        var month = monthNames[currentDate.getMonth()];
        var hour = currentDate.getHours();
        var minute = currentDate.getMinutes();
        var ampm = hour >= 12 ? 'pm' : 'am';
        hour = hour % 12;
        hour = hour ? hour : 12;
        formattedTime = day + " " + month + " " + hour + ":" + (minute < 10 ? "0" + minute : minute) + " " + ampm;


        const randomNum = Math.floor(Math.random() * 900000) + 100000;
        let logo, MsElement;
        var back_img = 'https://catcheverycallai.com/chat_assets/images/undo.png';
        
            if (user == 'bot') {
            MsElement = '<div class="botmsg"><div id="div'+randomNum+'"> </div> <span class="backbtn"><span class="backtip">Back</span><img src="'+back_img+'"></span> </div>';
            } else {
            MsElement = '<div class="message_sent"><div class="hello" id="div'+randomNum+'"></div></div>';
            }

        jQuery('#msBox').append(MsElement);
        scroller_down();
        const id = '#div'+randomNum;
        targetNode = document.querySelector(id);

            await new Promise(resolve => {
            const typed = new Typed(id, {
                strings: [msg],
                typeSpeed: 2,
                showCursor: false,
                cursorChar: "|",
                onComplete: () => {
                resolve();
                }
            });
            });


        jQuery('#textbox').prop('disabled', false);
        jQuery('#textbox').focus();
        jQuery('#textbox').val('');
        scroller_down();

        

    }


    function scroller_down(){
            var element = jQuery('.box-body');
            element.scrollTop(element[0].scrollHeight - element.height());
    }

    var current_event = 'select_service';

    jQuery('body').delegate('.select_service','click',async function(){

            var text = jQuery(this).html();

            if(current_event == 'select_service'){

                await printMsg( text ,'user');
                current_event = 'Q1';

                jQuery('.select_service').removeClass('choose');
                jQuery(this).addClass('choose');
                
                await get_response(text);
            }
    });

    
    jQuery('body').delegate('#attach','change',async function(){

        var filename = jQuery(this).val().split('\\').pop();
        jQuery('.filename').html(filename);
        jQuery('.attachDiv').show();

    });

    <!-- var thread_id = 'thread_PmRggbdVhmSkxUXofJpbzvuz'; -->
    var thread_id = '';

    async function get_response( data){

        var attchfile = $('#attach').prop('files')[0];

        var form_data = new FormData();
        form_data.append('data', data);
        form_data.append('thread_id', thread_id);
        form_data.append('asst_id', asst_id);
        if(attchfile != undefined && attchfile != ''){
            form_data.append('attchfile', attchfile);
        }

        //now remove the file from the input
        $('#attach').val('');
        jQuery('.attachDiv').hide();


        $.ajax({
            url: "https://catcheverycallai.com/chatbot/run_bot/run",
            type: 'POST',
            data: form_data,
            contentType: false,
            processData: false,
            success: function(data1){
                data = JSON.parse(data1);
                printMsg(data.ans,'bot');
                thread_id = data.thread_id;
            }
        });

    }

    jQuery("body").on("click",".send_btn",async function(event){  
        run_input();
    });

    
    jQuery("body").on("click",".attachment",async function(event){  
        $('#attach').click();
    });

    jQuery("body").on("keyup","#textbox",async function(event){  

        if (event.keyCode === 13) {  run_input(); }
    });

    async function run_input(){

        var text = jQuery('#textbox').val();
        await printMsg( text,'user');
        await get_response(text)
    }


});