<form id="myvformdata2form">
<?php wp_nonce_field('myvformdata2','vfm-nonce2'); ?>
</form>
<form id="myvformdata3form">
<?php wp_nonce_field('myvformdata3','vfm-nonce3'); ?>
</form>
<form id="myvformdata4form">
<?php wp_nonce_field('myvformdata4','vfm-nonce4'); ?>
</form>
<form id="myvformdata22form">
<?php wp_nonce_field('myvformdata22','vfm-nonce22'); ?>
</form>



<style>
    .vform-custom-notice {
        background-color: #dff0d8;
        border: 1px solid #3c763d;
        color: #3c763d;
        padding: 15px 20px;
        margin: 20px 0;
        position: relative;
        border-radius: 4px;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        animation: fadeIn 0.3s ease-in;
        width: 96%;
    }

    .vform-custom-notice button {
        background: transparent;
        border: none;
        font-size: 20px;
        font-weight: bold;
        color: #3c763d;
        cursor: pointer;
    }

    @keyframes fadeIn {
        from {opacity: 0;}
        to {opacity: 1;}
    }
</style>

<?php if (isset($_GET['import']) && $_GET['import'] === 'success'): ?>
    <div id="vformCustomNotice" class="vform-custom-notice">
        <span>✅ VPSUForm imported successfully!</span>
        <button id="vformCloseNotice">×</button>
    </div>
<?php endif; ?>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const closeBtn = document.getElementById('vformCloseNotice');
        const notice = document.getElementById('vformCustomNotice');

        if (closeBtn && notice) {
            closeBtn.addEventListener('click', function () {
                // Fade out (optional)
                notice.style.opacity = '0';
                setTimeout(() => {
                    // Redirect to main vform page after fade out
                    window.location.href = 'admin.php?page=vform';
                }, 300); // Match CSS animation
            });
        }
    });
</script>


<?php  include VFORM_PLUGIN_PATH."inc/admin/notification-bar.php"; ?>




<div class="vf-maincard">
    <div class="vf-smallcard">
        <div class="vf-label" id="formCountLabel"></div>
        <div class="vf-counter" id="formCountValue">0</div>
        Total Forms
        <div class="vf-bar"><span id="formCountBar"></span></div>
    </div>
    <div class="vf-smallcard">
        <div class="vf-label" id="viewsLabel"></div>
        <div class="vf-counter" id="viewsValue">0</div>
        Total Views
        <div class="vf-bar"><span id="viewsBar"></span></div>
    </div>
    <div class="vf-smallcard">
        <div class="vf-label" id="entriesLabel"></div>
        <div class="vf-counter" id="entriesValue">0</div>
        Total Entries
        <div class="vf-bar"><span id="entriesBar"></span></div>
    </div>
</div>

<style>
    .vf-maincard {
        display: flex;
        justify-content: center;
    }
    .vf-smallcard{
    background:#fff;
    border-radius:10px;
    padding:12px 16px;
    box-shadow:0 0 8px rgba(0,0,0,0.08);
    width:200px;
    margin:20px;
    }
    .vf-label{
    font-size:13px;
    font-weight:600;
    margin-bottom:4px;
    }
    .vf-counter{
    font-size:28px;
    font-weight:700;
    margin-bottom:6px;
    }
    .vf-bar{
    width:100%;
    height:6px;
    background:#e6e6e6;
    border-radius:6px;
    overflow:hidden;
    }
    .vf-bar span{
    display:block;
    height:100%;
    width:0;
    transition:width 1s ease;
    background:#0A84FF;
    }

</style>

<?php

$vf_forms = $wpdb->get_results("SELECT * FROM {$wpdb->prefix}vform ORDER BY id DESC",OBJECT);

$views = $wpdb->get_results( "SELECT formid, COUNT(DISTINCT ip) AS distinct_ip_count FROM {$wpdb->prefix}vform_fields GROUP BY formid", OBJECT );
$vf_view = 0;
foreach ($views as $v => $b) {
    $vf_view += $b->distinct_ip_count;
}
                        
$sb = $wpdb->get_results("SELECT count(*) as cnt FROM {$wpdb->prefix}vform_userinput", OBJECT);
?>
<script>
  // dynamic values from PHP 
    let totalForms = <?php echo count($vf_forms); ?>; 
    let totalViews = <?php echo $vf_view; ?>;
    let totalEntries = <?php echo $sb[0]->cnt; ?>;   

    // define target milestones (you can control growth psychology)
    let maxForms = 50;
    let maxViews = 50000;
    let maxEntries = 100000;

    // labels dynamic motivational message
   function getFormLabel(count){
        if(count == 0) return "Start by creating your first form! 🚀";
        if(count < 3) return "Nice start — few forms live!";
        if(count < 7) return "Momentum building!";
        if(count < 15) return "You’re scaling up fast!";
        if(count < 30) return "High performance user!";
        return "Power Creator Mode! 💼🔥";
    }

    function getViewLabel(count){
        if(count == 0) return "No views yet — launch your form and drive traffic!";
        if(count < 1000) return "Early impressions coming in!";
        if(count < 5000) return "Your reach is growing steadily!";
        if(count < 15000) return "Massive visibility happening!";
        if(count < 50000) return "You’re a traffic magnet!";
        return "You’re dominating the reach game! 🚀📈";
    }

    function getEntriesLabel(count){
        if(count == 0) return "No entries yet — collect your first lead! ✨";
        if(count < 100) return "Lead flow started!";
        if(count < 500) return "Your funnel is warming up well!";
        if(count < 2000) return "Strong lead acquisition happening!";
        if(count < 10000) return "Impressive lead conversions!";
        return "Top performing funnel — elite level! 🔥🏆";
    }


    document.getElementById('formCountLabel').innerHTML = getFormLabel(totalForms);
    document.getElementById('viewsLabel').innerHTML = getViewLabel(totalViews);
    document.getElementById('entriesLabel').innerHTML = getEntriesLabel(totalEntries);

    // Counter animation
    function animateCount(element, start, end, duration) {
        let startTimestamp = null;
        const step = (timestamp) => {
            if(!startTimestamp) startTimestamp = timestamp;
            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
            element.innerHTML = Math.floor(progress * (end - start) + start);
            if(progress < 1) window.requestAnimationFrame(step);
        };
        window.requestAnimationFrame(step);
    }

    // apply animations
    animateCount(document.getElementById('formCountValue'), 0, totalForms, 1200);
    animateCount(document.getElementById('viewsValue'), 0, totalViews, 1200);
    animateCount(document.getElementById('entriesValue'), 0, totalEntries, 1200);

    // progress bar %
    document.getElementById('formCountBar').style.width = totalForms == 0 ? "2px" : ((totalForms / maxForms) * 100) + "%";
    document.getElementById('viewsBar').style.width = totalViews == 0 ? "2px" : ((totalViews / maxViews) * 100) + "%";
    document.getElementById('entriesBar').style.width = totalEntries == 0 ? "2px" : ((totalEntries / maxEntries) * 100) + "%";



