Undefined property: Illuminate\Pagination\LengthAwarePaginator::$event_parts - php

Question

I received this error while trying to run two-layer loops in order to get a list out of an array:
Undefined property: Illuminate\Pagination\LengthAwarePaginator::$event_parts
I wanted to produce a table where it lists all my events and at the same time there is a column that listed all the attending participants.
Here is the phpmyadmin table:
Here is my EventController:
<?php
namespace App\Http\Controllers;
use App\Models\Event;
use Illuminate\Http\Request;
class EventController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
$events = Event::paginate(5);
return view('events.index', compact('events'))
->with('i', (request()->input('page', 1) - 1) * 5);
}
/**
* Show the form for creating a new resource.
*
* #return \Illuminate\Http\Response
*/
public function create()
{
$events = Event::all();
return view('events.create', compact('events'));
##return view('events.create');
}
/**
* Store a newly created resource in storage.
*
* #param \Illuminate\Http\Request $request
* #return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$request->validate([
'event_name' => 'required',
'event_start' => 'required',
'event_end' => 'required',
'event_category' => 'required',
#'event_part' => 'required'
]);
Event::create($request->all());
return redirect()->route('events.index')
->with('success', 'Event added successfully.');
}
/**
* Display the specified resource.
*
* #param \App\Models\Event $event
* #return \Illuminate\Http\Response
*/
public function show(Event $event)
{
return view('events.show', compact('event'));
}
/**
* Show the form for editing the specified resource.
*
* #param \App\Models\Event $event
* #return \Illuminate\Http\Response
*/
public function edit(Event $event)
{
return view('events.edit', compact('event'));
}
/**
* Update the specified resource in storage.
*
* #param \Illuminate\Http\Request $request
* #param \App\Models\Event $event
* #return \Illuminate\Http\Response
*/
public function update(Request $request, Event $event)
{
$request->validate([
'event_name' => 'required',
'event_start' => 'required',
'event_end' => 'required',
'event_category' => 'required'
]);
$event->update($request->all());
return redirect()->route('events.index')
->with('success', 'Event updated successfully');
}
/**
* Remove the specified resource from storage.
*
* #param \App\Models\Event $event
* #return \Illuminate\Http\Response
*/
public function destroy(Event $event)
{
$event->delete();
return redirect()->route('events.index')
->with('success', 'Event deleted successfully');
}
}
Here is my migration:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateEventsTable extends Migration
{
/**
* Run the migrations.
*
* #return void
*/
public function up()
{
Schema::create('events', function (Blueprint $table) {
$table->id('event_id');
$table->string('event_name');
$table->datetime('event_start');
$table->datetime('event_end');
$table->string('event_category');
$table->json('event_parts')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* #return void
*/
public function down()
{
Schema::dropIfExists('events');
}
}
Here is my index.blade.php:
#extends('layouts.app')
#section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Laravel 8 CRUD </h2>
</div>
<div class="pull-right">
<a class="btn btn-success" href="{{ route('events.create') }}" title="Create a event"> <i class="fas fa-plus-circle"></i>
</a>
</div>
</div>
</div>
#if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
#endif
<table class="table table-bordered table-responsive-lg">
<tr>
<th>No</th>
<th>Event Name</th>
<th>Event Start</th>
<th>Event End</th>
<th>Event Category</th>
<th>Event Participants</th>
<th width="280px">Action</th>
</tr>
#foreach ($events as $event )
<tr>
<td>{{ ++$i }}</td>
<td>{{ $event->event_name }}</td>
<td>{{ $event->event_start }}</td>
<td>{{ $event->event_end }}</td>
<td>{{ $event->event_category }}</td>
<td> #foreach ($events->event_parts as $event_part) {{ $event_part }} #endforeach</td>
<td>
<form action="{{ route('events.destroy', $event->event_id) }}" method="POST">
<a href="{{ route('events.show', $event->event_id) }}" title="show">
<i class="fas fa-eye text-success fa-lg">View</i>
</a>
<a href="{{ route('events.edit', $event->event_id) }}">
<i class="fas fa-edit fa-lg">Edit</i>
</a>
#csrf
#method('DELETE')
<button type="submit" title="delete" style="border: none; background-color:transparent;">
<i class="fas fa-trash fa-lg text-danger">Delete</i>
</button>
</form>
</td>
</tr>
#endforeach
</table>
{!! $events->links() !!}
#endsection