<div class="notranslate" id="json_event" style="display: none;">[]</div>
<link rel="stylesheet"  href="/wp-content/plugins/fooevents-calendar/css/fullcalendar.min.css" type="text/css" media="all">
<link rel="stylesheet" href="/wp-content/plugins/fooevents-calendar/css/fooevents-fullcalendar-minimalist.css" type="text/css" media="all">

<style>

.events_content {
    min-height: 500px;
}
.filter_menu_events {
    position: relative;
    z-index: 350;
    margin-bottom: 30px;
    width: 100%;
    background: #F8F7F9;
    box-shadow: 0px 12px 14px rgba(0, 0, 0, 0.16);
    width: 100vw;
    margin-left: calc(-50vw + 49.3%);
}
.fooevents-calendar-list .fooevents-calendar-list-item{
    min-height: 405px!important;
}
.event-img-dt {
    min-height: 405px!important;
    background-size: cover;
}
.filter_menu_events ul {
    z-index: 999;
}
.filter_menu_events > ul {
    display: flex;
    position: relative;
    justify-content: space-between;
    max-width: 1080px;
    width: 89%;
    margin: 0 auto;
}
.filter_menu_events ul li {
    color: #000000;
    font-family: "PFAgoraSansPro-Medium", Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    padding: 20px 40px 18px 19px;
}

.filter_menu_events ul ul li:hover{
    background: #F8F7F9;
}
.filter_menu_events ul li ul li:hover:after {
    border-top: 2px solid #96001e;
    border-right: 2px solid #96001e;
}

.filter_menu_events ul ul ul li{
    border-left: 1px solid #9A91A1;
}
.filter_menu_events ul ul li:first-child{
    border: 0;
    text-transform: capitalize;
}
.filter_menu_events > ul > li {
    width: 220px;
}
.filter_menu_events ul > li {
    position: relative;
}
.filter_menu_events > ul > li:hover {
    box-shadow: 0px 10px 30px rgba(100, 23, 23, 0.12), inset 0px 0px 0px 1px #FBF4F4;
    background: #fff;
}
.filter_menu_events .arrow_events:after{
    /* content:""; */
    /* display: block;
    width: 9px;
    height: 9px;
    transition: 0.3s;
    cursor: pointer;
    border-top: 2px solid #96001e;
    border-right: 2px solid #96001e;
    position: absolute;
    top: 56%;
    right: 20px;
    z-index: 1;
    transform: translateY(-110%) rotate(135deg); */
}

.filter_menu_events > ul > .arrow_events:hover::after{
    top: 45%;
    transform: translateY(-0%) rotate(-45deg);
}
.filter_menu_events ul ul {
    position: absolute;
    display: none;
    background: #FFFFFF;
    top: 100%;
    left: 0;
    width: 310px;
    box-shadow: 0px 12px 14px rgba(0, 0, 0, 0.16);
}

.filter_menu_events .country ul{
    position: absolute;
    left: 0;
    top: 100%;
    width: 300px;
    left: calc(-300px - -100%);
    display: none;
    background: #FFFFFF;
}
.filter_menu_events ul > li > ul > li,
.filter_menu_events .country:not(:first-child),
.filter_menu_events .country li:not(:first-child) {
    cursor: pointer;
    font-weight: 500;
    align-items: center;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    position: relative;
}

