displaying subcatgories and categories on the front end

this is my categories table:

        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('title', 2048);
            $table->string('slug', 2048);
            $table->unsignedBigInteger('parent_id')->nullable();
            $table->timestamps();

            $table->foreign('parent_id')->references('id')->on('categories')->onDelete('cascade');
        });

and im using a relationship of has Many to insert new sub categories to a category like this:

    protected $fillable = [
        'title', 
        'slug', 
        'parent_id'
    ];

    public function subCategory() {
        return $this->hasMany(Category::class, 'parent_id');
    }

since im using filament im adding the input form like this:

return $form
    ->schema([
        // Other form components...
        Select::make('parent_id')
            ->label('Parent Category')
            ->options(\App\Models\Category::pluck('title', 'id')->toArray())
            ->nullable(),
    ]);

this allowed me to create sub categories on the table of categories. basically the main categories have a null value, which means they are main categories and don't have a parent category, those with a value on the column "parent_id" are subcategories. I want to have both in a dropdown menu so i can display them in the front end.

My PostsController is eager loading the subcategories thanks to the subCategory method on the Category model and im also selecting those columns whos parent_id value is set to null. My understanding of this is that i am grabbing the main categories and the subcategories. in one query to the database.

    public function index()
    {
        $posts = Post::query()
            ->where('active', '=', 1)
            ->where('published_at', '<', Carbon::now())
            ->orderBy('published_at', 'desc')
            ->with('categories')
            ->take(4)
            ->get();

        $latestPost = $posts->shift();

        $categories = Category::whereNull('parent_id')
            ->with('subCategory')
            ->get();
        // dd($categories);
        
        return view('home', compact('posts', 'latestPost', 'categories'));
    }

this is the blade template:

    <div class="flex-col items-center justify-center w-full py-4">
        @foreach($categories as $category)
            <a href="{{ route('by-category', $category) }}" class="text-black font-bold uppercase">
                {{ $category->title }} <i class="fas ml-2"></i>
            </a>
            <div class="bg-black">
                @foreach($category->subCategory as $subCategory)  
                    <a href="{{ route('by-category', $subCategory) }}" class="text-white text-lg transition ease-out hover:bg-gray-100 hover:text-black rounded py-2 px-4 mx-2">
                        {{ $subCategory->title }}
                    </a>
                @endforeach
            </div>
        @endforeach
    </div>

right now i can only see the sub categories and not the main categories. i have a few active posts that right now have some sub categories assigned, but no main categories yet to active posts, so how can i see the main ones as well as the subs? do i need to set them both ? what if i just want to show the string of the main category without having to assign it to a post? thanks!