<div id="filtr-obal">
   <form data-filter="form" class="row" method="get" action="{url s=category}" role="form">

      {$body.dynamic_filter.price = $body.dynamic_filter.filter->getPriceRange()}

      {if !$body.producer}
         {$body.dynamic_filter.producers = $body.dynamic_filter.filter->getProducers()}
      {else}
         {$body.dynamic_filter.series = $body.dynamic_filter.filter->getSeries()}
      {/if}

      {$body.dynamic_filter.sex = $body.dynamic_filter.filter->getSex()}

      {if $fullWidth}
         {$body.dynamic_filter.parameters[28] = ['value_type' => 'list', 'name' => "{t}Kategorie{/t}"]}
      {/if}

      {foreach $body.dynamic_filter.parameters as $id => $parameter}
         {$values = $body.dynamic_filter.filter->getParameter($id, $parameter.value_type)}
         {$body.dynamic_filter.parameters[$id].values = $values.values}
      {/foreach}

      <div class="col-xxs-12 col-xl-5 col-xxl-5">
         <h2 class="p-r-1 display-inline-block hidden-xl-down">{t}Filtr{/t}</h2>
         {if $body.dynamic_filter.sex.values}
            {$trans = translate('sex','elnino')}
            <div class="filter-pohlavi" style="display: inline-block;">
               {foreach $body.dynamic_filter.sex.values as $sex}
                  <label class="check-{$sex.id}">
                     <input type="radio" name="dynamic_filter[sex][]" value="{$sex.id}" data-filter-input="{t}pohlavi{/t}"
                            class="custom-control-input">
                     <span>{$trans[$sex.id]}</span>
                  </label>
               {/foreach}
            </div>
         {/if}
      </div>
      <div class="col-xxs-12 col-xl-7 col-xxl-6 pull-right">

         {if !$fullWidth}
            {$tabClass = 'tab filter-price col-md-6 col-xxs-12'}
         {else}
            {$tabClass = 'tab filter-price col-md-4 col-xxs-12'}
         {/if}

         <div class="row">
            {assign 'showProducerFilter' {$body.dynamic_filter.producers.values and !$body.producer}} {* klas. kat. filtruju vyrobce *}
            {assign 'showSeriesFilter' {$body.dynamic_filter.series.values and $body.producer}} {* vyrobce kat. filtruju rady *}

            {if $showProducerFilter}
               <div class="{$tabClass}" id="producer">
                  <div data-opener=".producer-box-wrapper" data-item-id-opener="vyrobce" class="tab-btn filter-opener">{t}Značka{/t}</div>
                  <div class="tab-content producer-box-wrapper opener-content" style="display: none;">

                     <div class="producer-box" data-role="producer-list">
                        <input type="text" name="producer-search" class="form-control input-search" data-role="producer-search" placeholder="{t}vyhledejte psaním{/t}">

                        <div data-filter="show-all-producer" style="display: none" class="filter-producer-notfound">{t}Zobrazit všechny značky{/t}</div>

                        <div class="producer-label-wrapper">
                           {foreach $body.dynamic_filter.producers.values as $producer}
                              <label class="custom-checkbox custom-control filter-item" for="filter_producer_{$producer.id}"
                                     title="{$producer.name}" data-producer="{$producer.id}">
                                 <input type="checkbox" class="custom-control-input" name="dynamic_filter[producerIds][]" value="{$producer.id}"
                                        id="filter_producer_{$producer.id}" data-filter-input="{t}vyrobce{/t}">
                                 <span class="custom-control-indicator"></span>
                                 {$producer.name}
                                 <small>(<span class="filter-count" data-filter-count="{$producer.id}">{$producer.count}</span>)</small>
                              </label>
                           {/foreach}
                        </div>
                     </div>
                  </div>
               </div>
            {/if}

            {if $fullWidth}
               {foreach $body.dynamic_filter.parameters as $id_parameter => $parameter}
                  {if $id_parameter==28 and $parameter.values && $parameter.figure!='N'}
                     {$filterItem = 'kategorie'}
                     <div class="{$tabClass}" id="{$filterItem}">

                        <input type="hidden" name="dynamic_filter[parameters][{$id_parameter}][type]" value="{$parameter.value_type}" data-filter-input="{$filterItem}">
                        <div data-opener=".category-box-wrapper" data-item-id-opener="kategorie" class="tab-btn filter-opener">{$parameter.name}</div>

                        <div class="tab-content category-box-wrapper opener-content" style="display: none;">
                           <div class="{$filterItem}-box" data-role="{$filterItem}-list">
                              <input type="text" name="{$filterItem}-search" class="form-control input-search" data-role="{$filterItem}-search"
                                     placeholder="{t}vyhledejte psaním{/t}">

                              <div data-filter="show-all-{$filterItem}" style="display: none" class="filter-notfound">{t}Zobrazit všechny kategorie{/t}</div>

                              <div class="{$filterItem}-label-wrapper">
                                 {strip}
                                    {foreach $parameter.values as $value}
                                       <label class="custom-checkbox custom-control filter-item" data-kategorie="{$value.id}">
                                          <input type="checkbox" class="custom-control-input" name="dynamic_filter[parameters][{$id_parameter}][value][]" value="{$value.id}"
                                                 data-filter-input="{$filterItem}">
                                          <span class="custom-control-indicator"></span>
                                          {$value.name}
                                          <small>(<span class="filter-count" data-filter-count="{$value.id}">{$value.count}</span>)</small>
                                       </label>
                                    {/foreach}
                                 {/strip}
                              </div>
                           </div>
                        </div>
                     </div>
                  {/if}
               {/foreach}
            {/if}

            {if $showSeriesFilter}
               <div class="{$tabClass}" id="series">
                  <div data-opener=".series-box-wrapper" data-item-id-opener="rada" class="tab-btn filter-opener">{t}Řada{/t}</div>

                  <div class="tab-content series-box-wrapper opener-content" style="display: none;">

                     <div class="series-box" data-role="series-list">
                        <input type="text" name="series-search" class="form-control input-search" data-role="series-search" placeholder="{t}vyhledejte psaním{/t}">

                        <div data-filter="show-all-series" style="display: none" class="filter-notfound">{t}Zobrazit všechny řady{/t}</div>

                        <div class="series-label-wrapper">
                           {strip}
                              {foreach $body.dynamic_filter.series.values as $series}
                                 <label class="custom-checkbox custom-control filter-item" for="filter_series_{$series.id}" title="{$series.name}" data-producer="{$series.id}">
                                    <input type="checkbox" class="custom-control-input" name="dynamic_filter[series][]" value="{$series.id}"
                                           id="filter_series_{$series.id}" data-filter-input="rada">
                                    <span class="custom-control-indicator"></span>
                                    {$series.name}
                                    <small>(<span class="filter-count" data-filter-count="{$series.id}">{$series.count}</span>)</small>
                                 </label>
                              {/foreach}
                           {/strip}
                        </div>
                     </div>
                  </div>
               </div>
            {/if}

            {if $body.dynamic_filter.price.min < $body.dynamic_filter.price.max}
               {$currency = getCustomerCurrency()}
               <div class="{$tabClass}" data-filter-item-wrapper="cena">
                  <div class="tab-btn filter-opener" data-opener=".filter-subrow-price">Cena</div>
                  <div class="tab-content filter-subrow-price" style="display: none;">
                     <h4 class="filter_price_value">
                        <span id="filter_price_slider_min">{$body.dynamic_filter.price.min|format_price:"printcurrency=no"}</span>
                        -
                        <span id="filter_price_slider_max">{$body.dynamic_filter.price.max|format_price:"printcurrency=no"}</span>
                        <span class="currency-symbol">{$currency.symbol}</span>
                     </h4>
                     <div>
                        <input type="hidden" name="dynamic_filter[price][min]" value="{$body.dynamic_filter.price.min}" data-filter-input="cena">
                        <input type="hidden" name="dynamic_filter[price][max]" value="{$body.dynamic_filter.price.max}" data-filter-input="cena">
                        <input type="hidden" name="dynamic_filter[price][value]" value="" data-filter-input="cena">
                        {$selectedPriceRange = $body.dynamic_filter.filterParams->getPriceRange()}
                        <div data-filter-range="{t}cena{/t}" {$selectedPriceRange|format_filter_range}></div>
                     </div>
                  </div>
               </div>
            {/if}
         </div>
      </div>
   </form>
