@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="flex items-center mt-8">

    <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="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> <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>
         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 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" 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+'"></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
  });
  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"> </textarea>`;

    if(e.value == 'True or False'){
        $('#answer'+num).html(trueFalse);
    }else{
        $('#answer'+num).html(open);
    }
  }
    </script>
@endsection