 <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">Extend</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="#">Examination</a></li>
              <li class="breadcrumb-item active">Extend</li>

            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <?php echo form_open(base_url().'admin/examination/add_new_assign_exam');?>
    <section class="content">
      <div class="container-fluid">

        <div class="row">
          <div class="col-sm-12">
            <div class="card card-default">
              <div class="card-header">
                <h3 class="card-title">Add Extend Exam</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <div class="row">

                  <div class="col-md-7">
                    <div class="form-group">
                       <label for="inputEmail" class="col-sm-12 col-form-label">Select Programm <span class="required">*</span></label>
                       <div class="col-sm-12">
                          <select class="form-control" onchange="get_course_by_programm_id(this.value)" name="fee_student_id" placeholder="Enter Notice Content" required="required" >
                            <option value="">Select</option>
                            <?php foreach ($all_programm as $programm): ?>
                              <option value="<?php echo $programm->cp_id; ?>"><?php echo $programm->cp_name; ?></option>
                            <?php endforeach ?>
                          </select>
                       </div>
                    </div>
                  </div>

                  <div class="col-md-5">
                    <div class="form-group">
                       <label for="inputEmail" class="col-sm-12 col-form-label">Select Course <span class="required">*</span></label>
                       <div class="col-sm-12">
                          <select class="form-control" onchange="generate_table(this.value)" name="st_course_course_id" placeholder="Enter Notice Content" required="required" id="fee_student_course">
                            <option value="">Select</option>
                          </select>
                       </div>
                    </div>
                  </div>

                  <div class="col-md-3">
                    <div class="form-group">
                       <label for="inputEmail" class="col-sm-12 col-form-label">New Exam Date <span class="required">*</span></label>
                       <div class="col-sm-12">
                          <input class="form-control"  name="st_student_exam_date" placeholder="Enter Course Price" required="required" type="date">
                       </div>
                    </div>
                  </div>

                  <div class="col-md-2">
                    <div class="form-group">
                       <label for="inputEmail" class="col-sm-12 col-form-label">New Exam Time <span class="required">*</span></label>
                       <div class="col-sm-12">
                          <input class="form-control"  name="st_student_exam_time" placeholder="Enter Course Price" required="required" type="time">
                       </div>
                    </div>
                  </div>
                  
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="content">
      <div class="container-fluid">
        <div class="card card-default">
            <!-- /.card-header -->
            <div class="card-body">
              <table id="example2" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>Reg No. </th>
                  <th>Name</th>
                  <th>Photo</th>
                  <th></th>
                </tr>
                </thead>
                <tbody id="data">
                  
                </tbody>
              </table>
              <div class="col-md-12">
                <div class="form-group">
                   <button name="form1" style="float: right" type="submit" class="btn btn-warning">Save</button>
                </div>
              </div>
            </div>
          </div>
      </div><!--/. container-fluid -->
    </section>
    <?php echo form_close();?>
    <!-- /.content -->
  </div>
<script type="text/javascript">
$(function () {
    $("#example2").DataTable({
      "responsive": true, "lengthChange": true, "autoWidth": false,  "searching": true, info: false, paging: false,
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
  });
function generate_table() {

  var course = $('#fee_student_course').val();
    $.ajax({
      beforeSend: function() {
         $(".loader").show();
      },
      type: "POST",
      dataType:"JSON",
      async: true,
      data: {course:course},
      url: '<?php echo base_url(); ?>admin/students/extend_assign_exam_generate_table',
      success: function (data) 
      {
        console.log(data);
          $('#data').html(data);
          $(".loader").hide();
      },
      error: function (e) {
        console.log(e.responseText)
        $(".loader").hide();
      }
    });
  }
function get_course_by_programm_id(e) 
{
  $.ajax({
    beforeSend: function() {
       $(".loader").show();
    },
    type: "GET",
    dataType:"JSON",
    async: true,
    url: '<?php echo base_url(); ?>admin/course/get_course_by_programm_id_for_exam_extend/'+e,
    success: function (data) 
    {
        $('#fee_student_course').html(data.option);
        $(".loader").hide();
    },
    error: function (e) {
      console.log(e.responseText)
      $(".loader").hide();
    }
  });
}

</script>
<style type="text/css">
.check-box
{

}
</style>