<?php
if (!defined('ABSPATH'))
    exit;

global $krfsapp_active_tab_config;
global $krfsapp_is_plugin_active;
global $krfsapp_active_initial_tab_config;
global $krfsapp_active_initial_tab;
global $krfsapp_is_plugin_initial_setup;
global $krfsapp_active_lang_tab_config;

$krfsapp_is_plugin_active = krfsapp_getMeta('_is_plugin_active') == 'true';
$krfsapp_active_tab_config = json_decode(krfsapp_getMeta('_admin_tab_config'), true);

$productAttributes = wc_get_attribute_taxonomies();
$styleTerms = json_decode(krfsapp_getMeta('style_attr_advance_filters'), true);

$sideStoneTerms = json_decode(krfsapp_getMeta('side_stone_attr_advance_filters'), true);

$wedMenTerms = json_decode(krfsapp_getMeta('wed_men_attr_advance_filters'), true);

$wedWomenTerms = json_decode(krfsapp_getMeta('wed_women_attr_advance_filters'), true);

$metalTerms = json_decode(krfsapp_getMeta('metal_attr_advance_filters'), true);

$shapeTerms = json_decode(krfsapp_getMeta('shape_attr_advance_filters'), true);

if ($krfsapp_is_plugin_initial_setup) {
    krfsapp_addMeta('_is_plugin_initial_setup', 'true');
}

$krfsapp_active_initial_tab_config = array(
    'basic-tab' => true,
    'more-tab' => false,
    'premium-tab' => false,
);

$krfsapp_active_lang_tab_config = array(
    'basic-tab' => true,
    'translations-tab' => false,
);

$krfsapp_active_initial_tab = 'basic-tab';

$krfsapp_active_tab_config = array(
    'my-plan-tab' => true,
    'initial-tab' => false,
    'advance-filter-tab' => false,
    // 'pricing-tab' => false,
    'help-tab' => false,
    'lang_region' => false,
    'strings-tab' => false,
);

function krfsapp_set_initial_active_tab($tab)
{
    global $krfsapp_active_initial_tab_config;
    global $krfsapp_active_initial_tab;
    foreach ($krfsapp_active_initial_tab_config as $key => &$value) {
        $value = ($key === $tab);
        $krfsapp_active_initial_tab = $tab;
    }
}

function krfsapp_set_active_tab($tab)
{
    global $krfsapp_active_tab_config;
    foreach ($krfsapp_active_tab_config as $key => &$value) {
        $value = ($key === $tab);
    }
}

if (!$krfsapp_is_plugin_active) {
    krfsapp_set_active_tab('my-plan-tab');
}

include_once('controller.php');

$primary_color = krfsapp_getMeta('_setting_primary_color');
$accent_color = krfsapp_getMeta('_setting_accent_color');
$catg_control_setting = json_decode(krfsapp_getMeta('_setting_catg_control'), true);
$products_per_page_setting = intval(krfsapp_getMeta('_setting_products_per_page'));
$cache_enabled_setting = krfsapp_getMeta('_setting_cache_enabled') == 'true';
$addons_data = json_decode(krfsapp_getMeta('_setting_addon_data'), true);

$custom_css = "
    :root {
        --krfs-primary-color: " . esc_attr($primary_color) . ";
        --krfs-accent-color: " . esc_attr($accent_color) . ";
    }
";

// Add the inline styles to the stylesheet that was enqueued
wp_add_inline_style('krfs-custom-style', $custom_css);

$images = [
    KRFSAPP_PLUGIN_DIR . '/assets/images/engagemen t.webp',
    KRFSAPP_PLUGIN_DIR . '/assets/images/wedding.png',
    KRFSAPP_PLUGIN_DIR . '/assets/images/wedding.png',

];

$user_info = krfsapp_getMeta('_user_info');
$plugin_info = get_plugin_data(KRFSAPP_HOME_FILE);
if ($user_info) {
    $user_info = json_decode($user_info, true);
    $user_info = array_map('stripslashes', $user_info);
}

$is_plugin_active = krfsapp_getMeta('_is_plugin_active') == 'true';
?>

