<?php

namespace ThemeAtelier\EventfulForElementor\Admin\HelpPage;

use ThemeAtelier\EventfulForElementor\Frontend\Helpers\EventfulForElementorSettingsAPI;

if (! defined('ABSPATH')) {
    exit;
}  // if direct access.

/**
 * The help class for the Eventful for Elementor Free
 */
class Help
{

    /**
     * Single instance of the class
     *
     * @var null
     */
    protected static $_instance = null;

    /**
     * Plugins Path variable.
     *
     * @var array
     */
    protected static $plugins = array(
        'greet-bubble'              => 'greet-bubble.php',
        'domain-for-sale'           => 'domain-for-sale.php',
        'ask-faq'                   => 'ask-faq.php',
        'attentive-security'        => 'attentive-security.php',
        'better-chat-support'       => 'messenger-chat-support.php',
        'bizreview'                 => 'bizreview.php',
        'booklet-booking-system'    => 'booklet.php',
        'skype-chat'                => 'skype-chat.php',
        'chat-help'                 => 'chat-whatsapp.php',
        'chat-telegram'             => 'telegram-chat.php',
        'chat-viber'                => 'chat-viber-lite.php',
        'click-to-dial'             => 'click-to-dial.php',
        'click-to-mail'             => 'click-to-mail.php',
        'darkify'                   => 'darkify.php',
        'eventful-for-elementor'    => 'eventful-for-elementor.php',
        'postify'                   => 'postify.php',
    );


    /**
     * Welcome pages
     *
     * @var array
     */
    public $pages = array(
        'eventful-for-elemenetor',
    );

    /**
     * Not show this plugin list.
     *
     * @var array
     */
    protected static $not_show_plugin_list = array('eventful-for-elementor', 'chat-viber', 'chat-telegram', 'click-to-dial', 'chat-skype', 'click-to-mail', 'ask-faq,', 'attentive-security', 'booklet-booking-system', 'postify', 'ask-faq');
    private $settings_api;
    /**
     * Help page construct function.
     */
    public function __construct()
    {
        add_action('eventful_recommended_page_menu', array($this, 'help_admin_menu'), 80);
        add_action('admin_enqueue_scripts', array($this, 'help_page_enqueue_scripts'));
        // Add this line to register the option
        register_setting('efe_ea_addons', 'efe_ea_addons');
        $page   = isset($_GET['page']) ? sanitize_text_field(wp_unslash($_GET['page'])) : '';
        if ('eventful-for-elementor' !== $page) {
            return;
        }
        add_action('admin_print_scripts', array($this, 'disable_admin_notices'));
        $this->settings_api = new EventfulForElementorSettingsAPI;
        add_action('admin_init', array($this, 'admin_init'));
    }

    /**
     * Admin Init.
     */
    public function admin_init()
    {
        // set the settings.
        $this->settings_api->set_sections($this->get_settings_sections());
        $this->settings_api->set_fields($this->get_settings_fields());

        // initialize settings.
        $this->settings_api->admin_init();
    }
    /**
     * Settings Sections.
     */
    public function get_settings_sections()
    {
        $sections = apply_filters(
            'efe_ea_settings_sections',
            array(
                array(
                    'id'     => 'efe_ea_addons',
                    'title'  => esc_html__('Enable/Disable Eventful elementor widgets as you need.', 'eventful-for-elementor'),
                    'addons' => true,
                    'icon'   => 'dashicons dashicons-admin-tools',
                ),

            )
        );

        return $sections;
    }

    /**
     * Returns all the settings fields
     *
     * @return array settings fields
     */
    public function get_settings_fields()
    {

        $settings_fields = apply_filters(
            'efe_ea_settings_fields',
            array(
                'efe_ea_addons' => apply_filters(
                    'efe_ea_required_addons',
                    array(
                        array(
                            'name'    => EVENTFUL_ELEMENTOR_EA_PREFIX . 'grid_layout',
                            'label'   => esc_html__('Grid', 'eventful-for-elementor'),
                            'desc'    => esc_html__('Grid layout widget for Eventful for Elementor. Available for free and pro version.', 'eventful-for-elementor'),
                            'icon'    => 'eicon-gallery-grid',
                            'type'    => 'toggle',
                            'default' => 'on',
                        ),

                        array(
                            'name'    => EVENTFUL_ELEMENTOR_EA_PREFIX . 'carousel_layout',
                            'label'   => esc_html__('Carousel', 'eventful-for-elementor'),
                            'desc'    => esc_html__('Carousel layout widget for Eventful for Elementor. Available for free and pro version.', 'eventful-for-elementor'),
                            'icon'    => 'eicon-carousel',
                            'type'    => 'toggle',
                            'default' => 'on',
                        ),

                        array(
                            'name'    => EVENTFUL_ELEMENTOR_EA_PREFIX . 'list_layout',
                            'label'   => esc_html__('List', 'eventful-for-elementor'),
                            'desc'    => esc_html__('List layout widget for Eventful for Elementor. Available for pro version only.', 'eventful-for-elementor'),
                            'icon'    => 'eicon-editor-list-ul',
                            'type'    => 'toggle',
                            'default' => 'off',
                            'class'     => 'efe-pro-feature',
                        ),



                    )
                ),



            )
        );

        return $settings_fields;
    }

