<?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly 
global $kirb_hide_support_form;
?>
<div class="tab-pane fade <?php echo esc_attr( $kirb_active_tab_config['help-tab']['active'] ? 'show active' : '' ); ?>" id="help-tab-pane" role="tabpanel" aria-labelledby="help-tab">
    <div class="sticky-outer-section">
        <div class="main-heading-btn d-flex justify-between sticky-save">
            <div class="kirb-tabs-header">
                <h2>Help & Support</h2>
            </div>
        </div>
    </div>
    <div class="right-section">
        <div class="year-tab-section help-support-section mb-4">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="plan-btn kirb_help_tab <?php echo esc_attr( $kirb_active_tab_config['help-tab']['active'] ? '' : 'active' ); ?>" id="tutorials-tab" data-bs-toggle="tab"
                        data-bs-target="#tutorials-tab-pane" type="button" role="tab" aria-controls="tutorials-tab-pane"
                        aria-selected="true">
                        TUTORIALS
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="plan-btn kirb_help_tab" id="faq-tab" data-bs-toggle="tab" data-bs-target="#faq-tab-pane"
                        type="button" role="tab" aria-controls="faq-tab-pane" aria-selected="false">
                        FAQs
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="plan-btn kirb_help_tab <?php echo esc_attr( $kirb_active_tab_config['help-tab']['active'] ? 'active' : '' ); ?>" id="support-tab" data-bs-toggle="tab" data-bs-target="#support-tab-pane"
                        type="button" role="tab" aria-controls="support-tab-pane" aria-selected="false">
                        CONTACT SUPPORT
                    </button>
                </li>
            </ul>
        </div>
        <div>
            <div class="faq-section tab-pane fade" id="faq-tab-pane" role="tabpanel"
                aria-labelledby="month-tab">
                <div class="accordion" id="accordion_pricing">
                    <div class="">
                        <h4 id="headingThree" class=" collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#pricing" aria-expanded="false" aria-controls="pricing">
                            Plans and Pricing
                            <span class="faq-arrow-icon toggle-btn head-65d44a7b81ddd87e3043305d"><svg
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                    <path
                                        d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z">
                                    </path>
                                </svg>
                        </h4>
                        <div id="pricing" class="accordion-collapse collapse" aria-labelledby="headingThree"
                            data-bs-parent="#accordion_pricing">
                            <div class="faq-body active">
                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        How does the pro version of the plugin differ from the free version?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">
                                        Our pro version provides full access to over 100,000 diamonds and gemstones, which you can integrate into your website to start <b>selling immediately</b>.<br><br>
                                        In the Free version, you can explore all features except the Feed Center. The Feed Center manages feeds, own stock stones, stone filters, margins, and shipping days. Since it may require some training, our team will handle Feed Center tasks for you when you are on free plan. Our support team is also available to help with any adjustments, such as setting up filters or margins.
                                    </p>
                                </div>
                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        What payment options are available?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">You can choose between monthly and annual payment options, with a $250 savings on the annual plan. We won’t charge any fees for assisting with your website setup when you choose free plan.
                                    </p>
                                </div>

                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        Can I get a refund after making a payment or canceling my subscription?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">No, we do not provide refunds once a payment is made or the subscription is active, as this process involves setting up servers, configuring your account, diamond feeds, and licensing. We recommend using the free version fully to ensure the plugin meets your requirements
                                    </p>
                                </div>

                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        What if I want custom features?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">The plugin includes extensive options for managing the feed and customizing the look of diamond and gemstone pages. For additional customizations or new features, please reach out to our support or sales team through the app.
                                    </p>
                                </div>

                                <!-- Add more FAQ items as needed -->
                            </div>
                        </div>
                    </div>
        
                    <div class="">
                        <h4 id="headingOne" class=" collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#general" aria-expanded="true" aria-controls="general">
                            Diamonds and Gemstones
                            <span class="faq-arrow-icon toggle-btn head-65d44a7b81ddd87e3043305d"><svg
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                    <path
                                        d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z">
                                    </path>
                                </svg>
                            </span>
                        </h4>
                        <div id="general" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                            data-bs-parent="#accordion_pricing">
                            <div class="faq-body active">
                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        Could you provide more details about the Diamonds and Gemstones available in the plugin?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">
                                        Currently, we import diamonds from Nivoda and are working on adding feeds from additional suppliers worldwide. This will expand your inventory with a broader selection and competitive pricing. You can also import your own stock diamonds or gemstones by following instructions in the Feed Center. The CSV formats available for download are: <a target="_blank" href="https://engagement-ring-builder-o4hk8.kinsta.app/app/sample-natural.csv" download>natural.csv</a>, <a target="_blank" href="https://engagement-ring-builder-o4hk8.kinsta.app/app/sample-labgrown.csv" download>lab.csv</a>, <a target="_blank" href="https://engagement-ring-builder-o4hk8.kinsta.app/app/sample-coloreddiamonds.csv" download>colored.csv</a>, and <a target="_blank" href="https://engagement-ring-builder-o4hk8.kinsta.app/app/sample-gemstones.csv" download>gemstones.csv</a>.
                                    </p>
                                </div>
                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        What margins, filters, and shipping timelines are set in Free version of plugin, given that Feed Center access is limited?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">A 40% margin is applied to natural diamonds, and a 100% margin is applied to lab-created diamonds, and a 80% markup is applied to gemstones, and colored diamonds. Shipping is set to 10 days.</p>
                                </div>

                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        Can I set tiered margins for the stones?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">Yes, our Feed Center allows tiered margins based on either the stone's carat weight or price, giving you flexibility in setting your pricing strategy.</p>
                                </div>

                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        How can I order a Nivoda diamond?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">To order a diamond from Nivoda, you’ll need a Nivoda account. Locate the SKU or stock number for the desired stone, then contact Nivoda by phone or email to place your order.</p>
                                </div>

                                <!-- Add more FAQ items as needed -->
                            </div>
                        </div>

                    </div>

                    <div class="">
                        <h4 id="headingTwo" class=" collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#setup" aria-expanded="false" aria-controls="setup">
                            Engagement Rings
                            <span class="faq-arrow-icon toggle-btn head-65d44a7b81ddd87e3043305d"><svg
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                    <path
                                        d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z">
                                    </path>
                                </svg>
                            </span>
                        </h4>
                        <div id="setup" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                            data-bs-parent="#accordion_pricing">
                            <div class="faq-body active">
                            <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        Do you offer engagement ring settings?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">We offer a few sample rings to demonstrate how the build-your-own-ring (BYOR) feature works. These samples also help guide you in categorizing and tagging your rings to ensure compatibility with our ring builder.<br><br>
                                    You can replace the sample rings with your own engagement rings at any time. Your rings remain entirely yours—we don’t modify or alter them. The Ring Builder is designed to integrate smoothly with your existing collection.
                                    </p>
                                </div>
                                
                                <!-- Add more FAQ items as needed -->
                            </div>
                        </div>
                    </div>
                    <div class="">
                        <h4 id="headingThree" class=" collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#ring-builder" aria-expanded="false" aria-controls="ring-builder">
                            Ring Builder
                            <span class="faq-arrow-icon toggle-btn head-65d44a7b81ddd87e3043305d"><svg
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                    <path
                                        d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z">
                                    </path>
                                </svg>
                        </h4>
                        <div id="ring-builder" class="accordion-collapse collapse" aria-labelledby="headingThree"
                            data-bs-parent="#accordion_pricing">
                            <div class="faq-body active">
                            <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        How can I benefit from the Ring Builder?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">Online retailers offering customization options, like ring builders, have seen conversion rates increase by 2-3 times compared to those without customization features.<br><br>
                                    Additionally, customization options can boost the Average Order Value (AOV) by up to 30%, as customers are often willing to pay more for a personalized product, such as a custom diamond ring.
                                    </p>
                                </div>

                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        How can I customize the Ring Builder?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">Here are some steps you can take:<br><br>
                                    <b>Menu:</b>&nbsp;Add links like "Start with a Setting," "Start with a Natural Diamond," "Start with a Lab Diamond," “Start with a Colored Diamond” or "Start with a Gemstone" for easy navigation.<br><br>
                                    <b>Ring Size:</b>&nbsp;Ring size options are available under Language and Region settings. Select the one that suits your region.<br><br>
                                    <b>Add to Cart:</b>&nbsp;You have the option to show or hide the "Add to Cart" button on the Engagement Ring page, encouraging customers to build a complete ring.<br><br>
                                    Customers can preview the diamond and engagement ring setting before making a purchase, allowing them to visualize the ring and make any adjustments as needed.
                                    </p>
                                </div>

                                <!-- Add more FAQ items as needed -->
                            </div>
                        </div>
                    </div>


                    <div class="">
                        <h4 id="headingTwo" class=" collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#theme-compatibility" aria-expanded="false" aria-controls="theme-compatibility">
                            Theme Compatibility
                            <span class="faq-arrow-icon toggle-btn head-65d44a7b81ddd87e3043305d"><svg
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                    <path
                                        d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z">
                                    </path>
                                </svg>
                            </span>
                        </h4>
                        <div id="theme-compatibility" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                            data-bs-parent="#accordion_pricing">
                            <div class="faq-body active">
                            <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        Can I customize the appearance of the Diamond Filter Ring Builder plugin to match my website's branding?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">Yes, you can customize the appearance by selecting a color theme that aligns with your website’s branding. This option is available in the Settings tab.
                                    </p>
                                </div>
                                <!-- Add more FAQ items as needed -->
                            </div>
                        </div>
                    </div>

                    <div class="">
                        <h4 id="headingTwo" class=" collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#lang-region" aria-expanded="false" aria-controls="lang-region">
                            Language & Region
                            <span class="faq-arrow-icon toggle-btn head-65d44a7b81ddd87e3043305d"><svg
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                    <path
                                        d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z">
                                    </path>
                                </svg>
                            </span>
                        </h4>
                        <div id="lang-region" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                            data-bs-parent="#accordion_pricing">
                            <div class="faq-body active">
                            <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        How do I select the Ring Size option based on my region?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">To select the ring size according to your website's region, navigate to the Language & Region tab. Choose your language, and the ring size option will become available. Then, select your preferred size (e.g., R1 for the US, Mexico, and Canada; R2, R3 for other countries) and save your changes. There is also an option to hide the ring size feature on the review page if needed.</p>
                                </div>

                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        Can I modify the text or wording on the pages managed by your plugin?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">Absolutely! We offer multilingual support as well. Simply go to the Language & Region tab and select your preferred website language. Then, navigate to the Translations tab, where you can choose the page you want to translate from the dropdown menu. Enter the translated text in the designated input field and save your changes. For example, on a diamond detail page, you can customize the text for cut, color, and clarity.</p>
                                </div>

                                <!-- Add more FAQ items as needed -->
                            </div>
                        </div>
                    </div>

                    <div class="">
                        <h4 id="headingTwo" class=" collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#jewelry-info" aria-expanded="false" aria-controls="jewelry-info">
                            Additional Jewelry-Related Plugins
                            <span class="faq-arrow-icon toggle-btn head-65d44a7b81ddd87e3043305d"><svg
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                    <path
                                        d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z">
                                    </path>
                                </svg>
                            </span>
                        </h4>
                        <div id="jewelry-info" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                            data-bs-parent="#accordion_pricing">
                            <div class="faq-body active">
                            <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        What is the Keyideas Ring Filter and Search plugin?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">Increase your conversion rate with Keyideas' Advanced Ring Filter and Search app, crafted for jewelers. Enable users to easily find engagement rings and wedding bands with advanced filters that deliver a smooth, intuitive experience. No coding is needed—our product filter and search widget seamlessly integrates with your theme. Benefit from responsive support and ongoing updates for a worry-free experience.<br><br>
                                    Features include:<br><br>
                                    <b>a. Custom Product Filter:</b>&nbsp;Filter by Metal Type, Collections, Diamond Shapes, Bridal Sets, Home Preview and Price<br>
                                    <b>b. Advanced Sorting Options:</b>&nbsp;Optimized to increase sales
                                    </p>
                                </div>

                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        What is the Keyideas Vizora ‑ 3D Try‑On plugin?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">With our virtual try-on technology, customers can enjoy the luxury of trying on stunning jewelry rings  from the comfort of home.
                                    </p>
                                </div>

                                <!-- Add more FAQ items as needed -->
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="tab-pane fade <?php echo esc_attr( $kirb_active_tab_config['help-tab']['active'] ? 'show active' : '' ); ?>" id="support-tab-pane" role="tabpanel" aria-labelledby="support-tab">
                <div class=" form-section-div ">
                    <form action="" method="post" id="kirb_contact_help_form" style="<?php echo esc_attr( $kirb_hide_support_form ? 'display:none;' : '' ); ?>">
                        <input type="hidden" name="settings_action" value="" id="help_action">
                        <div>
                            <?php if(!$user_info) { ?>
                                <div class="d-flex grid-setion">
                                    <div class="input--div">
                                        <div><label>Email</label></div>
                                        <div><input id="email" type="email" value="" name="email" required><span></span>
                                        </div>
                                    </div>
                                    <div class="input--div">
                                        <div><label>Phone Number</label></div>
                                        <div><input id="phone" type="number" value="" name="phone" required><span></span>
                                        </div>
                                    </div>
                                </div>
                            <?php } ?>
                            <?php if($user_info) { ?>
                            <div class="contact-tab-email">
                                <p class="email-contact-div">
                                    We will reach you at: 
                                    <span><?php echo esc_html( $user_info['email'] ); ?></span> 
                                    <?php if ( isset( $user_info['phone'] ) && ! empty( $user_info['phone'] ) ) { ?>
                                        or <span><?php echo esc_html( $user_info['phone'] ); ?></span>
                                    <?php } ?>
                                    .
                                </p>
                                <p class="contact-info-slider-btn kirb-admin-edit-contact-info-btn">Edit your contact info</p>
                            </div>
                            <input id="phone" type="hidden" value="<?php echo esc_attr( $user_info['phone'] ); ?>" name="phone">
                            <input id="email" type="hidden" value="<?php echo esc_attr( $user_info['email'] ); ?>" name="email" required>
                            <?php } ?>
                            <div>
                                <div class="input--div">
                                    <div><label>Message</label></div>
                                    <div><textarea name="message" id="message" required></textarea><span></span></div>
                                </div>
                            </div>
                            <div class="send-btn-section">
                                <button class="send-button help_action_btn" type="submit" data-val="sendMail"
                                    id="send-buttons" disabled>
                                    <div id="send-btn" class="flex">
                                        <div class="send-span"><?php echo esc_html("Send") ?></div>
                                    </div>
                                </button>
                            </div>
                        </div>
                        <?php wp_nonce_field('settings_action', 'csrf_settings_nonce'); ?>
                    </form>
                
                    <p class="kirb-help-form-submit-msg" style="<?php echo esc_attr( !$kirb_hide_support_form ? 'display:none;' : '' ); ?>">Message sent successfully. We will contact you soon.</p>
                   
                </div>
            </div>
            <?php 
                $tutorial_video = array(
                    '9oTBZJhd6Gk' => 'How to Configure Markup and Change Currency in Ring Builder', 
                    'tr35sDmgQaU' => 'How to Upload my own diamonds',
                    'hz6fOYhw5go' => 'How to Set Up the Filters on Ring Builder App | Keyideas Infotech Private Limited',
                    'D11xmjMtPr4' => 'How to change shipping days',
                    '23AF5t6bKH0' => 'How to see Uploaded Diamonds on Keyideas RingBuilder',
                    'JVbWmMW42Fo' => 'How to Build Your Own Engagement Ring Online with Keyideas RingBuilder'
                );
            ?>
            <div class="tab-pane fade <?php echo esc_attr( $kirb_active_tab_config['help-tab']['active'] ? '' : 'show active' ); ?>" id="tutorials-tab-pane" role="tabpanel-" aria-labelledby="tutorials-tab">
                <div class="tutorial-section grid grid-cols-3 ">
                        <div class="kirb-video-tutorial">
                            <button class="kirb-tutorial-btn" ><a href="https://www.youtube.com/@JewelryWebsiteApps" target="_blank"><img alt="youtube-icon" src="<?php echo esc_html(KIRB_PLUGIN_DIR) ?>/assets/images/help_and_support/youtube-icon.svg"></a>
                            </button>
                        </div>
                     
                    <?php $i=0; foreach($tutorial_video as $video => $title) { ?>
                    <div class="box">
                        <div data-bs-toggle="modal" href="#tutorial-<?php echo esc_attr($i);?>" role="button">
                            <img alt="<?php echo esc_attr( $title ); ?>" fetchpriority="high" width="100" height="100"
                                decoding="async" class="thumbnail"
                                src="https://img.youtube.com/vi/<?php echo esc_attr( $video ); ?>/0.jpg" style="clip-path:inset(1px);">
                        </div>
                    </div>
                    <?php $i++; } ?>
                </div>
            </div>
        </div>

    </div>
</div>
<?php $i=0; foreach($tutorial_video as $video => $title) { ?>
<div class="tutorial-popup modal fade" id="tutorial-<?php echo esc_attr($i)?>" aria-hidden="true"
    tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="kirb-modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalToggleLabel"><?php echo esc_html( $title ); ?></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/<?php echo esc_attr( $video ); ?>" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>
<?php $i++; } ?>
