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


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

                <div class="course-detail-tab" style="margin-top: 10px">
                    <h3>Expense</h3>

                    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                        <li class="active"><a href="#A_course" data-toggle="tab">Add Expense Type</a></li>
                        <li class=""><a href="#view_expence_type" data-toggle="tab">View Expense Type</a></li>
                        <li class=""><a href="#add_expence" data-toggle="tab">Add Expense</a></li> 
                        <li class=""><a href="#ViewExpense" data-toggle="tab">View Expense</a></li> 
                        <li class=""><a href="#TotalExpense" data-toggle="tab">Total Expense</a></li> 

                    </ul>
                    <div id="my-tab-content" class="tab-content ">


                        <!-- course tab -->
                        <div class="tab-pane 

                             <?php
                             if ($active_payment) {
                                 echo ' ';
                             } else {
                                 echo 'active';
                             }
                             ?>

                             " id="A_course">
                            <div class="tab-content panel-body ">

                                <div class="col-sm-12 gray">
                                    <div class="col-sm-12"><br></div>
                                    <form action="#" method="post">
                                        <div class="form-group col-sm-8 col-sm-offset-1">
                                            <input  type="text" id="ExpenseType" name="ExpenseType"  class="form-control" placeholder="Please type expense type name">
                                        </div>

                                        <div class="form-group col-sm-8 col-sm-offset-1">

                                            <div class="input-group " id="screen1280" >
                                                <label>Description </label>
                                                <textarea   class="form-control  resoulation1280 " rows="4"   ></textarea>
                                            </div>

                                            <div class="input-group" id="screen1024" >
                                                <label>Description </label>
                                                <textarea   class="form-control  resoulation1024 " rows="4"   ></textarea>
                                            </div>
                                            <div class="input-group" id="screenMobile" >
                                                <label>Description </label>
                                                <textarea   class="form-control  resoulationMobile " rows="4"   ></textarea>
                                            </div>

                                            <div class="input-group " id="screenMobile_max499" >
                                                <label>Description </label>
                                                <textarea   class="form-control  resoulationMobile_max499 " rows="4"   ></textarea>
                                            </div>

                                        </div>

                                        <div class="form-group col-sm-4 col-sm-offset-4">
                                            <input type="button" class="btn btn-success" value="Add Type">
                                        </div>
                                    </form>
                                </div>  

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

                            </div>   
                        </div>
                        <!-- /.person information tab -->

                        <!-- View Expence Type tab -->
                        <div class="tab-pane" id="view_expence_type">
                            <div class="tab-content panel-body">


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


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

                                        <div class="col-sm-4">Name</div>
                                        <div class="col-sm-6">Description</div>
                                        <div class="col-sm-2">Action</div>
                                    </div>
                                    <div class="col-sm-12"><br></div> 
                                    <div class="col-sm-12 gray text-left" >

                                        <div class="col-sm-4" style="padding: 10px ">Office Rent</div>
                                        <div class="col-sm-6" style="padding: 10px">The demo includes contents that allow your ..</div>

                                        <div class="col-sm-2" style="padding: 10px">
                                            <a href="#">
                                                <i class="fa fa-edit"></i>
                                            </a>&nbsp;&nbsp;

                                            <a href="">
                                                <i class="fa fa-trash-o"></i>
                                            </a>
                                        </div>

                                    </div>
                                    <div class="col-sm-12"><br></div> 
                                    <div class="col-sm-12 white text-left" >

                                        <div class="col-sm-4" style="padding: 10px ">Office Rent</div>
                                        <div class="col-sm-6" style="padding: 10px">The demo includes contents that allow your ..</div>

                                        <div class="col-sm-2" style="padding: 10px">
                                            <a href="#">
                                                <i class="fa fa-edit"></i>
                                            </a>&nbsp;&nbsp;

                                            <a href="">
                                                <i class="fa fa-trash-o"></i>
                                            </a>
                                        </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 class="col-sm-12"><br></div>
                            </div>   
                        </div>
                        <!-- / select expence type tab -->

                        <!-- select Course tab -->
                        <div class="tab-pane" id="add_expence">
                            <div class="tab-content panel-body">

                                <div class="col-sm-12 gray">
                                    <form  id="formID2" action="#" method="post" name="userForm" enctype="multipart/form-data" >
                                        <div class="col-sm-12"><br></div>
                                        <div class="form-group col-sm-10 col-sm-offset-1">
                                            <div class="form-group col-sm-5">
                                                <input  type="text" id="expenseName" name="expenseName"  class="form-control" placeholder="Please Type Expense Name">
                                            </div>
                                            <div class="form-group col-sm-5">

                                                <select class="form-control">
                                                    <option value=""> Select Expense Type</option>
                                                    <option value=""> Expense Type 1</option>
                                                    <option value="">  Expense Type 2</option>
                                                </select>

                                            </div>
                                        </div>

                                        <div class="form-group col-sm-10 col-sm-offset-1">
                                            <div class="form-group col-sm-10">
                                                <div class="input-group " id="screen1280" >
                                                    <label>Description </label>
                                                    <textarea   class="form-control  resoulation1280 " rows="4"   ></textarea>
                                                </div>

                                                <div class="input-group" id="screen1024" >
                                                    <label>Description </label>
                                                    <textarea   class="form-control  resoulation1024 " rows="4"   ></textarea>
                                                </div>
                                                <div class="input-group" id="screenMobile" >
                                                    <label>Description </label>
                                                    <textarea   class="form-control  resoulationMobile " rows="4"   ></textarea>
                                                </div>

                                                <div class="input-group " id="screenMobile_max499" >
                                                    <label>Description </label>
                                                    <textarea   class="form-control  resoulationMobile_max499 " rows="4"   ></textarea>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="form-group col-sm-10 col-sm-offset-1">
                                            <div class="form-group col-sm-5">
                                                <input type="number" id="amount" name="amount"  class="form-control" placeholder="Please type expense amount">
                                            </div>
                                            <div class="form-group col-sm-5">

                                                <div class='input-group' id='datetimepicker2'>
                                                    <input type='text' class="form-control" placeholder=" Due Payment Date"/>
                                                    <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-calendar" title="Due Payment Date"></span><br>
                                                    </span>
                                                </div>


                                                <script type="text/javascript">
                                                    $(function () {
                                                        $('#datetimepicker2').datetimepicker({
                                                            viewMode: 'years',
                                                            format: 'DD/MM/YYYY'

                                                        });
                                                    });
                                                </script>

                                            </div>
                                        </div>

                                        <div class="form-group col-sm-3 col-sm-offset-1 " >
                                            <input type="submit" id="submit" class="btn btn-success" value="Add Expense">                                   
                                        </div>
                                    </form>
                                </div>

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


                            </div>   
                        </div>
                        <!-- / select Course tab -->



                        <!-- View Expence tab -->
                        <div class="tab-pane" id="ViewExpense">
                            <div class="tab-content panel-body">


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


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

                                        <div class="col-sm-2">Name</div>
                                        <div class="col-sm-2">Type</div>
                                        <div class="col-sm-3">Description</div>
                                        <div class="col-sm-2">Amount</div>
                                        <div class="col-sm-2">Date</div>
                                        <div class="col-sm-1">Action</div>
                                    </div>
                                    <div class="col-sm-12"><br></div> 
                                    <div class="col-sm-12 gray text-left" >

                                        <div class="col-sm-2" style="padding: 10px ">Office Rent</div>
                                        <div class="col-sm-2" style="padding: 10px">Official</div>
                                        <div class="col-sm-3" style="padding: 10px">This is expense description</div>
                                        <div class="col-sm-2" style="padding: 10px">45000</div>
                                        <div class="col-sm-2" style="padding: 10px">01-02-2016</div>
                                        <div class="col-sm-1" style="padding: 10px">
                                            <a href="#">
                                                <i class="fa fa-edit"></i>
                                            </a>&nbsp;&nbsp;

                                            <a href="">
                                                <i class="fa fa-trash-o"></i>
                                            </a>
                                        </div>

                                    </div>
                                    <div class="col-sm-12"><br></div> 
                                    <div class="col-sm-12 white text-left" >

                                        <div class="col-sm-2" style="padding: 10px ">Office Rent</div>
                                        <div class="col-sm-2" style="padding: 10px">Official</div>
                                        <div class="col-sm-3" style="padding: 10px">This is expense description</div>
                                        <div class="col-sm-2" style="padding: 10px">45000</div>
                                        <div class="col-sm-2" style="padding: 10px">01-02-2016</div>
                                        <div class="col-sm-1" style="padding: 10px">
                                            <a href="#">
                                                <i class="fa fa-edit"></i>
                                            </a>&nbsp;&nbsp;

                                            <a href="">
                                                <i class="fa fa-trash-o"></i>
                                            </a>
                                        </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 class="col-sm-12"><br></div>
                            </div>   
                        </div>
                        <!-- / select expence tab -->


                        <!-- Total Expense -->
                        <div class="tab-pane" id="TotalExpense">
                            <div class="tab-content panel-body">

                                <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"><br></div>

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

                                    <div class="col-sm-12">
                                        <h3 style="margin-top: 0">Total Expense</h3><br>
                                    </div>
                                    <div class="col-sm-12">


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

                                            <div class="col-sm-3">Name</div>
                                            <div class="col-sm-2">Type</div>
                                            <div class="col-sm-3">Description</div>
                                            <div class="col-sm-2">Amount</div>
                                            <div class="col-sm-2">Date</div>
                                        </div>
                                        <div class="col-sm-12"><br></div> 
                                        <div class="col-sm-12 gray text-left" >

                                            <div class="col-sm-3" style="padding: 10px ">Office Rent</div>
                                            <div class="col-sm-2" style="padding: 10px">Official</div>
                                            <div class="col-sm-3" style="padding: 10px">This is expense description</div>
                                            <div class="col-sm-2" style="padding: 10px">45000</div>
                                            <div class="col-sm-2" style="padding: 10px">01-02-2016</div>

                                        </div>

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


                                        <div class="col-sm-12 white_ttc " style="padding: 10px;color: #fff">

                                            <div class="col-sm-8 " style="background-color: #32CD32;padding: 5px">
                                                Total
                                            </div>
                                            <div class="col-sm-4" style="background-color: #00FF00;padding: 5px">
                                                0
                                            </div>


                                        </div>
                                    </div>
                                </div>


                                <div class="col-sm-12"><br></div>
                            </div>   
                        </div>
                        <!-- / select Total Expense -->


                    </div>
                </div>

            </div>




        </div>



    </div>


</div>