@extends('layouts.app')
@section('content')
    <h3 class=" text-center form-tittle text-p">
        @if (isset($exam))
            تعديل أمتحان
        @else
            أضافة أمتحان
        @endif
    </h3>
    <div class="m-sm-5 p-sm-5 p-2 m-2">

        <form class="d-flex flex-column gap-4"
            action="{{ isset($exam) ? route('exams-review.update', $exam->id) : route('exams-review.store') }}" method="post">
            @csrf
            @if (isset($exam))
                @method('PATCH')
            @endif
            <div class="row">

                <div class="col-6 d-none">
                    <label class="py-3 test-p2 fs-6 fw-bolder" for="type"> نوع الأمتحان </label>

                    <select id="type" name="type"
                        class=" @error('type')  is-invalid  @enderror type-exam form-select form-select-md mb-3">
                        <option selected value="lesson"> على حصة</option>
                    </select>
                </div>

                <div class="col-6" id="course">
                    <label class="py-3 test-p2 fs-6 fw-bolder" for="course_id"> اسم الدرس </label>
                    <select id="course_id" name="course_id" data-url="{{ route('ajax-units') }}"
                        class="course_id form-select select-field form-select-lg mb-3">
                        <option value="">اختر الدرس</option>
                        @foreach ($courses as $course)
                            <option {{ old('course_id') == $course->id ? 'selected' : null }}
                                {{ !old('course_id') ? (isset($exam) ? ($course_id == $course->id ? 'selected' : null) : null) : null }}
                                value="{{ $course->id }}">{{ $course->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 " id="unit">
                    <label class="py-3 test-p2 fs-6 fw-bolder" for="unit_id"> اسم الشهر </label>

                    <select id="unit_id" name="unit_id" class="unit_id form-select select-field form-select-lg mb-3"
                        data-url="{{ route('ajax-lessons') }}">
                        <option value="">أختر الدرس أولا</option>
                        @if (isset($exam))
                            @foreach ($units as $unit)
                                <option {{ old('unit_id') == $unit->id ? 'selected' : null }}
                                    {{ !old('unit_id') ? (isset($exam) ? ($unit_id == $unit->id ? 'selected' : null) : null) : null }}
                                    value="{{ $unit->id }}">{{ $unit->title }}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <div class="col-6 " id="lesson">
                    <label class="py-3 test-p2 fs-6 fw-bolder" for="lesson_id"> اسم الحصة </label>

                    <select id="lesson_id" name="lesson_id"
                        class="lesson_id @error('lesson_id')  is-invalid  @enderror form-select select-field form-select-lg mb-3">
                        <option value="">أختر الشهر أولا</option>
                        @if (isset($exam))
                            @foreach ($lessons as $lesson)
                                <option {{ old('lesson_id') == $lesson->id ? 'selected' : null }}
                                    {{ !old('lesson_id') ? (isset($exam) ? ($exam->lesson_id == $lesson->id ? 'selected' : null) : null) : null }}
                                    value="{{ $lesson->id }}">{{ $lesson->title }}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <div class="col-6">
                    <label class="py-3 test-p2 fs-6 fw-bolder" for="minuts">مدة الأمتحان بالدقائق</label>
                    <input type="number" class="form-control py-2 @error('minuts')  is-invalid  @enderror" id="minuts"
                        name="minuts" placeholder=" مدة الأمتحان بالدقائق "
                        value="{{ old('minuts', isset($exam) ? $exam->minuts : null) }}">
                </div>
                <div class="col-12">
                    <label class="py-3 test-p2 fs-6 fw-bolder" for="title"> أسم الأمتحان </label>
                    <input type="text" class="form-control mb-3 py-2 @error('title')  is-invalid  @enderror"
                        id="title" name="title" placeholder=" أسم الأمتحان     "
                        value="{{ old('title', isset($exam) ? $exam->title : null) }}">
                </div>
                <div class="col-12">

                    <div id="container-questions-selected">
                        @php
                            $question_ids = [];
                        @endphp
                        @foreach ($exam->questions_code ?? [] as $question)
                            @php
                                array_push($question_ids, $question->id);
                            @endphp
                            <span data-id="{{ $question->id }}" class="mt-5 remove-question-span ">
                                <span class="m-2 ">x</span><span class="">{{ $question->question }}</span>
                            </span>
                        @endforeach
                    </div>
                </div>

                <input type="hidden" value="{{ json_encode($question_ids) }}" id="question_ids" name="question_ids">
                <div class="overflow-scroll">

                    <table class="table table-bordered data-table" id="join-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>السؤال</th>
                                <th> الدرس</th>
                                <th> الشهر</th>
                                <th> الحصة</th>
                                <th>الصورة</th>
                                <th>أختيار</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <button type="submit" class="submit py-3 r-10">
                @if (isset($exam))
                    تعديل
                @else
                    أضافة
                @endif
            </button>
    </div>
@endsection
@section('js')
    <script>
        var table;
        $(function() {

            table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                dom: 'frtip',
                ajax: {
                    url: "{{ route('exams-review.create') }}",
                    data: function(data) {
                        data.type = $('#type').val(),
                            data.course_id = $('#course_id').val(),
                            data.search = $('input[type="search"]').val()
                    },
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'question',
                        name: 'question'
                    },
                    {
                        data: 'lesson.course.title',
                        name: 'lesson.course.title',
                        searchable: false,
                        sortable: false
                    }, {
                        data: 'lesson.unit.title',
                        name: 'lesson.unit.title',
                        searchable: false,
                        sortable: false
                    }, {
                        data: 'lesson.title',
                        name: 'lesson.title',
                        searchable: false,
                        sortable: false
                    },
                    {
                        data: 'image',
                        name: 'image',
                        searchable: false,
                        sortable: false
                    },
                    {
                        data: 'add',
                        name: 'add',
                        searchable: false,
                        sortable: false
                    }
                    // {data: 'action', name: 'action', orderable: false, searchable: false},
                ]
            });
        });
        $(document).on('change', '#type , #course_id  ,input[type="search"]', function(e) {
            table.draw();
        });
        $(document).on('click', '.add_question', function(e) {
            elems = JSON.parse($('#question_ids').val());
            let html = `        <span data-id=${$(this).attr('data-id')} class="mt-5 remove-question-span ">
  <span class="m-2 ">x</span><span class="">${$(this).attr('data-title')}</span>
  </span>`
            if (elems.indexOf(parseInt($(this).attr('data-id'))) === -1) {

                elems.push(parseInt($(this).attr('data-id')))
                $('#question_ids').val(JSON.stringify(elems))
                $('#container-questions-selected').append(html)
            } else {
                toastr.error('تم الأختيار من قبل')
            }
        })
        $(document).on('click', '.remove-question-span', function() {
            elems = JSON.parse($('#question_ids').val());
            index = elems.indexOf(parseInt($(this).attr('data-id')));
            elems.splice(index, 1);
            $('#question_ids').val(JSON.stringify(elems))
            $(this).remove()
        })
    </script>
@endsection