@extends('layouts.landing')

@section('title')
    {{$course->title}} - Elearning
@endsection

@section('content')
<style>
    .btn-round-sm {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 7px 0px;
        display: inline-block;
        line-height: 35px!important;
        text-align: center;
    }
    .btn-round-sm:hover {
        width: 55px;
        height: 55px;
        padding: 10px 0px;
        transition: .3s;
    }
    .active-border {
        border-left: 2px solid #007bff;
    }
</style>
<div class="row mobile-mt-8">
    <div class="col-12 col-lg-8 col-xl-8">
        <div class="row ">
            <div class="col">
                <a href="{{route('elearn.show', $course->id)}}" class="text-color mb-4" style="display: none"><i class="fe fe-arrow-left mr-2"></i> Previous</a>
            </div>
            <div class="col-auto">
                @if($module)
                    <a href="{{route('elearn.start-course', $module->id)}}" id="next" style="display: none" class="text-color mb-4"> Next <i class="fe fe-arrow-right ml-2"></i></a>
                @endif
            </div>
        </div>
        <div class="mt-4 mb-4">
            @if(isset($course->preview))
                <video controls class="rounded-xxl js-player object-cover" data-plyr-config='{ "ratio": "16:9" }' controlsList="nodownload" data-poster="{{$course->photo}}">
                    <source src="{{$course->preview}}" type="video/mp4">
                </video>
            @endif
            @if(isset($course->audio))
                <img src="{{$course->photo}}" class="h320 rounded-2 w-100 object-cover mb-4" alt="">
                <audio id="audio_play" class="js-player" src="{{$course->audio}}" controlsList="nodownload" controls style="width: 100%"></audio>
            @endif
        </div>
        <div class="row">
            <div class="col">
                <h4 class="header-title">
                    {{$course->title}}
                </h4>
                <small class="text-muted">
                    @if($viewed_course_count < 2)
                        <span id="viewedCount">{{number_format($viewed_course_count)}}</span> view
                    @else
                        <span id="viewedCount">{{number_format($viewed_course_count)}}</span> views
                    @endif
                    &nbsp; | &nbsp; <span id="duration"></span>,  {{$course->created_at->diffForHumans()}}
                </small>
            </div>
            <div class="col-auto">
                <div class="text-end">
                    <form id="like-form">
                        <p class="mr-4 cursor-pointer">
                            <input type="hidden" name="user_id" id="user-id" value="{{Auth::user()->id}}">
                            <input type="hidden" name="course_id" id="course-id" value="{{$course->id}}">
                            @if(count($likes) > 0)
                                @if($user_has_liked)
                                    <span id="unlike-btn" onclick="unLike()"><i class="mdi unlike mdi-heart font-md"></i></span>
                                    <span style="display: none" id="like-btn-1" onclick="like()"><i class="mdi like mdi-heart-outline font-md"></i></span>
                                @elseif($user_has_unliked)
                                    <span id="like-btn-1" onclick="like()"><i class="mdi like mdi-heart-outline font-md"></i></span>
                                    <span style="display: none" id="unlike-btn" onclick="unLike()"><i class="mdi unlike mdi-heart font-md"></i></span>
                                @elseif($user_has_not_liked < 1)
                                    <span id="like-btn-1" onclick="like()"><i class="mdi like mdi-heart-outline font-md"></i></span>
                                    <span style="display: none" id="unlike-btn" onclick="unLike()"><i class="mdi unlike mdi-heart font-md"></i></span>
                                @else
                                    <span id="like-btn-1" onclick="like()"><i class="mdi like mdi-heart-outline font-md"></i></span>
                                    <span style="display: none" id="unlike-btn" onclick="unLike()"><i class="mdi unlike mdi-heart font-md"></i></span>
                                @endif
                            @else
                                <span id="like-btn-1" onclick="like()"><i class="mdi like mdi-heart-outline font-md"></i></span>
                                <span style="display: none" id="unlike-btn" onclick="unLike()"><i class="mdi unlike mdi-heart font-md"></i></span>
                            @endif
                        </p>
                    </form>
                </div>
                <small class="text-muted" id="like-div">
                    @if($like_count > 0 && $like_count < 2)
                        <a href="#" data-toggle="modal" data-target="#courseLikes" class="text-gray-500"><span id="like-no">{{$like_count}}</span> like </a>
                    @elseif($like_count > 1)
                        <a href="#" data-toggle="modal" data-target="#courseLikes" class="text-gray-500"><span id="like-no">{{$like_count}}</span> likes </a>
                    @else
                        <a href="#" data-toggle="modal" data-target="#courseLikes" class="text-gray-500"><span id="like-no">{{$like_count}}</span> like </a>
                    @endif
                </small>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <ul class="nav nav-tabs nav-overflow header-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="course-tab" data-toggle="tab" href="#course" role="tab" aria-controls="course" aria-selected="true">
                            Course Description
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="review-tab" data-toggle="tab" href="#review" role="tab" aria-controls="review" aria-selected="false">
                            Reviews
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="tab-content" id="wizardSteps">
                <div class="tab-pane fade show active" id="course" role="tabpanel" aria-labelledby="all-tab">
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3">
                                <div class="card-body">
                                    <div class="row ">
                                        <div class="col-12">
                                            <p class="card-text text-muted">
                                                {{$course->description}}
                                            </p>
                                        </div>
                                    </div>
                                    {{-- <div class="row ">
                                        <div class="col-12">
                                            <h5 class="mt-4">
                                                Instructor
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="row my-4">
                                        <div class="col">
                                            <div class="d-flex">
                                                <img src="{{$instructor->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                                <div class="pl-2">
                                                    <a href="{{route('account.profile', $instructor->id)}}"><h6>{{$instructor->first_name}} {{$instructor->last_name}}</h6></a>
                                                    <span class="text-muted font-xssss">{{$instructor->area_of_specialization}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
                    <div class="card w-100 shadow-xss rounded-xxl mt-4 border-0 ps-4 py-4 pe-4 pb-3 mb-3">
                        <div class="row">
                            <div class="col-12">
                                <div class="float-right">
                                    <a data-toggle="modal" data-target="#reviewModal" href="" class="text-color"><i class="mdi mdi-plus"></i> Add a review</a>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            @forelse ($reviews as $review)
                                <div class="col-12">
                                    <div class="card-body d-block rounded-xxl border p-4 mt-4">
                                        <div class="d-flex">
                                            @php
                                                $user = App\Models\User::where('id', $review->user_id)->first();
                                            @endphp
                                            <a href="{{route('account.profile', $user->id)}}"><img src="{{$user->avatar}}" class="w60 h60 rounded-circle" style="object-fit: cover"></a>
                                            <div class="pl-2">
                                                <a href="{{route('account.profile', $user->id)}}"><h6>{{$user->first_name}} {{$user->last_name}}</h6></a>
                                                <p>{{$user->area_of_specialization}}</p>
                                                <span class="d-flex">
                                                    @if($review->rating)
                                                        {{getRating($review->rating)}}
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                        <p class="pt-2">{{$review->review}}</p>
                                    </div>
                                </div>
                            @empty
                                <div class="card-body p-0 my-3 position-relative justify-content-center text-center">
                                    <a href="#!" class="p-4 text-center ms-3 menu-icon center-menu-icon"><i class="mdi mdi-comment-text-multiple font-lg alert-primary btn-round-lg theme-dark-bg text-current"></i></a>
                                    <p class="pt-2">There are no reviews</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-4 col-xl-4">
        <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 overflow-auto" style="height: 470px">
            <div class="card-body p-0">
                @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                    <div class="row">
                        <div class="col">
                            <div class="float-right">
                                <a href="{{route('elearn.edit-course', $course->id)}}"><i class="mdi mdi-pencil"></i> Edit Course</a>
                            </div>
                        </div>
                    </div>
                @endif
                <h5>{{$course->title}}</h5>
                @if(count($modules) > 0)
                    @foreach($modules as $module)
                        @php
                            $first_module = App\Models\Module::where('course_id', $course->id)->orderBy('created_at', 'ASC')->first();
                        @endphp
                        <div class="py-4 border-bottom-xs {{$first_module->id == $module->id ? 'active-border' : ''}} row">
                            <div class="col-2">
                                <a href="{{route('elearn.start-course', $module->id)}}" class="fw-600 ls-1 text-grey-700 text-dark pe-4">
                                    <i class="btn-round-sm font-lg text-primary play-icon feather-play-circle me-2 mr-3 bg-greylight"></i>
                                </a>
                            </div>
                            <div class="col-10">
                                <a href="{{route('elearn.start-course', $module->id)}}" class="fw-600 ls-1 text-grey-700 text-dark pe-4">
                                    <span class="">{{$module->title}}</span><br>
                                    <small>{{Str::words($module->description, 10)}}</small><br>
                                    <small class="text-color">Duration:
                                        @if($course->duration > 1)
                                            {{$course->duration}} mins
                                        @else
                                            {{$course->duration}} min
                                        @endif
                                    </small>
                                </a>
                            </div>
                        </div>
                    @endforeach
                    @else
                    <div class="mt-4">
                        <div class="text-center">
                            <h6 class="mb-4">No modules created</h6>
                        </div>
                    </div>
                @endif
                @if($test)
                    @if($test->is_active == '1')
                        <div class="py-4 border-bottom-xs row">
                            <div class="col-2">
                                <a href="#" class="fw-600 ls-1 text-grey-700 text-dark pe-4">
                                    <i class="btn-round-sm font-lg text-primary play-icon feather-file me-2 mr-3 bg-greylight"></i>
                                </a>
                            </div>
                            <div class="col-10">
                                <a href="{{route('elearn.quiz', $course->id)}}" class="fw-600 ls-1 text-grey-700 text-dark pe-4">
                                    <span class="">Ecle Quiz</span><br>
                                    @if(@$certificate)
                                        <small>Earn a certificate upon completion and accredited Ecle points </small><br>
                                    @else
                                        <small>Get cumulated accredited Ecle points when you take this quiz</small><br>
                                    @endif
                                </a>
                            </div>
                        </div>
                    @endif
                @endif
            </div>
        </div>
        <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3" style="height: 470px">
            <div class="card-body p-0">
                @if(@$certificate)
                    <div class="py-4 border-bottom-xs row">
                        <div class="col-2">
                            <a href="#" class="fw-600 ls-1 text-grey-700 text-dark pe-4">
                                <i class="btn-round-sm font-lg text-primary play-icon mdi mdi-certificate me-2 mr-3 bg-greylight"></i>
                            </a>
                        </div>
                        <div class="col-10">
                            <a href="#" class="fw-600 ls-1 text-grey-700 text-dark pe-4">
                                <span class="">Certificate</span><br>
                                <small>Earn a certificate upon completion</small><br>
                            </a>
                        </div>
                    </div>
                @endif
                <div class="py-4 border-bottom-xs row">
                    <div class="col-2">
                        <a href="#" class="fw-600 ls-1 text-grey-700 text-dark pe-4">
                            <i class="btn-round-sm font-lg text-primary play-icon feather-users me-2 mr-3 bg-greylight"></i>
                        </a>
                    </div>
                    <div class="col-10">
                        <a href="#" class="fw-600 ls-1 text-grey-700 text-dark pe-4">
                            <span class="">100% Online</span><br>
                            <small>Start instantly and learn at your space</small><br>
                        </a>
                    </div>
                </div>
                <div class="py-4 border-bottom-xs row">
                    <div class="col-2">
                        <a href="#" class="fw-600 ls-1 text-grey-700 text-dark pe-4">
                            <i class="btn-round-sm font-lg text-primary play-icon mdi mdi-forum me-2 mr-3 bg-greylight"></i>
                        </a>
                    </div>
                    <div class="col-10">
                        <a href="#" class="fw-600 ls-1 text-grey-700 text-dark pe-4">
                            <span class="">Language</span><br>
                            <small>English</small><br>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('elements.course-likes')
@include('elements.add-review')
<script>
    // generate
    var video = document.getElementsByTagName("video")[0];
    var audio = document.getElementById("audio_play");
    if(audio != undefined) {
        audio.addEventListener("ended", function() {
            $.ajax({
                type:'POST',
                url: "{{ url('/elearning/viewed-course')}}",
                data:{
                    "_token": "{{ csrf_token() }}",
                    user_id: "{{Auth::user()->id}}",
                    course_id: "{{$course->id}}",
                },
                success:function(data){
                    toastr.success("You have completed this module", "", defaultSetting);
                    var viewCount = document.getElementById('viewedCount').innerHTML;
                    document.getElementById('viewedCount').innerHTML = parseInt(viewCount) + 1;
                    console.log(data);
                    $('#next').show();
                    var moduleId = '{{$module ? $module->id : ''}}';
                    if(moduleId == '') {
                        window.location.href = "{{route('elearn.show', $course->id)}}";
                    } else {
                        window.location.href = "{{route('elearn.start-course', $module ? $module->id : '')}}";
                    }
                },
                error: function(error) {
                    toastr.error("There was a problem completing this module", "", defaultSetting)
                    console.log(error);
                }
            });
        }, true);
        audio.ondurationchange = function() {
            var audio_duration = this.duration;
            document.getElementById('duration').innerHTML = Math.round(audio_duration / 60) + ' mins';
        };
    }
    if(video != undefined) {
        video.addEventListener("ended", function() {
            $.ajax({
                type:'POST',
                url: "{{ url('/elearning/viewed-course')}}",
                data:{
                    "_token": "{{ csrf_token() }}",
                    user_id: "{{Auth::user()->id}}",
                    course_id: "{{$course->id}}",
                },
                success:function(data){
                    toastr.success("You have completed this module", "", defaultSetting);
                    var viewCount = document.getElementById('viewedCount').innerHTML;
                    document.getElementById('viewedCount').innerHTML = parseInt(viewCount) + 1;
                    console.log(data);
                    $('#next').show();
                    var moduleId = '{{$module ? $module->id : ''}}';
                    if(moduleId == '') {
                        window.location.href = "{{route('elearn.show', $course->id)}}";
                    } else {
                        window.location.href = "{{route('elearn.start-course', $module ? $module->id : '')}}";
                    }
                },
                error: function(error) {
                    toastr.error("There was a problem completing this module", "", defaultSetting)
                    console.log(error);
                }
            });
        }, true);
        video.ondurationchange = function() {
            var video_duration = this.duration;
            document.getElementById('duration').innerHTML = Math.round(video_duration / 60) + ' mins';
        };
    }

</script>
<script>
    // liking course function
    function like() {
        document.getElementById('unlike-btn').style.display = 'block';
        document.getElementById('like-btn-1').style.display = 'none';
        if( document.getElementById('like-div').style.display = 'none') {
            document.getElementById('like-div').style.display = 'block';
            noOfLikes = document.getElementById('like-no').innerHTML;
            document.getElementById('like-no').innerHTML = parseInt(noOfLikes) + 1;
        } else {
            noOfLikes = document.getElementById('like-no').innerHTML;
            document.getElementById('like-no').innerHTML = parseInt(noOfLikes) + 1;
        }

        let user_id = '{{Auth::user()->id}}';
        let course_id = '{{$course->id}}';
        let like = 1;

        $.ajax({
            type:'POST',
            url: "{{ url('/elearning/like-course')}}",
            data:{
                "_token": "{{ csrf_token() }}",
                user_id:user_id,
                course_id:course_id,
                like:like,
            },
            success:function(data){
                $("#like-form")[0].reset();
                // console.log(data);
            },
            error: function(error) {
                // console.log(error);
            }
        });
    }

    // unliking course function
    function unLike() {
        document.getElementById('like-btn-1').style.display = 'block';
        document.getElementById('unlike-btn').style.display = 'none';
        noOfLikes = document.getElementById('like-no').innerHTML;
        document.getElementById('like-no').innerHTML = parseInt(noOfLikes) - 1;

        let user_id = '{{Auth::user()->id}}';
        let course_id = '{{$course->id}}';
        let like = 0;

        $.ajax({
            type:'POST',
            url: "{{ url('/elearning/like-course')}}",
            data:{
                "_token": "{{ csrf_token() }}",
                user_id:user_id,
                course_id:course_id,
                like:like,
            },
            success:function(data){
                $("#like-form")[0].reset();
                // console.log(data);
            },
            error: function(error) {
                // console.log(error);
            }
        });
    }
</script>
@endsection