tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/StaticPages/Filter/Filter.jsx

@@ -0,0 +1,2771 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemButton, AccordionItemPanel, AccordionItemState } from 'react-accessible-accordion';
+import filterstyles from '../../../styles/staticpages/filter.module.css';
+import { css } from 'glamor';
+import Dropdown from 'react-bootstrap/Dropdown';
+import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
+import { FiChevronDown } from '@react-icons/all-files/fi/FiChevronDown';
+import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
+import { Offcanvas } from 'react-bootstrap';
+import InputRange from 'react-input-range';
+import { Imagekitimagecomp } from '../../../Imagekitconfig.jsx';
+import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu';
+import { defaultstyles, defaultstylestranslated, selectcustomStyles, selectcustomStylesTranslated } from '../../../StylesJS/Customstyles.js';
+import { CircularProgress, Messaging } from 'react-cssfx-loading';
+import formstyles from '../../../styles/general/form.module.css';
+import { BsChevronLeft } from '@react-icons/all-files/bs/BsChevronLeft';
+import { BsChevronRight } from '@react-icons/all-files/bs/BsChevronRight';
+const Select = React.lazy(() => import('react-select'));
+
+const Filter = (props) => {
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const productfiltercontext = props.actions.productfiltercontext;
+    const setproductfiltercontext = props.actions.setproductfiltercontext;
+    const ProductFilterObjContext = props.actions.ProductFilterObjContext;
+    const setProductFilterObjContext = props.actions.setProductFilterObjContext;
+    const authdetailsContext = props.actions.authdetailsContext;
+    const fetchproductoptionsQueryContext = props.actions.fetchproductoptionsQueryContext;
+    const fetchCategoriesQueryContext = props.actions.fetchCategoriesQueryContext;
+    const routingcountext = props.actions.routingcountext;
+    const fetchcollectionsQueryContext = props.actions.fetchcollectionsQueryContext;
+    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+    const ikimagecredcontext = props.actions.ikimagecredcontext;
+    const [pricevalue, setpricevalue] = useState({ min: 0, max: 10000 });
+    const [productfeatuesarr, setproductfeatuesarr] = useState([]);
+
+    const fetchTabexCountriesQueryContext = props.actions.fetchTabexCountriesQueryContext;
+    const FetchQueriesEngineContext = props.actions.FetchQueriesEngineContext;
+    const setFetchQueriesEngineContext = props.actions.setFetchQueriesEngineContext;
+
+    const fetchTabexCitiesQueryContext = props.actions.fetchTabexCitiesQueryContext;
+    const fetchTabexStatesQueryContext = props.actions.fetchTabexStatesQueryContext;
+    const FetchTabexStatesPayloadobjContext = props.actions.FetchTabexStatesPayloadobjContext;
+    const setFetchTabexStatesPayloadobjContext = props.actions.setFetchTabexStatesPayloadobjContext;
+    const fetchProductFeaturesQueryContext = props.actions.fetchProductFeaturesQueryContext;
+
+    const [sectionproperties, setsectionproperties] = useState('');
+    // const [instfilters, setinstfilters] = useState([...authdetailsContext.instinfo.instfilters]);
+    const [instfilters, setinstfilters] = useState([]);
+    const [collectionstobevisible, setcollectionstobevisible] = useState([]);
+    const [instcollections, setinstcollections] = useState([]);
+    const [instcategories, setinstcategories] = useState([]);
+    // const [sortby, setSortby] = useState('Sort by');
+    const [raterangevalue, setraterangevalue] = useState({ min: 0, max: 5 });
+    const timeoutRef = React.useRef(null);
+    const [sortbycontext, setsortbycontext] = useState('');
+
+    const [otherfilters, setotherfilters] = useState([
+        {
+            payloadvalue: 'sortprice',
+            name: lang.price,
+            filterarray: [
+                { name: lang.pricelowtohigh, value: 'lowtohigh', isfilterselected: false },
+                { name: lang.pricehightolow, value: 'hightolow', isfilterselected: false },
+            ],
+        },
+        {
+            payloadvalue: 'sortdates',
+
+            name: lang.dates,
+            filterarray: [
+                { name: lang.recent, value: 'recent', isfilterselected: false },
+                { name: lang.oldest, value: 'old', isfilterselected: false },
+            ],
+        },
+    ]);
+    useEffect(() => {
+        filterupdater();
+    }, []);
+    useEffect(() => {
+        if (fetchproductoptionsQueryContext.isSuccess) {
+            setinstfilters([...fetchproductoptionsQueryContext?.data?.data?.productoptions]);
+        }
+    }, [fetchproductoptionsQueryContext.isSuccess]);
+    useEffect(() => {
+        if (fetchCategoriesQueryContext.isSuccess) {
+            setinstcategories([...fetchCategoriesQueryContext?.data?.data?.categories]);
+        }
+    }, [fetchCategoriesQueryContext.isSuccess]);
+    useEffect(() => {
+        if (fetchcollectionsQueryContext.isSuccess) {
+            setinstcollections([...fetchcollectionsQueryContext?.data?.data?.collections]);
+        }
+    }, [fetchcollectionsQueryContext.isSuccess]);
+    // useEffect(() => {
+    //     // setinstfilters([...authdetailsContext.instinfo.instfilters]);
+    //     // setinstcollections([...authdetailsContext.instinfo.instcollections]);
+    //     // setinstcategories([...authdetailsContext?.instinfo?.instcategories]);
+    // }, [authdetailsContext]);
+    useEffect(() => {
+        if (props.sectionpropertiesprops != undefined && props.sectionpropertiesprops.length != 0) {
+            setsectionproperties(props.sectionpropertiesprops);
+        }
+    }, [props.sectionpropertiesprops]);
+    useEffect(() => {
+        filterupdater();
+    }, [ProductFilterObjContext]);
+    React.useEffect(() => {
+        if (timeoutRef.current !== null) {
+            clearTimeout(timeoutRef.current);
+        }
+
+        timeoutRef.current = setTimeout(() => {
+            if (raterangevalue.min != 0 || raterangevalue.max != 5) {
+                var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                tempfetchproductsfilerobjcontext.minrate = raterangevalue.min;
+                tempfetchproductsfilerobjcontext.maxrate = raterangevalue.max;
+                tempfetchproductsfilerobjcontext.page = 0;
+                setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+                // routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)));
+            }
+        }, 500);
+    }, [raterangevalue]);
+    useEffect(() => {
+        if (fetchCategoriesQueryContext.isSuccess && fetchcollectionsQueryContext.isSuccess && instcategories.length != 0) {
+            var parentcollections_for_collectionsFilter = null;
+            var IsValid_parentcollections_for_collectionsFilter = false;
+            if (
+                ProductFilterObjContext.parentcollections_for_collectionsFilter != undefined &&
+                ProductFilterObjContext.parentcollections_for_collectionsFilter != null &&
+                Array.isArray(ProductFilterObjContext.parentcollections_for_collectionsFilter)
+            ) {
+                parentcollections_for_collectionsFilter = ProductFilterObjContext.parentcollections_for_collectionsFilter;
+            }
+            if (parentcollections_for_collectionsFilter != null && Array.isArray(parentcollections_for_collectionsFilter) && parentcollections_for_collectionsFilter.length != 0) {
+                // parentcollections_for_collectionsFilter?.forEach(function(item,index){
+                //     if(item.)
+                // })
+                IsValid_parentcollections_for_collectionsFilter = true;
+            }
+            if (sectionproperties?.filterretreivetype != 'Depend on chosen parent group') {
+                if (ProductFilterObjContext?.collections != undefined && ProductFilterObjContext?.collections != null && Array.isArray(ProductFilterObjContext?.collections)) {
+                    var collectiontobevisible = [];
+                    var parentidsfound = [];
+                    if (ProductFilterObjContext.ProductFetchingType == 'Parent Collection' || IsValid_parentcollections_for_collectionsFilter == true) {
+                        if (parentcollections_for_collectionsFilter != null) {
+                            parentidsfound = parentcollections_for_collectionsFilter;
+                        } else {
+                            parentidsfound = ProductFilterObjContext?.collections;
+                        }
+                    } else if (ProductFilterObjContext.ProductFetchingType == 'Category') {
+                        instcategories?.forEach(function (catitem, catindex) {
+                            ProductFilterObjContext?.collections?.forEach(function (colitem2, colindex2) {
+                                if (catitem.categoryid == colitem2) {
+                                    catitem?.parentcolletions?.forEach(function (parentcolitem, parentcolindex) {
+                                        parentidsfound.push(parentcolitem.parentcollectionid);
+                                    });
+                                }
+                            });
+                        });
+                        if (authdetailsContext?.instinfo?.instid == '65f69ce0a34b6') {
+                            var tempinstcategories = [...instcategories];
+                            var newisntcatarr = [];
+                            instcategories?.forEach(function (it2, ind2) {
+                                ProductFilterObjContext?.collections?.forEach(function (colitem2, colindex2) {
+                                    if (it2.categoryid == colitem2) {
+                                        newisntcatarr.push(it2);
+                                    }
+                                });
+                            });
+
+                            setinstcategories([...newisntcatarr]);
+                        }
+                    } else {
+                        instcategories?.forEach(function (catitem, catindex) {
+                            catitem?.parentcolletions?.forEach(function (parentcolitem, parentcolindex) {
+                                parentcolitem?.collections?.forEach(function (colitem, colindex) {
+                                    ProductFilterObjContext?.collections?.forEach(function (colitem2, colindex2) {
+                                        if (colitem.collectionid == colitem2) {
+                                            parentidsfound.push(parentcolitem.parentcollectionid);
+                                        }
+                                    });
+                                });
+                            });
+                        });
+                    }
+
+                    parentidsfound = parentidsfound.filter((val, id, array) => array.indexOf(val) == id);
+
+                    if (parentidsfound?.length != 0) {
+                        instcategories?.forEach(function (catitem, catindex) {
+                            catitem?.parentcolletions?.forEach(function (parentcolitem, parentcolindex) {
+                                parentidsfound?.forEach(function (parentidfounditem, parentidfoundindex) {
+                                    if (parentidfounditem == parentcolitem?.parentcollectionid) {
+                                        parentcolitem?.collections?.forEach(function (colitem, colindex) {
+                                            var iscolexists = false;
+                                            collectiontobevisible?.forEach(function (colitemex, colindexex) {
+                                                if (colitemex.collectionid == colitem.collectionid) {
+                                                    iscolexists = true;
+                                                }
+                                            });
+                                            if (iscolexists == false) {
+                                                collectiontobevisible.push(colitem);
+                                            }
+                                        });
+                                    }
+                                });
+                            });
+                        });
+
+                        if (collectiontobevisible?.length != 0) {
+                            setcollectionstobevisible(collectiontobevisible);
+                        } else {
+                            setcollectionstobevisible(instcollections);
+                        }
+                    } else {
+                        setcollectionstobevisible(instcollections);
+                    }
+                } else {
+                    setcollectionstobevisible(instcollections);
+                }
+            } else {
+                setcollectionstobevisible(instcollections);
+            }
+        }
+    }, [ProductFilterObjContext, fetchCategoriesQueryContext.isSuccess, fetchcollectionsQueryContext.isSuccess, instcollections]);
+    useEffect(() => {
+        if (productfeatuesarr.length != 0) {
+            var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+            tempfetchproductsfilerobjcontext.prod_featruesar = productfeatuesarr;
+            setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+            filterrouting(tempfetchproductsfilerobjcontext);
+        }
+    }, [productfeatuesarr]);
+    useEffect(() => {
+        if (fetchTabexStatesQueryContext.isSuccess) {
+            if (ProductFilterObjContext.stateid != undefined && ProductFilterObjContext.stateid != null && ProductFilterObjContext.stateid != '' && ProductFilterObjContext.stateid != 'all') {
+                var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+                tempFetchTabexStatesPayloadobjContext.functype = 'cities';
+                tempFetchTabexStatesPayloadobjContext.state_id = ProductFilterObjContext.stateid;
+                setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+            }
+        }
+    }, [fetchTabexStatesQueryContext.isSuccess]);
+    const filterupdater = () => {
+        setTimeout(() => {
+            var tempFetchQueriesEngineContext = { ...FetchQueriesEngineContext };
+            tempFetchQueriesEngineContext.fetchtabexcountries = true;
+            setFetchQueriesEngineContext(tempFetchQueriesEngineContext);
+        }, 100);
+        if (ProductFilterObjContext.countryid != undefined && ProductFilterObjContext.countryid != null && ProductFilterObjContext.countryid != '' && ProductFilterObjContext.countryid != 'all') {
+            var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+            tempFetchTabexStatesPayloadobjContext.functype = 'states';
+            tempFetchTabexStatesPayloadobjContext.country_id = ProductFilterObjContext.countryid;
+            setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+        }
+
+        if (instfilters.length != 0) {
+            var tempinstfilters = [...instfilters];
+            tempinstfilters?.forEach(function (instfilteritem, instfilterindex) {
+                instfilteritem.productvaluesfilter.forEach(function (valefilteritem, valefilteritemindex) {
+                    valefilteritem.isfilterselected = false;
+                });
+            });
+            ProductFilterObjContext?.FilterOptions?.forEach(function (filteritem, filterindex) {
+                tempinstfilters?.forEach(function (instfilteritem, instfilterindex) {
+                    instfilteritem?.productvaluesfilter?.forEach(function (valefilteritem, valefilteritemindex) {
+                        if (filteritem.valueid == valefilteritem.valueid) {
+                            valefilteritem.isfilterselected = true;
+                        }
+                    });
+                });
+            });
+            setinstfilters([...tempinstfilters]);
+        }
+        if (instcategories.length != 0) {
+            var tempInstcategories = [...instcategories];
+            tempInstcategories.forEach(function (catitem, catindex) {
+                catitem.parentcolletions.forEach(function (parentcolitem, parentcolindex) {
+                    parentcolitem.collections.forEach(function (colitem, colindex) {
+                        colitem.isfilterselected = false;
+                    });
+                });
+            });
+
+            ProductFilterObjContext?.collections?.forEach(function (filteritem, filterindex) {
+                tempInstcategories.forEach(function (catitem, catindex) {
+                    catitem.parentcolletions.forEach(function (parentcolitem, parentcolindex) {
+                        parentcolitem.collections.forEach(function (colitem, colindex) {
+                            if (colitem.collectionid == filteritem) {
+                                colitem.isfilterselected = true;
+                            }
+                        });
+                    });
+                });
+            });
+
+            setinstcategories([...tempInstcategories]);
+        }
+        if (instcollections.length != 0) {
+            var tempInstcollections = [...instcollections];
+            tempInstcollections.forEach(function (instfilteritem, valefilteritemindex) {
+                instfilteritem.isfilterselected = false;
+            });
+            ProductFilterObjContext?.collections?.forEach(function (filteritem, filterindex) {
+                tempInstcollections?.forEach(function (instfilteritem, instfilterindex) {
+                    if (instfilteritem.collectionid == filteritem) {
+                        instfilteritem.isfilterselected = true;
+                    }
+                });
+            });
+            setinstcollections([...tempInstcollections]);
+        }
+    };
+    const setfilterfunc = (valueid, valueindex, mainparentindex, type) => {
+        var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+        if (type == 'clearfilters') {
+            tempfetchproductsfilerobjcontext.FilterOptions = [];
+        } else {
+            var FilterExists = false;
+            tempfetchproductsfilerobjcontext?.FilterOptions?.forEach(function (filteritem, filterindex) {
+                if (filteritem.valueid == valueid) {
+                    FilterExists = true;
+                    tempfetchproductsfilerobjcontext.FilterOptions.splice(filterindex, 1);
+                }
+            });
+            if (!FilterExists) {
+                tempfetchproductsfilerobjcontext.FilterOptions.push({ valueid: valueid });
+            }
+        }
+        if (tempfetchproductsfilerobjcontext.FilterOptions.length == 0) {
+            tempfetchproductsfilerobjcontext.isfilter = 0;
+        } else {
+            tempfetchproductsfilerobjcontext.isfilter = 1;
+        }
+        tempfetchproductsfilerobjcontext.page = 0;
+        setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+        filterrouting(tempfetchproductsfilerobjcontext);
+        // routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)));
+    };
+    const setCollectionFilterFunc = (collectionid) => {
+        var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+        var CollectionExists = false;
+        if (tempfetchproductsfilerobjcontext.ProductFetchingType == 'Parent Collection' && tempfetchproductsfilerobjcontext.parentcollections_for_collectionsFilter == undefined) {
+            tempfetchproductsfilerobjcontext.parentcollections_for_collectionsFilter = tempfetchproductsfilerobjcontext.collections;
+        }
+        tempfetchproductsfilerobjcontext?.collections?.forEach(function (filteritem, filterindex) {
+            if (sectionproperties.filterdirection != 'Horizontal') {
+                if (filteritem == collectionid) {
+                    CollectionExists = true;
+                    tempfetchproductsfilerobjcontext.collections.splice(filterindex, 1);
+                }
+            }
+        });
+
+        if (!CollectionExists) {
+            if (tempfetchproductsfilerobjcontext.collections != undefined && Array.isArray(tempfetchproductsfilerobjcontext.collections)) {
+                if (sectionproperties.filterType != 'Title & Sort By Only' && sectionproperties.filterdirection == 'Horizontal') {
+                    tempfetchproductsfilerobjcontext.collections = [];
+                    tempfetchproductsfilerobjcontext.collections.push(collectionid);
+                } else {
+                    tempfetchproductsfilerobjcontext.collections.push(collectionid);
+                }
+            } else {
+                tempfetchproductsfilerobjcontext.collections = [collectionid];
+            }
+        }
+
+        tempfetchproductsfilerobjcontext.page = 0;
+        tempfetchproductsfilerobjcontext.ProductFetchingType = 'Random';
+        setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+        filterrouting(tempfetchproductsfilerobjcontext);
+        // routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)));
+    };
+    const AccordionInner = (parentcollectionindex, parentcollectionitem) => {
+        return (
+            <AccordionItem uuid={parentcollectionindex}>
+                <AccordionItemHeading>
+                    <AccordionItemButton>
+                        <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 '}>
+                            <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+                                <p
+                                    className={
+                                        langdetect == 'en'
+                                            ? filter_cssstyles.pCollectionName + ' collapsetitle text-capitalize m-0 p-0 '
+                                            : filter_cssstyles.pCollectionName + ' collapsetitle text-capitalize m-0 p-0 text-right'
+                                    }
+                                >
+                                    {langdetect == 'en' ? parentcollectionitem.title_en : parentcollectionitem.title_ar}
+                                </p>
+                            </div>
+                            <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                <AccordionItemState>
+                                    {(state) => {
+                                        if (state.expanded == true) {
+                                            return (
+                                                <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                    <FiChevronUp />
+                                                </i>
+                                            );
+                                        } else {
+                                            return (
+                                                <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                    <FiChevronDown />
+                                                </i>
+                                            );
+                                        }
+                                    }}
+                                </AccordionItemState>
+                            </div>
+                        </div>
+                    </AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel className="p-0">
+                    <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex ">
+                        <div class="col-lg-12 mb-3 allcentered">
+                            <p
+                                class={filter_cssstyles.explorebtn + ' m-0 p-0 cursor-pointer text-capitalize '}
+                                style={{ textDecoration: 'underline' }}
+                                onClick={() => {
+                                    routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'parentcollections/' + parentcollectionitem.parentcollectionid);
+                                }}
+                            >
+                                {langdetect == 'en' ? sectionproperties.explorebtncontenten : sectionproperties.explorebtncontentar}{' '}
+                                {langdetect == 'en' ? parentcollectionitem.title_en : parentcollectionitem.title_ar}
+                            </p>
+                        </div>
+                        <div className={'col-lg-12 pl-md-3 pr-md-3'}>
+                            <div
+                                className={
+                                    langdetect == 'en' ? `${filterstyles.timeline}  ${filterstyles.timelinetrans}` + ' p-sm-0 ' : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+                                }
+                            >
+                                {parentcollectionitem?.collections?.map((collectionitem, collectionindex) => {
+                                    if (collectionitem.isinftiler == 1) {
+                                        return (
+                                            <div
+                                                className={
+                                                    `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+${collectionitem.isfilterselected ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+` + ' d-flex align-items-center pb-3 '
+                                                }
+                                                onClick={() => {
+                                                    setCollectionFilterFunc(collectionitem.collectionid);
+                                                }}
+                                            >
+                                                <div
+                                                    className={
+                                                        ` ${collectionitem.isfilterselected ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${filter_cssstyles.btn_item}` +
+                                                        ' d-flex align-items-center '
+                                                    }
+                                                >
+                                                    <i className="h-100 d-flex align-items-center"></i>
+                                                </div>
+                                                <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                    <p
+                                                        className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+                                                        style={{
+                                                            color: collectionitem.isfilterselected ? sectionproperties.activecat_color : '',
+                                                        }}
+                                                    >
+                                                        {langdetect == 'en' ? collectionitem.title_en : collectionitem.title_ar}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        );
+                                    }
+                                })}
+                            </div>
+                        </div>
+                    </div>
+                </AccordionItemPanel>
+            </AccordionItem>
+        );
+    };
+    const AccordionOuter = (categoryItem, categoryIndex) => {
+        return (
+            <AccordionItem uuid={categoryIndex}>
+                <AccordionItemHeading>
+                    <AccordionItemButton>
+                        <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-1 pl-md-3 pr-md-3 '}>
+                            <div className="col-lg-10 col-md-10 col-sm-10 p-0 d-flex align-items-center justify-content-start">
+                                <p className={filter_cssstyles.categoryName + ' collapsetitle text-capitalize m-0 p-0 '}>{langdetect == 'en' ? categoryItem.title_en : categoryItem.title_ar}</p>
+                            </div>
+                            <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                <AccordionItemState>
+                                    {(state) => {
+                                        if (state.expanded == true) {
+                                            return (
+                                                <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                    <FiChevronUp />
+                                                </i>
+                                            );
+                                        } else {
+                                            return (
+                                                <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                    <FiChevronDown />
+                                                </i>
+                                            );
+                                        }
+                                    }}
+                                </AccordionItemState>
+                            </div>
+                            <div className="col-lg-12 p-0">
+                                <hr className="mt-3 mb-2" />
+                            </div>
+                        </div>
+                    </AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel className="p-0">
+                    <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex">
+                        <div class="col-lg-12 mb-3 allcentered">
+                            <p
+                                class={filter_cssstyles.explorebtn + ' m-0 p-0 cursor-pointer text-capitalize '}
+                                style={{ textDecoration: 'underline' }}
+                                onClick={() => {
+                                    routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'categories/' + categoryItem.categoryid);
+                                }}
+                            >
+                                {langdetect == 'en' ? sectionproperties.explorebtncontenten : sectionproperties.explorebtncontentar}{' '}
+                                {langdetect == 'en' ? categoryItem.title_en : categoryItem.title_ar}
+                            </p>
+                        </div>
+                        {instcategories[categoryIndex]?.parentcolletions.map((parentcollectionitem, parentcollectionindex) => {
+                            if (parentcollectionitem.isinftiler == 1) {
+                                return (
+                                    <div class="col-lg-12">
+                                        {sectionproperties.expandall == 'Yes' && (
+                                            <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3, 4, 5, 6, 7, 8, , 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]}>
+                                                {AccordionInner(parentcollectionindex, parentcollectionitem)}
+                                            </Accordion>
+                                        )}
+                                        {sectionproperties.expandall == 'No' && (
+                                            <Accordion allowMultipleExpanded={true} allowZeroExpanded={true}>
+                                                {AccordionInner(parentcollectionindex, parentcollectionitem)}
+                                            </Accordion>
+                                        )}
+                                    </div>
+                                );
+                            }
+                        })}
+                    </div>
+                </AccordionItemPanel>
+            </AccordionItem>
+        );
+    };
+    const CategoriesFilter = () => {
+        return (
+            <div class="col-lg-12 p-0">
+                {instcategories?.map((categoryItem, categoryIndex) => {
+                    if (categoryItem.isinftiler == 1) {
+                        return (
+                            <div class="col-lg-12 p-0">
+                                {sectionproperties.expandall == 'Yes' && (
+                                    <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3, 4, 5, 6, 7, 8, , 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]}>
+                                        {AccordionOuter(categoryItem, categoryIndex)}
+                                    </Accordion>
+                                )}
+                                {sectionproperties.expandall == 'No' && (
+                                    <Accordion allowMultipleExpanded={true} allowZeroExpanded={true}>
+                                        {AccordionOuter(categoryItem, categoryIndex)}
+                                    </Accordion>
+                                )}
+                            </div>
+                        );
+                    }
+                })}
+            </div>
+        );
+    };
+    const CollectionsFilter = () => {
+        return (
+            <div class="col-lg-12 p-0">
+                <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]}>
+                    <AccordionItem uuid={0}>
+                        <AccordionItemHeading>
+                            <AccordionItemButton>
+                                <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 '}>
+                                    <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+                                        <p className={langdetect == 'en' ? filter_cssstyles.collapsetitle + ' m-0 p-0 ' : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'}>
+                                            {langdetect == 'en' ? sectionproperties.filtercollectiontitle_en : sectionproperties.filtercollectiontitle_ar}
+                                        </p>
+                                    </div>
+                                    <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                        <AccordionItemState>
+                                            {(state) => {
+                                                if (state.expanded == true) {
+                                                    return (
+                                                        <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                            <FiChevronUp />
+                                                        </i>
+                                                    );
+                                                } else {
+                                                    return (
+                                                        <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                            <FiChevronDown />
+                                                        </i>
+                                                    );
+                                                }
+                                            }}
+                                        </AccordionItemState>
+                                    </div>
+                                </div>
+                            </AccordionItemButton>
+                        </AccordionItemHeading>
+                        <AccordionItemPanel className="p-0">
+                            <div className="row mt-3 mb-2 ml-0 mr-0 d-lg-flex pl-md-3 pr-md-3">
+                                <div className={'col-lg-12'}>
+                                    <div
+                                        className={
+                                            langdetect == 'en'
+                                                ? `${filterstyles.timeline}  ${filterstyles.timelinetrans}` + ' p-sm-0 '
+                                                : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+                                        }
+                                    >
+                                        {collectionstobevisible.map((item, index) => {
+                                            return (
+                                                <div
+                                                    className={
+                                                        `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+                                                                        ${item.isfilterselected ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+                                                                        ` + ' d-flex align-items-center pb-3 '
+                                                    }
+                                                    onClick={() => {
+                                                        setCollectionFilterFunc(item.collectionid);
+                                                    }}
+                                                >
+                                                    <div class="mr-2">
+                                                        <div
+                                                            className={
+                                                                ` ${item.isfilterselected ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${filter_cssstyles.btn_item}` +
+                                                                ' d-flex align-items-center '
+                                                            }
+                                                        >
+                                                            <i className="h-100 d-flex align-items-center"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                        <p
+                                                            className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+                                                            style={{
+                                                                color: item.isfilterselected ? sectionproperties.activecat_color : '',
+                                                            }}
+                                                        >
+                                                            {langdetect == 'en' ? item.title_en : item.title_ar}
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                    {sectionproperties.showshowallbtn == 'Show' && (
+                                        <div class="col-lg-12 allcentered">
+                                            <div class={filter_cssstyles.showallbtn} style={{}}>
+                                                <p
+                                                    class="m-0 p-0"
+                                                    onClick={() => {
+                                                        setcollectionstobevisible(instcollections);
+                                                    }}
+                                                    // style={{ cursor: 'pointer' }}
+                                                >
+                                                    {langdetect == 'en' ? sectionproperties.showalltexten : sectionproperties.showalltextar}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </AccordionItemPanel>
+                    </AccordionItem>
+                    {/* <hr className="mt-3 mb-3" /> */}
+                </Accordion>
+            </div>
+        );
+    };
+    const DynamicFilter = () => {
+        return (
+            <div class="row m-0 w-100">
+                <div class="col-lg-12 p-0">
+                    {fetchProductFeaturesQueryContext?.isSuccess && (
+                        <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex w-100">
+                            {fetchProductFeaturesQueryContext?.data?.data?.productfeatues?.map(function (item, index) {
+                                // if (item.type == 'Selectbox') {
+                                //     var selectboxarr = [];
+                                //     item?.featuresselectbovalue?.forEach(function (slecitem) {
+                                //         var itemlabel = '';
+                                //         if (langdetect == 'en') {
+                                //             itemlabel = slecitem.value_en;
+                                //         } else {
+                                //             itemlabel = slecitem.value_ar;
+                                //         }
+                                //         selectboxarr.push({ label: itemlabel, value: slecitem.value_en });
+                                //     });
+                                //     return (
+                                //         <div class="col-lg-12 col-md-12 d-flex flex-column align-items-center justify-content-start mb-3 p-0">
+                                //             <label
+                                //                 className={' mb-3 w-100 '}
+                                //                 style={{
+                                //                     textAlign: langdetect == 'en' ? 'left' : 'right',
+                                //                     color: sectionproperties.filtertitle_color,
+                                //                     color: sectionproperties.filtertitle_color,
+                                //                     fontSize: sectionproperties.filtertitle_fontsize + 'px',
+                                //                     fontWeight: sectionproperties.filtertitle_fontweight,
+                                //                     color: sectionproperties.filtertitle_color,
+                                //                     textTransform: 'capitalize',
+                                //                 }}
+                                //             >
+                                //                 {langdetect == 'en' ? item.name_en : item.name_ar}
+                                //             </label>
+                                //             <div class={'col-lg-12 p-0'}>
+                                //                 <Select
+                                //                     options={selectboxarr}
+                                //                     styles={langdetect == 'en' ? selectcustomStyles : selectcustomStylesTranslated}
+                                //                     placeholder={''}
+                                //                     onChange={(e) => {
+                                //                         var isattrexists = false;
+                                //                         var tempproductfeatuesarr = [...productfeatuesarr];
+                                //                         tempproductfeatuesarr?.forEach(function (attritem, attrindex) {
+                                //                             if (attritem.id == item.id) {
+                                //                                 tempproductfeatuesarr[attrindex].value = e.value;
+                                //                                 isattrexists = true;
+                                //                             }
+                                //                         });
+                                //                         if (isattrexists == false) {
+                                //                             tempproductfeatuesarr.push({
+                                //                                 id: item.id,
+                                //                                 value: e.value,
+                                //                             });
+                                //                         }
+                                //                         setproductfeatuesarr([...tempproductfeatuesarr]);
+                                //                     }}
+                                //                 />
+                                //             </div>
+                                //         </div>
+                                //     );
+                                // }
+                                if (item.type == 'Selectbox') {
+                                    var selectboxarr = [];
+                                    // item?.featuresselectbovalue?.forEach(function (slecitem) {
+                                    //     var itemlabel = '';
+                                    //     var itemlabelar = '';
+                                    //     if (langdetect == 'en') {
+                                    //         itemlabel = slecitem.value_en;
+                                    //     } else {
+                                    //         itemlabel = slecitem.value_ar;
+                                    //     }
+                                    //     selectboxarr.push({ label: itemlabel, value: slecitem.value_en });
+                                    // });
+                                    return (
+                                        <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]}>
+                                            <AccordionItem uuid={index}>
+                                                <AccordionItemHeading>
+                                                    <AccordionItemButton>
+                                                        <div className={filter_cssstyles.titlecontainer + ' row m-0 w-100 p-0 mb-2 pl-md-3 pr-md-3 '}>
+                                                            <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+                                                                <p
+                                                                    className={
+                                                                        langdetect == 'en'
+                                                                            ? filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 '
+                                                                            : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
+                                                                    }
+                                                                >
+                                                                    {langdetect == 'en' ? item.name_en : item.name_ar}
+                                                                </p>
+                                                            </div>
+                                                            <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                                                <AccordionItemState>
+                                                                    {(state) => {
+                                                                        if (state.expanded == true) {
+                                                                            return (
+                                                                                <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                                                    <FiChevronUp />
+                                                                                </i>
+                                                                            );
+                                                                        } else {
+                                                                            return (
+                                                                                <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                                                    <FiChevronDown />
+                                                                                </i>
+                                                                            );
+                                                                        }
+                                                                    }}
+                                                                </AccordionItemState>
+                                                            </div>
+                                                        </div>
+                                                    </AccordionItemButton>
+                                                </AccordionItemHeading>
+                                                <AccordionItemPanel className="p-0">
+                                                    <div className="row mt-3 mb-2 ml-0 mr-0 d-lg-flex px-3 px-md-4-2 overflowyedit">
+                                                        <div
+                                                            className={
+                                                                langdetect == 'en' ? `${filterstyles.timeline}` + ' p-sm-0 ' : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+                                                            }
+                                                        >
+                                                            {item?.featuresselectbovalue?.map((slecitem, slecindex) => {
+                                                                return (
+                                                                    <div
+                                                                        className={
+                                                                            `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+                                                                    ${slecitem.isfilterselected ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+                                                                             
+                                                                                ` + ' d-flex align-items-center pb-3 '
+                                                                        }
+                                                                        onClick={(e) => {
+                                                                            var isattrexists = false;
+                                                                            var tempproductfeatuesarr = [...productfeatuesarr];
+                                                                            tempproductfeatuesarr?.forEach(function (attritem, attrindex) {
+                                                                                if (attritem.id == slecitem.featureid) {
+                                                                                    tempproductfeatuesarr[attrindex].value = slecitem.value_en;
+                                                                                    isattrexists = true;
+                                                                                }
+                                                                            });
+                                                                            if (isattrexists == false) {
+                                                                                tempproductfeatuesarr.push({
+                                                                                    id: slecitem.featureid,
+                                                                                    value: slecitem.value_en,
+                                                                                });
+                                                                            }
+                                                                            setproductfeatuesarr([...tempproductfeatuesarr]);
+
+                                                                            // setfilterfunc(valueitem.valueid, valueindex, index, 'assign');
+                                                                        }}
+                                                                    >
+                                                                        <div>
+                                                                            <div
+                                                                                className={
+                                                                                    ` ${slecitem.isfilterselected ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${
+                                                                                        filter_cssstyles.btn_item
+                                                                                    }` + ' d-flex align-items-center '
+                                                                                }
+                                                                            >
+                                                                                <i className="h-100 d-flex align-items-center"></i>
+                                                                            </div>
+                                                                        </div>
+
+                                                                        <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                                            <p
+                                                                                className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+                                                                                style={{
+                                                                                    color: slecitem.isfilterselected ? sectionproperties.activecat_color : '',
+                                                                                }}
+                                                                            >
+                                                                                {langdetect == 'en' ? slecitem.value_en : slecitem.value_ar}
+                                                                            </p>
+                                                                        </div>
+                                                                    </div>
+                                                                );
+                                                            })}
+                                                        </div>
+                                                    </div>
+                                                </AccordionItemPanel>
+                                            </AccordionItem>
+                                        </Accordion>
+                                        // <div class="col-lg-12 col-md-12 d-flex flex-column align-items-center justify-content-start mb-3 p-0">
+                                        //     <label
+                                        //         className={' mb-3 w-100 '}
+                                        //         style={{
+                                        //             textAlign: langdetect == 'en' ? 'left' : 'right',
+                                        //             color: sectionproperties.filtertitle_color,
+                                        //             color: sectionproperties.filtertitle_color,
+                                        //             fontSize: sectionproperties.filtertitle_fontsize + 'px',
+                                        //             fontWeight: sectionproperties.filtertitle_fontweight,
+                                        //             color: sectionproperties.filtertitle_color,
+                                        //             textTransform: 'capitalize',
+                                        //         }}
+                                        //     >
+                                        //         {langdetect == 'en' ? item.name_en : item.name_ar}
+                                        //     </label>
+                                        //     <div class={'col-lg-12 p-0'}>
+                                        //         <Select
+                                        //             options={selectboxarr}
+                                        //             styles={langdetect == 'en' ? selectcustomStyles : selectcustomStylesTranslated}
+                                        //             placeholder={''}
+                                        //             onChange={(e) => {
+                                        //                 var isattrexists = false;
+                                        //                 var tempproductfeatuesarr = [...productfeatuesarr];
+                                        //                 tempproductfeatuesarr?.forEach(function (attritem, attrindex) {
+                                        //                     if (attritem.id == item.id) {
+                                        //                         tempproductfeatuesarr[attrindex].value = e.value;
+                                        //                         isattrexists = true;
+                                        //                     }
+                                        //                 });
+                                        //                 if (isattrexists == false) {
+                                        //                     tempproductfeatuesarr.push({
+                                        //                         id: item.id,
+                                        //                         value: e.value,
+                                        //                     });
+                                        //                 }
+                                        //                 setproductfeatuesarr([...tempproductfeatuesarr]);
+                                        //             }}
+                                        //         />
+                                        //     </div>
+                                        // </div>
+                                    );
+                                }
+                                // up here
+                                if (item.type == 'Number') {
+                                    return (
+                                        <div class="col-lg-12 col-md-12 d-flex flex-column align-items-center justify-content-start mb-3 p-0">
+                                            <label
+                                                className={`${filter_cssstyles.input_label_name}` + ' mb-3 w-100 '}
+                                                style={{
+                                                    textAlign: langdetect == 'en' ? 'left' : 'right',
+                                                    color: sectionproperties.filtertitle_color,
+                                                    color: sectionproperties.filtertitle_color,
+                                                    fontSize: sectionproperties.filtertitle_fontsize + 'px',
+                                                    fontWeight: sectionproperties.filtertitle_fontweight,
+                                                    color: sectionproperties.filtertitle_color,
+                                                    textTransform: 'capitalize',
+                                                }}
+                                            >
+                                                {langdetect == 'en' ? item.name_en : item.name_ar}
+                                            </label>
+                                            <div class={'col-lg-12 p-0'}>
+                                                <input
+                                                    type="number"
+                                                    className={`${formstyles.form_control} ${filter_cssstyles.form_control}`}
+                                                    placeholder={''}
+                                                    onChange={(e) => {
+                                                        var isattrexists = false;
+                                                        var tempproductfeatuesarr = [...productfeatuesarr];
+                                                        tempproductfeatuesarr?.forEach(function (attritem, attrindex) {
+                                                            if (attritem.id == item.id) {
+                                                                tempproductfeatuesarr[attrindex].value = e.target.value;
+                                                                isattrexists = true;
+                                                            }
+                                                        });
+                                                        if (isattrexists == false) {
+                                                            tempproductfeatuesarr.push({
+                                                                id: item.id,
+                                                                value: e.target.value,
+                                                            });
+                                                        }
+                                                        setproductfeatuesarr([...tempproductfeatuesarr]);
+                                                    }}
+                                                />
+                                            </div>
+                                        </div>
+                                    );
+                                }
+                                if (item.type == 'NumberRange') {
+                                    var temppricevalue = { min: 0, max: 10000 };
+                                    var tempproductfeatuesarr = [...productfeatuesarr];
+                                    tempproductfeatuesarr?.forEach(function (attritem, attrindex) {
+                                        if (attritem.id == item.id) {
+                                            if (attritem.value != undefined && attritem.value != null && attritem?.value?.length != 0) {
+                                                temppricevalue.min = attritem.value;
+                                            }
+                                            if (attritem.valuemax != undefined && attritem.valuemax != null && attritem?.valuemax?.length != 0) {
+                                                temppricevalue.max = attritem.valuemax;
+                                            }
+                                        }
+                                    });
+                                    return (
+                                        <div className={`${langdetect == 'en' ? 'text-left' : 'text-right'}` + ' col-lg-12 col-md-12 col-sm-12 mb-3 '}>
+                                            <label
+                                                className={`${filter_cssstyles.input_label_name}` + ' mb-3 w-100'}
+                                                style={{
+                                                    textAlign: langdetect == 'en' ? 'left' : 'right',
+                                                    color: sectionproperties.filtertitle_color,
+                                                    color: sectionproperties.filtertitle_color,
+                                                    fontSize: sectionproperties.filtertitle_fontsize + 'px',
+                                                    fontWeight: sectionproperties.filtertitle_fontweight,
+                                                    color: sectionproperties.filtertitle_color,
+                                                    textTransform: 'capitalize',
+                                                }}
+                                            >
+                                                {langdetect == 'en' ? item.name_en : item.name_ar}
+                                                {item.type}
+                                            </label>
+                                            <div class={'col-lg-12 pl-4 pr-4 mt-2 mb-2'} style={{ direction: 'ltr' }}>
+                                                <InputRange
+                                                    draggableTrack={true}
+                                                    formatLabel={(value) => `${value}`}
+                                                    maxValue={parseInt(sectionproperties.filterpricemaxvalue)}
+                                                    minValue={parseInt(sectionproperties.filterpriceminvalue)}
+                                                    value={temppricevalue}
+                                                    onChange={(e) => {
+                                                        // setpricevalue({ ...value });
+                                                        var isattrexists = false;
+                                                        var tempproductfeatuesarr = [...productfeatuesarr];
+                                                        tempproductfeatuesarr?.forEach(function (attritem, attrindex) {
+                                                            if (attritem.id == item.id) {
+                                                                tempproductfeatuesarr[attrindex].value = e.min;
+                                                                tempproductfeatuesarr[attrindex].valuemax = e.max;
+                                                                isattrexists = true;
+                                                            }
+                                                        });
+                                                        if (isattrexists == false) {
+                                                            tempproductfeatuesarr.push({
+                                                                id: item.id,
+                                                                value: e.min,
+                                                                valuemax: e.max,
+                                                            });
+                                                        }
+                                                        setproductfeatuesarr([...tempproductfeatuesarr]);
+                                                    }}
+                                                />
+                                            </div>
+                                        </div>
+                                    );
+                                }
+                            })}
+                            {/* {sectionproperties.showpricerange == 'Show' && (
+                                <div className={`${langdetect == 'en' ? 'text-left' : 'text-right'}` + ' col-lg-12 col-md-12 col-sm-12 mb-3 p-0 '}>
+                                    <label
+                                        className={`${filter_cssstyles.input_label_name}` + ' mb-3 w-100'}
+                                        style={{
+                                            textAlign: langdetect == 'en' ? 'left' : 'right',
+                                            color: sectionproperties.filtertitle_color,
+                                            color: sectionproperties.filtertitle_color,
+                                            fontSize: sectionproperties.filtertitle_fontsize + 'px',
+                                            fontWeight: sectionproperties.filtertitle_fontweight,
+                                            color: sectionproperties.filtertitle_color,
+                                            textTransform: 'capitalize',
+                                        }}
+                                    >
+                                        {langdetect == 'en' ? 'Price' : 'السعر'}
+                                        {item.type}
+                                    </label>
+                                    <div class={'col-lg-12 pl-4 pr-4 mt-2 mb-2'} style={{ direction: 'ltr' }}>
+                                        <InputRange
+                                            draggableTrack={true}
+                                            formatLabel={(value) => `${value}`}
+                                            maxValue={parseInt(sectionproperties.filterpricemaxvalue)}
+                                            minValue={parseInt(sectionproperties.filterpriceminvalue)}
+                                            value={temppricevalue}
+                                            onChange={(e) => {
+                                                // setpricevalue({ ...value });
+                                                var isattrexists = false;
+                                                var tempproductfeatuesarr = [...productfeatuesarr];
+                                                tempproductfeatuesarr?.forEach(function (attritem, attrindex) {
+                                                    if (attritem.id == item.id) {
+                                                        tempproductfeatuesarr[attrindex].value = e.min;
+                                                        tempproductfeatuesarr[attrindex].valuemax = e.max;
+                                                        isattrexists = true;
+                                                    }
+                                                });
+                                                if (isattrexists == false) {
+                                                    tempproductfeatuesarr.push({
+                                                        id: item.id,
+                                                        value: e.min,
+                                                        valuemax: e.max,
+                                                    });
+                                                }
+                                                setproductfeatuesarr([...tempproductfeatuesarr]);
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                            )} */}
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    };
+    const InstFilters = () => {
+        return (
+            // <Accordion allowMultipleExpanded={true} allowZeroExpanded={true}>
+            <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]}>
+                {instfilters.map((item, index) => {
+                    return (
+                        <>
+                            <AccordionItem uuid={index}>
+                                <AccordionItemHeading>
+                                    <AccordionItemButton>
+                                        <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 mb-4 '}>
+                                            <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+                                                <p
+                                                    className={
+                                                        langdetect == 'en'
+                                                            ? filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 '
+                                                            : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
+                                                    }
+                                                >
+                                                    {langdetect == 'en' ? item.optionname : item.optionname_ar}
+                                                </p>
+                                            </div>
+                                            <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                                <AccordionItemState>
+                                                    {(state) => {
+                                                        if (state.expanded == true) {
+                                                            return (
+                                                                <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                                    <FiChevronUp />
+                                                                </i>
+                                                            );
+                                                        } else {
+                                                            return (
+                                                                <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                                    <FiChevronDown />
+                                                                </i>
+                                                            );
+                                                        }
+                                                    }}
+                                                </AccordionItemState>
+                                            </div>
+                                        </div>
+                                    </AccordionItemButton>
+                                </AccordionItemHeading>
+                                <AccordionItemPanel className="p-0">
+                                    {/* <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex pl-md-3 pr-md-3">
+                                        <div className={'col-lg-12'}>
+                                            <div className={langdetect == 'en' ? `${filterstyles.timeline}` + ' p-sm-0 ' : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '}>
+                                                {item.productvaluesfilter.map((valueitem, valueindex) => {
+                                                    return (
+                                                        <div
+                                                            className={
+                                                                `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+                                            ${valueitem.isfilterselected ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+                                                     
+                                                        ` + ' d-flex align-items-center pb-3 '
+                                                            }
+                                                            onClick={() => {
+                                                                setfilterfunc(valueitem.valueid, valueindex, index, 'assign');
+                                                            }}
+                                                        >
+                                                            <div>
+                                                                <div
+                                                                    className={
+                                                                        ` ${valueitem.isfilterselected ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${filter_cssstyles.btn_item}` +
+                                                                        ' mb-2 d-flex align-items-center '
+                                                                    }
+                                                                >
+                                                                    <i className="h-100 d-flex align-items-center"></i>
+                                                                </div>
+                                                            </div>
+                                                            <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                                <p
+                                                                    className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+                                                                    style={{
+                                                                        color: valueitem.isfilterselected ? sectionproperties.activecat_color : '',
+                                                                    }}
+                                                                >
+                                                                    {langdetect == 'en' ? valueitem.valuename : valueitem.valuename_ar}
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                    );
+                                                })}
+                                            </div>
+                                        </div>
+                                    </div> */}
+                                    <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex pl-md-3 pr-md-3">
+                                        <ul class="thwvsf-wrapper-ul">
+                                            <div className={langdetect == 'en' ? `${filterstyles.timeline}` + ' p-sm-0 ' : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '}>
+                                                <ul class=" d-flex list-none flex-row flex-wrap overflow-auto px-6 pb-5 pt-2 lg:px-0">
+                                                    {item.productvaluesfilter.map((valueitem, valueindex) => {
+                                                        return (
+                                                            <li
+                                                                className={
+                                                                    //                         `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+                                                                    // ${valueitem.isfilterselected ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+                                                                    // ` +
+                                                                    item.optionname != 'Color'
+                                                                        ? `${filter_cssstyles.filteroptionvertical} ${
+                                                                              valueitem.isfilterselected ? `${filter_cssstyles.filteroptionverticalactive}  ` : ''
+                                                                          }` + ' mx-3 mb-3 cursor-pointer allcentered '
+                                                                        : ' mx-3 mb-3 cursor-pointer allcentered '
+                                                                }
+                                                                onClick={() => {
+                                                                    setfilterfunc(valueitem.valueid, valueindex, index, 'assign');
+                                                                }}
+                                                                style={
+                                                                    {
+                                                                        // border: sectionproperties.filter_optionborderwidth + 'px solid ' + sectionproperties.filter_optionbordercolor,
+                                                                        // width: item.optionname == 'Color' ? 'auto' : '',
+                                                                        // height: item.optionname == 'Color' ? 'auto' : '',
+                                                                        // borderWidth: item.optionname == 'Color' ? 0 : '',
+                                                                    }
+                                                                }
+                                                            >
+                                                                {item.optionname == 'Color' && (
+                                                                    <div className={'mx-3'}>
+                                                                        <div class="row m-0 w-100">
+                                                                            <div class="col-lg-12 p-0 allcentered mb-3">
+                                                                                {valueitem.isfilterselected && (
+                                                                                    <div
+                                                                                        class="allcentered"
+                                                                                        style={{
+                                                                                            width: 40,
+                                                                                            height: 40,
+                                                                                            border: '2px solid ' + valueitem.valuename,
+                                                                                            borderRadius: 100,
+                                                                                        }}
+                                                                                    >
+                                                                                        <div
+                                                                                            style={{
+                                                                                                width: 28,
+                                                                                                height: 28,
+                                                                                                background: valueitem.valuename,
+                                                                                                borderRadius: 100,
+                                                                                            }}
+                                                                                        ></div>
+                                                                                    </div>
+                                                                                )}
+                                                                                {!valueitem.isfilterselected && (
+                                                                                    <div
+                                                                                        style={{
+                                                                                            width: 28,
+                                                                                            height: 28,
+                                                                                            background: valueitem.valuename,
+                                                                                            borderRadius: 100,
+                                                                                        }}
+                                                                                    ></div>
+                                                                                )}
+                                                                            </div>
+                                                                            <div class="col-lg-12 p-0 allcentered">
+                                                                                <p className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '} style={{}}>
+                                                                                    {valueitem.value_identifier}
+                                                                                </p>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                )}
+                                                                {item.optionname != 'Color' && (
+                                                                    <p
+                                                                        className={' m-0 p-0 '}
+                                                                        style={{
+                                                                            color: valueitem.isfilterselected ? sectionproperties.activecat_color : '',
+                                                                        }}
+                                                                    >
+                                                                        {langdetect == 'en' ? valueitem.valuename : valueitem.valuename_ar}
+                                                                    </p>
+                                                                )}
+                                                            </li>
+                                                        );
+                                                    })}
+                                                </ul>
+                                            </div>
+                                        </ul>
+                                    </div>
+                                </AccordionItemPanel>
+                            </AccordionItem>
+                            {/* <hr className="mt-3 mb-3" /> */}
+                        </>
+                    );
+                })}
+            </Accordion>
+        );
+    };
+    const filter_cssstyles = {
+        form_control: css({
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            display: 'block',
+            width: '100%',
+            padding: '0 30px',
+            transition: '.3s',
+            fontWeight: 500,
+            border: '1px solid #ccc',
+            // border: sectionproperties.inputfieldbordertype == 'All' ? sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor : 0,
+            // borderBottom: sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor,
+            // borderRadius: sectionproperties.inputfieldborderradius + 'px',
+            borderRadius: '5px',
+            // height: sectionproperties.inputfieldheight + 'px',
+            height: '40px',
+            background: 'transparent',
+            // color: sectionproperties.inputfieldcolor,
+            color: '#000',
+            // fontSize: sectionproperties.inputfieldfontsize + 'px',
+            fontSize: '14px',
+            ':focus': {
+                // borderColor: sectionproperties.inputfeildbordercoloronfocus,
+                borderColor: '#eac435',
+                boxShadow: 'none',
+            },
+        }),
+        collapsetitle: css({
+            fontSize: sectionproperties.filtertitle_fontsize + 'px',
+            fontWeight: sectionproperties.filtertitle_fontweight,
+            textTransform: sectionproperties.filtertitle_texttransform,
+            color: sectionproperties.filtertitle_color,
+            ':hover': {
+                color: sectionproperties.filtertitle_coloronhover,
+            },
+        }),
+        titlecontainer: css({
+            color: sectionproperties.filtertitle_color,
+            ':hover .collapsetitle': {
+                color: sectionproperties.filtertitle_coloronhover,
+            },
+        }),
+        timeline_text: css({
+            fontSize: sectionproperties.timeline_text_fontsize + 'px',
+            fontWeight: sectionproperties.timeline_text_fontweight,
+            textTransform: sectionproperties.timeline_text_texttransform,
+            color: sectionproperties.timeline_text_color,
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.timeline_text_coloronhover,
+            },
+        }),
+        btnstyles: css({
+            color: sectionproperties.generalbtn_textColor,
+            fontSize: sectionproperties.generalbtn_fontsize + 'px',
+            textTransform: sectionproperties.generalbtn_texttransform,
+            width: sectionproperties.generalbtn_width + 'px',
+            height: sectionproperties.generalbtn_height + 'px',
+            background: sectionproperties.generalbtn_bgColor,
+            borderTopLeftRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
+            borderTopRightRadius: sectionproperties.generalbtn_bordertoprightradius + 'px',
+            borderBottomRightRadius: sectionproperties.generalbtn_borderbottomrightradius + 'px',
+            borderBottomLeftRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
+            fontWeight: sectionproperties.generalbtn_fontweight,
+            transition: '.3s',
+            ':hover': {
+                background: sectionproperties.generalbtn_bgColoronhover,
+                color: sectionproperties.generalbtn_textColoronhover,
+            },
+        }),
+        close_menu_icon_cont: css({
+            background: sectionproperties.closeSliderBgColor,
+            width: sectionproperties.closeSliderWidth + 'px',
+            height: sectionproperties.closeSliderHeight + 'px',
+            borderRadius: sectionproperties.closeSlider_borderBottomLeftRadius + 'px',
+            ':hover': {
+                background: sectionproperties.closeSliderBgColorHover,
+            },
+        }),
+        horizontalfilter_card: css({
+            marginBottom: sectionproperties.horizontalfilter_mb + 'px',
+            marginTop: sectionproperties.horizontalfilter_mt + 'px',
+            background: sectionproperties.horizontalfilter_cardbg,
+            border: sectionproperties.horizontalfilter_cardborderwidth + 'px solid ' + sectionproperties.horizontalfilter_cardbordercolor,
+            boxShadow: sectionproperties.horizontalfilter_cardboxShadow == 'Show' ? sectionproperties.horizontalfilter_cardboxShadowcolor : 'horizontalfilter_cardboxShadow',
+        }),
+        btn_item: css({
+            width: '15px',
+            height: '15px',
+            background: sectionproperties.filteritembtn_bgcolor,
+            ':hover': {
+                background: sectionproperties.filteritembtn_bghover,
+            },
+        }),
+        btn_item_active: css({
+            background: sectionproperties.activecat_color,
+        }),
+        timelineinnercont_active: css({
+            fontWeight: sectionproperties.activecat_fontweight,
+            color: sectionproperties.activecat_color,
+        }),
+        categoryName: css({
+            color: sectionproperties.filtertitle_color,
+            fontWeight: sectionproperties.filterCatFontWeight,
+            fontSize: sectionproperties.filterCatFontSize + 'px',
+        }),
+        pCollectionName: css({
+            color: sectionproperties.filtertitle_color,
+            fontWeight: sectionproperties.filterPCollFontWeight,
+            fontSize: sectionproperties.filterPCollFontSize + 'px',
+        }),
+        explorebtn: css({
+            fontSize: sectionproperties.explorebtnfontsize + 'px',
+            fontWeight: 600,
+            color: sectionproperties.explorebtncolor,
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.explorebtncoloronhover,
+            },
+        }),
+        showallbtn: css({
+            color: sectionproperties.showallcolor,
+            ':hover': {
+                transition: '.3s',
+                cursor: 'pointer',
+                color: sectionproperties.showallcolorhover,
+            },
+        }),
+        sectiontitle: css({
+            position: 'relative',
+            justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : '',
+            width: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '100%' : '',
+            fontSize: sectionproperties.sectionTitleFontSize + 'px',
+            '@media (max-width: 800px)': {
+                fontSize: sectionproperties.sectionTitleFontSizeresp + 'px',
+            },
+        }),
+        filtercard: css({
+            minWidth: sectionproperties.filtercardwidth + 'px',
+            maxWidth: sectionproperties.filtercardwidth + 'px',
+        }),
+        filteroptionvertical: css({
+            border: sectionproperties.filter_optionborderwidth + 'px solid ' + sectionproperties.filter_optionbordercolor,
+            color: sectionproperties.timeline_text_color,
+            ':hover': {
+                color: sectionproperties.timeline_text_coloronhover,
+            },
+            // filter_activebackgroundtransparent
+        }),
+        filteroptionverticalactive: css({
+            background: sectionproperties.btn_item_activebgcolor,
+            color: sectionproperties.activecat_color,
+        }),
+    };
+    const filterrouting = (tempfetchproductsfilerobjcontext) => {
+        const path = window.location.pathname.split('/');
+        var currentpagepath = path[1];
+        var pagenamepathinstaticpagelinkcont = '';
+        for (const key in StaticPagesLinksContext) {
+            if (StaticPagesLinksContext[key] == currentpagepath) {
+                pagenamepathinstaticpagelinkcont = key;
+            }
+        }
+        if (pagenamepathinstaticpagelinkcont != undefined && pagenamepathinstaticpagelinkcont != '') {
+            routingcountext(StaticPagesLinksContext[pagenamepathinstaticpagelinkcont], true, encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)));
+        }
+    };
+    const Countriesfilter = () => {
+        return (
+            <div class="row m-0 w-100 pl-md-3 pr-md-3">
+                <div class="col-lg-12 p-0 mt-3">
+                    <div class="row m-0 w-100">
+                        <div class="col-lg-12 p-0 mb-3">
+                            {fetchTabexCountriesQueryContext?.isFetching && (
+                                <div className="w-100 allcentered mt-1">
+                                    <CircularProgress color="#000" width="20px" height="20px" duration="1s" />
+                                </div>
+                            )}
+
+                            {!fetchTabexCountriesQueryContext?.isFetching && fetchTabexCountriesQueryContext?.isSuccess && (
+                                <Select
+                                    options={fetchTabexCountriesQueryContext?.data?.data?.countries}
+                                    getOptionLabel={(option) => {
+                                        var crname = '';
+                                        if (langdetect == 'en') {
+                                            crname = option.name;
+                                        } else if (langdetect == 'ar') {
+                                            if (option.name_ar != null) {
+                                                crname = option.name_ar;
+                                            } else {
+                                                crname = option.name;
+                                            }
+                                        }
+                                        return crname;
+                                    }}
+                                    getOptionValue={(option) => option.id}
+                                    value={fetchTabexCountriesQueryContext.data.data.countries.filter((option) => option.id == ProductFilterObjContext.countryid)}
+                                    onChange={(option) => {
+                                        var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+                                        tempFetchTabexStatesPayloadobjContext.functype = 'states';
+                                        tempFetchTabexStatesPayloadobjContext.country_id = option.id;
+                                        setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+
+                                        var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                        tempfetchproductsfilerobjcontext.countryid = option.id;
+                                        tempfetchproductsfilerobjcontext.page = 0;
+                                        setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+                                        filterrouting(tempfetchproductsfilerobjcontext);
+                                    }}
+                                    styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+                                    placeholder={lang.choosecountry}
+                                    isSearchable={true}
+                                />
+                            )}
+                        </div>
+                        <div class="col-lg-12 mb-3 p-0">
+                            {fetchTabexStatesQueryContext?.isFetching && (
+                                <div className="w-100 allcentered mt-1">
+                                    <CircularProgress color="#000" width="20px" height="20px" duration="1s" />
+                                </div>
+                            )}
+
+                            {!fetchTabexStatesQueryContext?.isFetching && fetchTabexStatesQueryContext?.isSuccess && (
+                                <Select
+                                    options={fetchTabexStatesQueryContext?.data?.data?.states}
+                                    getOptionLabel={(option) => {
+                                        var crname = '';
+                                        if (langdetect == 'en') {
+                                            crname = option.name;
+                                        } else if (langdetect == 'ar') {
+                                            if (option.name_ar != null) {
+                                                crname = option.name_ar;
+                                            } else {
+                                                crname = option.name;
+                                            }
+                                        }
+                                        return crname;
+                                    }}
+                                    getOptionValue={(option) => option.id}
+                                    value={fetchTabexStatesQueryContext?.data?.data?.states.filter((option) => option.id == ProductFilterObjContext.stateid)}
+                                    onChange={(option) => {
+                                        var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+                                        tempFetchTabexStatesPayloadobjContext.functype = 'cities';
+                                        tempFetchTabexStatesPayloadobjContext.state_id = option.id;
+                                        setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+
+                                        var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                        tempfetchproductsfilerobjcontext.stateid = option.id;
+                                        tempfetchproductsfilerobjcontext.page = 0;
+                                        setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+                                        filterrouting(tempfetchproductsfilerobjcontext);
+                                    }}
+                                    styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+                                    placeholder={lang.choosestategov}
+                                    isSearchable={true}
+                                />
+                            )}
+                        </div>
+                        <div class="col-lg-12 mb-3 p-0">
+                            {fetchTabexCitiesQueryContext?.isFetching && (
+                                <div className="w-100 allcentered mt-1">
+                                    <CircularProgress color="#000" width="20px" height="20px" duration="1s" />
+                                </div>
+                            )}
+
+                            {!fetchTabexCitiesQueryContext?.isFetching && fetchTabexCitiesQueryContext?.isSuccess && (
+                                <Select
+                                    options={fetchTabexCitiesQueryContext?.data?.data?.cities}
+                                    getOptionLabel={(option) => {
+                                        var crname = '';
+                                        if (langdetect == 'en') {
+                                            crname = option.name;
+                                        } else if (langdetect == 'ar') {
+                                            if (option.name_ar != null) {
+                                                crname = option.name_ar;
+                                            } else {
+                                                crname = option.name;
+                                            }
+                                        }
+                                        return crname;
+                                    }}
+                                    getOptionValue={(option) => option.id}
+                                    value={fetchTabexCitiesQueryContext?.data?.data?.cities.filter((option) => option.id == ProductFilterObjContext.cityid)}
+                                    onChange={(option) => {
+                                        var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                        tempfetchproductsfilerobjcontext.cityid = option.id;
+                                        tempfetchproductsfilerobjcontext.page = 0;
+                                        setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+                                        filterrouting(tempfetchproductsfilerobjcontext);
+                                    }}
+                                    styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+                                    placeholder={lang.choosecity}
+                                    isSearchable={true}
+                                />
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    const [checked, setChecked] = useState(false);
+    // const queryParameters = new URLSearchParams(window.location.search);
+    // useEffect(() => {
+    //     // setsortbycontext('Sort By');
+    //     if (queryParameters.get('sortprice') == undefined) {
+    //         setsortbycontext('Sort By');
+    //     } else {
+    //         var temp = { ...sortbycontext };
+    //         temp = queryParameters.get('sortprice');
+    //         alert(temp);
+    //     }
+    // }, []);
+    return (
+        <div
+            // className={sectionproperties.filterdirection == 'Horizontal' ? 'col-lg-12 p-0 w-100 filter mt-md-0 ' : 'col-lg-12 p-0 w-100 filter mt-md-0 d-md-none'}
+            className={'row mx-0 p-0 w-100 mt-md-2'}
+            style={{ marginTop: sectionproperties.filtersection_mt + 'px', minHeight: sectionproperties.filterminheight == 0 ? 'auto' : sectionproperties.filterminheight + 'vh' }}
+        >
+            {props.typeprops != 'vertical' && (
+                <div className={sectionproperties.filterdirection == 'Horizontal' ? 'col-lg-12 p-0 w-100 filter mt-md-0 ' : 'col-lg-12 p-0 w-100 filter mt-md-0 d-md-none'}>
+                    {sectionproperties.filterType == 'Title & Sort By Only' && (
+                        <div
+                            class="row mx-0 w-100"
+                            style={{
+                                marginTop: sectionproperties.sectionTitleMarginTop + 'px',
+                                marginBottom: sectionproperties.sectiontitledirection == 'Vertical' ? sectionproperties.sectionTitleMarginBottom + 'px' : 0,
+                                paddingLeft: langdetect == 'en' ? sectionproperties.sectionTitleMarginLeft + 'px' : sectionproperties.sectionTitleMarginRight + 'px',
+                                paddingRight: langdetect == 'en' ? sectionproperties.sectionTitleMarginRight + 'px' : sectionproperties.sectionTitleMarginLeft + 'px',
+                            }}
+                        >
+                            <div class="col-lg-6 col-md-6 p-0 d-flex align-items-center justify-content-start">
+                                <div class={filter_cssstyles.sectiontitle + ' d-flex align-items-center flex-row '} style={{}}>
+                                    <p
+                                        class={
+                                            sectionproperties.sectiontitlefontfamily == 'Pacifico'
+                                                ? ' PacificoFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+                                                : sectionproperties.sectiontitlefontfamily == 'Playfair'
+                                                ? ' PlayfairFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+                                                : sectionproperties.sectiontitlefontfamily == 'Great Vibes'
+                                                ? ' GreatvibesFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+                                                : sectionproperties.sectiontitlefontfamily == 'Quicksand'
+                                                ? ' QuicksandFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+                                                : sectionproperties.sectiontitlefontfamily == 'Satisfy'
+                                                ? ' SatisfyFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+                                                : sectionproperties.sectiontitlefontfamily == 'ASUL'
+                                                ? ' ASUL mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+                                                : '  mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+                                        }
+                                        style={{
+                                            color: sectionproperties.sectionTitleColor,
+                                            fontWeight: sectionproperties.sectionTitleFontWeight,
+                                            paddingLeft: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0,
+                                            paddingRight: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0,
+                                            textAlign: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : '',
+                                        }}
+                                    >
+                                        {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
+                                    </p>
+                                </div>
+                            </div>
+                            <div
+                                class="col-lg-6 col-md-6 d-flex align-items-center justify-content-end"
+                                style={{
+                                    paddingRight: langdetect == 'en' ? 0 : '',
+                                    paddingLeft: langdetect == 'ar' ? 0 : '',
+                                }}
+                            >
+                                <div class="dropdowncontainer">
+                                    <input class={filter_cssstyles.dropdown + ' dropdown '} type="checkbox" checked={checked} id="dropdown" name="dropdown" hidden />
+                                    <label
+                                        onClick={() => {
+                                            setChecked(!checked);
+                                        }}
+                                        className={filter_cssstyles.collapsetitle + ' d-flex justify-content-end align-items-center for-dropdown m-0 '}
+                                        for="dropdown"
+                                        style={{ cursor: 'pointer' }}
+                                    >
+                                        {langdetect == 'en' ? 'Sort By' : 'ترتيب حسب'}{' '}
+                                        <i class={langdetect == 'en' ? 'h-100 allcentered ml-3' : 'h-100 allcentered mr-3'}>
+                                            <FiChevronDown size={20} />
+                                        </i>
+                                    </label>
+
+                                    <div
+                                        class="dropdownmenu"
+                                        style={{
+                                            background: sectionproperties.filter_backgroundcolor,
+                                        }}
+                                    >
+                                        {otherfilters.map((item, index) => {
+                                            return (
+                                                <div class="w-100">
+                                                    {item.filterarray.map((valueitem, valueindex) => {
+                                                        var ischecked = false;
+                                                        if (item.payloadvalue == 'sortprice') {
+                                                            if (valueitem.value == ProductFilterObjContext.sortprice) {
+                                                                ischecked = true;
+                                                            }
+                                                        } else if (item.payloadvalue == 'sortdates') {
+                                                            if (valueitem.value == ProductFilterObjContext.sortdates) {
+                                                                ischecked = true;
+                                                            }
+                                                        }
+                                                        return (
+                                                            <p
+                                                                class={filter_cssstyles.timeline_text + ' dropdownlink '}
+                                                                style={{ color: ischecked ? sectionproperties.activecat_color : '' }}
+                                                                onClick={() => {
+                                                                    var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                                                    if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
+                                                                        tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
+                                                                    } else {
+                                                                        tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
+                                                                    }
+                                                                    tempfetchproductsfilerobjcontext.page = 0;
+                                                                    setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+
+                                                                    filterrouting(tempfetchproductsfilerobjcontext);
+                                                                    setsortbycontext(valueitem.name);
+                                                                }}
+                                                            >
+                                                                {valueitem.name}
+                                                            </p>
+                                                        );
+                                                    })}
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    {sectionproperties.filterType != 'Title & Sort By Only' && sectionproperties.filterdirection == 'Horizontal' && (
+                        <div class="row m-0 w-100">
+                            {/* <div className="col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-start mb-3">
+                        <p className={langdetect == 'en' ? filter_cssstyles.collapsetitle + ' m-0 p-0 ' : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'}>
+                            {langdetect == 'en' ? sectionproperties.filtercollectiontitle_en : sectionproperties.filtercollectiontitle_ar}
+                        </p>
+                    </div> */}
+                            <div class="col-lg-12 p-0 mb-4">
+                                {/* filtercard */}
+                                {/* here */}
+                                <ScrollMenu transitionBehavior={'auto'} wrapperClassName={''} itemClassName={''} scrollContainerClassName={'scrollmenuclasssubscrollbar2'}>
+                                    {collectionstobevisible.map((item, index) => {
+                                        return (
+                                            <div className={' col-xl-12 p-0 col-lg-12 col-md-12 col-sm-12 w-100 mb-2 '}>
+                                                <div
+                                                    className={`${filter_cssstyles.timeline_text} ${filter_cssstyles.filtercard}` + ' p-0 cursor-pointer '}
+                                                    onClick={() => {
+                                                        setCollectionFilterFunc(item.collectionid);
+                                                    }}
+                                                    style={{
+                                                        color: item.isfilterselected == true ? sectionproperties.activecat_color : '',
+                                                    }}
+                                                >
+                                                    <div class="col-lg-12 allcentered mb-2">
+                                                        <div
+                                                            style={{
+                                                                width: sectionproperties.filterimagewidthheight + '%',
+                                                                height: sectionproperties.filterimagewidthheight + '%',
+                                                            }}
+                                                        >
+                                                            <Imagekitimagecomp
+                                                                urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                                                publicKey={ikimagecredcontext?.ikimagepublickey}
+                                                                path={'/tr:w-' + sectionproperties.filterimage_tr + ',h-' + sectionproperties.filterimage_h + '/' + item.collectionlogo}
+                                                                style={{
+                                                                    width: '100%',
+                                                                    height: '100%',
+                                                                    objectFit: 'cover',
+                                                                    borderRadius: sectionproperties.filterimageborderradius + 'px',
+                                                                }}
+                                                                loading="lazy"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                    <div class="row m-0 w-100">
+                                                        <div class="col-10 text-start">
+                                                            <p class={' m-0 p-0 '}>{langdetect == 'en' ? item.title_en : item.title_ar}</p>
+                                                        </div>
+                                                        <div class="col-2 text-end">
+                                                            <i class="h-100 allcentered">{langdetect == 'en' ? <BsChevronRight /> : <BsChevronRight />}</i>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </ScrollMenu>
+                            </div>
+                            {sectionproperties.showproductgroupbytitle == 'Show' && (
+                                <div
+                                    class="col-lg-12 text-start px-4 mb-5"
+                                    style={{
+                                        fontSize: 15,
+                                        color: '#62554a',
+                                    }}
+                                >
+                                    <span
+                                        class="cursor-pointer"
+                                        onClick={() => {
+                                            routingcountext('home', false, '');
+                                        }}
+                                    >
+                                        {'Home'} /{' '}
+                                    </span>{' '}
+                                    <span style={{ textTransform: 'capitalize' }} class="mx-2">
+                                        {props.show_product_group_titles()['title_en']}
+                                    </span>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                    {sectionproperties.filterType != 'Title & Sort By Only' && sectionproperties.filterdirection == 'Vertical' && (
+                        <div
+                            className={`${filterstyles.filterslider_container}` + ' pb-md-5 '}
+                            id="filterslider"
+                            style={{
+                                background: sectionproperties.filter_backgroundcolor,
+                                borderRadius: sectionproperties.filter_borderBottomLeftRadius + 'px',
+                            }}
+                        >
+                            <div className={filter_cssstyles.filteraccordion + ' row m-0 w-100 pt-2 pb-3 filter-accordion '}>
+                                <div className="col-lg-9 col-md-9 col-sm-9 d-none align-items-center d-md-flex">
+                                    <p
+                                        className="m-0 p-0  font-16 font-weight-600"
+                                        style={{
+                                            color: sectionproperties.filter_titlecolor,
+                                            fontSize: sectionproperties.filter_titlefontsize + 'px',
+                                            fontWeight: sectionproperties.filter_titlefontweight,
+                                            textTransform: sectionproperties.filter_titletextransform,
+                                        }}
+                                    >
+                                        {langdetect == 'en' ? 'Filter' : 'فلترة'}
+                                    </p>
+                                </div>
+                                <div className="col-lg-3 col-md-3 col-sm-3 d-none d-md-flex align-items-center justify-content-end p-0">
+                                    <div
+                                        className={`${filterstyles.close_menu_icon_cont} ${filter_cssstyles.close_menu_icon_cont}` + ' d-none d-md-flex align-items-center justify-content-center '}
+                                        onClick={() => {
+                                            var element = document.getElementById('filterslider');
+                                            element.classList.remove(filterstyles.filterslider_container_opened);
+                                        }}
+                                    >
+                                        <i className="h-100 d-flex align-items-center justify-content-center">
+                                            <IoMdClose
+                                                size={sectionproperties.closeSlider_fontSize}
+                                                style={{
+                                                    color: sectionproperties.closeSlider_color,
+                                                }}
+                                            />
+                                        </i>
+                                    </div>
+                                </div>
+                                {sectionproperties.otherfilters == 'Show' && (
+                                    <div class="row m-0 w-100">
+                                        <div class="col-lg-12 d-flex justify-content-start">
+                                            <p
+                                                className="m-0 p-0 font-16 font-weight-600"
+                                                style={{
+                                                    color: sectionproperties.filter_titlecolor,
+                                                    fontSize: sectionproperties.filter_titlefontsize + 'px',
+                                                    fontWeight: sectionproperties.filter_titlefontweight,
+                                                    textTransform: sectionproperties.filter_titletextransform,
+                                                }}
+                                            >
+                                                {langdetect == 'en' ? 'Sort By' : 'ترتيب حسب'}
+                                            </p>
+                                        </div>
+                                        <div className="col-lg-12">
+                                            <hr className="mt-2 mb-3" />
+                                        </div>
+                                        {otherfilters.map((item, index) => {
+                                            return (
+                                                <div className="col-lg-12 pl-4 pr-4">
+                                                    <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]} style={{ width: '100%' }}>
+                                                        <AccordionItem uuid={index}>
+                                                            <AccordionItemHeading>
+                                                                <AccordionItemButton>
+                                                                    <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3  '}>
+                                                                        <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+                                                                            <p
+                                                                                className={
+                                                                                    langdetect == 'en'
+                                                                                        ? filter_cssstyles.collapsetitle + ' m-0 p-0 collapsetitle '
+                                                                                        : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
+                                                                                }
+                                                                            >
+                                                                                {item.name}
+                                                                            </p>
+                                                                        </div>
+                                                                        <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                                                            <AccordionItemState>
+                                                                                {(state) => {
+                                                                                    if (state.expanded == true) {
+                                                                                        return (
+                                                                                            <i
+                                                                                                className={
+                                                                                                    filter_cssstyles.collapsetitle +
+                                                                                                    ' collapsetitle h-100 d-flex align-items-center justify-content-end   '
+                                                                                                }
+                                                                                            >
+                                                                                                <FiChevronUp />
+                                                                                            </i>
+                                                                                        );
+                                                                                    } else {
+                                                                                        return (
+                                                                                            <i className={filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '}>
+                                                                                                <FiChevronDown />
+                                                                                            </i>
+                                                                                        );
+                                                                                    }
+                                                                                }}
+                                                                            </AccordionItemState>
+                                                                        </div>
+                                                                    </div>
+                                                                </AccordionItemButton>
+                                                            </AccordionItemHeading>
+                                                            <AccordionItemPanel className="p-0">
+                                                                <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex">
+                                                                    <div className={'col-lg-12'}>
+                                                                        <div
+                                                                            className={
+                                                                                langdetect == 'en'
+                                                                                    ? `${filterstyles.timeline}` + ' p-sm-0 '
+                                                                                    : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+                                                                            }
+                                                                        >
+                                                                            {item.filterarray.map((valueitem, valueindex) => {
+                                                                                var ischecked = false;
+                                                                                if (item.payloadvalue == 'sortprice') {
+                                                                                    if (valueitem.value == ProductFilterObjContext.sortprice) {
+                                                                                        ischecked = true;
+                                                                                    }
+                                                                                } else if (item.payloadvalue == 'sortdates') {
+                                                                                    if (valueitem.value == ProductFilterObjContext.sortdates) {
+                                                                                        ischecked = true;
+                                                                                    }
+                                                                                }
+                                                                                return (
+                                                                                    <div
+                                                                                        className={
+                                                                                            `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+                                                                ${ischecked ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+                                                                         
+                                                                            ` + ' d-flex align-items-center pb-3 '
+                                                                                        }
+                                                                                        onClick={() => {
+                                                                                            var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                                                                            if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
+                                                                                                tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
+                                                                                            } else {
+                                                                                                tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
+                                                                                            }
+                                                                                            tempfetchproductsfilerobjcontext.page = 0;
+                                                                                            setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+
+                                                                                            filterrouting(tempfetchproductsfilerobjcontext);
+                                                                                        }}
+                                                                                    >
+                                                                                        <div>
+                                                                                            <div
+                                                                                                className={
+                                                                                                    ` ${ischecked ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${
+                                                                                                        filter_cssstyles.btn_item
+                                                                                                    }` + ' d-flex align-items-center '
+                                                                                                }
+                                                                                            >
+                                                                                                <i className="h-100 d-flex align-items-center"></i>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                        <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                                                            <p
+                                                                                                className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+                                                                                                style={{
+                                                                                                    color: ischecked ? sectionproperties.activecat_color : '',
+                                                                                                }}
+                                                                                            >
+                                                                                                {valueitem.name}
+                                                                                            </p>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                );
+                                                                            })}
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </AccordionItemPanel>
+                                                        </AccordionItem>
+                                                    </Accordion>
+                                                </div>
+                                            );
+                                        })}
+                                        {sectionproperties.showfilterbyrating == 'Show' && (
+                                            <div className="col-lg-12 pl-4 pr-4">
+                                                <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3  '}>
+                                                    <div className="col-lg-12 col-md-12 col-sm-12 p-0 mb-3">
+                                                        <p
+                                                            className={
+                                                                langdetect == 'en'
+                                                                    ? filter_cssstyles.collapsetitle + ' m-0 p-0 collapsetitle '
+                                                                    : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
+                                                            }
+                                                        >
+                                                            {langdetect == 'en' ? 'Ratings' : 'التقييمات'}
+                                                        </p>
+                                                    </div>
+                                                    <div className="col-lg-12 col-md-12 col-sm-12 mb-4">
+                                                        <InputRange
+                                                            draggableTrack={true}
+                                                            formatLabel={(value) => `${value}`}
+                                                            maxValue={5}
+                                                            minValue={0}
+                                                            value={raterangevalue}
+                                                            onChange={(value) => {
+                                                                setraterangevalue({ ...value });
+                                                            }}
+                                                        />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+                                )}
+                                <div className="col-lg-9 col-md-9 col-sm-9 d-flex align-items-center d-md-none">
+                                    <p
+                                        className="m-0 p-0 font-16 font-weight-600"
+                                        style={{
+                                            color: sectionproperties.filter_titlecolor,
+                                            fontSize: sectionproperties.filter_titlefontsize + 'px',
+                                            fontWeight: sectionproperties.filter_titlefontweight,
+                                            textTransform: sectionproperties.filter_titletextransform,
+                                        }}
+                                    >
+                                        {langdetect == 'en' ? 'Filter' : 'فلترة'}
+                                    </p>
+                                </div>
+                                <div className="col-lg-3 col-md-3 col-sm-3 d-flex d-md-none align-items-center justify-content-end p-0">
+                                    <div
+                                        className={`${filterstyles.close_menu_icon_cont} ${filter_cssstyles.close_menu_icon_cont}` + ' d-none d-md-flex align-items-center justify-content-center '}
+                                        onClick={() => {
+                                            var element = document.getElementById('filterslider');
+                                            element.classList.remove(filterstyles.filterslider_container_opened);
+                                        }}
+                                    >
+                                        <i className="h-100 d-flex align-items-center justify-content-center">
+                                            <IoMdClose
+                                                size={sectionproperties.closeSlider_fontSize}
+                                                style={{
+                                                    color: sectionproperties.closeSlider_color,
+                                                }}
+                                            />
+                                        </i>
+                                    </div>
+                                </div>
+                                <div className="col-lg-12">
+                                    <hr className="mt-2 mb-3" />
+                                </div>
+                                <div className={filter_cssstyles.filteraccordion + ' col-lg-12 filter-accordion p-md-0 pl-4 pr-4 '}>
+                                    {sectionproperties.showcountriesfilter == 'Show' && Countriesfilter()}
+                                    {sectionproperties.filterType == 'All' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100">{CategoriesFilter()}</div>}
+                                    {sectionproperties.filterType == 'Collections' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100">{CollectionsFilter()}</div>}
+                                    {sectionproperties.showdynamicfilter == 'Show' && <div class="row m-0 w-100">{DynamicFilter()}</div>}
+                                    {sectionproperties.showvariantsfilter == 'Show' && InstFilters()}
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    <div className="col-lg-12">
+                        <Offcanvas
+                            show={props?.openFilterSlider}
+                            onHide={() => {
+                                props.setopenFilterSlider(false);
+                            }}
+                            placement="end"
+                            scroll={true}
+                            style={{
+                                minWidth: '200px',
+                                background: sectionproperties.filter_backgroundcolor,
+                                borderRadius: sectionproperties.filter_borderBottomLeftRadius + 'px',
+                            }}
+                            backdrop={true}
+                        >
+                            <Offcanvas.Header>
+                                <Offcanvas.Title>
+                                    <div className="row m-0 w-100 mt-2">
+                                        <div className="col-lg-9 col-md-9 col-sm-9 d-none align-items-center d-md-flex">
+                                            <p
+                                                className="m-0 p-0  font-16 font-weight-600"
+                                                style={{
+                                                    color: sectionproperties.filter_titlecolor,
+                                                    fontSize: sectionproperties.filter_titlefontsize + 'px',
+                                                    fontWeight: sectionproperties.filter_titlefontweight,
+                                                    textTransform: sectionproperties.filter_titletextransform,
+                                                }}
+                                            >
+                                                {langdetect == 'en' ? 'Filter' : 'فلترة'}
+                                            </p>
+                                        </div>
+                                        <div className="col-lg-3 col-md-3 col-sm-3 d-none d-md-flex align-items-center justify-content-end p-0">
+                                            <div
+                                                className={
+                                                    `${filterstyles.close_menu_icon_cont} ${filter_cssstyles.close_menu_icon_cont}` + ' d-none d-md-flex align-items-center justify-content-center '
+                                                }
+                                                onClick={() => {
+                                                    props.setopenFilterSlider(false);
+                                                }}
+                                            >
+                                                <i className="h-100 d-flex align-items-center justify-content-center">
+                                                    <IoMdClose
+                                                        size={sectionproperties.closeSlider_fontSize}
+                                                        style={{
+                                                            color: sectionproperties.closeSlider_color,
+                                                        }}
+                                                    />
+                                                </i>
+                                            </div>
+                                        </div>
+                                        <div class="col-lg-12 p-0">
+                                            <hr class="mt-2 mb-2" />
+                                        </div>
+                                    </div>
+                                </Offcanvas.Title>
+                            </Offcanvas.Header>
+                            <Offcanvas.Body>
+                                <div
+                                    className={' pb-md-5 '}
+                                    style={{
+                                        background: sectionproperties.filter_backgroundcolor,
+                                        borderRadius: sectionproperties.filter_borderBottomLeftRadius + 'px',
+                                    }}
+                                >
+                                    <div className={filter_cssstyles.filteraccordion + ' row m-0 w-100 pt-2 pb-3 filter-accordion '}>
+                                        {sectionproperties.otherfilters == 'Show' &&
+                                            otherfilters.map((item, index) => {
+                                                return (
+                                                    <>
+                                                        <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]} style={{ width: '100%' }}>
+                                                            <AccordionItem uuid={index}>
+                                                                <AccordionItemHeading>
+                                                                    <AccordionItemButton>
+                                                                        <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3  '}>
+                                                                            <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+                                                                                <p
+                                                                                    className={
+                                                                                        langdetect == 'en'
+                                                                                            ? filter_cssstyles.collapsetitle + ' m-0 p-0 '
+                                                                                            : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'
+                                                                                    }
+                                                                                >
+                                                                                    {item.name}
+                                                                                </p>
+                                                                            </div>
+                                                                            <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                                                                <AccordionItemState>
+                                                                                    {(state) => {
+                                                                                        if (state.expanded == true) {
+                                                                                            return (
+                                                                                                <i
+                                                                                                    className={
+                                                                                                        filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '
+                                                                                                    }
+                                                                                                >
+                                                                                                    <FiChevronUp />
+                                                                                                </i>
+                                                                                            );
+                                                                                        } else {
+                                                                                            return (
+                                                                                                <i
+                                                                                                    className={
+                                                                                                        filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '
+                                                                                                    }
+                                                                                                >
+                                                                                                    <FiChevronDown />
+                                                                                                </i>
+                                                                                            );
+                                                                                        }
+                                                                                    }}
+                                                                                </AccordionItemState>
+                                                                            </div>
+                                                                        </div>
+                                                                    </AccordionItemButton>
+                                                                </AccordionItemHeading>
+                                                                <AccordionItemPanel className="p-0">
+                                                                    <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex">
+                                                                        <div className={'col-lg-12'}>
+                                                                            <div
+                                                                                className={
+                                                                                    langdetect == 'en'
+                                                                                        ? `${filterstyles.timeline}` + ' p-sm-0 '
+                                                                                        : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+                                                                                }
+                                                                            >
+                                                                                {item.filterarray.map((valueitem, valueindex) => {
+                                                                                    var ischecked = false;
+                                                                                    if (item.payloadvalue == 'sortprice') {
+                                                                                        if (valueitem.value == ProductFilterObjContext.sortprice) {
+                                                                                            ischecked = true;
+                                                                                        }
+                                                                                    } else if (item.payloadvalue == 'sortdates') {
+                                                                                        if (valueitem.value == ProductFilterObjContext.sortdates) {
+                                                                                            ischecked = true;
+                                                                                        }
+                                                                                    }
+                                                                                    return (
+                                                                                        <div
+                                                                                            className={
+                                                                                                `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${
+                                                                                                    filter_cssstyles.timelineinnercont
+                                                                                                }
+                                                                ${ischecked ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+                                                                         
+                                                                            ` + ' d-flex align-items-center pb-3 '
+                                                                                            }
+                                                                                            onClick={() => {
+                                                                                                // setfilterfunc(valueitem.valueid, valueindex, index, 'assign');
+                                                                                                var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                                                                                if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
+                                                                                                    tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
+                                                                                                } else {
+                                                                                                    tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
+                                                                                                }
+                                                                                                setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+                                                                                            }}
+                                                                                        >
+                                                                                            <div>
+                                                                                                <div
+                                                                                                    className={
+                                                                                                        ` ${ischecked ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${
+                                                                                                            filter_cssstyles.btn_item
+                                                                                                        }` + ' d-flex align-items-center '
+                                                                                                    }
+                                                                                                >
+                                                                                                    <i className="h-100 d-flex align-items-center"></i>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                            <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                                                                <p
+                                                                                                    className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+                                                                                                    style={{
+                                                                                                        color: ischecked ? sectionproperties.activecat_color : '',
+                                                                                                    }}
+                                                                                                >
+                                                                                                    {valueitem.name}
+                                                                                                </p>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    );
+                                                                                })}
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </AccordionItemPanel>
+                                                            </AccordionItem>
+                                                        </Accordion>
+                                                        {/* <hr className="mt-3 mb-3" /> */}
+                                                    </>
+                                                );
+                                            })}
+                                        {sectionproperties.otherfilters == 'Show' && (
+                                            <div className="col-lg-12 p-0">
+                                                <hr className="mt-2 mb-3" />
+                                            </div>
+                                        )}
+                                        <div className={filter_cssstyles.filteraccordion + ' col-lg-12 filter-accordion p-md-0 '}>
+                                            {sectionproperties.showcountriesfilter == 'Show' && Countriesfilter()}
+                                            {sectionproperties.filterType == 'All' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100">{CategoriesFilter()}</div>}
+                                            {sectionproperties.filterType == 'Collections' && sectionproperties.showcategoriesfilter == 'Show' && (
+                                                <div class="row m-0 w-100">{CollectionsFilter()}</div>
+                                            )}
+                                            {sectionproperties.showdynamicfilter == 'Show' && <div class="row m-0 w-100">{DynamicFilter()}</div>}
+                                            {sectionproperties.showvariantsfilter == 'Show' && InstFilters()}
+                                        </div>
+                                    </div>
+                                </div>
+                            </Offcanvas.Body>
+                        </Offcanvas>
+                    </div>
+                </div>
+            )}
+
+            {props.typeprops == 'vertical' && (
+                <div className={'col-lg-12 p-0 w-100 filter mt-md-0 d-md-none'}>
+                    <div
+                        className={`${filterstyles.filterslider_container}` + ' pb-md-5 '}
+                        id="filterslider"
+                        style={{
+                            background: sectionproperties.filter_backgroundcolor,
+                            borderRadius: sectionproperties.filter_borderBottomLeftRadius + 'px',
+                        }}
+                    >
+                        <div className={filter_cssstyles.filteraccordion + ' row m-0 w-100 pt-2 pb-3 filter-accordion '}>
+                            <div className="col-lg-9 col-md-9 col-sm-9 d-none align-items-center d-md-flex">
+                                <p
+                                    className="m-0 p-0  font-16 font-weight-600"
+                                    style={{
+                                        color: sectionproperties.filter_titlecolor,
+                                        fontSize: sectionproperties.filter_titlefontsize + 'px',
+                                        fontWeight: sectionproperties.filter_titlefontweight,
+                                        textTransform: sectionproperties.filter_titletextransform,
+                                    }}
+                                >
+                                    {langdetect == 'en' ? 'Filter' : 'فلترة'}
+                                </p>
+                            </div>
+                            <div className="col-lg-3 col-md-3 col-sm-3 d-none d-md-flex align-items-center justify-content-end p-0">
+                                <div
+                                    className={`${filterstyles.close_menu_icon_cont} ${filter_cssstyles.close_menu_icon_cont}` + ' d-none d-md-flex align-items-center justify-content-center '}
+                                    onClick={() => {
+                                        var element = document.getElementById('filterslider');
+                                        element.classList.remove(filterstyles.filterslider_container_opened);
+                                    }}
+                                >
+                                    <i className="h-100 d-flex align-items-center justify-content-center">
+                                        <IoMdClose
+                                            size={sectionproperties.closeSlider_fontSize}
+                                            style={{
+                                                color: sectionproperties.closeSlider_color,
+                                            }}
+                                        />
+                                    </i>
+                                </div>
+                            </div>
+                            {/* {sectionproperties.otherfilters == 'Show' && (
+                                <div class="row m-0 w-100">
+                                    <div class="col-lg-12 d-flex justify-content-start">
+                                        <p
+                                            className="m-0 p-0 font-16 font-weight-600"
+                                            style={{
+                                                color: sectionproperties.filter_titlecolor,
+                                                fontSize: sectionproperties.filter_titlefontsize + 'px',
+                                                fontWeight: sectionproperties.filter_titlefontweight,
+                                                textTransform: sectionproperties.filter_titletextransform,
+                                            }}
+                                        >
+                                            {langdetect == 'en' ? 'Sort By' : 'ترتيب حسب'}
+                                        </p>
+                                    </div>
+                                    <div className="col-lg-12">
+                                        <hr className="mt-2 mb-3" />
+                                    </div>
+                                    {otherfilters.map((item, index) => {
+                                        return (
+                                            <div className="col-lg-12 pl-4 pr-4">
+                                                <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]} style={{ width: '100%' }}>
+                                                    <AccordionItem uuid={index}>
+                                                        <AccordionItemHeading>
+                                                            <AccordionItemButton>
+                                                                <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3  '}>
+                                                                    <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+                                                                        <p
+                                                                            className={
+                                                                                langdetect == 'en'
+                                                                                    ? filter_cssstyles.collapsetitle + ' m-0 p-0 collapsetitle '
+                                                                                    : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
+                                                                            }
+                                                                        >
+                                                                            {item.name}
+                                                                        </p>
+                                                                    </div>
+                                                                    <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                                                        <AccordionItemState>
+                                                                            {(state) => {
+                                                                                if (state.expanded == true) {
+                                                                                    return (
+                                                                                        <i
+                                                                                            className={
+                                                                                                filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '
+                                                                                            }
+                                                                                        >
+                                                                                            <FiChevronDown />
+                                                                                        </i>
+                                                                                    );
+                                                                                } else {
+                                                                                    return (
+                                                                                        <i className={filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '}>
+                                                                                            <FiChevronUp />
+                                                                                        </i>
+                                                                                    );
+                                                                                }
+                                                                            }}
+                                                                        </AccordionItemState>
+                                                                    </div>
+                                                                </div>
+                                                            </AccordionItemButton>
+                                                        </AccordionItemHeading>
+                                                        <AccordionItemPanel className="p-0">
+                                                            <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex">
+                                                                <div className={'col-lg-12'}>
+                                                                    <div
+                                                                        className={
+                                                                            langdetect == 'en'
+                                                                                ? `${filterstyles.timeline}` + ' p-sm-0 '
+                                                                                : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+                                                                        }
+                                                                    >
+                                                                        {item.filterarray.map((valueitem, valueindex) => {
+                                                                            var ischecked = false;
+                                                                            if (item.payloadvalue == 'sortprice') {
+                                                                                if (valueitem.value == ProductFilterObjContext.sortprice) {
+                                                                                    ischecked = true;
+                                                                                }
+                                                                            } else if (item.payloadvalue == 'sortdates') {
+                                                                                if (valueitem.value == ProductFilterObjContext.sortdates) {
+                                                                                    ischecked = true;
+                                                                                }
+                                                                            }
+                                                                            return (
+                                                                                <div
+                                                                                    className={
+                                                                                        `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+                                                                ${ischecked ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+                                                                         
+                                                                            ` + ' d-flex align-items-center pb-3 '
+                                                                                    }
+                                                                                    onClick={() => {
+                                                                                        var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                                                                        if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
+                                                                                            tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
+                                                                                        } else {
+                                                                                            tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
+                                                                                        }
+                                                                                        tempfetchproductsfilerobjcontext.page = 0;
+                                                                                        setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+
+                                                                                        filterrouting(tempfetchproductsfilerobjcontext);
+                                                                                    }}
+                                                                                >
+                                                                                    <div>
+                                                                                        <div
+                                                                                            className={
+                                                                                                ` ${ischecked ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${
+                                                                                                    filter_cssstyles.btn_item
+                                                                                                }` + ' mb-2 d-flex align-items-center '
+                                                                                            }
+                                                                                        >
+                                                                                            <i className="h-100 d-flex align-items-center"></i>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                    <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                                                        <p
+                                                                                            className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+                                                                                            style={{
+                                                                                                color: ischecked ? sectionproperties.activecat_color : '',
+                                                                                            }}
+                                                                                        >
+                                                                                            {valueitem.name}
+                                                                                        </p>
+                                                                                    </div>
+                                                                                </div>
+                                                                            );
+                                                                        })}
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </AccordionItemPanel>
+                                                    </AccordionItem>
+                                                </Accordion>
+                                            </div>
+                                        );
+                                    })}
+                                    {sectionproperties.showfilterbyrating == 'Show' && (
+                                        <div className="col-lg-12 pl-4 pr-4">
+                                            <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3  '}>
+                                                <div className="col-lg-12 col-md-12 col-sm-12 p-0 mb-3">
+                                                    <p
+                                                        className={
+                                                            langdetect == 'en'
+                                                                ? filter_cssstyles.collapsetitle + ' m-0 p-0 collapsetitle '
+                                                                : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
+                                                        }
+                                                    >
+                                                        {langdetect == 'en' ? 'Ratings' : 'التقييمات'}
+                                                    </p>
+                                                </div>
+                                                <div className="col-lg-12 col-md-12 col-sm-12 mb-4">
+                                                    <InputRange
+                                                        draggableTrack={true}
+                                                        formatLabel={(value) => `${value}`}
+                                                        maxValue={5}
+                                                        minValue={0}
+                                                        value={raterangevalue}
+                                                        onChange={(value) => {
+                                                            setraterangevalue({ ...value });
+                                                        }}
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            )} */}
+
+                            <div className={filter_cssstyles.filteraccordion + ' col-lg-12 filter-accordion p-md-0 pl-4 pr-4 '}>
+                                {sectionproperties.showcountriesfilter == 'Show' && Countriesfilter()}
+                                {sectionproperties.showvariantsfilter == 'Show' && InstFilters()}
+                                {sectionproperties.filterType == 'All' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100 mb-3">{CategoriesFilter()}</div>}
+                                {sectionproperties.filterType == 'Collections' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100 mb-3">{CollectionsFilter()}</div>}
+                                {sectionproperties.showdynamicfilter == 'Show' && <div class="row m-0 w-100 mb-3">{DynamicFilter()}</div>}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-12">
+                        <Offcanvas
+                            show={props?.openFilterSlider}
+                            onHide={() => {
+                                props.setopenFilterSlider(false);
+                            }}
+                            placement="end"
+                            scroll={true}
+                            style={{
+                                minWidth: '200px',
+                                background: sectionproperties.filter_backgroundcolor,
+                                borderRadius: sectionproperties.filter_borderBottomLeftRadius + 'px',
+                            }}
+                            backdrop={true}
+                        >
+                            <Offcanvas.Header>
+                                <Offcanvas.Title>
+                                    {langdetect == 'en' && (
+                                        <div
+                                            class="allcentered"
+                                            style={{
+                                                position: 'absolute',
+                                                left: -34,
+                                                top: 5,
+                                                width: 30,
+                                                height: 30,
+                                                background: '#000',
+                                            }}
+                                            onClick={() => {
+                                                props.setopenFilterSlider(false);
+                                            }}
+                                        >
+                                            <IoMdClose color={'#fff'} size={16} />
+                                        </div>
+                                    )}
+                                    {langdetect == 'ar' && (
+                                        <div
+                                            class="allcentered"
+                                            style={{
+                                                position: 'absolute',
+                                                right: -34,
+                                                top: 5,
+                                                width: 30,
+                                                height: 30,
+                                                background: '#000',
+                                            }}
+                                            onClick={() => {
+                                                props.setopenFilterSlider(false);
+                                            }}
+                                        >
+                                            <IoMdClose color={'#fff'} size={16} />
+                                        </div>
+                                    )}
+                                    <div className="row m-0 w-100 mt-2">
+                                        <div className="col-12 d-none justify-content-center align-items-center d-md-flex my-2">
+                                            <p
+                                                className="m-0 p-0  font-16 font-weight-600"
+                                                style={{
+                                                    color: sectionproperties.filter_titlecolor,
+                                                    fontSize: sectionproperties.filter_titlefontsize + 'px',
+                                                    fontWeight: sectionproperties.filter_titlefontweight,
+                                                    textTransform: sectionproperties.filter_titletextransform,
+                                                }}
+                                            >
+                                                {langdetect == 'en' ? 'Filter & Sort' : 'فلترة'}
+                                            </p>
+                                        </div>
+                                        {/* <div className="col-lg-3 col-md-3 col-sm-3 d-none d-md-flex align-items-center justify-content-end p-0">
+                                            <div
+                                                className={
+                                                    `${filterstyles.close_menu_icon_cont} ${filter_cssstyles.close_menu_icon_cont}` + ' d-none d-md-flex align-items-center justify-content-center '
+                                                }
+                                                onClick={() => {
+                                                    props.setopenFilterSlider(false);
+                                                }}
+                                            >
+                                                <i className="h-100 d-flex align-items-center justify-content-center">
+                                                    <IoMdClose
+                                                        size={sectionproperties.closeSlider_fontSize}
+                                                        style={{
+                                                            color: sectionproperties.closeSlider_color,
+                                                        }}
+                                                    />
+                                                </i>
+                                            </div>
+                                        </div> */}
+                                        <div class="col-lg-12 p-0">
+                                            <hr class="mt-2 mb-2" />
+                                        </div>
+                                    </div>
+                                </Offcanvas.Title>
+                            </Offcanvas.Header>
+                            <Offcanvas.Body>
+                                <div
+                                    className={' pb-md-5 '}
+                                    style={{
+                                        background: sectionproperties.filter_backgroundcolor,
+                                        borderRadius: sectionproperties.filter_borderBottomLeftRadius + 'px',
+                                    }}
+                                >
+                                    <div className={filter_cssstyles.filteraccordion + ' row m-0 w-100 pt-2 pb-3 filter-accordion '}>
+                                        {/* {sectionproperties.otherfilters == 'Show' &&
+                                            otherfilters.map((item, index) => {
+                                                return (
+                                                    <> */}
+                                        <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]} style={{ width: '100%' }}>
+                                            <AccordionItem uuid={0}>
+                                                <AccordionItemHeading>
+                                                    <AccordionItemButton>
+                                                        <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3  '}>
+                                                            <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+                                                                <p
+                                                                    className={
+                                                                        langdetect == 'en' ? filter_cssstyles.collapsetitle + ' m-0 p-0 ' : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'
+                                                                    }
+                                                                >
+                                                                    {lang.sortby}
+                                                                </p>
+                                                            </div>
+                                                            <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                                                <AccordionItemState>
+                                                                    {(state) => {
+                                                                        if (state.expanded == true) {
+                                                                            return (
+                                                                                <i className={filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '}>
+                                                                                    <FiChevronUp />
+                                                                                </i>
+                                                                            );
+                                                                        } else {
+                                                                            return (
+                                                                                <i className={filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '}>
+                                                                                    <FiChevronDown />
+                                                                                </i>
+                                                                            );
+                                                                        }
+                                                                    }}
+                                                                </AccordionItemState>
+                                                            </div>
+                                                        </div>
+                                                    </AccordionItemButton>
+                                                </AccordionItemHeading>
+                                                <AccordionItemPanel className="p-0">
+                                                    <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex">
+                                                        <div className={'col-lg-12'}>
+                                                            <div
+                                                                className={
+                                                                    langdetect == 'en' ? `${filterstyles.timeline}` + ' p-sm-0 ' : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+                                                                }
+                                                            >
+                                                                {otherfilters.map((item, index) => {
+                                                                    return (
+                                                                        <div class="w-100 px-3">
+                                                                            {item.filterarray.map((valueitem, valueindex) => {
+                                                                                var ischecked = false;
+                                                                                if (item.payloadvalue == 'sortprice') {
+                                                                                    if (valueitem.value == ProductFilterObjContext.sortprice) {
+                                                                                        ischecked = true;
+                                                                                    }
+                                                                                } else if (item.payloadvalue == 'sortdates') {
+                                                                                    if (valueitem.value == ProductFilterObjContext.sortdates) {
+                                                                                        ischecked = true;
+                                                                                    }
+                                                                                }
+                                                                                return (
+                                                                                    <div
+                                                                                        className={
+                                                                                            `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+                                                                                                        ${
+                                                                                                            ischecked
+                                                                                                                ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}`
+                                                                                                                : ''
+                                                                                                        }
+                                                                                                        ` + ' d-flex align-items-center pb-3 '
+                                                                                        }
+                                                                                        onClick={() => {
+                                                                                            var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                                                                            if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
+                                                                                                tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
+                                                                                            } else {
+                                                                                                tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
+                                                                                            }
+                                                                                            tempfetchproductsfilerobjcontext.page = 0;
+                                                                                            setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+
+                                                                                            filterrouting(tempfetchproductsfilerobjcontext);
+                                                                                            setsortbycontext(valueitem.name);
+                                                                                        }}
+                                                                                    >
+                                                                                        <div
+                                                                                            className={
+                                                                                                ` ${ischecked ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${
+                                                                                                    filter_cssstyles.btn_item
+                                                                                                }` + ' d-flex align-items-center '
+                                                                                            }
+                                                                                        >
+                                                                                            <i className="h-100 d-flex align-items-center"></i>
+                                                                                        </div>
+                                                                                        <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                                                            <p
+                                                                                                className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+                                                                                                style={{
+                                                                                                    color: ischecked ? sectionproperties.activecat_color : '',
+                                                                                                }}
+                                                                                            >
+                                                                                                {valueitem.name}
+                                                                                            </p>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                );
+                                                                            })}
+                                                                        </div>
+                                                                    );
+                                                                })}
+                                                                {/* {item.filterarray.map((valueitem, valueindex) => {
+                                                                                    var ischecked = false;
+                                                                                    if (item.payloadvalue == 'sortprice') {
+                                                                                        if (valueitem.value == ProductFilterObjContext.sortprice) {
+                                                                                            ischecked = true;
+                                                                                        }
+                                                                                    } else if (item.payloadvalue == 'sortdates') {
+                                                                                        if (valueitem.value == ProductFilterObjContext.sortdates) {
+                                                                                            ischecked = true;
+                                                                                        }
+                                                                                    }
+                                                                                    return (
+                                                                                        <div
+                                                                                            className={
+                                                                                                `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${
+                                                                                                    filter_cssstyles.timelineinnercont
+                                                                                                }
+                                                                ${ischecked ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+                                                                         
+                                                                            ` + ' d-flex align-items-center pb-3 '
+                                                                                            }
+                                                                                            onClick={() => {
+                                                                                                // setfilterfunc(valueitem.valueid, valueindex, index, 'assign');
+                                                                                                var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                                                                                if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
+                                                                                                    tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
+                                                                                                } else {
+                                                                                                    tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
+                                                                                                }
+                                                                                                setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+                                                                                            }}
+                                                                                        >
+                                                                                            <div>
+                                                                                                <div
+                                                                                                    className={
+                                                                                                        ` ${ischecked ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${
+                                                                                                            filter_cssstyles.btn_item
+                                                                                                        }` + ' mb-2 d-flex align-items-center '
+                                                                                                    }
+                                                                                                >
+                                                                                                    <i className="h-100 d-flex align-items-center"></i>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                            <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                                                                <p
+                                                                                                    className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+                                                                                                    style={{
+                                                                                                        color: ischecked ? sectionproperties.activecat_color : '',
+                                                                                                    }}
+                                                                                                >
+                                                                                                    {valueitem.name}
+                                                                                                </p>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    );
+                                                                                })} */}
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </AccordionItemPanel>
+                                            </AccordionItem>
+                                        </Accordion>
+                                        {/* <hr className="mt-3 mb-3" /> */}
+                                        {/* </>
+                                                );
+                                            })} */}
+                                        {sectionproperties.otherfilters == 'Show' && (
+                                            <div className="col-lg-12 p-0">
+                                                <hr className="mt-2 mb-3" />
+                                            </div>
+                                        )}
+                                        <div className={filter_cssstyles.filteraccordion + ' col-lg-12 filter-accordion p-md-0 '}>
+                                            {sectionproperties.showcountriesfilter == 'Show' && Countriesfilter()}
+                                            {sectionproperties.filterType == 'All' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100">{CategoriesFilter()}</div>}
+                                            {sectionproperties.filterType == 'Collections' && sectionproperties.showcategoriesfilter == 'Show' && (
+                                                <div class="row m-0 w-100">
+                                                    {CollectionsFilter()}
+                                                    <div className="col-lg-12 p-0">
+                                                        <hr className="mt-2 mb-3" />
+                                                    </div>
+                                                </div>
+                                            )}
+                                            {sectionproperties.showdynamicfilter == 'Show' && (
+                                                <div class="row m-0 w-100">
+                                                    {DynamicFilter()}
+                                                    <div className="col-lg-12 p-0">
+                                                        <hr className="mt-2 mb-3" />
+                                                    </div>
+                                                </div>
+                                            )}
+                                            {sectionproperties.showvariantsfilter == 'Show' && (
+                                                <div class="row m-0 w-100">
+                                                    {InstFilters()}
+                                                    <div className="col-lg-12 p-0">
+                                                        <hr className="mt-2 mb-3" />
+                                                    </div>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            </Offcanvas.Body>
+                        </Offcanvas>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+export default Filter;