@extends('layouts.app')

@section('styles')

            <style>

#items_div_set { 
    list-style-type: none; 
    margin: 0; 
    padding: 0;
    cursor:pointer;
}
#items_div_set li { 
    margin: 10px 20px 10px 0px; 
    display: inline-block;
}
</style>

@endsection

@section('content')

                             <!-- PAGE-HEADER -->
                            <div class="page-header">
                                <h1 class="page-title">Configure Section</h1>
                                <div>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Configure Section</li>
                                    </ol>
                                </div>
                            </div>
                            <!-- PAGE-HEADER END -->

                            <input type="hidden" id="ttl_q_cnt" value="{{ $total_question_count }}">
                            <input type="hidden" id="dt_tbl_qs" value="">

                            <!-- ROW-1 OPEN -->
                            @canany(['test-section-create','test-section-edit'])
                            <div class="row" id="add_sec" style="display:none;">
                                <div class="col-lg-12 col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title"><span id="change_stat">Add New</span> Section</h3>
                                        </div>
                                        <div class="card-body">
                                                <form method="POST" id="createForm" class="myform" enctype="multipart/form-data">  
                                                    <input id="csrf_token" type="hidden" value="{{ csrf_token() }}">
                                                    <input id="section_id" name="section_id" type="hidden" value="">
                                                    
                                                    @csrf
                                                <div class="form-row">
                                                    <div class="col-xl-4 mb-3" id="test_d_none">
                                                        <label for="validationTooltip01">Test *</label>
                                                        <select class="form-control" data-parsley-required-message="Test Name Required"  name="test" id="test" required>
                                                            <option disabled value="">Select Test</option>
                                                            @foreach($tests as $tet)
                                                                <option disabled value="{{ $tet->test_id }}">{{ $tet->test_number }} - {{ $tet->test_name }}</option>
                                                            @endforeach
                                                        </select>
                                                            
                                                    </div>
                                                    
                                                    
                                                    <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Section Number *</label>
                                                        <input type="text" readonly class="form-control" value="" required id="section_m_num">
                                                            
                                                    </div>

                                                    <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Section Name *</label>
                                                        <input data-parsley-required-message="Test Name Required" type="text" class="form-control" name="section_name" id="section_name"
                                                            value="" required>
                                                            
                                                    </div>
                                                    
                                                    <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Section Duration (In Minutes) *</label>
                                                        <input data-parsley-required-message="Section Duration Required" type="text" pattern="[0-9]+" class="form-control" name="section_duration" id="section_duration" onkeypress="return isNumber(event)"
                                                            value="" required>
                                                            
                                                    </div>


                                                    <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Pass Percent *</label>
                                                        <select class="form-control" name="pass_percent" id="pass_percent">
                                                            <option value="5">5%</option>
                                                            <option value="10">10%</option>
                                                            <option value="15">15%</option>
                                                            <option value="20">20%</option>
                                                            <option value="25">25%</option>
                                                            <option value="30">30%</option>
                                                            <option value="35">35%</option>
                                                            <option value="40">40%</option>
                                                            <option value="45">45%</option>
                                                            <option value="50">50%</option>
                                                            <option value="55">55%</option>
                                                            <option value="60">60%</option>
                                                            <option value="65">65%</option>
                                                            <option value="70">70%</option>
                                                            <option value="75">75%</option>
                                                            <option value="80">80%</option>
                                                            <option value="85">85%</option>
                                                            <option value="90">90%</option>
                                                            <option value="95">95%</option>
                                                        </select>
                                                            
                                                    </div>


                                                    <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Correct Answer Score *</label>
                                                        <input data-parsley-required-message="Score For Correct Answer Required" type="text" class="form-control" pattern="[0-9]+([\.,][0-9]+)?" name="correct_answer_score" id="correct_answer_score" onkeypress="return isNumber(event)"
                                                            value="1" required>
                                                            
                                                    </div>

                                                    <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Incorrect Answer Score (Do not put the minus sign.)*</label>
                                                        <input data-parsley-required-message="Score For Incorrect Answer Required" type="text" class="form-control" pattern="[0-9]+([\.,][0-9]+)?" name="incorrect_answer_score" id="incorrect_answer_score" onkeypress="return isNumber(event)"
                                                            value="0" required>
                                                            
                                                    </div>
                                                    
                                                    <div class="col-xl-12 mb-3" style="display:none;" id="item_main_div">
                                                        <p>(Tip : Drag & Drop To Change Question Order ) <button type="button" onclick="save_order()" class="btn btn-info">Save Order</button></p>
                                                        <div class="row image-list" id="items_div_set">
                                                            
                                                        </div>
                                                        <input type="hidden" id="order_inp" name="order_inp">
                                                    </div>
                                                    
                                                    <div class="col-xl-12 mb-3">
                                                        <label for="validationTooltip01">Section Description </label>
                                                        <textarea data-parsley-required-message="Section Description Required"  class="form-control newsummernote" name="description" id="description"></textarea>
                                                    </div>
                                                 
                                                    
                                                </div>
                                                @can('test-section-create')
                                                <a id="create_btn" href="#" onclick="createOrUpdate('{{url('/add_section')}}', 'createForm', '', 'table_datatable','')" class="btn custom-btn-success"><i class="fa fa-save"></i> Save</a>
                                                @endcan
                                                @can('test-section-edit')
                                                <a  id="update_btn" style="display: none" href="#" onclick="createOrUpdate('{{url('/update_section')}}', 'createForm', '', 'table_datatable','')" class="btn custom-btn-success"><i class="fa fa-save"></i> Update</a>
                                                @endcan
                                                <a onclick="$('#createForm')[0].reset();$('.newsummernote').summernote('reset');window.scrollTo(0, 0);" style="margin-left:10px;" id="clear_btn" class="text-white btn custom-btn-info"><i class="fa fa-ban"></i> Clear</a><a onclick="$('#createForm')[0].reset();$('.newsummernote').summernote('reset');$('#add_sec').css('display','none');$('#change_stat').text('Add New');" style="margin-left:10px;" id="cancel_btn" class="text-white btn custom-btn-danger"><i class="fa fa-times"></i> Cancel</a>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                             @endcanany
                            <!-- /ROW-1 CLOSED -->

                               <!-- Row -->
                        @can('test-section-list')
                        <div class="row row-sm">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header">
                                        <div class="row w-100">
                                            <div class="col-lg-4">
                                                <h3 class="card-title">View Sections</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="row w-100">
                                            <div class="col-lg-6">
                                            <div class="row mb-3">
                                                    <div class="col-lg-7">
                                                        <select class="form-control" id="change_test_id" onchange="test_filter(this.value)">
                                                            @foreach($tests as $tet)
                                                                <option value="{{ $tet->test_id }}">{{ $tet->test_number }} - {{ $tet->test_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-lg-3 position-relative">
                                                        <button style="position: absolute;right: -20px;" type="button" class="btn custom-btn-success pull-right" onclick="$('#add_sec').css('display','flex');$('#clear_btn').css('display','inline-block');window.scrollTo(0, 0);$('#createForm')[0].reset();$('#create_btn').css('display','inline-block');$('#update_btn').css('display','none');var test_id_find = $('#change_test_id').val();$('#test').val(test_id_find);$('#change_stat').text('Add New');get_number_section(test_id_find);var selectBox = document.getElementById('test');for (var i = 0; i < selectBox.options.length; i++) { selectBox.options[i].disabled = true; }$('select option[value='+test_id_find+']').prop('disabled', false);">Add New Section</button>
                                                    </div>
                                                </div>
                                                </div>
                                        </div>
                                        <div class="table-responsive">
                                             <table  class="table table-bordered text-nowrap border-bottom dataTable no-footer " style="width: 100% !important;" id="table_datatable">
                                                <thead class="text-center">
                                                    <tr>
                                                        <th class="wd-15p border-bottom-0">#</th>
                                                        <th class="wd-15p border-bottom-0">Section Number</th>
                                                        <th class="wd-15p border-bottom-0">Section Name</th>
                                                        <th class="wd-15p border-bottom-0">Duration</th>
                                                        <th class="wd-15p border-bottom-0">Pass %</th>
                                                        <th title="Right Answer Score" class="wd-15p border-bottom-0">R Score</th>
                                                        <th title="Wrong Answer Score" class="wd-15p border-bottom-0">W Score</th>
                                                        <th title="Number of Questions Added" class="wd-15p border-bottom-0">No: of Qs</th>
                                                        <th class="wd-10p border-bottom-0">Actions</th>
                                                    </tr>
                                                </thead>
                                               
                                            </table>
                                    
                                            <div class="col-sm-12 col-md-12">                                             
                                        </div>
                                        </div>
                                    </div>
                        

                                </div>
                               
                            </div> 
                        </div> 
                        @endcan
                        <!-- End Row -->

                         <!-- Modal -->
               


                        <div class="modal  fade" id="smallmodal" tabindex="-1" role="dialog">
                            <div class="modal-dialog modal-sm" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Delete</h5>
                                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>Do you want to delete the Section ?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button onclick="delete_item()" class="btn custom-btn-danger">Delete</button>
                                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">No</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        {{-- #########################Info Modal################################### --}}
            <div class="modal fade" id="infomodal" tabindex="-1" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" style="font-weight: bold;" id="view_modal_title">Info</h5>
                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                    </div>
                    <div class="modal-body"  id="view_modal_body">
                        <h5>Added By : <span id="added_user_info"></span></h5>
                        <h5>Added Date : <span id="added_date_info"></span></h5>
                    </div>
                    <div class="modal-footer">
                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
            {{-- #########################End Of Info Modal############################ --}}
                        
                        
                                  {{-- #########################Question Modal################################### --}}
            <div class="modal fade" id="questionmodal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen modal-dialog-scrollable" role="document">
                <div class="modal-content">
                        <form id="search_filter_ques">
                    <div class="modal-header">
                        <div class="row w-100 p-5">
                            <div class="col-xl-12">
                                <div class="row w-100">
                                    <div class="col-xl-5">
                                        <div class="row w-100">
                                            <div class="col-xl-4">
                                                <select id="type_of_search" class="form-control">
                                                    <option value="1">ID</option>
                                                    <option value="2">Question</option>
                                                    <option value="3">Category</option>
                                                </select>
                                            </div>
                                            <div class="col-xl-5">
                                                <input type="text" id="value_search" class="form-control" placeholder="search.." name="">
                                            </div>
                                            <div class="col-xl-3">
                                                <button type="button" onclick="searchfnquestion()" class="w-100 btn btn-outline-secondary">Search</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-7">
                                        <div class="row w-100 justify-content-end">
                                            <div class="col-xl-5">
                                                <select id="category_select" class="form-control" onchange="listquestiononcat(this.value)">
                                                    <option value="0">All Category</option>
                                                    @foreach($departments as $dept)
                                                        <option value="{{ $dept->category_id }}">{{ $dept->category_name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-xl-5">
                                                <select id="test_select" class="form-control" onchange="listquestionontest(this.value)">
                                                    <option value="0">All Tests </option>
                                                    @foreach($tests as $nwtet)
                                                        <option value="{{ $nwtet->test_id }}">{{ $nwtet->test_number }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-xl-2">
                                                <button type="button" class="btn btn-danger" onclick="reset_serch(0)"><i class="fa fa-refresh"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button" style="background-color: #f00;border-radius: 35px;padding: 8px;color: #fff !important;margin-top: 0px;margin-right: 0px;" class="btn-close text-danger" onclick="let text = 'Your changes may not be saved do you want to continue?';if (confirm(text) == true) { $('#questionmodal').modal('hide'); }" aria-label="Close">
                                    <span aria-hidden="true">x</span>
                                </button>
                    </div>
                        </form>
                    <div class="modal-body">
                        <input type="hidden" id="modal_section_id">
                        <input type="hidden" id="selected_check">
                        <input type="hidden" id="remove_check_val">
                        <div class="row align-items-center p-5">
                            <div class="col-xl-6">
                                <p>No of Questions Selected: <span style="padding:5px;font-weight: bold;background-color: #f00;color: #fff;font-size: 18px;" id="q_count">0</span></p>
                            </div>
                            <div class="col-xl-6">
                                <div class="row justify-content-end">
                                    <div class="col-xl-9">
                                        <form id="random_ques_form">
                                        <div class="form-row">
                                            <div class="col-xl-8">
                                                <label>Randomly Select Questions</label>
                                                <input type="text" placeholder="Eg: 10" id="rand_count" class="form-control" onkeypress="return isNumber(event)">
                                                <p id="valu_conf" style="color:red;font-size:12px;display:none;">Please Enter a value</p>
                                            </div>
                                            <div class="col-xl-4">
                                                <button type="button" style="margin-top: 28px;" onclick="select_rand_count()" class="w-100 btn btn-outline-secondary"> Add</button>
                                            </div>
                                        </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3 p-5" id="question_modal_body">
                            <div class="table-responsive">
                                <table class="table table-bordered text-nowrap border-bottom dataTable no-footer " style="width: 100% !important;" id="table_question_datatable">
                                    <thead class="text-center">
                                        <tr>
                                            <th class="wd-15p border-bottom-0"><input id="testtd" type="checkbox" onclick="check_all_questions()"></th>
                                            <th class="wd-15p border-bottom-0">ID</th>
                                            <th class="wd-15p border-bottom-0">Category</th>
                                            <th class="wd-15p border-bottom-0">Question</th>
                                            <th class="wd-15p border-bottom-0">Type</th>
                                        </tr>
                                    </thead>
                                               
                                </table>
                                    
                                <div class="col-sm-12 col-md-12 d-flex justify-content-end mb-4">
                                    <button type="button" class="btn btn-info save-btn-act" onclick="save_select_questions()"><i class="fa fa-save"></i></button>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            {{-- #########################End Of Question Modal############################ --}}
                        

                        
                        

            @endsection
              @section('scripts')  
{{-- ################################Jquery Datatable########################### --}}
   {{-- <script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script> --}}
   <link rel="stylesheet" type="text/css" href="{{asset('assets/jquery-datatable/jquery.dataTables.css?v3')}}">
   <script src="{{asset('assets/jquery-datatable/jquery.dataTables.js')}}"></script>
 {{-- ########################################################################## --}}


    <!-- INTERNAL SUMMERNOTE Editor JS -->
    <script src="{{asset('assets/plugins/summernote/summernote1.js')}}"></script>
    <script>
    
$(document).ready(function() {
    // Initialize DataTable
    var table = $('#table_question_datatable').DataTable();
    
    // Add event listener for pagination
    $('#table_question_datatable').on('page.dt', function () {
        setTimeout(function(){ get_checkbox_values() },1000);
    });
    
    $('#table_question_datatable').on('search.dt', function () {
        setTimeout(function(){ get_checkbox_values() },1000);
    });
    
    $('#table_question_datatable').on('length.dt', function () {
        setTimeout(function(){ get_checkbox_values() },1000);
    });
    
    $('#table_question_datatable').on('order.dt', function () {
        setTimeout(function(){ get_checkbox_values() },1000);
    });
    
});

</script>

<script>
        function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46) {
        return false;
    }
    return true;
}
    </script>



    <script type="text/javascript">
        jQuery((function(e){"use strict";
            $(document).ready((function(){
                $('.newsummernote').summernote({
                    height: 300,
                    callbacks: {
                        onImageUpload: function(files) {
                            var current_id = $(this).attr('id');
                            uploadImage(files[0], current_id);
                        }
                    }
                });
            }))
        }));
    </script>



        <script>
    var token = $("meta[name=csrf-token]").attr("content");  
    var datatable_name="table_datatable";
    var dttbl_cnt = 0;
    $('#table_datatable').DataTable({
        "responsive": true,
       "serverSide": true,
       "ordering": false,
       "searching": false,
       "bLengthChange": false,
       "paging": false,
       "info":false,
       "bSort": false,
       "order": [
           [0, 'desc']
       ],
       
       "columnDefs": [{
               "targets": [0,1,2,3,4],
               "orderable": true
           },
           {"className": "text-center", "targets": [0,3,4,5,6,7]},
           {"className": "text-left", "targets": [1,2,3]}
           
       ],
       "displayLength":10,
       "ajax": {
           "url":  "/section_datatable",
           "type": "post",
           "data": function (data) {
                data._token = token;
                
              
               return data;
  
           }
       }, "AutoWidth": true,
       "columns": [
                  {"data": "test_sec_id", "name": "test_sec_id"},
                  {"data": "test_sec_id", "name": "test_sec_id"},
                  {"data": "section_name", "name": "section_name"},
                  {"data": "test_sec_id", "name": "test_sec_id"},
                  {"data": "test_sec_id", "name": "test_sec_id"},
                  {"data": "correct_ans_score", "name": "correct_ans_score"},
                  {"data": "incorrect_ans_score", "name": "incorrect_ans_score"},
                  {"data": "question_count", "name": "question_count"},
                  {"data": "test_sec_id", "name": "test_sec_id"},
                   ],
      
      "fnCreatedRow": function (nRow, aData, iDataIndex) {
          var info = this.dataTable().api().page.info();
          var page = info.page;
          var length = info.length;
          var index = (page * length + (iDataIndex + 1));
          var action="";
          //category Icon Section
          
          var htmlTags = /<(.|\n)*?>/;
        
        /*if(aData.section_description=="" || aData.section_description===null)
        {
             var small_desc = "";
        }
        else
        {
            if(htmlTags.test(aData.section_description)===true)
            {
                var desc = $(aData.section_description).text();
            }
            else
            {
                var desc = aData.section_description;
            }
            var small_desc = desc.slice(0, 50) + (desc.length > 50 ? "..." : "");
        }*/



            var action=action+'&nbsp;<button title="Add Questions" onclick=question_add_modal('+aData.test_sec_id+') id="bQuestion" type="button" class="btn btn-sm custom-btn-warning"><span class="fa fa-question"> </span></button>';
         
            //Edit Action
            @can('test-section-edit')
            var action=action+'&nbsp;<button title="Edit"  onclick=edit('+aData.test_sec_id+','+index+') id="bEdit" type="button" class="btn btn-sm custom-btn-info"><span class="fe fe-edit"> </span></button>';
            @endcan
            //Delete Action
            @can('test-section-delete')
            var action=action+'&nbsp;<button title="Delete" onclick="delete_modal('+aData.test_sec_id+')" id="bDel" type="button" class="btn  btn-sm custom-btn-danger"><span class="fe fe-trash-2"> </span></button>';
            @endcan
            //info action
            var action=action+'&nbsp;<button title="Info" onclick="show_info_rprt(`'+aData.name+'`,`'+aData.created_at+'`)" id="binfo" type="button" class="btn  btn-sm custom-btn-info"><span class="fe fe-info"> </span></button>';

            if(aData.incorrect_ans_score!=0)
            {
                var neg_score = '- '+aData.incorrect_ans_score;
            }
            else
            {
                var neg_score = aData.incorrect_ans_score;
            }


            $('td:eq(0)', nRow).html(index);
            $('td:eq(1)', nRow).text('Section '+index);
            $('td:eq(3)', nRow).html(aData.section_duration+' Min.');
            $('td:eq(4)', nRow).html(aData.pass_percent_section+'%');
            $('td:eq(6)', nRow).html(neg_score);
            $('td:eq(8)', nRow).html(action);
 }
 
 
 });

       // #################### Edit Section ############################
                function edit(id,section_m_num){
                    $('#add_sec').css('display','flex');
                    var section_num = 'Section '+section_m_num;
                    var selectBox = document.getElementById('test');
                    for (var i = 0; i < selectBox.options.length; i++)
                    {
                        selectBox.options[i].disabled = false;
                    }
                    $('#change_stat').text('Edit');
                $.ajax({
                    type: 'POST',
                    data: {"_token": token,"id": id},
                    url: '/edit_section',
                    success: function (result) {
                        $('#section_id').val(result.section_details.test_sec_id);
                        $('#section_name').val(result.section_details.section_name);
                        $('#section_m_num').val(section_num);
                        $('#section_duration').val(result.section_details.section_duration);
                        $('#pass_percent').val(result.section_details.pass_percent_section);
                        $('#correct_answer_score').val(result.section_details.correct_ans_score);
                        $('#incorrect_answer_score').val(result.section_details.incorrect_ans_score);
                        $('#test').val(result.section_details.test_id);
                        $('#description').summernote('reset');
                        $('#description').summernote('code',result.section_details.section_description);
                        $('#test_name').val(result.section_details.test_name);
                        $('#item_main_div').css('display','block');
                        var getquestion_cnt = result.test_questions.length;
                        var htmlTags = /<(.|\n)*?>/;
                        var quest_reslt = "";
                        var ord_inp = "";
                        for(var qq=0; qq<getquestion_cnt; qq++)
                        {
                            if(htmlTags.test(result.test_questions[qq].question)===true)
                            {
                                var question = $(result.test_questions[qq].question).text();
                            }
                            else
                            {
                                var question = result.test_questions[qq].question;
                            }
                            var small_q = question.slice(0, 250) + (question.length > 250 ? "..." : "");
                            
                            quest_reslt = quest_reslt+'<div class="col-md-12 bg-dark p-4 mb-3" id="question_shw_'+result.test_questions[qq].test_qs_id+'"><p style="margin:0;color:#fff;">'+small_q+'</p></div>';
                            if(ord_inp=="")
                            {
                                ord_inp = result.test_questions[qq].test_qs_id;
                            }
                            else
                            {
                                ord_inp = ord_inp+','+result.test_questions[qq].test_qs_id;
                            }
                            
                        }
                        if(quest_reslt!="")
                        {
                            $("#items_div_set").html(quest_reslt);
                            $('#order_inp').val(ord_inp);
                        }
                        else
                        {
                            $('#item_main_div').css('display','none');   
                        }
                        $('#create_btn').hide();
                        $('#update_btn').show();
                        $('#back-to-top').click();
                        
                        }
                })
                }
      // #################### End Of Edit Section ####################
     // #################### Delete Section ##########################
                    function delete_modal(id){
                    $('#section_id').val(id);
                    $('#smallmodal').modal('show');
                    }
                    function delete_item(){
                    var id=$('#section_id').val();
                    $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '/delete_section',
                        success: function (result) {
                        $('#smallmodal').modal('hide');
                        toast(result,datatable_name);
                        }
                    })
                    }
     // #################### End Of Delete Section ##################


    function test_filter(test_id){
        $.ajax({
            type: 'POST',
            data: {"_token": token,"test_id": test_id},
            url: '/filter_test',
            success: function (result) {
                $("#table_datatable").DataTable().ajax.reload(null, false);
            }
        })
    }
   
    
    
        </script>


        <script type="text/javascript">
            $( document ).ready(function() {
                var test_id = $("#change_test_id").val();
                test_filter(test_id);
            });
        </script>

        <script type="text/javascript">
        function question_add_modal(id){
            var table = new DataTable('#table_question_datatable');
            $("#modal_section_id").val(id);
            table.destroy();
            $.ajax({
            type: 'POST',
            data: {"_token": token,"section_id": id},
            url: '/add_section_questions',
            success: function (result) {
                $('#search_filter_ques')[0].reset();
                $('#random_ques_form')[0].reset();
                $('#questionmodal').modal('show');
                $('#testtd').prop('checked', false);
                $('#valu_conf').css('display','none');
                questions_datatable();
                setTimeout(function(){ selected_q_datas(result.selected_ques); }, 1000);
            }
            })
        }
        function selected_q_datas(argument) {
            var count = argument.length;
            var selvals = "";
            for (var i = 0; i < count; i++)
            {
                if(i==0){
                    selvals = argument[i].question_id;
                    $('#ques_selected'+argument[i].question_id).prop('checked', true);
                }
                else{
                    selvals = selvals+','+argument[i].question_id;
                    $('#ques_selected'+argument[i].question_id).prop('checked', true);
                }
            }

        $("#q_count").text(count);
        $("#dt_tbl_qs").val(count);
        $("#selected_check").val(selvals);
        $("#remove_check_val").val('');

        }
        </script>



        <script type="text/javascript">
            function questions_datatable(){
    var dttbl_cnt = 0;
                $('#table_question_datatable').DataTable({
        "responsive": true,
       "serverSide": true,
       "ordering": true,
       "searching": true,
       "bLengthChange": true,
       "info":false,
       "bSort": true,
       "order": [
           [1, 'desc']
       ],
       "columnDefs": [{
               "targets": [1,2,3,4],
               "orderable": true
           },
           {
               "targets": [0,1,2,3,4],
               "orderable": false
           },
           {"className": "text-center", "targets": [0,1,2,3,4]},
           {"className": "text-left", "targets": []}
           
       ],
       "displayLength":10,
       "ajax": {
           "url":  "/questions_datatable",
           "type": "post",
           "data": function (data) {
                data._token = token;
              
               return data;
  
           }
       }, "AutoWidth": true,
       "columns": [
                  {"data": "question_id", "name": "question_id"},
                  {"data": "question_id", "name": "question_id"},
                  {"data": "category_name", "name": "category_name"},
                  {"data": "question_id", "name": "question_id"},
                  {"data": "question_id", "name": "question_id"},
                   ],
      
      "fnCreatedRow": function (nRow, aData, iDataIndex) {
          dttbl_cnt = parseInt(dttbl_cnt)+1;
          var info = this.dataTable().api().page.info();
          var page = info.page;
          var length = info.length;
          var index = (page * length + (iDataIndex + 1));
          var action="";

          var type_qs="";

        if(aData.type == 0){
            type_qs = "MCQ - SA : Multiple Choice - Single Answer";
        }
        else{
            type_qs = "MCQ - MA : Multiple Choice - Multiple Answers";
        }

        var checkbox = '<input type="checkbox" name="ques_selected" id="ques_selected'+aData.question_id+'" onclick="if(this.checked===true){ get_select_ques('+aData.question_id+',`checked`); }else{ get_select_ques('+aData.question_id+',`unchecked`); }" class="check_all_act" value="'+aData.question_id+'">';

        var htmlTags = /<(.|\n)*?>/;
        
        
        if(htmlTags.test(aData.question)===true)
        {
            var question = $(aData.question).text();
        }
        else
        {
            var question = aData.question;
        }
        var small_q = question.slice(0, 50) + (question.length > 50 ? "..." : "");
          
            

            $('td:eq(0)', nRow).html(checkbox)
            $('td:eq(3)', nRow).text(small_q);
            $('td:eq(4)', nRow).html(type_qs);
 }
 });
 
 
            }
        </script>
        


        


<script type="text/javascript">
    function listquestionontest(listtestid){
        $("#testtd").css('display','none');
        $('#type_of_search').val('1');
        $('#value_search').val('');
        var catid = $('#category_select').val();
        $('#random_ques_form')[0].reset();
        if(listtestid=="0")
        {
            $("#testtd").css('display','inline-block');
        }
        else
        {
            $("#testtd").css('display','none');
        }
        $.ajax({
            type: 'POST',
            data: {"_token": token,"listtestid": listtestid,catid:catid},
            url: '/list_question_test',
            success: function (result) {
                $("#table_question_datatable").DataTable().ajax.reload(null, false);
                setTimeout(function(){ get_checkbox_values() },1000); 
            }
        });
    }
</script>

<script type="text/javascript">
    function searchfnquestion(){
        var type_of_search = $("#type_of_search").val();
        var value_search = $("#value_search").val();
        
        $('#category_select').val('0');
        $('#test_select').val('0');
        $('#random_ques_form')[0].reset();
        if(value_search=="")
        {
            $("#testtd").css('display','inline-block');
        }
        else
        {
            $("#testtd").css('display','none');
        }

        $.ajax({
            type: 'POST',
            data: {"_token": token,"type_of_search": type_of_search,'value_search': value_search},
            url: '/search_func_cat',
            success: function (result) {
                $("#table_question_datatable").DataTable().ajax.reload(null, false);
                setTimeout(function(){ get_checkbox_values() },1000); 
            }
        });
    }
</script>

<script type="text/javascript">
    function listquestiononcat(listcatid){
        $("#testtd").css('display','none');
        $('#type_of_search').val('1');
        $('#value_search').val('');
        var test_id = $('#test_select').val();
        $('#random_ques_form')[0].reset();
        if(listcatid=="0")
        {
            $("#testtd").css('display','inline-block');
        }
        else
        {
            $("#testtd").css('display','none');
        }
        $.ajax({
            type: 'POST',
            data: {"_token": token,"listcatid": listcatid,test_id:test_id,},
            url: '/list_question_cat',
            success: function (result) {
                $("#table_question_datatable").DataTable().ajax.reload(null, false);
                setTimeout(function(){ get_checkbox_values() },1000); 
            }
        });
    }
</script>


<script type="text/javascript">
    function save_select_questions(){
        var modal_section_id = $("#modal_section_id").val();

        var checked_values = $("#selected_check").val();
        var remove_check_val = $("#remove_check_val").val();

        if(checked_values!="")
        {
            $.ajax({
                type: 'POST',
                data: {"_token": token,"modal_section_id": modal_section_id,'checked_values': checked_values,'remove_check_val': remove_check_val},
                url: '/save_selected_ques',
                success: function (result) {
                    toast(result,datatable_name);
                    $('#questionmodal').modal('hide');
                }
            });
        }
        else{
            alert('Please select atleast one question');
        }

    }
</script>

<script type="text/javascript">
    function get_select_ques(ques_id,type){
        var cur_string = $("#selected_check").val();
        var rem_string = $("#remove_check_val").val();
        if(type=="checked"){
            if (cur_string=="") {
                cur_string = ques_id;
            }
            else{
                if(cur_string.includes(','+ques_id+',')===false)
                {
                    cur_string = cur_string+','+ques_id;
                    if(rem_string.includes(',')===true){
                        if(rem_string.includes(ques_id)===true){
                            rem_string = rem_string.replace(ques_id+',', '');
                        }
                        else{
                            rem_string = rem_string;
                        }
                    }
                    else{
                        rem_string = rem_string.replace(ques_id, '');
                    }
                }
                else{
                    cur_string = cur_string;
                    if(rem_string.includes(',')===true){
                        if(rem_string.includes(','+ques_id+',')===true){
                            rem_string = rem_string.replace(ques_id+',', '');
                        }
                        else{
                            rem_string = rem_string;
                        }
                    }
                    else{
                        rem_string = rem_string.replace(ques_id, '');
                    }
                }
            }
        }
        else{
            if (rem_string=="") {
                rem_string = ques_id;
            }
            else{
                if(rem_string.includes(','+ques_id+',')===false)
                {
                    rem_string = rem_string+','+ques_id;
                }
                else{
                    rem_string = rem_string;
                }
            }
        }

        $("#selected_check").val(cur_string);
        $("#remove_check_val").val(rem_string);


        var selctarray=[];
        var remarray=[];

        if(Number.isInteger(cur_string)===false)
        {
            if(cur_string.indexOf(',') != -1){
                selctarray = cur_string.split(',');
            }
            else
            {
                selctarray.push(cur_string);
            }
        }
        else{
            selctarray.push(cur_string);
        }
        if(Number.isInteger(rem_string)===false)
        {
            if(rem_string.indexOf(',') != -1){
                remarray = rem_string.split(',');
            }
            else{
                remarray.push(rem_string);
            }
        }
        else{
            remarray.push(String(rem_string));
        }

        selctarray = selctarray.filter(item => !remarray.includes(item));

        function onlyUnique(value, index, array) {
          return array.indexOf(value) === index;
        }

        selctarray = selctarray.filter(onlyUnique);


        $("#q_count").text(selctarray.length);
        $("#dt_tbl_qs").val(selctarray.length);
        var ttlques = $("#ttl_q_cnt").val();
        if(ttlques == selctarray.length)
        {
            $("#testtd").prop('checked', true);
        }
        else
        {
            $("#testtd").prop('checked', false);
        }

    }
</script>

<script type="text/javascript">
    function get_checkbox_values(){
        var selected_values = $('#selected_check').val();
        var rem_string = $("#remove_check_val").val();
        var selctarray_check=[];
        var remarray=[];
        if(Number.isInteger(selected_values)===false)
        {
            if(selected_values.indexOf(',') != -1){
                selctarray_check = selected_values.split(',');
            }
            else
            {
                selctarray_check.push(selected_values);
            }
        }
        else{
            selctarray_check.push(selected_values);
        }
        if(Number.isInteger(rem_string)===false)
        {
            if(rem_string.indexOf(',') != -1){
                remarray = rem_string.split(',');
            }
            else{
                remarray.push(rem_string);
            }
        }
        else{
            remarray.push(String(rem_string));
        }

        selctarray_check = selctarray_check.filter(item => !remarray.includes(item));

        function onlyUnique(value, index, array) {
          return array.indexOf(value) === index;
        }

        selctarray_check = selctarray_check.filter(onlyUnique);

        var res_count_check = selctarray_check.length;


        for (var j = 0; j <= res_count_check; j++) {
            $('#ques_selected'+selctarray_check[j]).prop('checked', true);            
        }
        
        var ttlques = $("#ttl_q_cnt").val();
        if(ttlques == res_count_check)
        {
            $("#testtd").prop('checked', true);
        }
        else
        {
            $("#testtd").prop('checked', false);
        }


    }
</script>


<script type="text/javascript">
    function select_rand_count(){
        var modal_section_id = $("#modal_section_id").val();
        var selected_values = $('#selected_check').val();
        var rem_values = $('#remove_check_val').val();
        var ttlques = $("#ttl_q_cnt").val();
        var dt_tbl_qs = $("#dt_tbl_qs").val();
        var typ_cnt = $("#rand_count").val();
        if(typ_cnt!="")
        {
            $('#valu_conf').css('display','none');
            if(isNaN(typ_cnt))
            {
                alert("please enter a numeric value");
            }
            else
            {
        if(parseInt(typ_cnt)>parseInt(ttlques)){
            $("#remove_check_val").val('');
            var selectebleqs = ttlques;
            var flag = 0;
        }
        else{
            if(parseInt(typ_cnt)+parseInt(ttlques)==parseInt(ttlques))
            {
                $("#remove_check_val").val('');
                selectebleqs = typ_cnt;
                var flag = 1;   
            }
            else
            {
                selectebleqs = typ_cnt;
                var flag = 1;
            }
        }
        $.ajax({
            type: 'POST',
            data: {"_token": token,"selectebleqs": selectebleqs,"modal_section_id": modal_section_id,selected_values:selected_values,rem_values:rem_values},
            url: '/random_ques_get',
            success: function (result) {
                reset_serch(1);
                $('#selected_check').val(result);
                $("#remove_check_val").val('');
                var resultarray_check_rand=[];
                    if(result.section_details.indexOf(',') != -1){
                        resultarray_check_rand = result.split(',');
                    }
                    else{
                        resultarray_check_rand = resultarray_check_rand.push(result);
                    }
                $("#q_count").text(resultarray_check_rand.length);
                $("#dt_tbl_qs").val(resultarray_check_rand.length);
                setTimeout(function(){ get_checkbox_values() },1000);
                if (flag==0) {
                    alert("Entered value is greater than total questions hence all the available questions are selected..");
                }
            }
        });
            }
        }
        else{
            $('#valu_conf').css('display','block');
        }


    }
</script>



<script type="text/javascript">
    function reset_serch(type){
        var modal_section_id = $("#modal_section_id").val();
        $.ajax({
            type: 'POST',
            data: {"_token": token,"section_id": modal_section_id},
            url: '/add_section_questions',
            success: function (result) {
                $('#search_filter_ques')[0].reset();
                $('#random_ques_form')[0].reset();
                $('#testtd').prop('checked', false);
                $("#table_question_datatable").DataTable().ajax.reload(null, false);
                if(type==0)
                {
                setTimeout(function(){ selected_q_datas(result.selected_ques); }, 1000);
                }
            }
            });       
    }
</script>


<script>
    function check_all_questions(){
        var all_check = document.getElementById('testtd');
        $("#q_count").text('0');
        $("#dt_tbl_qs").val('');
        $("#selected_check").val('');
        $("#remove_check_val").val('');
        if(all_check.checked===false){
            $(".check_all_act").prop('checked',false);
        }
        else
        {
            var modal_section_id = $("#modal_section_id").val();
            $.ajax({
                type: 'POST',
                data: {"_token": token,"section_id": modal_section_id},
                url: '/check_all_questions',
                success: function (result) {
                    $('#selected_check').val(result);
                    var resultarray_check=[];
                    if(result.indexOf(',') != -1){
                        resultarray_check = result.split(',');
                    }
                    else{
                        resultarray_check = resultarray_check.push(result);
                    }
                    
                    for (var j = 0; j <= resultarray_check.length; j++) {
                        $('#ques_selected'+resultarray_check[j]).prop('checked', true);
                    }
                    
                    $("#q_count").text(resultarray_check.length);
                    $("#dt_tbl_qs").val(resultarray_check.length);
                    
                }
            });
        }
    }
    
    
    
    
    
    
    function show_info_rprt(og_name,og_date){
        $(`#infomodal`).modal(`show`);
        $(`#added_user_info`).text(og_name);
        $(`#added_date_info`).text(format_date_fn(og_date));
    }
    
    function format_date_fn(og_date_frmt)
    {
        const today = new Date(og_date_frmt);
        const yyyy = today.getFullYear();
        let mm = today.getMonth() + 1; // Months start at 0!
        let dd = today.getDate();
        
        if (dd < 10) dd = '0' + dd;
        if (mm < 10) mm = '0' + mm;
        
        const formattedToday = dd + '-' + mm + '-' + yyyy;
        
        return formattedToday;
    }
    
    function get_number_section(test_num){
        $.ajax({
            type: 'POST',
            data: {"_token": token,"test_num": test_num},
            url: '/get_section_new_num',
            success: function (result) {
                $("#section_m_num").val('Section '+result);
            }
        });
    }
    
</script>


<link rel="stylesheet" href="{{asset('vendor/jquery/jquery-ui/jquery-ui.css')}}">
<script src="{{asset('vendor/jquery/jquery-ui/jquery-ui.js')}}" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<script>
    $(document).ready(function () {
        var dropIndex;
        $("#items_div_set").sortable({
            	update: function(event, ui) { 
            		dropIndex = ui.item.index();
            }
        });
    });
    function save_order(){
            var ord_inp = "";
            $("div.image-list div").each(function() {
                if(ord_inp=="")
                {
                    ord_inp = $(this).attr('id').substr(13);
                }
                else
                {
                    ord_inp = ord_inp+','+$(this).attr('id').substr(13);
                }
            });
            Swal.fire({
  title: "Success!",
  text: "Question Order Set Successfully",
  icon: "success"
});
            $('#order_inp').val(ord_inp);
        }
        
        



</script>



        @endsection