/* load functions,
* iframe,
* and other scripts
* */
window.baseUrl = 'https://embed.clix.ly';
window.StickyData = {
        bubble_effect: "1",
        client_id: "3111",
        clients_leadpops_id: "0",
        created_at: null,
        date_created: "2021-03-17 15:04:43",
        date_updated: "2021-03-18 14:45:49",
        hide_animation: "1",
        id: "87",
        pending_flag: "0",
        script_type: "a",
        show_cta: "0",
        step_1: null,
        step_2: null,
        step_3: null,
        step_4: null,
        step_5: null,
        sticky_attributes: null,
        sticky_button: "",
        sticky_button_txt: null,
        sticky_button_type: null,
        sticky_cta: "",
        sticky_data: null,
        sticky_funnel_url: null,
        sticky_js_file: "",
        sticky_location: "t",
        sticky_name: "rameez",
        sticky_size: "f",
        sticky_status: "1",
        sticky_text: null,
        sticky_updated: "0",
        sticky_url: null,
        sticky_url_pathname: "/",
        sticky_url_protocol: null,
        sticky_website_flag: "0",
        stickybar_number: null,
        stickybar_number_flag: "0",
        stickybar_type: "1",
        subdomain_flag: "0",
        subdomain_list: "",
        third_party_website_flag: "0",
        updated_at: null,
        zindex: "1000000",
        zindex_type: "1",
        stickyWidth: 'auto',
        stickyHeight: 'auto',
        stickyTransform: 'none',
        stickyPadding: '20px 60px',
        domain_name: null
    };

function hexToRgbA(hex, opacity = 1, inobj = false) {
    var c;
    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
        c = hex.substring(1).split('');
        if (c.length == 3) {
            c = [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c = '0x' + c.join('');
        if (inobj) {
            var rgba = {
                'r': (c >> 16) & 255,
                'g': (c >> 8) & 255,
                'b': c & 255,
                'a': opacity
            }
            return rgba;
        }
        return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ', ' + opacity + ')';
    }
}

function setOpacityInRGBA(rgba, opcatity) {
    if (rgba && !rgba.match(/rgb/g)) {
        return rgba = hexToRgbA(rgba, opcatity);
    }
    var color_array = rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
    if (Array.isArray(color_array)) {
        return `rgba(${color_array[1]}, ${color_array[2]}, ${color_array[3]},  ${opcatity})`;
    }
}

// String to Boolean Function for Toggle true, false.
function stringToBooleanToggleValue(elementValue) {
    if (typeof (elementValue) == "string") {
        return JSON.parse(elementValue);
    } else {
        return elementValue;
    }
}

/*axios.post(window.baseUrl + '/blydog/stickyDataSource.php', {
    tparent: window.location.host,
    tchild: "",
    tpath: window.location.pathname + window.location.search,
    tprotocol: window.location.protocol
}).then(function (response) {
    if (response && response.data && !response.data.hasOwnProperty('message')) {
        StickyBarData = response.data;
        StickyData = JSON.parse(StickyBarData.stickybar_data);
        if(window.location.href.includes('screen') == true) {
            window.StickyData.intend = 1;
        }
        sb_();
    }
});*/

let _URL = window.baseUrl + '/blydog/stickyDataSource.php';
let data = {
    tparent: window.location.host,
    tchild: "",
    tpath: window.location.pathname + window.location.search,
    tprotocol: window.location.protocol
};

let xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", _URL);
xmlhttp.setRequestHeader("Cache-Control", "no-cache, no-store, max-age=0");
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify(data));
xmlhttp.responseType = 'json';
xmlhttp.onload = function () {
    if (xmlhttp.readyState === xmlhttp.DONE) {
        if(typeof xmlhttp.response === 'object' && xmlhttp.response != "null"){
            if(!xmlhttp.response.hasOwnProperty('message')) {
                StickyBarData = xmlhttp.response;
                StickyData = JSON.parse(StickyBarData.stickybar_data);
                if(window.location.href.includes('screen') == true) {
                    window.StickyData.intend = 1;
                }
                sb_();
            }
        }
    }
};




/**
 * sb all load function call in this function
 * created the dynamic function for multi hash
 * @private
 */
