$(document).ready(function () {
      var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
      if(width > 1200) {
        var parentDiv = $("<div>", {
          class: "bubbleChatParent",
          style: "position: fixed; right:10px; bottom:10px; z-index:999999999999; align-items: end; display:flex; justify-content: flex-end;",
        }); 
        $("body").append(parentDiv);
      } else {
          var parentDiv = $("<div>", {
            class: "bubbleChatParent mobileIframe",
            style: "position: fixed; right:0px; bottom:0px; z-index:999999999999; width:100%; display:flex; justify-content: flex-end;",
          });
          $("body").append(parentDiv);
        }
      let device;
      var userAgent = navigator.userAgent || navigator.vendor || window.opera;
      if (/android/i.test(userAgent)) {
        device = "Android";
      }
      if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        device = "iOS";
      }
      var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
        if(width > 1200){
          var iframe = $("<iframe>", {
            class: "bubbleChatIframe",
            id: "bubbleChatIframe",
            src: "https://app.dropchat.co/public/bubble-chat/65cd1b455f752bfdfc457fae/U2FsdGVkX182Rt6g3zt2HpA5VXbrJhpROSWaNQy5wJ%2FFWnh5rv9OcWQooM8aw%2FFA",
            style:
              "position: relative; height: 500px; width:300px; border-radius: 5px; bottom:3em; right:3em; border: none; box-shadow: 1px 1px 5px #000;",
          });
        } else {
          var iframe = $("<iframe>", {
            class: "bubbleChatIframe",
            id: "bubbleChatIframe",
            src: "https://app.dropchat.co/public/bubble-chat/65cd1b455f752bfdfc457fae/U2FsdGVkX182Rt6g3zt2HpA5VXbrJhpROSWaNQy5wJ%2FFWnh5rv9OcWQooM8aw%2FFA",
            style:
            "position: fixed; height: 100%; width: 100%; border-radius: 0px; border: none; box-shadow: 1px 1px 5px #000;",
          });
        }

        // add the iframe to the body of the page
        
        $(".bubbleChatParent").append(iframe);

        var showButton = $("<div>", {
          id: "show",
          style:
            "position: relative; bottom: 10px; right: 10px; z-index: 9999; height: max-content; display:flex; background:#f47735; border-radius:50%; opacity: 1; transform: scale(1); transition: all 0.3s ease 0s; width:50px; height:50px; justify-content: center;",
          });
         var showButtonWelcomeText = $("<div>", {
            id: "welcomeText",
            style:
              "position: relative; bottom: 10px; right: 1.5rem; z-index: 9999; height: max-content; display:flex; width:270px; padding:5px 14px; border-radius: 16px; background:#f47735; opacity: 0; transform: scale(1); transition: all 0.3s ease 0s; box-shadow: 0px 3px 1px 1px #000000d1;",
            });

          showButtonWelcomeText.append("<p style='color:#fff;'>👋 I'm an AI-powered chatbot here to help you.</p>");

          showButtonWelcomeText.append('<img class="welcomeTextCross" src="https://book-chat.s3.amazonaws.com/5d94cd16-38aa-43d2-86fd-c5e87e77d2be/white-cross.svg-JTP54L.svg" style="cursor: pointer;position: absolute;top: -12px;right: -8px;background: #000;padding: 4px;border-radius: 20px;width: 24px;" alt="close" />');

          setTimeout(function() {
            $("#welcomeText").animate({
                opacity: "1",
            }, 750);
          }, 2000 );

          var showImg = $("<img>", {
          src: "https://drop-chat-files.s3.amazonaws.com/dropchat-assets/bubble-chat-show-icon.svg",
          alt: "Hide",
          style: "border-radius:50%;outline: none; cursor: pointer;width:30px;",
        });
        showButton.hover(function() {
              $(this).css({"opacity": "0.8", "transform": "scale(1.2)", "transition": "0.3s"});
          }, function() {
              $(this).css({"opacity": "1", "transform": "scale(1)", "transition": "0.3s"});
          });
        $(".bubbleChatParent").append(showButtonWelcomeText);
        showButton.append(showImg);

        if(width > 1200){
          var hideButton = $("<div>", {
            id: "hide",
            style:
            "position: fixed; bottom: 10px; right: 10px; z-index: 9999; height: max-content; display:flex; background:#f47735; border-radius:50%; width:50px; height:50px; justify-content: center;",
          });
          
          var hideImg = $("<img>", {
            src: "https://drop-chat-files.s3.amazonaws.com/dropchat-assets/bubble-chat-hide-icon.svg",
            alt: "Show",
            style: "border-radius:50%;outline: none;  cursor: pointer;width:30px;",
          });
          var hideIconButton = $("<div>", {
            id: "hideIcon",
            style:
            "position: absolute;z-index: 9999;border-radius:50%;justify-content: center;top: -2.2em;right: 3.5em;",
          });
          var hideIcon = $("<img>", {
            src: "https://book-chat.s3.amazonaws.com/5d94cd16-38aa-43d2-86fd-c5e87e77d2be/white-cross.svg-JTP54L.svg",
            alt: "Show",
            style: "outline: none;  cursor: pointer; width:20px;",
          });
          hideIconButton.append(hideIcon);
        } else {
          if(device === "iOS") {
            var hideButton = $("<div>", {
              id: "hide",
              style: "position: relative;right: 4px;top: 2.3dvh; z-index: 9999;width:30px; height:max-content; text-align:center; display:flex; justify-content: center;",
            });
          } else {
            var hideButton = $("<div>", {
              id: "hide",
              style: "position: relative;right: 4px;top: 1.75dvh; z-index: 9999;width:30px; height:max-content; text-align:center; display:flex; justify-content: center;",
            });
          }
          var hideImg = $("<img>", {
            src: "https://book-chat.s3.amazonaws.com/5d94cd16-38aa-43d2-86fd-c5e87e77d2be/white-cross.svg-JTP54L.svg",
            alt: "Show",
            style: "outline: none;  cursor: pointer; width:20px;",
          });
        }
        hideButton.hover(function() {
              $(this).css({"opacity": "0.8", "transform": "scale(1.2)", "transition": "0.3s"});
          }, function() {
              $(this).css({"opacity": "1", "transform": "scale(1)", "transition": "0.3s"});
          });
        hideButton.append(hideImg);

        // add the buttons to the body of the page
        $(".bubbleChatParent").append(hideIconButton);
        $(".bubbleChatParent").append(showButton);
        $(".bubbleChatParent").append(hideButton);

        $("#hide").hide();
        $("#hideIcon").hide();

        $(".welcomeTextCross").click(function () {
          $("#welcomeText").hide();
        });

        if(width > 1200){
          $("#hide").click(function () {
            $(".mobileIframe").css({"height": ""});
            $(".bubbleChatIframe").hide();
            $("#hide").hide();
            $("#hideIcon").hide();
            $("#show").show();
          });
          $("#hideIcon").click(function () {
            $(".mobileIframe").css({"height": ""});
            $(".bubbleChatIframe").hide();
            $("#hide").hide();
            $("#hideIcon").hide();
            $("#show").show();
          });
        } else {
          $("#hide").click(function () {
            $(".mobileIframe").css({"height": ""});
            $(".bubbleChatIframe").hide();
            $("#hide").hide();
            $("#hideIcon").hide();
            $("#show").show();
            $('html, body').css({
              overflow: 'auto'
            });
          });
        }
        if(width > 1200){
          $("#show").click(function () {
            $(".mobileIframe").css({"height": "100%"});
            $(".bubbleChatIframe").show();
            $("#show").hide();
            $("#hide").show();
            $("#hideIcon").show();
            $("#welcomeText").hide();
          });
        } else {
          $("#show").click(function () {
            $(".mobileIframe").css({"height": "100%"});
            $(".bubbleChatIframe").show();
            $("#show").hide();
            $("#welcomeText").hide();
            $("#hide").show();
            $('html, body').css({
              overflow: 'hidden'
            });
          });
        }
    });

    $(document).ready(function () {
      $(".bubbleChatIframe").hide();
      $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />');
    });