<?php $this->load->view("partial/header");?>
<div id="toolbar" style='padding:8px;'>
    <div class="form-inline" role="toolbar">
		<?php echo form_input(array('name' => 'daterangepicker', 'class' => 'form-control input-sm', 'id' => 'daterangepicker')); ?>
	</div>
</div>
<div id="table_holder">
    <div id="title_bar" class="btn-toolbar">
        <h1>Live chart</h1>
    </div>
	<div id='availability_chart' style='overflow:auto;'>
	</div>
</div>
<style>
.JStableOuter table {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-collapse: collapse;
  display: block;
  height: 450px;
  overflow: scroll;
  font-size: 11px !important;
}
.JStableOuter { max-width:1260px; margin:auto;}
.JStableOuter  thead {
  position: relative;
  overflow: visible;
}

.JStableOuter  thead th {
  background-color: #fff;
  vertical-align: top;
  position: relative;
}
.JStableOuter  thead th:nth-child(1) {
  position: relative;
  z-index: 99;
}
.JStableOuter  thead tr {/*first cell in the header*/
  position: relative;
}
.JStableOuter  tbody td {
  background-color: #fff;
}
.JStableOuter tbody tr td:nth-child(1) {
  position: relative;
}
.tableOuter {
    max-width: 800px;
    overflow: auto;
 }

	</style>
<script type="text/javascript">
    $(document).ready(function (){		
		<?php $this->load->view('partial/daterangepicker'); ?>
		$('#daterangepicker').data('daterangepicker').setStartDate("<?php echo date($this->config->item('dateformat'), mktime(0,0,0,date("m"),1,date("Y"))); ?>");
		$('#daterangepicker').data('daterangepicker').setEndDate("<?php echo date($this->config->item('dateformat'), mktime(0,0,0,date("m")+1,1,date("Y"))-1); ?>");
		var start_date = "<?php echo date('Y-m-d', mktime(0,0,0,date("m"),1,date("Y"))); ?>";
		var end_date   = "<?php echo date('Y-m-d', mktime(0,0,0,date("m")+1,1,date("Y"))-1); ?>";
		$("#daterangepicker").on('apply.daterangepicker', function (ev, picker) {
		  get_livechart(start_date,end_date);
		});
		$("#daterangepicker").on("change keyup paste", function(ev, picker){
			get_livechart(start_date,end_date);		 
		});
		get_livechart(start_date,end_date);
		
    });
	function get_livechart(start_date,end_date){
		var chart = "<div style='color:#d84f57;margin-bottom:8px;'><i class='fa fa-spinner fa-lg fa-spin'></i> Checking avilability please wait...</div>";
		$("#availability_chart").html(chart);
		$.ajax({
			type: "POST",
			url: '<?php echo site_url($controller_name . "/check_avilability"); ?>',
			data: {start_date:start_date,end_date:end_date},
			success: function(data){
				$("#availability_chart").html(data);
					$('.JStableOuter table').scroll(function(e) { 
					$('.JStableOuter thead').css("left", -$(".JStableOuter tbody").scrollLeft()); 
					$('.JStableOuter thead th:nth-child(1)').css("left", $(".JStableOuter table").scrollLeft() -0 ); 
					$('.JStableOuter tbody td:nth-child(1)').css("left", $(".JStableOuter table").scrollLeft()); 
					$('.JStableOuter thead').css("top", -$(".JStableOuter tbody").scrollTop());
					$('.JStableOuter thead tr th').css("top", $(".JStableOuter table").scrollTop());
				});
			},
		});
	}
</script>
<?php $this->load->view("partial/footer"); ?>