</div>

<script type="text/javascript">

   function search($searchInput, $itemList, $showAll, dataFilterInput, labelWrapper) {
      var filter = $($searchInput).val();
      wpj.domUtils.resetTimer('search', 200, function() {
         if (filter) {
            $itemList.find('label:not(:Contains(' + filter + '))').hide();
            var $found = $itemList.find('label:Contains(' + filter + ')');
            if ($found.length) {
               $found.css('display', 'block'); // kdyz se pouzije show, ff to zobrazuje inline
               $showAll.hide();
            } else {
               $showAll.show();
            }
         } else {
            $itemList.find('label').show();
            $itemList.find('[data-recently-checked]').css('display', 'block');
            var $checkedLabels = $itemList.find('[data-filter-input=\'' + dataFilterInput + '\']:checked').parent();
            $checkedLabels.attr('data-recently-checked', true);
            $checkedLabels.css('display', 'block'); // kdyz se pouzije show, ff to zobrazuje inline
            $showAll.hide();
         }

         $('.' + labelWrapper + '-label-wrapper').trigger('changed');
      });
   }

   function initFilterSearch(sel, dataFilterInput) { //
      var el = document.querySelector('.' + sel + '-label-wrapper');
      if (el)
         SimpleScrollbar.initEl(el);

      var $searchInput = $('input[data-role="' + sel + '-search"]'),
              $list = $('[data-role="' + sel + '-list"]');

      var $showAll = $('[data-filter="show-all-' + sel + '"]');

      var doSearch = function() {
         search($searchInput, $list, $showAll, dataFilterInput, sel);
      };

      $showAll.on('click', function() {
         $($searchInput).val('');
         doSearch();
      });

      $searchInput.on('keyup change', doSearch);
   }

   wpj.onReady.push(function() {

      // custom css expression for a case-insensitive contains()
      jQuery.expr[':'].Contains = function(a, i, m) {
         return (a.textContent || a.innerText || '').toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
      };

      {if $showSeriesFilter}
      initFilterSearch('series', 'series');
      {/if}

      {if $showProducerFilter}
      initFilterSearch('producer', 'vyrobce');
      {/if}

      {if $fullWidth}
      initFilterSearch('kategorie', 'kategorie');
      {/if}

      // Filter
      var $filterForm = $('[data-filter_form]'),
              $filter = $filterForm.categoryFilter({ {*_*} }).data('wpjCategoryFilter');

      $filter.addItems({
         'vyrobce': {
            type: jQuery.fn.categoryFilter.ItemCheckboxMultipleSeparate,
         },
         'rada': {
            type: jQuery.fn.categoryFilter.ItemCheckboxMultipleSeparate,
         },
         '{t}pohlavi{/t}': {
            type: jQuery.fn.categoryFilter.ItemCheckboxMultipleSeparate,
         },
         '{t}kategorie{/t}': {
            type: jQuery.fn.categoryFilter.ItemCheckboxMultipleSeparate,
         },

         {foreach $body.dynamic_filter.parameters as $parameter}
         {if $parameter.values}
         {$inputId = $parameter.name|strip_accent}
         {if $parameter.value_type == "float"}
         '{$inputId}': {
            type: jQuery.fn.categoryFilter.ItemFloatRange,
            min: {$parameter.values.range.min},
            max: {$parameter.values.range.max},
            title: '{$parameter.name}',
         },
         {else}
         '{$inputId}': {
            type: jQuery.fn.categoryFilter.ItemCheckboxMultiple{if $parameter.descr != '<!--BOOL-->'}Separate{/if},
            title: '{$parameter.name}',
         },
         {/if}
         {/if}
         {/foreach}

         'razeni': {
            $inputs: $filterForm.find('[name=order_by],[name=order_dir]'),
            create: function() {
               this._super(arguments);
               var me = this;
               this.$element.on('change', function() {
                  var value = me.getValue();
                  var order = jQuery.fn.categoryFilter.ItemSorting.fromValue(value);
                  me.$inputs.eq(0).val(order[0]);
                  me.$inputs.eq(1).val(order[1]);
               });
            },
            setValue: function(value) {
               this._super(arguments);
               this.$element.change();
            },
            getValue: function(value) {
               return this._super(arguments);
            },
            reset: function() {
            },
            visible: false,
         },
         {if $body.dynamic_filter.price.min < $body.dynamic_filter.price.max}
         {$stepsCount = ($body.dynamic_filter.price.max - $body.dynamic_filter.price.min) / 5}
         {if $stepsCount < 1}
         {$stepsCount = 1}
         {/if}

         'cena': {
            type: jQuery.fn.categoryFilter.ItemPrice,
            steps: {$stepsCount|round},
            {if $ctrl.currency == "CZK"}
            maxPrecision: 0,
            {/if}
            unit: '{$currency.symbol}',
            setInputValue: function(value) {
               if (!value) {
                  return;
               }
               this._super(arguments);
               $('#filter_price_slider_min').text(value[0].toFixed(this.precision));
               $('#filter_price_slider_max').text(value[1].toFixed(this.precision));
            },
         },
         {/if}
         'strana': {
            type: jQuery.fn.categoryFilter.ItemPaging,
            onPageLoad: function() {

               var $pagerTop = $('[data-reload="pager-top"]');

               if (!wpj.domUtils.isInView($pagerTop))
                  wpj.domUtils.scrollTo($pagerTop);

               return this._super(arguments);
            },
         },
      });

      $filter.initialize();
   });
</script>
