@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">
        <a href="{{route('elearn.show', $course->id)}}" class="text-color mb-4"><i class="feather-arrow-left mr-2"></i> Back</a>
    </div>
</div>
<div class="row">
    <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>
                <small class="text-color">{{$test->timer == 1 ? $test->timer. ' min' : $test->timer. ' mins'}} - {{$question_count == 1 ? $question_count. ' question' : $question_count. ' questions'}}</small>
                <div class="py-5 border-top-xs mt-4 row">
                    <div class="col-4">
                        <span class="fw-600 d-flex ls-1 text-grey-700 text-dark pe-4">
                            <span class="">Pass Mark</span>
                            <span class="ml-4">
                                @include('elements.progress')
                            </span>
                        </span>
                    </div>
                    <div class="col-4">
                        <span class="fw-600 d-flex ls-1 text-grey-700 text-dark pe-4">
                            <span class="">Your score</span>
                            <span class="ml-4">
                                @include('elements.progress-0')
                            </span>
                        </span>
                    </div>
                    <div class="col-4">
                        @if($third_percentage)
                            @if($third_percentage < 60)
                                <a class="text-color">
                                    Maximum limit reached
                                </a>
                            @else
                                <span class="text-green"><i class="feather-check-circle"></i> Test completed</span>
                            @endif
                        @elseif($second_percentage)
                            @if($second_percentage < 60)
                                <a class="btn custom-btn" data-toggle="modal" data-target="#exampleModalCenter">
                                    Retake Test
                                </a>
                            @else
                                <span class="text-green"><i class="feather-check-circle"></i> Test completed</span>
                            @endif
                        @elseif($first_percentage)
                            @if($first_percentage < 60)
                                <a class="btn custom-btn" data-toggle="modal" data-target="#exampleModalCenter">
                                    Retake Test
                                </a>
                            @else
                                <span class="text-green"><i class="feather-check-circle"></i> Test completed</span>
                            @endif
                        @else
                            <a class="btn custom-btn" data-toggle="modal" data-target="#exampleModalCenter">
                                Start Test
                            </a>
                        @endif
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="justify-content-center align-items-center text-center">
                            @if($third_percentage)
                                @if($third_percentage < 60)
                                    <h4>You need a minimum of 60% to successfully complete this course</h4>
                                @else
                                    <h4>Congratulations, you have successfully completed this course!</h4>
                                    <div class="mt-4">
                                        <div class="d-flex justify-content-center">
                                            @if(@$certificate->is_active == 1)
                                                <a href="{{route('elearn.show-certificate', @$certificate->id)}}" target="_blank" class="custom-btn rounded-1 mr-3"><i class="feather-download"></i> Download certificate</a>
                                            @endif
                                            <a href="" data-toggle="modal" data-target="#reviewModal" class="custom-btn-outline rounded-1"><i class="mdi mdi-star"></i> Review this course</a>
                                        </div>
                                    </div>
                                @endif
                            @elseif($second_percentage)
                                @if($second_percentage < 60)
                                    <h4>You need a minimum of 60% to successfully complete this course</h4>
                                @else
                                    <h4>Congratulations, you have successfully completed this course!</h4>
                                    <div class="mt-4">
                                        <div class="d-flex justify-content-center">
                                            @if(@$certificate->is_active == 1)
                                                <a href="{{route('elearn.show-certificate', @$certificate->id)}}" target="_blank" class="custom-btn rounded-1 mr-3"><i class="feather-download"></i> Download certificate</a>
                                            @endif
                                            <a href="" data-toggle="modal" data-target="#reviewModal" class="custom-btn-outline rounded-1"><i class="mdi mdi-star"></i> Review this course</a>
                                        </div>
                                    </div>
                                @endif
                            @elseif($first_percentage)
                                @if($first_percentage < 60)
                                    <h4>You need a minimum of 60% to successfully complete this course</h4>
                                @else
                                    <h4>Congratulations, you have successfully completed this course!</h4>
                                    <div class="mt-4">
                                        <div class="d-flex justify-content-center">
                                            @if(@$certificate->is_active == 1)
                                                <a href="{{route('elearn.show-certificate', @$certificate->id)}}" target="_blank" class="custom-btn rounded-1 mr-3"><i class="feather-download"></i> Download certificate</a>
                                            @endif
                                            <a href="" data-toggle="modal" data-target="#reviewModal" class="custom-btn-outline rounded-1"><i class="mdi mdi-star"></i> Review this course</a>
                                        </div>
                                    </div>
                                @endif
                            @endif
                        </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" 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 class="text-muted">{{Str::words($course->description, 10)}}</small><br>
                            <small class="text-color">Duration: 30 mins</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 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
                @if($score >= 60)
                    @if(@$certificate->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-yellow play-icon mdi mdi-certificate me-2 mr-3 bg-greylight"></i>
                                </a>
                            </div>
                            <div class="col-10">
                                <a href="{{route('elearn.show-certificate', @$certificate->id)}}" target="_blank" class="fw-600 ls-1 text-grey-700 text-dark pe-4">
                                    <span class="">Download Certificate</span><br>
                                    <small>Certificate of Participation</small><br>
                                </a>
                            </div>
                        </div>
                    @endif
                @endif
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="width: 100%; height: auto !important">
            <div class="modal-header">
                <h5>Start quiz</h5>
                <div class="btn btn-icon btn-sm btn-active-icon-primary" data-dismiss="modal" aria-label="Close">
                    <span class="svg-icon svg-icon-2x">
                        <i class="mdi mdi-close"></i>
                    </span>
                </div>
            </div>
            <div class="modal-body">
                <div class="px-4 pb-4">
                    <div class="row justify-content-center">
                        <div class="col-12">
                            <div class="alert alert-warning d-flex">
                                <i class="mdi mdi-alert mr-3"></i><p class="text-muted"> You're about to begin a test, note the following</p>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <p class="text-grey-700 text-dark"><i class="mdi mdi-check"></i> You will have only {{$test->timer == 1 ? $test->timer. ' min' : $test->timer. ' mins'}}</p>
                        <p class="text-grey-700 text-dark"><i class="mdi mdi-check"></i> This assessment will close once time runs out.</p>
                        <p class="text-grey-700 text-dark"><i class="mdi mdi-check"></i> You can't exit from the assessment while taking it.</p>
                        <p class="text-grey-700 text-dark"><i class="mdi mdi-check"></i> You'll get points on the basis of your correct answers.</p>
                        <p class="text-grey-700 text-dark"><i class="mdi mdi-check"></i> You must submit this assessment once completed.</p>
                    </div>
                    <div class="my-4">
                        <a class="btn custom-btn float-right mb-4" href="{{route('elearn.startquiz', $course->id)}}">
                            Proceed
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('elements.add-review')
@endsection