#wine_type li:first-child:after,
.filter_menu_events > ul > li li:not(:first-child):after {
    transform: rotate(45deg);
    position: static;
    border-top: 2px solid #BDB9C0;
    border-right: 2px solid #BDB9C0;
}
.filter_menu_events ul  li:hover > ul {
    display: block;

}
.filter_menu_events ul > li > ul > li span {
    position: absolute;
    right: 52px;
    color: #BDB9C0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}
.filter_menu_events .country  ul ul ul,
.filter_menu_events .country  ul ul{
    left: 100%;
    top: 0;
}
.filter_menu_events ul ul {
    border-radius: 0px 0px 8px 8px;
}
.filter_menu_events .cross {
    display: none;
}
.filter_menu_events .checkmark ul li {
    padding: 20px 10px;
    text-transform: capitalize;
}
.filter_menu_events .checkmark ul ul {
    top: 50%;
    left: 100%;
}
.filter_menu_events .disable:after {
    display: none;
}
.filter_menu_events .active > a  {
    color: #96001E;
    text-decoration: underline;
}
.filter_menu_events .text_filter {
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}
.filter_menu_events .country:first-child{
    font-size: 14px;
    color: #BDB9C0;
    font-weight: 900;
}

.filter_menu_events .text_filter a{
    white-space: nowrap;
    color: #96001E;
    /* width: calc(100% - 20px); */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filter_menu_events .text_filter .cross{
    display: block;
}
.filter_menu_events .text_filter .cross:after {
    border: 1px solid #96001E;
    transform: rotate(135deg);
}
.filter_menu_events .text_filter .cross::before {
    border: 1px solid #96001E;
    transform: rotate(45deg);
}
.filter_menu_events .text_filter .cross {
    position: relative;
    float: left;
    /* right: 15%;
    top: 16%;
    bottom: 0; */
    margin: auto 0;
    width: 20px;
    cursor: pointer;
    height: 20px;
    padding-top: 5px;
}

.filter_menu_events .text_filter .cross:after, .filter_menu_events .text_filter .cross:before {
    position: absolute;
    left: 10px;
    content: ' ';
    height: 12px;
    width: 1px;
    background-color: #333;
}
.filter_menu_events .text_filter .cross:after:before {
    transform: rotate(45deg);
}
.filter_menu_events .text_filter .cross:after:after {
    transform: rotate(-45deg);
}
.filter_menu_events .year_value{
    display: flex;
    justify-content: space-around;
}
.country ul li:first-child{
    text-transform: uppercase;
    color: #BDB9C0;
}
.filter_menu_events .scroll {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 5px;
    z-index: 4;
    pointer-events: none;
}
.filter_menu_events .scroll div {
    position: absolute;
    background: #BDB9C0;
    height: 100px;
    width: 5px;
    border-radius: 10px;
}
.events_content .event_head,
.events_content .event_desc,
.events_content .ev_attr,
.events_content .ev_btm_cont {
    width: calc(100% - 290px)
}


.ev_attr{
    padding-bottom: 20px;
    top: 170px;
}
.fooevents-calendar-list .fooevents-calendar-list-item a.button{
    padding: 14px 30px !important;
}

.event_btn p a.button:hover{
   background: #96001E !important;
   border-color: #96001E !important;
   color: #fff !important;
}

.filter_menu_events>ul li li:first-child:hover{
    border-top-left-radius: 8px;
}

.filter_menu_events>ul li li:last-child:hover{
    border-bottom-left-radius: 8px;
}

/* sort */
.count_all_post,
.count_all_post span{
    color: #9A91A1;
}
.country ul li:first-child{
    font-variant: normal;
    font-family: "PFAgoraSansPro-Medium", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.4;
}


/* Media */
@media (min-width: 1000px){
    .events_content .event_head, .events_content .event_desc, .events_content .ev_attr, .events_content .ev_btm_cont{
        left: 290px;
        max-width: 850px !important;
    }
}

@media (min-width: 900px){

    .filter_menu_events > ul > li{
        display: flex;
        justify-content: center !important;
    }

    #language > a,
    #month > a,
    #tag > a,
    #price > a{
        position: relative;
    }

    #language > a:after,
    #month > a:after,
    #tag > a:after,
    #price > a:after{
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    transition: 0.3s;
    cursor: pointer;
    border-top: 2px solid #96001e;
    border-right: 2px solid #96001e;
    position: absolute;
    top: 72%;
    left: 120%;
    z-index: 1;
    transform: translateY(-110%) rotate(135deg);
    }

    #language:hover .link__arrow::after,
    #month:hover .link__arrow::after,
    #tag:hover .link__arrow::after,
    #price:hover .link__arrow::after{
        top: 42%;
        transform: translateY(-0%) rotate(-45deg)!important;
    }

}