<?php if(!$is_plugin_active) { ?>
    <div class="krfsapp-consent-overlay d-flex align-items-center justify-content-center">
        <div class="card krfsapp-consent-card shadow-lg border-0">
            <form method="post" class="d-flex flex-column">
                <div class="card-body p-4 p-md-4">
                    <h4 class="mb-2 fw-bold" style="font-size:1.35rem;">Improve Your Experience</h4>

                    <span class="mb-2">
                        We’d like your consent to use your name and email to enhance performance, provide better usability,
                        and keep improving our free plugins.
                    </span>

                    <div class="form-check my-3" style="display: flex;align-items: baseline;">
                        <input class="form-check-input krfsapp-check" type="checkbox" value="1" id="krfsConsentCheck">
                        <label class="form-check-label ml-3" for="krfsConsentCheck" style="margin-left: 8px;">
                            I agree to share my name and email for personalization and improvements.
                        </label>
                    </div>

                    <?php wp_nonce_field('krfs_email_permission', 'krfs_email_permission_nonce'); ?>
                    <input name="krfs_activation" type="hidden" />

                    <div class="d-flex gap-3 mt-4">
                        <button type="submit" name="email_permission_action" value="accept" class="krfsapp-btn krfsapp-btn-primary krfsapp-consent-accept-btn" disabled>Agree</button>

                        <button type="submit" name="email_permission_action" value="decline" class="krfsapp-btn krfsapp-btn-outline">Not Now</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
<?php } ?>

