totalsport/resources/views/home/eventos.blade.php

<div id="eventos">
  <div class="ui container">
    <div class="ui center aligned huge header">
      EVENTOS
    </div>
    <div class="ui centered grid">
      <div class="center aligned column">
        <div class="ui tabular stackable compact menu">
          <a class="active item servicio" data-filter="none">Todos</a>
          @foreach ($servicios as $i => $servicio)
            <a class="item servicio" data-filter="{{$servicio->titulo}}">{{$servicio->titulo}}</a>
          @endforeach
        </div>
      </div>
    </div>
    <div class="ui center aligned grid" id="eventos_cards">
      @foreach ($eventos as $i => $evento)
        <div class="eight wide tablet four wide computer column">
          <div class="ui basic segment">
            <a href="{{$urls->base}}/evento/{{$i}}">
              <div class="ui image">
                <img src="{{$evento->imagen}}" />
              </div>
              <div class="ui center aligned header">
                {{$evento->titulo}}
                <br />
                {{$evento->empresa}}
              </div>
            </a>
          </div>
        </div>
      @endforeach
    </div>
  </div>
</div>

@push('scripts')
  <script type="text/javascript">
    var eventos = [
      @foreach ($eventos as $evento)
        {
          titulo: '{{$evento->titulo}}',
          image: '{{$evento->imagen}}',
          empresa: '{{$evento->empresa}}',
          servicio: '{{$evento->servicio}}'
        },
      @endforeach
    ];
    function changeEventos(filter) {
      var grid = $('#eventos_cards')
      grid.html('')
      $.each(eventos, function(i, el) {
        if (filter != 'none' && el.servicio != filter) {
          return
        }
        grid.append(
          $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
            $('<div></div>').attr('class', 'ui basic segment').append(
              $('<a></a>').attr('href', '{{$urls->base}}/evento/' + i).append(
                $('<div></div>').attr('class', 'ui image').append(
                  $('<img />').attr('src', el.image)
                )
              ).append(
                $('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
                  $('<br />')
                ).append(el.empresa)
              )
            )
          )
        )
      })
    }
    var current_tab = 'none'
    function changeTab(filter) {
      $('.servicio.active').removeClass('active')
      $(".servicio[data-filter='" + filter + "']").addClass('active')
      current_tab = filter
    }
    $(document).ready(function() {
      $('.servicio').click(function(e) {
        e.preventDefault()
        var filter = $(this).attr('data-filter')
        if (filter == current_tab) {
          return
        }
        changeTab(filter)
        changeEventos(filter)
      })
    })
  </script>
@endpush