<style>
    #loading_image{
        padding: 0px;
        height: 300px;
        position: absolute;
        z-index: 1;
        width: 100%;
        line-height: 300px;
    }
</style>
<div class="col-sm-10">
    <div class="row ">
        <div class="col-sm-12"><hr></div>
        <div style="padding: 0px;opacity: 1; display: none" id="loading_image">
            <img src="<?php echo base_url() ?>image/course-loader.gif" 
                 height="60" width="60" style="margin: 20% 45%;">
        </div>
        <div class="form-group col-sm-12">
            <div class="form-group col-sm-5">
                <div class="input-group date" id="datetimepicker1">
                    <input type="text" 
                           class="form-control text-input" 
                           name="start_date" id="start_date"
                           onblur="viewRegisteredStudentBYDate(this.value, end_date.value)"
                           aria-describedby="basic-addon1"
                           value=""
                           placeholder="Start Date" >
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
            <div class="form-group col-sm-5">
                <div class="input-group date" id="datetimepicker2">
                    <input type="text" 
                           class="form-control text-input" 
                           name="end_date" id="end_date"
                           onblur="viewRegisteredStudentBYDate(start_date.value, this.value)"
                           aria-describedby="basic-addon1"
                           value=""
                           placeholder="End Date" >
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>

            <script type="text/javascript">
                //for Date   #datetimepicker1 is ID for Date Input Field     
                $(function () {
                    $('#datetimepicker1').datetimepicker({
                        viewMode: 'years',
                        format: 'YYYY-MM-DD'
                    });
                    $('#datetimepicker2').datetimepicker({
                        viewMode: 'years',
                        format: 'YYYY-MM-DD'
                    });
                });
            </script>
            <div class="form-group col-sm-12 text-left" id="errorMessage"></div>
        </div>
        <div class="col-sm-12">
            <div class="col-sm-12  text-left  "style="margin-bottom: 5px;font-weight: bold; border-bottom: 2px solid #80c12c">
                <div class="col-sm-2">Roll Number</div>
                <div class="col-sm-3">Name</div>
                <div class="col-sm-3">Email</div>
                <div class="col-sm-2 text-center">Status</div>
                <div class="col-sm-2">Action</div>
            </div>
            <div id="view_register_student">
                <?php
                if ($course_register_student) {
                    foreach ($course_register_student as $student_value) {
                        ?>
                        <div>
                            <div class="col-sm-12 text-left " style="padding: 10px;background-color:#F2F9EA;border: 1px solid #ededed" >
                                <div class="col-sm-2"><?php echo $student_value->student_roll_number; ?></div>
                                <div class="col-sm-3">
                                    <a href="<?php echo base_url() . $student_value->url . '/profile'; ?>" target="_blank">
                                        <?php echo $student_value->person_first_name . ' ' . $student_value->person_last_name; ?>
                                    </a>
                                </div>

                                <div class="col-sm-3"><?php echo $student_value->person_email; ?></div>
                                <div class="col-sm-2 text-center">
                                    <?php
                                    if ($course_info->course_type == 1) {
                                        echo 'Paid';
                                    }
                                    if ($course_info->course_type == 2) {
                                        echo 'Free';
                                    }
                                    ?>
                                </div>
                                <div class="col-sm-2">
                                    <a href="javascript:void(0)"  data-toggle="modal" data-target="#removeStuddent<?php echo $student_value->student_roll_number; ?>" >  
                                        <i class="fa fa-trash-o" title="Remove"></i>
                                    </a>
                                    <div class="modal" style="" id="removeStuddent<?php echo $student_value->student_roll_number; ?>" tabindex="-1" role="dialog" aria-labelledby="changeRole" aria-hidden="true">
                                        <?php
                                        $status_message1 = 'Are you sure you want to Remove this Student?';
                                        $status_function_name1 = 'removeStudent(&quot;' . base_url('admin/remove-course-student') . '&quot;,&quot;' . $student_value->student_roll_number . '&quot;,&quot;1&quot;)';
                                        $this->cf->get_status_modal($status_function_name1, $status_message1);
                                        ?>
                                    </div>
                                </div>
                                <div class="col-sm-12"><br></div>
                            </div>
                            <div class="col-sm-12 form-group" id=""></div>
                        </div>        
                        <?php
                    }
                    echo $register_course_student_paginzation_link;
                    echo '</div>';
                } else {
                    echo '<span style="align:center">' . get_message('course_register_msg') . '</span>';
                }
                ?>
            </div>
            <input type="hidden" id="courseID" value="<?php echo $course_info->course_id ?>">
            <input type="hidden" id="courseUrl" value="<?php echo $course_info->url ?>">
            <input type="hidden" id="paginationUrl" value="<?php echo base_url('admin/register-course-student-pagination'); ?>">
            <input type="hidden" id="registerStudentUrl" value="<?php echo base_url('admin/view-register-course-student'); ?>">
        </div>
    </div>
    <script type="text/javascript" src="<?php echo base_url() ?>back_end_resource/course/course.js">
    </script>