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

<div class="tab-pane fade <?php echo esc_attr($krfsapp_active_tab_config['pricing-tab'] ? 'show active' : ''); ?>" id="pricing-tab-pane"
    role="tabpanel" aria-labelledby="pricing-tab">
    <div class="sticky-outer-section">
        <div class="main-heading-btn d-flex justify-between sticky-save">
            <div class="">
                <h2>Choose Subscription Plan</h2>
            </div>
        </div>
    </div>
    <div class="right-section">
        <div class="year-tab-section">
            <ul class=" nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="plan-btn active" id="month-tab" data-bs-toggle="tab" data-bs-target="#month-tab-pane"
                        type="button" role="tab" aria-controls="month-tab-pane" aria-selected="true">
                    Pay Monthly
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="plan-btn" id="year-tab" data-bs-toggle="tab" data-bs-target="#year-tab-pane"
                        type="button" role="tab" aria-controls="year-tab-pane" aria-selected="false">
                    Pay Yearly (save 8.33%)
                    </button>
                </li>
            </ul>
        </div>
        <?php $isPluginActivate = krfsapp_getMeta("_is_plugin_active"); ?>
        <div>
            <div class="month-section tab-pane fade show active" id="month-tab-pane" role="tabpanel"
                aria-labelledby="month-tab">
                <div class="mt-4 plan-main monthly">
                    <div class="d-flex inner-div">
                        <div class=" p-4 single-plan">
                            <h5 class="text-black">Basic Plan</h5>
                        
                            <p class="price-pln-div">
                                <lable class="plan-amt">$ 50</lable>
                                <label class="plan-interval">/month</label>
                            </p>
                            
                            <div class="price-section-width">
                                <p class="price-div">
                                    <span class="check-icon-section">
                                        <svg class="check-icon"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                            fill="rgba(118,70,215,1)">
                                            <path
                                                d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z">
                                            </path>
                                        </svg>
                                    </span>
                                    Filter By Styles
                                </p>
                                <p class="price-div">
                                    <span class="check-icon-section">
                                        <svg class="check-icon"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                            fill="rgba(118,70,215,1)">
                                            <path
                                                d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z">
                                            </path>
                                        </svg>
                                    </span>
                                    Filter By Diamond Shape
                                </p>
                                <p class="price-div">
                                    <span class="check-icon-section">
                                        <svg class="check-icon"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                            fill="rgba(118,70,215,1)">
                                            <path
                                                d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z">
                                            </path>
                                        </svg>
                                    </span>
                                    Filter By Metal Type
                                </p>
                                <p class="price-div">
                                    <span class="check-icon-section">
                                        <svg class="check-icon"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                            fill="rgba(118,70,215,1)">
                                            <path
                                                d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z">
                                            </path>
                                        </svg>
                                    </span>
                                    Email Support
                                </p>
                               
                            </div>
                            <?php  if(isset($isPluginActivate) && $isPluginActivate == 'true') { ?>
                                <button
                                class="key-btn-import activated  mt-2 krfs_active_form" disabled>Activated</button>
                            <?php } else { ?>
                                <button
                                class="key-btn-import key-btn focus:outline-none focus:shadow-outline mt-2 krfs_active_form">Activate</button>
                            <?php  } ?>
                        </div>
                        <div class="price-img">
                           <img src ="<?php echo  esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/pricing-main-img.webp" width="100%" height="100%">
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="year-tab-pane" role="tabpanel" aria-labelledby="year-tab">
                <div class="mt-4 plan-main monthly">
                    <div class="d-flex inner-div">
                        <div class=" p-4 single-plan">
                            <h5 class="text-black">Basic Plan</h5>
                       
                            <p class="price-pln-div">
                                <lable class="plan-amt">$ 550</lable>
                                <label class="plan-interval">/year</label>
                            </p>
                            <div class="price-section-width">
                                <p class="price-div">
                                    <span class="check-icon-section">
                                        <svg class="check-icon"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                            fill="rgba(118,70,215,1)">
                                            <path
                                                d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z">
                                            </path>
                                        </svg>
                                    </span>
                                    Filter By Styles
                                </p>
                                <p class="price-div">
                                    <span class="check-icon-section">
                                        <svg class="check-icon"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                            fill="rgba(118,70,215,1)">
                                            <path
                                                d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z">
                                            </path>
                                        </svg>
                                    </span>
                                    Filter By Diamond Shape
                                </p>
                                <p class="price-div">
                                    <span class="check-icon-section">
                                        <svg class="check-icon"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                            fill="rgba(118,70,215,1)">
                                            <path
                                                d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z">
                                            </path>
                                        </svg>
                                    </span>
                                    Filter By Metal Type
                                </p>
                                <p class="price-div">
                                    <span class="check-icon-section">
                                        <svg class="check-icon"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                            fill="rgba(118,70,215,1)">
                                            <path
                                                d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z">
                                            </path>
                                        </svg>
                                    </span>
                                    Email Support
                                </p>
                            </div>

                            <?php  if(isset($isPluginActivate) && $isPluginActivate == 'true') { ?>
                                <button
                                class="key-btn-import activated  mt-2 krfs_active_form" disabled>Activated</button>
                            <?php } else { ?>
                                <button
                                class="key-btn-import key-btn focus:outline-none focus:shadow-outline mt-2 krfs_active_form">Activate</button>
                            <?php  } ?>
                        </div>
                        <div class="price-img">
                           <img src ="<?php echo  esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/pricing-main-img.webp" width="100%" height="100%">
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
