The programming language we've used is: Laravel Livewire.

In the application there's 2 users: 1) Member; 2) Admin.

We have module called "Activities" where the admin can only create,read,update and inactive/active while the Member has a dashboard where they can see all active activities.

I implemented the fullCalendar, I managed to fetch and display the data. Now what I want is when the activity is clicked, it will show the activity details will using modal.

Controller

public function getActivityDetails(Request $request)
    {
        $data                                       = $request->all();
        $activity                                   = Activity::where('id',$data['id']);
        dd($activity);

        return response()->json($activity);
    }

View

<script>
    $(document).ready(function(){
        $.ajaxSetup({
            headers:{
               'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
            }
        });


        var activities = @json($activities);
        var calendar = $('#calendar').fullCalendar({
            header:{
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek, agendaDay'
            },
            events: activities,
            selectable: true,
            selectHelper: true,
            selectable: true,
            eventClick: function(event) {
                if (event.id) {
                    $.ajax({
                        url: "/members-dashboard/getActivityDetails",
                        type: "POST",
                        data: {
                            id: event.id
                        },
                        success:function(data){
                            console.log(data);
                        }
                    })
                }
            }
            // select: function(start, end, allDays){
            //     var value = $(this).val();
            //     console.log(value);
            //     $('#exampleModal').modal('toggle');
            // }

        });

        function successResponse(data)
        {
            calendar.fullCalendar('refetchEvents');
        }
    });

</script>

WEB

use App\Http\Livewire\MembersPortal\MembersDashboard\ActivityDetails;
Route::post('/members-dashboard/getActivityDetails',MembersDashboard::class,'getActivityDetails')->middleware((['auth']));

NOTE: When I tried to console.log the data, it gives me all the html

Question: How can I return the value in my controller?