@extends('layouts.landing')

@section('title', 'Elearning Quiz')

@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>
@php
    $score = $third_percentage ? $third_percentage : ($second_percentage ? $second_percentage : ($first_percentage ? $first_percentage : 0));
@endphp
<div class="row mobile-mt-8">
    <div class="col-12 col-lg-8 col-xl-8">
        <div class="card w-100 shadow-xss rounded-xxl border-0 mt-4 ps-4 pt-4 pe-4 pb-3 mb-3" style="height: 470px">
            <div class="card-body p-0">
                <h5>{{$test->title}}</h5>
                <div class="row align-item-end d-flex">
                    <div class="col">
                        <small class="text-color">{{$test->timer == 1 ? $test->timer. ' min' : $test->timer. ' mins'}} - {{$question_count == 1 ? $question_count. ' question' : $question_count. ' questions'}}</small>
                    </div>
                    <div class="col-auto">
                        <h5 class="text-color" id="demo">00:00</h5>
                    </div>
                </div>
                <div class="py-5 border-top-xs mt-4 row">
                    <div class="col-12">
                        @if($third_percentage)
                            @if($third_percentage < 60)
                                <h4 class="text-center">
                                    Maximum limit reached, You cannot retake this test again
                                </h5>
                            @endif
                        @elseif($second_percentage)
                            @if($second_percentage < 60)
                                <form class="tab-content pb-4" id="wizardSteps">
                                    @if(count($questions) > 0)
                                        @php
                                            $question_no = 1;
                                        @endphp
                                        @foreach ($questions as $question)
                                            <div class="tab-pane fade {{$first_question->id == $question->id ? 'show active' : ''}}" id="wizardStep{{$question_no}}" role="tabpanel" aria-labelledby="wizardTab{{$question_no}}">
                                                <div class="">
                                                    <div class="question mb-3">
                                                        <h5 class="text">{{$question_no}}. {{$question->title}}</h5>
                                                        <input type="hidden" name="user_id" id="user_id" value="{{Auth::user()->id}}">
                                                        <input type="hidden" name="test_id" id="test_id" value="{{$test->id}}">
                                                        <input type="hidden" name="test_title" id="test_title" value="{{$test->title}}">
                                                        <input type="hidden" name="question_id" id="question_id" value="{{$question->id}}">
                                                        <input type="hidden" name="correct_answer" id="correct_answer" value="{{$question->answer}}">
                                                        <input type="hidden" name="user_answer" id="user_answer{{$question->id}}">
                                                        <input type="hidden" name="user_points" id="user_points" value="{{$question->points}}">
                                                        <input type="hidden" name="attempts" id="attempt" value="3">
                                                        <div class="form-check mt-1">
                                                            <input class="form-check-input " name="option" id="option_a{{$question->id}}" onclick="answerOption('option_a{{$question->id}}', 'user_answer{{$question->id}}', this)" type="radio" value="{{$question->option_a}}" aria-label="">
                                                            <label class="text-grey-500 font-xss">{{$question->option_a}}</label>
                                                        </div>
                                                        <div class="form-check mt-1">
                                                            <input class="form-check-input " name="option" id="option_b{{$question->id}}" onclick="answerOption('option_b{{$question->id}}', 'user_answer{{$question->id}}', this)" type="radio" value="{{$question->option_b}}" aria-label="">
                                                            <label class="text-grey-500 font-xss">{{$question->option_b}}</label>
                                                        </div>
                                                        <div class="form-check mt-1">
                                                            <input class="form-check-input " name="option" id="option_c{{$question->id}}" onclick="answerOption('option_c{{$question->id}}', 'user_answer{{$question->id}}', this)" type="radio" value="{{$question->option_c}}" aria-label="">
                                                            <label class="text-grey-500 font-xss">{{$question->option_c}}</label>
                                                        </div>
                                                        <div class="form-check mt-1">
                                                            <input class="form-check-input " name="option" id="option_d{{$question->id}}" onclick="answerOption('option_d{{$question->id}}', 'user_answer{{$question->id}}', this)" type="radio" value="{{$question->option_d}}" aria-label="">
                                                            <label class="text-grey-500 font-xss">{{$question->option_d}}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="nav row  pt-5 border-top-xs">
                                                    <div class="col-auto">
                                                        <button class="btn btn-white d-none" type="reset">Cancel</button>
                                                    </div>
                                                    <div class="col text-center">
                                                        <h6 class="text-muted mb-0">Question {{$question_no}} of {{$question_count}}</h6>
                                                    </div>
                                                    <div class="col-auto">
                                                        @if($last_question->id == $question->id)
                                                            <input type="hidden" name="final">
                                                            <button type="button" class="custom-btn rounded-1" onclick="submitResult('{{Auth::user()->id}}', '{{$question->id}}', 'user_answer{{$question->id}}', '{{$question->answer}}', '{{$test->id}}', '{{$test->title}}', 'attempt', '{{$question->points}}')">Submit</button>
                                                            @else
                                                            <a class="custom-btn rounded-1" onclick="saveResult('{{Auth::user()->id}}', '{{$question->id}}', 'user_answer{{$question->id}}', '{{$question->answer}}', '{{$test->id}}', '{{$test->title}}', 'attempt', '{{$question->points}}')" data-toggle="wizard" href="#wizardStep{{$question_no + 1}}">Next</a>
                                                        @endif
                                                    </div>
                                                    @php
                                                        $question_no++;
                                                    @endphp
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </form>
                            @endif
                        @elseif($first_percentage)
                            @if($first_percentage < 60)
                                <form class="tab-content pb-4" id="wizardSteps">
                                    @if(count($questions) > 0)
                                        @php
                                            $question_no = 1;
                                        @endphp
                                        @foreach ($questions as $question)
                                            <div class="tab-pane fade {{$first_question->id == $question->id ? 'show active' : ''}}" id="wizardStep{{$question_no}}" role="tabpanel" aria-labelledby="wizardTab{{$question_no}}">
                                                <div class="">
                                                    <div class="question mb-3">
                                                        <h5 class="text">{{$question_no}}. {{$question->title}}</h5>
                                                        <input type="hidden" name="user_id" id="user_id" value="{{Auth::user()->id}}">
                                                        <input type="hidden" name="test_id" id="test_id" value="{{$test->id}}">
                                                        <input type="hidden" name="test_title" id="test_title" value="{{$test->title}}">
                                                        <input type="hidden" name="question_id" id="question_id" value="{{$question->id}}">
                                                        <input type="hidden" name="correct_answer" id="correct_answer" value="{{$question->answer}}">
                                                        <input type="hidden" name="user_answer" id="user_answer{{$question->id}}">
                                                        <input type="hidden" name="user_points" id="user_points" value="{{$question->points}}">
                                                        <input type="hidden" name="attempts" id="attempt" value="2">
                                                        <div class="form-check mt-1">
                                                            <input class="form-check-input " name="option" id="option_a{{$question->id}}" onclick="answerOption('option_a{{$question->id}}', 'user_answer{{$question->id}}', this)" type="radio" value="{{$question->option_a}}" aria-label="">
                                                            <label class="text-grey-500 font-xss">{{$question->option_a}}</label>
                                                        </div>
                                                        <div class="form-check mt-1">
                                                            <input class="form-check-input " name="option" id="option_b{{$question->id}}" onclick="answerOption('option_b{{$question->id}}', 'user_answer{{$question->id}}', this)" type="radio" value="{{$question->option_b}}" aria-label="">
                                                            <label class="text-grey-500 font-xss">{{$question->option_b}}</label>
                                                        </div>
                                                        <div class="form-check mt-1">
                                                            <input class="form-check-input " name="option" id="option_c{{$question->id}}" onclick="answerOption('option_c{{$question->id}}', 'user_answer{{$question->id}}', this)" type="radio" value="{{$question->option_c}}" aria-label="">
                                                            <label class="text-grey-500 font-xss">{{$question->option_c}}</label>
                                                        </div>
                                                        <div class="form-check mt-1">
                                                            <input class="form-check-input " name="option" id="option_d{{$question->id}}" onclick="answerOption('option_d{{$question->id}}', 'user_answer{{$question->id}}', this)" type="radio" value="{{$question->option_d}}" aria-label="">
                                                            <label class="text-grey-500 font-xss">{{$question->option_d}}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="nav row  pt-5 border-top-xs">
                                                    <div class="col-auto">
                                                        <button class="btn btn-white d-none" type="reset">Cancel</button>
                                                    </div>
                                                    <div class="col text-center">
                                                        <h6 class="text-muted mb-0">Question {{$question_no}} of {{$question_count}}</h6>
                                                    </div>
                                                    <div class="col-auto">
                                                        @if($last_question->id == $question->id)
                                                            <input type="hidden" name="final">
                                                            <button type="button" class="custom-btn rounded-1" onclick="submitResult('{{Auth::user()->id}}', '{{$question->id}}', 'user_answer{{$question->id}}', '{{$question->answer}}', '{{$test->id}}', '{{$test->title}}', 'attempt', '{{$question->points}}')">Submit</button>
                                                            @else
                                                            <a class="custom-btn rounded-1" onclick="saveResult('{{Auth::user()->id}}', '{{$question->id}}', 'user_answer{{$question->id}}', '{{$question->answer}}', '{{$test->id}}', '{{$test->title}}', 'attempt', '{{$question->points}}')" data-toggle="wizard" href="#wizardStep{{$question_no + 1}}">Next</a>
                                                        @endif
                                                    </div>
                                                    @php
                                                        $question_no++;
                                                    @endphp
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </form>
                            @endif
                        @else
                            <form class="tab-content pb-4" id="wizardSteps">
                                @if(count($questions) > 0)
                                    @php
                                        $question_no = 1;
                                    @endphp
                                    @foreach ($questions as $question)
                                        <div class="tab-pane fade {{$first_question->id == $question->id ? 'show active' : ''}}" id="wizardStep{{$question_no}}" role="tabpanel" aria-labelledby="wizardTab{{$question_no}}">
                                            <div class="">
                                                <div class="question mb-3">
                                                    <h5 class="text">{{$question_no}}. {{$question->title}}</h5>
                                                    <input type="hidden" name="user_id" id="user_id" value="{{Auth::user()->id}}">
                                                    <input type="hidden" name="test_id" id="test_id" value="{{$test->id}}">
                                                    <input type="hidden" name="test_title" id="test_title" value="{{$test->title}}">
                                                    <input type="hidden" name="question_id" id="question_id" value="{{$question->id}}">
                                                    <input type="hidden" name="correct_answer" id="correct_answer" value="{{$question->answer}}">
                                                    <input type="hidden" name="user_answer" id="user_answer{{$question->id}}">
                                                    <input type="hidden" name="user_points" id="user_points" value="{{$question->points}}">
                                                    <input type="hidden" name="attempts" id="attempt" value="1">
                                                    <div class="form-check mt-1">
                                                        <input class="form-check-input " name="option" id="option_a{{$question->id}}" onclick="answerOption('option_a{{$question->id}}', 'user_answer{{$question->id}}', this)" type="radio" value="{{$question->option_a}}" aria-label="">
                                                        <label class="text-grey-500 font-xss">{{$question->option_a}}</label>
                                                    </div>
                                                    <div class="form-check mt-1">
                                                        <input class="form-check-input " name="option" id="option_b{{$question->id}}" onclick="answerOption('option_b{{$question->id}}', 'user_answer{{$question->id}}', this)" type="radio" value="{{$question->option_b}}" aria-label="">
                                                        <label class="text-grey-500 font-xss">{{$question->option_b}}</label>
                                                    </div>
                                                    <div class="form-check mt-1">
                                                        <input class="form-check-input " name="option" id="option_c{{$question->id}}" onclick="answerOption('option_c{{$question->id}}', 'user_answer{{$question->id}}', this)" type="radio" value="{{$question->option_c}}" aria-label="">
                                                        <label class="text-grey-500 font-xss">{{$question->option_c}}</label>
                                                    </div>
                                                    <div class="form-check mt-1">
                                                        <input class="form-check-input " name="option" id="option_d{{$question->id}}" onclick="answerOption('option_d{{$question->id}}', 'user_answer{{$question->id}}', this)" type="radio" value="{{$question->option_d}}" aria-label="">
                                                        <label class="text-grey-500 font-xss">{{$question->option_d}}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="nav row  pt-5 border-top-xs">
                                                <div class="col-auto">
                                                    <button class="btn btn-white d-none" type="reset">Cancel</button>
                                                </div>
                                                <div class="col text-center">
                                                    <h6 class="text-muted mb-0">Question {{$question_no}} of {{$question_count}}</h6>
                                                </div>
                                                <div class="col-auto">
                                                    @if($last_question->id == $question->id)
                                                        <input type="hidden" name="final">
                                                        <button type="button" class="custom-btn rounded-1" onclick="submitResult('{{Auth::user()->id}}', '{{$question->id}}', 'user_answer{{$question->id}}', '{{$question->answer}}', '{{$test->id}}', '{{$test->title}}', 'attempt', '{{$question->points}}')">Submit</button>
                                                        @else
                                                        <a class="custom-btn rounded-1" onclick="saveResult('{{Auth::user()->id}}', '{{$question->id}}', 'user_answer{{$question->id}}', '{{$question->answer}}', '{{$test->id}}', '{{$test->title}}', 'attempt', '{{$question->points}}')" data-toggle="wizard" href="#wizardStep{{$question_no + 1}}">Next</a>
                                                    @endif
                                                </div>
                                                @php
                                                    $question_no++;
                                                @endphp
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </form>
                        @endif
                    </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" style="height: 470px">
            <div class="card-body p-0">
                <h5>{{$test->title}}</h5>
                <div class="py-4 border-bottom-xs active-border row">
                    <div class="col-2">
                        <a href="{{route('elearn.show', $course->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.show', $course->id)}}" class="fw-600 ls-1 text-grey-700 text-dark pe-4">
                            <span class="">{{$course->title}}</span><br>
                            <small>{{Str::words($course->description, 10)}}</small><br>
                            @php
                                $module_duration = App\Models\Module::where('course_id', $course->id)->sum('duration');
                                $duration = $course->duration + $module_duration;
                            @endphp
                            <small class="text-color">Duration:
                                @if($duration > 1)
                                    {{$duration}} mins
                                @else
                                    {{$duration}} min
                                @endif
                            </small>
                        </a>
                    </div>
                </div>
                @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 mdi mdi-certificate 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="">Quiz</span><br>
                                @if(@$certificate)
                                    <small>Earn a certificate upon completion</small><br>
                                @else
                                    <small>Get cumulated accredited Ecle points when you take this quiz</small><br>
                                @endif
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@php
    $time = \Carbon\Carbon::parse($user_time->time)->addMinutes($test->timer);
