<?php
    if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly  
    $krfs_attributes_mapping = json_decode(krfsapp_getMeta('attributes_mapping'), true);
?>
<div class="month-section tab-pane fade" id="map-tab-pane" role="tabpanel" aria-labelledby="map-tab">
    <div class="d-md-flex">
        <div class="krfs-basic-wrapper">
            <!-- Choose Ring Categories -->
            <div class="step">
                <h5>A. Choose Ring Categories</h5>
                <?php
                // Get stored slugs from metadata
                $args = array(
                    'taxonomy' => 'product_cat',
                    'orderby' => 'name',
                    'order' => 'ASC',
                    'hide_empty' => false,
                );

                $product_categories = get_terms($args);
                ?>
                <div class="stap-grid-section">
                    <div class="mb-4">
                        <label for="krfs_engagement_ring_catg" class="form-label">
                            Engagement Rings Category
                        </label>
                        <select name="engagement_ring_catg" id="krfs_engagement_ring_catg" class="form-control">
                            <?php
                            if (!empty($product_categories) && !is_wp_error($product_categories)) {
                                $curr_engagement_catg = krfsapp_getMeta('_setting_engagement_ring_catg');
                                foreach ($product_categories as $category) {
                                    $selected = $curr_engagement_catg == $category->slug ? 'selected' : '';
                                    echo '<option value="' . esc_attr($category->slug) . '" ' . esc_attr($selected) . '>' . esc_html($category->name) . '</option>';
                                }
                            }
                            ?>
                        </select>
                    </div>

                    <div class="mb-4">
                        <label for="krfs_wedding_ring_catg" class="form-label">
                            Wedding Rings Category
                        </label>
                        <select name="wedding_ring_catg" id="krfs_wedding_ring_catg" class="form-control">
                            <?php
                            if (!empty($product_categories) && !is_wp_error($product_categories)) {
                                $curr_wedding_catg = krfsapp_getMeta('_setting_wedding_ring_catg');

                                foreach ($product_categories as $category) {
                                    $selected = $curr_wedding_catg == $category->slug ? 'selected' : '';
                                    echo '<option value="' . esc_attr($category->slug) . '" ' . esc_attr($selected) . '>' . esc_html($category->name) . '</option>';
                                }
                            }
                            ?>
                        </select>
                    </div>
                </div>
            </div>

            <!-- START: Engagement Rings Styles -->
            <div class="step">
                <h5>B. Choose Engagement Ring Styles</h5>
                <div class="stap-grid-section">
                    <div class="mt-2">
                        <div class="d-flex mb-4">
                            <label for="krfs_engagement_ring_style" class="form-label fw-bold">
                                1. Style
                                <span id="krfs_style_loader"
                                    class="spinner-border spinner-border-sm ms-2 float-end mt-1 me-2" role="status"
                                    style="display: none;"></span>
                            </label>

                            <select name="engagement_ring_style" id="krfs_engagement_ring_style" class="form-control">
                                <?php

                                if (!empty($productAttributes) && !is_wp_error($productAttributes)) {
                                    $curr_style_attribute = $krfs_attributes_mapping['engagement_ring_style'] ?? '';

                                    foreach ($productAttributes as $attribute) {
                                        $selected = $curr_style_attribute == $attribute->attribute_name ? 'selected' : '';
                                        echo '<option value="' . esc_attr($attribute->attribute_name) . '" ' . esc_attr($selected) . '>' . esc_html($attribute->attribute_label) . '</option>';
                                    }
                                }
                                ?>
                            </select>
                        </div>

                        <div class="mb-4">
                            <h6 class="fw-bold">Terms:</h6>
                        </div>

                        <div class="row">
                            <?php
                                foreach ($styleTerms as $styleTerm) {
                                    echo '
                                        <div class="col-md-4 mb-4">
                                            <label for="krfs_' . esc_attr($styleTerm['slug']) . '" class="form-label">
                                                ' . esc_html($styleTerm['name']) . '
                                            </label>

                                            <select name="engagement_ring_terms_' . esc_attr($styleTerm['slug']) . '" id="krfs_' . esc_attr($styleTerm['slug']) . '" class="krfs_engagement_ring_style_terms form-control">
                                                <option value="">Select Term</option>
                                            </select>
                                        </div>
                                    ';
                                }
                            ?>

                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Engagement Rings Styles -->

            <!-- START: Engagement Rings Side Stones -->
            <div class="step">
                <h5>C. Choose Engagement Ring Side Stones</h5>
                <div class="stap-grid-section">
                    <div class="mt-2">
                        <div class="d-flex mb-4">
                            <label for="krfs_engagement_ring_side_stone" class="form-label fw-bold">
                                1. Stone
                                <span id="krfs_side_stone_loader"
                                    class="spinner-border spinner-border-sm ms-2 float-end mt-1 me-2" role="status"
                                    style="display: none;"></span>
                            </label>

                            <select name="engagement_ring_side_stone" id="krfs_engagement_ring_side_stone"
                                class="form-control">
                                <?php

                                if (!empty($productAttributes) && !is_wp_error($productAttributes)) {
                                    $curr_side_stone_attribute = $krfs_attributes_mapping['engagement_ring_sidestone'] ?? '';
                                    // $curr_side_stone_attribute = krfsapp_getMeta('_setting_engagement_ring_side_stone');

                                    foreach ($productAttributes as $attribute) {
                                        $selected = $curr_side_stone_attribute == $attribute->attribute_name ? 'selected' : '';
                                        echo '<option value="' . esc_attr($attribute->attribute_name) . '" ' . esc_attr($selected) . '>' . esc_html($attribute->attribute_label) . '</option>';
                                    }
                                }
                                ?>
                            </select>
                        </div>

                        <div class="mb-4">
                            <h6 class="fw-bold">Terms:</h6>
                        </div>

                        <div class="row">
                            <?php
                            foreach ($sideStoneTerms as $sideStoneTerm) {
                                echo '
                                    <div class="col-md-4 mb-4">
                                        <label for="krfs_' . esc_attr($sideStoneTerm['slug']) . '" class="form-label">
                                            ' . esc_html($sideStoneTerm['name']) . '
                                        </label>

                                        <select name="engagement_ring_terms_' . esc_attr($sideStoneTerm['slug']) . '" id="krfs_' . esc_attr($sideStoneTerm['slug']) . '" class="krfs_engagement_ring_side_stone_terms form-control">
                                            <option value="">Select Term</option>
                                        </select>
                                    </div>
                                ';
                            }
                            ?>

                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Engagement Rings Side Stones -->

            <!-- START: Mens wedding rings styles -->
            <div class="step">
                <h5>D. Choose Men Wedding Rings Style</h5>
                <div class="stap-grid-section">
                    <div class="mt-2">
                        <div class="d-flex mb-4">
                            <label for="krfs_wedding_ring_wed_men" class="form-label fw-bold">
                                1. Style
                                <span id="krfs_wed_men_loader"
                                    class="spinner-border spinner-border-sm ms-2 float-end mt-1 me-2" role="status"
                                    style="display: none;"></span>
                            </label>

                            <select name="wedding_ring_wed_men" id="krfs_wedding_ring_wed_men" class="form-control">
                                <?php

                                if (!empty($productAttributes) && !is_wp_error($productAttributes)) {
                                    // $curr_wed_men_attribute = krfsapp_getMeta('_setting_wedding_ring_wed_men');
                                    $curr_wed_men_attribute = $krfs_attributes_mapping['wedding_ring_wed_men'] ?? '';

                                    foreach ($productAttributes as $attribute) {
                                        $selected = $curr_wed_men_attribute == $attribute->attribute_name ? 'selected' : '';
                                        echo '<option value="' . esc_attr($attribute->attribute_name) . '" ' . esc_attr($selected) . '>' . esc_html($attribute->attribute_label) . '</option>';
                                    }
                                }
                                ?>
                            </select>
                        </div>

                        <div class="mb-4">
                            <h6 class="fw-bold">Terms:</h6>
                        </div>

                        <div class="row">
                            <?php
                            foreach ($wedMenTerms as $wedMenTerm) {
                                echo '
                                    <div class="col-md-4 mb-4">
                                        <label for="krfs_' . esc_attr($wedMenTerm['slug']) . '" class="form-label">
                                            ' . esc_html($wedMenTerm['name']) . '
                                        </label>

                                        <select name="wedding_ring_terms_' . esc_attr($wedMenTerm['slug']) . '" id="krfs_' . esc_attr($wedMenTerm['slug']) . '" class="krfs_wedding_ring_wed_men_terms form-control">
                                            <option value="">Select Term</option>
                                        </select>
                                    </div>
                                ';
                            }
                            ?>

                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Mens wedding rings styles -->

            <!-- START: Women wedding rings styles -->
            <div class="step">
                <h5>E. Choose Women Wedding Rings Style</h5>
                <div class="stap-grid-section">
                    <div class="mt-2">
                        <div class="d-flex mb-4">
                            <label for="krfs_wedding_ring_wed_women" class="form-label fw-bold">
                                1. Style
                                <span id="krfs_wed_women_loader"
                                    class="spinner-border spinner-border-sm ms-2 float-end mt-1 me-2" role="status"
                                    style="display: none;"></span>
                            </label>

                            <select name="wedding_ring_wed_women" id="krfs_wedding_ring_wed_women" class="form-control">
                                <?php

                                if (!empty($productAttributes) && !is_wp_error($productAttributes)) {
                                    $curr_wed_women_attribute = $krfs_attributes_mapping['wedding_ring_wed_women'] ?? '';

                                    foreach ($productAttributes as $attribute) {
                                        $selected = $curr_wed_women_attribute == $attribute->attribute_name ? 'selected' : '';
                                        echo '<option value="' . esc_attr($attribute->attribute_name) . '" ' . esc_attr($selected) . '>' . esc_html($attribute->attribute_label) . '</option>';
                                    }
                                }
                                ?>
                            </select>
                        </div>

                        <div class="mb-4">
                            <h6 class="fw-bold">Terms:</h6>
                        </div>

                        <div class="row">
                            <?php
                                foreach ($wedWomenTerms as $wedWomenTerm) {
                                    echo '
                                        <div class="col-md-4 mb-4">
                                            <label for="krfs_' . esc_attr($wedWomenTerm['slug']) . '" class="form-label">
                                                ' . esc_html($wedWomenTerm['name']) . '
                                            </label>

                                            <select name="wedding_ring_terms_' . esc_attr($wedWomenTerm['slug']) . '" id="krfs_' . esc_attr($wedWomenTerm['slug']) . '" class="krfs_wedding_ring_wed_women_terms form-control">
                                                <option value="">Select Term</option>
                                            </select>
                                        </div>
                                    ';
                                }
                            ?>

                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Women wedding rings styles -->

            <!-- START: Metal Type -->
            <div class="step">
                <h5>F. Metal</h5>
                <div class="stap-grid-section">
                    <div class="mt-2">
                        <div class="d-flex mb-4">
                            <label for="krfs_metal" class="form-label fw-bold">
                                1. Metal Type
                                <span id="krfs_metal_loader"
                                    class="spinner-border spinner-border-sm ms-2 float-end mt-1 me-2" role="status"
                                    style="display: none;"></span>
                            </label>

                            <select name="metal" id="krfs_metal" class="form-control">
                                <?php
                                    if (!empty($productAttributes) && !is_wp_error($productAttributes)) {
                                        $curr_metal_attribute = $krfs_attributes_mapping['metal'] ?? '';

                                        foreach ($productAttributes as $attribute) {
                                            $selected = $curr_metal_attribute == $attribute->attribute_name ? 'selected' : '';
                                            echo '<option value="' . esc_attr($attribute->attribute_name) . '" ' . esc_attr($selected) . '>' . esc_html($attribute->attribute_label) . '</option>';
                                        }
                                    }
                                ?>
                            </select>
                        </div>

                        <div class="mb-4">
                            <h6 class="fw-bold">Terms:</h6>
                        </div>

                        <div class="row">
                            <?php
                            foreach ($metalTerms as $metalTerm) {
                                echo '
                                    <div class="col-md-4 mb-4">
                                        <label for="krfs_' . esc_attr($metalTerm['slug']) . '" class="form-label">
                                            ' . esc_html($metalTerm['name']) . '
                                        </label>

                                        <select name="terms_' . esc_attr($metalTerm['slug']) . '" id="krfs_' . esc_attr($metalTerm['slug']) . '" class="krfs_metal_terms form-control">
                                            <option value="">Select Term</option>
                                        </select>
                                    </div>
                                ';
                            }
                            ?>

                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Metal Type -->

            <!-- START: Diamond Shape -->
            <div class="step">
                <h5>G. Diamond</h5>
                <div class="stap-grid-section">
                    <div class="mt-2">
                        <div class="d-flex mb-4">
                            <label for="krfs_shape" class="form-label fw-bold">
                                1. Diamond Shape
                                <span id="krfs_shape_loader"
                                    class="spinner-border spinner-border-sm ms-2 float-end mt-1 me-2" role="status"
                                    style="display: none;"></span>
                            </label>

                            <select name="shape" id="krfs_shape" class="form-control">
                                <?php
                                    if (!empty($productAttributes) && !is_wp_error($productAttributes)) {
                                        $curr_shape_attribute = $krfs_attributes_mapping['shape'] ?? '';

                                        foreach ($productAttributes as $attribute) {
                                            $selected = $curr_shape_attribute == $attribute->attribute_name ? 'selected' : '';
                                            echo '<option value="' . esc_attr($attribute->attribute_name) . '" ' . esc_attr($selected) . '>' . esc_html($attribute->attribute_label) . '</option>';
                                        }
                                    }
                                ?>
                            </select>
                        </div>

                        <div class="mb-4">
                            <h6 class="fw-bold">Terms:</h6>
                        </div>

                        <div class="row">
                            <?php
                                foreach ($shapeTerms as $shapeTerm) {
                                    echo '
                                        <div class="col-md-4 mb-4">
                                            <label for="krfs_' . esc_attr($shapeTerm['slug']) . '" class="form-label">
                                                ' . esc_html($shapeTerm['name']) . '
                                            </label>

                                            <select name="terms_' . esc_attr($shapeTerm['slug']) . '" id="krfs_' . esc_attr($shapeTerm['slug']) . '" class="krfs_shape_terms form-control">
                                                <option value="">Select Term</option>
                                            </select>
                                        </div>
                                    ';
                                }
                            ?>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Diamond Shape -->

        </div>

        <!-- Image Slider Section Start Here -->
        <div class="image-slider-wrapper">
            <div class="image-slider-header">
                <div class="slider-para">
                    <p>Preview</p>
                </div>
                <div class="krfs-arrow-container">
                    <div class="prev-arrow krfs-nav-arrow" data-target="basic-sectionn" data-action="prev">
                        <img src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/setting_tab/previous.svg" alt="">
                    </div>
                    <div class="next-arrow krfs-nav-arrow" data-target="basic-sectionn" data-action="next">
                        <img src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/setting_tab/next.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 ("Zoom-In"); ?>">
                <!-- Slider Image -->
                <div class="krfs_img_slides" data-id="basic-sectionn" data-active-index="0">
                    <img data-target="setting-tab-image" onclick="krfsOpenImageSidebar('setting')"
                        src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/setting_tab/advance_tab_slider/settings_preview_basic_1.png"
                        alt="">
                    <img data-target="setting-tab-image" onclick="krfsOpenImageSidebar('setting')"
                        src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/setting_tab/advance_tab_slider/settings_preview_basic_2.png"
                        alt="">
                    <img data-target="setting-tab-image" onclick="krfsOpenImageSidebar('setting')"
                        src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/setting_tab/advance_tab_slider/settings_preview_premium.png"
                        alt="">
                </div>


                <!-- Image Preview Sidebar -->
                <div id="krfs-setting-images" class="sidenav setting-slider">
                    <div class="krfs-close-slider">
                        <div class="cross-container">
                            <img onclick="krfscloseImageSidebar('setting')"
                                src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/cross-btn.svg" alt="">
                        </div>
                    </div>
                    <div id="krfs-setting-images-preview"></div>
                </div>
                <div id="krfs-setting-preview-image" class="krfs-preview-image" data-sidebar="setting">
                </div>
            </span>
        </div>
    </div>
</div>
