@foreach($categories as $category)

    <div class="card col-sm-4 product-search-item">
        <div class="card-header">
            <div class="category-item" data-id="{{$category->id}}" onclick="filterCategoryChild(this)">
                <img class="card-img-top img-responsive center-block lazy category-image"
                     src="{{ asset('img/placeholder.gif') }}" data-src="{{$category->image}}" alt="{{$category->name}}">
                <div class="card-body text-center category-description">
                    <h4 class="card-title">{{$category->name}}</h4>
                </div>
            </div>
        </div>

    </div>

@endforeach

<script>
    function filterCategoryChild(el) {
        let category_id = $(el).attr('data-id');
        filterCategory(category_id);
    }
</script>