@endphp
<script>

    function answerOption(selected_option, user_answer, event) {
        if(event.checked == true){
            document.getElementById(user_answer).value = $('#' + selected_option).val();
        }
    }

    function saveResult(userId, quesionId, userAnswer, correctAnswer, testId, testTitle, attempted, userPoints) {
        let user_id = userId;
        let question_id = quesionId;
        let user_answer = $('#' + userAnswer).val();
        let correct_answer = correctAnswer;
        let test_id = testId;
        let test_title = testTitle;
        let attempt = $('#' + attempted).val();
        if(user_answer == correct_answer) {
            let user_points = userPoints;
            let percentage = 100;
            $.ajax({
                url:"/elearning/test/q/save",
                type:'POST',
                data:{
                    "_token": "{{ csrf_token() }}",
                    user_id:user_id,
                    test_id:test_id,
                    question_id:question_id,
                    user_answer:user_answer,
                    correct_answer:correct_answer,
                    test_title:test_title,
                    attempts:attempt,
                    points:user_points,
                    percentage:percentage,
                },
                success:function(response){
                    // toastr.success("Test Submitted", "", defaultSetting)
                    console.log(response);
                },
                error: function(error) {
                    // toastr.error("There was a problem submitting this test", "", defaultSetting)
                    console.log(error);
                }
            });
        } else if(user_answer !== correct_answer) {
            let user_points = 0;
            let percentage = 0;
            $.ajax({
                url:"/elearning/test/q/save",
                type:'POST',
                data:{
                    "_token": "{{ csrf_token() }}",
                    user_id:user_id,
                    test_id:test_id,
                    question_id:question_id,
                    user_answer:user_answer,
                    correct_answer:correct_answer,
                    test_title:test_title,
                    attempts:attempt,
                    points:user_points,
                    percentage:percentage,
                },
                success:function(response){
                    // toastr.success("Test submitted", "", defaultSetting)
                    console.log(response);
                },
                error: function(error) {
                    // toastr.error("There was a problem submitting this test", "", defaultSetting)
                    console.log(error);
                }
            });
        }
    }

    function submitResult(userId, quesionId, userAnswer, correctAnswer, testId, testTitle, attempted, userPoints) {
        let user_id = userId;
        let question_id = quesionId;
        let user_answer = $('#' + userAnswer).val();
        let correct_answer = correctAnswer;
        let test_id = testId;
        let test_title = testTitle;
        let attempt = $('#' + attempted).val();
        let final = 1;
        if(user_answer == correct_answer) {
            let user_points = userPoints;
            let percentage = 100;
            $.ajax({
                url:"/elearning/test/q/save",
                type:'POST',
                data:{
                    "_token": "{{ csrf_token() }}",
                    user_id:user_id,
                    test_id:test_id,
                    question_id:question_id,
                    user_answer:user_answer,
                    correct_answer:correct_answer,
                    test_title:test_title,
                    attempts:attempt,
                    points:user_points,
                    percentage:percentage,
                    final:final
                },
                success:function(response){
                    toastr.success("Test Submitted", "", defaultSetting)
                    window.location.href = "{{route('elearn.quiz', $course->id)}}";
                    console.log(response);
                },
                error: function(error) {
                    toastr.error("There was a problem submitting this test", "", defaultSetting)
                    console.log(error);
                }
            });
        } else if(user_answer !== correct_answer) {
            let user_points = 0;
            let percentage = 0;
            $.ajax({
                url:"/elearning/test/q/save",
                type:'POST',
                data:{
                    "_token": "{{ csrf_token() }}",
                    user_id:user_id,
                    test_id:test_id,
                    question_id:question_id,
                    user_answer:user_answer,
                    correct_answer:correct_answer,
                    test_title:test_title,
                    attempts:attempt,
                    points:user_points,
                    percentage:percentage,
                    final:final
                },
                success:function(response){
                    toastr.success("Test submitted", "", defaultSetting)
                    window.location.href = "{{route('elearn.quiz', $course->id)}}";
                    console.log(response);
                },
                error: function(error) {
                    toastr.error("There was a problem submitting this test", "", defaultSetting)
                    console.log(error);
                }
            });
        }
    }

    // Set the date we're counting down to
    var countDownDate = new Date("{{$time}}").getTime();

    // Update the count down every 1 second
    var x = setInterval(function() {

    // Get today's date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60), 2);
    var seconds = Math.floor((distance % (1000 * 60)) / 1000, 2);

    // Display the result in the element with id="demo"
    document.getElementById("demo").innerHTML = minutes + " : " + seconds;

    // If the count down is finished, write some text
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "Quiz ended";
        window.location.href = "{{route('elearn.quiz', $course->id)}}";
    }
    }, 1000);
</script>
@endsection