@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('reports.store', $box) }}" method="POST">
                                @csrf
                                <div class="box box--stacked flex flex-col">
                                    @can('user')
                                        <div role="alert"
                                             class="alert relative border rounded-md px-5 py-4 bg-warning border-warning bg-opacity-20 border-opacity-5 text-warning dark:border-warning 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"
                                                 data-lucide="alert-circle"
                                                 class="lucide lucide-alert-circle stroke-[1] rtl:ml-2 ltr:mr-2 h-6 w-6">
                                                <circle cx="12" cy="12" r="10"></circle>
                                                <line x1="12" x2="12" y1="8" y2="12"></line>
                                                <line x1="12" x2="12.01" y1="16" y2="16"></line>
                                            </svg>
                                            داوطلب گرامی ؛ گزارش کار خود را دقیق وارد کنید زیرا امکان ویرایش آن را
                                            ندارید.
                                        </div>
                                    @endcan
                                    <div class="p-7">
                                        <div class="mt-5 flex flex-col pt-5 first:mt-0 first:pt-0 sm:flex-row gap-5">
                                            <div class="flex 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 }}" {{ $box->box_type_id == $item->id ? 'selected' : '' }}>{{ $item->title }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="flex 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 }}" {{ $box->lesson_id == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="flex 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" required
                                                               value="{{ old('time', $box->time) }}"
                                                               placeholder="{{ $box->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
                                                                class="py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400 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">
                                                            دقیقه
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            @if(in_array($box->boxType->name, ['learn_test', 'quiz_test']))
                                                <div class="flex 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" required
                                                                   value="{{ old('test_count', $box->test_count) }}"
                                                                   placeholder="{{ $box->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>
                                            @endif
                                        </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">
                                                    @if($box->lessons)
                                                        @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
                                                    @endif
                                                </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).on('change', '#lesson_id', function () {
            let self = $(this);
            let lesson_id = self.val();

            $.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="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-${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');
    </script>
@endsection