@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Assign Question To Exam</title>
    <link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
@endsection
{{-- <script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script> --}}
  <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<style>
    .editor{
        width: 30%;
        margin-top:50px;
    }
</style>
@section('subcontent')
    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Assign Question To Exam</h2>
    </div>

    <div class="container">
        <div class="row">
            <div class="flex-1 mt-6 xl:mt-0">
                <form action="{{ route('questionbank.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    @method('post')
                    <div class="box font-medium text-base border-b border-slate-200/60 dark:border-darkmode-400 p-6 ">
                        Book Details
                    </div>
                    <div class="sm:grid grid-cols-4 gap-2 box p-8">


                        <div class="input-group">
                            <select name="program_id" class="form-control" data-validate="required"
                                value="{{ old('program_id') }}" id="class_id" data-message-required="value_required "
                                onchange="get_class_semesters(this.value)">
                                <option value="">Select Program</option>

                                @foreach ($programs as $row)
                                    <option value="{{ $row->id }}">
                                        {{ $row->title }}
                                    </option>
                                @endforeach

                            </select>
                        </div>
                        <div class="input-group mt-2 sm:mt-0">
                            <select name="semester_id" class="form-control" value="{{ old('semester_id') }}"
                                id="semester_id" required onchange="getSection(this.value)">
                                <option value="">Select Semester</option>
                            </select>
                        </div>
                        <div class="input-group mt-2 sm:mt-0">
                            <select name="section_id" class="form-control" required value="{{ old('section_id') }}"
                                id="section_id">
                                <option value="">Select Section</option>
                            </select>
                        </div>
                        <div class="input-group mt-2 sm:mt-0">
                            <select name="exam_type_id" class="form-control" required value="{{ old('exam_type_id') }}">
                                <option value="">Select ExamType</option>
                                @foreach ($examTypes as $row)
                                    <option value="{{ $row->id }}"> {{ $row->name }} </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="box font-medium text-base border-b border-slate-200/60 dark:border-darkmode-400 p-8 mt-4 ">
                        Questions
                        <p id="add-btn" class="btn btn-primary w-24 ml-auto float-right">
                            <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
                        </p>
                    </div>
                    <div class="overflow-x-auto box p-8">

                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Question</th>
                                    <th>Question Type</th>
                                    <th>Option A</th>
                                    <th>Option B</th>
                                    <th>Option C</th>
                                    <th>Option D</th>
                                    <th>File</th>
                                    <th>Answer</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="dynamicAddRemove">
                                <tr>
                                    <td>
                                        {{-- <textarea name="moreFields[0}][question]" class="form-control editor"></textarea> --}}
                                        <textarea id="froala-editor"></textarea>

                                        {{-- <input type="text" class="form-control" placeholder="Enter Question" name="moreFields[0][question]"/> --}}
                                    </td>
                                    <td>
                                        <select name="moreFields[0][type]" class="form-control"
                                            onchange="return answerType(this,0)">
                                            <option value="">Select Question Type</option>
                                            <option value="Multi Choice">Multi Choice</option>
                                            <option value="True or False">True or False</option>
                                            <option value="Open">Open</option>
                                        </select>
                                    </td>
                                    <td> <input type="text" class="form-control" placeholder="Enter Option A"
                                            name="moreFields[0][option_a]" /></td>
                                    <td> <input type="text" class="form-control" placeholder="Enter Option B"
                                            name="moreFields[0][option_b]" /></td>
                                    <td> <input type="text" class="form-control" placeholder="Enter Option C"
                                            name="moreFields[0][option_c]" /></td>
                                    <td> <input type="text" class="form-control" placeholder="Enter Option D"
                                            name="moreFields[0][option_d]" /></td>
                                    <td> <input type="file" class="form-control" name="moreFields[0][filess]" /></td>
                                    <td id="answer0">
                                        <textarea name="moreFields[0}][answer]" class="form-control"></textarea>
                                    </td>
                                </tr>
                            </tbody>

                        </table>
                        <button type="submit" class="btn btn-primary mt-5" style="float: right;">Save</button>
                </form>

            </div>

        </div>
    </div>
    </div>
@endsection


@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
    <script>
        new FroalaEditor('#froala-editor');
        function get_class_semesters(program_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/program/semester/') }}",
                data: {
                    p_id: program_id,
                },
                success: function(response) {
                    jQuery('#semester_id').html(response);
                }
            });
        }

        function getSection(semester_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/semester/section/') }}",
                data: {
                    s_id: semester_id,
                },
                success: function(response) {
                    jQuery('#section_id').html(response);
                }
            });
        }

        $(document).ready(function() {

            // ClassicEditor
            //     .create(document.querySelector('.editor'))
            //     .catch(error => {
            //         console.error(error);
            //     });

            var html2 = `<option value="">Select Question Type</option>
                <option value="Multi Choice">Multi Choice</option>
                <option value="True or False">True or False</option>
                <option value="Open">Open</option>`;


            //Purchanse Items Dynamic Form Filed Add
            var i = 1;
            $("#add-btn").click(function() {

                $("#dynamicAddRemove").append('<tr>' +

                    '<td> <textarea class="form-control editor" placeholder="Enter Question" name="moreFields[' +
                    i + '][question]" id="editor_' + i + '"></textarea></td>' +
                    '<td> <select name="moreFields[' + i +
                    '][type]" class="form-control" onchange="return answerType(this,' + i + ')" >' +
                    html2 + '</select></td></td>' +
                    '<td> <input type="text" class="form-control" placeholder="Enter Option A" name="moreFields[' +
                    i + '][option_a]"/></td>' +
                    '<td> <input type="text" class="form-control" placeholder="Enter Option B" name="moreFields[' +
                    i + '][option_b]"/></td>' +
                    '<td> <input type="text" class="form-control" placeholder="Enter Option C" name="moreFields[' +
                    i + '][option_c]"/></td>' +
                    '<td> <input type="text" class="form-control" placeholder="Enter Option D" name="moreFields[' +
                    i + '][option_d]"/></td>' +
                    '<td> <input type="file" class="form-control" name="moreFields[' + i +
                    '][filess]"/></td>' +
                    '<td id="answer' + i + '"><textarea name="moreFields[' + i +
                    '}][answer]" class="form-control"></textarea></td>' +
                    '<td><button title="Remove Fields" class="remove-tr btn btn-sm btn-danger mr-1 mb-2">Remove</button></td>' +
                    '</tr>'
                );

                // console.log($(`#editor_${i}`).html());
                new FroalaEditor(`#editor_${i}`);
                // ClassicEditor
                //     .create(document.querySelector(`#editor_${i}`))

                //     .catch(error => {
                //         console.error(error);
                //     });
                ++i;


            });

//    setTimeout(() => {

                // }, 100);
            $(document).on('click', '.remove-tr', function() {
                $(this).parents('tr').remove();
            });
            //End of Purchanse Items Dynamic Form Filed Add
        });

        function answerType(e, num) {
            var trueFalse = `<select name="moreFields[${num}][answer]" class="form-control" onchange="return answerType(this,'+i+')" >
                        <option value="True">True</option>
                        <option value="False">False</option>
                    </select>`;

            var open = `<textarea name="moreFields[${num}][answer]" class="form-control" style='width:100%'> </textarea>`;


            if (e.value == 'True or False') {
                $('#answer' + num).html(trueFalse);
            } else {
                $('#answer' + num).html(open);
            }


        }
    </script>
@endsection