Категории товаров Laravel

Всем привет. Делаю учебный проект на Laravel, опыта пока немного, нужен совет с решением задачи.

У меня есть вью categories:

@section('content')
<section class="section-category">
  <div class="container-lg">
    <div class="row">
      @foreach($categories as $category)
        <div class="col-lg-2 col-md-4 col-sm-6">
            <a href="/{{ $category->url }}" class="btn btn-lg btn-success catbtn" type="button">
              <img class="catbtnimg" src="/img/categories/{{ $category->img }}">
            </a>
            <h6 class="text-center text-success">{{ $category->name }}</h6>
        </div>
      @endforeach
    </div>
  </div>
</section>
<section class="section">
  @foreach($categories as $products)
  <div class="container">
      <div class="row">
        @foreach($products->products as $item)
        <div class="col-lg-3 col-md-3 col-sm-6 col-6">
          <div class="card mb-5">
            <img class="card-img-top" src="/img/products/{{ $item->cardImage->path }}" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title  text-center">{{ $item->name }}</h5>
              <div class="prch"><span class="card-text">{{ $item->price }}</span><span class="card-text"><i class="{{ $item->is_available_icon }}"></i>{{ $item->is_available_text }}</span></div><br>
              <div class="prch second">
              <span><i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i></span>
              <span class="card-text feedback">10 отзывов</span>
              </div>
            </div><!--end card-body-->
            <div class="card-footer"></div>
            <div class="text-center"><i class="fa fa-handshake"></i><span class="reg">Оформило 10 человек</span><br>
            <a href="#" class="btn btn-success mt-2 mb-1">Оформить сейчас!</a>
            </div>
          </div><!--end card-->
        </div>
        @endforeach
      </div><!--end row-->
  </div><!--end container-->
  @endforeach
  <div class="jumbotron homejumb">
    <div class="container">
        <h1 class="text-center mt-3 mb-5">Почему мы?</h1>
        <div class="mainadv">
              <div class="mainadv-item"><img class="adv" src="/img/svg/gifts-solid.svg">
              <h5 class="mt-3">Большой ассортимент</h5></div>
              <div class="mainadv-item"><img class="adv" src="/img/svg/file-contract-solid.svg">
              <h5 class="mt-3">Выгодные условия</h5></div>
              <div class="mainadv-item"><img class="adv" src="/img/svg/medal-solid.svg">
              <h5 class="mt-3">Высокое качество</h5></div>
        </div><!--end advblock-->
      </div><!--end container-->
  </div><!--end jumbotron-->
</section>
@endsection

Так же есть модели Product:

class Product extends Model
{
  public function productImage()
  {
      return $this->hasMany(ProductImage::class);
  }
  public function cardImage()
  {
      return $this->hasOne(ProductImage::class)->where('position', 1);
  }
  public function category()
  {
      return $this->belongsTo(Category::class);
  }
    use HasFactory;
}

и Category:

class Category extends Model
{
  public function products()
  {
      return $this->hasMany(Product::class);
  }
}

Как сделать так, чтобы при нажатии на Категорию, выходил товар принадлежащий только этой категории, а изначально его видно не было.

Пока все выглядит так :

Добавил всего есть 4 записи в БД, их как раз и видно на картинке, они должны будут отобразиться, только когда пользователь нажмет на Крупная бытовая техника и т.д.

Заранее спасибо!