<div class="container-fluid" style="background-color: #f2f2f2;padding: 10px;">
	<!-- <h4 class="center bold mrgb15" style="color:#5C5C61;">DASHBOARD</h4> -->

	<div class="row">
		<div class='col-md-12'>
		  <div class='form-group'>
		     <input type='text' id='start_date' value='<?php echo $fin_start_date; ?>' class='datepicker form-control input-sm '>
		  </div>
		  <div class='form-group'>
		     <input type='text' id='end_date' value='<?php echo $fin_end_date; ?>' class='datepicker form-control input-sm '>
		  </div>
		  <div class='form-group'>
		     <button id='search' class='btn btn-info btn-sm' onclick='dashboard_search()'>search</button>
		 	</div>
		</div>
	</div>
		<div class="row">
			<div class="col-md-6">
				<div class="dash_layer">
					<h4>Total Salary Department Wise</h4>
					<div id="dept_salary_info" style="min-width: 268px; height: 307px; margin: 0 auto;"></div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="dash_layer">
					<h4>Total Salary Month Wise</h4>
					<div id="total_salary_month_chart" style="min-width: 268px; height: 307px; margin: 0 auto;"></div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="dash_layer" style="padding: 1px 9px 0px 9px;overflow-y:auto;height: 366px;">
					<h4 style="margin-left:9px;">Top 10 Leave Takers</h4>
					<div id='table_view_lop_info'></div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="dash_layer">
					<h4>Employees Count Designation Wise</h4>
					<div id="designation_employees_count" style="min-width: 268px; height: 307px; margin:auto;"></div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="dash_layer">
					<h4>Employees Gender Distribution</h4>
					<div id="gen_distribution_chart" style="min-width: 268px; height: 307px; margin: 0 auto;"></div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="dash_layer">
					<h4>Employees Count Charts</h4>
					<div id="employees_count_chart" style="min-width: 268px; height: 307px; margin: 0 auto;"></div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="dash_layer_bar">
					<h4>Designation Wise Net Pay</h4>
					<div id="design_wise_sal" style="min-width: 268px; height: 307px; margin: 0 auto;"></div>
				</div>
			</div>
		</div>
	</div>
	<script src="./dist/highcharts/highcharts.js"></script>
<script src="./dist/highcharts/exporting.js"></script>
<script src="./dist/highcharts/dashboard.js"></script>
<!-- <script type="text/javascript" src="dist/highcharts/highcharts-3d.js"></script>
<script type="text/javascript" src="dist/highcharts/data.js"></script>
<script type="text/javascript" src="dist/highcharts/drilldown.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
	$(function () {
		 $(".datepicker").datetimepicker({
		  format: 'DD-MM-YYYY', 
		});
	});
	dashboard_search();
});

function dashboard_search(){
	var start_date = $('#start_date').val();
	var end_date   = $('#end_date').val();
	get_salary_info(start_date,end_date);
	//get_employee_age_distribution(start_date,end_date);
	//get_lop_table_info(start_date,end_date);
	get_designation_employee_count_info(start_date,end_date);
	design_wise_sal(start_date,end_date);
	employees_count_chart(start_date,end_date);
	total_salary_month_chart(start_date,end_date);
	gen_distribution_chart(start_date,end_date);
}

</script>