How to use AJAX and php Laravel to send a contact form without refreshing the page

I have created a contact form using Laravel 5.5 and Mailtrap.io which works fine. however, I am trying to make the contact form send without reloading the page to do this I am using AJAX. However, I have no idea how to connect AJAX with Laravel and Mailtrap.io.

This is the Form I have created.

@if(Session::has('success'))
<p class="alert "></p>
@endif
<form action="" method="POST" class="wpcf7-form" novalidate="novalidate">
    
    <div class="primary-form">
        <div class="col-xs-6">
            <span class="wpcf7-form-control-wrap text-768"><input type="text" name="first-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" placeholder="First Name" /></span>
        </div>
        <div class="col-xs-6">
            <span class="wpcf7-form-control-wrap text-768"><input type="text" name="last-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Last Name" /></span>
        </div>
        <div class="col-xs-6">
            <span class="wpcf7-form-control-wrap email-766"><input type="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="E-mail Address" /></span>
        </div>
        <div class="col-xs-6">
            <span class="wpcf7-form-control-wrap phone"><input type="text" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Phone Number" /></span>
        </div>
        <div class="col-xs-12">
            <span class="wpcf7-form-control-wrap textarea-6"><textarea name="message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Your Message"></textarea></span>
        </div>

        <div class="pull-right" style="margin-right:10px;">
            <p class="clearfix">
                <button type="submit" class="button button-simple btn-submit mt-30">SEND</button>
            </p>
        </div>
    </div>
</form>

The AJAX method I am using to send the page without reloading the page.

$(".btn-submit").click(function(e){
    e.preventDefault();
    var first_name = $("input[name=first-name]").val();
    var last_name = $("input[name=last-name]").val();
    var email = $("input[name=email]").val();
    var phone = $("input[name=phone]").val();
    var bodyMessage = $("textarea[name=message]").val();

    $.ajax({
       type:'POST',
       url:'/contact',
       data:{first_name:first_name, last_name:last_name, email:email, phone:phone, bodyMessage:bodyMessage},
       success:function(data){
          alert(data.success);
       }
    });
});

This is my ContactController.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use Mail;
use Session;

class ContactController extends Controller
{
    public function postContact(Request $request){
        $this->validate($request, ['email' => 'required|email'] );

        $data = array(
            'first_name' => $request->first_name,
            'last_name' => $request->last_name,
            'email' => $request->email,
            'phone' => $request->phone,
            'bodyMessage' => $request->message
        );

        Mail::send('emails.contact', $data, function($message) use ($data){
            $message->from($data['email']);
            $message->to('jafar@calmcollective.co.uk');
            $message->subject('Contact Details');
        });

        Session::flash('success', 'Your E-mail was sent! Allegedly.');
        Session::flash('alert-class', 'alert-success');

        return redirect('contact');

    }
}

I have spent hours on this. Any help will be appreciated.

via Chebli Mohamed