    /**
     * Add admin menu.
     *
     * @return void
     */
    public function help_admin_menu()
    {
        add_submenu_page(
            'admin.php?page=custompage',
            __('Recommended', 'eventful-for-elementor'),
            __('Recommended', 'eventful-for-elementor'),
            'manage_options',
            'admin.php?page=eventful-for-elementor#recommended',
        );
        add_submenu_page(
            'admin.php?page=custompage',
            __('Lite vs Pro', 'eventful-for-elementor'),
            __('Lite vs Pro', 'eventful-for-elementor'),
            'manage_options',
            'admin.php?page=eventful-for-elementor#lite-to-pro'
        );

        add_submenu_page(
            'admin.php?page=custompage',
            __('Get Help', 'eventful-for-elementor'),
            __('Get Help', 'eventful-for-elementor'),
            'manage_options',
            'eventful',
            array(
                $this,
                'help_page_callback',
            )
        );
    }


    /**
     * Main Help page Instance
     *
     * @static
     * @return self Main instance
     */
    public static function instance()
    {
        if (is_null(self::$_instance)) {
            self::$_instance = new self();
        }

        return self::$_instance;
    }

    /**
     * Help_page_enqueue_scripts function.
     *
     * @return void
     */
    public function help_page_enqueue_scripts()
    {
        wp_enqueue_style('eventful-for-elementor-help-style', plugins_url('assets/css/help-page.css', __FILE__), array(), EVENTFUL_ELEMENTOR_VERSION);
        wp_enqueue_style('icofont', plugins_url('assets/css/icofont.css', __FILE__), array(), EVENTFUL_ELEMENTOR_VERSION);
        wp_enqueue_script('eventful-for-elementor-help-script', plugins_url('assets/js/help-page.js', __FILE__), array(), EVENTFUL_ELEMENTOR_VERSION, true);
    }



