<?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly ?>
<div class="month-section tab-pane fade <?php echo esc_attr($kirb_active_initial_tab_config['basic-tab'] ? 'show active' : ''); ?> basic" id="basic-tab-pane" role="tabpanel" aria-labelledby="basic-tab">

    <!-- Choose Stone You Offer Start -->
    <div class="step remove-top-border right-section-size">
        <h5>A. Choose the Stones You Offer</h5>
        <div class="step-2 stap-grid-section">
            <?php $count = 0;
            foreach (KIRB_ALL_CATEGORIES as $index => $catg) { ?>
                <div class="item list">
                    <div class="enabled-div">
                        <input type="checkbox" name="<?php echo esc_attr($catg); ?>" <?php echo esc_attr($catg_control_setting[$catg] ? 'checked' : ''); ?> class="kirb_catg_switch">
                    </div>
                    <p class="text-p"><?php echo esc_html(++$count . '. ' . $catg_lbls[$catg]); ?></p>
                    <div class="input-section">
                        <div class="send-link-icon" style="display:<?php echo esc_attr($catg_control_setting[$catg] ? '' : 'none'); ?>" id="kirb-catg-<?php echo esc_attr(str_replace(" ","",strtolower($catg))); ?>">
                            <a href="<?php echo esc_url(kirb_getPageUrlById($kirb_page_ids[str_replace("kirb-","",KIRB_ALL_CATEGORIES_MAP[$catg])])); ?>" target="_blank">
                                <img alt="eye" loading="lazy" width="25" height="25" class="img-icon eye" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/my-store-icon.png'); ?>">
                            </a>
                        </div>
                    </div>
                </div>
            <?php } ?>

        </div>

        <div class="item item-border">
            <h5 style="font-weight: normal;">Select Display Products Per Page:</h5>
            <div class="number-section products-per-page">
                <?php
                for ($i = 8; $i <= 32; $i += 4) {
                    $active = $i == $products_per_page_setting ? 'active' : '';
                    echo '<span data-val="' . esc_attr($i) . '" class="' . esc_attr($active) . '">' . esc_html($i) . '</span>';
                }
                ?>
            </div>
        </div>

        <!-- Setting Category Start -->
        <div class="step">
            <div class="setting-category-section">
                <h5>B. Setting Category</h5>
                <div class="d-flex mb-2 mt-4">
                    <label for="ring_setting_catg"></label>
                    <select name="ring_setting_catg" id="ring_setting_catg" onchange="kirb_manageImportButton()">
                        <?php
                        // Get stored slugs from metadata
                        $excluded_slugs = array_values(KIRB_ALL_CATEGORIES_MAP);

                        $args = array(
                            'taxonomy'   => 'product_cat',
                            'orderby'    => 'name',
                            'order'      => 'ASC',
                            'hide_empty' => false,
                        );

                        $all_categories = get_terms($args);

                        // Filter categories, excluding those with matching slugs
                        $product_categories = array_filter($all_categories, function ($category) use ($excluded_slugs) {
                            return !in_array($category->slug, $excluded_slugs);
                        });

                        if (!empty($product_categories) && !is_wp_error($product_categories)) {
                            $curr_setting_catg = kirbGetMeta('_setting_ring_setting_catg');
                            foreach ($product_categories as $category) {
                                $selected = $curr_setting_catg == $category->slug ? 'selected' : '';
                                echo '<option value="' . esc_attr($category->slug) . '" ' . esc_attr($selected) . '>' . esc_html($category->name) . '</option>';
                            }
                        }
                        ?>
                    </select>
                </div>

                        <div class="enabled-div g-0">Don't have category? <a href="#" id="kirb_create_engagement_ring_cat_btn">create now
            <span id="kirb_cat_loader" class="kirb-loader-relative" role="status" style="display: none;">
                <div class="kirb_dots_loaders">
                    <div class="loader1">
                        <span class="circle1"></span>
                        <span class="circle1"></span>
                        <span class="circle1"></span>
                    </div>
                </div>
            </span></a> 
        </div>
        
                <div class="mb-4"></div>
            </div>

            <!-- Server Cache Start -->
            <div class="step ">
                <div class="step-3 ">
                    <div class="item">
                        <div class="cashe-div item">
                            <h5>C. Server Cache</h5>
                            <div class="checkbox-section d-flex align-items-center">
                                <button class="clear-cache-btn settings_action_btn" type="submit" data-val="clear_cache">clear cache</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Manage Theme Start -->
            <div class="step border-class">
                <div class="theme-header">
                    <h5>D. Manage Theme</h5>
                </div>
                <div class="step-color-div">
                    <div class="color-inner">
                        <div class="box-color">
                            <input class="color-box" type="color" name="primary_color" id="primary_color" value="<?php echo esc_attr(sanitize_hex_color($primary_color)); ?>">
                        </div>
                        <label for="primary_color">
                            Primary Color
                        </label>
                    </div>
                    <div class="color-inner">
                        <div class="box-color">
                            <input class="color-box" type="color" name="accent_color" id="accent_color"
                            value="<?php echo esc_attr(sanitize_hex_color($accent_color)); ?>">
                        </div>
                        <label for="accent_color">
                            Accent Color
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Image Preview Section Start 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="basic-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="basic-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_attr('Zoom-In'); ?>">
            <div class="kirb_img_slides" data-id="basic-section" data-active-index="0">
                <img data-target="setting-tab-image" onclick="kirbOpenImageSidebar('basic')" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/setting_preview_image/preview_img_basic-1.webp'); ?>">
                <img data-target="setting-tab-image" onclick="kirbOpenImageSidebar('basic')" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/setting_preview_image/preview_img_basic-2.webp'); ?>">
                <img data-target="setting-tab-image" onclick="kirbOpenImageSidebar('basic')" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/setting_preview_image/preview_img_basic-3.webp'); ?>">
                <img data-target="setting-tab-image" onclick="kirbOpenImageSidebar('basic')" src="<?php echo esc_url(KIRB_PLUGIN_DIR . '/assets/images/setting_preview_image/preview_img_basic-4.webp'); ?>">
            </div>
        </span>
    </div>
</div>

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

