@php use Carbon\Carbon; @endphp
@extends('panel.layouts.master')
@section('content')
    @php
        $isActive = is_null($quizUser->end_at);
    @endphp
    <div class="content transition-[margin,width] duration-100 rtl:xl:pr-3.5 ltr:xl:pl-3.5 pt-[54px] pb-16 relative z-10 group mode content--compact rtl:xl:mr-[275px] ltr:xl:ml-[275px] mode--light rtl:[&.content--compact]:xl:mr-[91px] ltr:[&.content--compact]:xl:ml-[91px]">
        <div class="px-5 mt-16">
            <div class="container">
                <div class="grid grid-cols-12 gap-x-6 gap-y-10">
                    <div class="col-span-12">
                        <div class="flex flex-col mt-4 gap-y-3 md:mt-0 md:h-10 md:flex-row md:items-center">
                            <div class="text-base font-medium group-[.mode--light]:text-white quiz"
                                 data-time="{{ $quiz->time }}" data-start="{{ $quizUser->start_at }}"
                                 data-end="{{ $quizUser->must_end_at }}"
                                 data-isended="{{ $quizUser->end_at ? true : false }}">
                                {{ $quiz->box->resource }} {{ $quiz->box->subject }}
                            </div>
                        </div>

                        <div class="mt-3.5 grid grid-cols-12 gap-x-6 gap-y-7 lg:gap-y-10 xl:grid-cols-10">
                            <div class="relative flex flex-col col-span-12 gap-y-7 lg:col-span-9 xl:col-span-8">
                                @if(!$isActive)
                                    <div>
                                        <div class="box box--stacked mt-3.5 p-5">
                                            <div class="mt-5 rounded-md border border-dashed border-slate-300/70 py-5">
                                                <div class="flex flex-col md:flex-row">
                                                    @foreach($analyses as $item)
                                                        <div class="flex flex-1 items-center justify-center border-dashed border-slate-300/70 py-3 last:border-0 md:border-r">
                                                            <div class="group flex items-center justify-center w-10 h-10 border rounded-full rtl:ml-5 ltr:mr-5 [&.primary]:border-primary/10 [&.primary]:bg-primary/10 [&.success]:border-success/10 [&.success]:bg-success/10 primary">
                                                                <i data-tw-merge="" data-lucide="kanban-square"
                                                                   class="stroke-[1] w-5 h-5 group-[.primary]:text-primary group-[.primary]:fill-primary/10 group-[.success]:text-success group-[.success]:fill-success/10"></i>
                                                            </div>
                                                            <div class="flex-start flex flex-col">
                                                                <div class="text-slate-500">{{ $item->lesson }}</div>
                                                                <div class="mt-1.5 flex items-center">
                                                                    <div class="text-base font-medium">تعداد درست
                                                                        : {{ $item->correct_count }}</div>
                                                                    <div style="font-size: 20px; direction: ltr;" class="rtl:-ml-1 ltr:-mr-1 rtl:mr-2 ltr:ml-2 flex items-center text-xs text-{{ $item->percent < 50 ? 'danger' : 'success' }}">
                                                                        {{ $item->percent }}%
                                                                        درصد
                                                                    </div>
                                                                </div>
                                                                <div class="mt-1.5 flex items-center">
                                                                    <div class="text-base font-medium">تعداد غلط
                                                                        : {{ $item->incorrect_count }}</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                @if($isActive)
                                    <form action="{{ $isActive ? route('quiz.store', $quizUser->id) : '' }}"
                                          id="quiz-form"
                                          method="POST">
                                        @endif
                                        @csrf
                                        <div class="flex flex-col p-5 box box--stacked">
                                            <div class="rounded-[0.6rem] border border-slate-200/60 p-5 dark:border-darkmode-400">
                                                <div class="flex items-center border-b border-slate-200/60 pb-5 text-[0.94rem] font-medium dark:border-darkmode-400">
                                                    <i data-tw-merge="" data-lucide="chevron-down"
                                                       class="w-5 h-5 rtl:ml-2 ltr:mr-2 stroke-[1.3]"></i>
                                                    پاسخنامه
                                                </div>
                                                <div class="mt-5">
                                                    @if($isActive)
                                                        <div role="alert"
                                                             class="alert relative border rounded-md px-5 py-4 border-warning text-warning dark:border-warning flex items-center px-4 mb-2 border-warning/30 bg-warning/5">
                                                            <div>
                                                                <i data-tw-merge="" data-lucide="lightbulb"
                                                                   class="rtl:ml-3 ltr:mr-3 2xl:mr-2 h-4 w-4 stroke-[1.3]"></i>
                                                            </div>
                                                            <div class="rtl:ml-5 ltr:mr-5 leading-relaxed">
                                                                داوطلب گرامی ، پیش از پایان یافتن زمان آزمون، پاسخ های
                                                                خود
                                                                را وارد پاسخنامه کنید.
                                                                آزمون دارای نمره منفی است و پس از پایان زمان، صفحه آزمون
                                                                بسته می شود.
                                                            </div>
                                                        </div>
                                                        <div role="alert"
                                                             class="alert relative border rounded-md px-5 py-4 border-danger text-danger dark:border-danger flex items-center px-4 mb-2 border-danger/30 bg-danger/5">
                                                            <div>
                                                                <i data-tw-merge="" data-lucide="lightbulb"
                                                                   class="rtl:ml-3 ltr:mr-3 2xl:mr-2 h-4 w-4 stroke-[1.3]"></i>
                                                            </div>
                                                            <div class="rtl:ml-5 ltr:mr-5 leading-relaxed">
                                                                داوطلب گرامی، برای انتخاب یا حذف گزینه مورد نظر خود روی
                                                                کلمه گزینه مورد نظر، ضربه بزنید و در پایان حتما روی دکمه
                                                                پایان آزمون کلیک کنید.
                                                            </div>
                                                        </div>
                                                    @else
                                                        <div role="alert"
                                                             class="alert relative border rounded-md px-5 py-4 bg-success border-success bg-opacity-20 border-opacity-5 text-success dark:border-success dark:border-opacity-20 flex items-center">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                 height="24"
                                                                 viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                                 stroke-width="2" stroke-linecap="round"
                                                                 stroke-linejoin="round"
                                                                 class="lucide lucide-circle-check-big rtl:ml-3 ltr:mr-3 2xl:mr-2">
                                                                <path d="M21.801 10A10 10 0 1 1 17 3.335"/>
                                                                <path d="m9 11 3 3L22 4"/>
                                                            </svg>
                                                            <span class="ms-3">آزمون شما با موفقیت به اتمام رسیده و شما میتوانید نتیجه آزمون را مشاهده کنید :</span>
                                                        </div>
                                                    @endif

                                                    @foreach($quiz->questions as $question)
                                                        @php
                                                            $quizQuestionUser = App\Models\QuizQuestionUser::where(['quiz_question_id' => $question->id, 'quiz_user_id' => $quizUser->id, 'user_id' => auth()->id()])->first();
                                                        @endphp
                                                        <div class="flex-col block pt-5 mt-5 first:mt-0 first:pt-0 sm:flex xl:flex-row xl:items-center">
                                                            <div class="inline-block mb-2 sm:mb-0 rtl:sm:ml-5 ltr:sm:mr-5 rtl:sm:text-left ltr:sm:text-right rtl:xl:ml-14 ltr:xl:mr-14 xl:w-60">
                                                                <div class="rtl:text-right ltr:text-left">
                                                                    <div class="flex items-center">
                                                                        <div class="font-medium">
                                                                            سوال {{ $question->number }}</div>
                                                                        <div class="rtl:mr-2.5 ltr:ml-2.5 rounded-md border border-slate-200 bg-slate-100 px-2 py-0.5 text-xs text-slate-500 dark:bg-darkmode-300 dark:text-slate-400">
                                                                            {{ $question->lesson }}
                                                                        </div>
                                                                    </div>
                                                                    <div class="mt-1.5 text-xs leading-relaxed text-slate-500/80 xl:mt-3">
                                                                        {{ $question->subject }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="flex-1 w-full mt-3 xl:mt-0">
                                                                <div class="flex gap-10 flex-col sm:flex-row">
                                                                    <div class="flex items-center rtl:ml-4 ltr:mr-4">
                                                                        <input
                                                                                type="radio"
                                                                                {{ !$isActive ? 'disabled' : '' }}
                                                                                class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&amp;[type='radio']]:checked:bg-primary [&amp;[type='radio']]:checked:border-primary [&amp;[type='radio']]:checked:border-opacity-10 [&amp;[type='checkbox']]:checked:bg-primary [&amp;[type='checkbox']]:checked:border-primary [&amp;[type='checkbox']]:checked:border-opacity-10 [&amp;:disabled:not(:checked)]:bg-slate-100 [&amp;:disabled:not(:checked)]:cursor-not-allowed [&amp;:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&amp;:disabled:checked]:opacity-70 [&amp;:disabled:checked]:cursor-not-allowed [&amp;:disabled:checked]:dark:bg-darkmode-800/50"
                                                                                id="answer-{{ $question->id }}-1"
                                                                                name="answers[{{ $question->id }}]"
                                                                                {{ $quizQuestionUser && $quizQuestionUser->answer == '1' ? 'checked' : '' }}
                                                                                value="1">
                                                                        <label for="answer-{{ $question->id }}-1"
                                                                               {{ !$isActive ? 'disabled' : '' }}
                                                                               class="{{ !$isActive ? $quizQuestionUser && $quizQuestionUser->answer == '1' ? $quizQuestionUser->correct ? 'text-success' : 'text-danger' : '' : '' }} {{ $quizQuestionUser && $quizQuestionUser->quizQuestion->correct == '1' ? 'text-success' : '' }} ursor-pointer rtl:mr-2 ltr:ml-2">گزینه
                                                                            1</label>
                                                                    </div>
                                                                    <div class="flex items-center mt-2 rtl:ml-4 ltr:mr-4 sm:mt-0">
                                                                        <input type="radio"
                                                                               {{ !$isActive ? 'disabled' : '' }}
                                                                               class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&amp;[type='radio']]:checked:bg-primary [&amp;[type='radio']]:checked:border-primary [&amp;[type='radio']]:checked:border-opacity-10 [&amp;[type='checkbox']]:checked:bg-primary [&amp;[type='checkbox']]:checked:border-primary [&amp;[type='checkbox']]:checked:border-opacity-10 [&amp;:disabled:not(:checked)]:bg-slate-100 [&amp;:disabled:not(:checked)]:cursor-not-allowed [&amp;:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&amp;:disabled:checked]:opacity-70 [&amp;:disabled:checked]:cursor-not-allowed [&amp;:disabled:checked]:dark:bg-darkmode-800/50"
                                                                               id="answer-{{ $question->id }}-2"
                                                                               name="answers[{{ $question->id }}]"
                                                                               {{ $quizQuestionUser && $quizQuestionUser->answer == '2' ? 'checked' : '' }}
                                                                               value="2">
                                                                        <label for="answer-{{ $question->id }}-2"
                                                                               {{ !$isActive ? 'disabled' : '' }}
                                                                               class="{{ !$isActive ? $quizQuestionUser && $quizQuestionUser->answer == '2' ? $quizQuestionUser->correct ? 'text-success' : 'text-danger' : '' : '' }} {{ $quizQuestionUser && $quizQuestionUser->quizQuestion->correct == '2' ? 'text-success' : '' }} cursor-pointer rtl:mr-2 ltr:ml-2">گزینه
                                                                            2</label>
                                                                    </div>
                                                                    <div class="flex items-center mt-2 rtl:ml-4 ltr:mr-4 sm:mt-0">
                                                                        <input type="radio"
                                                                               {{ !$isActive ? 'disabled' : '' }}
                                                                               class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&amp;[type='radio']]:checked:bg-primary [&amp;[type='radio']]:checked:border-primary [&amp;[type='radio']]:checked:border-opacity-10 [&amp;[type='checkbox']]:checked:bg-primary [&amp;[type='checkbox']]:checked:border-primary [&amp;[type='checkbox']]:checked:border-opacity-10 [&amp;:disabled:not(:checked)]:bg-slate-100 [&amp;:disabled:not(:checked)]:cursor-not-allowed [&amp;:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&amp;:disabled:checked]:opacity-70 [&amp;:disabled:checked]:cursor-not-allowed [&amp;:disabled:checked]:dark:bg-darkmode-800/50"
                                                                               id="answer-{{ $question->id }}-3"
                                                                               name="answers[{{ $question->id }}]"
                                                                               {{ $quizQuestionUser && $quizQuestionUser->answer == '3' ? 'checked' : '' }}
                                                                               value="3">
                                                                        <label for="answer-{{ $question->id }}-3"
                                                                               {{ !$isActive ? 'disabled' : '' }}
                                                                               class="{{ !$isActive ? $quizQuestionUser && $quizQuestionUser->answer == '3' ? $quizQuestionUser->correct ? 'text-success' : 'text-danger' : '' : '' }} {{ $quizQuestionUser && $quizQuestionUser->quizQuestion->correct == '3' ? 'text-success' : '' }} cursor-pointer rtl:mr-2 ltr:ml-2">گزینه
                                                                            3</label>
                                                                    </div>
                                                                    <div class="flex items-center mt-2 rtl:ml-4 ltr:mr-4 sm:mt-0">
                                                                        <input type="radio"
                                                                               {{ !$isActive ? 'disabled' : '' }}
                                                                               class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&amp;[type='radio']]:checked:bg-primary [&amp;[type='radio']]:checked:border-primary [&amp;[type='radio']]:checked:border-opacity-10 [&amp;[type='checkbox']]:checked:bg-primary [&amp;[type='checkbox']]:checked:border-primary [&amp;[type='checkbox']]:checked:border-opacity-10 [&amp;:disabled:not(:checked)]:bg-slate-100 [&amp;:disabled:not(:checked)]:cursor-not-allowed [&amp;:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&amp;:disabled:checked]:opacity-70 [&amp;:disabled:checked]:cursor-not-allowed [&amp;:disabled:checked]:dark:bg-darkmode-800/50"
                                                                               id="answer-{{ $question->id }}-4"
                                                                               name="answers[{{ $question->id }}]"
                                                                               {{ $quizQuestionUser && $quizQuestionUser->answer == '4' ? 'checked' : '' }}
                                                                               value="4">
                                                                        <label for="answer-{{ $question->id }}-4"
                                                                               {{ !$isActive ? 'disabled' : '' }}
                                                                               class="{{ !$isActive ? $quizQuestionUser && $quizQuestionUser->answer == '4' ? $quizQuestionUser->correct ? 'text-success' : 'text-danger' : '' : '' }} {{ $quizQuestionUser && $quizQuestionUser->quizQuestion->correct == '4' ? 'text-success' : '' }} cursor-pointer rtl:mr-2 ltr:ml-2">گزینه
                                                                            4</label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        @if(!$loop->last)
                                                            <hr class="my-3">
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex flex-col justify-start gap-3 mt-5 md:flex-row">
                                            @if($isActive)
                                                <button data-tw-merge="" type="submit"
                                                        class="transition duration-200 border shadow-sm inline-flex items-center justify-center px-3 font-medium cursor-pointer focus:ring-4 focus:ring-success focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-success border-success text-white dark:border-success w-full rounded-[0.5rem] py-2.5 md:w-56">
                                                    <i data-tw-merge="" data-lucide="clipboard-check"
                                                       class="rtl:ml-2 ltr:mr-2 h-4 w-4 stroke-[1.3]"></i>
                                                    پایان آزمون
                                                </button>
                                            @endif
                                        </div>
                                        @if($isActive)
                                    </form>
                                @endif
                            </div>
                            <div class="relative order-first col-span-12 lg:order-last lg:col-span-3 xl:col-span-2">
                                <div class="sticky top-[104px]">
                                    <div class="relative mb-7 rounded-[0.6rem] border border-primary bg-primary p-5 dark:border-0 dark:bg-darkmode-600 text-white">
                                        <i data-tw-merge="" data-lucide="lightbulb"
                                           class="stroke-[1] absolute top-0 rtl:left-0 ltr:right-0 w-12 h-12 mt-5 rtl:ml-3 ltr:mr-3 text-warning/80"></i>
                                        <h2 class="text-lg font-medium">{{ $quizUser->user->full_name }}</h2>
                                        <div class="mt-4 font-medium">
                                            <span>زمان آزمون : {{ $quiz->box->time }} دقیقه</span>
                                        </div>
                                        <div class="mt-2 font-medium">
                                            <span>تعداد سوالات : {{ $quiz->box->test_count }} سوال</span>
                                        </div>
                                        <div class="mt-4 font-medium">
                                            <a href="{{ url($quiz->question_file) }}"
                                               class="w-full transition duration-200 border inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&amp;:hover:not(:disabled)]:bg-opacity-90 [&amp;:hover:not(:disabled)]:border-opacity-90 [&amp;:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-success border-success text-white dark:border-success shadow-md w-24">
                                                دانلود سوالات
                                            </a>
                                            @if(!$isActive)
                                                <a href="{{ url($quiz->answer_file) }}"
                                                   class="w-full mt-3 transition duration-200 border inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&amp;:hover:not(:disabled)]:bg-opacity-90 [&amp;:hover:not(:disabled)]:border-opacity-90 [&amp;:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-success border-success text-white dark:border-success shadow-md w-24">
                                                    دانلود پاسخنامه
                                                </a>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="relative flex flex-col rounded-[0.6rem] border py-2.5 text-slate-600/80 group-[.mode--light]:border-slate-300/20 group-[.mode--light]:bg-slate-300/10"
                                         style="background-image: url('https://plan.miladnasehzadeh.com/dist/images/timer.png'); background-size: contain; background-repeat: no-repeat; background-position: center center;">
                                        <div class="my-3 flex flex-col items-center">
                                            <div>
                                                <div class="flex items-center justify-center rounded-full p-1.5">
                                                    <div class="flex items-center justify-center rounded-full p-1.5">
                                                        <div class="flex items-center justify-center rounded-full p-1.5">
                                                            <div class="clock flex items-center justify-center text-dark h-24 w-24 rounded-full">
                                                                <strong class="text-lg {{ $isActive ? 'count' : '' }}">00:00</strong>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="relative mt-7 flex flex-col rounded-[0.6rem] border border-primary/10 bg-primary/[0.03] py-2.5 text-slate-600/80 group-[.mode--light]:border-slate-300/20 group-[.mode--light]:bg-slate-300/10">
                                        <iframe src="{{ url($quiz->question_file) }}"
                                                height="375"></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('dist/js/timer.js') }}"></script>
    <script>
        $("label, input[type='radio']").click(function (e) {
            e.preventDefault();
            $check = $(this).prev();
            if ($check.prop('checked'))
                $check.prop("checked", false);
            else
                $check.prop("checked", true);
        });
    </script>
@endsection