@media  (max-width: 768px){

    .events_content .event_head, .events_content .event_desc, .events_content .ev_attr, .events_content .ev_btm_cont{
        width: 100%;
    }
    .event_head{
        bottom: 250px;
    }
    .ev_attr {
        top: 430px;
        grid-template-rows: 70px;
        padding-bottom: 15px;
    }
    .event-img-dt{
        min-height: 300px !important;
        max-width: 100%;
    }
    .fooevents-calendar-list .fooevents-calendar-list-item{
        min-height: 665px !important;
    }
    .eventsMainColumn {
        padding: 0px 20px;
    }
    /*Bottom */ 
    .columnFTwrap{
        column-count: 2;
    }
    .ft_menu > li > a {
    margin-bottom: 12px;
  
}
}
@media (max-width: 576px){
    .eventsMainColumn {
    padding: 0px 15px;
    }
    .ev_atr_titl{
        font-size: 12px;
    }
    .ev_atr_data{
        font-size: 14px;
    }
    .ev_price > span > bdi{
        font-size: 22px;
    }
    .pers{
        font-size: 14px;
    }
    
    .fooevents-calendar-list .fooevents-calendar-list-item h3{
        font-size: 22px!important;
        max-height: 50px;
    }
    .fooevents-calendar-list .fooevents-calendar-list-item a.button{
        font-size: 16px;
    }
    .fooevents-calendar-list .fooevents-calendar-list-item {
        margin-bottom: 25px;
    }

}

@media (max-width: 900px) {

.whb-general-header {
    margin-top: 0px !important;
}

  .shop-loop-head{
    margin-top: 5px;
    margin-left: 15px;
}

.filter_menu_events ul li {
    width: 100%;
}
#region_hide, 
#wine_hide, 
#vendor_hide, 
#vintage_hide, 
#bottle_hide, 
#price_hide {
    width: 100%;
}
.filter_menu_events .bg,
.filter_menu_events .clear_div,
.header_slide_menu {
    display: block;
}
.filter_menu_events ul .arrow:after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    transition: 0.3s;
    cursor: pointer;
    border-top: 2px solid #96001e;
    border-right: 2px solid #96001e;
    position: absolute;
    top: 57%;
    right: 27px;
    z-index: 1;
    transform: translateY(-110%) rotate(135deg);
}



.filter_menu_events>ul>.arrow:hover::after {
    top: 45%;
    transform: translateY(-0%) rotate(-45deg);
}
.container {
    padding: 0;
}

.filter_menu_events {
    position: fixed;
    top: 0px;
    z-index: 999999;
    background: transparent;
}

.filter_menu_events .bg {
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 1;
    background: #000000;
    opacity: 0.2;
} 

.filter_menu_events .clear_div {
    position: relative;
    z-index: 2;
    height: 50px;
    background-color: #F8F7F9;
}
.clear_div{

}

.filter_menu_events .clear_div>div {
    display: flex;
    align-items: center;
    height: 100%;
}

.filter_menu_events .clear_div span:last-child {
    text-align: right;
    padding-right: 30px;
}

.filter_menu_events .clear_div>div span {
    width: 50%;
}

.filter_menu_events .clear_div .text_filter_ {
    position: absolute;
    left: calc(20% + 40px);
    font-size: 14px;
    font-weight: 900;
    line-height: 130%;
    text-transform: uppercase;
    color: #000000;
    font-family: 'PFAgoraSansPro-Black', Arial, Helvetica, sans-serif;
    font-variant: all-small-caps;
}

.filter_menu_events ul {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 100vh;
    width: 80%;
    z-index: 10;
    margin-right: 0;
    background: #fff;
}

.filter_menu_events ul ul {
    width: 100%;
}

/* .filter_menu > ul li {
                width: 100% !important;
            }
             */
.filter_menu_events>ul>li {
    max-width: 100% !important;
}

#wine_type {
    z-index: 10
}

#wine_hide {
    z-index: 8;
}

#country li:first-child {
    font-size: 12px;
    font-weight: 900;
    margin-top: -5px;
    margin-bottom: -5px;
}

#region_hide {
    z-index: 3;
}

#bottle_hide>ul {
    left: 0;
}

.filter_menu_events .country ul {
    width: 100%;
    left: 0;
    margin: 0;
}

#country>li>ul {
    display: block;
}

.active_menu ul {
    top: 0 !important;
}

.filter_menu_events #country ul li.active_menu ul {
    top: 0 !important;
    display: block;
}

.filter_menu_events .active_menu {
    height: 100%;
}

.filter_menu_events .active_menu>ul {
    height: calc(100% - 50px);
}

.filter_menu_events ul>li>ul>li,
.filter_menu_events .country,
.filter_menu_events .country li {
    border: none;
}

.filter_menu_events {
    display: none;
    z-index: 999999;
    top: 60px !important;
}

