<?php
session_start();
$user_id=$_SESSION['LOGIN_USERID'];
include("../../php_crud/my_class.php");
$obj = new my_class();
extract($_REQUEST);

$well_info_tbl = "HYDROLOGY.GWM_TBL@HYDRO10 WELL LEFT JOIN HYDROLOGY.UPAZILA_TBL UPZ ON WELL.UPAZILA_CODE=UPZ.UPZL_CODE";
$well_info_cols = "WELL.OLD_ID,UPZ.UPZL_NAME";
$well_info_cond = "WELL.WELL_ID='$new_well'";
$well_info = $obj->View_column_details_By_Cond($well_info_tbl,$well_info_cols,$well_info_cond);

echo '<input type="hidden" id="grph_sel_well_id" value="'.$new_well.'"/>';
echo '<input type="hidden" id="grph_sel_from_date" value="'.$grph_from_date.'"/>';
echo '<input type="hidden" id="grph_sel_to_date" value="'.$grph_to_date.'"/>';
echo '<input type="hidden" id="grph_sel_status" value="'.$grph_status.'"/>';
echo '<input type="hidden" id="grph_sel_old_well_id" value="'.$well_info['OLD_ID'].'"/>';
echo '<input type="hidden" id="grph_sel_upz_name" value="'.$well_info['UPZL_NAME'].'"/>';
?>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src='https://cdn.plot.ly/plotly-2.24.1.min.js'></script>

<canvas id="mdm_wl_chart" width="800" height="400"></canvas>
  
  
<script type="text/javascript">
show_wl_graph();

function show_wl_graph() {
	var new_well = $("#grph_sel_well_id").val();
	var grph_from_date = $("#grph_sel_from_date").val();
	var grph_to_date = $("#grph_sel_to_date").val();
	var grph_status = $("#grph_sel_status").val();
	var old_well_id = $("#grph_sel_old_well_id").val();
	var upz_name = $("#grph_sel_upz_name").val();

	var datastr = "new_well="+new_well+"&grph_from_date="+grph_from_date+ 
	"&grph_to_date="+grph_to_date+"&grph_status="+grph_status;
	//alert(datastr);
	//$('#cover-spin').show();
	$.ajax({
		type: "post",
		url: "module/mobiledatalog/show_graph.php",
		data: datastr,
		success: function (str) {
			if ($.trim(str)) {
				$('#cover-spin').hide();

				var mwl_data = $.parseJSON(str);
				
				createChart(mwl_data, grph_from_date, grph_to_date,new_well,old_well_id,upz_name);

				function createChart(data, from_date, to_date,new_well,old_well_id,upz_name) {
					
					var startDate = new Date(from_date);
					var endDate = new Date(to_date);

					var chartData = {
						labels: [], // To be filled with date labels
						datasets: [
							{
								label: "Water Table (m)",
								data: data, // Use null for missing data
								fill: false,
								backgroundColor: 'rgba(26, 83, 255, 1)',
								borderColor: 'rgba(26, 83, 255, 1)',
								spanGaps: true, // Show gaps in the graph
							}
						]
					};

					var ctx="";
					ctx = document.getElementById("mdm_wl_chart").getContext("2d");
					lineChart = new Chart(ctx, {
						type: "line",
						data: chartData,
						options: {
							scales: {
								x: {
									display: true,
									title: {
									  display: true,
									  text: 'Date'
									},
								},
								y: {
									display: true,
									title: {
									  display: true,
									  text: 'Water Table (m)'
									},
								},
							},
							plugins: {
								title: {
									display: true,
									text: 'Well ID: '+new_well+' ('+old_well_id+'), Upazila: '+upz_name,
									font: {
										size: 16
									},
								},
							},
						},
					});
				}
			}
		}
	});
}
</script>