@extends('layouts.admin')
@section('content')
    <div class="card">
        <div class="card-header">
            Create Quiz
        </div>
        <div class="card-body">
            <form action="{{ route('quiz.index.update', $quiz->id) }}" method="POST">
                @csrf
                @method('PUT')
                {{-- @dd($quiz) --}}
                <div class="row">
                    <div class="col-md-12 form-group">
                        <label class="required" for="title">Title:</label>
                        <input type="text" required class="form-control" placeholder="Title of the quiz" name="title"
                            value={{ $quiz->title }}>
                    </div>
                    <div class="col-md-4 form-group">
                        <label class="required" for="course_id">Course</label>
                        <select class="form-control select2" name="course_id" id="course_id" required>
                            <option value disabled {{ old('course_id', null) === null ? 'selected' : '' }}>
                                {{ trans('global.pleaseSelect') }}</option>
                            @foreach ($courses as $key => $course)
                                <option value="{{ $course->id }}">{{ $course->title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 form-group">
                        <label class="required" for="module">Module</label>
                        <select class="form-control select2" name="module" id="module">
                        </select>
                    </div>
                    <div class="col-md-4 form-group">
                        <label class="required" for="topic">Topic</label>
                        <select class="form-control select2" name="topic" id="topic">
                        </select>
                    </div>
                    <div class="col-6 form-group">
                        <label class="required" for="questions">Select Question</label>
                        <select class="form-control select2" multiple="multiple" name="questions[]" id="questions">
                        </select>
                    </div>

                    <div class="col-6 form-group">
                        <label class="required" for="questions">Select Exam Type</label>
                        <select class="form-control select2" name="exam_type" id="exam_type" required>
                            <option value disabled {{ old('exam_type_id', null) === null ? 'selected' : '' }}>
                                {{ trans('global.pleaseSelect') }}</option>
                            @foreach (App\Models\Quiz::EXAM_TYPES_SELECT as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <input type="hidden" name="exam_module_id" value="{{ request()->exam_module }}">
                    <div class="col-md-4 form-group">
                        <label class="required" for="title">Quiz Mark:</label>
                        <input type="number" class="form-control" name="quiz_mark">
                    </div>
                    <div class="col-md-4 form-group">
                        <label class="required" for="exampleInputEmail1">Quiz date & time</label>
                        <input class="form-control datetime" type="text" name="date_time" id="date_time"
                            value="{{ old('date_time') }}" data-validation="required">
                    </div>
                    <div class="col-md-4 form-group">
                        <label class="required" for="exampleInputEmail1">Quiz Time Limit</label>
                        <input class="form-control" type="number" name="time_limit" id="time_limit"
                            value="{{ old('time_limit') }}" data-validation="required">
                    </div>
                    <div class="col form-group">
                        <label for="title">Description:</label>
                        <textarea name="description" id="" placeholder="optional" class="form-control"></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <button class="btn btn-success" type="submit">
                        {{ trans('global.save') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('scripts')
    @parent
    <script>
        $(function() {
            $('select[name="category_id"]').on('change', function() {
                var category_id = $(this).val();
                if (category_id) {
                    $.ajax({
                        url: '/get-quiz-subcategories/' + category_id,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            $('select[name="subcategory_id"]').empty();
                            if (data.length > 0) {
                                $.each(data, function(key, value) {
                                    $('select[name="subcategory_id"]').append(
                                        '<option value="' + value.id + '">' + value
                                        .name + '</option>');
                                });
                            }
                        }
                    });
                } else {
                    $('select[name="subcategory_id"]').empty();
                }
            });
            var topics = []
            $('select[name="course_id"]').on('change', function() {
                var course_id = $(this).val();
                if (course_id) {
                    $.ajax({
                        url: '/get-modules-by-course/' + course_id,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            $('select[name="module"]').empty();
                            topics = data
                            if (data.length > 0) {
                                $('select[name="module"]').append(
                                    '<option value="null">Please select a module</option>');
                                $.each(data, function(key, value) {
                                    $('select[name="module"]').append(
                                        '<option value="' + value.id + '">' + value
                                        .name + '</option>');
                                });
                            }
                        }
                    });
                } else {
                    $('select[name="module"]').empty();
                }
            });
            var questions = []
            $('select[name="module"]').on('change', function() {
                var module_id = $(this).val();
                if (module_id) {
                    $('select[name="topic"]').empty();
                    var topic = topics.find(e => e.id == module_id);
                    if (topic) {
                        $('select[name="topic"]').append(
                            '<option value="null">Please select a topic</option>');
                        $.each(topic.topics, function(key, value) {
                            $('select[name="topic"]').append('<option value="' + value + '">' +
                                value + '</option>');
                        });
                    }
                    $.ajax({
                        url: '/get-questions?type=module&id=' + module_id,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            questions = data
                            $('select[name="questions[]"]').empty();
                            if (data.length > 0) {
                                $.each(data, function(key, value) {
                                    $('select[name="questions[]"]').append(
                                        '<option value="' + value.id + '">' + value
                                        .question + '</option>');
                                });
                            }
                        }
                    });
                } else {
                    $('select[name="topic"]').empty();
                }
            });

            $('select[name="topic"]').on('change', function() {
                var topic_name = $(this).val();
                var question_list = questions.filter(e => e.topic == topic_name);
                if (question_list) {

                    $('select[name="questions[]"]').empty();
                    $.each(question_list, function(key, value) {
                        $('select[name="questions[]"]').append('<option value="' + value.id + '">' +
                            value.question + '</option>');
                    });
                }
            });



            // $('select[name="course_id"]').on('change', function() {
            //     var course_id = $(this).val();
            //     if(course_id) {
            //         $.ajax({
            //             url: '/get-questions/'+course_id,
            //             type: "GET",
            //             dataType: "json",
            //             success:function(data) {
            //                 $('select[name="questions[]"]').empty();
            //                 if(data.length>0){
            //                     $.each(data, function(key, value) {
            //                         $('select[name="questions[]"]').append('<option value="'+ value.id +'">'+ value.question +'</option>');
            //                     });
            //                 }
            //             }
            //         });
            //     }else{
            //         $('select[name="questions[]"]').empty();
            //     }
            // });


            let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)


            $.extend(true, $.fn.dataTable.defaults, {
                orderCellsTop: true,
                order: [
                    [1, 'desc']
                ],
                pageLength: 100,
            });
            let table = $('.datatable-Batch:not(.ajaxTable)').DataTable({
                buttons: dtButtons
            })
            $('a[data-toggle="tab"]').on('shown.bs.tab click', function(e) {
                $($.fn.dataTable.tables(true)).DataTable()
                    .columns.adjust();
            });

        })
    </script>
@endsection