.custom_arrow {
    width: 20px;
    height: 20px;
    background: url('/wp-content/themes/woodmart/images/Rectangle 14.svg');
    background-size: 100%;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center right;
    margin: 0 !important;
    right: 0;
    left: calc(100% + 10px) !important;
    top: 0;
    bottom: 0;
    position: absolute !important;
}

.filter_menu_events #country>li>ul {
    position: absolute !important;
    left: 120% !important;
}

#wine_type>li>ul.left_position,
.filter_menu_events #country .left_position {
    left: 0 !important;
    top: 0 !important;
}

.filter_menu_events ul>li>ul>li span {
    position: relative;
    left: -10%;
}

.filter_menu_events #country>li>ul .left_position_2 {
    left: -120% !important;
    z-index: 3213213;
}

.filter_menu_events .country ul ul ul,
.filter_menu_events .country ul ul {
    left: 120%;
}

.filter_menu_events ul li.active_menu {
    position: absolute !important;
    top: 0 !important;
    z-index: 10990 !important;
}

.filter_filter_menu_eventsmenu .wine_type ul ul {
    left: 120% !important;
}

.filter_menu_events #wine_hide {
    left: 0;
}

.filter_menu_events>ul>li {
    padding: 14px 30px 14px 40px !important;
}

.filter_menu_events ul ul li {
    padding: 0 30px 0 40px !important;
}

#wine_type li:first-child:after,
.filter_menu_events>ul>li li:not(:first-child):after {
    content: '';
    display: none;
}

.clear_div #prev_menu {
    text-transform: capitalize;
    position: absolute;
    top: 0;
    width: 80%;
    right: -12px;
    background: url('/wp-content/themes/woodmart/images/Arrow-Right.svg');
    background-color: #F8F7F9;
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 35px 20px;
    padding-left: 30px;
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    font-style: normal;
    color: #000000;
    font-family: 'PFAgoraSansPro-Medium', Arial, Helvetica, sans-serif;
}

.clear_div #prev_menu:empty {
    display: none;
}

.filter_menu_events li {
    justify-content: space-between !important;
}

.filter_menu_events ul .arrow:after {
    transform: translateY(-110%) rotate(45deg);
    right: 30px;
}

.filter_menu_events ul a {
    font-size: 14px;
}

#count_head_slof,
.filter_menu_events #count_filter {
    color: #96001E;
    font-size: 14px;
    font-weight: 900;
    font-family: 'PFAgoraSansPro-Black', Arial, Helvetica, sans-serif;
    line-height: 130%;
    text-align: left;
    padding-left: 2px;
}

.filter_menu_events #clear_all {
    color: #BDB9C0;
    font-size: 12px;
    line-height: 120%;
    font-weight: 500;
}

.filter_menu_events .closet_menu {
    position: absolute;
    width: 20%;
    left: 0;
    height: 50px;
    background-image: url('/wp-content/themes/woodmart/images/cancel-close-cross-delete.svg');
    background-color: #F8F7F9;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
}

.filter_menu_events .punct_menu>ul {
    height: calc(100% - 50px);
    overflow: auto;
}

.filter_menu_events ul {
    box-shadow: none !important;
}

.header_slide_menu {
    position: fixed;
    top: 60px;
    background: #fff;
    display: flex;
    height: 50px;
    width: 100%;
    z-index: 9999;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 8px 16px rgba(100, 23, 23, 0.12);
    background-color: #F8F7F9;
}

.header_slide_menu>div {
    width: 50%;
    font-size: 12px;
    font-family: 'PFAgoraSansPro-Black', Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 900;
    display: flex;
    height: 80%;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-variant: all-small-caps;
    padding-left:10px;
}

.header_slide_menu>div:first-child {
    border-right: solid #BDB9C0 1px;
}

.header_slide_menu>div:last-child {
    border-left: solid silver 1px;
}

.filter_menu .text_filter .cross {
    margin-right: -6px;
    right: 23px;
}

#select_custom_js .select_custom_main {
    display: none;
}

.fixed_sort_list {
    position: fixed !important;
    width: 100px;
    display: block !important;
    width: 100%;
    left: 0;
    top: 100px;
    padding: 20px 0;
}

#open_sort.active_sort {
    color: #96001E;
    background-image: url('/wp-content/themes/woodmart/images/cancel-close-cross-delete.svg');
    background-color: #F8F7F9;
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 26px 20px;
    text-overflow: ellipsis;
    padding-right: 20px;
    margin-left: 5px;
}

