@extends("layouts.app_new")
@section("title")
    Course view
@endsection
@section("content")
<style type="text/css">
    .courses-details-desc {
    margin-top: 22px;
}
</style>
  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />

            <!-- Start Courses Details Area -->
        <section class="courses-details-area ptb-70">
            <div class="container">
                  <div class="myAccount-navigation">
                    <ul>
                        <li><a href="{{url('course-view/'.$course->id)}}" ><i class='bx bx-edit' ></i> Course details</a></li>
                        @if($isCourseEnded)
                        <li><a href="{{url('course-certificate/'.$course->id)}}"><i class='bx bx-certification'></i> Course Certificate</a></li>
                        @endif
                    </ul>
                </div>


              
                    <div class="co-md-12">
                        <h3>Lessons</h3>
                    </div>
                    <div class="row">
                        <div class="col-md-8">
                            
                            <div class="courses-details-desc video">
                                
                                <p><strong>{{$CourseLesson->name}}</strong></p>
                                <video id="vid1"

                                    class="video-js"
                                    controls
                                    preload="auto"
                                    width="1110"
                                    data-setup="{}"
                                >
                                  <source src="{{url($CourseLesson->path)}}" type="video/mp4">
                                </video>
                                <br>    
                                <div>
                                    @if($CourseLesson->c_order !=1)
                                    <div class="left">
                                        <a href="{{url('course-lesson/'.$previous[0])}}" class="default-btn"><i class='bx bx-chevrons-left icon-arrow before'></i><span class="label">Pervious</span><i class='bx bx-chevrons-left icon-arrow after'></i></a>
                                    </div>
                                    @endif



                                    @if(count($course->CourseLesson) != $CourseLesson->c_order)
                                     <div class="right">
                                        <a href="{{url('course-lesson/'.$next[0])}}" class="default-btn"><i class='bx bx-chevrons-right icon-arrow before'></i><span class="label">Next</span><i class='bx bx-chevrons-right icon-arrow after'></i></a>
                                    </div>
                                    @endif
                                </div>
                            </div>

                        </div>

                        <div class="col-md-4">
                            <br>
                            @include("user.courses.partials.courseSyllabus",["course"=>$course ,"courseEnrolled"=>1,"courseQuiz"=>$courseQuiz  ])

                        </div>
                    </div>

            </div>
        </section>
        <!-- End Courses Details Area -->

@endsection
@section("script")
  <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
  <script type="text/javascript">
    var player = videojs('vid1', {
        responsive: true
    });
player.on('ended', () => { 
    
        id = "{{$CourseLesson->id}}";
        @if(Auth::check())
        $.ajax({
          type: "POST",
          url: "{{url('CourseDone/')}}"+"/"+id,
          success: function(){

            $("#lesson"+id).addClass('text-success').removeClass('text-warning')                
          },
          data: {"_token":"{{csrf_token()}}"},
        });
        @else

        @endif
});

  </script>
@endsection