<div id="formsio_data" style="display: none;">
<?php echo esc_html($forms_url); ?>
</div>
<script>
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=/";
}
function formsio_getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

function formsio_Form(){
    console.log('called');
    if(formsio_getCookie('token')){
        //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;
            <?php 
            $token = $_COOKIE["token"];
            add_option('user_token', $token, null, 'no');
            update_option( 'user_token', $token );
            $tokenParts    = explode(".", $token);
            $tokenHeader   = base64_decode($tokenParts[0]);
            $tokenPayload  = base64_decode($tokenParts[1]);
            $jwtHeader     = json_decode($tokenHeader);
            $jwtPayload    = json_decode($tokenPayload);
            $region        = $jwtPayload->env;
            setcookie("region", $region);
            ?>
            var existing_token = formsio_getCookie('token');
            if (existing_token != token_value1) {
                formsio_setCookie('token',token_value1,1);
            }
        })
        
    }
    else{
        setTimeout(()=>{
            var z=document.getElementById('formsio_view');
            z.contentWindow.postMessage({'500apps':true},'*');
            },2000);
            window.addEventListener('message',(event)=>{
            formsio_setCookie('token',event.data,1);
            var token_value = event.data;
            <?php 
            $token = $_COOKIE["token"];
            add_option('user_token', $token, null, 'no');
            update_option( 'user_token', $token );
            $tokenParts    = explode(".", $token);
            $tokenHeader   = base64_decode($tokenParts[0]);
            $tokenPayload  = base64_decode($tokenParts[1]);
            $jwtHeader     = json_decode($tokenHeader);
            $jwtPayload    = json_decode($tokenPayload);
            $region        = $jwtPayload->env;
            setcookie("region", $region);
            ?>
        })
    }
}
</script>
<!-- The Modal -->
<div id="formsseoModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="header-border-bottom">
            <span class="close_forms">&times;</span>
            <p class="apps">Other Plugins In 500apps</p>
        </div>
        <div class="plugins">
            <div class="plugins-card">
                <div class="card lift">
                    <div class="card-body card-hover-animation">
                        <div class="mb-2 mx-auto">
                            <img src="<?php echo plugin_dir_url( __FILE__ ) . 'images/ninja seo.svg'; ?>"/>
                        </div>
                        <div class="padding-left-right-15 d-flex-justify-content">
                         <h5 class="mt-3 font-weight-bold text-dark">Ninjaseo</h5>
                            <div class="btn-center"><a href="" class="btn-primary">Install</a></div>
                     </div>
                        <p class="mb-3 text-card-height multi-line-clamp-2 padding-left-right-15 padding-bottom-18 margin-0">
                            Get the entire site crawled, identify major issues to optimize your website.Optimize the website performance accordingly
                        </p>
                     
                    </div>
                </div>
            </div>
            <div class="plugins-card">
                <div class="card lift">
                    <div class="card-body card-hover-animation">
                        <div class="mb-2 mx-auto">
                            <img src="<?php echo plugin_dir_url( __FILE__ ) . 'images/mail send.svg'; ?>"/>
                        </div>
                        <div class="padding-left-right-15 d-flex-justify-content">
                         <h5 class="mt-3 font-weight-bold text-dark">Mailsend</h5>
                            <div class="btn-center"><a href="" class="btn-primary">Install</a></div>
                     </div>
                        <p class="mb-3 text-card-height multi-line-clamp-2 padding-left-right-15 padding-bottom-18 margin-0">
                            Build and send newsletters, manage drip campaigns with email automation, and much more.
                        </p>
                     
                    </div>
                </div>
            </div>
            <div class="plugins-card">
                <div class="card lift">
                    <div class="card-body card-hover-animation">
                        <div class="mb-2 mx-auto">
                            <img src="<?php echo plugin_dir_url( __FILE__ ) . 'images/pushly.svg'; ?>"/>
                        </div>
                        <div class="padding-left-right-15 d-flex-justify-content">
                         <h5 class="mt-3 font-weight-bold text-dark">Pushly</h5>
                            <div class="btn-center"><a href="" class="btn-primary">Install</a></div>
                     </div>
                        <p class="mb-3 text-card-height multi-line-clamp-2 padding-left-right-15 padding-bottom-18 margin-0">
                           Browser Push Notification Software Engage your visitors even when they are not on your website.
                        </p>
                     
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<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: #aaaaaa;
        float: right;
        font-size: 24px;
        position: relative;
        top: -5px;
    }
    .header-border-bottom .close_forms:hover,
    .header-border-bottom .close_forms:focus {
        color:  #000;
        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>