<div id="filtr-obal" class="filtr-obal">
   <form id="filter_form" method="get" action="{url s=category}">
      {if !$body.search}
         {block 'filter-row-price'}
            <div class="row filter-row">

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

               {if !$body.producer.id}
                  {$producers = $body.dynamic_filter.filter->getProducers()}
               {/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}

               {foreach $body.dynamic_filter.variations as $id => $label}
                  {$values = $body.dynamic_filter.filter->getVariation($id)}
                  {$body.dynamic_filter.variations[$id].values = $values.values}
               {/foreach}

               {************** BTN vyrobci *************}
               <div class="col-xl-4 col-lg-5 col-xs-12 text-xs-center text-lg-left">
                  {if $producers.values or $variations.values}
                     <a class="btn btn-filter" data-opener=".filter-subrow"><span class="fc icons_param"></span> {if $producers.values}Značky a {/if}parametry <i class="fc fc-caret-down caret"></i></a>
                  {/if}
               </div>

               {************** Cenovy slider *************}
               {if $priceRange.min != $priceRange.max}
                  <div class="col-xl-6 col-lg-7 col-xs-12 hidden-md-down">
                     <div class="row">
                        <div class="col-xs-3">
                           <p class="filter_price_value right"><span id="filter_price_slider_min">{$priceRange.min|format_price:"printcurrency=no"}</span> Kč</p>
                        </div>
                        <div class="col-xs-6">
                           <!-- Price Slider -->
                           <input type="hidden" name="dynamic_filter[price][min]" value="{$priceRange.min|default:0}" data-filter-input="cena">
                           <input type="hidden" name="dynamic_filter[price][max]" value="{$priceRange.max|default:0}" data-filter-input="cena">
                           <input type="hidden" name="dynamic_filter[price][value]" value="" data-filter-input="cena">
                           <input type="hidden" name="dynamic_filter[price][vat]" value="21" data-filter-input="cena">
                           <div data-filter-range="{t}cena{/t}" {$priceRange|format_filter_range}></div>
                        </div>
                        <div class="col-xs-3">
                           <p class="filter_price_value"><span id="filter_price_slider_max">{$priceRange.max|format_price:"printcurrency=no"}</span> Kč</p>
                        </div>

                     </div>
                  </div>
               {/if}

               <div class="col-sm-2 col-xs-12 products-total">
                  <div data-reload="pagerTotal">
                     {$body.pager.total} {if $body.pager.total == 1}produkt{elseif $body.pager.total < 5 and $body.pager.total > 0 }produkty{else}produktů{/if}
                  </div>
               </div>
            </div>

            {************** Vyrobci *************}
            <div class="row filter-subrow" style="display: none;">
               <div class="display-table">
                  <div class="col-md-3 display-cell navigation">
                     <ul class="nav nav-pills nav-stacked">
                        {if $producers.values}
                           <li class="nav-item">
                              <a class="nav-link active" data-toggle="tab" href="#manufacturer">Značka</a>
                           </li>
                        {/if}
                        {foreach $body.dynamic_filter.parameters as $parameter}
                           {if $parameter.values}
                              <li class="nav-item">
                                 <a class="nav-link {if !$producers and $parameter@iteration == 1}active{/if}" data-toggle="tab" href="#param-{$parameter.id}">{$parameter.name}</a>
                              </li>
                           {/if}
                        {/foreach}

                        {foreach $body.dynamic_filter.variations as $id_label => $label}
                           {if $label.values}
                              <li class="nav-item">
                                 <a class="nav-link {if !$producers.values and !$body.dynamic_filter.parameters and $label@iteration == 1}active{/if}" data-toggle="tab" href="#var-{$id_label}">{$label.name}</a>
                              </li>
                           {/if}
                        {/foreach}
                     </ul>
                  </div>

                  <div class="col-md-9 display-cell content">
                     <div class="row">
                        <div class="tab-content">
                           {if $producers.values}
                              <div class="tab-pane active manufacturer" id="manufacturer" role="tabpanel">
                                 {foreach $producers.values as $manufacturer}
                                    <div class="col-lg-4 col-xs-6">
                                       <label class="c-input c-checkbox" for="filter_manufacturer_{$manufacturer.id}" title="{$manufacturer.name}">
                                          <input type="checkbox" name="dynamic_filter[producerIds][]" value="{$manufacturer.id}" id="filter_manufacturer_{$manufacturer.id}"
                                             data-filter-input="vyrobce">
                                          <span class="c-indicator"></span>

                                          {get_photo photo=$manufacturer size='producer-small' assign='photo'}

                                          {if $photo}
                                             <img src="{$photo}" alt="{$manufacturer.name}" class="img-responsive">
                                          {/if}

                                          {$manufacturer.name} <small>(<span class="filter-count" data-filter-count="{$manufacturer.id}">{$manufacturer.count}</span>)</small>
                                       </label>
                                    </div>
                                 {/foreach}
                              </div>
                           {/if}

                           {foreach $body.dynamic_filter.parameters as $id_parameter => $parameter}
                              {if $parameter.values}
                                 <div class="tab-pane {if !$producers.values and $parameter@iteration == 1}active{/if}" id="param-{$id_parameter}" role="tabpanel">

                                    {$inputId = $parameter.name|strip_accent}
                                    <input type="hidden" name="dynamic_filter[parameters][{$id_parameter}][type]" value="{$parameter.value_type}" data-filter-input="{$inputId}">

                                    {if $parameter.value_type == "list" or $parameter.value_type == "char"}

                                       {foreach $parameter.values as $value}
                                          <div class="col-md-4">
                                             <label class="c-input c-checkbox" for="filter_params[{$id_parameter}][{$value.id}]">
                                                <input type="checkbox" name="dynamic_filter[parameters][{$id_parameter}][value][]" value="{$value.id}"
                                                   id="filter_params[{$id_parameter}][{$value.id}]" data-filter-input="{$inputId}">
                                                <span class="c-indicator"></span>
                                                {$value.name} <small>(<span class="filter-count" data-filter-count="{$value.id}">{$value.count}</span>)</small>
                                             </label>
                                          </div>
                                       {/foreach}

                                    {elseif $parameter.value_type == "float"}
                                       {if $parameter.values.min < $parameter.values.max}
                                          <div class="row">
                                             <label for="{$inputId}" class="form-control-label col-xs-3 display-cell text-right">{$parameter.title}</label>
                                             <div class="col-xs-4 display-cell">
                                                <input type="text" id="{$inputId}" name="dynamic_filter[parameters][{$id_parameter}][value]" class="form-control" data-filter-input="{$inputId}">
                                             </div>
                                             <div class="col-xs-5 display-cell">
                                                <div data-filter-range="{$inputId}"></div>
                                             </div>
                                          </div>
                                       {/if}
                                    {else}
                                       Neznámý typ parametru
                                    {/if}

                                    {if $parameter.descr}
                                       <div class="col-xs-12 p-t">
                                          {$parameter.descr|unescape:"html" nofilter}
                                       </div>
                                    {/if}
                                 </div>
                              {/if}
                           {/foreach}

                           {foreach $body.dynamic_filter.variations as $id_label => $label}
                              {if $label.values}
                                 {$inputId = $label.name|strip_accent}
                                 <div class="tab-pane {if !$producers.values and !$body.dynamic_filter.parameters and $label@iteration == 1}active{/if}" id="var-{$id_label}" role="tabpanel">
                                    {foreach $label.values as $id => $value}
                                       <div class="col-md-4">
                                          <label class="c-input c-checkbox" for="filter_variant[{$id_label}][{$id}]">
                                             <input type="checkbox" name="dynamic_filter[variations][{$id_label}][value][]" value="{$id}" id="filter_variant[{$id_label}][{$id}]" data-filter-input="{$inputId}">
                                             <span class="c-indicator"></span>
                                             {$value.name} <small>(<span class="filter-count" data-filter-count="{$id}">{$value.count}</span>)</small>
                                          </label>
                                       </div>
                                    {/foreach}
                                 </div>
                              {/if}
                           {/foreach}
                        </div>
                     </div>
                  </div>
               </div>
            </div>

         {/block}

         {************** Vyfiltrovane polozky *************}
         <div class="filter-selected row empty" data-filter-reset="wrap">
            <div class="col-xs-12 filter-selected-inner">
               <p class="pull-left">Parametry</p>
               <div class="filter-selected-list pull-left" data-filter-reset="items">
                  <div class="filter-selected-item" data-filter-reset="template">
                     <span data-filter-reset="item-label"></span><a href="" class="delete" data-filter-reset="reset-item"><span class="fc fc-remove"></span></a>
                  </div>
               </div>
               <a href="" id="reset-filter" class="reset pull-right" data-filter-reset="reset">Smazat filtry<span class="fc fc-remove"></span></a>
            </div>
         </div>

      {/if}

      {block 'filter-row-sort'}
         <div class="row filter-sort">

            {************** Dostupnost *************}
            <div class="col-xs-12 col-md-5 col-lg-6 instore">
               <strong class="hidden-lg-down">Dostupnost</strong>
               <label class="c-input c-checkbox">
                  <input type="checkbox" name="dynamic_filter[inStore]" value="42" data-filter-input="skladem">
                  <span class="c-indicator"></span>
                  Skladem{* (<span class="filter-count" data-filter-count="{$id}">{$inStore.count}</span>)*}
               </label>
               <label class="c-input c-checkbox">
                  <input type="checkbox" name="dynamic_filter[inSupplier]" value="42" data-filter-input="u-dodavatele">
                  <span class="c-indicator"></span>
                  Skladem u dodavatele{* (<span class="filter-count" data-filter-count="{$id}">{$inStoreSupplier.count}</span>)*}
               </label>
            </div>

            {************** Radit podle *************}
            <div class="col-xs-8 col-md-4 col-lg-4" id="ordering">
               <input type="hidden" name="order_by" value="{$body.input.orderby.value}">
               <input type="hidden" name="order_dir" value="{$body.input.orderdir.value}">

               <label for="sort" class="hidden-lg-down"><strong>Řadit podle</strong></label>

               <select class="c-select" name="sort" id="sort" data-filter-input="razeni">
                  <option value="" selected>Doporučujeme</option>
                  <option value="-10">Největší sleva</option>
                  <option value="3">Nejlevnější</option>
                  <option value="-3">Nejdražší</option>
                  <option value="-5">Nejprodávanější</option>
               </select>
            </div>

            {************** Zobrazit seznam nebo katalog *************}
            <div class="col-xs-4 col-md-3 col-lg-2 text-right p-l-0">
               <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-secondary btn-sm {if $body.listShow eq '1'}active{/if}" for="sh1" title="Karty">
                     <input type="radio" name="show" value="1" id="sh1" {if $body.listShow eq '1'}checked{/if} data-filter-input="zobrazeni">
                     <i class="fc fc-th"></i>
                  </label>
                  <label class="btn btn-secondary btn-sm {if $body.listShow eq '2'}active{/if}" for="sh2" title="Seznam">
                     <input type="radio" name="show" value="2" id="sh2" {if $body.listShow eq '2'}checked{/if} data-filter-input="zobrazeni">
                     <i class="fc fc-bars"></i>
                  </label>
               </div>
            </div>
         </div>
      {/block}

   </form>