    /**
     * Sprtf_plugins_info_api_help_page function.
     *
     * @return void
     */
    public function themeatelier_plugins_info_api_help_page()
    {
        $plugins_arr = get_transient('themeatelier_plugins');
        if (false === $plugins_arr) {
            $args    = (object) array(
                'author'   => 'themeatelier',
                'per_page' => '120',
                'page'     => '1',
                'fields'   => array(
                    'slug',
                    'name',
                    'version',
                    'downloaded',
                    'active_installs',
                    'last_updated',
                    'rating',
                    'num_ratings',
                    'short_description',
                    'author',
                ),
            );
            $request = array(
                'action'  => 'query_plugins',
                'timeout' => 30,
                'request' => serialize($args),
            );
            // https://codex.wordpress.org/WordPress.org_API.
            $url      = 'http://api.wordpress.org/plugins/info/1.0/';
            $response = wp_remote_post($url, array('body' => $request));

            if (! is_wp_error($response)) {

                $plugins_arr = array();
                $plugins     = unserialize($response['body']);

                if (isset($plugins->plugins) && (count($plugins->plugins) > 0)) {
                    foreach ($plugins->plugins as $pl) {
                        if (! in_array($pl->slug, self::$not_show_plugin_list, true)) {
                            $plugins_arr[] = array(
                                'slug'              => $pl->slug,
                                'name'              => $pl->name,
                                'version'           => $pl->version,
                                'downloaded'        => $pl->downloaded,
                                'active_installs'   => $pl->active_installs,
                                'last_updated'      => strtotime($pl->last_updated),
                                'rating'            => $pl->rating,
                                'num_ratings'       => $pl->num_ratings,
                                'short_description' => $pl->short_description,
                            );
                        }
                    }
                }

                set_transient('themeatelier_plugins', $plugins_arr, 24 * HOUR_IN_SECONDS);
            }
        }

        if (is_array($plugins_arr) && (count($plugins_arr) > 0)) {
            array_multisort(array_column($plugins_arr, 'active_installs'), SORT_DESC, $plugins_arr);


            foreach ($plugins_arr as $plugin) {
                $plugin_slug = $plugin['slug'];
                $image_type  = 'png';
                if (isset(self::$plugins[$plugin_slug])) {
                    $plugin_file = self::$plugins[$plugin_slug];
                } else {
                    $plugin_file = $plugin_slug . '.php';
                }

                switch ($plugin_slug) {
                    case 'postify':
                        $image_type = 'jpg';
                        break;
                    case 'darkify':
                        $image_type = 'gif';
                        break;
                }

                $details_link = network_admin_url('plugin-install.php?tab=plugin-information&amp;plugin=' . $plugin['slug'] . '&amp;TB_iframe=true&amp;width=600&amp;height=550');
?>
                <div class="plugin-card <?php echo esc_attr($plugin_slug); ?>" id="<?php echo esc_attr($plugin_slug); ?>">
                    <div class="plugin-card-top">
                        <div class="name column-name">
                            <h3>
                                <a class="thickbox" title="<?php echo esc_attr($plugin['name']); ?>"
                                    href="<?php echo esc_url($details_link); ?>">
                                    <?php echo esc_html($plugin['name']); ?>
                                    <img src="<?php echo esc_url('https://ps.w.org/' . $plugin_slug . '/assets/icon-256x256.' . $image_type); ?>"
                                        class="plugin-icon" />
                                </a>
                            </h3>
                        </div>
                        <div class="action-links">
                            <ul class="plugin-action-buttons">
                                <li>
                                    <?php
                                    if ($this->is_plugin_installed($plugin_slug, $plugin_file)) {
                                        if ($this->is_plugin_active($plugin_slug, $plugin_file)) {
                                    ?>
                                            <button type="button" class="button button-disabled" disabled="disabled">Active</button>
                                        <?php
                                        } else {
                                        ?>
                                            <a href="<?php echo esc_url($this->activate_plugin_link($plugin_slug, $plugin_file)); ?>"
                                                class="button button-primary activate-now">
                                                <?php esc_html_e('Activate', 'eventful-for-elementor'); ?>
                                            </a>
                                        <?php
                                        }
                                    } else {
                                        ?>
                                        <a href="<?php echo esc_url($this->install_plugin_link($plugin_slug)); ?>"
                                            class="button install-now">
                                            <?php esc_html_e('Install Now', 'eventful-for-elementor'); ?>
                                        </a>
                                    <?php } ?>
                                </li>
                                <li>
                                    <a href="<?php echo esc_url($details_link); ?>" class="thickbox open-plugin-details-modal"
                                        aria-label="<?php echo esc_html('More information about ' . $plugin['name']); ?>"
                                        title="<?php echo esc_attr($plugin['name']); ?>">
                                        <?php esc_html_e('More Details', 'eventful-for-elementor'); ?>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="desc column-description">
                            <p><?php echo esc_html(isset($plugin['short_description']) ? $plugin['short_description'] : ''); ?></p>
                            <p class="authors"> <cite>By <a href="https://themeatelier.com/">Themeatelier</a></cite></p>
                        </div>
                    </div>
                    <?php
                    echo '<div class="plugin-card-bottom">';

                    if (isset($plugin['rating'], $plugin['num_ratings'])) {
                    ?>
                        <div class="vers column-rating">
                            <?php
                            wp_star_rating(
                                array(
                                    'rating' => $plugin['rating'],
                                    'type'   => 'percent',
                                    'number' => $plugin['num_ratings'],
                                )
                            );
                            ?>
                            <span class="num-ratings">(<?php echo esc_html(number_format_i18n($plugin['num_ratings'])); ?>)</span>
                        </div>
                    <?php
                    }
                    if (isset($plugin['version'])) {
                    ?>
                        <div class="column-updated">
                            <strong><?php esc_html_e('Version:', 'eventful-for-elementor'); ?></strong>
                            <span><?php echo esc_html($plugin['version']); ?></span>
                        </div>
                    <?php
                    }

                    if (isset($plugin['active_installs'])) {
                    ?>
                        <div class="column-downloaded">
                            <?php echo esc_html(number_format_i18n($plugin['active_installs'])) . esc_html__('+ Active Installations', 'eventful-for-elementor'); ?>
                        </div>
                    <?php
                    }

                    if (isset($plugin['last_updated'])) {
                    ?>
                        <div class="column-compatibility">
                            <strong><?php esc_html_e('Last Updated:', 'eventful-for-elementor'); ?></strong>
                            <span><?php echo esc_html(human_time_diff($plugin['last_updated'])) . ' ' . esc_html__('ago', 'eventful-for-elementor'); ?></span>
                        </div>
                    <?php
                    }

                    echo '</div>';
                    ?>
                </div>
        <?php
            }
        }
    }

    /**
     * Check plugins installed function.
     *
     * @param string $plugin_slug Plugin slug.
     * @param string $plugin_file Plugin file.
     * @return boolean
     */
    public function is_plugin_installed($plugin_slug, $plugin_file)
    {
        return file_exists(WP_PLUGIN_DIR . '/' . $plugin_slug . '/' . $plugin_file);
    }

    /**
     * Check active plugin function
     *
     * @param string $plugin_slug Plugin slug.
     * @param string $plugin_file Plugin file.
     * @return boolean
     */
    public function is_plugin_active($plugin_slug, $plugin_file)
    {
        return is_plugin_active($plugin_slug . '/' . $plugin_file);
    }

    /**
     * Install plugin link.
     *
     * @param string $plugin_slug Plugin slug.
     * @return string
     */
    public function install_plugin_link($plugin_slug)
    {
        return wp_nonce_url(self_admin_url('update.php?action=install-plugin&plugin=' . $plugin_slug), 'install-plugin_' . $plugin_slug);
    }

