{extends "index.tpl"}

{block "content"}
   <div class="page-producers">
      {block "page-title"}
         <h1 class="text-center m-b-2">{t}Značky{/t}</h1>
         <h2 class="text-center">{t}Aktuálně máme více než 400 značek skladem{/t}</h2>
      {/block}

      <div class="row p-t-2 p-b-3">
         <div class="col-xs-12 col-xxl-8 col-md-10 col-md-push-1 col-xxl-push-2">
            <input type="text" class="form-control producer-search" placeholder="{t}Napište značku{/t}" data-role="producer-search">
         </div>
      </div>

      <div data-most-wanted>
         <h2 class="text-center m-b-2">{t}Nejhledanější{/t}</h2>
         <div class="producer-list">
            {insert_producers count='11' assign='topProducers'}
            {foreach $topProducers.producers as $index => $producer}<a href="{url s=category IDpd=$producer.id producerTitle=$producer.name}"
                                                                       class="btn-tag">{$producer.name}</a>{/foreach}
         </div>
      </div>

      <div class="producer-list-full" data-role="producer-list">

         {foreach $body.producers|sortby:"name" as $index => $producer}

         {$producerFirst = $producer.name|upper|substr:0:1}

         {if !ctype_alpha($producerFirst)}
            {$producerFirst = "#"}
         {/if}

         {if !$foreachFirst}
         <div>
            <h2>{$producerFirst}</h2>
            <ul>
               {elseif $foreachFirst != $producerFirst}
            </ul>
            <hr>
         </div>
         <div>
            <h2>{$producerFirst}</h2>
            <ul>
               {/if}

               {$foreachFirst = $producerFirst}

               <li><a href="{url s=category IDpd=$producer.id producerTitle=$producer.name}" class="">{$producer.name}</a></li>

               {/foreach}
            </ul>
         </div>
      </div>

      <div data-filter="not-found" style="display: none;" class="text-center">
         <p>{t}Žádný výsledek.{/t}</p>

         <a href="" class="btn btn-outlined" data-filter="show-all-manufacturers">{t}Zobrazit všechny značky{/t}</a>
      </div>

   </div>

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

         var input = $('input[data-role="producer-search"]'),
            list = $('[data-role="producer-list"]'),
            letters = $('[data-role="producer-list"]').find('div');

         // 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;
         };

         var $showAll = $('[data-filter="show-all-manufacturers"]');
         var $notFound = $('[data-filter="not-found"]');

         var searchProducers = function() {
            var filter = $(input).val();
            wpj.domUtils.resetTimer('producers-search', 200, function() {
               if (filter) {
                  list.find('a:not(:Contains(' + filter + '))').hide();
                  var $foundProducers = list.find('a:Contains(' + filter + ')');

                  if ($foundProducers.length) {
                     $foundProducers.css('display', 'block'); // kdyz se pouzije show, ff to zobrazuje inline
                     letters.show().not(letters.has('a:not(:hidden)')).hide();
                     $notFound.hide();
                  } else {
                     letters.hide();
                     $notFound.show();
                  }
                  $('[data-most-wanted]:visible').slideUp();

               } else {
                  list.find('a').show();
                  letters.show();
                  $('[data-most-wanted]:hidden').slideDown();
               }
            });
         };

         $showAll.on('click', function() {
            $(input).val('');
            searchProducers();
            return false;
         });

         input.on('keyup change', searchProducers);
      });
   </script>
{/block}