<?php if (!defined('ABSPATH'))
    exit; // Exit if accessed directly ?>
<div class="tab-pane fade <?php echo $kirb_active_initial_tab_config['premium-tab'] ? 'show active' : ''; ?> basic"
    id="premium-tab-pane" role="tabpanel" aria-labelledby="setting-tab">
    <div class="step right-section remove-top-border right-section-size">
        <div class="features-heading">
            <p>These custom features/add-ons will cost extra.</p>
        </div>
        <!-- Diamond Listing Section -->
        <h5>A. Diamond Listing Page</h5>

        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">1. Grid View on Mobile
                    <div class="image-container">
                        <span href="javascript:void(0);" class="info-box info-box-listing"
                            onclick="event.preventDefault();" data-toggle="tooltip" data-placement="top"
                            data-title="<?php echo esc_html__("Allows customers to view products in gridview in mobile.", 'diamond-ring-builder-jewelry'); ?>">
                            <img class="info-icon pointer-image"
                                src="<?php echo esc_url(KIRB_PLUGIN_DIR) ?>/assets/images/info.png" alt="info-icon">
                        </span>
                    </div>
                </label>
            </div>
            <div class="kirb-contact-btn">
                <button class="kirb_contact_sales_btn">Contact Sales</button>
            </div>
        </div>
        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">2. Hide/Show Filters
                </label>
            </div>
            <div class="kirb-contact-btn">
                <button class="kirb_contact_sales_btn">Contact Sales</button>
            </div>
        </div>

        <!-- Diamond Detail Section -->
        <h5 style="margin-top: 20px;">B. Diamond Detail Page</h5>
            <div class="more-setting-input-section">
                <div class="inner-section">
                    <label for="">1. Redact PDF Certificate IGI and GIA 
                        <div class="image-container">
                            <span href="javascript:void(0);" class="info-box info-box-listing"
                                onclick="event.preventDefault();" data-toggle="tooltip" data-placement="top"
                                data-title="<?php echo esc_html__("Certificate Numbers will be masked.", 'diamond-ring-builder-jewelry'); ?>">
                                <img class="info-icon pointer-image"
                                    src="<?php echo esc_url(KIRB_PLUGIN_DIR) ?>/assets/images/infos.svg" alt="info-icon">
                            </span>
                        </div>
                    </label>
                </div>
                <div class="kirb-contact-btn">
                    <button class="kirb_contact_sales_btn">Contact Sales</button>
                </div>
            </div>
        
        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">2. If you need custom features in this page:
                </label>
            </div>
            <div class="kirb-contact-btn">
                <button class="kirb_contact_sales_btn">Contact Sales</button>
            </div>
        </div>

        <!-- Review Page Section -->
        <h5 style="margin-top: 20px;">C. Review Page</h5>
        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">1. Add Engraving</label>
            </div>
            <div class="kirb-contact-btn">
                <button class="kirb_contact_sales_btn">Contact Sales</button>
            </div>
        </div>

        <!-- Engagement Detail Section -->
        <h5 style="margin-top: 20px;">D. Engagement Detail Page</h5>
        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">If you need custom features in this page:
                </label>
            </div>
            <div class="kirb-contact-btn">
                <button class="kirb_contact_sales_btn">Contact Sales</button>
            </div>
        </div>

        <!-- Common section -->
        <h5 style="margin-top: 20px;">E. Common</h5>
        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">1. Disable Build Your Own Ring (BYOR)</label>
            </div>
            <div class="donot-shoe-section">
                <div>Do not show</div>
                <div>
                    <span>1. BYOR Bar</span>
                    <span>2. Add to Setting Option</span>
                    <span>3. Review Page</span>
                </div>
            </div>
            <div class="kirb-contact-btn">
                <button class="kirb_contact_sales_btn">Contact Sales</button>
            </div>
        </div>

        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">2. Wishlist</label>
            </div>
            <div class="kirb-contact-btn">
                <button class="kirb_contact_sales_btn">Contact Sales</button>
            </div>
        </div>

        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">3. Custom Design</label>
            </div>
            <div class="kirb-contact-btn">
                <button class="kirb_contact_sales_btn">Contact Sales</button>
            </div>
        </div>
        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">4. Pendant Builder</label>
            </div>
            <div class="kirb-contact-btn">
                <button class="kirb_contact_sales_btn">Contact Sales</button>
            </div>
        </div>
        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">5. Earring Builder</label>
            </div>
            <div class="kirb-contact-btn">
                <button class="kirb_contact_sales_btn">Contact Sales</button>
            </div>
        </div>
    </div>

    <!-- Image Preview Section Starts Here -->
    <div class="right-section-container">
        <div class="section-header">
            <div class="para">
                <p>Preview</p>
            </div>
            <div class="arrow-btn">
                <div class="kirb-nav-arrow" data-target="premium-section" data-action="prev">
                    <img src="<?php echo esc_html(KIRB_PLUGIN_DIR) ?>/assets/images/chevron-left.svg" alt="">
                </div>
                <div class="kirb-nav-arrow" data-target="premium-section" data-action="next">
                    <img src="<?php echo esc_html(KIRB_PLUGIN_DIR) ?>/assets/images/chevron-right.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 esc_html("Zoom-In"); ?>">
            <div class="kirb_img_slides" data-id="premium-section" data-active-index="0">
                <img data-target="premium-tab-image" onclick="kirbOpenImageSidebar('premium')"
                    src="<?php echo esc_html(KIRB_PLUGIN_DIR) ?>/assets/images/setting_preview_image/preview-1.png"
                    alt="preview_image">
                <img data-target="premium-tab-image" onclick="kirbOpenImageSidebar('premium')"
                    src="<?php echo esc_html(KIRB_PLUGIN_DIR) ?>/assets/images/setting_preview_image/preview-2.png"
                    alt="preview_image">
                <img data-target="premium-tab-image" onclick="kirbOpenImageSidebar('premium')"
                    src="<?php echo esc_html(KIRB_PLUGIN_DIR) ?>/assets/images/setting_preview_image/preview-3.png"
                    alt="preview_image">
                <img data-target="premium-tab-image" onclick="kirbOpenImageSidebar('premium')"
                    src="<?php echo esc_html(KIRB_PLUGIN_DIR) ?>/assets/images/setting_preview_image/preview-4.png"
                    alt="preview_image">
                <img data-target="premium-tab-image" onclick="kirbOpenImageSidebar('premium')"
                    src="<?php echo esc_html(KIRB_PLUGIN_DIR) ?>/assets/images/setting_preview_image/preview-5.png"
                    alt="preview_image">
                <img data-target="premium-tab-image" onclick="kirbOpenImageSidebar('premium')"
                    src="<?php echo esc_html(KIRB_PLUGIN_DIR) ?>/assets/images/setting_preview_image/preview-6.png"
                    alt="preview_image">
                <img data-target="premium-tab-image" onclick="kirbOpenImageSidebar('premium')"
                    src="<?php echo esc_html(KIRB_PLUGIN_DIR) ?>/assets/images/setting_preview_image/preview-7.png"
                    alt="preview_image">
                <img data-target="premium-tab-image" onclick="kirbOpenImageSidebar('premium')"
                    src="<?php echo esc_html(KIRB_PLUGIN_DIR) ?>/assets/images/setting_preview_image/preview-8.png"
                    alt="preview_image">
            </div>
        </span>
    </div>
</div>
<div id="kirb-premium-images" class="sidenav setting-slider">
    <div class="kirb-close-slider">
        <div class="cross-container">
            <img onclick="kirbcloseImageSidebar('premium')"
                src="<?php echo esc_html(KIRB_PLUGIN_DIR) ?>/assets/images/cross-btn.svg" alt="">
        </div>
    </div>
</div>
<div id="kirb-premium-preview-image" class="kirb-preview-image" data-sidebar="premium"></div>