how to make filter for food by category and subcategory , and once i press on any category i get its food dishes

using these tables I need to make category filter

Food Table: Migration

   $table->bigIncrements('id');
            $table->unsignedBigInteger('category_id')->nullable();
            $table->unsignedBigInteger('image_id')->nullable();
            $table->string('name')
            $table->float('price',9,2)->default(0);
            $table->float('offer_price',9,2)->nullable()->default(0);

            $table->boolean('visible')->default(0);
            $table->timestamps();

categories table: Migration

Schema::create('categories', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->unsignedBigInteger('parent_id')->nullable();
            $table->unsignedBigInteger('image_id')->nullable();
            $table->boolean('visible')->default(0);
            $table->timestamps();
        });

Food Model relation

    public function category()
    {
        return $this->belongsTo(Category::class, 'category_id')->withDefault();
    }

Category Model relation

 public function food()
    {
        return $this->hasMany(Food::class)->orWhereIn('category_id' , $this->subcategory()->pluck('id')->toArray())->visible();
    }
    public function subcategory()
    {
        return $this->hasMany(self::class, 'parent_id', 'id');
    }
````[When clicking on any category it should show food, that related to the category I clicked on ][1]


  [1]: https://i.stack.imgur.com/zpVb8.png

via Chebli Mohamed