<div id="search-button">
  <button class="btn" type="button">
    <img src="/layout/images/icon-magnifier.svg">
  </button>
</div>
<div id="search-form-big">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="small-title">
          <?= \Shared\Helpers\Helpers::lang( 'czego-szukasz' );?>?
          <a href="#" class="search-form-big-close"><i class="fa fa-times"></i></a>
        </div>
        <div class="input">
          <input type="text" name="q" class="form-control" placeholder="<?= \Shared\Helpers\Helpers::lang( 'wpisz-szukany-produkt' );?>">
        </div>
        <div class="search-big-results"></div>
        <div class="search-more-button"></div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" class="footer">
  $( function()
  {
    $( 'body' ).on( click_event, '.search-form-big-close', function()
    {
      $( '#search-form-big' ).removeClass( 'visible' );
      $( '.menu-overlay' ).removeClass( 'visible' );
      $( 'body' ).removeClass( 'no-scroll' );
    });

    $( 'body' ).on( click_event, '#search-button .btn', function()
    {
      $( '#search-form-big' ).addClass( 'visible' );
      $( '#search-form-big input' ).val( "" ).focus();
      $( '.menu-overlay' ).addClass( 'visible' );
      $( 'body' ).addClass( 'no-scroll' );
    });

    var timer = '';
    $( '#search-form-big input[type="text"]' ).keyup( function()
    {
      var _this = $( this);
      clearTimeout( timer );
      timer = setTimeout( function()
      {
        if ( _this.val().length < 2 )
          return false;

        $.ajax(
        {
          type: 'POST',
          cache: false,
          url: '/search/search_products',
          data:
          {
            query: _this.val()
          },
          beforeSend: function()
          {

          },
          success: function( response )
          {
            data = jQuery.parseJSON( response );
            $( '.search-big-results' ).html( '' );
            var time = 0;
            if ( data == null )
            {
              $( '.search-big-results' ).html( '<div class="no-found"><?= \Shared\Helpers\Helpers::lang( 'nie-znaleziono-produktow' );?><\/div>' );
              $( '.search-more-button' ).html('');
            }
            else
            {
              $.each( data, function( index, item )
              {
                setTimeout( function()
                {
                  $( '.search-big-results' ).append( item ).children(':last').hide().fadeIn( 500 );
                  observer.observe();
                }, time );
                time += 200;
                var is_last_item = (index == (data.length - 1));

                if ( is_last_item )
                {
                  setTimeout( function()
                  {
                    $( '.search-more-button' ).html( '<a href="/wyszukiwarka/' + _this.val() + '" class="btn btn-success"><?= \Shared\Helpers\Helpers::lang( 'zobacz-wiecej' );?><\/a>' );
                  }, time );
                }
              });

            }
          }
        });

      }, 1000 );
    });
  });
</script>