
<div id="formsio_data" style="display: none;">
<?php echo esc_html($forms_contents); ?>
</div>
<div id="formsio_data">
<iframe onload="formsio_Form()" id="formsio_view" name="formsio_view" style="width: 100%; height: 800px;" src="<?php echo $forms_url ?>"></iframe>
</div>
<script>
/** to set the cookie */
function formsio_setcookie(name, value, days) {
      var expires = "";
      if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
/** to get the cookie */
function formsio_getcookie(name) {
  var cookie_name = name + "=";
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
    var extracted_cookie = cookies[i];
    while (extracted_cookie.charAt(0) == ' ') extracted_cookie = extracted_cookie.substring(1, extracted_cookie.length);
    if (extracted_cookie.indexOf(cookie_name) == 0) return extracted_cookie.substring(cookie_name.length, extracted_cookie.length);
}
return null;
}

/** getting token from infinity **/ 
function formsio_Form(){
        //return false;
        var token_value1 = '';
        setTimeout(()=>{
            var z=document.getElementById('formsio_view');
            z.contentWindow.postMessage({'500apps':true},'*');
        },2000);
        window.addEventListener('message',(event)=>{
            token_value1 = event.data;
            formsio_addtoken(token_value1);
            var existing_token = formsio_getcookie('token');
            if (existing_token != token_value1) {
                formsio_setcookie('token',token_value1,1);
            }
        })  
}
/** adding token value to DB through ajax **/
function formsio_addtoken(token_value){
    var token_value = token_value;
    console.log(token_value);
    postData = {
        token_value: token_value,
        action: 'formsio_addtoken'
    };
    jQuery.post(ajaxurl, postData, function (response) {
        setTimeout(function () {
            var response_data = jQuery.trim(response);
            console.log(response_data);
            if (response_data == 'updated0') {
                //location.reload();
                console.log('inserted');
            }
            else
            {
                console.log('not inserted');
            }
        }, 2000);
    });
}
</script>
<?php
include 'other_products.php';
?>
<style>
    #wpcontent {
        padding: 0px !important;
    }
    [id='toplevel_page_demo-classes-class.wpnf_admin'] .wp-first-item { display:none; }
    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed;
        z-index: 99999;
        padding-top: 100px;
        left: 78px;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: #0000002e;
    }
    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #f1f1f1;
        width: 70%;
        border-radius: 8px;
    }
    /* The Close Button */
    .header-border-bottom .close_forms {
        color: #cbc8c8;
        float: right;
        font-size: 24px;
        position: relative;
        top: -5px;
    }
    .header-border-bottom .close_forms:hover,
    .header-border-bottom .close_forms:focus {
        color: #cfcfcf;
        text-decoration: none;
        cursor: pointer;
    }
    .plugins {
        display: flex;
        flex-wrap: wrap;
        margin-right: -12px;
        margin-left: -12px;
        padding: 0px 10px;
    }
    .plugins-card {
        flex: 0 0 32%;
        max-width: 32%;
        padding-right: 5px;
        padding-left: 6px;
    }

    .header-border-bottom {
        border-bottom: 1px solid #f1f1f1;
        margin-bottom: 10px;
    }
    .header-border-bottom .apps {
        margin: 0px 0px 15px;
        font-size: 17px;
        font-weight: 500;

    }
    .plugins-card .card-body.card-hover-animation {
        padding: 0px;
    }
    .plugins-card .card {
        background-color: #ffffff;
        background-clip: border-box;
        border: 1px solid #edf2f9;
        border-radius: 0.5rem;
        border-color: #edf2f9;
        box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);
        padding: 0px;
    }
    .plugins-card .btn-center {
        text-align: center;
        padding-top: 16px;
    }
    .plugins-card .btn-center a {
        text-decoration: none;
        font-size: 14px;
    }
    .plugins-card .btn-center a:hover {
        color: #1b5df8;
        font-size: 14px;
    }
    .plugins-card .multi-line-clamp-2 {
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        color: #757677;
    }
    .plugins-card h5 {
        font-family: "Poppins", sans-serif;
        font-weight: 600 !important;
        font-size: 18px;
        line-height: 28px;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .plugins-card img {
     width: 100%;
     border-radius: 3px;
 }
 .lift {
    transition: box-shadow .25s ease, transform .25s ease;
}
.lift:hover, .lift:focus {
    box-shadow: 0 1rem 2.5rem rgba(18, 38, 63, 0.1), 0 0.5rem 1rem -0.75rem rgba(18, 38, 63, 0.1) !important;
    transform: translate3d(0, -3px, 0);
}
.padding-left-right-15{
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.d-flex-justify-content{
    display: flex;
    justify-content: space-between;
}
.margin-0{
    margin: 0px !important;
}
.padding-bottom-18{
    padding-bottom: 18px !important;
}
</style>