jQuery(document).ready(function(){

    var chatstate = 1 ;
    var start = 1;

    var icon_option = 'only_icon' ;
    
          

    jQuery('body').on('click','.chat_close_b',async function(){

        
        if ( chatstate === 1 ) {

            if ( icon_option != 'sidebar_icon') {
                jQuery('.btntext').hide();
                var src = 'https://houseoftralula.co.uk/wp-content/plugins/AppointBee/modules/inc/chatbot/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://houseoftralula.co.uk/wp-content/plugins/AppointBee/modules/inc/chatbot/images/Appointbee-ChatIcon.png';
                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') {
                jQuery('.btntext').show();
            }
        }

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

                // service_provider = 2;
                // await get_month();


            });
                
        }
        
    });


    jQuery("body").on("click",".bot_close_btn",async function(event){  

       if ( icon_option != 'sidebar_icon') {
            var src = 'https://houseoftralula.co.uk/wp-content/plugins/AppointBee/modules/inc/chatbot/images/Appointbee-ChatIcon.png';
            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') {
            jQuery('.btntext').show();
        }
        

    });

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

  


    var current_event = 'select_service';

    var name = '';
    var contact = '';
    var email = '';
    var address = '';
    var city = '';
    var service = '';
    var service_provider = '';
    var requirements = '';
    var notes = '';
    var date_time = '';
    var timezone = '';
    var formattedTime = '';

    var details_response = '';
    var confirmDiv = '';
    var confirmDiv1 = '';
    var printElement = '';

    myArray = [];
    backEvent = [];
    var lastbackEvent = '';

    var ask_address = '';
    var ask_city = '';

    var all_services = '';
    var services_by_worker_button = '[]';
    var service_btn_array = JSON.parse(services_by_worker_button);
    var workers_by_service_button = '[]';
    var worker_btn_array = JSON.parse(workers_by_service_button);
    
    var back_img = 'https://houseoftralula.co.uk/wp-content/plugins/AppointBee/modules/inc/chatbot/images/undo.png';
    var back_btn_text = '<span class="backbtn backbtn2"><span class="backtip">Back</span><img src="'+ back_img +'"></span>';



    function startBot(){

        printMsg('Hi there! Welcome to our appointment booking service. <br><br>What type of service are you interested in scheduling an appointment for? <br>'+all_services,'bot');
    }

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

        run_input();
    });

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

        if (event.keyCode === 13) {

            run_input();
        }

    });

    async function run_input(){

            var text = jQuery('#textbox').val();


                if( current_event == 'name'){
                    name = text ;
                    await printMsg( text,'user');

                    if(!validation(text)){
                        await printMsg('Invalid Input: Please Enter a valid Name with a minimum of 4 characters and Special characters are not allowed."','bot');
                        return false;
                    }else{
                        current_event = 'contact';
                        await printMsg('What is your Contact Number ? We will need it to confirm your appointment','bot');
                    }

                    
                
                }else if( current_event == 'contact'){
                    contact = text ;
                    await printMsg( text,'user');
                    
                    if(!validation(text)){
                        await printMsg('Invalid Input. Please Enter a valid Contact Number that contains only digits, has a minimum of 8 digits, and a maximum of 15 digits.','bot');
                        return false;
                    }else{
                        current_event = 'email';
                        await printMsg('What is your email address? ','bot');
                    }

                
                }else if( current_event == 'email'){
                    email = text ;
                    await printMsg( text,'user');

                    if(!validation(text)){
                        await printMsg('Invalid Input. Please Enter a valid Email address','bot')
                        return false;
                    }

                    await printMsg('Thanks for sharing your contact information with us. We promise to keep it safe and secure.','bot');

                    if (ask_address == 1  ) {

                        current_event = 'ask_address';
                        await printMsg('Please Enter your Address :','bot');
                    }else if(ask_city == 1){
                        current_event = 'ask_city';
                        await printMsg('Please Enter your City Name :','bot');
                    }else{
                        current_event = 'req_qs';
                        await printMsg('Do you have any specific preferences or requirements for this appointment?<br><button class="toggler req_qs" data-id="Yes" >Yes</button><button class="toggler req_qs" data-id="No">No</button> ','bot');
                    }

                }else if( current_event == 'ask_address'){
                    address = text ;
                    await printMsg( text,'user');

                    if ( ask_city == 1 ) {
                        current_event = 'ask_city';
                        await printMsg('Please Enter your City Name :','bot');
                    }else{
                        current_event = 'req_qs';
                        await printMsg('Do you have any specific preferences or requirements for this appointment?<br><button class="toggler req_qs" data-id="Yes" >Yes</button><button class="toggler req_qs" data-id="No">No</button> ','bot');
                    }

                }else if( current_event == 'ask_city'){
                    city = text ;
                    await printMsg( text,'user');

                    current_event = 'req_qs';
                        await printMsg('Do you have any specific preferences or requirements for this appointment?<br><button class="toggler req_qs" data-id="Yes" >Yes</button><button class="toggler req_qs" data-id="No">No</button> ','bot');

                }else if( current_event == 'requirements'){
                    requirements = text ;
                    await printMsg( text,'user');

                    if(!validation(text)){
                        await printMsg('Input exceeds the maximum limit of 250 characters. Please Enter Again :','bot');
                        return false;
                    }else{
                       
                       current_event = 'confirm';
                       cfm_div();
                    }
                     
                
                }
                

                //console.log(current_event +' | '+text);
    }


    function validation(text){

        

        if( current_event == 'name'){

            if (text.length >= 4 && text.length <= 50 && /^[a-zA-Z\s]+$/.test(text) ) {
                return true;
            }
        }else if( current_event == 'contact'){

            if (/^\+?\d{8,15}$/.test(text)) {
                return true;
            }
        }else if( current_event == 'email'){

            var emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
            if (emailRegex.test(text)) {
                return true;
            }

        }else if( current_event == 'requirements'){

            if (text.length <= 250  ) {
                return true;
            }
        }



        return false;
    }

    async function cfm_div(){



        confirmDiv = confirmDiv1;

                    confirmDiv += '<p>Name :<strong> '+name+'</strong> </p>';
                    confirmDiv += '<p>Contact :<strong> '+contact+'</strong> </p>';
                    confirmDiv += '<p>Email :<strong> '+email+'</strong> </p>';
                    if (ask_city == 1 ) { confirmDiv += '<p>City :<strong> '+city+'</strong> </p>';  }
                    if (ask_address == 1 ) {  confirmDiv += '<p>Address :<strong> '+address+'</strong> </p>';  }
                    if( requirements != '' ){
                        confirmDiv += '<p>Notes : <strong> '+requirements+'</strong> </p>';
                    }

                    confirmDiv += '<div class="google_cal"> <input type="checkbox" id="gcal"> <label class="glab" for="gcal" style="color: #000;">Add to Google Calendar</label></div>';

                    confirmDiv += '<button class="printbtn" onclick="'+"printDiv('printbox2','Appointment')"+'">Print</button>';
                    
                    confirmDiv += '</div></div></div></div>';

                    jQuery(".confirmbtn").focus();

                    jQuery('#msBox').append(confirmDiv);
                    scroller_down();

                    var service1 = details_response.service;
                    service1 = service1.replace("Service name:<strong>", '');
                    service1 = service1.replace("</strong>", '');

                    var worker1 = details_response.worker;
                    worker1 = worker1.replace("Service provider: <strong>", '');
                    worker1 = worker1.replace("</strong>", '');

                    var start1 = details_response.start;
                    start1 = start1.replace("Date and time:<strong>", '');
                    start1 = start1.replace("</strong>", '');
                    start1 = start1.replace("2023", '2023, at ');
                    start1 = start1.replace("2024", '2024, at ');
                    start1 = start1.replace("2025", '2025, at ');


                    var cmsg = 'If everything looks good, please Click on "Confirm" to proceed with the booking.<br><br> Looking forward to seeing you on '+start1+' for your '+service1+' appointment with '+worker1;

                    var confirmBTN = '<div class="payment_col payment_col2"><a href="#" class="pay_btn confirmbtn">Confirm</a></div>';

                    var cdiv = cmsg+'<br>'+confirmBTN;
                    //var cdiv = '<div class="botmsg" >'+cmsg+'<br>'+confirmBTN+'</div>';
                    //jQuery('#msBox').append(cdiv);

                    create_printDiv(service1, worker1, start1);


                    await printMsg( cdiv,'bot');
                    scroller_down();

                    

    }

    function create_printDiv(service1, worker1, start1){


        var Lasts1 = details_response.end;
        Lasts1 = Lasts1.replace("Lasts (approx):<strong>", '');
        Lasts1 = Lasts1.replace("</strong>", '');
        
        var Price1 = details_response.price;
        if(Price1 != '0' || Price1 != 0){
            Price1 = Price1.replace("Price: <strong>", '');
            Price1 = Price1.replace("</strong>", '');
        }
        


        printElement = '';
        printElement += '<tr><td>Service name:</td><td>'+service1+'</td></tr>';
        printElement += '<tr><td>Service provider:</td><td>'+worker1+'</td></tr>';
        printElement += '<tr><td>Date and time:</td><td>'+start1+'</td></tr>';
        printElement += '<tr><td>Duration:</td><td>'+Lasts1+'</td></tr>';
        printElement += '<tr><td>Price:</td><td>'+Price1+'</td></tr>';
        printElement += '<tr><td>Name:</td><td>'+name+'</td></tr>';
        printElement += '<tr><td>Contact:</td><td>'+contact+'</td> </tr>';
        printElement += '<tr><td>Email:</td><td>'+email+'</td> </tr>';
        
        if (ask_city == 1 ) {  printElement += '<tr><td>City:</td><td>'+city+'</td> </tr>'; }
        if (ask_address == 1 ) { printElement += '<tr><td>Address:</td><td>'+address+'</td></tr>'; }
        if( requirements != '' ){ printElement += '<tr><td>Requirements:</td><td>'+requirements+'</td></tr>';  }

        jQuery('#printbox2').html(printElement);
    }



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

        var data = jQuery(this).attr('data-id');
        
        if (current_event == 'req_qs') {

            await printMsg( data,'user');
            if(data == 'Yes'){
                current_event = 'requirements';
                await printMsg( 'Please Type Your Message :','bot');
            }else{
                current_event = 'confirm';
                cfm_div();
            }
            

        }

    });

    
    jQuery('body').on('change keyup paste', '#textbox', async function() {
        
        var val = jQuery(this).val();
        //console.log(val);
    });

    


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

        await printMsg( 'Confirm','user');
        if (current_event == 'confirm') {
            
            submit_form();
            current_event = 'close';
        }

    });

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

            var data = jQuery(this).attr('data-id');
            var text = jQuery(this).html();

            if(current_event == 'select_service'){

                await printMsg( text ,'user');
                current_event = 'service_provider';
                service = data ;

                jQuery('.select_service').removeClass('choose');
                jQuery(this).addClass('choose');

                var msg='Please Select Service Provider. <br>';
                jQuery.each(worker_btn_array[data], function(index, value) {

                  msg +='<button class="toggler select_service_provider" data-id="'+value.id+'" >'+ value.worker_name +'</button>';
                });

                printMsg( msg,'bot');
                
            }
    });

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

            var data = jQuery(this).attr('data-id');
            var text = jQuery(this).html();

            if(current_event == 'service_provider'){

                await printMsg( text ,'user');
                service_provider = data ;
                jQuery('.select_service_provider').removeClass('choose');
                jQuery(this).addClass('choose');

                current_event = 'date_time';
                await printMsg('When would you prefer to schedule this appointment? Please provide a date and time if possible.','bot');

                await get_month();

                var calender = jQuery('#calender').html();
                MsElement = '<div class="" id="div_calender"> '+calender+' </div>';   
                jQuery('#msBox').append(MsElement);

                var topdata = jQuery('.calender_head h2').html();
                var topdiv = '<div class="title_os">'+topdata+'</div>';
                jQuery('.calender_head').html(topdiv);
                scroller_down();

                var availbx = jQuery('#availbx').html();
                jQuery('#msBox .appointments-list').append(availbx);   
                
                var pagination = jQuery('#pagination').html();
                MsElement1 = '<div id="div_pagination"> '+back_btn_text+pagination+' </div>'; 
                jQuery('#msBox .appointments-list').append(MsElement1);
                MsElement2 = '<div class="payment_col conbtn"><a href="#" class="pay_btn">Continue</a></div>';  
                jQuery('#msBox').append(MsElement2);
                scroller_down();

                var title = jQuery('#div_calender .app_timetable_title').html();
                jQuery('#timetable_title .month_date').html(title);
                var newtitlediv = jQuery('#timetable_title .app_timetable_title').html();
                jQuery('#div_calender').find('.app_timetable_title').html(newtitlediv);


            }
    });

    

    jQuery("body").on("click","#msBox .next_month,#msBox .previous_month ",function(e){  

        e.preventDefault();
        jQuery('.conbtn').hide();
        var url = jQuery(this).attr('href');
        var pattern = /[?&]wcalendar=([^&#]+)/;
        var match = pattern.exec(url);
        var wcalendarValue = match && match[1];

        var xhrx = new XMLHttpRequest();
        xhrx.open('GET', 'https://houseoftralula.co.uk/wp-json/appointbee/v1/get_month/?wcalendar='+wcalendarValue+'&app_provider_id='+(service_provider)+'&app_service_id=' + (service) , true);
        xhrx.setRequestHeader('Content-Type', 'text/html');

        xhrx.onreadystatechange = function() {
          if (xhrx.readyState === XMLHttpRequest.DONE) {
            if (xhrx.status === 200) {
              var response1 = xhrx.responseText;

              jQuery('#div_calender').html(response1);

                var topdata = jQuery('.calender_head h2').html();
                var topdiv = '<div class="title_os">'+topdata+'</div>';
                jQuery('.calender_head').html(topdiv);

                var availbx = jQuery('#availbx').html();
                jQuery('#msBox .appointments-list').append(availbx); 

                
            } else {
              console.error('Error: ' + xhrx.status);
            }
          }
        };
        xhrx.send();



        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://houseoftralula.co.uk/wp-json/appointbee/v1/get_pagination/?wcalendar='+wcalendarValue, true);
        xhr.setRequestHeader('Content-Type', 'text/html');

        xhr.onreadystatechange = async function() {
          if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
              var response = xhr.responseText;


                await delay(1000).then(function(){
                    MsElement1 = '<div id="div_pagination"> '+back_btn_text+response+' </div>'; 
                    jQuery('#msBox .appointments-list').append(MsElement1);
                });

              //console.log(response);
            } else {
              console.error('Error: ' + xhr.status);
            }
          }
        };
        xhr.send();
        


      });




    function get_month() {
      return new Promise(function(resolve, reject) {
        var xhrx = new XMLHttpRequest();
        xhrx.open('GET', 'https://houseoftralula.co.uk/wp-json/appointbee/v1/get_month/?app_provider_id='+(service_provider)+'&app_service_id=' + (service), true);
        xhrx.setRequestHeader('Content-Type', 'text/html');

        xhrx.onreadystatechange = async function() {
          if (xhrx.readyState === XMLHttpRequest.DONE) {
            if (xhrx.status === 200) {

              var response1 = xhrx.responseText;
              jQuery('#calender').html(response1);
              
              resolve(response1);
            } else {
              reject('Error: ' + xhrx.status);
            }
          }
        };

        xhrx.send();
      });
    }


    jQuery("body").on("click",".free1",function(){ 
         // jQuery("body").find(".free1").css("background","none");
         // jQuery("body").find(".free1 p").css('color',"gray");

         // jQuery(this).css('cssText','background: !important;border:1px solid white !important');
         // jQuery(this).children().css('cssText','color:white !important;');
         jQuery('.free1').removeClass('selected_date');
         jQuery(this).addClass('selected_date');
         
      });




    jQuery('body').delegate('#msBox .app_monthly_schedule_wrapper table td.free','click',async function(){

      if (current_event == 'date_time') {
        var selected_timetable=jQuery(".app_timetable_"+jQuery(this).find(".appointments_select_time").val());
        jQuery(".app_timetable:not(selected_timetable)").hide();
        selected_timetable.show();
        jQuery(".app_timetable_wrapper").show();
        jQuery('.conbtn').hide();
         scroller_down();
      }

    });
    jQuery('body').delegate('#msBox .app_timetable_cell','click',async function(){

         if (current_event == 'date_time') {

            if(!jQuery(this).hasClass('busy')){
                date_time = jQuery(this).find('.appointments_take_appointment').val();
                jQuery('#msBox .app_timetable_cell').removeClass('nv_blue');
                jQuery(this).addClass('nv_blue');
                
                jQuery('.conbtn').show();
                 scroller_down();
                 getApDetails();
            }

            
         }
        
    });

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

        if(current_event == 'date_time'){

            await printMsg( 'Continue' ,'user');
            current_event = 'name';
            await printMsg('May I have your full name, please?','bot');
        }


    });
     

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

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


        jQuery('.backbtn').hide();
        if (user == 'user' ){

            if(lastbackEvent != current_event){
                lastbackEvent = current_event;
                backEvent.push(lastbackEvent);
                addTo_stepBack();
            }

            
        }

        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;
         
          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();
              }
            });
          });


        if (mode != 0 ) {
         jQuery('#textbox').prop('disabled', false);
         jQuery('#textbox').focus();
        }
        jQuery('#textbox').val('');
        scroller_down();
        //console.log(current_event);

        if(jQuery('.backbtn').length > 1 ){

            if(current_event != 'close'){
                jQuery('.backbtn').last().show();
            }
            
        }

    }


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


    function submit_form(){
        var final_value = date_time;
        var app_name = name;
        var app_email = email;
        var app_phone = contact;
        var app_address = '';
        var app_city = '';
        if (ask_city == 1 ) {
            app_city = city;
        }
        if (ask_address == 1 ) {
            app_address = address;
        }
        var app_note = requirements;
        var timezone = timezone;
        var country_phone = contact;
        var app_chk = "yes";
        var app_gcal = 0;
        var nonce = "86db7a34ad";
        // var country_phone = phoneInput.getNumber(intlTelInputUtils.numberFormat.E164);
        

        var app_warning_text = "Please fill in the requested field";
        if (jQuery("#gcal").is(":checked")) {
            app_gcal = 1;
        }
        var post_data = {
            action: "post_confirmation",
            value: final_value,
            app_service_id: service,
            app_name: app_name,
            app_email: app_email,
            app_phone: app_phone,
            country_phone: country_phone,
            app_address: app_address,
            app_city: app_city,
            app_note: app_note,
            timezone: timezone,
            app_chk: app_chk,
            app_gcal: app_gcal,
            nonce: nonce
        };
        
        // console.log(post_data);
        // return;
        jQuery.post('https://houseoftralula.co.uk/wp-admin/admin-ajax.php', post_data, function(response) {

            //jQuery(".wait_img").remove();
            console.log(response)
            jQuery('.backbtn').hide();

            if (response && response.error) {
                Lobibox.notify("error", {
                    showClass: "rollIn",
                    hideClass: "rollOut",
                    msg: "Success <br> " + response.error
                });
            } else if (response && (response.refresh == "1" || response.price == 0)) {

                var thanks_div = '<div class="botmsg" >Thank you for choosing our service!</div>';
                jQuery('#msBox').append(thanks_div);
                // printMsg('Thank you for choosing our service!','bot');

                if (response.gcal_url != "") {
                    if (response.gcal_same_window) {
                        Lobibox.notify("success", {
                            showClass: "rollIn",
                            hideClass: "rollOut",
                            msg: "Success <br>We have received your appointment. Thanks!"
                        });
                         window.open(response.gcal_url, "_blank");
                    } else {
                        Lobibox.notify("success", {
                            showClass: "rollIn",
                            hideClass: "rollOut",
                            msg: "Success <br>We have received your appointment. Thanks!"
                        });
                         window.open(response.gcal_url, "_blank");
                         //window.location.href = app_location();
                    }
                } else {
                    Lobibox.notify("success", {
                        showClass: "rollIn",
                        hideClass: "rollOut",
                        msg: "Success <br>We have received your appointment. Thanks!"
                    });
                     //window.location.href = app_location();
                }
            } else if (response) {

                console.log(response);

                var thanks_div = '<div class="botmsg" >Thank you for choosing our service!</div>';
                jQuery('#msBox').append(thanks_div); 
                //printMsg('Thank you for choosing our service!','bot');

                //console.log(response);

                jQuery(".paybox .appointments-paypal").find(".app_amount").val(response.price);
                jQuery(".paybox .appointments-paypal").find(".app_custom").val(response.app_id);
                var old_val = jQuery(".paybox .appointments-paypal").find(".app_submit_btn").val();
                if (old_val) {
                    var new_val = old_val.replace("PRICE", response.price).replace("SERVICE", '<br><strong>'+ response.service_name+'</strong>');
                    jQuery(".paybox .appointments-paypal").find(".app_submit_btn").val(new_val);
                    var old_val2 = jQuery(".paybox .appointments-paypal").find(".app_item_name").val();
                    var new_val2 = old_val2.replace("SERVICE", response.service_name);
                    jQuery(".paybox .appointments-paypal").find(".app_item_name").val(new_val2);
                }
                jQuery(".paybox .appointments-paypal .app_submit_btn").hide();
                
                if (response.mp == 1) {
                    jQuery(".mp_buy_form").find("[name='variation']").remove().end().append("<input type='hidden' name='variation' />");
                    jQuery(".mp_buy_form input[name='variation']").val(response.variation);
                    // jQuery(".mp_buy_form").show();
                } else {
                    // jQuery(".paybox .appointments-paypal").show();
                }

                var s_btn = '<button typed="submit" class="cbtn cbtn1">'+new_val+'</button>';

                var s_btn2 = '<div class="confirm_col">'+s_btn+'</div>';
                console.log(s_btn2);


                jQuery(".paybox .appointments-paypal form").append(s_btn2);
                

                var form_html = jQuery(".paybox .appointments-paypal").html();
                jQuery('#msBox').append(form_html); 

                console.log(form_html);

                scroller_down();
                if (response.gcal_url != '') {
                    window.open(response.gcal_url, "_blank");
                }


            } else {
                alert("A connection problem occurred. Please try again.");
            }
            jQuery(document).trigger("app-confirmation-response_received", [response]);
        }, "json");
    }



    function getApDetails() {

        var pre_data = {
            action: "pre_confirmation",
            value: date_time,
            app_service_id: service,
            nonce: "86db7a34ad"
        };
        jQuery.post("https://houseoftralula.co.uk/wp-admin/admin-ajax.php", pre_data, function(response) {

            details_response = response ;
            confirmDiv1 = '<div class="detail_bx" id="printbox"><div class="d_pattern"><div class="d_center"><h6>Appointment Details</h6><div class="d_row">';

            confirmDiv1 += '<p>'+response.service+'</p>';
            confirmDiv1 += '<p>'+response.worker+'</p>';
            confirmDiv1 += '<p>'+response.start+'</p>';
            confirmDiv1 += '<p>'+response.end+'</p>';
            if (response.price != "0") {
                confirmDiv1 += '<p>'+response.price+'</p>';
            }
            
        }, "json");
    }

    
    function addTo_stepBack(){

            if (backEvent.length > 1) {
                //var lastbackEvent = backEvent[backEvent.length - 1];
            }else{
                //var lastbackEvent = backEvent[0];
            }
            
            var draftHtml = jQuery('#msBox').html();
            var state = { current_event, name, contact, email, address, city, service, service_provider, requirements, notes, date_time, timezone, formattedTime, details_response, confirmDiv, confirmDiv1, draftHtml };

            myArray.push(state);
            console.log(backEvent);
            console.log(myArray);

    }

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

            if (myArray.length == 0  ) {
                return;
            }

            var lastState = myArray.pop();
            var last_back_Event = backEvent.pop();
            if (myArray.length == 0 ) {
                myArray.push(lastState);
                backEvent.push(last_back_Event);
            }

            jQuery('#msBox').html(lastState.draftHtml);
            
            current_event = lastState.current_event ;
            draftHtml = lastState.draftHtml;
            current_event = last_back_Event;
            lastbackEvent = '';
            name = lastState.name;
            contact = lastState.contact;
            email = lastState.email;
            address = lastState.address;
            city = lastState.city;
            service = lastState.service;
            service_provider = lastState.service_provider;
            requirements = lastState.requirements; 
            notes = lastState.notes;
            date_time = lastState.date_time;
            timezone = lastState.timezone;
            formattedTime = lastState.formattedTime;
            details_response = lastState.details_response;
            confirmDiv = lastState.confirmDiv;
            //confirmDiv1 = lastState.confirmDiv1;


            if(jQuery('.backbtn').length > 1 ){
                jQuery('.backbtn').last().show();
            }
            jQuery('#textbox').prop('disabled', false);

            console.log(backEvent);
            console.log(myArray);

        });





});








