@extends('panel.layouts.master')
@section('content')
    <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="box box--stacked flex flex-col p-1.5">
                            <div
                                    class="relative h-48 w-full rounded-[0.6rem] bg-gradient-to-b from-theme-1/95 to-theme-2/95">
                                <div
                                        class="w-full h-full relative overflow-hidden before:content-[''] before:absolute before:inset-0 before:bg-texture-white before:-mt-[50rem] after:content-[''] after:absolute after:inset-0 after:bg-texture-white after:-mt-[50rem]"></div>
                                <div class="absolute inset-x-0 top-0 mx-auto mt-24 h-32 w-32">
                                    <div
                                            class="box image-fit h-full w-full overflow-hidden rounded border-[6px] border-white">
                                        <img src="{{ asset('dist/images/pack-icons/quiz-time.png') }}" alt="کوییز تایم"
                                             style="object-fit: contain">
                                    </div>
                                </div>
                            </div>
                            <div class="rounded-[0.6rem] bg-slate-50 pb-6 pt-12">
                                <div class="flex items-center justify-center text-xl font-medium">
                                    کوییز تایم
                                    <i data-tw-merge="" data-lucide="badge-check"
                                       class="stroke-[1] w-5 h-5 rtl:mr-2 ltr:ml-2 fill-blue-500/30 text-blue-500"></i>
                                </div>
                                {{--                                <div--}}
                                {{--                                    class="mt-2.5 flex flex-col items-center justify-center gap-x-5 gap-y-2 sm:flex-row">--}}
                                {{--                                    <div class="flex items-center text-slate-500">--}}
                                {{--                                        <i data-tw-merge="" data-lucide="calendar"--}}
                                {{--                                           class="rtl:ml-1.5 ltr:mr-1.5 h-3.5 w-3.5 stroke-[1.3]"></i>--}}
                                {{--                                        هفته {{ $plan->week }}--}}
                                {{--                                    </div>--}}
                                {{--                                    <div class="flex items-center text-slate-500">--}}
                                {{--                                        <i data-tw-merge="" data-lucide="book-check"--}}
                                {{--                                           class="rtl:ml-1.5 ltr:mr-1.5 h-3.5 w-3.5 stroke-[1.3]"></i>--}}
                                {{--                                        {{ $plan->type }}--}}
                                {{--                                    </div>--}}
                                {{--                                    <div class="flex items-center text-slate-500">--}}
                                {{--                                        <i data-tw-merge="" data-lucide="book-open-check"--}}
                                {{--                                           class="rtl:ml-1.5 ltr:mr-1.5 h-3.5 w-3.5 stroke-[1.3]"></i>--}}
                                {{--                                        {{ $plan->test_type }}--}}
                                {{--                                    </div>--}}
                                {{--                                    <div class="flex items-center text-slate-500">--}}
                                {{--                                        <i data-tw-merge="" data-lucide="graduation-cap"--}}
                                {{--                                           class="rtl:ml-1.5 ltr:mr-1.5 h-3.5 w-3.5 stroke-[1.3]"></i>--}}
                                {{--                                        ترم {{ $plan->term }}--}}
                                {{--                                    </div>--}}
                                {{--                                    <div class="flex items-center text-slate-500">--}}
                                {{--                                        <i data-tw-merge="" data-lucide="book-up"--}}
                                {{--                                           class="rtl:ml-1.5 ltr:mr-1.5 h-3.5 w-3.5 stroke-[1.3]"></i>--}}
                                {{--                                        سطح {{ $plan->level }}--}}
                                {{--                                    </div>--}}
                                {{--                                </div>--}}
                            </div>
                        </div>
                        <div class="mt-10">
                            <div class="flex flex-col gap-y-3 2xl:flex-row 2xl:items-center">
                                <ul data-tw-merge="" role="tablist"
                                    class="p-0.5 border dark:border-darkmode-400 w-full flex box rtl:ml-auto ltr:mr-auto flex-col rounded-[0.6rem] border-slate-200 bg-white sm:flex-row 2xl:w-auto">
                                    @foreach($data as $item)
                                        <li id="day-{{ $item->id }}-tab" data-tw-merge="" role="presentation"
                                            class="focus-visible:outline-none flex-1 bg-slate-50 rtl:first:rounded-r-[0.6rem] ltr:first:rounded-l-[0.6rem] rtl:last:rounded-l-[0.6rem] ltr:last:rounded-r-[0.6rem] [&[aria-selected='true']_button]:text-current">
                                            <button data-tw-merge="" data-tw-target="#example-{{ $item->id }}"
                                                    role="tab"
                                                    class="{{ $loop->first ? 'active' : '' }} cursor-pointer appearance-none px-3 border border-transparent transition-colors dark:text-slate-400 [&.active]:text-slate-700 dark:border-transparent [&.active]:border [&.active]:shadow-sm [&.active]:font-medium [&.active]:border-slate-200 [&.active]:bg-white [&.active]:dark:text-slate-300 [&.active]:dark:bg-darkmode-400 [&.active]:dark:border-darkmode-400 flex w-full items-center justify-center whitespace-nowrap rounded-[0.6rem] py-2.5 text-[0.94rem] text-slate-500 xl:w-40">
                                                هفته {{ $item->week }}
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                            <div class="tab-content">
                                @foreach($data as $key => $plan)
                                    <div data-transition="" data-selector=".active"
                                         data-enter="transition-[visibility,opacity] ease-linear duration-150"
                                         data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0"
                                         data-enter-to="visible opacity-100"
                                         data-leave="transition-[visibility,opacity] ease-linear duration-150"
                                         data-leave-from="visible opacity-100"
                                         data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0"
                                         id="example-{{ $plan->id }}"
                                         role="tabpanel" aria-labelledby="day-{{ $plan->id }}-tab"
                                         class="tab-pane w-full {{ $loop->first ? 'active' : '' }}">
                                        <div class="mt-3.5 grid grid-cols-12 gap-x-6 gap-y-10">
                                            @foreach($plan->dates as $date)
                                                @foreach($date->boxes()->where('box_type_id', \App\Models\BoxType::findType('quiz_time'))->whereNotNull('file_code')->get() as $key => $item)
                                                    @php
                                                        $color = $item->boxType->color;
                                                        $boxKey = $item->boxType->name;
                                                    @endphp
                                                    <div
                                                            class="box box--stacked col-span-12 flex flex-col md:col-span-6 xl:col-span-4">
                                                        <div class="rtl:mr-5 ltr:ml-5 mt-5 flex">
                                                        <span
                                                                class="rtl:ml-auto ltr:mr-auto flex items-center rounded-md border border-{{ $color }}/10 bg-{{ $color }}/10 px-2 py-0.5 text-xs font-medium text-{{ $color }}">
                                                            <span class="-mt-px">{{ $item->boxType->title }}</span>
                                                        </span>
                                                        </div>
                                                        @can('admin')
                                                            <div data-tw-merge="" data-tw-placement="bottom-start"
                                                                 class="dropdown absolute rtl:left-0 ltr:right-0 top-0 rtl:ml-5 ltr:mr-5 mt-5">
                                                                <button data-tw-toggle="dropdown" aria-expanded="false"
                                                                        class="cursor-pointer h-5 w-5 text-slate-500"><i
                                                                            data-tw-merge="" data-lucide="more-vertical"
                                                                            class="stroke-[1] w-5 h-5 fill-slate-400/70 stroke-slate-400/70"></i>
                                                                </button>
                                                                <div data-transition="" data-selector=".show"
                                                                     data-enter="transition-all ease-linear duration-150"
                                                                     data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
                                                                     data-enter-to="!mt-1 visible opacity-100 translate-y-0"
                                                                     data-leave="transition-all ease-linear duration-150"
                                                                     data-leave-from="!mt-1 visible opacity-100 translate-y-0"
                                                                     data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
                                                                     class="dropdown-menu absolute z-[9999] hidden">
                                                                    <div data-tw-merge=""
                                                                         class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40">
                                                                        <a class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"><i
                                                                                    data-tw-merge="" data-lucide="copy"
                                                                                    class="stroke-[1] rtl:ml-2 ltr:mr-2 h-4 w-4"></i>
                                                                            کپی
                                                                            پیوند</a>
                                                                        <a class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"><i
                                                                                    data-tw-merge="" data-lucide="trash"
                                                                                    class="stroke-[1] rtl:ml-2 ltr:mr-2 h-4 w-4"></i>
                                                                            حذف</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endcan
                                                        <div class="mt-5 flex flex-col items-center px-5 pb-10">
                                                            <div class="relative h-[72px] w-[72px]">
                                                                <div
                                                                        class="flex h-full w-full items-center justify-center overflow-hidden rounded-full border border-slate-200/70 bg-{{ $color }}/10">
                                                                    <img src="{{ asset('dist/images/pack-icons/quiz-time.png') }}"
                                                                         class="w-full"/>
                                                                </div>
                                                            </div>
                                                            <div class="mt-3 text-[0.94rem] font-medium text-primary">
                                                                {{ $item->lesson?->name }}
                                                            </div>
                                                            <div class="mt-5 text-xs uppercase text-slate-400">
                                                                @if($item->quiz)
                                                                    @php
                                                                        $userQuiz = $item->quiz->users()->whereUserId($authUser->id)->first();
                                                                        $btnTxt = 'شروع آزمون';
                                                                        if($userQuiz){
                                                                            if(!is_null($userQuiz->end_at)){
                                                                                $btnTxt = 'نمایش نتایج آزمون';
                                                                            }else{
                                                                                $btnTxt = 'ادامه آزمون';
                                                                            }
                                                                        }
                                                                    @endphp

                                                                    <a href="{{ route('quiz.show', $item->quiz->id) }}"
                                                                       class="mt-3 bg-success text-white cursor-pointer flex items-center justify-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item">
                                                                        <span>{{ $btnTxt }}</span>
                                                                    </a>
                                                                @else
                                                                    @can('user')
                                                                        <a href="{{ url('uploads/plan/test/' . $item->file_code . '.pdf') }}"
                                                                           class="mt-3 quiztime-download bg-success text-white cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item">
                                                                            {{ $item->resource }} @can('admin')
                                                                                ({{ $item->file_code }})
                                                                            @endcan
                                                                        </a>
                                                                    @endcan
                                                                @endif

                                                                @can('admin')
                                                                    <a href="{{ url('uploads/plan/test/' . $item->file_code . '.pdf') }}"
                                                                       class="mt-3 quiztime-download bg-success text-white cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item">
                                                                        {{ $item->resource }} @can('admin')
                                                                            ({{ $item->file_code }})
                                                                        @endcan
                                                                    </a>
                                                                @endcan
                                                            </div>
                                                        </div>
                                                        <div class="flex border-t border-slate-200/80 mt-auto">
                                                            <div class="flex flex-1 flex-col items-center py-3">
                                                                <div class="text-base font-medium">
                                                                    {{ $item->time ?? '-' }} دقیقه
                                                                </div>
                                                                <div class="text-slate-500">مدت زمان</div>
                                                            </div>
                                                            <div
                                                                    class="flex flex-1 flex-col items-center border-slate-200/80 py-3">
                                                                <div class="text-base font-medium">
                                                                    {{ $item->test_count ?? '-' }}
                                                                </div>
                                                                <div class="text-slate-500">تعداد تست</div>
                                                            </div>
{{--                                                            <div class="flex flex-1 flex-col items-center py-3">--}}
{{--                                                                <a href="{{ url('uploads/plan/test/' . $item->file_code . '.pdf') }}"--}}
{{--                                                                   class="transition duration-200 border shadow-md inline-flex items-center justify-center py-2 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-primary border-primary text-white dark:border-primary px-4">--}}
{{--                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24"--}}
{{--                                                                         height="20" viewBox="0 0 24 24" fill="none"--}}
{{--                                                                         stroke="currentColor" stroke-width="2"--}}
{{--                                                                         stroke-linecap="round" stroke-linejoin="round"--}}
{{--                                                                         class="lucide lucide-file-down">--}}
{{--                                                                        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/>--}}
{{--                                                                        <path d="M14 2v4a2 2 0 0 0 2 2h4"/>--}}
{{--                                                                        <path d="M12 18v-6"/>--}}
{{--                                                                        <path d="m9 15 3 3 3-3"/>--}}
{{--                                                                    </svg>--}}
{{--                                                                    دانلود فایل--}}
{{--                                                                </a>--}}
{{--                                                            </div>--}}
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection