@extends('layouts.landing')

@section('title')
    {{$module->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">
                @if($first_module->id == $module->id)
                    <a href="{{route('elearn.show', $course->id)}}" class="text-color mb-4"><i class="fe fe-arrow-left mr-2"></i> Previous</a>
                @else
                    <a href="{{route('elearn.start-course', $prev->id)}}" class="text-color mb-4"><i class="fe fe-arrow-left mr-2"></i> Previous</a>
                @endif
            </div>
            <div class="col-auto">
                @if($last_module->id == $module->id)
                    @if(isset($test))
                        @if($test->is_active == 1)
                            <a href="{{route('elearn.quiz', $course->id)}}" class="custom-btn btn"> Take Quiz</a>
                        @endif
                    @endif
                @else
                    <a href="{{route('elearn.start-course', $next->id)}}" 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($module->video))
                <video controls class="rounded-xxl js-player object-cover" controlsList="nodownload" data-plyr-config='{ "ratio": "16:9" }' data-poster="{{$module->photo}}">
                    <source src="{{$module->video}}" type="video/mp4">
                </video>
            @endif
            @if(isset($module->audio))
                <img src="{{$module->photo}}" class="h320 rounded-2 w-100 object-cover mb-4" alt="">
                <audio id="audio_play" src="{{$module->audio}}" controlsList="nodownload" controls style="width: 100%"></audio>
            @endif
        </div>
        <div class="row">
            <div class="col">
                <h4 class="header-title">
                    {{$module->title}}
                </h4>
                <small class="text-muted">
                    @if($viewed_module_count < 2)
                        <span id="viewedCount">{{number_format($viewed_module_count)}}</span> view
                    @else
                        <span id="viewedCount">{{number_format($viewed_module_count)}}</span> views
                    @endif
                    &nbsp; | &nbsp; <span id="duration"></span>,  {{$module->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}}">
                            <input type="hidden" name="module_id" id="module-id" value="{{$module->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 mdi-heart-outline like 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">
                            Module Description
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="material-tab" data-toggle="tab" href="#material" role="tab" aria-controls="material" aria-selected="false">
                            Materials
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="tab-content" id="wizardSteps">
                <div class="tab-pane fade show active" id="all" 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 small text-muted">
                                                {{$module->description}}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </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">
                <h5>{{$course->title}}</h5>
                @if(count($modules) > 0)
                    @foreach($modules as $exact_module)
                        <div class="py-4 border-bottom-xs {{$exact_module->id == $module->id ? 'active-border' : ''}} row">
                            <div class="col-2">
                                <a href="{{route('elearn.start-course', $exact_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', $exact_module->id)}}" class="fw-600 ls-1 text-grey-700 text-dark pe-4">
                                    <span class="">{{$exact_module->title}}</span><br>
                                    <small>{{Str::words($exact_module->description, 10)}}</small><br>
                                    <small class="text-color">Duration:
                                        @if($exact_module->duration > 1)
                                            {{$exact_module->duration}} mins
                                        @else
                                            {{$exact_module->duration}} min
                                        @endif
                                    </small><br>
                                </a>
                            </div>
                        </div>
                    @endforeach
                @endif
                @if(isset($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')
<script>
    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-module')}}",
                data:{
                    "_token": "{{ csrf_token() }}",
                    user_id: "{{Auth::user()->id}}",
                    course_id: "{{$course->id}}",
                    module_id: "{{$module->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 lastModule = "{{$last_module->id}}";
                    var moduleId = "{{$module->id}}";
                    var testId = "{{$test ? $test->id : ''}}";
                    if(lastModule == moduleId) {
                        if(testId !== '') {
                            var testActive = "{{$test ? $test->is_active : 0}}";
                            if(testActive == 1) {
                                window.location.href = "{{route('elearn.quiz', $course->id)}}";
                            }
                        } else {
                            window.location.href = "{{route('elearn.start-course', $module->id)}}";
                        }
                    } else if(lastModule !== moduleId) {
                        window.location.href = "{{route('elearn.start-course', $next ? $next->id : $module->id)}}";
                    }
                },
                error: function(error) {
                    toastr.error("There was a problem completing this module", "", defaultSetting)
                    console.log(error);
                }
            });
        }, true);
        audio.ondurationchange = function() {
            var video_duration = this.duration;
        document.getElementById('duration').innerHTML = Math.round(video_duration / 60) + ' mins';
        };
    }
    if(video != undefined) {
        video.addEventListener("ended", function() {
            $.ajax({
                type:'POST',
                url: "{{ url('/elearning/viewed-module')}}",
                data:{
                    "_token": "{{ csrf_token() }}",
                    user_id: "{{Auth::user()->id}}",
                    course_id: "{{$course->id}}",
                    module_id: "{{$module->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 lastModule = "{{$last_module->id}}";
                    var moduleId = "{{$module->id}}";
                    var testId = "{{$test ? $test->id : ''}}";
                    if(lastModule == moduleId) {
                        if(testId !== '') {
                            var testActive = "{{$test ? $test->is_active : 0}}";
                            if(testActive == 1) {
                                window.location.href = "{{route('elearn.quiz', $course->id)}}";
                            }
                        } else {
                            window.location.href = "{{route('elearn.start-course', $module->id)}}";
                        }
                    } else if(lastModule !== moduleId) {
                        window.location.href = "{{route('elearn.start-course', $next ? $next->id : $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 module_id = '{{$module->id}}';
        let like = 1;

        $.ajax({
            type:'POST',
            url: "{{ url('/elearning/like-module')}}",
            data:{
                "_token": "{{ csrf_token() }}",
                user_id:user_id,
                course_id:course_id,
                module_id:module_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 module_id = '{{$module->id}}';
        let like = 0;

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

@endsection