@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 sm:col-span-10 sm:col-start-2">
                        <div class="mt-7">
                            <form action="{{ route('boxes.store', $date) }}" method="POST"
                                  enctype="multipart/form-data">
                                @csrf
                                <div class="box box--stacked flex flex-col">
                                    <div class="p-7">
                                        <div class="mt-5 grid grid-cols-4 gap-5 items-start">
                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="box_type_id">اقدام</label>
                                                    <select data-tw-merge="" name="box_type_id" id="box_type_id"
                                                            data-placeholder="جستجو" required
                                                            class="tom-select disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md px-3 rtl:pl-8 ltr:pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1 mt-1 flex-1">
                                                        @foreach($types as $item)
                                                            <option
                                                                value="{{ $item->id }}">{{ $item->title }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="lesson_id">درس</label>
                                                    <select data-tw-merge="" name="lesson_id" id="lesson_id"
                                                            data-placeholder="جستجو" autocomplete="off" required
                                                            class="tom-select disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md px-3 rtl:pl-8 ltr:pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1 mt-1 flex-1">
                                                        @foreach($lessons as $item)
                                                            <option
                                                                value="{{ $item->id }}">{{ $item->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="start_at">زمان شروع</label>
                                                    <div class="flex group input-group">
                                                        <input type="text" name="start_at" required
                                                               value="{{ old('start_at') }}" data-jdp data-jdp-only-time
                                                               class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&amp;[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&amp;:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&amp;:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 ui-autocomplete-input">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="end_at">زمان پایان</label>
                                                    <div class="flex group input-group">
                                                        <input type="text" name="end_at" required
                                                               value="{{ old('end_at') }}" data-jdp data-jdp-only-time
                                                               class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&amp;[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&amp;:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&amp;:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 ui-autocomplete-input">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt-5 grid grid-cols-3 gap-5 items-start">
                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="number">شماره باکس</label>
                                                    <div class="flex group input-group">
                                                        @php
                                                            $num = $date->boxes()->orderByDesc('number')->first()->number ?? 0;
                                                        @endphp
                                                        <input type="number" name="number" required
                                                               value="{{ old('number', ++$num) }}"
                                                               class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&amp;[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&amp;:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&amp;:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 ui-autocomplete-input">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="resource">منبع</label>
                                                    <div class="flex group input-group">
                                                        <input type="text" name="resource"
                                                               value="{{ old('resource') }}"
                                                               class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&amp;[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&amp;:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&amp;:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 ui-autocomplete-input">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="subject">مبحث (نوشتاری)</label>
                                                    <div class="flex group input-group">
                                                        <input type="text" name="subject"
                                                               value="{{ old('subject') }}"
                                                               class="textSubject disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&amp;[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&amp;:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&amp;:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 ui-autocomplete-input">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt-5 grid grid-cols-3 gap-5 items-start powerbanks invisible">
                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="test_count">تعداد تست</label>
                                                    <div class="flex group input-group">
                                                        <input type="number" name="test_count"
                                                               value="{{ old('test_count') }}"
                                                               class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&amp;[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&amp;:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&amp;:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 ui-autocomplete-input">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row  my-2">
                                                    <div class="power-select">
                                                        <label for="powerbank-select">مخزن پاوربانک</label>
                                                        <div class="flex group input-group">
                                                            <select data-tw-merge="" name="powerbank"
                                                                    id="powerbank-select"
                                                                    data-placeholder="جستجو" required
                                                                    class="select2 disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md px-3 rtl:pl-8 ltr:pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1 mt-1 flex-1">
                                                                <option value="0" selected>انتخاب کنید</option>
                                                                @foreach($powerbanks as $key => $item)
                                                                    <option
                                                                        value="{{ $item->id }}">{{ $item->lesson->name }}
                                                                        - {{ $item->subject->name ?? "none-$item->id" }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="mt-3 xl:mt-0 w-full power-file">
                                                        <div class="">
                                                            <label for="powerbank"
                                                                   class="inline-block group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left">
                                                                فایل پاوربانک
                                                            </label>
                                                            <input id="powerbank" name="powerbank" type="file"
                                                                   placeholder="فایل پاوربانک"
                                                                   class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&amp;[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&amp;:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&amp;:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10">
                                                        </div>
                                                    </div>
                                                    <div class="mt-2">
                                                        <input type="checkbox" name="ownPowerbank"
                                                               id="ownPowerbank"
                                                               class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded 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"
                                                        <label for="ownPowerbank"
                                                               class="cursor-pointer rtl:mr-2 ltr:ml-2">
                                                            <span>ایجاد پاوربانک شخصی</span>
                                                        </label>
                                                    </div>
                                                    {{--                                                    <a href="{{ route('powerbanks.create') }}" class="text-info">ایجاد--}}
                                                    {{--                                                        پاوربانک شخصی</a>--}}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt-5 grid grid-cols-3 gap-5 items-start quiztimes invisible">
                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <div class="quiz-select">
                                                        <label for="quiz-time">مخزن کوییز تایم</label>
                                                        <div class="flex group input-group">
                                                            <select data-tw-merge="" name="file_code" id="quiz-time"
                                                                    data-placeholder="جستجو" required
                                                                    class="select2 disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md px-3 rtl:pl-8 ltr:pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1 mt-1 flex-1">
                                                                <option value="0" selected>انتخاب کنید</option>
                                                                @foreach($quiztimes as $key => $item)
                                                                    <option
                                                                        value="{{ $item->id }}">{{ $item->subject->lesson->name ?? 'بدون درس' }}
                                                                        - {{ $item->subject->name ?? "none-$item->id" }}
                                                                        - {{ $item->code }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="mt-2">
                                                        <input type="checkbox" name="ownQuiz"
                                                               id="ownQuiz"
                                                               class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded 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"
                                                        <label for="ownQuiz"
                                                               class="cursor-pointer rtl:mr-2 ltr:ml-2">
                                                            <span>ایجاد کوییز تایم شخصی</span>
                                                        </label>
                                                    </div>
                                                    {{--                                                    <a href="{{ route('quiztimes.create', ['date' => $date]) }}"--}}
                                                    {{--                                                       class="text-info">ایجاد--}}
                                                    {{--                                                        کوییز تایم شخصی</a>--}}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt-5 grid grid-cols-4 mb-5 gap-5 items-start quiz-file">
                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="test_count">تعداد تست</label>
                                                    <div class="flex group input-group">
                                                        <input type="number" name="test_count"
                                                               value="{{ old('test_count') }}"
                                                               class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&amp;[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&amp;:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&amp;:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 ui-autocomplete-input">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="time">زمان</label>
                                                    <div class="flex group input-group">
                                                        <input type="number" name="time"
                                                               value="{{ old('time') }}"
                                                               class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&amp;[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&amp;:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&amp;:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 ui-autocomplete-input">
                                                    </div>
                                                </div>
                                            </div>
                                            {{--                                            <div class="mt-3 xl:mt-0 w-full">--}}
                                            {{--                                                <div class="my-2">--}}
                                            {{--                                                    <label for="file"--}}
                                            {{--                                                           class="inline-block group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left">--}}
                                            {{--                                                        فایل اکسل کوییز--}}
                                            {{--                                                    </label>--}}
                                            {{--                                                    <input id="file" name="file" type="file" placeholder="فایل"--}}
                                            {{--                                                           class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&amp;[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&amp;:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&amp;:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10">--}}
                                            {{--                                                </div>--}}
                                            {{--                                            </div>--}}
                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="my-2">
                                                    <label for="question_file"
                                                           class="inline-block group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left">
                                                        فایل PDF سوالات
                                                    </label>
                                                    <input id="question_file" name="question_file" type="file"
                                                           placeholder="فایل"
                                                           class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&amp;[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&amp;:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&amp;:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10">
                                                </div>
                                            </div>
                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="my-2">
                                                    <label for="answer_file"
                                                           class="inline-block group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left">
                                                        فایل PDF پاسخنامه
                                                    </label>
                                                    <input id="answer_file" name="answer_file" type="file"
                                                           placeholder="فایل"
                                                           class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&amp;[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&amp;:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&amp;:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt-5 grid grid-cols-6 mb-5 gap-5 items-start quiz-file quizKeys">
                                            <div class="mt-3 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="correct-1">کلید سوال ۱</label>
                                                    <select data-tw-merge="" name="questions[]" id="correct-1"
                                                            data-placeholder="جستجو" required
                                                            class=" disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md px-3 rtl:pl-8 ltr:pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1 mt-1 flex-1">
                                                        <option value="1">گزینه ۱</option>
                                                        <option value="2">گزینه ۲</option>
                                                        <option value="3">گزینه ۳</option>
                                                        <option value="4">گزینه ۴</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="mt-3 xl:mt-0 w-full">
                                                <a href=""
                                                   class="flex items-center justify-center w-full h-full text-center text-warning addKey">
                                                    <i data-lucide="plus"></i>
                                                    <p>افزودن کلید</p>
                                                </a>
                                            </div>

                                        </div>

                                        <div class="mt-3 col-span-4 xl:mt-0 w-full block">
                                            <div class="my-2">
                                                <label>مباحث</label>
                                                <div class="grid grid-cols-1 gap-3 subject-inputs">
                                                    {{--                                                    @foreach($box->lesson->subjects as $item)--}}
                                                    {{--                                                        @php--}}
                                                    {{--                                                            $inBox = in_array($item->id, $box->subjects()->pluck('subject_id')->toArray());--}}
                                                    {{--                                                        @endphp--}}
                                                    {{--                                                        <div>--}}
                                                    {{--                                                            <input type="checkbox" name="subjects[]"--}}
                                                    {{--                                                                   {{ $inBox ? 'checked' : '' }}--}}
                                                    {{--                                                                   id="subject-{{ $item->id }}"--}}
                                                    {{--                                                                   value="{{ $item->id }}"--}}
                                                    {{--                                                                   class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded 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="horizontal-form-3">--}}
                                                    {{--                                                            <label for="subject-{{ $item->id }}"--}}
                                                    {{--                                                                   class="cursor-pointer rtl:mr-2 ltr:ml-2">--}}
                                                    {{--                                                                @if($loop->last)--}}
                                                    {{--                                                                    <strong--}}
                                                    {{--                                                                            class="{{ $inBox ? 'text-warning' : '' }}">{{ $item->name }}</strong>--}}
                                                    {{--                                                                @else--}}
                                                    {{--                                                                    <span--}}
                                                    {{--                                                                            class="{{ $inBox ? 'text-warning' : '' }}">{{ $item->name }}</span>--}}
                                                    {{--                                                                @endif--}}
                                                    {{--                                                            </label>--}}
                                                    {{--                                                        </div>--}}
                                                    {{--                                                    @endforeach--}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex flex-col justify-end gap-3 p-4 md:flex-row">
                                    <button data-tw-merge="" style="margin-left: auto" id="btn_save"
                                            class="transition duration-200 border shadow-sm inline-flex items-center justify-center px-3 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 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary w-full rounded-[0.5rem] py-2.5 md:w-56">
                                        <i data-tw-merge="" data-lucide="pen-line"
                                           class="rtl:ml-2 ltr:mr-2 h-4 w-4 stroke-[1.3]"></i>
                                        ذخیره
                                    </button>
                                    <a href="{{ url()->previous() }}" data-tw-merge=""
                                       class="transition duration-200 border shadow-sm inline-flex items-center justify-center px-3 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 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 w-full rounded-[0.5rem] border-slate-300/80 bg-white/80 py-2.5 md:w-56"><i
                                            data-tw-merge="" data-lucide="pen-line"
                                            class="rtl:ml-2 ltr:mr-2 h-4 w-4 stroke-[1.3]"></i>
                                        لغو</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function () {

            $(document).on('change', '#lesson_id', function () {
                let self = $(this);
                let lesson_id = self.val();
                getPowerbanks()

                $.ajax({
                    method: 'POST',
                    url: '{{ route('api.getSubjects') }}',
                    data: {
                        lesson_id: lesson_id
                    }, success: function (res) {
                        let checkbox = "";
                        $.each(res, function (k, value) {
                            checkbox += `<div>
                                                                <input type="checkbox" name="subjects[]"
                        id="subject-${value.id}"
                                                                       value="${value.id}"
                                                                       class="subjectIds transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded 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">
                                                                <label for="subject-${value.id}"
                                                                       class="cursor-pointer rtl:mr-2 ltr:ml-2">
                        <span>${value.name}</span>
                        </label>
                    </div>`;
                        })

                        $('.subject-inputs').html(checkbox);
                    }
                })
            })

            $('#lesson_id').trigger('change')

            $('#box_type_id').on('change', function () {
                let self = $(this);
                let val = self.val();
                setType(val)
                getPowerbanks();
            })

            setType($('#box_type_id').val())

            function setType(val) {
                let tests = ['2', '3', '10'];

                if ($.inArray(val, tests) !== -1) {
                    $('.powerbanks').removeClass('invisible');
                    $('.quiztimes').addClass('invisible');
                } else if (val == '7') {
                    $('.powerbanks').addClass('invisible');
                    $('.quiztimes').removeClass('invisible');
                } else {
                    $('.powerbanks').addClass('invisible');
                    $('.quiztimes').addClass('invisible');
                }
            }

            $(document).on('change', '.subjectIds', function () {
                getPowerbanks()
                setInSubjectTextInput()
            })

            $('#ownPowerbank').on('change', function () {
                powerStatus(this)
            })

            $('#ownQuiz').on('change', function () {
                quizStatus(this)
            })

            getPowerbanks()

            powerStatus($('#ownPowerbank'))
            quizStatus($('#ownQuiz'))

            function powerStatus(el) {
                if ($(el).is(':checked')) {
                    $('.power-select').addClass('hidden');
                    $('.power-file').removeClass('hidden');
                } else {
                    $('.power-select').removeClass('hidden');
                    $('.power-file').addClass('hidden');
                }
            }

            function quizStatus(el) {
                if ($(el).is(':checked')) {
                    $('.quiz-select').addClass('hidden');
                    $('.quiz-file').removeClass('hidden');
                } else {
                    $('.quiz-select').removeClass('hidden');
                    $('.quiz-file').addClass('hidden');
                }
            }

            function getPowerbanks() {
                let field = {{ $fieldId }};
                let lesson = $('#lesson_id').val();
                let type = $('#box_type_id').val();
                let subjects = $('.subjectIds:checked').map(function () {
                    return $(this).val();
                }).get();

                $.ajax({
                    method: 'POST',
                    url: '{{ route('api.getPowerbanks') }}',
                    data: {
                        field_id: field,
                        lesson_id: lesson,
                        type: type,
                        subjects: subjects,
                    }, success: function (res) {
                        let values = `<option value="0">انتخاب کنید</option>`;
                        $.each(res, function (k, value) {
                            values += `<option value="${value.id}">${value.lesson_name} - ${value.subject_name} - ${value.code}</option>`;
                        })

                        $('#powerbank-select').html(values);
                    }
                })
            }

            function setInSubjectTextInput() {
                let selectedLabels = [];

                $('.subjectIds:checked').each(function () {
                    // دریافت متن لیبل (parent label)
                    let labelText = $(this).siblings('label').text().trim();

                    // حذف مقدار value از متن در صورت نیاز
                    // چون متن لیبل شامل value نیست معمولا، همین کافی است:
                    selectedLabels.push(labelText);
                });

                // ساخت رشته با + بین موارد
                let finalText = selectedLabels.join(' + ');

                // قرار دادن در اینپوت
                $('.textSubject').val(finalText);
            }

            $('.addKey').on('click', function (e) {
                e.preventDefault();
                addKey(this);
            })

            let keyIndex = 1;

            function addKey(e) {
                keyIndex++;
                let newKey = `
        <div class="mt-3 xl:mt-0 w-full">
            <div class="items-center md:flex-row my-2">
                <label for="correct-${keyIndex}">کلید سوال ${keyIndex}</label>
                <select name="questions[]" id="correct-${keyIndex}"
                    class=" w-full text-sm border-slate-200 shadow-sm rounded-md px-3 mt-1">
                    <option value="1">گزینه ۱</option>
                    <option value="2">گزینه ۲</option>
                    <option value="3">گزینه ۳</option>
                    <option value="4">گزینه ۴</option>
                </select>
            </div>
        </div>
    `;

                // اضافه کردن قبل از دکمه افزودن کلید
                $(e).closest(".quizKeys").find(".addKey").parent().before(newKey);
            }
        })
    </script>
@endsection