jQuery(document).ready(function(){

    var chatstate = 1 ;
    var start = 1;

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

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

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

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

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


            });
                
        }
        

        

    });


    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 confirmDiv = '';

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

    var all_services = '<button class="toggler select_service" data-id="1" >Default Service</button>';
    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);
    



    function startBot(){

        printMsg('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');
                    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');
                    current_event = 'email';
                    await printMsg('What is your email address? ','bot');
                
                }else if( current_event == 'email'){
                    email = text ;
                    await printMsg( text,'user');

                    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 = 'requirements';
                        await printMsg('Do you have any specific preferences or requirements for this appointment? ','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 = 'requirements';
                        await printMsg('Do you have any specific preferences or requirements for this appointment? ','bot');
                    }

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

                    current_event = 'requirements';
                    await printMsg('Do you have any specific preferences or requirements for this appointment? ','bot');

                }else if( current_event == 'requirements'){
                    requirements = text ;
                    await printMsg( text,'user');
                    current_event = 'notes';
                    await printMsg('Is there any additional information or special notes you would like to share with us? ','bot');
                }else if( current_event == 'notes'){
                    notes = text ;
                    await printMsg( text,'user');
                    current_event = 'confirm';


                    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>';  }
                    confirmDiv += '<p>Notes : <strong> '+notes+'<br>'+requirements+'</strong> </p>';
                    confirmDiv += '</div></div></div></div>';

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

                    jQuery('#msBox').append(confirmDiv);
                    scroller_down();
                    var confirmBTN = '<div class="payment_col"><a href="#" class="pay_btn confirmbtn">Confirm</a></div>';
                    jQuery('#msBox').append(confirmBTN);
                    scroller_down();



                }else if( current_event == 'confirm-xx'){

                    await printMsg( text,'user');
                    if (text == 'Confirm' || text == 'confirm') {
                        submit_form();
                        alert('submit');
                    }
                    
                }
                

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

    
    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 ,'end','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 ,'end','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"> '+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://linkconnect.me/wp/appointbeeai/main/wp-json/appointbee/v1/get_month/?wcalendar='+wcalendarValue+'&app_service_id=' + (service_provider-1), 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://linkconnect.me/wp/appointbeeai/main/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;

              // jQuery('#div_pagination').html(response);

                await delay(1000).then(function(){
                    MsElement1 = '<div id="div_pagination"> '+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://linkconnect.me/wp/appointbeeai/main/wp-json/appointbee/v1/get_month/?app_service_id=' + (service_provider-1), 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' ,'end','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('');

        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" id="div'+randomNum+'"></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);

    }


    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+' '+notes;
        var timezone = timezone;
        var country_phone = contact;
        var app_chk = "yes";
        var app_gcal = "";
        var nonce = "5960bbf4e2";
        // var country_phone = phoneInput.getNumber(intlTelInputUtils.numberFormat.E164);
        

        var app_warning_text = "Please fill in the requested field";
        if (jQuery(".appointments-gcal-field-entry").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://linkconnect.me/wp/appointbeeai/main/wp-admin/admin-ajax.php', post_data,  function(response) {

            jQuery(".wait_img").remove();

            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)) {
                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, "_self");
                    } 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);

                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>';

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

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

                scroller_down();


            } 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: "5960bbf4e2"
        };
        jQuery.post("https://linkconnect.me/wp/appointbeeai/main/wp-admin/admin-ajax.php", pre_data, function(response) {


            confirmDiv = '<div class="detail_bx"><div class="d_pattern"><div class="d_center"><h6>Details</h6><div class="d_row">';

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




});