{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title','GAS LMS | Preview Quiz')
{{-- Breadcrumb section --}}
@section('breadcrumb')
@include('components._breadcrumb', ['items' => ['Quizzes' => route('teacher.course.quiz.index',$coffid)]])
@endsection
{{-- Content --}}
@section('content')
    <div class="text-center mb-10 sticky-top" id="quiz_timer_container" style="display: none">
        <a href="#" class="btn btn-sm btn-dark fw-bold" id="quiz_timer"></a>
    </div>    <!--begin::Col-->
    <div class="col-xxl-12" 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>
    <!--end::Col-->
    <div class="col-xxl-12" id="quiz_start" style="display: none">
         <!--begin::Stepper-->
         <div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid" id="kt_stepper_example_basic">
            <!--begin::Aside-->
            <div class="card d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px w-xxl-400px me-9">
                <!--begin::Wrapper-->
                <div class="card-body px-6 px-lg-10 px-xxl-15 py-20">
                    <!--begin::Nav-->
                    <div class="stepper-nav">
                        <!--begin::Steps-->
                        @for ($count=1; $count <= $questions_count; ++$count)
                        <div class="stepper-item {{$count==1 ? 'current':''}}" data-kt-stepper-element="nav">
                            <!--begin::Wrapper-->
                            <div class="stepper-wrapper">
                                <!--begin::Icon-->
                                <div class="stepper-icon w-40px h-40px">
                                    <i class="stepper-check fas fa-check"></i>
                                    <span class="stepper-number">{{$count}}</span>
                                </div>
                                <!--end::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <h3 class="stepper-title">Question {{$count}}</h3>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Wrapper-->
                            <!--begin::Line-->
                            <div class="stepper-line h-40px"></div>
                            <!--end::Line-->
                        </div>
                        @endfor
                        <!--end::Steps-->
                    </div>
                    <!--end::Nav-->
                </div>
                <!--end::Wrapper-->
            </div>
            <!--begin::Aside-->
            <!--begin::Content-->
            <div class="card d-flex flex-row-fluid flex-center">
                <!--begin::Form-->
                <form class="card-body py-20 w-100 w-xl-700px px-9" novalidate="novalidate" id="kt_create_account_form">

                    <!--begin::Steps-->
                    @foreach ($quiz->quizQuestions->shuffle() as $key=>$quizQuestion)
                    <div class="{{$loop->first ? 'current':''}}" data-kt-stepper-element="content">
                        @if ($quizQuestion->question->questiontype == 'essay')
                            <!--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">Answer the following 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="ms-6" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="{{$quizQuestion->question->essayQuestion->hint}}">
                                            <i class="far fa-lightbulb text-warning fs-1"></i>
                                        </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->essayQuestion->multimedia->type == 'mp4' || $quizQuestion->question->essayQuestion->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 --}}

                                <div class="fv-row mb-10 mt-5">
                                    <!--begin::Label-->
                                    <p class="fw-semibold fs-6 mb-2 text-center" for="desc">Answer</p>
                                    <!--end::Label-->

                                    <!--begin::Input-->
                                    <textarea  name="essay"  class="tox-target kt_docs_tinymce_hidden">
                                        {{ old('essay')}}
                                    </textarea>
                                    <!--end::Input-->

                                </div>

                                <div class="fv-row mb-10">
                                    <!--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-->
                            @elseif ($quizQuestion->question->questiontype == 'complete')
                                <!--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">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="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->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->completeQuestion->multimedia->type == 'mp4' || $quizQuestion->question->completeQuestion->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 --}}

                                    <div class="fv-row mb-10">
                                        <!--begin::Label-->
                                        <p class="fw-semibold fs-6 mb-2 text-center" for="desc">Answer</p>
                                        <!--end::Label-->

                                        <!--begin::Input-->
                                        <textarea  name="complete"  class="tox-target kt_docs_tinymce_hidden">
                                            {{ old('complete')}}
                                        </textarea>
                                        <!--end::Input-->

                                    </div>
                                    <div class="fv-row mb-10">
                                        <!--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-->
                            @elseif ($quizQuestion->question->questiontype == 'mcq')
                                <!--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="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->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">
                                        <!--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-->
                            @elseif ($quizQuestion->question->questiontype == 'match')
                                <!--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">

                                        <!--begin::Left-->
                                        <!--begin::Col-->
                                        <div class="col-md-6 col-xl-6">
                                            <!--begin::Card-->
                                            <div class="card border-hover-primary shadow">
                                                <!--begin::Card header-->
                                                <div class="card-header border-0 pt-9">
                                                    <!--begin::Card Title-->
                                                    <div class="card-title m-0">
                                                        <!--begin::Avatar-->
                                                        <div class="badge badge-primary">
                                                            Left Side
                                                        </div>
                                                        <!--end::Avatar-->
                                                    </div>
                                                    <!--end::Car Title-->
                                                </div>
                                                <!--end:: Card header-->
                                                <!--begin:: Card body-->
                                                <div class="card-body p-9">
                                                    <!--begin::Info-->
                                                    <div class="mb-5">

                                                        @foreach ($quizQuestion->question->matchQuestion->leftSideMatch->shuffle() as $left_item)
                                                            <!--begin::Due-->

                                                            <div class="border border-gray-300 border-dashed rounded py-3 px-4 me-7 mb-3">
                                                                <div class="fs-6 text-gray-800 fw-bold">
                                                                    <div><span class="svg-icon svg-icon-1 svg-icon-primary">
                                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                                                                            <path d="M10.0813 3.7242C10.8849 2.16438 13.1151 2.16438 13.9187 3.7242V3.7242C14.4016 4.66147 15.4909 5.1127 16.4951 4.79139V4.79139C18.1663 4.25668 19.7433 5.83365 19.2086 7.50485V7.50485C18.8873 8.50905 19.3385 9.59842 20.2758 10.0813V10.0813C21.8356 10.8849 21.8356 13.1151 20.2758 13.9187V13.9187C19.3385 14.4016 18.8873 15.491 19.2086 16.4951V16.4951C19.7433 18.1663 18.1663 19.7433 16.4951 19.2086V19.2086C15.491 18.8873 14.4016 19.3385 13.9187 20.2758V20.2758C13.1151 21.8356 10.8849 21.8356 10.0813 20.2758V20.2758C9.59842 19.3385 8.50905 18.8873 7.50485 19.2086V19.2086C5.83365 19.7433 4.25668 18.1663 4.79139 16.4951V16.4951C5.1127 15.491 4.66147 14.4016 3.7242 13.9187V13.9187C2.16438 13.1151 2.16438 10.8849 3.7242 10.0813V10.0813C4.66147 9.59842 5.1127 8.50905 4.79139 7.50485V7.50485C4.25668 5.83365 5.83365 4.25668 7.50485 4.79139V4.79139C8.50905 5.1127 9.59842 4.66147 10.0813 3.7242V3.7242Z" fill="currentColor"></path>
                                                                            <path d="M14.8563 9.1903C15.0606 8.94984 15.3771 8.9385 15.6175 9.14289C15.858 9.34728 15.8229 9.66433 15.6185 9.9048L11.863 14.6558C11.6554 14.9001 11.2876 14.9258 11.048 14.7128L8.47656 12.4271C8.24068 12.2174 8.21944 11.8563 8.42911 11.6204C8.63877 11.3845 8.99996 11.3633 9.23583 11.5729L11.3706 13.4705L14.8563 9.1903Z" fill="white"></path>
                                                                        </svg>
                                                                    </span>
                                                                    {{$left_item->description}}
                                                                </div>
                                                                    {{-- @if ($left_item->multimedia_id)
                                                                       <div> <img src="{{$left_item->multimedia->url}}" alt="{{$left_item->description}}"></div>
                                                                    @endif --}}
                                                                </div>
                                                            </div>
                                                            <!--end::Due-->
                                                        @endforeach
                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end:: Card body-->
                                            </div>
                                            <!--end::Card-->
                                        </div>
                                        <!--end::Col-->
                                        <!--end::Left-->

                                        <!--begin::Right-->
                                        <!--begin::Col-->
                                        <div class="col-md-6 col-xl-6">
                                            <!--begin::Card-->
                                            <div class="card border-hover-primary shadow">
                                                <!--begin::Card header-->
                                                <div class="card-header border-0 pt-9">
                                                    <!--begin::Card Title-->
                                                    <div class="card-title m-0">
                                                        <!--begin::Avatar-->
                                                        <div class="badge badge-primary">
                                                            Right Side
                                                        </div>
                                                        <!--end::Avatar-->
                                                    </div>
                                                    <!--end::Car Title-->
                                                </div>
                                                <!--end:: Card header-->
                                                <!--begin:: Card body-->
                                                <div class="card-body p-9">
                                                    <!--begin::Info-->
                                                    <div class="mb-5">
                                                        <!--begin::Due-->
                                                        @foreach ($quizQuestion->question->matchQuestion->rightSideMatch->shuffle() as $right_item)
                                                            <!--begin::Due-->
                                                            <div class="border border-gray-300 border-dashed rounded py-3 px-4 me-7 mb-3">
                                                                <div class="fs-6 text-gray-800 fw-bold">
                                                                    <div>
                                                                        <span class="svg-icon svg-icon-1 svg-icon-primary">
                                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                                                                                <path d="M10.0813 3.7242C10.8849 2.16438 13.1151 2.16438 13.9187 3.7242V3.7242C14.4016 4.66147 15.4909 5.1127 16.4951 4.79139V4.79139C18.1663 4.25668 19.7433 5.83365 19.2086 7.50485V7.50485C18.8873 8.50905 19.3385 9.59842 20.2758 10.0813V10.0813C21.8356 10.8849 21.8356 13.1151 20.2758 13.9187V13.9187C19.3385 14.4016 18.8873 15.491 19.2086 16.4951V16.4951C19.7433 18.1663 18.1663 19.7433 16.4951 19.2086V19.2086C15.491 18.8873 14.4016 19.3385 13.9187 20.2758V20.2758C13.1151 21.8356 10.8849 21.8356 10.0813 20.2758V20.2758C9.59842 19.3385 8.50905 18.8873 7.50485 19.2086V19.2086C5.83365 19.7433 4.25668 18.1663 4.79139 16.4951V16.4951C5.1127 15.491 4.66147 14.4016 3.7242 13.9187V13.9187C2.16438 13.1151 2.16438 10.8849 3.7242 10.0813V10.0813C4.66147 9.59842 5.1127 8.50905 4.79139 7.50485V7.50485C4.25668 5.83365 5.83365 4.25668 7.50485 4.79139V4.79139C8.50905 5.1127 9.59842 4.66147 10.0813 3.7242V3.7242Z" fill="currentColor"></path>
                                                                                <path d="M14.8563 9.1903C15.0606 8.94984 15.3771 8.9385 15.6175 9.14289C15.858 9.34728 15.8229 9.66433 15.6185 9.9048L11.863 14.6558C11.6554 14.9001 11.2876 14.9258 11.048 14.7128L8.47656 12.4271C8.24068 12.2174 8.21944 11.8563 8.42911 11.6204C8.63877 11.3845 8.99996 11.3633 9.23583 11.5729L11.3706 13.4705L14.8563 9.1903Z" fill="white"></path>
                                                                            </svg>
                                                                        </span>
                                                                        {{$right_item->description}}
                                                                    </div>
                                                                    {{-- @if ($right_item->multimedia_id)
                                                                        <div><img src="{{$right_item->multimedia->url}}" alt="{{$right_item->description}}"></div>
                                                                    @endif --}}
                                                                </div>
                                                            </div>
                                                            <!--end::Due-->
                                                        @endforeach
                                                        <!--end::Due-->
                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end:: Card body-->
                                            </div>
                                            <!--end::Card-->
                                        </div>
                                        <!--end::Col-->
                                    </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-->
                            @elseif ($quizQuestion->question->questiontype == 'audio')
                                <!--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">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">
                                    </div>
                                </div>
                                <!--end::Wrapper-->
                            @elseif ($quizQuestion->question->questiontype == 'file')
                                <!--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-->
                        @endif
                    </div>
                    @endforeach
                    <!--end::Steps-->

                    <!--begin::Actions-->
                    <div class="d-flex flex-stack pt-10">
                        <!--begin::Wrapper-->
                        <div class="mr-2">
                            <button type="button" class="btn btn-lg btn-light-primary me-3" data-kt-stepper-action="previous">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr063.svg-->
                            <span class="svg-icon svg-icon-4 me-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="11" width="13" height="2" rx="1" fill="currentColor" />
                                    <path d="M8.56569 11.4343L12.75 7.25C13.1642 6.83579 13.1642 6.16421 12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75L5.70711 11.2929C5.31658 11.6834 5.31658 12.3166 5.70711 12.7071L11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25C13.1642 17.8358 13.1642 17.1642 12.75 16.75L8.56569 12.5657C8.25327 12.2533 8.25327 11.7467 8.56569 11.4343Z" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->Back</button>
                        </div>
                        <!--end::Wrapper-->
                        <!--begin::Wrapper-->
                        <div>
                            <button type="submit" class="btn btn-lg btn-primary me-3" data-kt-stepper-action="submit">
                                <span class="indicator-label">Submit
                                <!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
                                <span class="svg-icon svg-icon-3 ms-2 me-0">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="currentColor" />
                                        <path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="currentColor" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon--></span>
                                <span class="indicator-progress">Please wait...
                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            </button>
                            <button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="next">Next
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
                            <span class="svg-icon svg-icon-4 ms-1 me-0">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="currentColor" />
                                    <path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon--></button>
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Actions-->
                    @csrf
                </form>
                <!--end::Form-->
            </div>
            <!--end::Content-->
        </div>
        <!--end::Stepper-->
    </div>
@endsection
@section('js')
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
{{-- 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