</script>







<div class="AppLayout_content__sRnX9">
    <div>
        <div class="ZapsHeader_root__1w5JV">
           
            <div class="ZapsHeader_midRow__6zPw1">
                <div class="ZapsHeader_midRowRight__i6OVq">
                    <div class="SearchInput_root__Sq6PZ">
                        <div data-zds="true" class="css-1or4env-Field">
                            <div data-zds="true">
                                <div data-icon-before="" data-layout="inline" data-radius="medium" data-size="medium"
                                    data-zds="true" role="presentation" class="css-5b13qo-Input">
                                    <div data-zds="true" class="css-164cvjt-Input__inputLayout">
                                        <div data-interactive="" data-size="medium" data-zds="true"
                                            class="css-8wgmi1-Input__icon"><span aria-hidden="true"
                                                data-testid="iconContainer" data-zds="true"
                                                class="css-dyvc8d-Icon--navSearch--animate--24x24"><svg
                                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    height="24" width="24" size="24" name="navSearch">
                                                    <path fill="#2D2E2E"
                                                        d="m5.134 17.452-2.843 2.842 1.415 1.415 2.842-2.843-1.414-1.414ZM13 3c-4.41 0-8 3.59-8 8 0 3.75 2.98 8 8 8 4.41 0 8-3.59 8-8s-3.59-8-8-8Zm0 14c-3.8 0-6-3.21-6-6 0-3.31 2.69-6 6-6s6 2.69 6 6-2.69 6-6 6Z">
                                                    </path>
                                                </svg></span></div><input aria-invalid="false" data-size="medium"
                                            id="search-input" placeholder="Search by name" data-zds="true"
                                            class="css-6uoi69-Input__input-TextInput__input" type="search" value="">
                                    </div>
                                </div>
                            </div>
                            <div aria-live="off" id="search-input-description" data-zds="true"
                                class="css-mmeg24-Field__helpTextWrapper"></div>
                        </div>
                    </div>
                </div>
                <div class="ZapsHeader_topRowActions__03iI6">
                    <div class="CreationButton_root__Plo2x">
                        <div>
                            

                            <button aria-controls="" aria-disabled="false" aria-label="Toggle create actions menu"
                                data-color="primary" data-icon="before" data-size="medium" data-zds="true"
                                id="create-actions-button" role="button" class="css-1gu18il-BaseButton importmyvform"
                                fdprocessedid="hm9o0o"><span data-zds="true"
                                class="css-x9pyp4-BaseButton__buttonContent"><span data-zds="true"
                                    class="css-xmvvvu-BaseButton__buttonIcon"><span aria-hidden="true"
                                        data-testid="iconContainer" data-zds="true"
                                        class="css-fmjbfg-Icon--formAdd--animate--disable-pointer-events--block--24x24"><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 4L12 14M12 14L15 11M12 14L9 11" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M12 20C7.58172 20 4 16.4183 4 12M20 12C20 14.5264 18.8289 16.7792 17 18.2454" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/>
                                        </svg></span></span><span data-zds="true"
                                    class="css-g52fnz-BaseButton__buttonText">Import</span></span>
                            </button>


                            <button aria-controls="" aria-disabled="false" aria-label="Toggle create actions menu"
                                data-color="primary" data-icon="before" data-size="medium" data-zds="true"
                                id="create-actions-button" role="button" class="css-1gu18il-BaseButton createmyvform"
                                fdprocessedid="hm9o0o"><span data-zds="true"
                                    class="css-x9pyp4-BaseButton__buttonContent"><span data-zds="true"
                                        class="css-xmvvvu-BaseButton__buttonIcon"><span aria-hidden="true"
                                            data-testid="iconContainer" data-zds="true"
                                            class="css-fmjbfg-Icon--formAdd--animate--disable-pointer-events--block--24x24"><svg
                                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                height="24" width="24" size="24" name="formAdd">
                                                <path fill="#2D2E2E" d="M13 19v-6h6v-2h-6V5h-2v6H5v2h6v6h2Z"></path>
                                            </svg></span></span><span data-zds="true"
                                        class="css-g52fnz-BaseButton__buttonText">Create</span></span>
                            </button>
                                    
                                    
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="Table_tableContainer__1Qt4Y"><span data-focus-scope-start="true" hidden=""></span>
            <table class="Table_table__w3DQr ZapTable_zapTable___trQK" data-rac="" aria-label="Zaps table"
                id="react-aria3819347747-:rf:" role="grid" aria-multiselectable="true" tabindex="-1"
                aria-describedby="react-aria-description-0" style="table-layout: fixed; width: fit-content;">
                <thead role="rowgroup" class="Table_th__SjS1z" data-rac="">
                    <tr role="row">
                        <th tabindex="-1" data-key="title" role="columnheader" id="react-aria3819347747-:rf:-title"
                            class="Table_th__SjS1z Table_titleCell__Ap63B sortable desc" data-rac="" style="width: 164px;"
                            aria-sort="none" data-allows-sorting="true" aria-describedby="react-aria-description-1">

                            <span class="Table_thSortable__WkDJg"><span class="css-1z0fpap-Text"
                                    data-zds="true">Name</span>

                                    
                                    <span class="Table_sortedIcon__0bJL9 sorting-indicator"><span
                                        aria-hidden="true" data-testid="iconContainer" data-zds="true"
                                        class="css-r3to05-Icon--arrowBigUp--animate--16x16--GrayWarm9"><svg
                                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            height="16" width="16" size="16" color="GrayWarm9" name="arrowBigUp">
                                            <path fill="#2D2E2E"
                                                d="m13 7.14 6 5.04V9.56l-7-5.87-7 5.87v2.62l6-5.04V20h2V7.14Z"></path>
                                        </svg></span></span></span>
                            </th>
                        <th tabindex="-1" data-key="react-aria-2" role="columnheader"
                            id="react-aria3819347747-:rf:-react-aria-2"
                            class="Table_th__SjS1z Table_th__SjS1z ZapTable_appsColumn__COSLU" data-rac=""
                            style="width: 165px;"><span class="Table_thSortable__WkDJg"><span class="css-1z0fpap-Text"
                                    data-zds="true">Entries</span></span></th>
                        <th tabindex="-1" data-key="react-aria-3" role="columnheader"
                            id="react-aria3819347747-:rf:-react-aria-3"
                            class="Table_th__SjS1z Table_th__SjS1z ZapTable_locationColumn__JDABs" data-rac=""
                            style="width: 58px;"><span class="Table_thSortable__WkDJg"><span class="css-1z0fpap-Text"
                                    data-zds="true">Views</span></span></th>
                        <th tabindex="-1" data-key="updated_at" role="columnheader"
                            id="react-aria3819347747-:rf:-updated_at"
                            class="Table_th__SjS1z Table_th__SjS1z ZapTable_lastModifiedColumn__6K8P7" data-rac=""
                            data-sort-direction="descending" style="width: 150px;" aria-sort="descending"
                            data-allows-sorting="true" aria-describedby="react-aria-description-1">
                            
                            <span class="Table_thSortable__WkDJg">
                                <span class="css-1z0fpap-Text" data-zds="true">Conversion</span>
                            </span>
                        
                        </th>
                        <th tabindex="-1" data-key="enabled" role="columnheader" id="react-aria3819347747-:rf:-enabled"
                            class="Table_th__SjS1z Table_th__SjS1z ZapTable_statusColumn__AXVKM" data-rac=""
                            style="width: 180px;" aria-sort="none" data-allows-sorting="true"
                            aria-describedby="react-aria-description-1">
                            
                            <span class="Table_thSortable__WkDJg">
                                <span class="css-1z0fpap-Text" data-zds="true">Shortcode</span>
                            </span>
                        </th>
                        <th tabindex="-1" data-key="react-aria-6" role="columnheader"
                            id="react-aria3819347747-:rf:-react-aria-6" class="Table_th__SjS1z Table_ownerCell__vOpGv"
                            data-rac="" style="width: 165px;"><span class="Table_thSortable__WkDJg"><span
                                    class="css-1z0fpap-Text" data-zds="true">Last Update</span></span></th>
                        <th tabindex="-1" data-key="react-aria-7" role="columnheader"
                            id="react-aria3819347747-:rf:-react-aria-7"
                            class="Table_th__SjS1z Table_iconButtonCell__HDRCh" data-rac="" style="width: 164px;"><span
                                class="Table_thSortable__WkDJg"><span class="css-1z0fpap-Text" data-zds="true"><span
                                        data-testid="visually-hidden"
                                        class="css-lz18ii-VisuallyHidden">Options</span></span></span></th>
                    </tr>
                </thead>
                <tbody role="rowgroup" class="react-aria-TableBody" id="the-list" data-rac="">


                    <?php

                        $limit = isset($_GET['limit']) && is_numeric($_GET['limit']) ? intval($_GET['limit']) : 25;

                        $vffrm = $wpdb->get_results(
                            $wpdb->prepare(
                                "SELECT * FROM {$wpdb->prefix}vform ORDER BY id DESC LIMIT %d",
                                $limit
                            ),
                            OBJECT
                        );

                        $views = $wpdb->get_results( "SELECT formid, COUNT(DISTINCT ip) AS distinct_ip_count FROM {$wpdb->prefix}vform_fields GROUP BY formid", OBJECT );

                        
                        $aab = $wpdb->get_results("SELECT 
                                formid,
                                submission_count,
                                distinct_ip_count,
                                (submission_count / distinct_ip_count) * 100 AS conversion_rate
                            FROM (
                                SELECT
                                    f.formid,
                                    (SELECT COUNT(DISTINCT u.ip COLLATE utf8mb4_general_ci)
                                    FROM `{$wpdb->prefix}vform_userinput` u
                                    WHERE u.formid = f.formid
                                    AND u.ip IN (SELECT ip COLLATE utf8mb4_general_ci
                                                    FROM `{$wpdb->prefix}vform_fields` f2
                                                    WHERE f2.formid = f.formid
                                                )) AS submission_count,
                                    (SELECT COUNT(DISTINCT f3.ip COLLATE utf8mb4_general_ci)
                                    FROM `{$wpdb->prefix}vform_fields` f3
                                    WHERE f3.formid = f.formid
                                    ) AS distinct_ip_count
                                FROM
                                    {$wpdb->prefix}vform_fields f
                                GROUP BY
                                    f.formid
                            ) AS subquery", OBJECT );


                        // if(count($vffrm)==0){
                        //     echo "<tr><td colspan='7' style='text-align:center; font-weight:bold; text-decoration:underline;'><a class='createmyvform' href='javascript:void(0)'>Create Your Vform now</a></td></tr>";
                        // }

                        foreach ( $vffrm as $keyfrm=>$valuefrm ) {
                        $date = strtotime($vffrm[$keyfrm]->datesubmit);
                        $formattedDate = date('F j, Y', $date);
                        $mainid = $vffrm[$keyfrm]->id;


                        $form_id = intval($vffrm[$keyfrm]->id); // Assuming formid is an integer
                        $query = "SELECT count(*) as cnt FROM {$wpdb->prefix}vform_userinput WHERE formid = %d";
                        $sb = $wpdb->get_results($wpdb->prepare($query, $form_id), OBJECT);

                        //   $sb = $wpdb->get_results( "SELECT count(*) as cnt FROM {$wpdb->prefix}vform_userinput WHERE formid = '".$vffrm[$keyfrm]->id."'", OBJECT );

                        $vf_view = 0;
                        foreach ($views as $v => $b) {
                            if($b->formid==$vffrm[$keyfrm]->id){
                                    $vf_view = $b->distinct_ip_count;
                            }
                        }

                        $vf_conversion = 0;
                        foreach ($aab as $v => $b) {
                            if($b->formid==$vffrm[$keyfrm]->id){
                                $vf_conversion = $b->conversion_rate;
                            }
                        }




                        
                    ?>


                    <tr role="row"  class="Table_tr__N4Hby " >
                        <td tabindex="-1" data-key="react-aria-50" role="rowheader"
                            id="react-aria3819347747-:rf:-react-aria-57-title" class="Table_titleCell__Ap63B"
                            data-rac="" style="padding-left: 0px;">
                            
                            <span class="TitleCell_root__4mYWh undefined">
                                <a class="TitleCell_titleLinkDefault__cXKpw TitleCell_titleLink__fiXjI css-0"
                                    data-rac="" data-zds="true"
                                    id="ZapTitleCell-Fanbasis onetime($1997) payment(6-Figure Fitness) to ghl"
                                    href="admin.php?page=vform&id=<?php echo $mainid; ?>">
                                    
                                    <span class="TitleCell_title__t8H6Z"
                                        id="ZapTitleCell-span-Fanbasis onetime($1997) payment(6-Figure Fitness) to ghl"
                                        data-testid="AssetItem-title"><span aria-hidden="true"
                                            data-testid="iconContainer" data-zds="true"
                                            class="css-37ysfe-Icon--miscBoltAltFill--animate--18x18--BrandOrange"><svg
                                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                height="18" width="18" size="18" color="BrandOrange"
                                                name="miscBoltAltFill">
                                                <path fill="#2D2E2E" d="M9 23.66 20.54 9.91H15V.16L3.46 13.91H9v9.75Z">
                                                </path>
                                            </svg></span><span class="TitleCell_subtitleWrapper__PGyf_">
                                            <div class="TooltipText_ellipsisText__apizD">
                                                <div tabindex="0" data-zds="true">
                                                    <span class="css-fyw5iz-Text"
                                                        data-zds="true"><?php echo $vffrm[$keyfrm]->formname; ?></span>
                                                    </div>
                                                    <small><?php echo $vffrm[$keyfrm]->formdescription; ?></small>
                                            </div>


                                        </span></span>

                                </a>
                            </span>
                        </td>
                        <td tabindex="-1" data-key="react-aria-51" role="gridcell" class="ZapTable_appsColumn__COSLU"
                            data-rac="">
                            <a
                                href="admin.php?page=vform_entries&select=<?php echo $mainid; ?>">                     
                                <?php echo $sb[0]->cnt; ?></a>
                        </td>
                        <td tabindex="-1" data-key="react-aria-52" role="gridcell"
                            class="ZapTable_locationColumn__JDABs" data-rac=""><?php echo $vf_view; ?></td>
                        <td tabindex="-1" role="gridcell" class="react-aria-Cell">
                            <?php $percent = round($vf_conversion, 2); ?>
                            <div class="progress-wrapper-vpsu">
                                <div class="progress-bar-vpsu" data-percent="<?php echo $percent; ?>">
                                <span class="progress-text-vpsu"><?php echo $percent; ?>%</span>

                                <!-- Bubble elements -->
                                <span class="bubble-vpsu"></span>
                                <span class="bubble-vpsu"></span>
                                <span class="bubble-vpsu"></span>
                                <span class="bubble-vpsu"></span>
                                <span class="bubble-vpsu"></span>
                                <span class="bubble-vpsu"></span>
                                </div>
                            </div>
                        </td>
                        <td tabindex="-1" role="gridcell" class="ZapTable_statusColumn__AXVKM">
                            <div class="copy-cell-vpsu">
                                <span class="copy-text-vpsu">[vpsuform id='<?php echo $mainid; ?>']</span>
                                <button class="copy-btn-vpsu" type="button" aria-label="Copy shortcode">
                                <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
                                    <path d="M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 
                                            4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 
                                            2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 
                                            16H8V7h11v14z"/>
                                </svg>
                                </button>
                            </div>
                        </td>
                        <td tabindex="-1" data-key="react-aria-55" role="gridcell" class="OwnerCell_ownerCell__IjoNZ"
                            data-rac="">
                            <abbr><?php echo $formattedDate; ?></abbr>
                        </td>
                        <td tabindex="0" data-key="react-aria-56" role="gridcell" class="Table_iconButtonCell__HDRCh"
                            data-rac="">
                            <div>
                                <div class="KebabMenu_wrapperCss___aWWS KebabMenu_hideButtonBorder__fXVCf">
                                    
                                    <button type="button" data-testid="<?php echo $mainid; ?>" class="_iconButton_10t6e_1 dropbtnbox" data-rac=""
                                            id="react-aria3819347747-:r14:" fdprocessedid="wx4w2o"><span aria-hidden="true"
                                                data-testid="iconContainer" data-zds="true"
                                                class="css-w6m7j2-Icon--navMoreVert--animate--24x24"><svg
                                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    height="24" width="24" size="24" name="navMoreVert">
                                                    <path fill="#2D2E2E"
                                                        d="M12 14.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5ZM12 21.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5ZM12 7.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z">
                                                    </path>
                                                </svg></span>
                                    </button>


                                    <div data-testid="<?php echo $mainid; ?>" class="css-1n9aljd-FloatingBox--right--south floating-box">
                                        <div class="css-1x5aju-FloatingBox__box">
                                            <div class="KebabMenu_menu__XXoOI">
                                                <ul role="menu" data-zds="true">
                                                    <div class="KebabMenu_menuItem__S7_XR undefined">
                                                        <li role="none" data-zds="true"><button type="button"
                                                                data-zds="true" role="menuitem"
                                                                class="css-ivw7cv-MenuItem__content makevformedit"  data-id="<?php echo $mainid; ?>"><span
                                                                    data-zds="true"
                                                                    class="css-zpr5ft-MenuItem__text"><span
                                                                        class="KebabMenu_menuItemContent__WU94G"><span
                                                                            aria-hidden="true"
                                                                            data-testid="iconContainer" data-zds="true"
                                                                            class="css-19pylnz-Icon--actionEdit--animate--20x20--GrayWarm6"><svg
                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                                fill="none" viewBox="0 0 24 24"
                                                                                height="20" width="20" size="20"
                                                                                color="GrayWarm6" name="actionEdit">
                                                                                <path fill="#2D2E2E"
                                                                                    d="m16.92 5 3.51 3.52 1.42-1.42-4.93-4.93L3 16.09V21h4.91L19.02 9.9 17.6 8.48 7.09 19H5v-2.09L16.92 5Z">
                                                                                </path>
                                                                            </svg></span>Edit</span></span></button>
                                                        </li>
                                                    </div>
                                                    <div class="KebabMenu_menuItem__S7_XR undefined">
                                                        <li role="none" data-zds="true"><button type="button"
                                                                data-zds="true" role="menuitem"
                                                                class="css-ivw7cv-MenuItem__content quick_edit" data-id="<?php echo $mainid; ?>" data-name="<?php echo $vffrm[$keyfrm]->formname; ?>"><span
                                                                    data-zds="true"
                                                                    class="css-zpr5ft-MenuItem__text"><span
                                                                        class="KebabMenu_menuItemContent__WU94G"><span
                                                                            aria-hidden="true"
                                                                            data-testid="iconContainer" data-zds="true"
                                                                            class="css-19pylnz-Icon--actionEdit--animate--20x20--GrayWarm6"><svg width="18px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1"><path style="fill:#111111;stroke:#555555;" d="m 34,48 c -12,0 -19,1 -21,2 -4.9,2 -5,12 -1,14 6,5 13,3 18,-2 4,-5 4,-9 4,-14 m 8,-3 0,27 -8,0 0,-7 C 27,73 13,76 5.6,69 0,63 1,50 6.7,46 14,40 24,42 34,42 33,24 15,29 4.8,33 l 0,-7 C 17,22 27,20 37,28 c 4,4 5,9 5,17"/><path style="fill:#1E9022;stroke:#555555" d="m 63,50 c 1,18 21,20 35,12 l 0,8 C 78,77 55,73 55,48 55,32 63,23 78,23 95,23 99,34 99,50 L 63,50 M 92,44 C 91,37 88,29 79,29 69,29 64,37 63,44 l 29,0"/><path style="fill:#111111;stroke:#555555" d="m 46,2 -1,96 7,0 0,-96 z"/></svg></span>Rename</span></span></button>
                                                        </li>
                                                    </div>
                                                    <div class="KebabMenu_menuItem__S7_XR undefined">
                                                        <li role="none" data-zds="true"><button type="button"
                                                                data-zds="true" role="menuitem"
                                                                class="css-ivw7cv-MenuItem__content makevformentries" data-id="<?php echo $mainid; ?>"><span
                                                                    data-zds="true"
                                                                    class="css-zpr5ft-MenuItem__text"><span
                                                                        class="KebabMenu_menuItemContent__WU94G"><span
                                                                            aria-hidden="true"
                                                                            data-testid="iconContainer" data-zds="true"
                                                                            class="css-19pylnz-Icon--actionEdit--animate--20x20--GrayWarm6"><svg width="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                                <path d="M8 8H20M11 12H20M14 16H20M4 8H4.01M7 12H7.01M10 16H10.01" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                                                </svg></span>Entries</span></span></button>
                                                        </li>
                                                    </div>
                                                    <div class="KebabMenu_menuItem__S7_XR undefined">
                                                        <li role="none" data-zds="true"><button type="button"
                                                                data-zds="true" role="menuitem"
                                                                class="css-ivw7cv-MenuItem__content clonevform" data-id="<?php echo $mainid; ?>"><span
                                                                    data-zds="true"
                                                                    class="css-zpr5ft-MenuItem__text"><span
                                                                        class="KebabMenu_menuItemContent__WU94G"><span
                                                                            aria-hidden="true"
                                                                            data-testid="iconContainer" data-zds="true"
                                                                            class="css-vmpazn-Icon--actionCopy--animate--20x20--GrayWarm6"><svg
                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                                fill="none" viewBox="0 0 24 24"
                                                                                height="20" width="20" size="20"
                                                                                color="GrayWarm6" name="actionCopy">
                                                                                <path fill="#2D2E2E"
                                                                                    d="M2 22h16V6H2v16ZM4 8h12v12H4V8Z">
                                                                                </path>
                                                                                <path fill="#2D2E2E"
                                                                                    d="M6 2v2h14v14h2V2H6Z"></path>
                                                                            </svg></span>Duplicate</span></span></button>
                                                        </li>
                                                    </div>
                                                    <div class="KebabMenu_menuItem__S7_XR undefined">
                                                        <li role="none" data-zds="true"><button type="button"
                                                                data-zds="true" role="menuitem"
                                                                class="css-ivw7cv-MenuItem__content makevformpreview" data-id="<?php echo site_url('/form-preview/?id=' . $mainid); ?>"><span
                                                                    data-zds="true"
                                                                    class="css-zpr5ft-MenuItem__text"><span
                                                                        class="KebabMenu_menuItemContent__WU94G"><span
                                                                            aria-hidden="true"
                                                                            data-testid="iconContainer" data-zds="true"
                                                                            class="css-19pylnz-Icon--actionEdit--animate--20x20--GrayWarm6"><svg width="20px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" id="Stock_cut" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc/><g><path d="M21,21L21,21   c1.105-1.105,2.895-1.105,4,0l5.172,5.172c0.53,0.53,0.828,1.25,0.828,2v0C31,29.734,29.734,31,28.172,31h0   c-0.75,0-1.47-0.298-2-0.828L21,25C19.895,23.895,19.895,22.105,21,21z" fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><circle cx="11" cy="11" fill="none" r="10" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="M11,5   c-3.314,0-6,2.686-6,6" fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><line fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" x1="18" x2="21" y1="18" y2="21"/></g></svg></span>Preview</span></span></button>
                                                        </li>
                                                    </div>

                                                    <div class="KebabMenu_menuItem__S7_XR undefined">
                                                        <li role="none" data-zds="true">
                                                            <div class="vform-export-wrapper">

                                                                <!-- Main Export Trigger -->
                                                                <button type="button" class="vform-export-toggle">
                                                                    <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 20C7.58172 20 4 16.4183 4 12M20 12C20 14.5264 18.8289 16.7792 17 18.2454" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/> <path d="M12 14L12 4M12 4L15 7M12 4L9 7" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
                                                                    Export
                                                                </button>

                                                                <!-- Hidden Export Panel -->
                                                                <div class="vform-export-panel">
                                                                    <form method="post" action="<?php echo admin_url('admin-post.php'); ?>">
                                                                        <input type="hidden" name="action" value="vform_export_single">
                                                                        <input type="hidden" name="form_id" value="<?php echo $mainid; ?>">
                                                                        <?php wp_nonce_field('vform_export_single_action', 'vform_export_single_nonce'); ?>

                                                                        <label class="vform-checkbox">
                                                                            <input type="checkbox" name="include_logic" value="1">
                                                                            <span>Include Conditional Logic</span>
                                                                        </label>

                                                                        <label class="vform-checkbox">
                                                                            <input type="checkbox" name="include_notifications" value="1">
                                                                            <span>Include Emails</span>
                                                                        </label>

                                                                        <button type="submit" class="vform-final-export">
                                                                            Download JSON
                                                                        </button>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </div>

                                                    <!-- delete -->
                                                    <div class="KebabMenu_menuItem__S7_XR KebabMenu_warningItem__QAXHd">
                                                        <li role="none" data-zds="true"><button type="button"
                                                                data-zds="true" role="menuitem"
                                                                class="css-ivw7cv-MenuItem__content delvform" data-id="<?php echo $mainid; ?>"><span
                                                                    data-zds="true"
                                                                    class="css-zpr5ft-MenuItem__text"><span
                                                                        class="KebabMenu_menuItemContent__WU94G"><span
                                                                            aria-hidden="true"
                                                                            data-testid="iconContainer" data-zds="true"
                                                                            class="css-37uiql-Icon--actionTrash--animate--20x20--GrayWarm6"><svg
                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                                fill="none" viewBox="0 0 24 24"
                                                                                height="20" width="20" size="20"
                                                                                color="GrayWarm6" name="actionTrash">
                                                                                <path fill="#2D2E2E"
                                                                                    d="M15.98 20H8.02L7.19 9h-2l.97 13h11.68l.97-13h-2l-.83 11ZM20.41 4.55l-.34-1.97-5.12.89-1-.84-4.86.86-.65 1.13-5.12.89.35 1.98 16.74-2.94Z">
                                                                                </path>
                                                                            </svg></span>Delete</span></span></button>
                                                        </li>
                                                    </div>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                        
                                        
                                </div>
                            </div>
                        </td>
                    </tr>

                    <?php
                        }
                    ?>
                </tbody>
            </table>
        </div>


<!-- export -->
<style>
    .vform-export-wrapper {
        position: relative;
        width: 100%;
    }

    .vform-export-toggle {
        width: 100%;
        padding: 8px 12px;
        /* background: none; */
        border: none;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-size: 14px;
    }


    .vform-export-panel {
        display: none;
        background: #fff;
        border: 1px solid #e2e2e2;
        padding: 12px;
        border-radius: 6px;
        margin-top: 6px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .vform-export-panel.active {
        display: block;
    }

    .vform-checkbox {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        margin-bottom: 8px;
    }

    .vform-checkbox input {
        cursor: pointer;
    }

    .vform-final-export {
        width: 100%;
        padding: 8px;
        background: #2271b1;
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 13px;
        cursor: pointer;
        margin-top: 6px;
    }

    .vform-final-export:hover {
        background: #135e96;
    }
</style>
<script>
    document.addEventListener("DOMContentLoaded", function() {

        const toggles = document.querySelectorAll('.vform-export-toggle');

        toggles.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();

                const panel = this.nextElementSibling;

                // close others
                document.querySelectorAll('.vform-export-panel').forEach(p => {
                    if (p !== panel) p.classList.remove('active');
                });

                panel.classList.toggle('active');
            });
        });


    });
