{{-- Layout --}}
@extends('student.layout.layout')
{{-- Page Title --}}
@section('title','GAS LMS | Start Quiz')
{{-- Breadcrumb section --}}
{{-- @section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['Course Overview' => route('student.course.index',$coffid)]])
@endsection --}}
{{-- Content --}}
@section('content')
    <div class="text-center mb-10 sticky-top" id="quiz_timer_container"
        style="display: {{!request()->has('page') ? 'none':'block'}}">
        <a href="#" class="btn btn-sm btn-dark fw-bold" id="quiz_timer"></a>
    </div>
    <!--begin::Col-->
    @if (!request()->has('page'))
    <div class="col-xxl-12 mt-8" id="intro_card">
        <!--begin::Card widget 18-->
        <div class="card card-flush h-xl-100">
            <!--begin::Body-->
            <div class="card-body py-9">
                <!--begin::Row-->
                <div class="row gx-9 h-100">
                    <!--begin::Col-->
                    <div class="col-sm-3 mb-10 mb-sm-0">
                        <!--begin::Image-->
                        <div class="bgi-no-repeat bgi-position-center bgi-size-cover card-rounded min-h-400px min-h-sm-100 h-100" style="background-size: 100% 100%;background-image:url({{env('SECURE_ASSETS').'/assets/media/illustrations/sketchy-1/2.png'}})"></div>
                        <!--end::Image-->
                    </div>
                    <!--end::Col-->
                    <!--begin::Col-->
                    <div class="col-sm-9">
                        <!--begin::Wrapper-->
                        <div class="d-flex flex-column h-100">
                            <!--begin::Header-->
                            <div class="mb-7">
                                <!--begin::Headin-->
                                <div class="d-flex flex-stack ">
                                    <!--begin::Title-->
                                    <div class="flex-shrink-0 me-5">
                                        <span class="text-gray-400 fs-7 fw-bold me-2 d-block lh-1 pb-1">Course Name</span>
                                        <span class="text-gray-800 fs-3 fw-bold">
                                            {{$course_name->acyname.'_'.$course_name->cname}}
                                            {{$course_name->lshort_name}} {{$course_name->has_lable ? '( '.$course_name->label.' )' : ''}}
                                        </span>
                                    </div>
                                    <!--end::Title-->
                                    <span class="badge badge-light-primary flex-shrink-0 align-self-center py-3 px-4 fs-7">
                                        quiz time : {{$quiz->time_limit}} minuts
                                    </span>
                                </div>
                                <!--end::Heading-->
                            </div>
                            <!--end::Header-->
                            <!--begin::Body-->
                            <div class="mb-6">
                                <!--begin::Text-->
                                @if ($quiz->instructions)
                                    <span class="text-danger fs-3 fw-bold me-2 d-block lh-1 pb-1">Instructions</span>
                                    <span class="fw-semibold text-gray-600 fs-6 mb-8 d-block">Flat cartoony illustrations with vivid unblended colors and asymmetrical beautiful purple hair lady</span>
                                @endif
                                <!--end::Text-->
                                <!--begin::Stats-->
                                <div class="d-flex">
                                    <!--begin::Stat-->
                                    <div class="border border-gray-300 border-dashed rounded min-w-100px w-100 py-2 px-4 me-6 mb-3">
                                        <!--begin::Date-->
                                        <span class="fs-6 text-gray-700 fw-bold">
                                            <span class="text-primary">{{ Carbon\Carbon::parse($quiz->start_date)->format('F') }}</span>
                                            {{ Carbon\Carbon::parse($quiz->start_date)->format('d, Y') }}
                                            / ({{date('h:i A', strtotime($quiz->start_time))}})
                                        </span>
                                        <!--end::Date-->
                                        <!--begin::Label-->
                                        <div class="fw-semibold text-gray-400">Start date</div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Stat-->
                                    <!--begin::Stat-->
                                    <div class="border border-gray-300 border-dashed rounded min-w-100px w-100 py-2 px-4 mb-3">
                                        <!--begin::Date-->
                                        <span class="fs-6 text-gray-700 fw-bold">
                                            <span class="text-primary">{{ Carbon\Carbon::parse($quiz->end_date)->format('F') }}</span>
                                            {{ Carbon\Carbon::parse($quiz->end_date)->format('d, Y') }}
                                            / ({{date('h:i A', strtotime($quiz->end_time))}})
                                        </span>
                                        <!--end::Date-->
                                        <!--begin::Label-->
                                        <div class="fw-semibold text-gray-400">End date</div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Stat-->
                                </div>
                                <!--end::Stats-->
                            </div>
                            <!--end::Body-->
                            <!--begin::Footer-->
                            <div class="d-flex flex-stack mt-auto bd-highlight">
                                <div class="border border-gray-300 border-dashed rounded w-200px w-100 py-2 px-4 mb-3">
                                    <!--begin::Date-->
                                    <span class="fs-6 text-gray-700 fw-bold">
                                        {{$questions_count.' Questions'}}
                                    </span>
                                    <!--end::Date-->
                                    <!--begin::Label-->
                                    <div class="fw-semibold text-gray-400">Number Of Questions</div>
                                    <!--end::Label-->
                                </div>
                                <div class="border border-gray-300 border-dashed rounded w-200px w-100 py-2 px-4 mb-3">
                                    <!--begin::Date-->
                                    <span class="fs-6 fw-bold text-gray">
                                       {{$quiz->attempts}}
                                    </span>
                                    <!--end::Date-->
                                    <!--begin::Label-->
                                    <div class="fw-semibold text-gray-400">attempts</div>
                                    <!--end::Label-->
                                </div>
                                <div class="border border-gray-300 border-dashed rounded w-200px w-100 py-2 px-4 mb-3">
                                    <!--begin::Date-->
                                    <span class="fs-6 fw-bold text-danger" id="quiz_time_left">

                                    </span>
                                    <!--end::Date-->
                                    <!--begin::Label-->
                                    <div class="fw-semibold text-gray-400">Starts in</div>
                                    <!--end::Label-->
                                </div>

                                <!--begin::Actions-->
                                <a href="#quiz_start" class="btn btn-primary pulse pulse-danger me-10" id="start_btn">
                                    <span class="pulse-ring"></span>
                                    <span class="indicator-label">
                                        Start Quiz
                                    </span>
                                    <span class="indicator-progress">
                                        Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </a>
                                <!--end::Actions-->
                            </div>
                            <!--end::Footer-->
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>
            <!--end::Body-->
        </div>
        <!--end::Card widget 18-->
    </div>
    @endif
    <!--end::Col-->
    <div class="col-xxl-12 mt-8" id="quiz_start" style="display: {{!request()->has('page') ? 'none':'block'}}">
        <!--begin::Card widget 18-->
        <div class="card card-flush h-xl-100">
            <!--begin::Body-->
            <div class="card-body py-9">
                <form action="{{route('student.course.quiz.store',$coffid)}}">
                    @csrf
                    <input type="hidden" name="page" value="{{request()->page}}">
                    <!--begin::Stepper-->
                    @foreach ($quiz_questions as $quizQuestion)
                        @if ($quizQuestion->question->questiontype == 'mcq')
                        <input type="hidden" name="question_id" value="{{$quizQuestion->question->mcqQuestion->id}}">
                        <!--begin::Wrapper-->
                        <div class="w-100">
                            <!--begin::Heading-->
                            <div class="pb-10 pb-lg-15">
                                <!--begin::Title-->
                                <h2 class="fw-bold d-flex align-items-center text-dark">Choose the right answer</h2>
                                <!--end::Title-->
                            </div>
                            <!--end::Heading-->
                            <h2 class="fw-bold cursor-pointer mb-10">
                                {{$quizQuestion->question->mcqQuestion->name}} ?
                                @if ($quizQuestion->question->mcqQuestion->hint)
                                <span class="text-warning">hint:</span>
                                <span>{{$quizQuestion->question->mcqQuestion->hint}}</span>
                                @endif
                            </h2>
                            @if ($quizQuestion->question->mcqQuestion->questiontext)
                                <div class="border border-gray-300 border-dashed rounded min-w-100px w-100 py-2 px-4 me-6 mb-10">
                                    <!--begin::text-->
                                    <span class="fs-6 text-gray-700 fw-bold">
                                        {!! strip_tags($quizQuestion->question->mcqQuestion->questiontext) !!}
                                    </span>
                                    <!--end::text-->
                                </div>
                            @endif

                            {{-- Start:multimedia --}}
                            @if ($quizQuestion->question->mcqQuestion->multimedia_id)

                                <div class="menu-item px-3">
                                    @if ($quizQuestion->question->mcqQuestion->multimedia->type == 'ogg' || $quizQuestion->question->mcqQuestion->multimedia->type == 'mp4' || $quizQuestion->question->mcqQuestion->multimedia->type == 'mp3')
                                    <video
                                    id="my-video"
                                    class="video-js vjs-big-play-centered"
                                    controls
                                    preload="auto"
                                    width="auto"
                                    height="auto"
                                    poster="{{env('SECURE_ASSETS').'/assets/media/logos/logo.png'}}"
                                    data-setup="{}"
                                >
                                    <source src="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->mcqQuestion->multimedia->url)}}" type="{{$quizQuestion->question->getMimeType($quizQuestion->question->mcqQuestion->multimedia->url)}}" />
                                        @elseif ($quizQuestion->question->mcqQuestion->multimedia->type == 'png' || $quizQuestion->question->mcqQuestion->multimedia->type == 'jpg' || $quizQuestion->question->mcqQuestion->multimedia->type == 'jpeg')
                                        <img src="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->mcqQuestion->multimedia->url)}}" />
                                    </div>
                                @else
                                <div class="menu-item px-3">
                                    {{-- <span class="ms-3 pt-1 fw-bold">Attachment {{++$count}} </span> --}}
                                    <a href="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->mcqQuestion->multimedia->url)}}" class="menu-link shadow w-50 px-3">
                                        <i class="bi bi-cloud-arrow-down fs-4 text-dark "></i>
                                    <span class="ms-6 pt-1">Download</span>
                                    </a>
                                </div>
                                <div class="separator mb-3 opacity-75"></div>
                            @endif
                            @endif
                            {{-- End:multimedia --}}

                            @foreach ($quizQuestion->question->mcqQuestion->choices as $choice)
                                <div class="form-check form-check-custom form-check-success form-check-solid my-5 form-check-lg">
                                    <input class="form-check-input" name="choices[]" type="{{$quizQuestion->question->mcqQuestion->choice_type == 1 ? 'checkbox':'radio'}}" value="{{$choice->id}}"/>
                                    <label class="form-check-label fs-3" for="flexCheckDefault">
                                        {{$choice->description}}
                                        {{-- @if ($choice->multimedia_id)
                                        <div class="symbol symbol-50px ms-3">
                                            <img src="{{$choice->multimedia->url}}" alt="{{$choice->description}}">
                                        </div>
                                        @endif --}}
                                    </label>
                                </div>
                            @endforeach
                            <div class="fv-row mb-10 mt-10">
                                <!--begin::Input-->
                                <p class="badge badge-danger">Don't upload any file unless,it is needed</p>
                                <div class="file-drop-area">
                                    <span class="fake-btn">Choose files</span>
                                    <span class="file-msg">or drag and drop files here</span>
                                    <input class="file-input" type="file" name="question_multimedia">
                                </div>
                                <!--end::Input group-->
                            </div>
                        </div>
                        <!--end::Wrapper-->
                        @elseif ($quizQuestion->question->questiontype == 'essay')
                        <input type="hidden" name="question_id" value="{{$quizQuestion->question->essayQuestion->id}}">
                        <div class="w-100">
                            <!--begin::Heading-->
                            <div class="pb-10 pb-lg-15">
                                <!--begin::Title-->
                                <h2 class="fw-bold d-flex align-items-center text-dark">Essay Question</h2>
                                <!--end::Title-->
                            </div>
                            <!--end::Heading-->
                            <h2 class="fw-bold cursor-pointer mb-10">
                                {{$quizQuestion->question->essayQuestion->name}} ?
                                @if ($quizQuestion->question->essayQuestion->hint)
                                <span class="text-warning">hint:</span>
                                <span>{{$quizQuestion->question->essayQuestion->hint}}</span>
                                @endif
                            </h2>
                            @if ($quizQuestion->question->essayQuestion->questiontext)
                                <div class="border border-gray-300 border-dashed rounded min-w-100px w-100 py-2 px-4 me-6 mb-10">
                                    <!--begin::text-->
                                    <span class="fs-6 text-gray-700 fw-bold">
                                        {!! strip_tags($quizQuestion->question->essayQuestion->questiontext) !!}
                                    </span>
                                    <!--end::text-->
                                </div>
                            @endif

                            {{-- Start:multimedia --}}
                            @if ($quizQuestion->question->essayQuestion->multimedia_id)

                                <div class="menu-item px-3">
                                    @if ($quizQuestion->question->essayQuestion->multimedia->type == 'ogg' || $quizQuestion->question->mcqQuestion->multimedia->type == 'mp4' || $quizQuestion->question->mcqQuestion->multimedia->type == 'mp3')
                                    <video
                                    id="my-video"
                                    class="video-js vjs-big-play-centered"
                                    controls
                                    preload="auto"
                                    width="auto"
                                    height="auto"
                                    poster="{{env('SECURE_ASSETS').'/assets/media/logos/logo.png'}}"
                                    data-setup="{}"
                                >
                                    <source src="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->essayQuestion->multimedia->url)}}" type="{{$quizQuestion->question->getMimeType($quizQuestion->question->essayQuestion->multimedia->url)}}" />
                                        @elseif ($quizQuestion->question->essayQuestion->multimedia->type == 'png' || $quizQuestion->question->essayQuestion->multimedia->type == 'jpg' || $quizQuestion->question->essayQuestion->multimedia->type == 'jpeg')
                                        <img src="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->essayQuestion->multimedia->url)}}" />
                                    </div>
                                @else
                                <div class="menu-item px-3">
                                    {{-- <span class="ms-3 pt-1 fw-bold">Attachment {{++$count}} </span> --}}
                                    <a href="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->essayQuestion->multimedia->url)}}" class="menu-link shadow w-50 px-3">
                                        <i class="bi bi-cloud-arrow-down fs-4 text-dark "></i>
                                    <span class="ms-6 pt-1">Download</span>
                                    </a>
                                </div>
                                <div class="separator mb-3 opacity-75"></div>
                            @endif
                            @endif
                            {{-- End:multimedia --}}
                            <!--begin::Input-->
                            <textarea  name="essay_answer"  class="tox-target kt_docs_tinymce_hidden">
                                {{ old('essay_answer')}}
                            </textarea>
                            <!--end::Input-->
                            <div class="fv-row my-10">
                                <p class="badge badge-danger">Don't upload any file unless,it is needed</p>
                                <!--begin::Input-->
                                <div class="file-drop-area">
                                    <span class="fake-btn">Choose files</span>
                                    <span class="file-msg">or drag and drop files here</span>
                                    <input class="file-input" type="file" name="question_multimedia">
                                </div>
                                <!--end::Input group-->
                            </div>
                        </div>
                        @elseif ($quizQuestion->question->questiontype == 'complete')
                        <input type="hidden" name="question_id" value="{{$quizQuestion->question->completeQuestion->id}}">
                        <div class="w-100">
                            <!--begin::Heading-->
                            <div class="pb-10 pb-lg-15">
                                <!--begin::Title-->
                                <h2 class="fw-bold d-flex align-items-center text-dark">Complete the Following</h2>
                                <!--end::Title-->
                            </div>
                            <!--end::Heading-->
                            <h2 class="fw-bold cursor-pointer mb-10">
                                {{$quizQuestion->question->completeQuestion->name}} ?
                                @if ($quizQuestion->question->completeQuestion->hint)
                                <span class="text-warning">hint:</span>
                                <span>{{$quizQuestion->question->completeQuestion->hint}}</span>
                                @endif
                            </h2>
                            @if ($quizQuestion->question->completeQuestion->questiontext)
                                <div class="border border-gray-300 border-dashed rounded min-w-100px w-100 py-2 px-4 me-6 mb-10">
                                    <!--begin::text-->
                                    <span class="fs-6 text-gray-700 fw-bold">
                                        {!! strip_tags($quizQuestion->question->completeQuestion->questiontext) !!}
                                    </span>
                                    <!--end::text-->
                                </div>
                            @endif

                            {{-- Start:multimedia --}}
                            @if ($quizQuestion->question->completeQuestion->multimedia_id)

                                <div class="menu-item px-3">
                                    @if ($quizQuestion->question->completeQuestion->multimedia->type == 'ogg' || $quizQuestion->question->mcqQuestion->multimedia->type == 'mp4' || $quizQuestion->question->mcqQuestion->multimedia->type == 'mp3')
                                    <video
                                    id="my-video"
                                    class="video-js vjs-big-play-centered"
                                    controls
                                    preload="auto"
                                    width="auto"
                                    height="auto"
                                    poster="{{env('SECURE_ASSETS').'/assets/media/logos/logo.png'}}"
                                    data-setup="{}"
                                >
                                    <source src="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->completeQuestion->multimedia->url)}}" type="{{$quizQuestion->question->getMimeType($quizQuestion->question->completeQuestion->multimedia->url)}}" />
                                        @elseif ($quizQuestion->question->completeQuestion->multimedia->type == 'png' || $quizQuestion->question->completeQuestion->multimedia->type == 'jpg' || $quizQuestion->question->completeQuestion->multimedia->type == 'jpeg')
                                        <img src="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->completeQuestion->multimedia->url)}}" />
                                    </div>
                                @else
                                <div class="menu-item px-3">
                                    {{-- <span class="ms-3 pt-1 fw-bold">Attachment {{++$count}} </span> --}}
                                    <a href="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->completeQuestion->multimedia->url)}}" class="menu-link shadow w-50 px-3">
                                        <i class="bi bi-cloud-arrow-down fs-4 text-dark "></i>
                                    <span class="ms-6 pt-1">Download</span>
                                    </a>
                                </div>
                                <div class="separator mb-3 opacity-75"></div>
                            @endif
                            @endif
                            {{-- End:multimedia --}}
                            <!--begin::Input-->
                            <textarea  name="complete_answer"  class="tox-target kt_docs_tinymce_hidden">
                                {{ old('complete_answer')}}
                            </textarea>
                            <!--end::Input-->
                            <div class="fv-row my-10">
                                <p class="badge badge-danger">Don't upload any file unless,it is needed</p>
                                <!--begin::Input-->
                                <div class="file-drop-area">
                                    <span class="fake-btn">Choose files</span>
                                    <span class="file-msg">or drag and drop files here</span>
                                    <input class="file-input" type="file" name="question_multimedia">
                                </div>
                                <!--end::Input group-->
                            </div>
                        </div>
                        @elseif ($quizQuestion->question->questiontype == 'audio')
                        <input type="hidden" name="question_id" value="{{$quizQuestion->question->audioQuestion->id}}">
                        <div class="w-100">
                            <!--begin::Heading-->
                            <div class="pb-10 pb-lg-15">
                                <!--begin::Title-->
                                <h2 class="fw-bold d-flex align-items-center text-dark">Listen to the Audio below,
                                download the question file and then upload your answers</h2>
                                <!--end::Title-->
                            </div>
                            <!--end::Heading-->
                            <h2 class="fw-bold cursor-pointer mb-10">
                                {{$quizQuestion->question->audioQuestion->name}} ?
                                @if ($quizQuestion->question->audioQuestion->hint)
                                <span class="ms-6" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="{{$quizQuestion->question->mcqQuestion->hint}}">
                                    <i class="far fa-lightbulb text-warning fs-1"></i>
                                </span>
                                @endif
                            </h2>
                            @if ($quizQuestion->question->audioQuestion->questiontext)
                                <div class="border border-gray-300 border-dashed rounded min-w-100px w-100 py-2 px-4 me-6 mb-10">
                                    <!--begin::text-->
                                    <span class="fs-6 text-gray-700 fw-bold">
                                        {!! strip_tags($quizQuestion->question->audioQuestion->questiontext) !!}
                                    </span>
                                    <!--end::text-->
                                </div>
                            @endif

                            {{-- Start:multimedia --}}
                            @if ($quizQuestion->question->audioQuestion->multimedia_id != null)

                            {{-- audio --}}
                            <div class="menu-item px-3">
                                @if ($quizQuestion->question->audioQuestion->multimedia->type == 'ogg' || $quizQuestion->question->audioQuestion->multimedia->type == 'mp4' || $quizQuestion->question->audioQuestion->multimedia->type == 'mp3')
                                <video
                                id="my-video"
                                class="video-js vjs-big-play-centered"
                                controls
                                preload="auto"
                                width="auto"
                                height="auto"
                                poster="{{env('SECURE_ASSETS').'/assets/media/logos/logo.png'}}"
                                data-setup="{}"
                            >
                                <source src="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->audioQuestion->multimedia->url)}}" type="{{$quizQuestion->question->getMimeType($quizQuestion->question->audioQuestion->multimedia->url)}}" />

                            @elseif ($quizQuestion->question->audioQuestion->multimedia->type == 'png' || $quizQuestion->question->audioQuestion->multimedia->type == 'jpg' || $quizQuestion->question->audioQuestion->multimedia->type == 'jpeg')
                                    <img src="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->audioQuestion->multimedia->url)}}" />
                            </div>
                            {{-- file --}}
                            <div class="menu-item px-3">
                                {{-- <span class="ms-3 pt-1 fw-bold">Attachment {{++$count}} </span> --}}
                                <a href="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->audioQuestion->multimedia->url)}}" class="menu-link shadow w-50 px-3">
                                    <i class="bi bi-cloud-arrow-down fs-4 text-dark "></i>
                                <span class="ms-6 pt-1">Download Questions</span>
                                </a>
                            </div>
                            <div class="separator mb-3 opacity-75"></div>
                            @endif
                            @endif
                            {{-- End:multimedia --}}
                            <div class="file-drop-area">
                                <span class="fake-btn">Upload Answers</span>
                                <span class="file-msg">or drag and drop files here</span>
                                <input class="file-input" type="file" name="question_multimedia" required>
                            </div>
                        </div>
                        <!--end::Wrapper-->
                        @elseif ($quizQuestion->question->questiontype == 'file')
                        <input type="hidden" name="question_id" value="{{$quizQuestion->question->fileQuestion->id}}">
                        <!--begin::Wrapper-->
                        <div class="w-100">
                            <!--begin::Heading-->
                            <div class="pb-10 pb-lg-15">
                                <!--begin::Title-->
                                <h2 class="fw-bold d-flex align-items-center text-dark">Upload the file with your answers</h2>
                                <!--end::Title-->
                            </div>
                            <!--end::Heading-->
                            <h2 class="fw-bold cursor-pointer mb-10">
                                {{$quizQuestion->question->fileQuestion->name}} ?
                                @if ($quizQuestion->question->fileQuestion->hint)
                                <span class="ms-6" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="{{$quizQuestion->question->mcqQuestion->hint}}">
                                    <i class="far fa-lightbulb text-warning fs-1"></i>
                                </span>
                                @endif
                            </h2>
                            @if ($quizQuestion->question->fileQuestion->questiontext)
                                <div class="border border-gray-300 border-dashed rounded py-2 px-4 me-6 mb-10">
                                    <!--begin::text-->
                                    <span class="fs-6 text-gray-700 fw-bold">
                                        {!! strip_tags($quizQuestion->question->fileQuestion->questiontext) !!}
                                    </span>
                                    <!--end::text-->
                                </div>
                            @endif
                            {{-- Start:multimedia --}}
                            @if ($quizQuestion->question->fileQuestion->multimedia_id)
                                <div class="menu-item px-3">
                                    {{-- <span class="ms-3 pt-1 fw-bold">Attachment {{++$count}} </span> --}}
                                    <a href="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->fileQuestion->multimedia->url)}}" class="menu-link shadow w-50 px-3">
                                        <i class="bi bi-cloud-arrow-down fs-4 text-dark "></i>
                                    <span class="ms-6 pt-1">Download</span>
                                    </a>
                                </div>
                                <div class="separator mb-3 opacity-75"></div>

                            @endif
                            {{-- End:multimedia --}}
                            <div class="file-drop-area mt-5">
                                <span class="fake-btn">Upload Answers</span>
                                <span class="file-msg">or drag and drop files here</span>
                                <input class="file-input" type="file" name="question_multimedia">
                            </div>
                        </div>
                        <!--end::Wrapper-->
                        @elseif ($quizQuestion->question->questiontype == 'match')
                        <input type="hidden" name="question_id" value="{{$quizQuestion->question->matchQuestion->id}}">
                        <!--begin::Wrapper-->
                        <div class="w-100">
                            <!--begin::Heading-->
                            <div class="pb-10 pb-lg-15">
                                <!--begin::Title-->
                                <h2 class="fw-bold d-flex align-items-center text-dark">Match the following</h2>
                                <!--end::Title-->
                            </div>
                            <!--end::Heading-->
                            <h2 class="fw-bold cursor-pointer mb-10">
                                {{$quizQuestion->question->matchQuestion->name}} ?
                                @if ($quizQuestion->question->matchQuestion->hint)
                                <span class="ms-6" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="{{$quizQuestion->question->MatchQuestion->hint}}">
                                    <i class="far fa-lightbulb text-warning fs-1"></i>
                                </span>
                                @endif
                            </h2>
                            @if ($quizQuestion->question->matchQuestion->questiontext)
                                <div class="border border-gray-300 border-dashed rounded min-w-100px w-100 py-2 px-4 me-6 mb-10">
                                    <!--begin::text-->
                                    <span class="fs-6 text-gray-700 fw-bold">
                                        {!! strip_tags($quizQuestion->question->matchQuestion->questiontext) !!}
                                    </span>
                                    <!--end::text-->
                                </div>
                            @endif

                            {{-- Start:multimedia --}}
                            @if ($quizQuestion->question->matchQuestion->multimedia_id)

                            <div class="menu-item px-3">
                                @if ($quizQuestion->question->matchQuestion->multimedia->type == 'ogg' || $quizQuestion->question->matchQuestion->multimedia->type == 'mp4' || $quizQuestion->question->matchQuestion->multimedia->type == 'mp3')
                                <video
                                id="my-video"
                                class="video-js vjs-big-play-centered"
                                controls
                                preload="auto"
                                width="auto"
                                height="auto"
                                poster="{{env('SECURE_ASSETS').'/assets/media/logos/logo.png'}}"
                                data-setup="{}"
                            >
                                <source src="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->matchQuestion->multimedia->url)}}" type="{{$quizQuestion->question->getMimeType($quizQuestion->question->matchQuestion->multimedia->url)}}" />
                                @elseif ($quizQuestion->question->matchQuestion->multimedia->type == 'png' || $quizQuestion->question->matchQuestion->multimedia->type == 'jpg' || $quizQuestion->question->matchQuestion->multimedia->type == 'jpeg')
                                <img src="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->matchQuestion->multimedia->url)}}" />
                            </div>
                            @else
                            <div class="menu-item px-3">
                                {{-- <span class="ms-3 pt-1 fw-bold">Attachment {{++$count}} </span> --}}
                                <a href="{{$quizQuestion->question->getDownloadUrl($quizQuestion->question->matchQuestion->multimedia->url)}}" class="menu-link shadow w-50 px-3">
                                    <i class="bi bi-cloud-arrow-down fs-4 text-dark "></i>
                                <span class="ms-6 pt-1">Download</span>
                                </a>
                            </div>
                            <div class="separator mb-3 opacity-75"></div>
                            @endif
                            @endif
                            {{-- End:multimedia --}}

                            {{-- match --}}
                            <div class="row g-6 g-xl-12 mt-10">
                                <div class="card shadow">
                                    <div class="card-body">
                                        @foreach ($quizQuestion->question->matchQuestion->leftSideMatch as $left_item)
                                            <div class="row mb-10">
                                                <div class="col-md-6">
                                                    <select name="left_side_match_answer" class="form-control">
                                                        <option value="{{$left_item->id}}" selected readonly>{{$left_item->description}}</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-6">
                                                    <select name="right_side_match_answers[]" class="form-control">
                                                        @foreach ($quizQuestion->question->matchQuestion->rightSideMatch as $right_item)
                                                        <option value="{{$right_item->id}}">{{$right_item->description}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div class="fv-row mt-8">
                                <!--begin::Input-->
                                <div class="file-drop-area">
                                    <span class="fake-btn">Choose files</span>
                                    <span class="file-msg">or drag and drop files here</span>
                                    <input class="file-input" type="file" name="question_multimedia">
                                </div>
                                <!--end::Input group-->
                            </div>
                        </div>
                        <!--end::Wrapper-->
                        @endif
                    @endforeach
                    <!--end::Stepper-->
                    {{-- <div class="row mt-4"> --}}
                        <div>
                            {{ $quiz_questions->appends(Request::except('page'))->render('components._nextprevious') }}
                        </div>
                        {{-- <div class="col-md-2">
                            <button type="submit" class="btn btn-sm btn-primary">Submit this question</button>
                        </div> --}}
                    {{-- </div> --}}
                    <p class="mt-3">
                        Displaying {{$quiz_questions->count()}} of {{ $quiz_questions->total() }} question(s).
                    </p>
                </form>
            </div>
        </div>
    </div>

@endsection
@section('js')

{{-- stepper --}}
<script>
    // Stepper lement
    var element = document.querySelector("#kt_stepper_example_basic");

    // Initialize Stepper
    var stepper = new KTStepper(element);

    // Handle next step
    stepper.on("kt.stepper.next", function (stepper) {
        stepper.goNext(); // go next step
    });

    // Handle previous step
    stepper.on("kt.stepper.previous", function (stepper) {
        stepper.goPrevious(); // go previous step
    });
</script>
{{-- show quiz --}}
<script>
    const button = document.querySelector("#start_btn");
    // Handle button click event
    $('#start_btn').on('click',function() {
        // Activate indicator
        button.setAttribute("data-kt-indicator", "on");
        // Disable indicator after 3 seconds
        setTimeout(function() {
            button.removeAttribute("data-kt-indicator");
            $('#quiz_start').show()
            $('#intro_card').hide()
            $('#quiz_timer_container').show()
        }, 2000);
    });
</script>
{{-- editor --}}
<script>
    tinymce.init({
        selector: ".kt_docs_tinymce_hidden", height : "280",
        menubar: false,
        toolbar: ["styleselect fontselect fontsizeselect",
            "undo redo | cut copy paste | bold italic | link image | alignleft aligncenter alignright alignjustify",
            "bullist numlist | outdent indent | blockquote subscript superscript | advlist | autolink | lists charmap | print preview |  code"],
        plugins : "advlist autolink link image lists charmap print preview code"
    });
</script>
{{-- count down timer --}}
<script>
    let start='{{Carbon\Carbon::parse($quiz->start_time)}}'
    let quiz_end_time='{{Carbon\Carbon::parse($quiz->start_time)->add(new DateInterval('PT' . $quiz->time_limit . 'M'))}}'
    quiz_end_time = new Date(quiz_end_time).getTime()
    start = new Date(start).getTime()
    // Update the count down every 1 second
    const x = setInterval(function() {

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

         // Find the distance between now and the count down date
         let quiz_time_diff = quiz_end_time - now;
         let distance = start - now;

         // Time calculations for days, hours, minutes and seconds
        //  quiz timer
         let quiz_hours = Math.floor((quiz_time_diff / (1000 * 60 * 60)) % 24);
         let quiz_minutes = Math.floor((quiz_time_diff % (1000 * 60 * 60)) / (1000 * 60));
         let quiz_seconds = Math.floor((quiz_time_diff % (1000 * 60)) / 1000);
        // Time until quiz
         let until_quiz_hours = Math.floor((distance / (1000 * 60 * 60)) % 24);
         let until_quiz_minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
         let until_quiz_seconds = Math.floor((distance % (1000 * 60)) / 1000);

         // Output the result
         $('#quiz_time_left').html( until_quiz_hours + ' h ' + until_quiz_minutes + 'm ' + until_quiz_seconds + 's ');
         $('#quiz_timer').html( quiz_hours + ' h ' + quiz_minutes + 'm ' + quiz_seconds + 's ');

         // If the count down is over, write some text
         if (distance < 0) {
            //  clearInterval(x);
             $('#quiz_time_left').html('Started');
         }

         if (quiz_time_diff < 0) {
            //  clearInterval(x);
             $('#quiz_timer').html(' ');
             $('#quiz_timer_container').hide();
         }
     }, 1000);
</script>
@endsection