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

@section('subhead')
<title>Atarud MIS - Assign Question To Exam</title>
<link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">

@endsection

@section('subcontent')
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Add Product</h2>
    </div>
    <div class="grid grid-cols-6 gap-x-6 mt-5 pb-20">

        <div class="intro-y col-span-11 2xl:col-span-9">

            <!-- BEGIN: Product Variant -->
            <div class="intro-y box p-5 mt-5">
                <div class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-5">
                    <div class="font-medium text-base flex items-center border-b border-slate-200/60 dark:border-darkmode-400 pb-5">
                         Book Details
                    </div>
                    <form action="{{route('exam.questionbank.store')}}" method="post">
                        @csrf
                        @method('post')
                    <div class="mt-5">
                        <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">

                                <div class="w-full mt-3 xl:mt-0 flex-1">
                                    <div class="sm:grid grid-cols-4 gap-2">
                                        <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>

                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Product Variant -->


            <!-- BEGIN: Weight & Shipping -->
            <div class="intro-y box p-5 mt-5">
                <div class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-5">
                    <div class="font-medium text-base flex items-center border-b border-slate-200/60 dark:border-darkmode-400 pb-5">
                         Questions
                         <p id="add-btn"  class="btn btn-primary w-24 ml-auto">
                            <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
                        </p>
                    </div>
                    
                    <div class="mt-5">

                       
                        <div class="overflow-x-auto">
                                <table class="table table-sm" >

                                    {{-- <input value="{{$id}}" name="exam_id" type="hidden"> --}}
                                    <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>Answer</th>
                                            <th></th>
                                            </tr>
                                    </thead>
                                    <tbody id="dynamicAddRemove">
                                        <tr>
                                            <td> <input type="text" class="form-control" placeholder="Enter Question" name="moreFields[0][question]"/></td>
                                            <td>
                                                <select name="moreFields[0][type]" class="form-control">
                                                    <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="text" name="moreFields[0][answer]" class="form-control">                                            
                                            </td>
                                            </tr>
                                    </tbody>

                        </table>

                    </div>
                </div>
            </div>
            <!-- END: Weight & Shipping -->
            <div class="flex justify-end flex-col md:flex-row gap-2 mt-5">
                <button type="submit" class="btn py-3 btn-primary w-full md:w-52">Save</button>
            </div>
        </form>

        </div>

    </div>
@endsection

@section('script')
    <script src="{{ mix('dist/js/ckeditor-classic.js') }}"></script>
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
   
    <script>

    // $(document).ready(function() {
    //     $.ajax({
    //         method: 'GET',
    //         url: "{{ url('get-exam-type') }}",
           
    //         success: function(response) {
    //             jQuery('#semester_id').html(response);
    //         }
    //     });
    // });
    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() {
    var html = `<option value="">Select Group</option>
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
                <option value="E">E</option>
                <option value="F">F</option>
                <option value="G">G</option>
                <option value="H">H</option>`;

    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> <input type="text" class="form-control" placeholder="Enter Question" name="moreFields['+i+'][question]"/></td>'+
                    '<td> <select name="moreFields['+i+'][type]" class="form-control">'+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="text" name="moreFields['+i+'][answer]" class="form-control"></td>'+
                    '<td><button title="Remove Fields" class="remove-tr btn btn-sm btn-danger mr-1 mb-2">Remove</button></td>'+
                    '</tr>'
                    );
                    ++i;
                });

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

</script>
@endsection