</div>

<script>
   wpj.onReady.push(function () {

      // lazy load product images
      function lazyLoad($selector)
      {
         $selector.find('img').unveil({
            placeholder: '{get_photo photo=0 size=2}',
            offset: 200
         })
      }

      $(document).on('crossFaded', '[data-reload=products]', function(e){
         lazyLoad($(e.target));
      });
      lazyLoad($('[data-reload=products]'));

      // Lazy load manufacturers
      $('.filter-subrow').find('img').unveil({
         offset: 200
      });
      $('.filter-subrow').on('opened', function() {
         $(window).trigger("lookup");
      });

      // Filter
      var $filterForm = $("#filter_form"),
         $filter = $filterForm.categoryFilter({
         }).data('wpjCategoryFilter');

      $filter.addItems({
         'skladem': {
            visible: false,
            create: function()
            {
               var me = this;
               this.$element.on('change', function() {
                  if (!me.getValue())
                     me.owner.getItem('u-dodavatele').setValue(false);
               });
            }
         },
         'u-dodavatele': {
            visible: false,
            create: function()
            {
               var me = this;
               this.$element.on('change', function() {
                  if (me.getValue())
                     me.owner.getItem('skladem').setValue(true);
               });
            }
         },
         'vyrobce': {
            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.min},
            max: {$parameter.values.max},
            title: '{$parameter.name}'
         },
         {else}
         '{$inputId}': {
            type: jQuery.fn.categoryFilter.ItemCheckboxMultiple,
            title: '{$parameter.name}'
         },
         {/if}
         {/if}
         {/foreach}

         {foreach $body.dynamic_filter.variations as $label}
         {$inputId = $label.name|strip_accent}
         '{$inputId}': {
            type: jQuery.fn.categoryFilter.ItemCheckboxMultiple,
            title: '{$label.name}'
         },
         {/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();
            },
            reset: function()
            {
            },
            visible: false
         },
         {if $priceRange.min != $priceRange.max}
         'cena': {
            type: jQuery.fn.categoryFilter.ItemPrice,
            steps: 40,
            setInputValue: function(value)
            {
               this._super(arguments);
               $("#filter_price_slider_min").text((value[0] < this.min ? this.min : value[0]).toFixed(0));
               $("#filter_price_slider_max").text((value[1] > this.max ? this.max : value[1]).toFixed(0));
            }
         },
         {/if}
         'strana': {
            type: jQuery.fn.categoryFilter.ItemPaging,
            onPageLoad: function()
            {
               if (!wpj.domUtils.isInView($filterForm))
                  wpj.domUtils.scrollTo($filterForm);

               return this._super(arguments)
            }
         },
         'zobrazeni': {
            visible: false,
            visible_hash: false,
            defaultValue: -1
         }
      });

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