<?php 
	$this->load->view("partial/header"); 
	$access_data    = $this->session->userdata('access_data');
	$page_name      = ucwords(str_replace("_"," ",$controller_name));
	$search_url     = site_url($controller_name ."/search");
	?>
	<div class='row title_content'>
		<h1 class = 'page_txt'><?php echo $page_name;?></h1>
	</div>
<div id="holder" class = "form-inline" style= "margin-top:20px;">
	<div class = "col-md-12" style= "margin-bottom:10px;">
		<div class= "form-group">			
			<?php
				echo form_label('Start Date', 'start_date', array('class' => 'required'));
				echo form_input(array( 'name' => 'start_date', 'id' => 'start_date', 'class' => 'form-control input-sm datepicker', 'placeholder' => 'Select Date'));
			?>
		</div>
		<div class= "form-group">			
			<?php
				echo form_label('End Date', 'end_date', array('class' => 'required'));
				echo form_input(array( 'name' => 'end_date', 'id' => 'end_date', 'class' => 'form-control input-sm datepicker', 'placeholder' => 'Select Date'));
			?>
		</div>
		<button id="searchbutton" class="btn btn-primary btn-sm"   style="margin-top:15px; border-radius: 10px ;border-top-width :1px;">Search</button>
	</div>
	<div>
		<div class='col-md-12' style='margin:10px;padding:10px;' id="over_time"></div>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function (){
	//DATE RANGER PICKER CODES(FROM DATE PERIOD CHOOSE CODE)
	$(function () {
		$(".datepicker").datetimepicker({
			format: 'DD-MM-YYYY'
		})
	});

	$('#start_date,#end_date').on('dp.hide',function(){
		var start_date        	= $('#start_date').val();
		var end_date          	= $('#end_date').val();
		var change_id         	= $(this).attr('id');
		var start_check_date  	= "";
		var end_check_date    	= "";
		if(start_date && end_date){
			start_check_date    = moment(start_date, 'DD-MM-YYYY').format('YYYY-MM-DD');
			end_check_date      = moment(end_date, 'DD-MM-YYYY').format('YYYY-MM-DD');
		}	
		if(change_id === "start_date"){
			if(end_date){
				if(end_check_date < start_check_date){
					toastr.error('Start Date should not be Greater than End Date?');
					$('#end_date').val('');
					return false;
				}
			}
		}else{
			if(start_date){
				if(end_check_date < start_check_date){
					toastr.error('Start Date should not be Greater than End Date?');
					$('#end_date').val('');
					return false;
				}
			}else{
				toastr.error('Start Date should not be Empty..?');
				return false;
			}
		}
		var start_month = moment(start_date, 'DD-MM-YYYY').format('YYYY-MM');
        var end_month 	= moment(end_date, 'DD-MM-YYYY').format('YYYY-MM');

	});

	// Move the click event handler for the search button outside of the date range change event handler
	$("#searchbutton").click(function(e) {
		var start_date            = $('#start_date').val();
		var end_date              = $('#end_date').val();
		var start_check_date      = moment(start_date, 'DD-MM-YYYY').format('YYYY-MM-DD');
		var end_check_date        = moment(end_date, 'DD-MM-YYYY').format('YYYY-MM-DD');
		if( !start_date || !end_date){
		toastr.error('Please Choose Date');
		return false;
		}
		if(end_check_date < start_check_date){
			toastr.error('Start Date Should not be Greater Than End Date?');
			$('#end_date').val('');
			return false;
		}
		var start_month = moment(start_date, 'DD-MM-YYYY').format('YYYY-MM');
        var end_month 	= moment(end_date, 'DD-MM-YYYY').format('YYYY-MM');

        if (start_month !== end_month) {
            toastr.error('From Date and To Date Should be Same Month.');
            $('#start_date').val();
            $('#end_date').val();
            return false;
        }
		$("#searchbutton").html("<i class='fa fa-spinner fa-spin'></i> Processing...");
		$('#searchbutton').attr('disabled','disabled');
		$.ajax({
			type: "POST",
			url: "<?php echo $search_url; ?>", 
			data: {start_date : start_date, end_date:end_date},
			success: function(data) {
				$('#searchbutton').attr('disabled',false);
				$("#searchbutton").html("Search");
				var rslt        = JSON.parse(data);
				if(rslt.success){
					toastr.success(rslt.message);
					 $("#over_time").html(rslt.table_content);
					 datatable_function('over_time_table',start_date,end_date);
				}else{
					toastr.error(rslt.message);
					$("#over_time").html(rslt.table_content);
					datatable_function('over_time_table',start_date,end_date);
				}
			},
		});
	});
});

function datatable_function(tbl_name,start_date,end_date){
	var message = 'This report is based on the Date of  ' +  start_date+ 'to' +end_date
	var table  	= $('#'+tbl_name).DataTable({	
		dom: 'Bfrltip',
		ordering: false,
		destroy: true,
		scrollX: true,
    	scrollY: 500,
		language:{
			lengthMenu:"<span style = 'margin-top:8px;margin-left:10px;'>Display</span> _MENU_<span style='margin-top:8px;'>Records</span>",
			searchPlaceholder: "Search records",
			search: "",
		},
		buttons: [{
			extend: 'collection',
			text: 'Export',
			buttons: [
				{extend:'copy',exportOptions:{modifier :{order:'index',page:'all',search:'none'},columns:':visible'},messageTop:message},
				{extend:'csv',exportOptions:{modifier:{order:'index',page:'all',search:'none'},columns:':visible'},messageTop:message},
				{extend:'excel',exportOptions:{modifier:{order :'index',page: 'all',search:'none'},columns:':visible'},messageTop:message},
			]
		}],		
	});	 
	$(".dataTables_filter input[type = 'search']").addClass('form-control');
}
</script>
<?php $this->load->view("partial/footer"); ?>