@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('exam.questions.save')}}" method="post">
                    @csrf 
                    @method('post')
                    <input type="hidden" name="exam_id" value="{{$exam->id}}">
                <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 Categories</th>
                                    <th>Multi Choice</th>
                                    <th>True Or False</th>
                                    <th>Open</th>
                                
                                    </tr>
                            </thead>
                            <tbody id="dynamicAddRemove">
                                <tr>                                    
                                    <td>
                                        <select name="moreFields[0][category]" class="form-control">
                                            <option value="">Select Question Category</option>
                                            @foreach($exam_types as $row)
                                            <option value="{{$row->id}}">{{$row->name}}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td> <input type="text" name="moreFields[0][multi_choice]" class="form-control" placeholder="Enter Total Number for Multi Choice"/></td>
                                    <td> <input type="text" name="moreFields[0][true_false]" class="form-control" placeholder="Enter Total Number for True or False" /></td>
                                    <td> <input type="text" name="moreFields[0][open]" class="form-control" placeholder="Enter Total Number for Open"/></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>
        var examtypes = @json($exam_types);
        var html = '<option value="">Select Question Category</option>';

        for (const element of examtypes) {
            html += `<option value="${element.id}">${element.name}</option>`;
        }          
    
        console.log(html);
    $(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> <select name="moreFields['+i+'][category]" class="form-control">'+html+'</select></td>'+
                    '<td> <input type="text" class="form-control" placeholder="Enter Total Number for Multi Choice" name="moreFields['+i+'][multi_choice]"/></td>'+
                    '<td> <input type="text" class="form-control" placeholder="Enter Total Number for True or False" name="moreFields['+i+'][true_false]"/></td>'+
                    '<td> <input type="text" class="form-control" placeholder="Enter Total Number for Open" name="moreFields['+i+'][open]"/></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