<?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly ?>
<div class="tab-pane fade <?php echo esc_attr($kirb_active_initial_tab_config['more-tab'] ? 'show active' : ''); ?> basic" id="setting-tab-pane" role="tabpanel" aria-labelledby="setting-tab">
    <div class="step right-section remove-top-border right-section-size">
        <p>Show/Hide options. Edit title name in&nbsp;<span class="text-decoration-underline kirb-language-hyperlink" role="button"> Language and Region</span>.</p>
        <!-- Diamond Listing Section -->
        <h5 style="margin-top: 20px;">A. Diamond Listing Page</h5>
        <!-- Fast Shipping Section -->
        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">1. Fast Shipping
                    <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("Set the number of working days for fast shipping."); ?>">
                            <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 class="switch-container">
                    <button type="button" role="switch"
                        aria-checked="<?php echo esc_attr($addons_data['fast_shipping']['enabled'] ? 'true' : 'false'); ?>" data-state="<?php echo esc_attr($addons_data['fast_shipping']['enabled'] ? 'checked' : 'unchecked'); ?>" value="<?php echo esc_attr($addons_data['fast_shipping']['enabled'] ? 'on' : 'off'); ?>"
                        class="kirb-addon-toggle-switch disabled">
                        <span data-state="checked" class="toggle-slider"></span>
                    </button>
                </div>
                <input type="hidden" name="addon_fast_shipping_enabled"
                    value="<?php echo esc_attr($addons_data['fast_shipping']['enabled'] ? 'true' : 'false'); ?>">
            </div>
            <input type="text" placeholder="Enter Number of Shipping Days" name="addon_fast_shipping_string" value="5" readonly>
        </div>

        <!-- Default Sort By Option -->
        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">2. Default Sort By Option
                    <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__("Applies to both diamonds and gemstones", '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="more-setting-input-section" style="margin-top:10px;" id="kirb-engraing-info-section">

            <div class="kirb-select-page-dropdown">
                 <label for="default_sort_select"></label>
                         <select name="default_sort_select" id="default_sort_select" >
                        <?php

                        $sortOptions = array(
                        array('title' => 'Popular', 'select' => 'popular'),
                        array('title' => 'Price: Low to High', 'select' => 'Orderbyprice-asc'),
                        array('title' => 'Price: High to Low', 'select' => 'Orderbyprice-desc'),
                        array('title' => 'Carat: Low to High', 'select' => 'Orderbycarat-asc'),
                        array('title' => 'Carat: High to Low', 'select' => 'Orderbycarat-desc'),
                        array('title' => 'Color: Low to High', 'select' => 'Orderbycolor-asc'),
                        array('title' => 'Color: High to Low', 'select' => 'Orderbycolor-desc'),
                        array('title' => 'Clarity: Low to High', 'select' => 'Orderbyclarity-asc'),
                        array('title' => 'Clarity: High to Low', 'select' => 'Orderbyclarity-desc'),
                        array('title' => 'Cut: Low to High', 'select' => 'Orderbycut-asc'),
                        array('title' => 'Cut: High to Low', 'select' => 'Orderbycut-desc'),
                    );

                    $selectedOption = $addons_data['default_sort']['select'] ?? 'popular';
       
                            foreach ($sortOptions as $option) {
                                $selected = $option['select'] == $selectedOption ? 'selected' : '';

                                echo '<option value="' . esc_attr($option['select']) . '" ' . esc_attr($selected) . '>' . esc_html($option['title']) . '</option>';
                            }
                        
                        ?>
                    </select>
                    <input id="addon_default_sort_title" type="hidden" name="addon_default_sort_title" value="<?php echo isset($addons_data['default_sort']['title']) ? esc_attr($addons_data['default_sort']['title']) : 'Popular'; ?>">
            </div>
            </div>
        </div>

        <!-- Diamond Detail Section -->
        <h5 style="margin-top: 20px;">B. Diamond Detail Page</h5>
        <!-- Free shipping Section -->
        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">1. Free Shipping
                    <div class="image-container">
                        <span href="javascript:void(0);" class="info-box detail-shipping" onclick="event.preventDefault();" data-toggle="tooltip" data-placement="top" data-title="<?php echo esc_html("Add a link to the page if you wish to take the customer to that page, which will be hyperlinked.(optional)"); ?>">
                            <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 class="switch-container">
                    <button type="button" role="switch"
                        aria-checked="<?php echo esc_attr($addons_data['free_shipping']['enabled'] ? 'true' : 'false'); ?>"
                        data-state="<?php echo esc_attr($addons_data['free_shipping']['enabled'] ? 'checked' : 'unchecked'); ?>"
                        name="addon_free_shipping_enabled"
                        value="<?php echo esc_attr($addons_data['free_shipping']['enabled'] ? 'on' : 'off'); ?>"
                        class="kirb-addon-toggle-switch disabled">
                        <span data-state="checked" class="toggle-slider"></span>
                    </button>
                </div>
                <input type="hidden" name="addon_free_shipping_enabled"
                    value="<?php echo esc_attr($addons_data['free_shipping']['enabled'] ? 'true' : 'false'); ?>">
            </div>
            <input type="text" placeholder="<?php echo esc_url(site_url() . '/free-shipping');?>" name="addon_free_shipping_string"
            value="<?php echo esc_attr($addons_data['free_shipping']['string']); ?>" readonly>
        </div>

        <!-- Easy 30-Day Return Section -->
        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">2. Easy 30-Day Returns
                    <div class="image-container">
                        <span href="javascript:void(0);" class="info-box detail-return" onclick="event.preventDefault();" data-toggle="tooltip" data-placement="top" data-title="<?php echo esc_html("Add a link to the page if you wish to take the customer to that page, which will be hyperlinked.(optional)"); ?>">
                            <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 class="switch-container">
                    <button type="button" role="switch" aria-checked="<?php echo esc_attr($addons_data['easy_returns']['enabled'] ? 'true' : 'false'); ?>" data-state="<?php echo esc_attr($addons_data['easy_returns']['enabled'] ? 'checked' : 'unchecked'); ?>" value="<?php echo esc_attr($addons_data['easy_returns']['enabled'] ? 'on' : 'off'); ?>" class="kirb-addon-toggle-switch disabled">
                        <span data-state="checked" class="toggle-slider"></span>
                    </button>
                </div>
                <input type="hidden" name="addon_easy_returns_enabled"
                    value="<?php echo esc_attr($addons_data['easy_returns']['enabled'] ? 'true' : 'false'); ?>">
            </div>
            <input type="text" placeholder="<?php echo esc_url(site_url() . '/easy-30-day-returns');?>" name="addon_easy_returns_string"
            value="<?php echo esc_attr($addons_data['easy_returns']['string']); ?>" readonly>
        </div>

        <!-- Consult An Expert Section -->
        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">
                    3. Consult An Expert
                    <div class="image-container">
                        <span href="javascript:void(0);" class="info-box detail-expert" onclick="event.preventDefault();" data-toggle="tooltip" data-placement="top" data-title="<?php echo esc_html("Allows customers to request assistance from our jewelry experts. Please input the preferred phone no. for customers to contact."); ?>">
                            <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 class="switch-container">
                    <button type="button" role="switch" aria-checked="<?php echo esc_attr($addons_data['consult_expert']['enabled'] ? 'true' : 'false'); ?>"
                        data-state="<?php echo esc_attr($addons_data['consult_expert']['enabled'] ? 'checked' : 'unchecked'); ?>"
                        value="<?php echo esc_attr($addons_data['consult_expert']['enabled'] ? 'on' : 'off'); ?>"
                        class="kirb-addon-toggle-switch disabled">
                        <span
                            data-state="<?php echo esc_attr($addons_data['consult_expert']['enabled'] ? 'checked' : 'unchecked'); ?>"
                            class="toggle-slider"></span>
                    </button>
                </div>
                <input type="hidden" name="addon_consult_expert_enabled"
                    value="<?php echo esc_attr($addons_data['consult_expert']['enabled'] ? 'true' : 'false'); ?>">
            </div>
            <input type="text" placeholder="Enter Phone Number (Min. 12 character)" name="addon_consult_expert_string"
                value="<?php echo esc_attr($addons_data['consult_expert']['string']); ?>" readonly>
        </div>

        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">4. Virtal Ring Viewer
                    <div class="image-container">
                        <span href="javascript:void(0);" class="info-box detail-shipping" onclick="event.preventDefault();" data-toggle="tooltip" data-placement="top" data-title="<?php echo esc_html__("Add a link to the page if you wish to take the customer to that page, which will be hyperlinked.(optional)", '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 class="switch-container">
                    <button type="button" role="switch"
                        aria-checked="<?php echo esc_attr($addons_data['virtual_ring_view']['enabled'] ? 'true' : 'false'); ?>"
                        data-state="<?php echo esc_attr($addons_data['virtual_ring_view']['enabled'] ? 'checked' : 'unchecked'); ?>"
                        name="addon_virtual_ring_view_enabled"
                        value="<?php echo esc_attr($addons_data['virtual_ring_view']['enabled'] ? 'on' : 'off'); ?>"
                        class="kirb-addon-toggle-switch disabled">
                        <span data-state="checked" class="toggle-slider"></span>
                    </button>
                </div>
                <input type="hidden" name="addon_virtual_ring_view_enabled"
                    value="<?php echo esc_attr($addons_data['virtual_ring_view']['enabled'] ? 'true' : 'false'); ?>">
            </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. Free Resizing Available
                    <div class="image-container">
                        <span href="javascript:void(0);" class="info-box review-resizing" onclick="event.preventDefault();" data-toggle="tooltip" data-placement="top" data-title="<?php echo esc_html("Add a link to the page if you wish to take the customer to that page, which will be hyperlinked.(optional)"); ?>">
                            <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 class="switch-container">
                    <button type="button" role="switch" aria-checked="<?php echo esc_attr($addons_data['free_resizing']['enabled'] ? 'true' : 'false'); ?>" data-state="<?php echo esc_attr($addons_data['free_resizing']['enabled'] ? 'checked' : 'unchecked'); ?>" value="<?php echo esc_attr($addons_data['free_resizing']['enabled'] ? 'on' : 'off'); ?>"
                        class="kirb-addon-toggle-switch disabled">
                        <span data-state="checked" class="toggle-slider"></span>
                    </button>
                </div>
                <input type="hidden" name="addon_free_resizing_enabled" value="<?php echo esc_attr($addons_data['free_resizing']['enabled'] ? 'true' : 'false'); ?>">
            </div>
            <input type="text" placeholder="<?php echo esc_url(site_url() . '/free-resizing-available');?>" name="addon_free_resizing_string"
                value="<?php echo esc_attr($addons_data['free_resizing']['string']); ?>" readonly>
        </div>

        <!-- Ring Size Section -->
        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">2. Ring Size
                </label>
                <div class="switch-container">
                    <button type="button" role="switch" aria-checked="<?php echo esc_attr($addons_data['ring_size']['enabled'] ? 'true' : 'false'); ?>" data-state="<?php echo esc_attr($addons_data['ring_size']['enabled'] ? 'checked' : 'unchecked'); ?>" value="<?php echo esc_attr($addons_data['ring_size']['enabled'] ? 'on' : 'off'); ?>"
                        class="kirb-addon-toggle-switch disabled">
                        <span data-state="checked" class="toggle-slider"></span>
                    </button>
                </div>
                <input type="hidden" name="addon_ring_size_enabled" value="<?php echo esc_attr($addons_data['ring_size']['enabled'] ? 'true' : 'false'); ?>">
            </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="">1. Add To Cart Button</label>
                <div class="switch-container">
                    <button type="button" role="switch" aria-checked="<?php echo esc_attr($addons_data['add_to_cart']['enabled'] ? 'true' : 'false'); ?>" data-state="<?php echo esc_attr($addons_data['add_to_cart']['enabled'] ? 'checked' : 'unchecked'); ?>" value="<?php echo esc_attr($addons_data['add_to_cart']['enabled'] ? 'on' : 'off'); ?>"
                        class="kirb-addon-toggle-switch disabled">
                        <span data-state="checked" class="toggle-slider"></span>
                    </button>
                </div>
                <input type="hidden" name="addon_add_to_cart_enabled" value="<?php echo esc_attr($addons_data['add_to_cart']['enabled'] ? 'true' : 'false'); ?>">
            </div>
        </div>
        <div class="more-setting-input-section">
            <div class="inner-section">
                <label for="">2. Choose This Setting Button</label>
                <div class="switch-container">
                    <button type="button" role="switch" aria-checked="<?php echo esc_attr($addons_data['choose_this_setting']['enabled'] ? 'true' : 'false'); ?>" data-state="<?php echo esc_attr($addons_data['choose_this_setting']['enabled'] ? 'checked' : 'unchecked'); ?>" value="<?php echo esc_attr($addons_data['choose_this_setting']['enabled'] ? 'on' : 'off'); ?>" class="kirb-addon-toggle-switch disabled">
                        <span data-state="checked" class="toggle-slider"></span>
                    </button>
                </div>
                <input type="hidden" name="addon_choose_this_setting_enabled" value="<?php echo esc_attr($addons_data['choose_this_setting']['enabled'] ? 'true' : 'false'); ?>">
            </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="more-section" data-action="prev">
                    <img src="<?php echo esc_url(KIRB_PLUGIN_DIR) ?>/assets/images/chevron-left.svg" alt="">
                </div>
                <div class="kirb-nav-arrow" data-target="more-section" data-action="next">
                    <img src="<?php echo esc_url(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="more-section" data-active-index="0">
                <img data-target="more-tab-image" onclick="kirbOpenImageSidebar('more')" src="<?php echo esc_url(KIRB_PLUGIN_DIR) ?>/assets/images/setting_preview_image/preview_img_moreOption-1.webp" alt="preview_image">
                <img data-target="more-tab-image" onclick="kirbOpenImageSidebar('more')" src="<?php echo esc_url(KIRB_PLUGIN_DIR) ?>/assets/images/setting_preview_image/preview_img_moreOption-2.webp" alt="preview_image">
                <img data-target="more-tab-image" onclick="kirbOpenImageSidebar('more')" src="<?php echo esc_url(KIRB_PLUGIN_DIR) ?>/assets/images/setting_preview_image/more-settings_ring-size-min.png" alt="preview_image">
                <img data-target="more-tab-image" onclick="kirbOpenImageSidebar('more')" src="<?php echo esc_url(KIRB_PLUGIN_DIR) ?>/assets/images/setting_preview_image/preview_img_moreOption-4.webp" alt="preview_image">
            </div>
        </span>
    </div>
</div>

<div id="kirb-more-images" class="sidenav setting-slider">
    <div class="kirb-close-slider">
        <div class="cross-container">
            <img onclick="kirbcloseImageSidebar('more')" src="<?php echo esc_url(KIRB_PLUGIN_DIR) ?>/assets/images/cross-btn.svg" alt="">
        </div>
    </div>   
    <div id="kirb-more-images-preview"></div>                          
</div>
<div id="kirb-more-preview-image" class="kirb-preview-image" data-sidebar="more"></div>