.whb-sticky-header.whb-clone.whb-main-header.whb-sticked {
    top: 0;
}
.whb-flex-row.whb-general-header-inner {
    padding: 0 15px !important;
}

.products{
    padding: 0 47px !important;
}
}


</style>
<div class="header_slide_menu">
        <div id="open_sort">sort by</div>
        <div id="open_filter">filter by<span id="count_head_slof"></span></div>
    </div>
<nav class="filter_menu_events">
    <ul data-class="not">
        <li class="checkmark arrow_events punct_menu"  id="language"><a class="link__arrow"  href="#">Language</a>
        <span class="cross" data-text="Language"></span>
            <ul id="language_filter" class="params_filter " data-name="pa_tipsid">
            </ul>
        </li>
        <li class="country arrow_events punct_menu"  id="month"><a class="link__arrow" href="#">Month</a>
        <span class="cross"  data-text="Month"></span>
            <ul data-name="pa_countryid" id="month_filter">
            </ul>			
        </li>
        <li class="checkmark arrow_events punct_menu" id="tag"><a class="link__arrow"  href="#">Event type</a>
        <span class="cross" data-text="Event type"></span>
            <ul id="tag_filter" class="params_filter vendor" ></ul>
        </li>
        <li class="checkmark arrow_events punct_menu" id="price"><a class="link__arrow"  href="#">Price</a>
        <span class="cross" data-text="Price"></span>
            <ul id="price_event" class="params_filter vintage" ></ul>
        </li>
    </ul>
</nav>
<div class="count_all_post" id="count_all_post">Sorted: <span></span></div>
<div class="events_content wpb_text_column wpb_content_element">
    <div class="wpb_wrapper">
    
    </div>
</div>

<script>
var eventData = document.getElementById('json_event');
var events = JSON.parse(eventData.innerHTML);
eventData.remove();


var paramsFilter = {
    language: {},
    tag: {},
    month: {},
    price: {
        '0-25': 0,
        '25-45': 0,
        '40-70': 0,
        '70-100': 0,
        '100': 0
    }
};

function createParamsMenu (events) {
    paramsFilter = {
        language: {},
        tag: {},
        month: {},
        price: {
            '0-25': 0,
            '25-45': 0,
            '40-70': 0,
            '70-100': 0,
            '100': 0
        }
    };
    events.forEach(function (item) {
        ['language', 'tag', 'price', 'month'].forEach(function (name) {
            if(name == 'price') setPriceParams(item[name])
            else if(!paramsFilter[name][item[name]]) { paramsFilter[name][item[name]] = 1; } 
            else { paramsFilter[name][item[name]]++; }  
        })
    })
}


function setPriceParams(price) {
    if(price <= 25) paramsFilter.price['0-25']++; 
    else if(price > 25 && price <= 40) paramsFilter.price['25-45']++; 
    else if (price > 40 && price <= 70) paramsFilter.price['40-70']++;
    else if (price > 70 && price <= 100) paramsFilter.price['70-100']++;
    else paramsFilter.price['100']++;

}

function createMenu() {
    jQuery('.punct_menu li').off('click');
    if(Object.keys(paramsFilter.language).length) {
        var language = Object.keys(paramsFilter.language).sort().map(function (item, key) {
            return `<li data-itemname="${item}" style="${key > 7 ? 'display: none;' : ''}">
            <a href="#">${item}</a> <span class="count_item"> ${paramsFilter.language[item]}</span></li>` 
        })
        jQuery('#language_filter').empty().append(language.join(' '))
    } 

    if(Object.keys(paramsFilter.tag).length) {
        var tag = Object.keys(paramsFilter.tag).sort().map(function (item, key) {
            return `<li data-itemname="${item}" style="${key > 7 ? 'display: none;' : ''}">
            <a href="#">${item}</a> <span class="count_item"> ${paramsFilter.tag[item]}</span></li>` 
        })
        jQuery('#tag_filter').empty().append(tag.join(' '))
    } 

      if(Object.keys(paramsFilter.month).length) {
        var month = Object.keys(paramsFilter.month).map(function (item, key) {
            return `<li data-itemname="${item}" style="${key > 7 ? 'display: none;' : ''}">
            <a href="#">${item.replace(/[A-Za-zА-Яа-яЁё^]$/g, '')}</a> <span class="count_item"> ${paramsFilter.month[item]}</span></li>` 

        })
        jQuery('#month_filter').empty().append(month.join(' '))
    } 

    var price = Object.keys(paramsFilter.price).map(function (item, key) {
        if(!paramsFilter.price[item]) return;
        var price = item.split('-')[1] ?  '-'+item.split('-')[1]+'€' : '';
        return `<li data-id="${item}" id="${item.replace('+', '')}" data-itemname="${item} €" style="${key > 7 ? 'display: none;' : ''}">
        <a href="#">${item.split('-')[0]+'€' + price}</a> <span class="count_item"> ${paramsFilter.price[item]}</span></li>` 
    })
    jQuery('#price_event').empty().append(price.join(' '));
    addClickMenu();
} 



