Регистрация статуса урока в дБ, когда видео vimeo завершено через ajax и jquery

Я пытаюсь записать данные в свою базу данных, когда видео vimeo завершает, чтобы в конечном итоге отслеживать время студентов / сотрудников в курсе, а также определить, когда они завершили курс. Я потерян, когда дело доходит до JS и AJAX. Ниже то, что я пробовал до сих пор. Я использую Laravel 5.6.

Если бы кто-то мог просто указать мне правильное направление, это очень помогло бы.

    @extends('layouts.app')

@section('page-title', trans('app.dashboard'))
@section('page-heading', trans('app.dashboard'))

@section('breadcrumbs')
<li class="breadcrumb-item active">
@lang('Companies')
</li>
@stop

@section('content')

@include('partials.toastr')
<div class ="row justify-content-md-center">
<div class='col-lg-6 '>

<iframe id="display" style="width:100%; height:360px;overflow:auto;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>


</div>

</div>
<div class = "row">

<div class="col-lg-8 col-md-12">
<h2>Course Lessons</h2>
@include('courses.partials.lessons')
</div>

@permission('online.instructor.menu')
<div class="col-lg-4 col-md-12">

@include('courses.partials.instructor_menu')

</div>


<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Add New Lesson</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-3">
{!! Form::open(['route' => 'lesson.store', 'id' => 'lesson-form']) !!}
<div class="md-form mb-5">
<i class="fa fa-compass prefix grey-text"></i>
<input type="hidden" id="course_id" name="course_id" class="form-control validate" value="{{$course->id}}">

</div>

<div class="md-form mb-5">
<i class="fa fa-compass prefix grey-text"></i>
<input type="text" id="title" name="title" class="form-control validate">
<label data-error="wrong" data-success="right" for="title">Lesson Title</label>
</div>

<div class="md-form mb-5">
<i class="fa fa-sort prefix grey-text"></i>
<input type="text" id="order" name="order" class="form-control validate">
<label data-error="order" data-success="order" for="title">Number order to diplay.</label>
</div>

<div class="md-form mb-5">
<i class="fa fa-film prefix grey-text"></i>
<input type="text" id="content" name="content" class="form-control validate">
<label data-error="wrong" data-success="right" for="title">Lesson Content</label>
</div>

</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-primary">Add Lesson</button>
{!! Form::close() !!}
</div>
</div>
</div>
</div>

@endpermission




</div>

@stop

@section('styles')

@stop

@section('scripts')

<script>


function onFinish() {
status.text('finished');

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

$(document).ready(function(){
$('#form').submit(function (e) {
e.preventDefault(); //**** to prevent normal form submission and page reload

$.ajax({
type : 'POST',
url : '{{route('lesson.completed')}}',
data : {
lesson: val({{$lesson->id}}),
user: val({{$auth->user-id}}),
time: val({{date('Y-m-d h:i:s')}})
},
success: function(result){
console.log(result);
$('#head').text(result.status);
},
error: function (xhr, ajaxOptions, thrownError) {
//alert(xhr.status);
//alert(thrownError);
}
});
});
});
}

});
</script>

@stop