<?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly 
global $krfs_hide_support_form;
?>
<div class="tab-pane fade <?php echo esc_attr($krfsapp_active_tab_config['help-tab']?'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="krfs-help-support-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" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                    <button class="plan-btn krfs_help_tab 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 krfs_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 krfs_help_tab" 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="accordionExample">
                    <div class="">
                        <h4 id="headingOne" class=" collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#general" aria-expanded="true" aria-controls="general">
                            General Information
                            <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="#accordionExample">
                            <div class="faq-body active">
                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        Can you provide further instructions on how to manually install the app?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">Certainly, customers
                                        can preview the diamond and engagement ring setting before finalizing
                                        their purchase. This functionality enables them to visualize the ring
                                        and make any desired alterations.</p>
                                </div>
                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        Can I track customer engagement and interactions with the Diamond Filter
                                        Ring Builder App?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">This feature is
                                        currently in development. Following its launch, the app will offer
                                        analytics and reporting features to track customer engagement,
                                        preferences, and interactions with the ring builder tool, aiding in
                                        optimizing product offerings and marketing strategies.</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">
                            Setup
                            <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="#accordionExample">
                            <div class="faq-body active">
                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        Can customers review their ring before adding it to the cart?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">Certainly, customers
                                        can preview the diamond and engagement ring setting before finalizing
                                        their purchase. This functionality enables them to visualize the ring
                                        and make any desired alterations.</p>
                                </div>
                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        Can I track customer engagement and interactions with the Diamond Filter
                                        Ring Builder App?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">This feature is
                                        currently in development. Following its launch, the app will offer
                                        analytics and reporting features to track customer engagement,
                                        preferences, and interactions with the ring builder tool, aiding in
                                        optimizing product offerings and marketing strategies.</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="#pricing" aria-expanded="false" aria-controls="pricing">
                            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="#accordionExample">
                            <div class="faq-body active">
                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        Can customers review their ring before adding it to the cart?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">Certainly, customers
                                        can preview the diamond and engagement ring setting before finalizing
                                        their purchase. This functionality enables them to visualize the ring
                                        and make any desired alterations.</p>
                                </div>
                                <div class="faq-div">
                                    <p class="head-pera-faq hover:text-darkViolet text-base cursor-pointer accordion">
                                        Can I track customer engagement and interactions with the Diamond Filter
                                        Ring Builder App?
                                        <span class="sign">+</span>
                                    </p>
                                    <p class="panel ml-3 text-base" style="display: none;">This feature is
                                        currently in development. Following its launch, the app will offer
                                        analytics and reporting features to track customer engagement,
                                        preferences, and interactions with the ring builder tool, aiding in
                                        optimizing product offerings and marketing strategies.</p>
                                </div>

                                <!-- Add more FAQ items as needed -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade " id="support-tab-pane" role="tabpanel" aria-labelledby="support-tab">
                <div class=" form-section-div ">
                    <?php 
                        if(!$krfs_hide_support_form) {
                    ?>
                    <form action="" method="post" id="help_form">
                        <input type="hidden" name="settings_action" value="" id="help_action">
                        <?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="krfs-contact-support-header">
                            <div class="krfs-info-container">
                                <p class="krfs-contact-support-para">We will reach you at: <span class="krfs-contact-support-span"><?php echo esc_html($user_info['email']); ?></span> <?php if(isset($user_info['phone']) && !empty($user_info['phone'])) { ?> or <span class="krfs-contact-support-span"><?php echo esc_html($user_info['phone']); ?></span><?php } ?></p>
                            </div>
                            <div class="krfs-edit-profile">
                                <p class="krfs-edit-profile-para krfs-admin-edit-contact-info-btn">Edit your contact info</p>
                            </div>
                        </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">Send</div>
                                    </div>
                                </button>
                            </div>
                        </div>
                        <?php wp_nonce_field('settings_action', 'csrf_settings_nonce'); ?>
                    </form>
                    <?php }else{ ?>
                        <p class="help-form-msg">Message sent successfully. We will contact you soon.</p>
                    <?php } ?>
                </div>
            </div>
            <?php 
                $tutorial_video = array(
                    'iglqbbzYgkc' => 'How to show/hide collection'
                ); 
            ?>
        <div class="tab-pane fade show active" id="tutorials-tab-pane" role="tabpanel-" aria-labelledby="tutorials-tab">
            <div class="tutorial-section grid grid-cols-3">
                <div class="krfs-video-tutorial">
                    <button class="krfs-tutorial-btn" ><a href="https://www.youtube.com/@JewelryWebsiteApps" target="_blank"><img alt="youtube-icon" src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR ) ?>/assets/images/help_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_html($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>
            <!-- <p><?php echo esc_html($title);?></p> -->
        </div>
                <?php 
                $i++; 
            } ?>
    </div>
</div>

<!-- Modal Popup Section -->
<?php $i=0; foreach($tutorial_video as $video => $title) { ?>
<div class="tutorial-popup modal fade" id="tutorial-<?php echo esc_html($i)?>" aria-hidden="true"
    tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="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++; } ?>

<?php
    include_once 'plugin_activation_form.php'; 
?>