var activeParams = {};

function addClickMenu (){
    jQuery('.punct_menu li').click(function (e) {
        e.preventDefault();
        var name = this.dataset.itemname;
        var elem = jQuery(this).parent().closest('li');
        var id = elem[0].id;
        activeParams[id] = name.replace(' €', '');
        if(id == 'month') name = name.replace(/[A-Za-zА-Яа-яЁё^]$/g, '')
        elem.removeClass('arrow_events').addClass('text_filter').find('a').text(name);
        updateFilter();
    })
}

jQuery('.filter_menu_events .cross').click(function() {
    var defaultText = this.dataset.text;
    var elem = jQuery(this).closest('li');
    var id = elem[0].id;
    delete activeParams[id]
    elem.removeClass('text_filter').addClass('arrow_events').find('a').text(defaultText);
    createMenu();
    updateFilter();
})

function updateFilter () {
    var url = Object.keys(activeParams).map(function(item) {
        if(item == 'price') return item + '=' + activeParams[item].replace(' €', '');
        return item + '=' + activeParams[item];
    })

    history.pushState(activeParams, null, '?'+url.join('&'));
    filterElement();
}

function getSearchParameters() {
    var prmstr = window.location.search.substr(1);
    return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}
function transformToAssocArray( prmstr ) {
    var params = {};
    var prmarr = prmstr.split("&");
    for ( var i = 0; i < prmarr.length; i++) {
        var tmparr = prmarr[i].split("=");
        params[tmparr[0]] = tmparr[1];
    }
    return params;
}

function filterElement () {
    var newFilter = events;
    
    if(activeParams.language) {
    var newFilter = newFilter.filter(function (item) {
           return item.language.toLowerCase().trim() == activeParams.language.toLowerCase().trim();
        })
    }

    if(activeParams.tag) {
    var newFilter = newFilter.filter(function (item) {
           return item.tag.toLowerCase().trim() == activeParams.tag.toLowerCase().trim();
        })
    }

    if(activeParams.month) {
    var newFilter = newFilter.filter(function (item) {
           return item.month.toLowerCase().trim() == activeParams.month.toLowerCase().trim();
        })
    }

    if(activeParams.price) {
    var newFilter = newFilter.filter(function (item) {
           if(activeParams.price == '100') return item.price > 100;
           var price = activeParams.price.split('-');
           return item.price >= Number(price[0]) && item.price <= Number(price[1]);
        })
    }
    newFiler = newFilter.sort(function (a, b) {
        return (+new Date(a.date)) - (+new Date(b.date))
    })
    updateMenu(newFilter)
    updatePosts(newFilter);
    document.querySelector('#count_all_post span').innerHTML = newFilter.length;
    var item = document.querySelectorAll('.filter_menu_events ul > li > ul');
    [].forEach.call(item, (elem) => {
        createScrollMenu(elem)
    })
}

function updateMenu(events) {
    createParamsMenu(events);
    createMenu();
}
activeParams = getSearchParameters();

Object.keys(activeParams).forEach(function (item) {
    activeParams[item] =  decodeURI(activeParams[item]);
    var name = activeParams[item];
    if(item == 'month') {
        name = activeParams[item].replace(/[A-Za-zА-Яа-яЁё^]$/g, '')
    }
    jQuery('#'+item).removeClass('arrow_events').addClass('text_filter').find('a').text(name); 
})
filterElement()


var globalPost;
function updatePosts (newFilter) {
    PAGED = 0;
    globalPost = newFilter;
    jQuery('.events_content .wpb_wrapper').empty();
    var elem = newFilter.slice(0,8).map(function (item) {
        return createPost(item)
    })
    jQuery('.events_content .wpb_wrapper').append(elem)
}

