@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>
                        </div>
                        <div class="mt-10">
                            <div class="tab-content">
                                <div class="w-full">
                                    <div class="mt-3.5 grid grid-cols-12 gap-x-6 gap-y-10">
                                        @foreach($data as $key => $item)
                                            @php
                                                $box = $item->quiz->box;
                                                $color = $box->boxType->color;
                                                $boxKey = $box->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">{{ $box->boxType->title }}</span>
                                                                </span>
                                                </div>
                                                <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->quiz->plan->week }}
                                                    </div>
                                                    <div class="mt-5 text-xs uppercase text-slate-400">
                                                        <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>نمایش نتایج آزمون</span>
                                                        </a>
                                                    </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">
                                                            {{ $box->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">
                                                            {{ $box->test_count ?? '-' }}
                                                        </div>
                                                        <div class="text-slate-500">تعداد تست</div>
                                                    </div>
                                                </div>
                                                <div class="grid grid-cols-4 border-t border-slate-200/80 mt-auto">
                                                    @foreach($item->analyses as $analyse)
                                                        <div class="flex items-center p-4">
                                                            <strong>{{ $analyse->lesson }}</strong>
                                                        </div>
                                                        <div class="flex items-center flex-col py-3">
                                                            <div class="text-base font-medium" style="direction: ltr">
                                                                {{ $analyse->percent }}%
                                                            </div>
                                                            <div class="text-slate-500">درصد</div>
                                                        </div>
                                                        <div class="flex items-center flex-col py-3 text-success">
                                                            <div class="text-base font-medium">
                                                                {{ $analyse->correct_count }}
                                                            </div>
                                                            <div>درست</div>
                                                        </div>
                                                        <div class="flex items-center flex-col py-3 text-danger">
                                                            <div class="text-base font-medium">
                                                                {{ $analyse->incorrect_count }}
                                                            </div>
                                                            <div>غلط</div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection