<?php
if (!defined('ABSPATH')) {
    exit;
}
$filterData = krfsapp_getMeta('_advance_filters_data');
// Decode the JSON string into a PHP array
$data = json_decode($filterData, true);
// Extract the shape attributes
$shapeAttributes = json_decode(krfsapp_getMeta('shape_attr_advance_filters'), true);
$metalAttributes = json_decode(krfsapp_getMeta('metal_attr_advance_filters'), true); 
$styleAttributes = json_decode(krfsapp_getMeta('style_attr_advance_filters'), true);
$sidestoneAttributes = json_decode(krfsapp_getMeta('side_stone_attr_advance_filters'), true);
$sectionSettings = json_decode(krfsapp_getMeta('_setting_section_controls'), true);
$wedMenAttributes = json_decode(krfsapp_getMeta('wed_men_attr_advance_filters'), true) ?? [];
$wedWomenAttributes = json_decode(krfsapp_getMeta('wed_women_attr_advance_filters'), true) ?? [];
$isBridalSetsEnabled = false;
$isHomePreviewEnabled = false;
//style attributes ordering
$order = array('Solitaire','Halo','Three-Stone','Pave','Vintage','Bypass', 'Fancy', 'Multi-Row','Trellis', 'Single-Row','Side Stone');
    usort($styleAttributes, function ($a, $b) use ( $order) {
        $aIndex = array_search($a['name'], $order);
        $bIndex = array_search($b['name'], $order);

        // Handle cases where array_search() returns false
        $aIndex = ($aIndex === false) ? PHP_INT_MAX : $aIndex;
        $bIndex = ($bIndex === false) ? PHP_INT_MAX : $bIndex;

        return $aIndex - $bIndex;
    });

$order = ['Natural', 'Lab', 'Ruby', 'Emerald', 'Blue Sapphire', 'Pink Sapphire', 'Amethyst', 'Morganite', 'Black Diamond', 'Yellow Sapphire', 'Citrine'];

// Convert the predefined order array to lowercase for case-insensitive comparison
$orderLowercase = array_map('strtolower', $order);

usort($sidestoneAttributes, function ($a, $b) use ( $orderLowercase) {
    $aIndex = array_search(strtolower($a['name']), $orderLowercase);
    $bIndex = array_search(strtolower($b['name']), $orderLowercase);

    // Handle cases where array_search() returns false
    $aIndex = ($aIndex === false) ? PHP_INT_MAX : $aIndex;
    $bIndex = ($bIndex === false) ? PHP_INT_MAX : $bIndex;

    return $aIndex - $bIndex;
});
?>

