<div class="col-sm-10">

    <div class="row ">
        
        <script>
            function ShowSearchPanel(GivenText) {

                var startDate = document.getElementById('startDate');
                var endDate = document.getElementById('endDate');
                var Month = document.getElementById('Month');
                var Year = document.getElementById('Year');
                var searchItem = document.getElementById('searchItem');
                if (GivenText == 1)
                {
                    searchItem.setAttribute('class', 'col-sm-offset-4 col-sm-2');
                    startDate.setAttribute('style', 'display:block');
                    endDate.setAttribute('style', 'display:none');
                    Year.setAttribute('style', 'display:none');
                    Month.setAttribute('style', 'display:none');
                }
                if (GivenText == 2)
                {
                    searchItem.setAttribute('class', 'col-sm-offset-2 col-sm-2');
                    startDate.setAttribute('style', 'display:block');
                    endDate.setAttribute('style', 'display:block');
                    Month.setAttribute('style', 'display:none');
                    Year.setAttribute('style', 'display:none');
                }
                if (GivenText == 3)
                {
                    searchItem.setAttribute('class', 'col-sm-offset-2 col-sm-2');
                    startDate.setAttribute('style', 'display:none');
                    endDate.setAttribute('style', 'display:none');
                    Month.setAttribute('style', 'display:block');
                    Year.setAttribute('style', 'display:block');
                }
                if (GivenText == 4)
                {
                    searchItem.setAttribute('class', 'col-sm-offset-4 col-sm-2');
                    startDate.setAttribute('style', 'display:none');
                    endDate.setAttribute('style', 'display:none');
                    Month.setAttribute('style', 'display:none');
                    Year.setAttribute('style', 'display:block');
                }
                if (GivenText == 5)
                {
                    searchItem.setAttribute('class', 'col-sm-offset-5 col-sm-2');
                    startDate.setAttribute('style', 'display:none');
                    endDate.setAttribute('style', 'display:none');
                    Month.setAttribute('style', 'display:none');
                    Year.setAttribute('style', 'display:none');
                }
                if (GivenText == '')
                {
                    searchItem.setAttribute('class', 'col-sm-offset-5 col-sm-2');
                    startDate.setAttribute('style', 'display:none');
                    endDate.setAttribute('style', 'display:none');
                    Month.setAttribute('style', 'display:none');
                    Year.setAttribute('style', 'display:none');
                }
            }
        </script>

        <div class="col-sm-12 padding-zero " style="margin-top:5px ">
            <div class="col-sm-12 ">

                <div class="col-sm-2 col-sm-offset-5 form-group center" id="searchItem">
                    <select class="form-control" id="header_person_role" onchange="ShowSearchPanel(this.value)">
                        <option value=""> All</option>
                        <option value="1">  Date </option>
                        <option value="2"> Date Between</option>
                        <option value="3"> Month</option>
                        <option value="4"> Year</option>
                        <option value="5"> Total</option>
                    </select>
                </div>
                <div class="form-group col-sm-3 center" style="display: none" id="startDate">

                    <div class='input-group' id='datetimepicker2'>
                        <input type='text' class="form-control" placeholder=" Start Date"/>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar" title="Start Date"></span><br>
                        </span>
                    </div>
                    <script type="text/javascript">
                        $(function () {
                            $('#datetimepicker2').datetimepicker({
                                viewMode: 'years',
                                format: 'DD/MM/YYYY'

                            });
                        });
                    </script>

                </div>
                <div class="form-group col-sm-3" style="display: none" id="endDate">

                    <div class='input-group' id='datetimepicker5'>
                        <input type='text' class="form-control" placeholder=" End Date"/>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar" title="End Date"></span><br>
                        </span>
                    </div>
                    <script type="text/javascript">
                        $(function () {
                            $('#datetimepicker5').datetimepicker({
                                viewMode: 'years',
                                format: 'DD/MM/YYYY'

                            });
                        });
                    </script>

                </div>

                <div class="col-sm-3 form-group " style="display: none" id="Month">
                    <select class="form-control" id="header_person_role" onchange="getHeaderRoleValue(this.value)">
                        <option value=""> Select Month </option>
                        <option value="1">  January </option>
                        <option value="2"> February</option>
                        <option value="3"> March</option>
                        <option value="4"> April</option>
                        <option value="5"> May</option>
                        <option value="6"> Jun</option>
                        <option value="7"> July</option>
                        <option value="8"> August</option>
                        <option value="9"> September</option>
                        <option value="10"> October</option>
                        <option value="11"> November</option>
                        <option value="12"> December</option>
                    </select>
                </div>
                <div class="col-sm-3 form-group " style="display: none" id="Year">
                    <select class="form-control" id="header_person_role" onchange="getHeaderRoleValue(this.value)">
                        <option value=""> Select Year </option>
                        <option value="1">  2016 </option>
                        <option value="2"> 2015</option>
                        <option value="3"> 2014</option>
                        <option value="4"> 2013</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-sm-12 ">

            <div class="col-sm-12" ><br>  <hr></div>
            <div class="col-sm-12" >

                <div class="col-sm-12 gray_ttc" style="border-bottom: 2px solid #8CC73F;padding-top: 10px;padding-bottom: 10px;font-weight: bold">


                    <div class="col-sm-3 padding-zero">Earning from course</div>
                    <div class="col-sm-3 padding-zero">Earning from video course</div>
                    <div class="col-sm-2 padding-zero">Earning from Feature</div>
                    <div class="col-sm-2 padding-zero">Total Expense</div>
                    <div class="col-sm-2 padding-zero">Total Revenue</div>
                </div>
                <div class="col-sm-12"><br></div> 
                <div class="col-sm-12 gray_ttc " style="padding-top: 10px;padding-bottom: 10px;">
                    <div class="col-sm-3 padding-zero"><a href="<?php echo base_url() ?>super-admin-total-earn-by-course">50000</a></div>
                    <div class="col-sm-3 padding-zero"><a href="<?php echo base_url() ?>super-admin-total-earn-by-video-course">200000</a></div>
                    <div class="col-sm-2 padding-zero"><a href="<?php echo base_url() ?>super-admin-total-earn-by-feature">1000000</a></div>
                    <div class="col-sm-2 padding-zero"><a href="<?php echo base_url() ?>super_admin-expense-account-management">350000</a></div>
                    <div class="col-sm-2 padding-zero">900000</div>
                </div>


                <nav class="course-pagination">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true" title="First Page">&laquo;&laquo;</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true" title="Previous Page">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true" title="Next Page">&raquo;</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true" title="Last Page">&raquo;&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>


            </div>


        </div>



    </div>


</div>