<section class="main-div-tab d-flex">
    <!-- Nav tabs -->
    <div class="tab-btn-section krfs-btn-section">
        <div class="left-tab-heading">
            <div class="tab-image">
                <img src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/logo.svg" alt="">
                <h5 class="tab-heading">Keyideas Ring<br>Filter & Search</h5>
            </div>
            <div class="version-p">
                <p>v<?php echo esc_html($plugin_info['Version']); ?></p>
            </div>
        </div>

        <div class="krfs-sidetab-heading">
            <svg height="17" width="17" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                fill="var(--krfs-primary-color)">
                <path
                    d="M5.32943 3.27158C6.56252 2.8332 7.9923 3.10749 8.97927 4.09446C10.1002 5.21537 10.3019 6.90741 9.5843 8.23385L20.293 18.9437L18.8788 20.3579L8.16982 9.64875C6.84325 10.3669 5.15069 10.1654 4.02952 9.04421C3.04227 8.05696 2.7681 6.62665 3.20701 5.39332L5.44373 7.63C6.02952 8.21578 6.97927 8.21578 7.56505 7.63C8.15084 7.04421 8.15084 6.09446 7.56505 5.50868L5.32943 3.27158ZM15.6968 5.15512L18.8788 3.38736L20.293 4.80157L18.5252 7.98355L16.7574 8.3371L14.6361 10.4584L13.2219 9.04421L15.3432 6.92289L15.6968 5.15512ZM8.97927 13.2868L10.3935 14.7011L5.09018 20.0044C4.69966 20.3949 4.06649 20.3949 3.67597 20.0044C3.31334 19.6417 3.28744 19.0699 3.59826 18.6774L3.67597 18.5902L8.97927 13.2868Z">
                </path>
            </svg>
            <div class="body-overlay-bg"></div>
            <h5 class="krfs-manage">MANAGE</h5>
            <div class="manage-popup-main">
                <div class="manage-heading">
                    <div>To setup follow:</div>
                    <svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"
                        class="close-popup" style="cursor:pointer;">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M1.36685 1.76791C1.9711 1.16367 2.95078 1.16367 3.55502 1.76791L17.9045 16.1174C18.5088 16.7216 18.5088 17.7013 17.9045 18.3056C17.3003 18.9098 16.3206 18.9098 15.7163 18.3056L1.36685 3.95608C0.762606 3.35184 0.762606 2.37216 1.36685 1.76791Z"
                            fill="black" />
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M1.36752 18.3089C0.763276 17.7047 0.763276 16.725 1.36752 16.1208L15.717 1.77127C16.3213 1.16702 17.3009 1.16703 17.9052 1.77127C18.5094 2.37552 18.5094 3.35519 17.9052 3.95944L3.55569 18.3089C2.95145 18.9132 1.97177 18.9132 1.36752 18.3089Z"
                            fill="black" />
                    </svg>
                </div>
                <div>
                    <div class="manage-popup-triangle-container"></div>
                    <div class="manage-popup-triangle"></div>
                    <div class="krfs-setup-popup">
                        <div class="krfs-setup-number">1</div>
                        <div class="krfs-popup-text">
                            <span class="krfs-popup-head">Plan:</span>
                            <span class="krfs-popup">Review and activate</span>
                        </div>
                        <div class="krfs-popup-line"></div>
                    </div>

                    <div class="krfs-setup-popup">
                        <div class="krfs-setup-number">2</div>
                        <div class="krfs-popup-text">
                            <span class="krfs-popup-head">Settings:</span>
                            <span class="krfs-popup">Customize options</span>
                        </div>
                        <div class="krfs-popup-line"></div>
                    </div>

                    <div class="krfs-setup-popup">
                        <div style="width: 65px;" class="krfs-setup-number">3</div>
                        <div class="krfs-popup-text">
                            <span class="krfs-popup-head">Language &amp; Region:</span>
                            <span class="krfs-popup">Manage translations, and ring sizes</span>
                        </div>
                        <div class="krfs-popup-line"></div>
                    </div>

                    <div class="krfs-setup-popup">
                        <div style="width: 51px;" class="krfs-setup-number">4</div>
                        <div class="krfs-popup-text">
                            <span class="krfs-popup-head">Advanced Filters:</span>
                            <span class="krfs-popup">Manage your collections</span>
                        </div>
                        <div style="height: calc(100% - 80px);" class="krfs-popup-line"></div>
                    </div>
                </div>
            </div>
        </div>


        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <!-- My Plan Tab Start Here -->
            <li class="nav-item" role="presentation">
                <button class="<?php echo esc_attr($krfsapp_active_tab_config['my-plan-tab'] ? 'active' : ''); ?>" id="my-plan-tab"
                    data-bs-toggle="tab" data-bs-target="#my-plan-pane" type="button" role="tab"
                    aria-controls="my-plan-pane" aria-selected="false">
                    1. My Plan</button>
            </li>
            <!-- Setting Tab Start Here -->
            <?php if ($is_plugin_active) { ?>
                <li class="nav-item" role="presentation">
                    <button class="<?php echo esc_attr($krfsapp_active_tab_config['initial-tab'] ? 'active' : ''); ?>" id="initial-tab"
                        data-bs-toggle="tab" data-bs-target="#initial-tab-pane" type="button" role="tab"
                        aria-controls="initial-tab-pane" aria-selected="true">
                        2. Settings
                    </button>

                </li>
                <li class="nav-item" role="presentation">
                    <button class="<?php echo esc_attr($krfsapp_active_tab_config['lang_region'] ? 'active' : ''); ?>"
                        id="lang_region-tab" data-bs-toggle="tab" data-bs-target="#lang_region-tab-pane" type="button"
                        role="tab" aria-controls="lang_region-tab-pane" aria-selected="false">
                        3. Languages & Region</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="<?php echo esc_attr($krfsapp_active_tab_config['advance-filter-tab'] ? 'active' : ''); ?>"
                        id="advance-filter-tab" data-bs-toggle="tab" data-bs-target="#advance-filter-tab-pane" type="button"
                        role="tab" aria-controls="advance-filter-tab-pane" aria-selected="false">
                        4. Advanced Filters</button>
                </li>
            <?php } ?>

            <div class="krfs-line"></div>

            <div class="krfs-sidetab-heading">
                <svg height="17" width="17" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                    fill="var(--krfs-primary-color)">
                    <path
                        d="M21 8C22.1046 8 23 8.89543 23 10V14C23 15.1046 22.1046 16 21 16H19.9381C19.446 19.9463 16.0796 23 12 23V21C15.3137 21 18 18.3137 18 15V9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9V16H3C1.89543 16 1 15.1046 1 14V10C1 8.89543 1.89543 8 3 8H4.06189C4.55399 4.05369 7.92038 1 12 1C16.0796 1 19.446 4.05369 19.9381 8H21ZM7.75944 15.7849L8.81958 14.0887C9.74161 14.6662 10.8318 15 12 15C13.1682 15 14.2584 14.6662 15.1804 14.0887L16.2406 15.7849C15.0112 16.5549 13.5576 17 12 17C10.4424 17 8.98882 16.5549 7.75944 15.7849Z">
                    </path>
                </svg>
                <h5 class="help-support">HELP & SUPPORT</h5>
            </div>

            <li class="krfs-help-support-tab nav-item" role="presentation">
                <button id="tutorials-tab-parent" data-target-id="tutorials-tab" data-bs-toggle="tab"
                    data-bs-target="#help-tab-pane" type="button" role="tab" aria-controls="help-tab-pane"
                    aria-selected="false">
                    Video Tutorials
                </button>
            </li>

            <li class="krfs-help-support-tab nav-item" role="presentation">
                <button id="faq-tab-parent" data-target-id="faq-tab" data-bs-toggle="tab"
                    data-bs-target="#help-tab-pane" type="button" role="tab" aria-controls="help-tab-pane"
                    aria-selected="false">
                    FAQs
                </button>
            </li>

            <li class="krfs-help-support-tab nav-item" role="presentation">
                <button id="support-tab-parent" data-target-id="support-tab" data-bs-toggle="tab"
                    data-bs-target="#help-tab-pane" type="button" role="tab" aria-controls="help-tab-pane"
                    aria-selected="false">
                    Contact Us
                </button>
            </li>
        </ul>
    </div>

    <div class="tab-content-section">
        <?php if ($is_plugin_active) { ?>
            <div class="initial-section tab-pane fade <?php echo esc_attr($krfsapp_active_tab_config['initial-tab'] ? 'show active' : ''); ?>"
                id="initial-tab-pane" role="tabpanel" aria-labelledby="initial-tab">
                <form action="" method="post" id="settings_form">
                    <div class="sticky-outer-section">
                        <div class="main-heading-btn d-flex justify-between sticky-save">
                            <div class="">
                                <h2>Settings</h2>
                            </div>
                            <button class="save-btn settings_action_btn" type="submit" data-val="settings">
                                Save
                            </button>
                        </div>
                    </div>
                    <div class="step right-section confirm-settings">
                        <div class="year-tab-section initial-basic-tab mb-4">
                            <ul class=" nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="plan-btn active" id="basic-tab" data-bs-toggle="tab"
                                        data-bs-target="#basic-tab-pane" type="button" role="tab"
                                        aria-controls="basic-tab-pane" aria-selected="true">
                                        BASIC*
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="plan-btn" id="map-tab" data-bs-toggle="tab"
                                        data-bs-target="#map-tab-pane" type="button" role="tab"
                                        aria-controls="map-tab-pane" aria-selected="true">
                                        Map
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="plan-btn" id="premium-tab" data-bs-toggle="tab"
                                        data-bs-target="#premium-tab-pane" type="button" role="tab"
                                        aria-controls="premium-tab-pane" aria-selected="false">
                                        PREMIUM
                                    </button>
                                </li>
                            </ul>
                        </div>

                        <!-- Basic tab pane -->
                        <div class="month-section tab-pane fade show active" id="basic-tab-pane" role="tabpanel"
                            aria-labelledby="basic-tab">
                            <div class="d-md-flex">
                                <div class="krfs-basic-wrapper">
                                    <!-- Choose the Rings You Offer Section Start Here -->
                                    <div class="step">
                                        <h5>A. Choose the Rings You Offer</h5>
                                        <div class="step-2 stap-grid-section">
                                            <?php
                                            $page_ids = json_decode(krfsapp_getMeta("_page_ids"), true);
                                            $count = 0;
                                            $total_count = count(KRFSAPP_ALL_CATEGORIES); // Get the total number of categories
                                            foreach (KRFSAPP_ALL_CATEGORIES as $index => $catg) {
                                                $count++;
                                                // Check if it's the last item and change $count to 2
                                                if ($count == $total_count) {
                                                    $count_display = 2;
                                                } else {
                                                    $count_display = $count;
                                                }

                                                // Check if it's the first or last item to display
                                                $display_style = ($count == 1 || $count == $total_count) ? 'block' : 'none';
                                                ?>
                                                <div class="item" style="display: <?php echo esc_attr($display_style); ?>;">
                                                    <div class="input-section">
                                                        <div class="enabled-div">
                                                            <input class="krfs_catg_switch" type="checkbox"
                                                                name="<?php echo esc_attr($catg); ?>" <?php echo esc_attr($catg_control_setting[$catg] ? 'checked' : ''); ?>
                                                                onchange="toggleIcon(this)">
                                                            <p><?php echo esc_html($count_display) . '. ' . esc_html($catg); ?></p>
                                                        </div>

                                                        <div style="display: <?php echo esc_attr($catg_control_setting[$catg] ? "flex" : "none"); ?>"
                                                            id="krfs-catg-<?php echo esc_attr(str_replace(" ", "", strtolower($catg))); ?>">
                                                            <a href="<?php echo esc_url(krfsapp_getPageUrlById($page_ids[KRFSAPP_ALL_CATEGORIES_MAP[$catg]])); ?>"
                                                                target="_blank">
                                                                <img alt="eye" loading="lazy" width="25" height="25"
                                                                    class="img-icon eye"
                                                                    src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/my-store-icon.png">
                                                            </a>
                                                        </div>

                                                    </div>
                                                    <!-- <p class="">Feel free to delete them or <span data-bs-target="#re-import-popup" data-bs-toggle="modal" class="re-import-btn text-underline">re-import</span> as needed.</p> -->
                                                    <div class="re-import-popup modal fade" id="re-import-popup" aria-hidden="true"
                                                        aria-labelledby="re-import-popupLabel" tabindex="-1">
                                                        <div class="modal-dialog modal-dialog-centered">
                                                            <div class="modal-content">
                                                                <div>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                        aria-label="Close"></button>
                                                                </div>
                                                                <div>
                                                                    <h5>
                                                                        Are you sure you want to import?
                                                                    </h5>
                                                                    <button class="re-import-btn">Import</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <?php } ?>
                                            <!-- <p class="mt-2">We've included sample products for you to review.</p> -->
                                        </div>
                                    </div>


                                    <!-- Manage Theme Section Starts Here -->
                                    <h5>B. Manage Theme</h5>
                                    <div class="step-color-div">
                                        <div class="color-inner">
                                            <input class="color-box" type="color" name="primary_color" id="primary_color"
                                                value="<?php echo esc_attr($primary_color); ?>">
                                            <label for="primary_color">
                                                Primary Color
                                            </label>
                                        </div>
                                        <div class="color-inner">
                                            <input class="color-box" type="color" name="accent_color" id="accent_color"
                                                value="<?php echo esc_attr($accent_color); ?>">
                                            <label for="accent_color">
                                                Accent Color
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Image Slider Section Start Here -->
                                <div class="image-slider-wrapper">
                                    <div class="image-slider-header">
                                        <div class="slider-para">
                                            <p>Preview</p>
                                        </div>
                                        <div class="krfs-arrow-container">
                                            <div class="prev-arrow krfs-nav-arrow" data-target="basic-section"
                                                data-action="prev">
                                                <img src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/previous.svg"
                                                    alt="">
                                            </div>
                                            <div class="next-arrow krfs-nav-arrow" data-target="basic-section"
                                                data-action="next">
                                                <img src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/next.svg"
                                                    alt="">
                                            </div>
                                        </div>
                                    </div>

                                    <span href="javascript:void(0);" class="preview-more-info" onclick="event.preventDefault();"
                                        data-toggle="tooltip" data-placement="top" data-title="<?php echo ("Zoom-In"); ?>">
                                        <!-- Slider Image -->
                                        <div class="krfs_img_slides" data-id="basic-section" data-active-index="0">
                                            <img data-target="setting-tab-image" onclick="krfsOpenImageSidebar('setting')"
                                                src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/advance_tab_slider/settings_preview_basic_1.png"
                                                alt="">
                                            <img data-target="setting-tab-image" onclick="krfsOpenImageSidebar('setting')"
                                                src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/advance_tab_slider/settings_preview_basic_2.png"
                                                alt="">
                                            <img data-target="setting-tab-image" onclick="krfsOpenImageSidebar('setting')"
                                                src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/advance_tab_slider/settings_preview_premium.png"
                                                alt="">
                                        </div>


                                        <!-- Image Preview Sidebar -->
                                        <div id="krfs-setting-images" class="sidenav setting-slider">
                                            <div class="krfs-close-slider">
                                                <div class="cross-container">
                                                    <img onclick="krfscloseImageSidebar('setting')"
                                                        src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/cross-btn.svg"
                                                        alt="">
                                                </div>
                                            </div>
                                            <div id="krfs-setting-images-preview"></div>
                                        </div>
                                        <div id="krfs-setting-preview-image" class="krfs-preview-image" data-sidebar="setting">
                                        </div>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- Map tab pane -->
                        <?php require_once('partials/tab_mapping.php'); ?>

                        <!-- Premium tab pane -->
                        <div class="month-section tab-pane fade" id="premium-tab-pane" role="tabpanel"
                            aria-labelledby="premium-tab">
                            <div class="d-md-flex">
                                <div class="krfs-basic-wrapper">
                                    <p>Show/Hide options. </p>
                                    <p>These custom features/add-ons will cost extra. </p>
                                    <div class="">
                                        <div class="more-setting-input-section">
                                            <div class="inner-section">
                                                <h5 class="d-flex align-items-center">A. Add Engraving</h5>
                                            </div>
                                        </div>
                                        <div class="krfs-contact-btn">
                                            <button class="krfs_contact_sales_btn" onclick="event.preventDefault();krfs_contact_sales();">Contact Sales</button>
                                        </div>
                                    </div>

                                    <div>
                                        <div class="more-setting-input-section">
                                            <div class="inner-section">
                                                <h5 class="d-flex align-items-center">B. Ring Size</h5>
                                            </div>
                                        </div>
                                        <div class="krfs-contact-btn">
                                            <button class="krfs_contact_sales_btn" onclick="event.preventDefault();krfs_contact_sales();">Contact Sales</button>
                                        </div>
                                    </div>
                                </div>
                                <!-- Image Slider Section Start Here -->
                                <div class="image-slider-wrapper">
                                    <div class="image-slider-header">
                                        <div class="slider-para">
                                            <p>Preview</p>
                                        </div>
                                        <div class="krfs-arrow-container">
                                            <div class="prev-arrow krfs-nav-arrow" data-target="basic-section-premium"
                                                data-action="prev">
                                                <img src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/previous.svg"
                                                    alt="">
                                            </div>
                                            <div class="next-arrow krfs-nav-arrow" data-target="basic-section-premium"
                                                data-action="next">
                                                <img src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/next.svg"
                                                    alt="">
                                            </div>
                                        </div>
                                    </div>

                                    <span href="javascript:void(0);" class="preview-more-info" onclick="event.preventDefault();"
                                        data-toggle="tooltip" data-placement="top" data-title="<?php echo ("Zoom-In"); ?>">
                                        <!-- Slider Image -->
                                        <div class="krfs_img_slides" data-id="basic-section-premium" data-active-index="0">
                                            <img data-target="premium-tab-image" onclick="krfsOpenImageSidebar('premium')"src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/setting_tab/advance_tab_slider/premium.png"alt="">
                                        </div>


                                        <!-- Image Preview Sidebar -->
                                        <div id="krfs-premium-images" class="sidenav setting-slider">
                                            <div class="krfs-close-slider">
                                                <div class="cross-container">
                                                    <img onclick="krfscloseImageSidebar('premium')" src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR); ?>/assets/images/cross-btn.svg" alt="">
                                                </div>
                                            </div>
                                            <div id="krfs-premium-images-preview"></div>
                                        </div>
                                        <div id="krfs-premium-preview-image" class="krfs-preview-image" data-sidebar="premium">
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input type="number" name="products_per_page"
                        value="<?php echo esc_attr($products_per_page_setting); ?>" hidden>
                    <input type="hidden" name="settings_action" value="" id="settings_action">
                    <?php wp_nonce_field('settings_action', 'csrf_settings_nonce'); ?>
                </form>
            </div>
            <?php require_once('partials/tab_language.php'); ?>
        <?php } ?>
        <?php require_once('partials/my-plan.php'); ?>
        <?php if ($is_plugin_active) { ?>
            <?php require_once('partials/advance_filters.php'); ?>
            <?php require_once('partials/tab_pricing.php'); ?>
            <?php require_once('partials/tab_help.php'); ?>
        <?php } ?>
    </div>
</section>

<?php
if (!empty($toast_msg)) {
    ?>
    <div class="alert-section" <?php echo esc_attr($error ? 'style=background-color:red' : ''); ?>>
        <div class="alert <?php echo esc_attr($error ? 'danger' : 'success'); ?>">
            <span class="close-btn" onclick="$('.alert-section').addClass('d-none');">×</span>
            <?php echo esc_html($toast_msg); ?>
        </div>
    </div>
    <?php
}
?>