<div class="initial-section tab-pane fade <?php echo esc_attr($krfsapp_active_tab_config['advance-filter-tab'] ? 'show active' : ''); ?>"
    id="advance-filter-tab-pane" role="tabpanel" aria-labelledby="advance-filter-tab">
    <form action="" method="post" id="advance_filter_form" onsubmit="return validateForm();">
        <input type="hidden" id="engagement_ring_trigger" name="engagement_ring_trigger" value="">
        <div class="main-right-section setting-section mb-4">
            <div class="sticky-outer-section">
                <div class="main-heading-btn d-flex justify-between sticky-save">
                    <div class="">
                        <h2>Advanced Filters</h2>    
                    </div>
                    <button class="save-btn advance_filter_btn" type="submit" data-val="advanced">
                        Save
                    </button>
                </div>
            </div>

            <div class="right-section">
                <div class="year-tab-section initial-basic-tab mb-4">
                    <ul class=" nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="plan-btn active" id="advance-basic-tab" data-bs-toggle="tab"
                                data-bs-target="#advance-basic-tab-pane" type="button" role="tab"
                                aria-controls="advance-basic-tab-pane" aria-selected="true">
                                BASIC*
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="plan-btn" id="advance-more-option-tab" data-bs-toggle="tab"
                                data-bs-target="#advance-more-option-tab-pane" type="button" role="tab"
                                aria-controls="advance-more-option-tab-pane" aria-selected="false">
                                MORE OPTIONS
                            </button>
                        </li>
                    </ul>
                </div>

                <div class="month-section tab-pane fade show active " id="advance-basic-tab-pane" role="tabpanel"
                    aria-labelledby="advance-basic-tab">
                    <div class="d-md-flex">
                        <div class="krfs-collection-container">
                            <p class="krfs-advance-filter-para">Show/Hide Collections. Click &nbsp;<img
                                    src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/setting_tab/view.svg" />&nbsp;
                                to see respective tags that must be added.</p>
                            <div class="section-iteam krfs-section-item">
                                <div class="input choose-add-btn-div">
                                    <label class="heading">A. Engagement Listing Page
                                        <img class="UparrowIcon"
                                            src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/up-arrow.png"
                                            width="30px" height="" alt="">
                                    </label>
                                    <input type="hidden" class="stylefield" name="section_controls[eng_ring_styles]" value="<?php echo esc_attr($sectionSettings['eng_ring_styles'] ? 'on' : 'off'); ?>" />
                                </div>

                                <div class="krfs-card-toggle iteams style-iteams">
                                    <div class="krfs-dropdown-filter">
                                        <div class="krfs-filter-para">
                                            <p class="subheading-advance-filter">1. Ring styles &nbsp;<svg
                                                    id="view-engagement-ring-style" width="19" height="12"
                                                    viewBox="0 0 19 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M13.1634 7.32231C13.1634 5.20413 11.5301 3.47231 9.49763 3.47231C7.46516 3.47231 5.83184 5.20413 5.83184 7.32231C5.83184 9.44049 7.46516 11.1723 9.49763 11.1723C11.5301 11.1723 13.1634 9.44049 13.1634 7.32231ZM7.47592 7.32231C7.47592 6.13405 8.38898 5.18547 9.49763 5.18547C10.6063 5.18547 11.5193 6.13405 11.5193 7.32231C11.5193 8.51057 10.6063 9.45915 9.49763 9.45915C8.38898 9.45915 7.47592 8.51057 7.47592 7.32231ZM18.1474 7.339C17.1641 3.20416 13.617 0.244367 9.49763 0.244367C5.37648 0.244367 1.82826 3.2067 0.84668 7.34398C0.739678 7.79499 0.998321 8.26314 1.44353 8.38018C1.89225 8.49813 2.33509 8.20882 2.44269 7.75528C3.2464 4.36769 6.1475 1.95752 9.49763 1.95752C12.8463 1.95752 15.7465 4.36561 16.5516 7.7512C16.6594 8.20469 17.1024 8.49375 17.5511 8.37553C17.9962 8.25824 18.2546 7.78994 18.1474 7.339Z"
                                                        fill="#212121" stroke="--krfs-primary-color"
                                                        stroke-width="0.331579" />
                                                </svg>
                                            </p>
                                        </div>
                                        <div class="switch-container">
                                            <button type="button" role="switch"
                                                aria-checked="<?php echo esc_attr($sectionSettings['eng_ring_styles'] ? 'true' : 'false'); ?>"
                                                data-state="<?php echo esc_attr($sectionSettings['eng_ring_styles'] ? 'checked' : 'unchecked'); ?>"
                                                value="<?php echo esc_attr($sectionSettings['eng_ring_styles'] ? 'on' : 'off'); ?>"
                                                class="krfs-addon-toggle-switch" data-type="style">
                                                <span
                                                    data-state="<?php echo esc_attr($sectionSettings['eng_ring_styles'] ? 'checked' : 'unchecked'); ?>"
                                                    class="toggle-slider"></span>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="filter--iteams">
                                        <?php foreach ($styleAttributes as $style): ?>

                                            <div class="krfs-checkbox-container">
                                                <div
                                                    class="flex flex-col items-center <?php echo esc_attr($style['enabled'] == 'true' ? 'krfs-checkbox-active' : ''); ?>">
                                                    <!-- Checkbox for the style -->
                                                    <input class="krfs-checkbox" type="checkbox" 
                                                        id="<?php echo esc_attr(strtolower($style['slug'])); ?>"
                                                        name="style_attr[]" value="<?php echo esc_attr($style['slug']); ?>" 
                                                        <?php echo esc_attr($style['enabled'] == "true" ? 'checked' : ''); ?>>
                                                    <div class="gap-advance-info">
                                                        <!-- <label data-change="engagement-ring-style-text-change"
                                                            for="<?php echo esc_attr(strtolower($style['slug'])); ?>"
                                                            class="<?php echo isset($style['custom']) ? 'underline' : ''; ?>">
                                                           <span onclick="<?php echo isset($style['custom']) ? 'EngagementRingopenPanel(\'edit-collection\', \'' . esc_attr(addslashes($style['name'])) . '\', \'style_attr\',event)' : ''; ?>"> <?php echo esc_attr($style['name']); ?></span>
                                                        </label> -->
                                                        <label data-change="engagement-ring-style-text-change"
                                                            for="<?php echo esc_attr(strtolower($style['slug'])); ?>">
                                                            <span><?php echo esc_html($style['name']); ?></span>
                                                        </label>
                                                        <span data-value="engagement-ring-style-new-change"
                                                            class="ml-1 text-gray-500 font-normal text-xs advance-info-text"
                                                            style="display: none;margin-left:6px">style|<?php echo esc_attr(strtolower(str_replace(' ', '-', $style['name']))); ?>
                                                        </span>

                                                    </div>
                                                </div>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>


                                    <div class="section-iteam mb-4">
                                        <div class="input choose-add-btn-div">
                                            <input type="hidden" class="sidestonefield" name="section_controls[eng_ring_stones]" value="<?php echo esc_attr($sectionSettings['eng_ring_stones'] ? 'on' : 'off'); ?>">
                                        </div>

                                        <div class="krfs-dropdown-filter">
                                            <div class="krfs-filter-para">
                                                <p class="subheading-advance-filter">2. Ring Side Stones &nbsp;<svg
                                                        id="view-engagement-ring-side-stone" width="19" height="12"
                                                        viewBox="0 0 19 12" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M13.1634 7.32231C13.1634 5.20413 11.5301 3.47231 9.49763 3.47231C7.46516 3.47231 5.83184 5.20413 5.83184 7.32231C5.83184 9.44049 7.46516 11.1723 9.49763 11.1723C11.5301 11.1723 13.1634 9.44049 13.1634 7.32231ZM7.47592 7.32231C7.47592 6.13405 8.38898 5.18547 9.49763 5.18547C10.6063 5.18547 11.5193 6.13405 11.5193 7.32231C11.5193 8.51057 10.6063 9.45915 9.49763 9.45915C8.38898 9.45915 7.47592 8.51057 7.47592 7.32231ZM18.1474 7.339C17.1641 3.20416 13.617 0.244367 9.49763 0.244367C5.37648 0.244367 1.82826 3.2067 0.84668 7.34398C0.739678 7.79499 0.998321 8.26314 1.44353 8.38018C1.89225 8.49813 2.33509 8.20882 2.44269 7.75528C3.2464 4.36769 6.1475 1.95752 9.49763 1.95752C12.8463 1.95752 15.7465 4.36561 16.5516 7.7512C16.6594 8.20469 17.1024 8.49375 17.5511 8.37553C17.9962 8.25824 18.2546 7.78994 18.1474 7.339Z"
                                                            fill="#212121" stroke="--krfs-primary-color"
                                                            stroke-width="0.331579" />
                                                    </svg></p>
                                            </div>
                                            <div class="switch-container">
                                                <button type="button" role="switch"
                                                    aria-checked="<?php echo esc_attr($sectionSettings['eng_ring_stones'] ? 'true' : 'false'); ?>"
                                                    data-state="<?php echo esc_attr($sectionSettings['eng_ring_stones'] ? 'checked' : 'unchecked'); ?>"
                                                    value="<?php echo esc_attr($sectionSettings['eng_ring_stones'] ? 'on' : 'off'); ?>"
                                                    class="krfs-addon-toggle-switch" data-type="sidestone">
                                                    <span
                                                        data-state="<?php echo esc_attr($sectionSettings['eng_ring_stones'] ? 'checked' : 'unchecked'); ?>"
                                                        class="toggle-slider"></span>
                                                </button>
                                                </span>
                                            </div>
                                        </div>

                                        <div class="filter--iteams iteams style-iteams ">
                                            <?php foreach ($sidestoneAttributes as $stone): ?>

                                                <div class="krfs-checkbox-container">
                                                    <div
                                                        class="flex flex-col items-center <?php echo esc_attr($stone['enabled'] == 'true' ? 'krfs-checkbox-active' : ''); ?>">
                                                        <!-- Checkbox for the style -->
                                                        <input class="krfs-checkbox" type="checkbox"
                                                            id="<?php echo esc_attr(strtolower($stone['slug'])); ?>"
                                                            name="side_stone_attr[]" value="<?php echo esc_attr($stone['slug']); ?>"
                                                            <?php echo esc_attr($stone['enabled'] == "true" ? 'checked' : ''); ?>>
                                                        <div class="gap-advance-info">
                                                            <!-- <label data-change="engagement-ring-stone-text-change"
                                                                for="<?php echo esc_attr(strtolower($stone['slug'])); ?>"
                                                                class="<?php if (isset($stone['custom'])) {
                                                                    echo "underline";
                                                                } ?>"><img class="advance-img-margin"
                                                                    src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/stones/<?php echo esc_attr(strtolower(str_replace(' ', '_', $stone['name']))); ?>.png"
                                                                    width="20px"><?php echo esc_attr($stone['name']); ?></label> -->
                                                            <label data-change="engagement-ring-stone-text-change"
                                                                for="<?php echo esc_attr(strtolower($stone['slug'])); ?>"
                                                                class=""><img class="advance-img-margin"
                                                                    src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR . '/assets/stones/' . esc_attr(strtolower(str_replace(' ', '_', $stone['name']))) . '.png'); ?>"
                                                                    width="20px" alt="<?php echo esc_attr($stone['name']); ?>"><?php echo esc_attr($stone['name']); ?></label>

                                                            <span data-value="engagement-ring-stone-new-change"
                                                                class="ml-1 text-gray-500 font-normal text-xs advance-info-text"
                                                                style="display: none;margin-left:6px">style|<?php echo esc_attr(strtolower(str_replace(' ', '-', $stone['name']))); ?>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>

                                            <?php endforeach; ?>
                                        </div>

                                        <p class="add-btn-text"></p>
                                    </div>

                                </div>
                                <p class="add-btn-text"></p>
                            </div>

                            <div class="section-iteam krfs-section-item">
                                <div class="input choose-add-btn-div">
                                    <label class="heading">B. Wedding Listing Page - Men<img class="UparrowIcon"
                                            src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/up-arrow.png"
                                            width="30px" height="" alt="">
                                    </label>
                                    <input type="hidden" class="wedmenfield" name="section_controls[wed_men_ring_styles]" value="<?php echo esc_attr($sectionSettings['wed_men_ring_styles'] ? 'on' : 'off'); ?>">
                                </div>

                                <div class="krfs-card-toggle iteams">
                                    <div class="krfs-dropdown-filter">
                                        <div class="krfs-filter-para">
                                            <p class="subheading-advance-filter">1. Ring styles &nbsp;<svg
                                                    id="wedding-ring-men-ring-style" width="19" height="12"
                                                    viewBox="0 0 19 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M13.1634 7.32231C13.1634 5.20413 11.5301 3.47231 9.49763 3.47231C7.46516 3.47231 5.83184 5.20413 5.83184 7.32231C5.83184 9.44049 7.46516 11.1723 9.49763 11.1723C11.5301 11.1723 13.1634 9.44049 13.1634 7.32231ZM7.47592 7.32231C7.47592 6.13405 8.38898 5.18547 9.49763 5.18547C10.6063 5.18547 11.5193 6.13405 11.5193 7.32231C11.5193 8.51057 10.6063 9.45915 9.49763 9.45915C8.38898 9.45915 7.47592 8.51057 7.47592 7.32231ZM18.1474 7.339C17.1641 3.20416 13.617 0.244367 9.49763 0.244367C5.37648 0.244367 1.82826 3.2067 0.84668 7.34398C0.739678 7.79499 0.998321 8.26314 1.44353 8.38018C1.89225 8.49813 2.33509 8.20882 2.44269 7.75528C3.2464 4.36769 6.1475 1.95752 9.49763 1.95752C12.8463 1.95752 15.7465 4.36561 16.5516 7.7512C16.6594 8.20469 17.1024 8.49375 17.5511 8.37553C17.9962 8.25824 18.2546 7.78994 18.1474 7.339Z"
                                                        fill="#212121" stroke="--krfs-primary-color"
                                                        stroke-width="0.331579" />
                                                </svg></p>
                                        </div>
                                        <div class="switch-container">
                                            <button type="button" role="switch"
                                                aria-checked="<?php echo esc_attr($sectionSettings['wed_men_ring_styles'] ? 'true' : 'false'); ?>"
                                                data-state="<?php echo esc_attr($sectionSettings['wed_men_ring_styles'] ? 'checked' : 'unchecked'); ?>"
                                                value="<?php echo  esc_attr($sectionSettings['wed_men_ring_styles'] ? 'on' : 'off'); ?>"
                                                class="krfs-addon-toggle-switch" data-type="wedmen">
                                                <span
                                                    data-state="<?php echo  esc_attr($sectionSettings['wed_men_ring_styles'] ? 'checked' : 'unchecked'); ?>"
                                                    class="toggle-slider"></span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="filter--iteams ">
                                        <?php foreach ($wedMenAttributes as $Men): ?>

                                            <div class="krfs-checkbox-container">
                                                <div
                                                    class="flex flex-col items-center <?php echo esc_attr($Men['enabled'] == 'true' ? 'krfs-checkbox-active' : ''); ?>">
                                                    <!-- Checkbox for the style -->
                                                    <input class="krfs-checkbox" type="checkbox"
                                                        id="<?php echo esc_attr(strtolower($Men['slug'])); ?>"
                                                        name="wed_men_attr[]" value="<?php echo esc_attr($Men['slug']); ?>" <?php echo esc_attr($Men['enabled'] == "true" ? 'checked' : ''); ?>>
                                                    <div class="gap-advance-info">
                                                        <!-- <label data-change="wedding-ring-men-text-change"
                                                            for="<?php echo esc_attr(strtolower($Men['slug'])); ?>"
                                                            class="<?php echo isset($Men['custom']) ? 'underline' : ''; ?>">
                                                            <span onclick="<?php echo isset($Men['custom']) ? 'EngagementRingopenPanel(\'edit-collection\', \'' . esc_attr(addslashes($Men['name'])) . '\', \'wed_men_attr\',event)' : ''; ?>"> <?php echo esc_attr($Men['name']); ?> </span>
                                                        </label> -->
                                                        <label data-change="wedding-ring-men-text-change"
                                                            for="<?php echo esc_attr(strtolower($Men['slug'])); ?>"
                                                            class="">
                                                            <span><?php echo esc_attr($Men['name']); ?></span>
                                                        </label>
                                                        <span data-value="wedding-ring-men-new-change"
                                                            class="ml-1 text-gray-500 font-normal text-xs advance-info-text"
                                                            style="display: none;margin-left:6px">style|<?php echo esc_attr(strtolower(str_replace(' ', '-', $Men['name']))); ?></span>
                                                    </div>
                                                </div>
                                            </div>

                                        <?php endforeach; ?>
                                    </div>

                                </div>
                                <p class="add-btn-text"></p>
                            </div>


                            <div class="section-iteam krfs-section-item">
                                <div class="input choose-add-btn-div">
                                    <label class="heading">
                                        C. Wedding Listing Page - Women<img class="UparrowIcon"
                                            src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/up-arrow.png"
                                            width="30px" height="" alt="">
                                    </label>
                                    <input type="hidden" class="wedwomenfield" name="section_controls[wed_women_ring_styles]" value="<?php echo esc_attr($sectionSettings['wed_women_ring_styles'] ? 'on' : 'off'); ?>">
                                </div>

                                <div class="krfs-card-toggle iteams">
                                    <div class="krfs-dropdown-filter">
                                        <div class="krfs-filter-para">
                                            <p class="subheading-advance-filter">1. Ring styles &nbsp;<svg
                                                    id="wedding-ring-women-ring-style" width="19" height="12"
                                                    viewBox="0 0 19 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M13.1634 7.32231C13.1634 5.20413 11.5301 3.47231 9.49763 3.47231C7.46516 3.47231 5.83184 5.20413 5.83184 7.32231C5.83184 9.44049 7.46516 11.1723 9.49763 11.1723C11.5301 11.1723 13.1634 9.44049 13.1634 7.32231ZM7.47592 7.32231C7.47592 6.13405 8.38898 5.18547 9.49763 5.18547C10.6063 5.18547 11.5193 6.13405 11.5193 7.32231C11.5193 8.51057 10.6063 9.45915 9.49763 9.45915C8.38898 9.45915 7.47592 8.51057 7.47592 7.32231ZM18.1474 7.339C17.1641 3.20416 13.617 0.244367 9.49763 0.244367C5.37648 0.244367 1.82826 3.2067 0.84668 7.34398C0.739678 7.79499 0.998321 8.26314 1.44353 8.38018C1.89225 8.49813 2.33509 8.20882 2.44269 7.75528C3.2464 4.36769 6.1475 1.95752 9.49763 1.95752C12.8463 1.95752 15.7465 4.36561 16.5516 7.7512C16.6594 8.20469 17.1024 8.49375 17.5511 8.37553C17.9962 8.25824 18.2546 7.78994 18.1474 7.339Z"
                                                        fill="#212121" stroke="--krfs-primary-color"
                                                        stroke-width="0.331579" />
                                                </svg></p>
                                        </div>
                                        <div class="switch-container">
                                            <button type="button" role="switch"
                                                aria-checked="<?php echo esc_attr($sectionSettings['wed_women_ring_styles'] ? 'true' : 'false'); ?>"
                                                data-state="<?php echo esc_attr($sectionSettings['wed_women_ring_styles'] ? 'checked' : 'unchecked'); ?>"
                                                value="<?php echo esc_attr($sectionSettings['wed_women_ring_styles'] ? 'on' : 'off'); ?>"
                                                class="krfs-addon-toggle-switch" data-type="wedwomen">
                                                <span
                                                    data-state="<?php echo esc_attr($sectionSettings['wed_women_ring_styles'] ? 'checked' : 'unchecked'); ?>"
                                                    class="toggle-slider"></span>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="filter--iteams">
                                        <?php foreach ($wedWomenAttributes as $Women): ?>

                                            <div class="krfs-checkbox-container">
                                                <div
                                                    class="flex flex-col items-center <?php echo esc_attr($Women['enabled'] == 'true' ? 'krfs-checkbox-active' : ''); ?>">
                                                    <!-- Checkbox for the style -->
                                                    <input class="krfs-checkbox" type="checkbox"
                                                        id="<?php echo esc_attr(strtolower($Women['slug'])); ?>"
                                                        name="wed_women_attr[]" value="<?php echo esc_attr($Women['slug']); ?>" <?php echo esc_attr($Women['enabled'] == "true" ? 'checked' : ''); ?>>
                                                    <div class="gap-advance-info">
                                                        <!-- <label data-change="wedding-ring-women-text-change"
                                                            for="<?php echo esc_attr(strtolower($Women['slug'])); ?>"
                                                            >
                                                            <span onclick="<?php echo isset($Women['custom']) ? 'EngagementRingopenPanel(\'edit-collection\', \'' . esc_attr(addslashes($Women['name'])) . '\', \'wed_women_attr\',event)' : ''; ?>"
                                                            class="<?php echo isset($Women['custom']) ? 'underline' : ''; ?>"><?php echo esc_attr($Women['name']); ?></span> -->
                                                        <label data-change="wedding-ring-women-text-change"
                                                            for="<?php echo esc_attr(strtolower($Women['slug'])); ?>"
                                                            >
                                                            <span><?php echo esc_attr($Women['name']); ?></span>
                                                        </label>
                                                        <span data-value="wedding-ring-women-new-change"
                                                            class="ml-1 text-gray-500 font-normal text-xs advance-info-text"
                                                            style="display: none;margin-left:6px">style|<?php echo esc_attr(strtolower(str_replace(' ', '-', $Women['name']))); ?></span>
                                                    </div>
                                                </div>
                                            </div>

                                        <?php endforeach; ?>
                                    </div>
                                </div>

                                <p class="add-btn-text"></p>
                            </div>


                            <div class="section-iteam mb-4">
                                <div class="input choose-add-btn-div">
                                    <label class="heading">
                                        D. Common <img class="UparrowIcon"
                                            src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/up-arrow.png"
                                            width="30px" height="" alt="">
                                    </label>
                                    <input type="hidden" class="metalfield" name="section_controls[metal]" value="<?php echo esc_attr($sectionSettings['metal'] ? 'on' : 'off'); ?>">
                                </div>

                                <div class="krfs-card-toggle iteams style-iteams">

                                    <div class="krfs-dropdown-filter">
                                        <div class="krfs-filter-para">
                                            <p class="subheading-advance-filter">1. Metal Type &nbsp;<svg
                                                    id="common-metal-type" width="19" height="12" viewBox="0 0 19 12"
                                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M13.1634 7.32231C13.1634 5.20413 11.5301 3.47231 9.49763 3.47231C7.46516 3.47231 5.83184 5.20413 5.83184 7.32231C5.83184 9.44049 7.46516 11.1723 9.49763 11.1723C11.5301 11.1723 13.1634 9.44049 13.1634 7.32231ZM7.47592 7.32231C7.47592 6.13405 8.38898 5.18547 9.49763 5.18547C10.6063 5.18547 11.5193 6.13405 11.5193 7.32231C11.5193 8.51057 10.6063 9.45915 9.49763 9.45915C8.38898 9.45915 7.47592 8.51057 7.47592 7.32231ZM18.1474 7.339C17.1641 3.20416 13.617 0.244367 9.49763 0.244367C5.37648 0.244367 1.82826 3.2067 0.84668 7.34398C0.739678 7.79499 0.998321 8.26314 1.44353 8.38018C1.89225 8.49813 2.33509 8.20882 2.44269 7.75528C3.2464 4.36769 6.1475 1.95752 9.49763 1.95752C12.8463 1.95752 15.7465 4.36561 16.5516 7.7512C16.6594 8.20469 17.1024 8.49375 17.5511 8.37553C17.9962 8.25824 18.2546 7.78994 18.1474 7.339Z"
                                                        fill="#212121" stroke="--krfs-primary-color"
                                                        stroke-width="0.331579" />
                                                </svg></p>
                                        </div>
                                        <div class="switch-container">
                                            <button type="button" role="switch"
                                                aria-checked="<?php echo esc_attr($sectionSettings['metal'] ? 'true' : 'false'); ?>"
                                                data-state="<?php echo esc_attr($sectionSettings['metal'] ? 'checked' : 'unchecked'); ?>"
                                                value="<?php echo esc_attr($sectionSettings['metal'] ? 'on' : 'off'); ?>"
                                                class="krfs-addon-toggle-switch" data-type="metal">
                                                <span
                                                    data-state="<?php echo esc_attr($sectionSettings['metal'] ? 'checked' : 'unchecked'); ?>"
                                                    class="toggle-slider"></span>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="filter--iteams">
                                        <?php foreach ($metalAttributes as $metal): ?>

                                            <div class="krfs-checkbox-container">
                                                <div
                                                    class="flex flex-col items-center <?php echo esc_attr($metal['enabled'] == 'true' ? 'krfs-checkbox-active' : ''); ?>">
                                                    <!-- Checkbox for the style -->
                                                    <input class="krfs-checkbox" type="checkbox"
                                                        id="<?php echo esc_attr(strtolower($metal['slug'])); ?>"
                                                        name="metal_attr[]" value="<?php echo esc_attr($metal['slug']); ?>" <?php echo esc_attr($metal['enabled'] == "true" ? 'checked' : ''); ?>>
                                                    <div class="gap-advance-info">
                                                        <label data-change="common-metal-type-text-change"
                                                            for="<?php echo esc_attr(strtolower($metal['slug'])); ?>" class=""><?php echo esc_attr($metal['name']); ?></label>
                                                        <span data-value="common-metal-type-new-change"
                                                            class="ml-1 text-gray-500 font-normal text-xs advance-info-text"
                                                            style="display: none;margin-left:6px">metal|<?php echo esc_attr(strtolower(str_replace(' ', '-', $metal['name']))); ?></span>
                                                    </div>
                                                </div>
                                            </div>

                                        <?php endforeach; ?>
                                    </div>

                                    <div class="section-iteam mb-4">
                                        <div class="input choose-add-btn-div">
                                            <input type="hidden" class="shapefield" name="section_controls[diamond_shapes]" value="<?php echo esc_attr($sectionSettings['diamond_shapes'] ? 'on' : 'off'); ?>">
                                        </div>

                                        <div class="krfs-card-toggle iteams style-iteams">
                                            <div class="krfs-dropdown-filter">
                                                <div class="krfs-filter-para">
                                                    <p class="subheading-advance-filter">2. Diamond Shapes&nbsp;<svg
                                                            id="common-diamond-shape" width="19" height="12"
                                                            viewBox="0 0 19 12" fill="none"
                                                            xmlns="http://www.w3.org/2000/svg">
                                                            <path
                                                                d="M13.1634 7.32231C13.1634 5.20413 11.5301 3.47231 9.49763 3.47231C7.46516 3.47231 5.83184 5.20413 5.83184 7.32231C5.83184 9.44049 7.46516 11.1723 9.49763 11.1723C11.5301 11.1723 13.1634 9.44049 13.1634 7.32231ZM7.47592 7.32231C7.47592 6.13405 8.38898 5.18547 9.49763 5.18547C10.6063 5.18547 11.5193 6.13405 11.5193 7.32231C11.5193 8.51057 10.6063 9.45915 9.49763 9.45915C8.38898 9.45915 7.47592 8.51057 7.47592 7.32231ZM18.1474 7.339C17.1641 3.20416 13.617 0.244367 9.49763 0.244367C5.37648 0.244367 1.82826 3.2067 0.84668 7.34398C0.739678 7.79499 0.998321 8.26314 1.44353 8.38018C1.89225 8.49813 2.33509 8.20882 2.44269 7.75528C3.2464 4.36769 6.1475 1.95752 9.49763 1.95752C12.8463 1.95752 15.7465 4.36561 16.5516 7.7512C16.6594 8.20469 17.1024 8.49375 17.5511 8.37553C17.9962 8.25824 18.2546 7.78994 18.1474 7.339Z"
                                                                fill="#212121" stroke="--krfs-primary-color"
                                                                stroke-width="0.331579" />
                                                        </svg></p>
                                                </div>
                                                <div class="switch-container">
                                                    <button type="button" role="switch"
                                                        aria-checked="<?php echo esc_attr($sectionSettings['diamond_shapes'] ? 'true' : 'false'); ?>"
                                                        data-state="<?php echo esc_attr($sectionSettings['diamond_shapes'] ? 'checked' : 'unchecked'); ?>"
                                                        value="<?php echo$sectionSettings['diamond_shapes'] ? 'on' : 'off'; ?>"
                                                        class="krfs-addon-toggle-switch" data-type="shape">
                                                        <span
                                                            data-state="<?php echo esc_attr($sectionSettings['diamond_shapes'] ? 'checked' : 'unchecked'); ?>"
                                                            class="toggle-slider"></span>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="filter--iteams">
                                                <?php foreach ($shapeAttributes as $shape): ?>

                                                    <div class="krfs-checkbox-container">
                                                        <div
                                                            class="flex flex-col items-center <?php echo esc_attr($shape['enabled'] == 'true' ? 'krfs-checkbox-active' : ''); ?>">
                                                            <!-- Checkbox for the style -->
                                                            <input class="krfs-checkbox" type="checkbox"
                                                                id="<?php echo esc_attr(strtolower($shape['slug'])); ?>"
                                                                name="shape_attr[]" value="<?php echo esc_attr($shape['slug']); ?>"
                                                                <?php echo esc_attr($shape['enabled'] == "true" ? 'checked' : ''); ?>>
                                                            <div class="gap-advance-info">
                                                                <!-- <label data-change="common-diamond-shape-text-change"
                                                                    for="<?php echo esc_attr(strtolower($shape['slug'])); ?>"
                                                                    class="<?php if (isset($shape['custom'])) {
                                                                        echo "underline";
                                                                    } ?>"><img class="advance-img-margin"
                                                                        src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/shapes/<?php echo esc_attr(strtolower($shape['name'])); ?>.webp"
                                                                        width="20px"><?php echo esc_attr($shape['name']); ?></label> -->
                                                                <label data-change="common-diamond-shape-text-change"
                                                                    for="<?php echo esc_attr(strtolower($shape['slug'])); ?>"
                                                                    class=""><img class="advance-img-margin"
                                                                        src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/shapes/<?php echo esc_attr(strtolower($shape['name'])); ?>.webp"
                                                                        width="20px" alt="<?php echo esc_attr($shape['name']); ?>"><?php echo esc_attr($shape['name']); ?></label>
                                                                <span data-value="common-diamond-shape-new-change"
                                                                    class="ml-1 text-gray-500 font-normal text-xs advance-info-text"
                                                                    style="display: none;margin-left:6px">shape|<?php echo esc_attr(strtolower(str_replace(' ', '-', $shape['name']))); ?></span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                <?php endforeach; ?>
                                            </div>
                                        </div>

                                        <p class="add-btn-text"></p>
                                    </div>
                                </div>

                                <p class="add-btn-text"></p>
                            </div>

                        </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" style="align-items: unset;">
                                    <div class="prev-arrow krfs-nav-arrow" data-target="advance-filterBasic-section"
                                        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="advance-filterBasic-section"
                                        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="advance-filterBasic-section"
                                    data-active-index="0">
                                    <img data-target="filterBasic-tab-image"
                                    onclick="krfsOpenImageSidebar('filterBasic')"
                                    src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/setting_tab/advance_tab_slider/adv-basic-1.png"
                                    alt="">
                                    <img data-target="filterBasic-tab-image"
                                    onclick="krfsOpenImageSidebar('filterBasic')"
                                    src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/setting_tab/advance_tab_slider/adv-basic-2.png"
                                    alt="">
                                    <img data-target="filterBasic-tab-image"
                                        onclick="krfsOpenImageSidebar('filterBasic')"
                                        src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/setting_tab/advance_tab_slider/adv-basic-3.png"
                                    alt="">
                                    <img data-target="filterBasic-tab-image"
                                        onclick="krfsOpenImageSidebar('filterBasic')"
                                        src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/setting_tab/advance_tab_slider/adv-basic-4.png"
                                    alt="">
                                </div>

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

                <div class="month-section tab-pane fade" id="advance-more-option-tab-pane" role="tabpanel"
                    aria-labelledby="advance-more-option-tab">
                    <div class="d-md-flex">
                        <div class="krfs-more-option-left-section">
                            <div class="krfs-collection-container">
                                <p class="krfs-advance-filter-para">Show/Hide Collections. Click &nbsp;<img
                                        src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/setting_tab/view.svg" />&nbsp;
                                    to see respective tags that must be added.</p>

                                <div class="input choose-add-btn-div">
                                    <label class="heading">A. Engagement Listing Page </label>
                                </div>

                                <div class="krfs-dropdown-filter more-option-btn-txt">
                                    <div class="krfs-filter-para krfs-moreOption-tab">
                                        <p class="subheading-advance-filter">1. Bridal Sets &nbsp;<svg id="bridal-sets"
                                                width="19" height="12" viewBox="0 0 19 12" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M13.1634 7.32231C13.1634 5.20413 11.5301 3.47231 9.49763 3.47231C7.46516 3.47231 5.83184 5.20413 5.83184 7.32231C5.83184 9.44049 7.46516 11.1723 9.49763 11.1723C11.5301 11.1723 13.1634 9.44049 13.1634 7.32231ZM7.47592 7.32231C7.47592 6.13405 8.38898 5.18547 9.49763 5.18547C10.6063 5.18547 11.5193 6.13405 11.5193 7.32231C11.5193 8.51057 10.6063 9.45915 9.49763 9.45915C8.38898 9.45915 7.47592 8.51057 7.47592 7.32231ZM18.1474 7.339C17.1641 3.20416 13.617 0.244367 9.49763 0.244367C5.37648 0.244367 1.82826 3.2067 0.84668 7.34398C0.739678 7.79499 0.998321 8.26314 1.44353 8.38018C1.89225 8.49813 2.33509 8.20882 2.44269 7.75528C3.2464 4.36769 6.1475 1.95752 9.49763 1.95752C12.8463 1.95752 15.7465 4.36561 16.5516 7.7512C16.6594 8.20469 17.1024 8.49375 17.5511 8.37553C17.9962 8.25824 18.2546 7.78994 18.1474 7.339Z"
                                                    fill="#212121" stroke="--krfs-primary-color"
                                                    stroke-width="0.331579" />
                                            </svg></p>
                                        <span id="bridal-sets-new-change"
                                            class="ml-1 text-gray-500 font-normal text-xs advance-info-text"
                                            style="display: none;">bridalsets
                                        </span>
                                    </div>


                                    <div class="switch-container">
                                        <button type="button" role="switch"
                                            aria-checked="<?php echo esc_attr($sectionSettings['bridal_sets'] ? 'true' : 'false'); ?>"
                                            data-state="<?php echo esc_attr($sectionSettings['bridal_sets'] ? 'checked' : 'unchecked'); ?>"
                                            value="<?php echo esc_attr($sectionSettings['bridal_sets'] ? 'on' : 'off'); ?>"
                                            class="krfs-addon-toggle-switch" data-type="bridalset">
                                            <span
                                                data-state="<?php echo esc_attr($sectionSettings['bridal_sets'] ? 'checked' : 'unchecked'); ?>"
                                                class="toggle-slider"></span>
                                        </button>
                                        <input type="hidden" class="bridalSetsfield" name="section_controls[bridal_sets]" value="<?php echo esc_attr($sectionSettings['bridal_sets'] ? 'on' : 'off'); ?>">
                                    </div>
                                </div>

                                <div class="krfs-dropdown-filter more-option-btn-txt">
                                    <div class="krfs-filter-para krfs-moreOption-tab">
                                        <p class="subheading-advance-filter">2. Available for home preview &nbsp;<svg
                                                id="home-preview" width="19" height="12" viewBox="0 0 19 12" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M13.1634 7.32231C13.1634 5.20413 11.5301 3.47231 9.49763 3.47231C7.46516 3.47231 5.83184 5.20413 5.83184 7.32231C5.83184 9.44049 7.46516 11.1723 9.49763 11.1723C11.5301 11.1723 13.1634 9.44049 13.1634 7.32231ZM7.47592 7.32231C7.47592 6.13405 8.38898 5.18547 9.49763 5.18547C10.6063 5.18547 11.5193 6.13405 11.5193 7.32231C11.5193 8.51057 10.6063 9.45915 9.49763 9.45915C8.38898 9.45915 7.47592 8.51057 7.47592 7.32231ZM18.1474 7.339C17.1641 3.20416 13.617 0.244367 9.49763 0.244367C5.37648 0.244367 1.82826 3.2067 0.84668 7.34398C0.739678 7.79499 0.998321 8.26314 1.44353 8.38018C1.89225 8.49813 2.33509 8.20882 2.44269 7.75528C3.2464 4.36769 6.1475 1.95752 9.49763 1.95752C12.8463 1.95752 15.7465 4.36561 16.5516 7.7512C16.6594 8.20469 17.1024 8.49375 17.5511 8.37553C17.9962 8.25824 18.2546 7.78994 18.1474 7.339Z"
                                                    fill="#212121" stroke="--krfs-primary-color"
                                                    stroke-width="0.331579" />
                                            </svg></p>
                                        <span id="home-preview-new-change"
                                            class="ml-1 text-gray-500 font-normal text-xs advance-info-text"
                                            style="display: none;">homepreview
                                        </span>
                                    </div>

                                    <div class="switch-container">
                                        <button type="button" role="switch"
                                            aria-checked="<?php echo esc_attr($sectionSettings['home_preview'] ? 'true' : 'false'); ?>"
                                            data-state="<?php echo esc_attr($sectionSettings['home_preview'] ? 'checked' : 'unchecked'); ?>"
                                            value="<?php echo esc_attr($sectionSettings['home_preview'] ? 'on' : 'off'); ?>"
                                            class="krfs-addon-toggle-switch" data-type="homepreview">
                                            <span
                                                data-state="<?php echo esc_attr($sectionSettings['home_preview'] ? 'checked' : 'unchecked'); ?>"
                                                class="toggle-slider"></span>
                                        </button>
                                        <input type="hidden" class="homepreviewfield" name="section_controls[home_preview]" value="<?php echo esc_attr($sectionSettings['home_preview'] ? 'on' : 'off'); ?>">
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="krfs-more-option-right-section">
                            <div class="image-slider-wrapper">
                                <div class="image-slider-header">
                                    <div class="slider-para">
                                        <p>Preview</p>
                                    </div>

                                    <div class="krfs-arrow-container" style="align-items: unset;">
                                        <div class="prev-arr krfs-nav-arrow" data-target="advance-filterMore-section"
                                            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="advance-filterMore-section"
                                            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="advance-filterMore-section"
                                        data-active-index="0">
                                        <img data-target="filterMore-tab-image"
                                            onclick="krfsOpenImageSidebar('filterMore')"
                                            src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/setting_tab/advance_tab_slider/adv-premium-1.png"
                                            alt="">
                                        <img data-target="filterMore-tab-image"
                                        onclick="krfsOpenImageSidebar('filterMore')"
                                        src="<?php echo esc_url(KRFSAPP_PLUGIN_DIR) ?>/assets/images/setting_tab/advance_tab_slider/adv-premium-2.png"
                                        alt="">
                                    </div>

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