</script>
<!-- export -->



        <?php if(count($vffrm)<=0){ ?>
        <style>
            .vpsuform-empty-wrap {
                background: #fff;
                border: 1px solid #e5e5e5;
                border-radius: 10px;
                padding: 40px 30px;
                margin: 30px 0;
                text-align: center;
                box-shadow: 0 1px 3px rgba(0,0,0,0.04);
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            }

            .vpsuform-empty-icon {
                width: 70px;
                height: 70px;
                margin: 0 auto 20px;
                background: #f0f6ff;
                border-radius: 14px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #2271b1;
                font-size: 34px;
                box-shadow: 0 3px 8px rgba(34,113,177,0.15);
            }

            .vpsuform-empty-title {
                font-size: 22px;
                font-weight: 600;
                margin-bottom: 8px;
                color: #222;
            }

            .vpsuform-empty-desc {
                font-size: 14px;
                color: #666;
                max-width: 480px;
                margin: 0 auto 20px;
                line-height: 1.6;
            }

            .vpsuform-empty-btn {
                display: inline-block;
                background: #2271b1;
                color: #fff !important;
                padding: 10px 22px;
                border-radius: 6px;
                font-size: 14px;
                font-weight: 600;
                text-decoration: none;
                border: 1px solid rgba(0,0,0,0.1);
                box-shadow: 0 2px 6px rgba(34,113,177,0.25);
            }

            .vpsuform-empty-btn:hover {
                background: #1e659e;
                color: #fff;
            }
        </style>
        <div class="vpsuform-empty-wrap">
            <div class="vpsuform-empty-icon">📝</div>
            <div class="vpsuform-empty-title">Create Your First Form</div>
            <div class="vpsuform-empty-desc">
                It looks like you haven’t created any forms yet.  
                Get started by creating your first form and begin collecting submissions instantly.
            </div>
            <a href="javascript:void(0)" class="vpsuform-empty-btn createmyvform">➕ Add Your First Form</a>
        </div>
        <?php } ?>

        <div class="Pagination_paginator__IEpb7">
            <div>
                <p class="css-14k12fh-Text" data-zds="true">You have Total <strong><?php echo count($vffrm); ?></strong> Forms</p>
            </div>
       
            <div>
                
                <div class="_select_c1fz5_1">
                        <button id="react-aria3819347747-:rp:" type="button" class="_select-trigger_c1fz5_10 toggleperpage"><span
                            id="react-aria3819347747-:ru:" data-size="medium" data-zds="true"
                            class="_select-value_c1fz5_42" data-rac=""><?php echo isset($_GET['limit']) && is_numeric($_GET['limit']) ? intval($_GET['limit']) : 25?><span class="Pagination_perPage__TPK8u">per
                                page</span></span><span aria-hidden="true" data-testid="iconContainer" data-zds="true"
                            class="css-j5fiov-Icon--arrowDropdown--animate--24x24--TextWeaker"><svg
                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="24"
                                width="24" size="24" color="TextWeaker" name="arrowDropdown">
                                <path fill="#2D2E2E"
                                    d="m12 3.69-5 4.2v2.61l5-4.19 5 4.19V7.89l-5-4.2ZM7 13.5v2.61l5 4.2 5-4.2V13.5l-5 4.19-5-4.19Z">
                                </path>
                            </svg></span>
                        </button>

                        <div data-zds="true" class="_popover_c1fz5_59" data-rac="" data-trigger="Select"
                            data-placement="top">
                            <div id="react-aria9897923600-:ro:" data-zds="true"
                                aria-labelledby="react-aria9897923600-:rq:" role="listbox" tabindex="-1"
                                class="_list-box_c1fz5_71" data-rac="" data-layout="stack" data-orientation="vertical">
                                <div role="option" aria-selected="true" data-zds="true" tabindex="0" data-key="25"
                                    id="react-aria9897923600-:ro:-option-25" class="_select-item_1ldx3_1" data-rac=""
                                    data-selected="true" data-selection-mode="single">25</div>
                                <div role="option" aria-selected="false" data-zds="true" tabindex="-1" data-key="50"
                                    id="react-aria9897923600-:ro:-option-50" class="_select-item_1ldx3_1" data-rac=""
                                    data-selection-mode="single">50</div>
                                <div role="option" aria-selected="false" data-zds="true" tabindex="-1" data-key="100"
                                    id="react-aria9897923600-:ro:-option-100" class="_select-item_1ldx3_1" data-rac=""
                                    data-selection-mode="single">100</div>
                            </div>
                        </div>
                </div>

            </div>
        </div>

        <div>

            <style>
                /* VPSUForm review footer */
                .vpsuform-review-footer {
                display:flex;
                gap:16px;
                align-items:center;
                justify-content:space-between;
                background: #ffffff;
                border: 1px solid #e6e6e6;
                padding: 14px 16px;
                border-radius: 8px;
                box-shadow: 0 1px 0 rgba(0,0,0,0.03);
                margin-top: 20px;
                font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
                font-size:14px;
                color:#333;
                margin-top:100px;
                }
                .vpsuform-review-left {
                display:flex;
                gap:12px;
                align-items:center;
                flex:1 1 auto;
                min-width:0;
                }
                .vpsuform-star {
                width:42px;
                height:42px;
                display:flex;
                align-items:center;
                justify-content:center;
                background: linear-gradient(135deg,#ffd166,#ff9f1c);
                color:#fff;
                font-weight:700;
                border-radius:8px;
                box-shadow: 0 4px 12px rgba(255,159,28,0.15);
                flex-shrink:0;
                }
                .vpsuform-text {
                min-width:0;
                }
                .vpsuform-text .title {
                font-weight:600;
                margin:0 0 4px 0;
                font-size:15px;
                }
                .vpsuform-text .subtitle {
                margin:0;
                color:#666;
                font-size:13px;
                line-height:1.3;
                white-space:normal;
                text-overflow:ellipsis;
                overflow:hidden;
                padding:0;
                }
                .vpsuform-review-cta {
                margin-left:16px;
                flex-shrink:0;
                }
                .vpsuform-review-cta .button {
                display:inline-block;
                padding:9px 14px;
                border-radius:6px;
                background:#0073aa;
                color:#fff;
                text-decoration:none;
                font-weight:600;
                border:1px solid rgba(0,0,0,0.05);
                box-shadow: 0 2px 6px rgba(0,0,0,0.06);
                }
                .vpsuform-review-cta .button:hover { background:#006799; color:#fff; }
                @media (max-width:560px){
                .vpsuform-review-footer { flex-direction:column; align-items:stretch; gap:10px; }
                .vpsuform-review-cta { display:flex; justify-content:flex-end; }
                }
            </style>

            <div class="vpsuform-review-footer" role="region" aria-label="VPSUForm review call to action">
                <div class="vpsuform-left">
                    <div class="vpsuform-text">
                    <p class="title">Like VPSUForm? Help us with a quick review</p>
                    <p class="subtitle">If VPSUForm saves you time, please consider leaving a 
                        <svg width="15px" viewBox="0 -0.5 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16.0005 0L21.4392 9.27275L32.0005 11.5439L24.8005 19.5459L25.889 30.2222L16.0005 25.895L6.11194 30.2222L7.20049 19.5459L0.000488281 11.5439L10.5618 9.27275L16.0005 0Z" fill="#FFCB45"/>
                        </svg>
                        <svg width="15px" viewBox="0 -0.5 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16.0005 0L21.4392 9.27275L32.0005 11.5439L24.8005 19.5459L25.889 30.2222L16.0005 25.895L6.11194 30.2222L7.20049 19.5459L0.000488281 11.5439L10.5618 9.27275L16.0005 0Z" fill="#FFCB45"/>
                        </svg>
                        <svg width="15px" viewBox="0 -0.5 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16.0005 0L21.4392 9.27275L32.0005 11.5439L24.8005 19.5459L25.889 30.2222L16.0005 25.895L6.11194 30.2222L7.20049 19.5459L0.000488281 11.5439L10.5618 9.27275L16.0005 0Z" fill="#FFCB45"/>
                        </svg>
                        <svg width="15px" viewBox="0 -0.5 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16.0005 0L21.4392 9.27275L32.0005 11.5439L24.8005 19.5459L25.889 30.2222L16.0005 25.895L6.11194 30.2222L7.20049 19.5459L0.000488281 11.5439L10.5618 9.27275L16.0005 0Z" fill="#FFCB45"/>
                        </svg>
                        <svg width="15px" viewBox="0 -0.5 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16.0005 0L21.4392 9.27275L32.0005 11.5439L24.8005 19.5459L25.889 30.2222L16.0005 25.895L6.11194 30.2222L7.20049 19.5459L0.000488281 11.5439L10.5618 9.27275L16.0005 0Z" fill="#FFCB45"/>
                        </svg>
                        review — it helps us improve and reach more users.</p>
                    </div>
                </div>

                <div class="vpsuform-review-cta">
                    <a class="button" href="https://wordpress.org/support/plugin/v-form/reviews/#new-post"
                    target="_blank" rel="noopener noreferrer">
                    Leave a 5★ Review
                    </a>
                </div>
            </div>

        </div>

    </div>
</div>












<div class="frm-admin-footer-links" style="display:none;">
    <div class="frm-admin-footer-links-text">Feel free to support ❤	</div>
    <form id="myvformdata6form">
    <?php wp_nonce_field('myvformdata6','vfm-nonce6'); ?>
    </form>
    <div class="frm-admin-footer-links-nav">
        <a href="https://vpsuform.info/" class='vform-donate' target="_blank">Visit VPSUForm</a>   
        <a href="https://vpsuform.info/product/vpsuform-donation/" class='vform-donate' target="_blank">Donate</a> 
        <a href="javascript:void(0)" class='button_vf'> Subscribe for upcoming updates 🚀</a>
        <a href="https://vpsuform.info/contact-us/" target="_blank">Tech Support</a>
        <!-- <span>/</span> -->
        <!-- <a href="javascript:void(0)" target="_blank"> Send a Test Email</a> -->
        <!-- <span>/</span> -->
        <!-- <a href="https://formidableforms.com/lite-upgrade/" target="_blank">Upgrade</a> -->
    </div>
    <!-- <a href="https://docs.google.com/forms/d/e/1FAIpQLSd8PHmbrNkcUw39TgpcKUsop333_-nT3QslwF0BRtjV7F00bw/viewform?usp=header" target="_blank">Vform PRO</a> -->

</div>



 <!-- free gift -->
<style>
       .outerpopupvf, .outerpopupvf_createform, .importpopupvf_createform {
            background: rgb(32 21 21 / 52%);
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100vw;
            height: 100vh;
            display: none;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            z-index: 2000;
        }
        .popup_vf {
            font-family: 'Inter';
            background: #fff;
            color: #000;
            text-align: center;
            padding: 25px;
            border-radius: 8px;
            width: 650PX;
            flex: 1 1 auto !important;      
            display: flex !important;
            flex-flow: column nowrap !important;
            min-width: 550px;
            max-width: 650px;
            max-height: min(650px, -70px + 100vh);
            box-shadow: rgba(0, 0, 0, 0.1) -8px 0px 20px;
            position: relative;
        }
        .popup_vf input {
            width: 100%;
            height: 41px;
            margin-top: 0px;
        }

        .popup_vf .btn {
            width: 100%;
            height: 39px;
            margin-top: 20px;
            cursor: pointer;
            background: #503ebd;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-weight: 600;
        }
        .popbtn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 20px;
    }
            button.btn.cancelfrm {
        background: #d5d7fc;
        color: #503ebd;
    }
        .popup_vf .crs {
    position: absolute;
    right: 3px;
    top: 5px;
    z-index: 9999;
    cursor: pointer;
    background: #fff;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    }
        .frmtit{
            text-align:left;
        }
        .popup_vf p {
        font-size: 18px;
        font-weight: 500;
        margin-top: 0px;
    }
    input.vfembtn {
    margin-top: 15px;
    }
    .entremal{
        margin-top:30px;
    }


    ._select_c1fz5_1 {
        flex-direction: column;
        gap: 10px;
        position: relative;
        display: flex;
    }
    ._popover_c1fz5_59{
        position: absolute;
        z-index: 100000;
        max-height: 175px;
        left: 0px;
        top: -119px;
        overflow: auto;
        padding: 7px;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        width: 135px;
        display: none;
    }
    ._select-item_1ldx3_1 {
        padding: 7px;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #413735;
        cursor: pointer;
    }
    ._select-item_1ldx3_1:hover {
        background-color: #f7f6fd;
        color: #503ebd;
    }

        .createvfromtemp {
    background: #2196F3 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration:none;
}

</style>
<div class='outerpopupvf'>
    <div class="popup_vf">
        <span class="crs">&#10006;</span>
        <div class="entremal">Enter your email address! Your privacy is our priority, and we will never share your email with anyone.</div>
        <input type="email" placeholder="Email Address" class="vfembtn" >
        <button type="button" class="btn emailwaitlist">Submit</button>
    </div>
</div>

<!-- free gift -->


<!-- create form -->


<div class='outerpopupvf_createform'>
    <div class="popup_vf">
        <span class="crs">&#10006;</span>
        <div class="showcreate">
            <p>Create Your VPSUForm</p>
            <div class="frmtit">Name*</div>
            <input type="text" class="vftitletxt" >
            <div class="popbtn">
                <a href="admin.php?page=vform_templates" class="btn createvfromtemp">Create From Template</a>
                <button type="button" class="btn cancelfrm">Cancel</button>
                <button type="button" class="btn createvfromfirst">Create</button>
            </div>
        </div>

        <div class="showrename">
            <p>Rename Your VPSUForm</p>
            <div class="frmtit">Name*</div>
            <input type="text" class="vftitletxtname" >
            <div class="popbtn">
                <button type="button" class="btn cancelfrm">Cancel</button>
                <button type="button" class="btn quickeditsave" data-id="">Save</button>
            </div>
        </div>

    </div>
</div>

<!-- create form -->


<!-- import form -->

<div class='importpopupvf_createform'>
    <div class="popup_vf">
        <span class="crs">&#10006;</span>
        <div class="showcreate">
            <p>Import Your VPSUForm</p>
            <form method="post" enctype="multipart/form-data" action="<?php echo admin_url('admin-post.php'); ?>">
                <input type="hidden" name="action" value="vform_import_single">
                <input type="file" name="vform_json_file" accept=".json" required>
                <?php wp_nonce_field('vform_import_single_action', 'vform_import_single_nonce'); ?>
                <br><br>
                <input type="submit" class="button button-primary" value="Import">
            </form>

            <div class="popbtn">
                <button type="button" class="btn cancelfrm">Cancel</button>
            </div>
        </div>
    </div>
</div>


<!-- import form -->


<script>
    document.addEventListener("DOMContentLoaded", function () {
        const table = document.querySelector(".Table_table__w3DQr");
        const tbody = table.querySelector("#the-list");

        function sortTable(columnIndex, type, ascending) {
            const rows = Array.from(tbody.querySelectorAll("tr"));

            rows.sort((rowA, rowB) => {
                let cellA = rowA.cells[columnIndex].innerText.trim();
                let cellB = rowB.cells[columnIndex].innerText.trim();

                if (type === "number") {
                    cellA = parseInt(cellA, 10);
                    cellB = parseInt(cellB, 10);
                } else {
                    cellA = cellA.toLowerCase();
                    cellB = cellB.toLowerCase();
                }

                if (ascending) {
                    return cellA > cellB ? 1 : cellA < cellB ? -1 : 0;
                } else {
                    return cellA < cellB ? 1 : cellA > cellB ? -1 : 0;
                }
            });

            // Reorder rows in the table
            rows.forEach(row => tbody.appendChild(row));
        }

        // Attach click events to headers
        table.querySelectorAll("thead th").forEach((header, index) => {
            if (header.classList.contains("sortable")) {
                let ascending = true; // Default sort order

                header.addEventListener("click", function () {
                    const type = header.id === "id" ? "number" : "string";
                    sortTable(index, type, ascending);

                    // Toggle sort direction
                    ascending = !ascending;

                    // Update sorting indicator
                    table.querySelectorAll("th .sorting-indicator").forEach(indicator => {
                        indicator.innerHTML = "";
                    });
                    const indicator = header.querySelector(".sorting-indicator");
                    indicator.innerHTML = ascending ? '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="16" width="16" size="16" color="GrayWarm9" name="arrowBigUp"><path fill="#2D2E2E" d="m13 7.14 6 5.04V9.56l-7-5.87-7 5.87v2.62l6-5.04V20h2V7.14Z"></path></svg>' : '<svg style="transform: rotate(180deg);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="16" width="16" size="16" color="GrayWarm9" name="arrowBigUp"><path fill="#2D2E2E" d="m13 7.14 6 5.04V9.56l-7-5.87-7 5.87v2.62l6-5.04V20h2V7.14Z"></path></svg>';
                });
            }
        });


        document.getElementById('search-input').addEventListener('input', function () {
            const searchTerm = this.value;
            const xhr = new XMLHttpRequest();
            xhr.open('POST', ajaxurl, true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.querySelector('#the-list').innerHTML = xhr.responseText;
                }
            };
            xhr.send(`action=filter_table&search=${encodeURIComponent(searchTerm)}`);
            console.log(searchTerm);
            if(searchTerm==''){
                document.querySelector('.Pagination_paginator__IEpb7').style.display = 'flex';
            }else{
                document.querySelector('.Pagination_paginator__IEpb7').style.display = 'none';
            }
        });

        document.querySelectorAll("._select-item_1ldx3_1").forEach(item => {
            item.addEventListener("click", function () {
                var selectedValue = this.innerText; 
                window.location.href="?page=vform&limit="+selectedValue;
            });
        });


    });

    
</script>



<!-- <div id="vform-plugin-preloader" style="position: fixed; top: 0;left: 0; right: 0;bottom: 0;-moz-background-size:64px 64px;-o-background-size:64px 64px;-webkit-background-size:64px 64px;background-size:64px 64px;z-index: 99998;width:100%;height:100%;display:block;display: flex;justify-content: center;align-items: center; background: #fff;">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="50" width="50" name="miscBoltAltFill">
      <path fill="#ff4f00" d="M9 23.66 20.54 9.91H15V.16L3.46 13.91H9v9.75Z">
      </path>
  </svg>
</div> -->

<style>
  #vform-plugin-preloader {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff7f;
  }

  #vform-plugin-preloader svg {
    animation: pulse 1.5s ease-in-out infinite;
  }

  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
  }
</style>
<div id="vform-plugin-preloader">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="60" width="60">
    <defs>
      <linearGradient id="fillGradient" x1="0" y1="1" x2="0" y2="0">
        <stop offset="0%" stop-color="#ff4f00"/>
        <stop offset="0%" stop-color="#ffffff" id="gradientStop"/>
      </linearGradient>
    </defs>

    <path fill="url(#fillGradient)" 
      d="M9 23.66 20.54 9.91H15V.16L3.46 13.91H9v9.75Z">
    </path>
  </svg>
</div>
<script>
  let percent = 0;
  const stop = document.getElementById("gradientStop");

  function animateFill() {
    percent += 6;
    if (percent > 100) percent = 0;

    stop.setAttribute("offset", percent + "%");
    requestAnimationFrame(animateFill);
  }

  animateFill();
</script>



<script>
  window.addEventListener('load', function() {
    var preloader = document.getElementById('vform-plugin-preloader');
      preloader.remove(); 
    //   document.getElementById('showmyvform').style.display = 'block';
  });
</script>