    /**
     * Active Plugin Link function
     *
     * @param string $plugin_slug Plugin slug.
     * @param string $plugin_file Plugin file.
     * @return string
     */
    public function activate_plugin_link($plugin_slug, $plugin_file)
    {
        return wp_nonce_url(admin_url('admin.php?page=eventful-for-elementor&action=activate&plugin=' . $plugin_slug . '/' . $plugin_file . '#recommended'), 'activate-plugin_' . $plugin_slug . '/' . $plugin_file);
    }


    /**
     * Making page as clean as possible
     */
    public function disable_admin_notices()
    {

        global $wp_filter;

        $page   = isset($_GET['page']) ? sanitize_text_field(wp_unslash($_GET['page'])) : '';
        if ('eventful-for-elementor' == $page) {
            if (isset($wp_filter['user_admin_notices'])) {
                unset($wp_filter['user_admin_notices']);
            }
            if (isset($wp_filter['admin_notices'])) {
                unset($wp_filter['admin_notices']);
            }
            if (isset($wp_filter['all_admin_notices'])) {
                unset($wp_filter['all_admin_notices']);
            }
        }
    }
    /**
     * The Eventful Help Callback.
     *
     * @return void
     */
    public function help_page_callback()
    {

        add_thickbox();

        $action   = isset($_GET['action']) ? sanitize_text_field(wp_unslash($_GET['action'])) : '';
        $plugin   = isset($_GET['plugin']) ? sanitize_text_field(wp_unslash($_GET['plugin'])) : '';
        $_wpnonce = isset($_GET['_wpnonce']) ? sanitize_text_field(wp_unslash($_GET['_wpnonce'])) : '';

        if (isset($action, $plugin) && ('activate' === $action) && wp_verify_nonce($_wpnonce, 'activate-plugin_' . $plugin)) {
            activate_plugin($plugin, '', false, true);
        }

        if (isset($action, $plugin) && ('deactivate' === $action) && wp_verify_nonce($_wpnonce, 'deactivate-plugin_' . $plugin)) {
            deactivate_plugins($plugin, '', false, true);
        }

        ?>
        <div class="eventful">
            <!-- Header section start -->
            <section class="themeatelier__help header">
                <div class="themeatelier-container">
                    <div class="header_nav">
                        <div class="header_nav_left">
                            <div class="header_nav_logo">
                                <img src="<?php echo esc_url(EVENTFUL_ELEMENTOR_PLUGIN_URL . 'src/Admin/HelpPage/assets/images/eventful-logo.svg') ?>"
                                    alt="logo">
                            </div>
                            <div class="header_nav_menu">
                                <ul>

                                    <li>
                                        <a href="<?php echo esc_url(get_admin_url('') . 'admin.php?page=eventful-for-elementor#widgets'); ?>" data-id="widgets" class="active">
                                            <i class="icofont-layout"></i>
                                            <?php echo esc_html__('Widgets', 'eventful-for-elementor') ?>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="<?php echo esc_url(get_admin_url('') . 'admin.php?page=eventful-for-elementor#get-start'); ?>" data-id="get-start-tab">
                                            <i class="icofont-play-alt-2"></i>
                                            <?php echo esc_html__('Get Started', 'eventful-for-elementor') ?>
                                        </a>
                                    </li>
                                    <li>

                                        <a href="<?php echo esc_url(get_admin_url('') . 'admin.php?page=eventful-for-elementor#recommended'); ?>" data-id="recommended-tab">
                                            <i class="icofont-thumbs-up"></i>
                                            <?php echo esc_html__('Recommended', 'eventful-for-elementor') ?>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="<?php echo esc_url(get_admin_url('') . 'admin.php?page=eventful-for-elementor#lite-to-pro'); ?>" data-id="lite-to-pro-tab">
                                            <i class="icofont-badge"></i>
                                            <?php echo esc_html__('Lite Vs Pro', 'eventful-for-elementor') ?>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="<?php echo esc_url(get_admin_url('') . 'admin.php?page=eventful-for-elementor#pro-plugins'); ?>" data-id="pro-plugins-tab">
                                            <i class="icofont-info-circle"></i>
                                            <?php echo esc_html__('Pro Plugins', 'eventful-for-elementor') ?>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="header_nav_right">
                            <div class="header_nav_right_menu">
                                <a target="_blank" href="https://themeatelier.net/downloads/eventful-for-elementor/#pricing"><?php echo esc_html__('🚀 Upgrading To Pro!', 'eventful-for-elementor') ?></a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--header section end -->

            <!-- Start Page -->
            <section class="start_page tab-content" id="get-start-tab">
                <div class="themeatelier-container">
                    <div class="start_page_wrapper">
                        <div class="start_page_nav">
                            <div class="nav_left">
                                <h2 class="section_title"><?php echo esc_html('Welcome to Eventful For Elementor!', 'eventful-for-elementor') ?><span class="version__badge"><?php echo esc_html(EVENTFUL_ELEMENTOR_VERSION) ?></span></h2>
                                <span class="section_subtitle">
                                    <?php echo esc_html__('Thank you for installing Eventful For Elementor! This playlist will help you get started with the
                                    plugin. Enjoy!', 'eventful-for-elementor') ?>
                                </span>
                            </div>
                            <div class="nev_right">
                                <i class="icofont-youtube-play"></i>
                                <a target="_blank" href="https://www.youtube.com/@themeatelier">Themeatelier</a>
                            </div>
                        </div>
                        <div class="section_video">
                            <div class="video">
                                <iframe width="724" height="405" src="https://www.youtube.com/embed/xCS9jqt2lBQ"
                                    title="EVENTFUL - Events Showcase for The Events Calendar - Overview" frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                            </div>
                            <div class="section_video_play_list">
                                <div class="play_list_item active" data-video_id="qjaYKsAh9k4">
                                    <div class="play_list_item_img">
                                        <img src="<?php echo esc_url(EVENTFUL_ELEMENTOR_PLUGIN_URL . 'src/Admin/HelpPage/assets/images/eventful.jpg') ?>" alt="">
                                    </div>
                                    <div class="play_list_item_content">
                                        <div class="title">Events Showcase For Elementor And The Events Calendar WordPress Plugin</div>
                                        <span>5:41</span>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <ul class="section_buttons">

                            <li>
                                <a target="_blank" class="eventful_btn_primary"
                                    href="https://wp-plugins.themeatelier.net/eventful"><?php echo esc_html__('Live Demo', 'eventful-for-elementor') ?></a>
                            </li>
                            <li>
                                <a target="_blank" class="eventful_btn_secondary arrow-btn"
                                    href="https://themeatelier.net/downloads/eventful-for-elementor/"><?php echo esc_html__('Upgrade To Pro', 'eventful-for-elementor') ?>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="section_quick_help">
                        <div class="quick_help_wrapper">
                            <a target="_blank" href="https://docs.themeatelier.net/docs/eventful-pro-for-elementor/overview" class="quick_help_item">
                                <div class="quick_help_item_icon"><i class="icofont-file-alt"></i></div>
                                <div class="quick_help_item_content">
                                    <h4 class="quick_help_item_title">
                                        <?php echo esc_html__('Documentation', 'eventful-for-elementor') ?>
                                    </h4>
                                    <div class="content"><?php echo esc_html__('Explore Whatsapp Chat Help plugin capabilities in our enriched documentation.', 'eventful-for-elementor') ?></div>
                                </div>
                            </a>
                            <a target="_blank" href="https://wordpress.org/support/plugin/eventful-for-elementor/" class="quick_help_item">
                                <div class="quick_help_item_icon"><i class="icofont-support"></i></div>
                                <div class="quick_help_item_content">
                                    <h4 class="quick_help_item_title">
                                        <?php echo esc_html__('Technical Support', 'eventful-for-elementor') ?>
                                    </h4>
                                    <div class="content"><?php echo esc_html__('For personalized assistance, reach out to our skilled support team for prompt help.', 'eventful-for-elementor') ?></div>
                                </div>
                            </a>
                            <a target="_blank" href="https://www.themeatelier.net/contact/" class="quick_help_item">
                                <div class="quick_help_item_icon"><i class="icofont-users"></i></div>
                                <div class="quick_help_item_content">
                                    <h4 class="quick_help_item_title">
                                        <?php echo esc_html__('Hire Us!', 'eventful-for-elementor') ?>
                                    </h4>
                                    <div class="content"><?php echo esc_html__('We are available for freelance work for any WordPress, React, NextJS projects. Click to contact us.', 'eventful-for-elementor') ?></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Widgets Page -->
            <section id="widgets" class="widgets_page tab-content active">
                <div class="themeatelier-container">

                    <?php

                    $count = count($this->get_settings_sections());
                    if ($count <= 1) {
                        $class = 'efe-ea-settings-sections-no';
                    } else {
                        $class = 'efe-ea-settings-sections-yes';
                    }

                    echo '<div class="wrap efe-wrap about-wrap efe-ea-settings-wrap ' . esc_attr($class) . '">';
                    settings_errors();
                    $this->settings_api->show_navigation();
                    $this->settings_api->show_forms();
                    echo '</div>';
                    ?>
                </div>
            </section>

            <!-- Recommended Page -->
            <section id="recommended-tab" class="recommended_page tab-content">
                <div class="themeatelier-container">
                    <h2 class="help_page_title">Enhance your Website with our Free Robust Plugins</h2>
                    <div class="themeatelier-wp-list-table plugin-install-php">
                        <div class="recommended_plugins" id="the-list">
                            <?php
                            $this->themeatelier_plugins_info_api_help_page();
                            ?>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Lite To Pro Page -->
            <section class="themeatelier__help lite_vs_pro_page tab-content" id="lite-to-pro-tab">
                <div class="themeatelier-container">
                    <h2 class="help_page_title">Lite Vs Pro Comparison</h2>
                    <div class="lite_vs_pro_page_wrap">
                        <div class="themeatelier-features">
                            <ul>
                                <li class="themeatelier-header">
                                    <span class="themeatelier-title"><?php echo esc_html__('FEATURES', 'eventful-for-elementor'); ?></span>
                                    <span class="themeatelier-free"><?php echo esc_html__('Lite', 'eventful-for-elementor'); ?></span>
                                    <span class="themeatelier-pro">🚀<?php echo esc_html__('PRO', 'eventful-for-elementor'); ?></span>
                                </li>
                                <li class="themeatelier-body">
                                    <span class="themeatelier-title"><?php echo esc_html__('All Free Version Features', 'eventful-for-elementor'); ?></span>
                                    <span class="themeatelier-free themeatelier-check-icon"></span>
                                    <span class="themeatelier-pro themeatelier-check-icon"></span>
                                </li>
                                <li class="themeatelier-body">
                                    <span class="themeatelier-title">
                                        <?php echo esc_html__('Layouts', 'eventful-for-elementor'); ?>
                                    </span>
                                    <span class="themeatelier-free"><b>2</b></span>
                                    <span class="themeatelier-pro"><b>3</b></span>
                                </li>
                                <li class="themeatelier-body">
                                    <span class="themeatelier-title">
                                        <?php echo esc_html__('Event Type Filters', 'eventful-for-elementor'); ?>
                                        <i class="themeatelier-hot"><?php echo esc_html__('Hot', 'eventful-for-elementor'); ?></i>
                                    </span>
                                    <span class="themeatelier-free"><span class="themeatelier-free themeatelier-close-icon"></span></span>
                                    <span class="themeatelier-pro"><span class="themeatelier-free themeatelier-check-icon"></span></span>
                                </li>

                                <li class="themeatelier-body">
                                    <span class="themeatelier-title">
                                        <?php echo esc_html__('Social Share', 'eventful-for-elementor'); ?>
                                        <i class="themeatelier-new"><?php echo esc_html__('New', 'eventful-for-elementor'); ?></i>
                                    </span>
                                    <span class="themeatelier-free"><span class="themeatelier-free themeatelier-close-icon"></span></span>
                                    <span class="themeatelier-pro"><span class="themeatelier-free themeatelier-check-icon"></span></span>
                                </li>

                                <li class="themeatelier-body">
                                    <span class="themeatelier-title">
                                        <?php echo esc_html__('Custom Fields', 'eventful-for-elementor'); ?>
                                        <i class="themeatelier-new">New</i><i class="themeatelier-hot"><?php echo esc_html__('Hot', 'eventful-for-elementor'); ?></i>
                                    </span>
                                    <span class="themeatelier-free"><span class="themeatelier-free themeatelier-close-icon"></span></span>
                                    <span class="themeatelier-pro"><span class="themeatelier-free themeatelier-check-icon"></span></span>
                                </li>


                                <li class="themeatelier-body">
                                    <span class="themeatelier-title"><?php echo esc_html__('Category Filters', 'eventful-for-elementor'); ?></span>
                                    <span class="themeatelier-free themeatelier-check-icon"></span>
                                    <span class="themeatelier-pro themeatelier-check-icon"></span>
                                </li>

                                <li class="themeatelier-body">
                                    <span class="themeatelier-title"><?php echo esc_html__('Ajax Live Filters', 'eventful-for-elementor'); ?></span>
                                    <span class="themeatelier-free themeatelier-check-icon"></span>
                                    <span class="themeatelier-pro themeatelier-check-icon"></span>
                                </li>
                                <li class="themeatelier-body">
                                    <span class="themeatelier-title"><?php echo esc_html__('Shortcode', 'eventful-for-elementor'); ?></span>
                                    <span class="themeatelier-free themeatelier-check-icon"></span>
                                    <span class="themeatelier-pro themeatelier-check-icon"></span>
                                </li>

                                <li class="themeatelier-body">
                                    <span class="themeatelier-title"><?php echo esc_html__('Events Schema Seo Support', 'eventful-for-elementor'); ?></span>
                                    <span class="themeatelier-free themeatelier-check-icon"></span>
                                    <span class="themeatelier-pro themeatelier-check-icon"></span>
                                </li>

                                <li class="themeatelier-body">
                                    <span class="themeatelier-title"><?php echo esc_html__('Compatible With Elementor', 'eventful-for-elementor'); ?></span>
                                    <span class="themeatelier-free themeatelier-check-icon"></span>
                                    <span class="themeatelier-pro themeatelier-check-icon"></span>
                                </li>


                                <li class="themeatelier-body">
                                    <span class="themeatelier-title"><?php echo esc_html__('Gutenberg Blocks', 'eventful-for-elementor'); ?></span>
                                    <span class="themeatelier-free themeatelier-check-icon"></span>
                                    <span class="themeatelier-pro themeatelier-check-icon"></span>
                                </li>

                            </ul>
                        </div>

                        <div class="themeatelier-upgrade-to-pro">
                            <h2 class="themeatelier-section-title"><?php echo esc_html__('Upgrade To PRO & Enjoy Advanced Features!', 'eventful-for-elementor'); ?></h2>
                            <span class="themeatelier-section-subtitle">
                                <?php
                                /* translators: %s: Number of users */
                                echo sprintf(esc_html__('Already, %s people are using Whatsapp Chat Help on their websites to create beautiful showcases, why won’t you!', 'eventful-for-elementor'), '<b>50000+</b>'); ?>
                            </span>
                            <div class="themeatelier-upgrade-to-pro-btn">
                                <div class="themeatelier-action-btn">
                                    <a target="_blank" href="https://themeatelier.net/downloads/eventful-for-elementor/#pricing" class="eventful_btn_primary">
                                        <?php echo esc_html__('Upgrade to Pro Now!', 'eventful-for-elementor'); ?>
                                    </a>
                                    <span class="themeatelier-small-paragraph">
                                        <?php
                                        /* translators: %s: Refund policy link */
                                        echo sprintf(esc_html__('14-Day No-Questions-Asked %s', 'eventful-for-elementor'), '<a target="_blank" href="https://themeatelier.net/refund-policy/">' . esc_html__('Refund Policy', 'eventful-for-elementor') . '</a>'); ?>
                                    </span>
                                </div>
                                <a target="_blank" class="eventful_btn_secondary" href="https://themeatelier.net/downloads/eventful-for-elementor/#features"><?php echo esc_html__('See All Features', 'eventful-for-elementor'); ?></a>
                                <a target="_blank" class="eventful_btn_secondary" href="https://wp-plugins.themeatelier.net/eventful/eventful-el-carousel/"><?php echo esc_html__('Pro Live Demo', 'eventful-for-elementor'); ?></a>
                            </div>
                        </div>
                    </div>

                    <div class="eventful">
                        <div class="eventful_title_section">
                            <span class="eventful-subtitle"><?php echo esc_html__('NO NEED TO TAKE OUR WORD FOR IT', 'eventful-for-elementor'); ?></span>
                            <h2 class="themeatelier-section-title"><?php echo esc_html__('Our Users Love Eventful for Elementor!', 'eventful-for-elementor'); ?></h2>
                        </div>
                        <div class="eventful_wrap">

                            <div class="eventful_area">
                                <div class="eventful_content">
                                    <p><?php echo esc_html__('Great plugin with clean codes. Its codebase demonstrates a high standard of cleanliness and efficiency, reflecting thoughtful development practices geared towards performance and user accessibility.', 'eventful-for-elementor'); ?></p>
                                </div>
                                <div class="eventful-info">
                                    <div class="themeatelier-img">
                                        <img src="<?php echo esc_url(EVENTFUL_ELEMENTOR_PLUGIN_URL . 'src/Admin/HelpPage/assets/images/user_image.jpg'); ?>"
                                            alt="<?php echo esc_attr__('Prexius', 'eventful-for-elementor'); ?>">
                                    </div>
                                    <div class="themeatelier-info">
                                        <h3><?php echo esc_html__('Prexius', 'eventful-for-elementor'); ?></h3>
                                        <div class="themeatelier-star">
                                            <i>★★★★★</i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="eventful_area">
                                <div class="eventful_content">
                                    <p><?php echo esc_html__('I had an issue and they helped me very efficiently and fast. 10/10', 'eventful-for-elementor'); ?></p>
                                </div>
                                <div class="eventful-info">
                                    <div class="themeatelier-img">
                                        <img src="<?php echo esc_url(EVENTFUL_ELEMENTOR_PLUGIN_URL . 'src/Admin/HelpPage/assets/images/user_image.jpg'); ?>"
                                            alt="<?php echo esc_attr__('Ivanmvian', 'eventful-for-elementor'); ?>">
                                    </div>
                                    <div class="themeatelier-info">
                                        <h3><?php echo esc_html__('Ivanmvian', 'eventful-for-elementor'); ?></h3>
                                        <div class="themeatelier-star">
                                            <i>★★★★★</i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="eventful_area">
                                <div class="eventful_content">
                                    <p><?php echo esc_html__('Great plugin at a killer price. It does the basic job easily and customization features go deep. Really fast customer support also noteworthy.Thanks!', 'eventful-for-elementor'); ?></p>
                                </div>
                                <div class="eventful-info">
                                    <div class="themeatelier-img">
                                        <img src="<?php echo esc_url(EVENTFUL_ELEMENTOR_PLUGIN_URL . 'src/Admin/HelpPage/assets/images/user_image.jpg'); ?>"
                                            alt="<?php echo esc_attr__('Albertmargeli', 'eventful-for-elementor'); ?>">
                                    </div>
                                    <div class="themeatelier-info">
                                        <h3><?php echo esc_html__('Albertmargeli', 'eventful-for-elementor'); ?></h3>
                                        <div class="themeatelier-star">
                                            <i>★★★★★</i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>

            <!-- About Page -->
            <section id="pro-plugins-tab" class="themeatelier__help about-page tab-content">
                <div class="themeatelier-container">
                    <h2 class="help_page_title">Upgrade your Website with our High-quality Plugins!</h2>
                    <div class="themeatelier-our-plugin-list">
                        <div class="themeatelier-our-plugin-list-wrap">
                            <a target="_blank" class="themeatelier-our-plugin-list-box" href="https://themeatelier.net/downloads/eventful-for-elementor/">
                                <div class="box_btn">
                                    View Details
                                    <i class="icofont-long-arrow-right"></i>
                                </div>
                                <img src="<?php echo esc_url(EVENTFUL_ELEMENTOR_PLUGIN_URL . 'src/Admin/HelpPage/assets/images/eventful-for-elementor.png') ?>" alt="logo">
                                <h4>Eventful for Elementor - Events Showcase for The "The Events Calendar"</h4>
                                <p>Easily display events from The Events Calendar plugin with Elementor widgets, offering seamless customization and powerful layout options.</p>
                            </a>
                            <a target="_blank" class="themeatelier-our-plugin-list-box" href="https://wpchathelp.com/">
                                <div class="box_btn">
                                    View Details
                                    <i class="icofont-long-arrow-right"></i>
                                </div>
                                <img src="https://ps.w.org/chat-help/assets/icon-256x256.png?rev=3481609" alt="WhatsApp Chat Help">
                                <h4>WhatsApp Chat Help - Chat Support Plugin For WordPress</h4>
                                <p>Whatsapp chat support is a WordPress plugin that allows website owners to easily add a WhatsApp chat button to their website.</p>
                            </a>
                            <a target="_blank" class="themeatelier-our-plugin-list-box" href="https://darkifywp.com/">
                                <div class="box_btn">
                                    View Details
                                    <i class="icofont-long-arrow-right"></i>
                                </div>
                                <img src="https://ps.w.org/darkify/assets/icon-256x256.gif?rev=3301202" alt="Darkify">
                                <h4>Darkify - WordPress Dark Mode Plugin</h4>
                                <p>Darkify – is an extremely advanced dark mode plugin for any WordPress website. The plugin has the option to enable a dark mode switcher for the front end and also WordPress admin.</p>
                            </a>
                            <a target="_blank" class="themeatelier-our-plugin-list-box" href="https://themeatelier.net/downloads/greet-bubble/">
                                <div class="box_btn">
                                    View Details
                                    <i class="icofont-long-arrow-right"></i>
                                </div>
                                <img src="https://ps.w.org/greet-bubble/assets/icon-256x256.png?rev=3153272" alt="Greet Bubble">
                                <h4>Greet Bubble - Video Bubble Plugin for WordPress</h4>
                                <p>Placing a video on websites can increase the sales of your services or products in a significant way. Greet is a professional video bubble plugin for showing a welcome video on your websites in a great and fun way.</p>
                            </a>
                            <a target="_blank" class="themeatelier-our-plugin-list-box" href="https://wpeventful.com/">
                                <div class="box_btn">
                                    View Details
                                    <i class="icofont-long-arrow-right"></i>
                                </div>
                                <img src="https://ps.w.org/eventful/assets/icon-256x256.png?rev=3481619" alt="Eventful">
                                <h4>Eventful Shortcode Version- Events Showcase for The "The Events Calendar"</h4>
                                <p>With "Eventful," you can effortlessly create intelligent layouts for "The Events Calendar" plugin, effectively addressing and resolving compatibility issues that may arise.</p>
                            </a>


                            <a target="_blank" class="themeatelier-our-plugin-list-box" href="https://wpdomainforsale.com/">
                                <div class="box_btn">
                                    View Details
                                    <i class="icofont-long-arrow-right"></i>
                                </div>
                                <img src="https://ps.w.org/domain-for-sale/assets/icon-256x256.png?rev=3337336" alt="Domain For Sale">
                                <h4>WordPress Domain For Sale Plugin</h4>
                                <p>The ultimate WordPress plugin for domain sales, appraisals, auctions, and marketplace management.</p>
                            </a>

                        </div>
                    </div>
                </div>
            </section>

            <!-- Footer Section -->
            <section class="themeatelier_footer">
                <div class="themeatelier_footer_top">
                    <p>
                        <span>Made With <i class="icofont-heart-alt"></i></span>
                        By the Team <a target="_blank" href="https://themeatelier.net/">ThemeAtelier</a>
                    </p>
                    <p>Get connected with</p>
                    <ul>
                        <li>
                            <a target="_blank" href="https://www.facebook.com/ThemeAtelier/"><i
                                    class="icofont-facebook"></i></a>
                        </li>
                        <li>
                            <a target="_blank" href="https://x.com/intent/follow?screen_name=themeatelier"><i
                                    class="icofont-x"></i></a>
                        </li>
                        <li>
                            <a target="_blank" href="https://profiles.wordpress.org/themeatelier/#content-plugins"><i
                                    class="icofont-brand-wordpress"></i></a>
                        </li>
                        <li>
                            <a target="_blank" href="https://www.youtube.com/@themeatelier"><i
                                    class="icofont-youtube-play"></i></a>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
<?php
    }
}