jQuery(document).ready(function () {


    var words = ['Book an Appointment'],
        part,
        i = 0,
        offset = 0,
        len = words.length,
        forwards = true,
        skip_count = 0,
        skip_delay = 15,
        speed = 100;
    var wordflick = function () {
      setInterval(function () {
        if (forwards) {
          if (offset >= words[i].length) {
            ++skip_count;
            if (skip_count == skip_delay) {
              forwards = false;
              skip_count = 0;
            }
          }
        }
        else {
          if (offset == 0) {
            forwards = true;
            i++;
            offset = 0;
            if (i >= len) {
              i = 0;
            }
          }
        }
        part = words[i].substr(0, offset);
        if (skip_count == 0) {
          if (forwards) {
            offset++;
          }
          else {
            offset--;
          }
        }
        jQuery('.btntext').text(part);
      },speed);
    };

    wordflick();    
});









function printDiv(divId,title) {

          let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');

          mywindow.document.write(`<html><head><title>${title}</title>`);
          mywindow.document.write('</head><body >');
          mywindow.document.write('<h1>Appointment Details</h1><table border="1" cellpadding="8" id="dtable">');
          mywindow.document.write(document.getElementById(divId).innerHTML);
          mywindow.document.write('</table>');
          mywindow.document.write('</body></html>');

          mywindow.document.close(); // necessary for IE >= 10
          mywindow.focus(); // necessary for IE >= 10*/

          mywindow.print();
          mywindow.close();

          return true;
    }