send a JSON data object to the server using Javascript XMLHttpRequest?

Im conding in php and would like to send the information on the calender to the controller. I think my MVC is set up correctly and i get a status 200 that the data is sent as an object (see photo) but when i want to receive it in the controller i keep getting NULL. My project does not have a .htacess and uses a basic router. I run everthing form my docker container. The idea is click a tile and sent the object information to the controller so i can add it to a shoppingcart. Any help is appreciated

this is the code that i was trying in my javascript

Javascript code. Calendar.js

document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.event').forEach(function(eventElement) {
    eventElement.addEventListener('click', function() {
        var eventDetails = {
            name: this.getAttribute('data-name'),
            startTime: this.getAttribute('data-start-time'),
            endTime: this.getAttribute('data-end-time')
        };
        // Send AJAX request to the server
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost/jazz');
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    console.log(eventDetails);
                    console.log('Request successful');
                } else {
                    console.error('Request failed');
                }
            }
        };
        xhr.send(JSON.stringify(eventDetails));
    });
});

});

This is my controller where i want to receive the information but the vardump is empty and it does not go in the if-statement
jazzcontroller.php

This is my calendar.php where i fill the information
calendar.php

Here is some extra information to give some clarification
Chrome console object eventDetails
headers of the object

Thanks again.