document.querySelector('.events_content').addEventListener('click', function (e) {
    if(!e.target.dataset.tour) return;
    e.preventDefault();
    activeParams.tag = e.target.dataset.tour;
    jQuery('#tag').removeClass('arrow_events').addClass('text_filter').find('a').text(e.target.dataset.tour); 
    updateFilter();

}, false)

jQuery(window).scroll(scrollEvents);

function scrollEvents(){
    if(jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() - 100) {
        jQuery(window).off('scroll')
        addPost();
    }
}
var PAGED = 0;

function addPost () {
    PAGED++;
    var elem = globalPost.slice(PAGED*8,(PAGED+1) * 8).map(function (item) {
        return createPost(item)
    })
    jQuery('.events_content .wpb_wrapper').append(elem);
    jQuery(window).scroll(scrollEvents);
}



function createPost ({tag, title, link, speakers, quantity, language, price, img, date, day_name, start, end}) {
    var date = date.split('-')
        console.log(date)

    return `<div class="fooevents-calendar-list"> 
        <div class="fooevents-calendar-list-item">
            <div class="event_head">
			<div class="cat-name">
			<a href="#" data-tour="${tag}" rel="tag">${tag}</a> 
			
			</div>
			
			<h3 class="fooevents-shortcode-title"><a href="${link}">${title}</a></h3></div>
            <!--Title-->
			<!--IMG-->
			<div class="event-img-dt" style="background-image: url(${img});">
			<div class="img_ev_cont">
            			</div>
			<!--IMG-->
			
			<!--DATE-->
			<div class="ev_date">            <div class="fooevents-shortcode-date"><div>${(date[2] || '') +'.'+ (date[1] || '')}</div></div>
            			<div class="ev_day"><div>${day_name}</div>			</div>
			</div>
			<!--DATE-->
			</div>
			<!--DESC-->
			<div class="event_desc">
            			</div>
			<!--DESC-->
			
			<div class="ev_attr">

            <div class="atrr_cont">
            <div class="ev_atr_titl"><img class="ev_list-image" src="/wp-content/uploads/icons/small/Icon-Teacher.svg" width="24px" height="24px" alt="Chair" title="Chair">sommelier</div>
            <div class="ev_atr_data">
            ${speakers.split(',')}
            </div>
            </div>


                <div class="atrr_cont">
                <div class="ev_atr_titl"> <img class="ev_list-image" src="/wp-content/uploads/icons/small/Icon-Chair.svg" width="24px" height="24px" alt="" title="">available places</div>
                <div class="ev_atr_data">
                ${quantity}<div class="ev_place">places</div></div>
                </div>
                <div class="atrr_cont">
                <div class="ev_atr_titl"><img class="ev_list-image" src="/wp-content/uploads/icons/small/Icon-Clock.svg" width="24px" height="24px" alt="" title="">time</div>
                <div class="ev_atr_data">
                ${start} - ${end}</div>
                </div>
                <div class="atrr_cont">
                <div class="ev_atr_titl"><img class="ev_list-image" src="/wp-content/uploads/icons/small/Icon-Globe.svg" width="24px" height="24px" alt="" title="">language</div>
                <div class="ev_atr_data">
                ${language} 
                </div>
            </div>



        </div> 
        <div class="ev_btm_cont">


                <div class="ev_price">
                <span class="woocommerce-Price-amount amount"><bdi>${price}&nbsp;<span class="woocommerce-Price-currencySymbol">€</span></bdi></span>				<div class="pers">/pers.</div>
                </div>

                <div class="event_btn">
                            <p><a class="button" href="${link}" rel="nofollow">Book ticket</a></p>
                            </div>
                
                </div>
                <div class="foo-clear"></div>
            </div>
            </div>
        </div>`
}
function createScrollMenu (item) {

var index = 0;
var nextList = 3;
var list = jQuery(item).children();
var len = list.length-1;

if(len <= 8) return;

jQuery(item).append('<div class="scroll"><div></div></div>');

var height = 8 / len * 100;

var element = item.querySelector('.scroll div')
jQuery(element).css('height', height + '%')
jQuery(item).bind('mousewheel', function(e){
    e.preventDefault()
    e.stopPropagation();

    index = index < 0 ? 0 : index >= len - 9 ? len - 9: index;
    nextList = nextList < 9 ? 9 : nextList >= len ? len : nextList;


    if(e.originalEvent.wheelDelta /120 > 0) {
        
        if(nextList < 9)  nextList = 9;
        list[nextList].style.display = 'none';
        list[index].style.display = 'flex';
        nextList--;
        index--;
        

       
    }
    else{
        
        if(nextList > len)  nextList = len-1;
        if(index > len-9) index = len-9;
        list[nextList].style.display = 'flex';
        list[index].style.display = 'none';
        nextList++;
        index++;
        
    }
    var pos = (nextList) / len * 100;
    var posScroll = pos > 100 ? 100 : pos < 0 ? 0 : pos;
    jQuery(element).css('top', posScroll - height + '%')
    
});
}

