<style>
.sidebar .sidebar-menu li.active > a, .treeview-menu > li:hover > a > .fa, .treeview-menu > li:hover > a > .icon {
    color: #f0abc1 !important;
    font-weight: bolder;
}
</style>
<aside class="right-side">
    <section class="content-header">
        <div class="title_bar">
            <h1 class="major_txt_color"><a href="<?php echo base_url() . $controller; ?>" class="list-btn"><i class="fa fa-list" title="Go to Listing"></i></a><?php echo $title; ?> - Add</h1>
            <div class="breadcrumb_container"><?php echo breadcrumb_links();?></div>
        </div>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <form action="<?php echo $form_action;?>" name="expenses_form" method="post" enctype="multipart/form-data">    
                    <input type="hidden" name="token" value="<?php echo $token; ?>" />    
                    <div class="box box-danger">
                        <div class="box-body">
                            <?php if( !empty( $success ) || !empty( $error ) ) : ?>
                                <div class="alert alert-<?php echo !empty( $success ) ? 'success' : 'danger'; ?> alert-dismissable">
                                    <i class="fa fa-thumbs-o-<?php echo !empty( $success ) ? 'up' : 'down'; ?>"></i>
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                    <h4><?php echo !empty( $success ) ? $success : $error; ?></h4>
                                </div>
                            <?php endif; ?>
                            
                            <ul class="error_container"></ul>
                            <div class="col-xs-12">
                                <div class="col-md-6">  
                                	<div class="row">
                                    	<div class="col-md-6">                                  
                                            <div class="form-group float-clear">
                                                <select name="exp_type" id="exp_type" class="form-control select2 req">
                                                    <option value="">-- Select Expense Type --</option>
                                                    <?php foreach($expense_types as $key => $types) {?>
                                                        <option value="<?php echo $types->id;?>"><?php echo $types->type_name;?></option>
                                                    <?php } ?>
                                                </select>
                                                 <input type="hidden" class="form-control" name="exp_type_name" id="exp_type_name" />
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            <div class="form-group float-clear">
                                                <input type="text" class="form-control" name="exp_for" placeholder="Expenses for" />
                                            </div>
                                        </div>
                                    </div>                                    
                                    
                                    <div class="form-group float-clear">
                                        <input type="text" class="form-control" name="sub_name" placeholder="Subject Name" style="min-width: 100%;"/>
                                    </div>
                                    
                                    <div class="form-group float-clear">
                                        <input type="text" class="form-control" name="name" placeholder="Name" style="min-width: 100%;"/>
                                    </div>
                                        
                                    <div class="row">
                                    	<div class="col-md-6">                                  
                                            <div class="form-group float-clear">
                                                <div class="input-group">
                                                    <input type="text" class="form-control date-picker req" name="exp_date" placeholder="Date"/>
                                                    <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            <div class="form-group float-clear">
                                               <div class="input-group">
                                                    <input type="text" class="form-control date-picker req" name="func_date" placeholder="Function Date"/>
                                                    <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                                               </div>
                                            </div>
                                        </div>
                                    </div> 
                                    
                                    <div class="form-group float-clear">
                                        <input type="text" class="form-control" name="event_name" placeholder="Event Name / Function Name" style="min-width: 100%;"/>
                                    </div>
                                    
                                    <div class="form-group float-clear">
                                        <textarea class="form-control" name="exp_desc" style="min-width: 100%;" placeholder="Description"></textarea>
                                    </div>  
                                    
                                    <div class="row">
                                    	<div class="col-md-6">                                  
                                            <div class="form-group float-clear">
                                                <input type="text" class="form-control" name="exp_amount" placeholder="Amount"/>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            &nbsp;
                                        </div>
                                    </div>                                   
                                </div>                                
                            </div>
                        </div>
                        
                        <div class="box-footer form-actions float-clear" style="min-width: 50%;">
                        	<input type="submit" name="submit" value="Submit" class="btn btn-primary" style="padding: 5px 50px;"/>
                            <input class="btn btn-primary reset" type="reset" value="Reset" style="padding: 5px 50px;"/>                            
                        </div>
                    </div><!-- /.box -->
                </form>
            </div><!-- /.col-xs-12 -->
        </div><!-- /.row -->
    </section><!-- /.content -->
</aside>
<script type="text/javascript" src="<?php echo BASE_URL;  ?>assets/js/temple_expenses.js"></script>
<script>
$(document).ready(function(e) {
    $('#exp_type').on('change', function(){
		$('#exp_type_name').val($('#exp_type option:selected').text());
	});
});
</script>