function sb_() {

    const stickyVars = {
        iframe: {
            'width': '100%',
            'min-height': 'auto',
            'id': 'stickyIframe'
        },
        sticky: {
            'flex-direction': 'row',
            'transform': 'scale(0.595833)',
            'width': '2400px',
            'top': '0px',
            'bottom': 'unset',
            'transform-origin': '0px 0px',
            'box-shadow': 'rgb(170 170 170) 0px 4px 10px',
            'background-color': 'rgb(196, 35, 183)',
            'id': 'placeholderId',
            'class': 'sb-sticky-bar'
        },
        main: {
            margin: 0,
            padding: 0,
            id: 'placeholderId',
            display: 'none',
            minHeight: '110px'
        }
    }

    const defaultValues = {
        sticky_cta: 'I am your sticky bar and i am being awesome!',
        sticky_button: 'Lets do it!',
        button_color: 'rgb(31, 31, 31)',
        button_text_color: 'rgb(255, 255, 255)',
        bgColor: 'rgb(196, 35, 183)',
        textColor: 'rgb(255, 255, 255)',
        animation: 'wobble',
        sticky_button_padding: '20px 60px',
        sticky_button_border_radius: '3px',
        sticky_button_box_shadow: '',
        border_color: 'rgba(0, 0, 0, 1)',
        border_size: 2,
        sticky_box_shadow: '34',
        step1: {
            sb_url: '',
            web_radio: 'entire',
            position: '1',
            stack_order: 'default',
            stack: '1000000',
            phone: '',
            aside_url: '',
            selected_funnel: null,
            selected_funnels_list: [],
            stickybar_type: '1',
            stickybar_placements: [],
            scripts: '',
            ctaHtml: '<p>CLICK TO CUSTOMIZE YOUR STICKY BAR TEXT</p>',
            ctaBtnHtml: '<p>CLICK TO CUSTOMIZE BUTTON TEXT</p>',
            is_fancybox: 0
        },
        step2: {
            bg_color: 'rgba(72, 34, 197, 1)',
            button_color: 'rgba(248, 110, 18, 1)',
            text_color: 'rgba(255, 255, 255, 1)',
            button_text_color: 'rgba(255, 255, 255, 1)',
            button_border_color: 'rgba(255, 255, 255, 1)',
            border_width : 0,
        },
        step3: {
            shadow: '5',
            size_val: '5',
            full_page: false,
            hide_page: false,
            hided: null,
            placed: '1',
            intend: '1',
            animation: 'wobble'
        },
        step4: {
            featuredYoutuebUrl: null,
            featuredImageUrl: null,
            featuredMediaType: 1,
            isColorOverlayed: false,
            overlayedColor: 'rgba(72, 34, 197, 0.70)',
            colorOpacity: 30,
            bgImageSize: '70',
            backgroundUrl: null,
            imagePlacement: '2',
            imageSize: 50,
            imageSpacing: 28,
            videoSize: 80,
            videoSpacing: 28
        },
        step5: {
            change_code_type : "deactive",
            sender_name: "",
            sender_email: 1,
            reciepient_name: "",
            reciepient_email: "",
            subject: "",
            url: "",
            username: "",
            password: "",
        }
    }

    /**
     * Escape html entities
     *
     * @param val
     * @param reverse
     * @returns {*}
     */
    function escapeHtmlEntities(val, reverse = false) {
        let htmlEntities = ['"', "'", "/", "`", "=", "<", ">"];
        let characterEntities = ['&quot;', '&apos;', '&#x2F;', '&#x60;', '&#x3D;', '&lt;', '&gt;'];
        htmlEntities.forEach(function (currentValue, index, arr) {
            val = reverse ? val.replaceAll(characterEntities[index], htmlEntities[index]) : val.replaceAll(htmlEntities[index], characterEntities[index]);
        });
        return val;
    }

    function setStickyBarSize(callback) {
        if (StickyData) {
            StickyData.stickyTransform = 'scale(1)';
            StickyData.stickyHeight = 'calc(100vh)';
            StickyData.stickyWidth = '100%';
            if (typeof callback !== 'undefined') {
                callback(StickyData);
            }
        }
    }

    function doesFileExist(fileNames) {

        let _html_content = document.getElementsByTagName('html')[0].innerHTML;
        let is_found = false;

        fileNames.forEach((value, index) => {
            let found = _html_content.match(value);
            if (found) {
                is_found = true;
            }
        });

        return is_found;

    }

    /**
     * @param [string]  [styleName] [filename with suffix e.g. "style.css"]
     * @param [boolean] [disabled]  [true disables style]
     */

    var disableStyle = function (styleName, disabled) {
        var styles = document.styleSheets;
        var href = "";
        for (var i = 0; i < styles.length; i++) {
            if (styles[i].href) {
                href = styles[i].href.split("/");
                href = href[href.length - 1];
                href = href.split("?");
                href = href[0];
                if (href === styleName) {
                    styles[i].disabled = disabled;
                    break;
                }
            }
        }
    };


    function initIframe() {
        let _div = createMainWrapper()
        let _span = createSpanInsideWrapper()
        let _scripts = parentScript()
        let _toggleArrow = createToggleArrow();
        let _styles = mainStyling();

        document.head.appendChild(_styles)

        let fancyBox = 0;
        StickyData.ctaButtons.forEach(function (buttonData, buttonIndex) {
            if (+buttonData.isFancyBox == 1) {
                fancyBox = 1;
            }
        })

        if (fancyBox) {
            let jquery_loaded = [/jquery-([0-9.]*)min.js/g, /jquery([.]*)min.js/g, /jquery.js/g];
            if (doesFileExist(jquery_loaded) == false) {
                document.head.appendChild(jqueryScript())
            }
            document.head.appendChild(fancyboxStyling())
            document.head.appendChild(fancyboxScript())
        }

        if (StickyData.omni_bar.stickybar_placed == 'bottom') {
            document.body.append(_div);
        } else {
            document.body.prepend(_div);
        }

        if (StickyData.stickybar_style == 'leadpax') {
            document.getElementById(stickyVars.main.id).appendChild(_span);
        }

        document.body.appendChild(_toggleArrow);
        let iframe = createIframe(StickyData);
        document.getElementById(stickyVars.main.id).appendChild(iframe);
        let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
        iframeDocument.stickybar = StickyBarData;
        iframeDocument.sticky = StickyData;
        iframeDocument.baseUrl = baseUrl;
        iframeDocument.resizeSticky = setStickyBarSize();
        let page = loadStickyHtml();
        iframe.contentWindow.document.open(), iframe.contentWindow.document.write(page), iframe.contentWindow.document.close();
        document.getElementById("stickyIframe").addEventListener( "load", function() {
            document.head.appendChild(_scripts);
        } );
    }

    function isKeyExist(data, key) {
        return data && data.hasOwnProperty(key);
    }

    function createToggleArrow() {
        let _a = document.createElement('a');
        _a.href = 'javascript:;'
        _a.id = 'show-st';
        _a.classList.add('icon', 'ico-long-arrow', 'rl-ico-long-arrow');
        if ((StickyData.stickybar_style == "omni_bar" && StickyData.omni_bar.stickybar_placed == 'top') || StickyData.stickybar_style == "full_page" || StickyData.stickybar_style == "leadpax") {
            _a.classList.add('sticky-up-show');
        } else {
            _a.classList.add('sticky-bottom-show');
        }
        _a.style.display = 'none';
        _a.style.setProperty('--arrowBg', isKeyExist(StickyData, 'bg_color') ? StickyData.bg_color : defaultValues.bgColor)
        _a.style.setProperty('--arrowColor', isKeyExist(StickyData, 'text_color') ? StickyData.text_color : defaultValues.textColor)
        _a.style.zIndex = StickyData.stack
        _a.style.position = 'fixed'
        return _a;
    }

    function parentScript() {
        let _scripts = document.createElement('script');
        _scripts.type = 'text/javascript';
        _scripts.src = `${baseUrl}/src/js/main.js?v=${StickyBarData.version}`;
        return _scripts
    }

    function fancyboxScript() {
        let _scripts = document.createElement('script');
        _scripts.type = 'text/javascript';
        _scripts.src = `${baseUrl}/src/js/prefix-fancybox.js?v=${StickyBarData.version}`;
        //_scripts.src = `https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js`;
        return _scripts
    }

    function jqueryScript() {
        let _scripts = document.createElement('script');
        _scripts.type = 'text/javascript';
        _scripts.src = `https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js`;
        return _scripts
    }

    function mainStyling() {
        let _styles = document.createElement('link');
        _styles.rel = 'stylesheet';
        _styles.href = `${baseUrl}/src/css/main.css?v=${StickyBarData.version}`;
        return _styles
    }

    function fancyboxStyling() {
        let _styles = document.createElement('link');
        _styles.rel = 'stylesheet';
        _styles.href = `${baseUrl}/src/css/prefix-fancybox.css?v=${StickyBarData.version}`;
        //_styles.href = `https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css`;
        return _styles
    }

    function createMainWrapper() {
        let _div = document.createElement('div');
        _div.id = stickyVars.main.id;
        _div.style.zIndex = StickyData.stack;
        _div.style.display = stickyVars.main.display;
        _div.style.position = 'fixed'
        _div.style.borderRadius = StickyData.leadpax.border_radius + 'px';
        
        if (StickyData.stickybar_style == "leadpax") {
            screen.width < 992 ? _div.classList.add('mobileshake', StickyData.leadpax.stickybar_placed, 'leadpax-scale') : _div.classList.add('shake');
        }else{
            if (StickyData.stickybar_style == "omni_bar") {
                var stickybarPlacedShadow = '0px -8px 18px';
                if (StickyData.omni_bar.stickybar_placed == "top") {
                    stickybarPlacedShadow = '0px 8px 18px';
                }
                _div.style.boxShadow = setOpacityInRGBA(StickyData.bg_color, StickyData.omni_bar.shadow / 100) + stickybarPlacedShadow;
                _div.classList.add('shake')
            }
            _div.style.left = 0;
            _div.style.right = 0;
        }

        return _div;
    }

    function createSpanInsideWrapper() {
        let _span = document.createElement('span');
        _span.class = "image-shadow";
        _span.style.zIndex = -1;
        _span.style.position = 'absolute';
        _span.style.top = 0;
        _span.style.right = 0;
        _span.style.bottom = 0;
        _span.style.left = 0;
        _span.style.borderRadius = StickyData.leadpax.border_radius + 'px';
        _span.style.boxShadow = setOpacityInRGBA(StickyData.bg_color, StickyData.leadpax.shadow / 100) + '0px 8px 18px';
        if (StickyData && StickyData.leadpax.content.profile_image.show_image == 'true') {
            _span.style.top = 60 + 'px';
        } else {
            _span.style.top = 0 + 'px';
        }

        return _span;
    }

    function createIframe() {
        let step3 = StickyData;
        let _iframe = document.createElement("iframe");
        _iframe.style.width = stickyVars.iframe.width;
        _iframe.style['min-height'] = stickyVars.iframe['min-height'] = StickyData.omni_bar.stickybar_start_size;
        _iframe.style.border = 0;
        _iframe.id = stickyVars.iframe.id;
        _iframe.style.margin = stickyVars.main.margin;
        _iframe.style.padding = stickyVars.main.padding;
        if (StickyData.stickybar_style == "leadpax") {
            _iframe.style.height = "100%";
        }
        _iframe.classList.add('lp-sticky-bar-iframe')
        return _iframe;
    }

    function getQueryString() {
        var windowURL = window.location.href;
        var queryString = '';
        if (windowURL.includes("clix.ly")) {
            var clixly_hash = windowURL.split("/")[3]; //get slug to find placement_id from clixly_links table
            queryString = '&clixly_hash=' + clixly_hash;
        } else if (window.funnel_info != null && window.funnel_info.client != null) { //Lead Funnels
            queryString = "&referrer_leadpop_id=" + window.funnel_info.client.client_leadpop_id;
        } else if (StickyBarData.id) {//own websites
            queryString = "&sb_id=" + StickyBarData.id + '&path=' + encodeURIComponent(windowURL);
            if (StickyBarData.web_radio == "entire") {
                queryString = "&sb_id=" + StickyBarData.id + '&path=' + encodeURIComponent(new URL(windowURL)["origin"] + '/');
            }
        }
        return queryString;
    }

    window.showFunnelInIframe = function (domain) {
        (function ($) {
            if (typeof $ !== 'undefined' && typeof $.sticky_fancybox !== 'undefined') {
                $.sticky_fancybox.defaults.animationEffect = 'zoom';
                $.sticky_fancybox.defaults.transitionEffect = 'zoom';
                $.sticky_fancybox.defaults.iframe.preload = true;
                $.sticky_fancybox.defaults.iframe.css.maxWidth = '1150px';
                $.sticky_fancybox.defaults.iframe.css.maxHeight = '800px';
                var queryString = getQueryString();
                // $.fancybox.defaults.smallBtn = true;
                $.sticky_fancybox.open({
                    src: domain + '?sticky=' + StickyBarData.sticky_js_file + queryString,
                    type: 'iframe',
                    opts: {
                        afterShow: function (instance, current) {
                            //console.info( 'done!' );
                        }
                    }
                });
            }
        })(jQuery);

    }

    function loadStickyHtml() {

        addContentBlock = '';
        var leadPaxArrowMarginRIght = '';
        var leadPaxArrowMarginBottom = '';
        var calculatedTopPadding = '';

        StickyData.is_text_below_cta = (stringToBooleanToggleValue(StickyData.is_text_below_cta) || StickyData.is_text_below_cta == 1) ? 1 : 0;

        if (StickyData) {
            let stickyDiv = document.getElementById(stickyVars.main.id);
            let stickyDiviframe = document.getElementById(stickyVars.iframe.id);
            var leadPaxContent = StickyData.leadpax.content;
            var leadPaxProfileImage = leadPaxContent.profile_image;
            var leadPaxClickToCall = leadPaxContent.click_to_call;
            var leadPaxShowContentSetting = leadPaxContent.show_content_setting;
            var leadPaxSecondaryCta = leadPaxContent.show_secondary_cta_setting;
            var leadPaxCtaArrow = leadPaxContent.cta_arrow_setting;
            var leadPaxPoweredBy = leadPaxContent.power_by;

            // TODO: WHY WE ARE ADDING PARAMETERS OVER HERE?????
            if (StickyData.stickybar_style == "leadpax") {
                stickyDiv.style.width = "100%";
                stickyDiv.style.maxHeight = "100vh";
                stickyDiv.style.maxWidth = "330px";
                stickyDiv.style.position = 'fixed';
                stickyDiv.style.textAlign = 'center';
                if (StickyData.leadpax.stickybar_placed == "top_left") {
                    stickyDiv.style.top = "15px";
                    stickyDiv.style.right = "auto";
                    stickyDiv.style.bottom = "auto";
                    stickyDiv.style.left = "15px";
                } else if (StickyData.leadpax.stickybar_placed == "top_right") {
                    stickyDiv.style.top = "15px";
                    stickyDiv.style.bottom = "auto";
                    stickyDiv.style.left = "auto";
                    if (+StickyData.stickybar_type == 3) {
                        stickyDiv.style.right = "20px";
                    } else {
                        stickyDiv.style.right = "15px";
                    }
                } else if (StickyData.leadpax.stickybar_placed == "bottom_left") {
                    stickyDiv.style.top = "auto";
                    stickyDiv.style.right = "auto";
                    stickyDiv.style.bottom = "15px";
                    stickyDiv.style.left = "15px";
                } else {
                    stickyDiv.style.top = "auto";
                    stickyDiv.style.bottom = "15px";
                    stickyDiv.style.left = "auto";
                    if (+StickyData.stickybar_type == 3) {
                        stickyDiv.style.right = "20px";
                    } else {
                        stickyDiv.style.right = "15px";
                    }
                }

                // Getting the dynamic Margin of Arrow if position is right of the CTA.
                if (leadPaxCtaArrow.arrow_position == "arrow_right") {
                    if (leadPaxCtaArrow.arrow_size >= 20) {
                        leadPaxArrowMarginRIght = 40 - leadPaxCtaArrow.arrow_size;
                    } else if (leadPaxCtaArrow.arrow_size < 20) {
                        leadPaxArrowMarginRIght = 20;
                        leadPaxArrowMarginBottom = 20 - leadPaxCtaArrow.arrow_size;
                    }
                }

                // Getting the dynamic padding of the Call To Action Phone Icon
                var iconSizeCalc = parseInt(leadPaxClickToCall.icon_size);
                if (stringToBooleanToggleValue(leadPaxProfileImage.show_image) == false) {
                    if (iconSizeCalc >= 35 && iconSizeCalc <= 50) {
                        calculatedTopPadding = iconSizeCalc + 25 + 'px';
                    } else {
                        calculatedTopPadding = iconSizeCalc + 20 + 'px';
                    }
                } else {
                    if (calculatedTopPadding > 64) {
                        calculatedTopPadding = iconSizeCalc + 25;
                    }
                }

            } else {
                if (StickyData.stickybar_style == "full_page") {
                    stickyDiv.style.height = '100vh';
                    // stickyDiv.style.display = 'flex';
                    stickyDiv.style.position = 'fixed';
                    stickyDiv.style.top = '0';
                    stickyDiv.style.left = '0';
                    if (StickyData.is_text_below_cta == 1 && StickyData.content_below_cta !== null) {
                        addContentBlock = `<div id="sb-sticky-bar__content__p" class="sb-sticky-bar__content__p fr-box fr-inline" role="application">\n
                                    <div class="fr-wrapper" dir="auto">\n
                                        <div class="fr-element fr-view">\n
                                         ${escapeHtmlEntities(StickyData.content_below_cta, true)}
                                        </div>
                                    </div>
                                </div>`;
                    }
                } else {
                    // stickyDiv.style.display = 'flex';
                    addContentBlock = '';

                    if (StickyData.omni_bar.stickybar_placed == "top") {
                        stickyDiv.style.top = '0';
                        stickyDiv.style.bottom = 'unset';
                    } else {
                        stickyDiv.style.top = 'unset';
                        stickyDiv.style.bottom = '0';
                    }
                }
            }

            var stickyBarMainCTAStyle = '';
            if (StickyData.cta_type == 2) {
                stickyBarMainCTAStyle = 'display:none';
            }
        }

        if (StickyData.stickybar_style == "full_page" && +StickyData.intend !== 0) {
            window.parent.document.body.style.overflow = 'hidden';
        }

        let backgroundImageStyle = "";
        if(StickyData.background_media[StickyData.stickybar_style].crop_image != ""){
            backgroundImageStyle = `background-image: url('${StickyData.background_media[StickyData.stickybar_style].crop_image}');background-position: ${StickyData.background_media[StickyData.stickybar_style].background_position};background-repeat: ${StickyData.background_media[StickyData.stickybar_style].background_repeat};`;
        }

        var stikcyBarHtml = `<!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Sticky Bar</title>
            <base target="_blank">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="${baseUrl}/src/css/froala.min.css?v=${StickyBarData.version}">
            <link rel="stylesheet" href="${baseUrl}/src/css/froala_style.min.css?v=${StickyBarData.version}">
            <link rel="stylesheet" href="${baseUrl}/src/css/froala_editor.pkgd.min.css?v=${StickyBarData.version}">
            <link rel="stylesheet" href="${baseUrl}/src/css/froala_extend.css?v=${StickyBarData.version}">
            <link rel="stylesheet" href="${baseUrl}/src/css/froala-custom.css?v=${StickyBarData.version}">
            <link rel="stylesheet" href="${baseUrl}/src/css/jquery.mCustomScrollbar.css?v=${StickyBarData.version}">
            <link rel="stylesheet" href="${StickyBarData.mylead_base_url}/lp_assets/theme_admin3/css/leadpax.css?v=${StickyBarData.version}">
            <link rel="stylesheet" href="${baseUrl}/src/css/custom.css?v=${StickyBarData.version}">
            <link rel="stylesheet" href="${baseUrl}/src/css/animate.css?v=${StickyBarData.version}">
            <link rel="stylesheet" href="${baseUrl}/src/css/icomoon.css?v=${StickyBarData.version}">
            <link href="https://fonts.googleapis.com/css?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,400;1,700&amp;display=swap" rel="stylesheet">
            <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
            <script src="https://kit.fontawesome.com/78d721c580.js" crossorigin="anonymous"></script>
            ${StickyData.sticky_scripts ? StickyData.sticky_scripts : ''}
        </head>
        <body>`
        if (StickyData.stickybar_style != "leadpax") {
            stikcyBarHtml += `
                        <div class="sb-sticky-bar omnibar-fullpage-sb ${StickyData && StickyData.stickybar_style == "full_page" ? 'full-page-area' : ''}" id="sticky-bar" 
                            style="
                                height: ${StickyData && StickyData.stickybar_style == "full_page" ? StickyData.stickyHeight : 'auto'}; 
                                min-height: ${StickyData && StickyData.omni_bar.stickybar_start_size ? StickyData.omni_bar.stickybar_start_size + 'px' : 'auto'}; 
                                flex-direction: ${StickyData && StickyData.stickybar_style == "full_page" ? 'column' : 'row'};
                                flex-flow: ${StickyData && StickyData.stickybar_style == "full_page" ? 'none' : 'row wrap'};
                                top: ${StickyData && StickyData.omni_bar.stickybar_placed === 'top' ? '0' : 'unset'};
                                bottom: ${StickyData && StickyData.omni_bar.stickybar_placed === 'bottom' ? '0' : 'unset'};
                                background-color: ${StickyData ? StickyData.bg_color : defaultValues.bgColor};
                                border: ${StickyData ? StickyData.border_size : defaultValues.border_size}px solid ${StickyData ? StickyData.border_color : defaultValues.border_color};
                                ${backgroundImageStyle}
                            ">
                            ${stringToBooleanToggleValue(StickyData.background_media[StickyData.stickybar_style].image_overlay_status) ? `<span data-background-overlay-color="" class="sb-background-overlay" style="background: ${StickyData.background_media[StickyData.stickybar_style].image_overlay_color} none repeat scroll 0% 0%;"></span>` : ''}
                            <div class="sb-sticky-bar__wrap" style="display: ${StickyData && StickyData.stickybar_style == "full_page" ? 'block' : 'flex'}">
                                <div id="sb-sticky-bar__p" class="sb-sticky-bar__p fr-box fr-inline text-editable" style="${stickyBarMainCTAStyle}" role="application" style="
                                    z-index: 1050;
                                    color: ${StickyData ? StickyData.text_color : defaultValues.textColor};">
                                    <div class="fr-wrapper" dir="auto">
                                        <div class="fr-element fr-view">
                                            <div style="color: ${StickyData.text_color};">${StickyData.cta_html ? escapeHtmlEntities(StickyData.cta_html, true).replaceAll('contenteditable="true"','') : escapeHtmlEntities(defaultValues.sticky_cta, true)}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="cta-button-design-preview">`
            stikcyBarHtml += multipleCTAButtonHTML();
            stikcyBarHtml += `</div>
                                ${addContentBlock}`
            stikcyBarHtml += crossIconHTML();
            stikcyBarHtml += `</div>
                        </div>`
        } else {
            stikcyBarHtml += `
                    <div id= "sticky-bar-leadpax"
                        class="frontend-leadpax-style sb-leadpax-box ${StickyData && leadPaxProfileImage.show_image == 'true' && leadPaxProfileImage.crop_image ? 'has-image' : ''} ${StickyData && leadPaxContent.stickybar_placed ? leadPaxContent.stickybar_placed : 'bottom-right'}
                        ">
                            ${leadPaxProfileImage.crop_image ?
                `<div class="sb-leadpax-box__user-image" data-sb-image>
                                <span style="border-width: ${StickyData && StickyData.border_size}px ${StickyData && StickyData.border_size}px medium;
                                border-color: ${StickyData && StickyData.border_color};
                                background-color: ${StickyData ? StickyData.bg_color : defaultValues.bgColor};
                                height: ${StickyData && parseInt(StickyData.border_size) + 60}px;
                                ">
                                </span>
                                <img src="${leadPaxProfileImage.crop_image + '?v=' + Math.floor(Math.random() * 10)}" 
                                    alt="image description" 
                                    ${leadPaxProfileImage.image_border_status && stringToBooleanToggleValue(leadPaxProfileImage.image_border_status) ? `style="border: 2px solid ${leadPaxProfileImage.image_border_color ? leadPaxProfileImage.image_border_color : 'transparent'};` : ''}
                                    ">
                            </div>` : ''}

                            <div data-sb-backgound class="leadpax-sb-background" 
                                style="
                                    background-color: ${StickyData && StickyData.bg_color};
                                    border: ${StickyData && StickyData.border_size}px solid ${StickyData && StickyData.border_color};
                                    border-radius: ${StickyData && StickyData.leadpax.border_radius}px;
                                    ${backgroundImageStyle}
                            ">
                            <div class="sb-leadpax-box__wrap" id="sb-leadpax-box-wrap" style="${calculatedTopPadding ? `padding-top:${calculatedTopPadding};` : ''}">
                                ${stringToBooleanToggleValue(StickyData.background_media.leadpax.image_overlay_status) ? `<span data-background-overlay-color="" class="sb-background-overlay" style="background: ${StickyData.background_media.leadpax.image_overlay_color} none repeat scroll 0% 0%; border-radius: ${StickyData && StickyData.leadpax.border_radius}px;"></span>` : ''}
                                    <div class="sb-leadpax-box__area fr-view">
                                        <a href="${StickyData && leadPaxClickToCall.number == '' ? '#' : 'tel:' + leadPaxClickToCall.number}" 
                                            class="sb-leadpax-box__tel sb-phone-number" 
                                            style="color: ${leadPaxClickToCall && leadPaxClickToCall.icon_color};
                                            text-decoration: none;
                                            font-size: ${leadPaxClickToCall && leadPaxClickToCall.icon_size}px;
                                            display: ${leadPaxClickToCall && leadPaxClickToCall.show_number == 'false' ? 'none' : 'block'};" 
                                            ${(/iPhone|iPad|iPod/i.test(navigator.userAgent))?'':'target="_self"'}
                                            data-leadpax-click-to-call>
                                            <i class="icon ico-call"></i>
                                        </a>`
            stikcyBarHtml += crossIconHTML();
            stikcyBarHtml += `<div class="sb-leadpax-box__user-detail"
                                            style="display: ${leadPaxShowContentSetting && (leadPaxShowContentSetting.full_name_status == 'false' && leadPaxShowContentSetting.license_status == 'false' && leadPaxShowContentSetting.title_status == 'false') ? 'none' : 'block'}; 
                                        ">
                                            <span 
                                                class="sb-leadpax-box__name text-editable" 
                                                data-leadpax-name-froala
                                                style="display: ${stringToBooleanToggleValue(leadPaxShowContentSetting.full_name_status) ? 'block' : 'none'};
                                            ">
                                                ${leadPaxShowContentSetting.full_name && escapeHtmlEntities(leadPaxShowContentSetting.full_name, true)}
                                            </span>
                                            <span 
                                                class="sb-leadpax-box__user-type text-editable" 
                                                data-leadpax-user-type-froala
                                                style="display: ${stringToBooleanToggleValue(leadPaxShowContentSetting.title_status) ? (leadPaxShowContentSetting.title == null ? 'none' : 'block') : 'none'};
                                                ">
                                                    ${leadPaxShowContentSetting.title && escapeHtmlEntities(leadPaxShowContentSetting.title, true)}
                                            </span>
                                            <span 
                                                class="sb-leadpax-box__lincese-code text-editable" 
                                                data-leadpax-license-froala
                                                style="display: ${stringToBooleanToggleValue(leadPaxShowContentSetting.license_status) ? (leadPaxShowContentSetting.license_no == null ? 'none' : 'block') : 'none'};
                                                ">
                                                    ${leadPaxShowContentSetting.license_no && escapeHtmlEntities(leadPaxShowContentSetting.license_no, true)}
                                            </span>
                                        </div>
                                        <div class="sb-leadpax-box__detail-area 
                                            ${leadPaxCtaArrow && leadPaxCtaArrow.arrow_position == 'arrow_below' ? 'arrow_bottom' : ''} 
                                            ${stringToBooleanToggleValue(leadPaxSecondaryCta.show_cta) == false && stringToBooleanToggleValue(leadPaxCtaArrow.show_arrow) && leadPaxCtaArrow.arrow_position != "arrow_below" ? 'no-cta-text' : ''}"
                                            style="display: ${StickyData && (StickyData.cta_type == "2" && stringToBooleanToggleValue(leadPaxSecondaryCta.show_cta) == false && stringToBooleanToggleValue(leadPaxCtaArrow.show_arrow) == false) ? 'none' : 'block'};
                                            ">
                                                <div 
                                                class="sb-leadpax-box__p text-editable" 
                                                data-leadpax-title-froala
                                                style="display: ${StickyData && StickyData.cta_type == "2" ? 'none' : 'block'};
                                                ">
                                                    ${StickyData.cta_html && escapeHtmlEntities(StickyData.cta_html, true).replaceAll('contenteditable="true"','')}
                                                </div>
                                                <div 
                                                    class="sb-leadpax-box__cta-text"
                                                    style="display: ${stringToBooleanToggleValue(leadPaxSecondaryCta.show_cta) ? 'block' : 'none'};
                                                    ">
                                                        <p class="sb-leadpax-box__cta-p text-editable" data-leadpax-secondary-cta-froala>
                                                            ${leadPaxSecondaryCta.cta_content && escapeHtmlEntities(leadPaxSecondaryCta.cta_content, true)}
                                                        </p>
                                                </div>
                                                <span 
                                                    class="sb-leadpax-box__img-arrow"
                                                    style= "display: ${stringToBooleanToggleValue(leadPaxCtaArrow.show_arrow) ? 'block' : 'none'};
                                                    color: ${leadPaxCtaArrow.icon_color && leadPaxCtaArrow.icon_color ? leadPaxCtaArrow.icon_color : 'rgba(255, 255, 255, 1)'};
                                                    font-size: ${leadPaxCtaArrow.arrow_size && leadPaxCtaArrow.arrow_size ? leadPaxCtaArrow.arrow_size + 'px' : '34px'};
                                                    margin-right: ${leadPaxArrowMarginRIght && leadPaxArrowMarginRIght + 'px'};
                                                    margin-bottom: ${leadPaxArrowMarginBottom && leadPaxArrowMarginBottom + 'px'};
                                                    "
                                                    data-leadpax-arrow>
                                                    <i class="icon ${leadPaxCtaArrow && leadPaxCtaArrow.icon ? leadPaxCtaArrow.icon : 'ico-arrow1'}"></i>
                                                </span>
                                        </div>
                                        <div class="cta-button-design-preview">`
            stikcyBarHtml += multipleCTAButtonHTML();
            stikcyBarHtml += `</div>
                                        <div 
                                            class="sb-leadpax-box__powered-by"
                                            style="display: ${leadPaxPoweredBy.show_power_content == 'false' ? 'none' : 'block'};
                                            ">
                                            <p class="sb-leadpax-box__powered-by__p text-editable" data-leadpax-powered-by-froala>
                                                ${leadPaxPoweredBy.power_by_content && leadPaxPoweredBy.power_by_content ? escapeHtmlEntities(leadPaxPoweredBy.power_by_content, true) : 'Powered by leadPops Inc.'}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>`
        }

        stikcyBarHtml += `<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                        <script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
                        <script type="text/javascript" src="${baseUrl}/src/js/jquery.mCustomScrollbar.js?v=${StickyBarData.version}"></script>
                        <script type="text/javascript" src="${baseUrl}/src/js/stats.js?v=${StickyBarData.version}"></script>
                        <script type="text/javascript" src="${baseUrl}/src/js/iframeScripts.js?v=${StickyBarData.version}"></script>
                        <script type="text/javascript">
                            window.stickybar_cta_clicked = false;
                            window.stickybar_ctc_clicked = false;
                            window.sticky_ctc_clicked = false;
                            jQuery(".full-page-area").mCustomScrollbar({});
                            document.sticky = window.parent.StickyData;
                            getFontFamilies();
                            if(document.sticky.stickybar_style != "leadpax"){
                                loadFontSize();
                                fontChanges();
                                jQuery(window).on('resize', function() {
                                    fontChanges();
                                });
                            }
                        </script>
                    </body>
                </html>`;

        return stikcyBarHtml;

    }

    function crossIconHTML() {
        let crossIconSize = '24px';
        let crossIconTopPosition = '18px';
        if (StickyBarData.sticky_button_preview_styles != undefined) {
            let buttonStyleJsonParsed = JSON.parse(StickyBarData.sticky_button_preview_styles);
            crossIconSize = buttonStyleJsonParsed.crossIconSize;
            crossIconTopPosition = buttonStyleJsonParsed.crossIconTop;
        }
        return `<a href="javascript:void(0)" target="_self" id="close-button" class="sb-sticky-bar__close" style="display: none;top:${StickyData.stickybar_style == "omni_bar" ? crossIconTopPosition : '18px'}" >
        <i class="sb-close-btn" style="color: ${StickyData.text_color};width:${StickyData.stickybar_style == "omni_bar" ? crossIconSize : '24px'}; height:${StickyData.stickybar_style == "omni_bar" ? crossIconSize : '24px'}"></i>
    </a>`;
    }

    function multipleCTAButtonHTML() {
        let ctaButtonsHTML = '';
        let buttonActionUrl = 'javascript:;';
        let leadPaxMinHeight = target ='';
        StickyData.ctaButtons.forEach(function (buttonData, buttonIndex) {
            let buttonType = +buttonData.buttonType;
            if (buttonType != 5) {
                switch (buttonType) {
                    case 1:
                        var queryString = getQueryString();
                        var funnelUrl = buttonData.domain ? buttonData.domain + '?sticky=' + StickyBarData.sticky_js_file + queryString : '#';
                        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || +buttonData.isFancyBox == 0) {
                            buttonActionUrl = funnelUrl;
                            target = 'target="_blank"';
                            buttonData.isFancyBox = 0;
                        }
                        break;
                    case 2:
                        buttonActionUrl = (buttonData.buttonAction[buttonType] && buttonData.buttonAction[buttonType].indexOf('http') == -1) ? `https://${buttonData.buttonAction[buttonType]}` : buttonData.buttonAction[buttonType];
                        target = 'target="_blank"';
                        break;
                    case 3:
                        buttonActionUrl = `tel:${buttonData.buttonAction[buttonType]}`;
                        if (/iPhone|iPad|iPod/i.test(navigator.userAgent)){
                            target = '';
                        }
                        else{
                            target = 'target="_self"';
                        }
                        break;
                    }

                // Button Style
                let buttonStyle = '';
                if (StickyBarData.sticky_button_preview_styles) {
                    let parsedButtonPreviewStyle = JSON.parse(StickyBarData.sticky_button_preview_styles);
                    let buttonStyleData = parsedButtonPreviewStyle.buttonStyle;
                    if (typeof buttonStyleData['button' + buttonIndex] != "undefined") {
                        buttonStyle += `${typeof buttonStyleData['button' + buttonIndex].radius != "undefined" ? `border-radius: ${buttonStyleData['button' + buttonIndex].radius};` : ''}
                ${typeof buttonStyleData['button' + buttonIndex].shadow != "undefined" ? `box-shadow: rgba(0, 0, 0, 0.4) 0px ${buttonStyleData['button' + buttonIndex].shadow} 22px -15px;` : ''}`;

                        if (typeof buttonStyleData['button' + buttonIndex].width != "undefined" && typeof buttonStyleData['button' + buttonIndex].height != "undefined") { // both height and width means (Around Padding)
                            buttonStyle += `padding: ${buttonStyleData['button' + buttonIndex].height} ${buttonStyleData['button' + buttonIndex].width};`;
                        } else if (typeof buttonStyleData['button' + buttonIndex].width != "undefined" && typeof buttonStyleData['button' + buttonIndex].height == "undefined") { // Only For the width means (left & Right Padding)
                            buttonStyle += `padding-left: ${buttonStyleData['button' + buttonIndex].height};padding-right: ${buttonStyleData['button' + buttonIndex].height};`;
                        } else if (typeof buttonStyleData['button' + buttonIndex].width == "undefined" && typeof buttonStyleData['button' + buttonIndex].height != "undefined") { // Only For the Height means (Top & Bottom Padding)
                            buttonStyle += `padding-top: ${buttonStyleData['button' + buttonIndex].height};padding-bottom: ${buttonStyleData['button' + buttonIndex].height};`;
                        }
                    }
                    // Button Height Sync...
                    if(StickyData.stickybar_style == "leadpax"){
                        leadPaxMinHeight = 'min-height:'+ parseInt(parsedButtonPreviewStyle.leadPaxButtonHeight) + 'px;';
                        leadPaxPadding = 'padding-top: '+parseInt(parsedButtonPreviewStyle.leadPaxButtonPadding)+'px !important;padding-bottom: '+parseInt(parsedButtonPreviewStyle.leadPaxButtonPadding)+'px !important;';
                    }
                }
                ctaButtonsHTML += `<div class="button-wrap">
                                <a href="${buttonActionUrl}"
                                    ${target}
                                    class="button button-primary sb-sticky-bar__btn register-stats animated ${StickyData.animation}" 
                                    id="sb-sticky-bar__btn${buttonIndex}"
                                    data-stickybar-button=${buttonIndex}
                                    style="
                                    display: ${buttonData.buttonType === '5' ? 'none' : 'flex'};
                                    align-items: center;
                                    justify-content: center; 
                                    text-decoration: none; 
                                    background-color: ${buttonData.buttonColor};
                                    color: ${buttonData.buttonTextColor};
                                    border: 1px solid ${buttonData.buttonBorderColor};
                                    ${buttonStyle}
                                    ${leadPaxMinHeight}
                                    ${StickyData.stickybar_style == "leadpax" ? leadPaxPadding : ''}
                                    ">
                                    <div id="sb-sticky-bar__btn-editable" class="sb-sticky-bar__btn-editable" style="display:flex; z-index: 1050; width: 100%; text-align: center;align-items: center;justify-content: center;  ${leadPaxMinHeight}">
                                        <div class="fr-wrapper" dir="auto">
                                            <div class="fr-element fr-view" >
                                            <div style="color: ${buttonData.buttonTextColor};">${escapeHtmlEntities(buttonData.ctaButtonHtml, true)}</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>`;
            }
        });

        return ctaButtonsHTML;
    }

    return initIframe();
}