var item = document.querySelectorAll('.filter_menu_events ul > li > ul');
[].forEach.call(item, (elem) => {
    createScrollMenu(elem)
})


</script>
{"id":7213,"date":"2020-08-24T18:07:29","date_gmt":"2020-08-24T15:07:29","guid":{"rendered":"https:\/\/new.noblewine.lv\/?page_id=7213"},"modified":"2021-07-29T01:14:39","modified_gmt":"2021-07-28T22:14:39","slug":"events","status":"publish","type":"page","link":"https:\/\/nwold.test.decotec.lv\/en\/events\/","title":{"rendered":"Events"},"content":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; mobile_bg_img_hidden=&#8221;no&#8221; tablet_bg_img_hidden=&#8221;no&#8221; woodmart_parallax=&#8221;0&#8243; woodmart_gradient_switch=&#8221;no&#8221; row_reverse_mobile=&#8221;0&#8243; row_reverse_tablet=&#8221;0&#8243; woodmart_disable_overflow=&#8221;0&#8243; el_class=&#8221;eventsMain&#8221;][vc_column mobile_bg_img_hidden=&#8221;no&#8221; tablet_bg_img_hidden=&#8221;no&#8221; woodmart_parallax=&#8221;0&#8243; woodmart_sticky_column=&#8221;false&#8221; el_class=&#8221;eventsMainColumn container&#8221; parallax_scroll=&#8221;no&#8221; mobile_reset_margin=&#8221;no&#8221; tablet_reset_margin=&#8221;no&#8221;][vc_column_text text_larger=&#8221;no&#8221;]<\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; mobile_bg_img_hidden=&#8221;no&#8221; tablet_bg_img_hidden=&#8221;no&#8221; woodmart_parallax=&#8221;0&#8243; woodmart_gradient_switch=&#8221;no&#8221; row_reverse_mobile=&#8221;0&#8243; row_reverse_tablet=&#8221;0&#8243; woodmart_disable_overflow=&#8221;0&#8243; el_class=&#8221;eventsMain&#8221;][vc_column mobile_bg_img_hidden=&#8221;no&#8221; tablet_bg_img_hidden=&#8221;no&#8221; woodmart_parallax=&#8221;0&#8243; woodmart_sticky_column=&#8221;false&#8221; el_class=&#8221;eventsMainColumn container&#8221; parallax_scroll=&#8221;no&#8221; mobile_reset_margin=&#8221;no&#8221; tablet_reset_margin=&#8221;no&#8221;][vc_column_text text_larger=&#8221;no&#8221;]<\/p>\n","protected":false},"author":3811,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7213","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/nwold.test.decotec.lv\/en\/wp-json\/wp\/v2\/pages\/7213"}],"collection":[{"href":"https:\/\/nwold.test.decotec.lv\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nwold.test.decotec.lv\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nwold.test.decotec.lv\/en\/wp-json\/wp\/v2\/users\/3811"}],"replies":[{"embeddable":true,"href":"https:\/\/nwold.test.decotec.lv\/en\/wp-json\/wp\/v2\/comments?post=7213"}],"version-history":[{"count":1,"href":"https:\/\/nwold.test.decotec.lv\/en\/wp-json\/wp\/v2\/pages\/7213\/revisions"}],"predecessor-version":[{"id":39533,"href":"https:\/\/nwold.test.decotec.lv\/en\/wp-json\/wp\/v2\/pages\/7213\/revisions\/39533"}],"wp:attachment":[{"href":"https:\/\/nwold.test.decotec.lv\/en\/wp-json\/wp\/v2\/media?parent=7213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}