
 <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">All Question</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="<?php echo base_url() ?>admin/admin/dashboard">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="#">Question</a></li>
              <li class="breadcrumb-item active">All Question</li>

            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="card card-default">
          <div class="card-header">
            <h3 class="card-title">View All Question</h3>
            <div class="card-tools">
              <a href="<?php echo base_url()?>/admin/question/add_new_question" class="btn btn-success btn-sm"><i class="fa fa-plus" aria-hidden="true"></i> Add Question</a>

              <a id="delete_pop_up" href="javascript:void(0)" class="btn btn-danger btn-sm"><i class="fa fa-trash" aria-hidden="true"></i> All Delete</a>

            </div>
          </div>
            <!-- /.card-header -->
            <div class="card-body">
              <div class="category-filter">

                <div class="d-inline-block">
                  <select id="categoryFilter" class="form-control sst">
                    <option value="">All Subject</option>
                    <?php 
                    $all_subject = $this->db->get('course_subject')->result();
                    foreach ($all_subject as $key => $sub) 
                    {
                      echo '<option value="'.$sub->subject_name.'">'.$sub->subject_name.'</option>';
                    }
                    ?>
                  </select>
                </div>
                <div class="d-inline-block">
                  <select id="sub_cat_filter" class="form-control sst" style="width: 100%!important;">
                    <option value="">Select Level</option>
                    <option value="beginner">Beginner</option>
                    <option value="advanced">Advanced</option>
                    <option value="intermediate">Intermediate</option>
                  </select>
                </div>
              </div>
              <table id="filterTable" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th><input id="pop_all" type="checkbox">&nbsp;Check All</th>
                  <th>ID</th>
                  <th>Question</th>
                  <th>Option A</th>
                  <th>Option B</th>
                  <th>Option C</th>
                  <th>Option D</th>
                  <th>Correct Ans.</th>
                  <th>Type</th>
                  <th>Subject Name</th>
                  <!-- <th>Question Level</th> -->
                  <th></th>
                </tr>
                </thead>
                <tbody>
                
                </tbody>
              </table>
            </div>
          </div>
      </div><!--/. container-fluid -->
    </section>
    <!-- /.content -->
  </div>
<script>
$(function () {
   $("#filterTable").DataTable({
      "responsive": true,
        "lengthChange": true,
        "autoWidth": false,
        "searching": true,
        "scroller": true,
        "ordering": false,
        processing: true,
      'ajax': {
            'url': '<?php echo base_url('admin/question/fetch_all_qns'); ?>',
            "type": "POST",
            "dataType": "json",
            "error": function(xhr, error, thrown) {
                console.log("DataTables error:");
                console.log(xhr.responseText);
                console.log(error);
                console.log(thrown);
            }
        },
        'columns': [
            { 'data': '0' },
            { 'data': '1' },
            { 'data': '2' },
            { 'data': '3' },
            { 'data': '4' },
            { 'data': '5' },
            { 'data': '6' },
            { 'data': '7' },
            { 'data': '8' },
            { 'data': '9' },
            { 'data': '10' }
        ],
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print', 'pageLength'
        ]
        ,
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');

});
$(document).ready(function () {  
    $('#pop_all').on('click', function(e) {  
         if($(this).is(':checked',true))    
         {  
            $(".sub_chk_pop").prop('checked', true);    
         } 
         else 
         {    
            $(".sub_chk_pop").prop('checked',false);    
         }    
      });  
 
      $('#delete_pop_up').on('click', function(e) 
      {  
        var allVals = [];    
        $(".sub_chk_pop:checked").each(function() 
        {    
            allVals.push($(this).attr('data-id'));  
        });    
        
        if(allVals.length <=0)    
        {    
            alert("Please select atleast one question.");    
        }  
        else 
        {    
          var check = confirm("Are you sure you want to delete Questions?");    
          if(check == true){    
            var join_selected_values = allVals.join(",");   
            $.ajax({  
                url: '<?php echo base_url()?>admin/question/delete_multiple_qns',  
                type: 'POST',  
                data: 'ids='+join_selected_values,  
                success: function (data) {  
                  console.log(data);  
                  $(".sub_chk_pop:checked").each(function() 
                  {    
                      $(this).parents("tr").remove();  
                  });  
                  alert("Question Deleted successfully.");  
                },  
                error: function (data) {  
                    alert(data.responseText);  
                }  
            });  
          $.each(allVals, function( index, value ) {  
              $('table tr').filter("[data-row-id='" + value + "']").remove();  
          });  
        }    
      }    
    });
 

  var table = $('#filterTable').DataTable();
  $("#filterTable_filter.dataTables_filter").append($("#categoryFilter"));
  var categoryIndex = 0;
  $("#filterTable th").each(function (i) {
    if ($($(this)).html() == "Subject Name") {
      categoryIndex = i; return false;
    }
  });
  $.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
      var selectedItem = $('#categoryFilter').val()
      var category = data[categoryIndex];
      if (selectedItem === "" || category.includes(selectedItem)) {
        return true;
      }
      return false;
    }
  );
  $("#categoryFilter").change(function (e) {
    table.draw();
  });
  table.draw();


  var table_2 = $('#filterTable').DataTable();
  $("#filterTable_filter.dataTables_filter").append($("#sub_cat_filter"));
  var categoryIndex_2 = 0;
  $("#filterTable th").each(function (i) {
    if ($($(this)).html() == "Question Level") {
      categoryIndex_2 = i; return false;
    }
  });
  $.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
      var selectedItem_2 = $('#sub_cat_filter').val()
      var category_2 = data[categoryIndex_2];
      if (selectedItem_2 === "" || category_2.includes(selectedItem_2)) {
        return true;
      }
      return false;
    }
  );
  $("#sub_cat_filter").change(function (e) {
    table_2.draw();
  });
  table_2.draw();

});
</script>
<style>
  select.form-control{
    display: inline;
    width: 100%;
    margin-top: 10px;
/*     margin-left: 25px; */
  }
  #filterTable_filter .sst
  {
    display: flex;
  }
</style>