<link rel="stylesheet" type="text/css" href="<?php echo plugins_url('/css/select2.min.css', __FILE__) ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo plugins_url('/css/upgrade-to-pro.css', __FILE__) ?>" />
<script type="text/javascript" src="<?php echo plugins_url('/js/select2.min.js', __FILE__) ?>" ></script>
<?php $pro_url = "https://go.premio.io/?edd_action=add_to_cart&download_id=3432&edd_options[price_id]=" ?>
<div class="key-table">
    <div class="modal-upgrade upgrade-block" id="folder-modal">
        <div class="easy-modal-inner">
            <div class="container">
                <div class="pricing-table">
                    <div class="price-title">Unlock All Features</div>
                    <div class="price-tables">
                        <div class="row">
                            <div class="col-md-4 col-sm-12">
                                <div class="price-table basic-feature">
                                    <div class="price-table-top">
                                        <div class="price-head">
                                            <div class="plan-name">Basic</div>
                                            <div class="plan-price">$25<span>/year</span></div>
                                        </div>
                                        <div class="price-websites">For small website owners</div>
                                        <div class="price-offer">Renewals for <b>25% off</b></div>
                                    </div>
                                    <div class="price-table-middle">
                                        <ul>
                                            <li><a href="javascript:;" class="cus-tooltip">1 website <span class="has-tooltip">*</span><span class="tooltip__content">Use My Sticky Elements on 1 domain</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Get leads to email <span class="has-tooltip">*</span><span class="tooltip__content">You can get the emails from your contact form directy to your email</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Unlimited icons <span class="has-tooltip">*</span><span class="tooltip__content">Show unlimited social icons such as WhatsApp, Facebook, Twitter, Phone and more</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Custom icons <span class="has-tooltip">*</span><span class="tooltip__content">Upload your own icons for your floating tabs</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Custom contact form fields <span class="has-tooltip">*</span><span class="tooltip__content">Add custom fields to your contact form including text, text area, dropdowns, file upload, website, date, and number fields</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Custom CSS style <span class="has-tooltip">*</span><span class="tooltip__content">Add CSS of your own to your form and social tabs</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Custom height position <span class="has-tooltip">*</span><span class="tooltip__content">Change the height position of the tabs on your website</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Multiple widgets <span class="has-tooltip">*</span><span class="tooltip__content">Create different bars for different pages. Show different icons, form and language based on page targeting rules</span></a></li>
											<li><a href="javascript:;" class="cus-tooltip">Page targeting <span class="has-tooltip">*</span><span class="tooltip__content">Show/hide the widget on specific pages</span></a></li>
											<li><a href="javascript:;" class="cus-tooltip">Country targeting <span class="has-tooltip">*</span><span class="tooltip__content">Target your widget to specific countries. You can create different widgets for different countries</span></a></li>
											<li><a href="javascript:;" class="cus-tooltip">Available days and hours <span class="has-tooltip">*</span><span class="tooltip__content">Display the widget on specific days and hours based on your opening days and hours</span></a></li>
											<li><a href="javascript:;" class="cus-tooltip">Traffic source targeting <span class="has-tooltip">*</span><span class="tooltip__content">Show the widget only to visitors who come from specific traffic sources including direct traffic, social networks, search engines, Google Ads, or any other traffic source</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="price-table-bottom">
                                        <div class="custom-dd">
                                            <select class="multiple-options">
                                                <option data-option="1_year" data-header="Renewals for 25% off" data-price="25" value="<?php echo esc_url($pro_url."1") ?>">
                                                    <?php esc_html_e("Updates & support for 1 year") ?>
                                                </option>
                                                <option data-option="2_year" data-header="For 2 years" data-price="39" value="<?php echo esc_url($pro_url."13") ?>">
                                                    <?php esc_html_e("Updates & support for 2 years") ?>
                                                </option>
                                                <option data-option="lifetime" data-header="For lifetime" data-price="79" value="<?php echo esc_url($pro_url."5") ?>">
                                                    <?php esc_html_e("Updates & support for lifetime") ?>
                                                </option>
                                            </select>
                                        </div>
                                        <a class="cart-link" target="_blank" href="<?php echo esc_url($pro_url."1") ?>">Buy now</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <div class="price-table plus-feature">
                                    <div class="price-table-top">
                                        <div class="price-head">
                                            <div class="plan-name">Plus</div>
                                            <div class="plan-price">$59<span>/year</span></div>
                                        </div>
                                        <div class="price-websites">For businesses with multiple websites</div>
                                        <div class="price-offer">Renewals for <b>25% off</b></div>
                                    </div>
                                    <div class="price-table-middle">
                                        <ul>
                                            <li><a href="javascript:;" class="cus-tooltip">5 websites <span class="has-tooltip">*</span><span class="tooltip__content">Use My Sticky Elements on 5 domains</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Get leads to email <span class="has-tooltip">*</span><span class="tooltip__content">You can get the emails from your contact form directy to your email</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Unlimited icons <span class="has-tooltip">*</span><span class="tooltip__content">Show unlimited social icons such as WhatsApp, Facebook, Twitter, Phone and more</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Custom icons <span class="has-tooltip">*</span><span class="tooltip__content">Upload your own icons for your floating tabs</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Custom contact form fields <span class="has-tooltip">*</span><span class="tooltip__content">Add custom fields to your contact form including text, text area, dropdowns, file upload, website, date, and number fields</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Custom CSS style <span class="has-tooltip">*</span><span class="tooltip__content">Add CSS of your own to your form and social tabs</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Custom height position <span class="has-tooltip">*</span><span class="tooltip__content">Change the height position of the tabs on your website</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Multiple widgets <span class="has-tooltip">*</span><span class="tooltip__content">Create different bars for different pages. Show different icons, form and language based on page targeting rules</span></a></li>
											<li><a href="javascript:;" class="cus-tooltip">Page targeting <span class="has-tooltip">*</span><span class="tooltip__content">Show/hide the widget on specific pages</span></a></li>
											<li><a href="javascript:;" class="cus-tooltip">Country targeting <span class="has-tooltip">*</span><span class="tooltip__content">Target your widget to specific countries. You can create different widgets for different countries</span></a></li>
											<li><a href="javascript:;" class="cus-tooltip">Available days and hours <span class="has-tooltip">*</span><span class="tooltip__content">Display the widget on specific days and hours based on your opening days and hours</span></a></li>
											<li><a href="javascript:;" class="cus-tooltip">Traffic source targeting <span class="has-tooltip">*</span><span class="tooltip__content">Show the widget only to visitors who come from specific traffic sources including direct traffic, social networks, search engines, Google Ads, or any other traffic source</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="price-table-bottom">
                                        <div class="custom-dd">
                                            <select class="multiple-options">
                                                <option data-option="1_year" data-header="Renewals for 25% off" data-price="59" value="<?php echo esc_url($pro_url."2") ?>">
                                                    <?php esc_html_e("Updates & support for 1 year") ?>
                                                </option>
                                                <option data-option="2_year" data-header="For 2 years" data-price="89" value="<?php echo esc_url($pro_url."14") ?>">
                                                    <?php esc_html_e("Updates & support for 2 years") ?>
                                                </option>
                                                <option data-option="lifetime" data-header="For lifetime" data-price="149" value="<?php echo esc_url($pro_url."7") ?>">
                                                    <?php esc_html_e("Updates & support for lifetime") ?>
                                                </option>
                                            </select>
                                        </div>
                                        <a class="cart-link" target="_blank" href="<?php echo esc_url($pro_url."2") ?>">Buy now</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <div class="price-table agency-feature">
                                    <div class="price-table-top">
                                        <div class="price-head">
                                            <div class="plan-name">Agency</div>
                                            <div class="plan-price">$99<span>/year</span></div>
                                        </div>
                                        <div class="price-websites">For agencies who manage clients</div>
                                        <div class="price-offer">Renewals for <b>25% off</b></div>
                                    </div>
                                    <div class="price-table-middle">
                                        <ul>
                                            <li>
                                                <div class="website-package">
                                                    <select class="multiple-web-options">
                                                        <option value="50_websites">50 websites</option>
                                                        <option value="500_websites">500 websites</option>
                                                        <option value="1000_websites">1000 websites</option>
                                                    </select>
                                                </div>
                                            </li>
                                            <li><a href="javascript:;" class="cus-tooltip">Get leads to email <span class="has-tooltip">*</span><span class="tooltip__content">You can get the emails from your contact form directy to your email</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Unlimited icons <span class="has-tooltip">*</span><span class="tooltip__content">Show unlimited social icons such as WhatsApp, Facebook, Twitter, Phone and more</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Custom icons <span class="has-tooltip">*</span><span class="tooltip__content">Upload your own icons for your floating tabs</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Custom contact form fields <span class="has-tooltip">*</span><span class="tooltip__content">Add custom fields to your contact form including text, text area, dropdowns, file upload, website, date, and number fields</span></a></li>
                                            <li><a href="javascript:;" class="cus-tooltip">Custom CSS style <span class="has-tooltip">*</span><span class="tooltip__content">Add CSS of your own to your form and social tabs</span></a></li>
											
                                            <li><a href="javascript:;" class="cus-tooltip">Custom height position <span class="has-tooltip">*</span><span class="tooltip__content">Change the height position of the tabs on your website</span></a></li>
											<li><a href="javascript:;" class="cus-tooltip">Multiple widgets <span class="has-tooltip">*</span><span class="tooltip__content">Create different bars for different pages. Show different icons, form and language based on page targeting rules</span></a></li>
											<li><a href="javascript:;" class="cus-tooltip">Page targeting <span class="has-tooltip">*</span><span class="tooltip__content">Show/hide the widget on specific pages</span></a></li>
											<li><a href="javascript:;" class="cus-tooltip">Country targeting <span class="has-tooltip">*</span><span class="tooltip__content">Target your widget to specific countries. You can create different widgets for different countries</span></a></li>
											<li><a href="javascript:;" class="cus-tooltip">Available days and hours <span class="has-tooltip">*</span><span class="tooltip__content">Display the widget on specific days and hours based on your opening days and hours</span></a></li>
											<li><a href="javascript:;" class="cus-tooltip">Traffic source targeting <span class="has-tooltip">*</span><span class="tooltip__content">Show the widget only to visitors who come from specific traffic sources including direct traffic, social networks, search engines, Google Ads, or any other traffic source</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="price-table-bottom">
                                        <div class="custom-dd">
                                            <select class="multiple-options has-multiple-websites">
                                                <option data-option="1_year" data-header="Renewals for 25% off" data-price="99" value="<?php echo esc_url($pro_url."10") ?>">
                                                    <?php esc_html_e("Updates & support for 1 year") ?>
                                                </option>
                                                <option data-option="2_year" data-header="For 2 years" data-price="149" value="<?php echo esc_url($pro_url."15") ?>">
                                                    <?php esc_html_e("Updates & support for 2 years") ?>
                                                </option>
                                                <option data-option="lifetime" data-header="For lifetime" data-price="249" value="<?php echo esc_url($pro_url."12") ?>">
                                                    <?php esc_html_e("Updates & support for lifetime") ?>
                                                </option>
                                            </select>
                                        </div>
                                        <a class="cart-link" target="_blank" href="<?php echo esc_url($pro_url."3") ?>">Buy now</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="text-center price-after">
                    <p class="money-guaranteed"><span class="dashicons dashicons-yes"></span>
                        <?php esc_html_e("30 days money back guaranteed"); ?>
                    </p>
                    <p class="money-guaranteed"><span class="dashicons dashicons-yes"></span>
                        <?php esc_html_e("The plugin will always keep working even if you don't renew your license"); ?>
                    </p>
                    <div class="payments">
                        <img src="<?php echo plugins_url('/images/payment.png', __FILE__) ?>" alt="Payment" class="payment-img" />
                    </div>
                </div>
                <div class="folder-testimonial-list">
                    <div class="folder-testimonial">
                        <div class="testimonial-image"> <img src="<?php echo plugins_url('/images/image.png', __FILE__) ?>"> </div>
                        <div class="testimonial-data">
                            <div class="testimonial-title">Well crafted, beautiful design, furious fast support</div>
                            <div class="testimonial-desc">Well crafted, beautifully designed, with multiple integration options, growing in features with extremely fast and prudent support plugins. Discovering Pro versions has been a blazing amazing experience. Long live and happy development!<br/>
                                Give us more of that high raised bar of quality products like that &#128578;</div>
                            <div class="testimonial-author">- Vitaly Tulyakov</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var priceOptions = {"50_websites":{"1_year":{"price":99,"link":"https:\/\/go.premio.io\/?edd_action=add_to_cart&download_id=3432&edd_options[price_id]=10"},"2_year":{"price":149,"link":"https:\/\/go.premio.io\/?edd_action=add_to_cart&download_id=3432&edd_options[price_id]=15"},"lifetime":{"price":249,"link":"https:\/\/go.premio.io\/?edd_action=add_to_cart&download_id=3432&edd_options[price_id]=12"}},"500_websites":{"1_year":{"price":179,"link":"https:\/\/go.premio.io\/?edd_action=add_to_cart&download_id=3432&edd_options[price_id]=16"},"2_year":{"price":269,"link":"https:\/\/go.premio.io\/?edd_action=add_to_cart&download_id=3432&edd_options[price_id]=17"},"lifetime":{"price":449,"link":"https:\/\/go.premio.io\/?edd_action=add_to_cart&download_id=3432&edd_options[price_id]=18"}},"1000_websites":{"1_year":{"price":249,"link":"https:\/\/go.premio.io\/?edd_action=add_to_cart&download_id=3432&edd_options[price_id]=19"},"2_year":{"price":375,"link":"https:\/\/go.premio.io\/?edd_action=add_to_cart&download_id=3432&edd_options[price_id]=20"},"lifetime":{"price":619,"link":"https:\/\/go.premio.io\/?edd_action=add_to_cart&download_id=3432&edd_options[price_id]=21"}}};
    jQuery(document).ready(function(){
        if(jQuery(".multiple-options").length) {
            jQuery(".multiple-options").select2({
                minimumResultsForSearch: -1
            });
        }
        if(jQuery(".multiple-web-options").length) {
            jQuery(".multiple-web-options").select2({
                minimumResultsForSearch: -1
            });
        }
        jQuery(document).on("change", ".multiple-options", function(){
            priceText = jQuery(this).find("option:selected").attr("data-header");
            thisValue = jQuery(this).val();
            thisPrice = jQuery(this).find("option:selected").attr("data-price");
            if(!jQuery(this).hasClass("has-multiple-websites")) {
                jQuery(this).closest(".price-table").find("a.cart-link").attr("href", thisValue);
                jQuery(this).closest(".price-table").find(".plan-price").text("$" + thisPrice);
            } else {
                var webOption = jQuery(".multiple-web-options").val();
                var priceSettings = priceOptions[webOption];
                var yearPlan = jQuery(".multiple-options.has-multiple-websites option:selected").attr("data-option");
                if(priceSettings[yearPlan] != undefined) {
                    priceSettings = priceSettings[yearPlan];
                    thisValue = priceSettings.link;
                    thisPrice = priceSettings.price;
                }
            }
            thisOption = jQuery(this).find("option:selected").attr("data-option");
            if(thisOption == "1_year") {
                thisPrice = thisPrice+"<span>/year</span>";
                priceText = "Renewals for <b>25% off</b>";
            } else if(thisOption == "2_year") {
                thisPrice = thisPrice+"<span>/2 years</span>";
                priceText = "Renewals for <b>25% off</b>";
            } else {
                thisPrice = thisPrice+"<span>/lifetime</span>";
                priceText = "For lifetime";
            }
            jQuery(this).closest(".price-table").find("a.cart-link").attr("href", thisValue);
            jQuery(this).closest(".price-table").find(".plan-price").html("$" + thisPrice);
            jQuery(this).closest(".price-table").find(".price-offer").html(priceText);
        });

        jQuery(document).on("change", ".multiple-web-options", function(){
            jQuery(".multiple-options.has-multiple-websites").trigger("change");
        });

        if(jQuery(".multiple-options.has-multiple-websites").length) {
            jQuery(".multiple-options.has-multiple-websites").trigger("change");
        }
    });
</script>