Chart.defaults.font.family = "'Poppins', sans-serif";
Chart.defaults.font.style = "normal";
Chart.defaults.font.size = 12
Chart.defaults.color = "#F8F9FA"; //"#212529"; 
Chart.defaults.plugins.title.color = "#F8F9FA"; //"#212529";
Chart.defaults.plugins.legend.labels.color = "#F8F9FA"; //"#212529";
Chart.defaults.scales.linear.ticks.color = "#F8F9FA"; //"#212529";
Chart.defaults.borderColor = "#4A4A4B"; //"#212529";

document.addEventListener( "DOMContentLoaded", function() {
	const table = document.getElementById( "GraphTable" );
	if ( !table ) {
		return;
	}
	const rows = table.getElementsByTagName( "tr" );
	const data = [];

	for (let i = 1; i < rows.length; i++) {
		const cells = rows[i].getElementsByTagName( "td" );
		const BatchName = cells[0].textContent;
		const AgeInWeeks =  parseFloat(cells[1]?.textContent) || 0;
		const ProductionDate = cells[2].textContent;
		const SHD_PER = parseFloat(cells[3]?.textContent) || 0;
		const SHH = parseFloat(cells[4]?.textContent) || 0;
		const AHD_PER = parseFloat(cells[7]?.textContent) || 0;
		const BE = parseFloat(cells[8]?.textContent) || 0;
		const BE_PER = parseFloat(cells[9]?.textContent) || 0;
		const AHH = parseFloat(cells[10]?.textContent) || 0;
		const GRM_BIRD = parseFloat(cells[12]?.textContent) || 0;
		const LIV_PER = parseFloat(cells[16]?.textContent) || 0;

		data.push( {
			BatchName: BatchName,
			AgeInWeeks: AgeInWeeks,
			ProductionDate: ProductionDate,
			SHD_PER: SHD_PER,
			SHH: SHH,
			AHD_PER: AHD_PER,
			BE: BE,
			BE_PER: BE_PER,
			AHH: AHH,
			GRM_BIRD: GRM_BIRD,
			LIV_PER: LIV_PER
		} );
	}
	
	const ctx1 = document.getElementById( "myChart1" ).getContext( "2d" );
	const myChart1 = new Chart( ctx1, {
		type: "line",
		data: {
			labels: data.map(item => item.AgeInWeeks),
			datasets: [
				{
					label: "S.H.H",
					data: data.map(item => item.SHH),
					type: "line",
					fill: "origin",
					backgroundColor: "rgba(255, 165, 0, 0.1)",
					borderColor: "rgba(255, 165, 0, 1)",
					borderWidth: 2,
					tension: 0.4,
					pointRadius: 0
				},
				{
					label: "A.H.H",
					data: data.map(item => item.AHH),
					type: "line",
					fill: true,
					borderColor: "rgba(25, 135, 84, 1)",
					borderWidth: 2,
					pointStyle: "rectRot",
					//pointRadius: 5,
					pointBackgroundColor: "rgba(25, 135, 84, 0.3)",
					pointBorderColor: "rgba(25, 135, 84, 1)",
					pointBorderWidth: 2,
					tension: 0.4,
					pointRadius: 0
				}
			]
		},
		options: {
			responsive: false,
			maintainAspectRatio: false,
			plugins: {
				title: {
					display: true,
					text: "HEN HOUSED",
					font: {
						family: "'Poppins', sans-serif",
						size: 18
					}
				},
				tooltip: {
					mode: "index",
				},
				legend: {
					display: false
				},
			},
			scales: {
				x: {
					title: {
						display: true,
						text: "AgeInWeeks"
					}
				},
				y: {
					beginAtZero: true,
					title: {
						display: true,
						text: "STANDARD HEN HOUSED",
					},
				}
			},
			layout: {
				padding: {
					top: 20,
					right: 30,
					bottom: 20,
					left: 0
				}
			}
		}
	} );
	
	var ctx2 = document.getElementById( "myChart2" ).getContext( "2d" );
	var myChart2 = new Chart( ctx2, {
		type: "line",
		data: {
			labels: data.map( item => item.AgeInWeeks ),
			datasets: [
				{
				label: "",
				data: data.map( item => item.LIV_PER ),
				type: "line",
				backgroundColor: "rgba(255, 165, 0, 0.3)",
				borderColor: "rgba(255, 165, 0, 1)",
				borderWidth: 2,
				tension: 0.4,
				pointRadius: 0
				}
			]
		},
		options: {
			responsive: false,
			maintainAspectRatio: false,
			plugins: {
				title: {
					display: true,
					text: "LIVABILITY %",
					font: {
						family: "'Poppins', sans-serif",
						size: 18
					}
				},
				tooltip: {
					mode: "index",
				},
				legend: {
					display: false,
				},
			},
			scales: {
				x: {
					title: {
						display: true,
						text: "AgeInWeeks"
					}
				},
				y: {
					max: 100,
					ticks: {
						maxTicksLimit: 6,
						callback: function( value ) {
							return parseFloat( value.toFixed(2) ) + "%";
						}
					}
				}
			},
			layout: {
				padding: {
					top: 20,
					right: 30,
					bottom: 20,
					left: 20
				}
			}
		}
	} );
	
	const ctx3 = document.getElementById( "myChart3" ).getContext( "2d" );
	const myChart3 = new Chart( ctx3, {
		type: "line",
		data: {
			labels: data.map(item => item.AgeInWeeks),
			datasets: [
				{
					label: "A.H.D.%",
					data: data.map( item => item.AHD_PER ),
					type: "line",
					fill: "origin",
					backgroundColor: "rgba(255, 165, 0, 0.1)",
					borderColor: "rgba(255, 165, 0, 1)",
					borderWidth: 2,
					tension: 0.4,
					pointRadius: 0
				},
				{
					label: "S.H.D.%",
					data: data.map(item => item.SHD_PER),
					type: "line",
					fill: true,
					borderColor: "rgba(38, 68, 120, 1)",
					borderWidth: 2,
					pointStyle: "rectRot",
					//pointRadius: 5,
					pointBackgroundColor: "rgba(38, 68, 120, 0.3)",
					pointBorderColor: "rgba(38, 68, 120, 1)",
					pointBorderWidth: 2,
					tension: 0.4,
					pointRadius: 0
				}
			]
		},
		options: {
			responsive: false,
			maintainAspectRatio: false,
			plugins: {
				title: {
					display: true,
					text: "HEN DAY",
					font: {
						family: "'Poppins', sans-serif",
						size: 18
					}
				},
				tooltip: {
					mode: "index",
				},
				legend: {
					display: false,
				},
			},
			scales: {
				x: {
					title: {
						display: true,
						text: "AgeInWeeks"
					}
				},
				y: {
					beginAtZero: true,
					max: 100,
					ticks: {
						callback: function( value ) {
							return parseFloat( value ) + "%";
						}
					}
				}
			},
			layout: {
				padding: {
					top: 20,
					right: 30,
					bottom: 20,
					left: 20
				}
			}
		}
	} );
	
	const ctx4 = document.getElementById( "myChart4" ).getContext( "2d" );
	const myChart4 = new Chart( ctx4, {
		type: "line",
		data: {
			labels: data.map(item => item.AgeInWeeks),
			datasets: [
				{
					label: "GRM/Bird",
					data: data.map( item => item.GRM_BIRD ),
					type: "line",
					fill: false, //"origin",
					backgroundColor: "rgba(255, 255, 255, 0.4)",
					borderColor: "rgba(255, 255, 255, 1)",
					borderWidth: 2,
					tension: 0.4,
					pointRadius: 0
				},
				{
					label: "B.E.%",
					data: data.map(item => item.BE_PER),
					type: "line",
					fill: true,
					borderColor: "rgba(146, 208, 80, 1)",
					borderWidth: 2,
					pointStyle: "rectRot",
					//pointRadius: 5,
					pointBackgroundColor: "rgba(146, 208, 80, 0.4)",
					pointBorderColor: "rgba(146, 208, 80, 1)",
					pointBorderWidth: 2,
					tension: 0.4,
					pointRadius: 0
				}
			]
		},
		options: {
			responsive: false,
			maintainAspectRatio: false,
			plugins: {
				title: {
					display: true,
					text: "BAD EGGS",
					font: {
						family: "'Poppins', sans-serif",
						size: 18
					}
				},
				tooltip: {
					mode: "index",
				},
				legend: {
					display: false,
				},
			},
			scales: {
				x: {
					title: {
						display: true,
						text: "AgeInWeeks"
					}
				},
				y: {
					beginAtZero: true,
					ticks: {
						callback: function( value ) {
							return parseFloat( value ) + "%";
						}
					}
				}
			},
			layout: {
				padding: {
					top: 20,
					right: 30,
					bottom: 20,
					left: 20
				}
			}
		}
	} );
	
	// START TABLE 2
	const table2 = document.getElementById( "GraphTable2" );
	if ( !table2 ) {
		return;
	}
	const rows2 = table2.getElementsByTagName( "tr" );
	const data2 = [];

	for (let i = 1; i < rows2.length; i++) {
		const cells2 = rows2[i].getElementsByTagName( "td" );
		const BatchName2 = cells2[0].textContent;
		const AgeInWeeks2 =  parseFloat(cells2[1]?.textContent) || 0;
		const ProductionDate2 = cells2[2].textContent;
		const FeedsKG2 = parseFloat(cells2[3]?.textContent) || 0;
		const GRM_BIRD2 = parseFloat(cells2[4]?.textContent) || 0;

		data2.push( {
			BatchName2: BatchName2,
			AgeInWeeks2: AgeInWeeks2,
			ProductionDate2: ProductionDate2,
			FeedsKG2: FeedsKG2,
			GRM_BIRD2: GRM_BIRD2
		} );
	}
	
	// Calculate the daily means
	const totalGRM_BIRD = data2.reduce( ( sum, entry ) => sum + entry.GRM_BIRD2, 0 );
	const meanGRM_BIRD = totalGRM_BIRD / data2.length;
	const dailyMeans = new Array( data2.length ).fill( meanGRM_BIRD );

	// Extract the production dates and daily values
	const productionDates = data2.map( entry => entry.ProductionDate2 );
	const dailyValues = data2.map( entry => entry.GRM_BIRD2 );

	// Prepare the data for Chart.js
	const chartData = {
		labels: productionDates,
		datasets: [
			{
				label: "Daily",
				data: dailyValues,
				borderColor: "rgba(75, 192, 192, 1)",
				backgroundColor: "rgba(75, 192, 192, 0.2)",
				borderWidth: 2,
				fill: false,
				tension: 0.4,
				pointRadius: 0
			},
			{
				label: "Mean",
				data: dailyMeans,
				borderColor: "rgba(255, 99, 132, 1)",
				backgroundColor: "rgba(255, 99, 132, 0.2)",
				borderWidth: 2,
				fill: false,
				tension: 0.4,
				pointRadius: 0
			}
		]
	};

	// Chart.js configuration
	const config = {
		type: "line", // or "bar"
		data: chartData,
		options: {
			responsive: false,
			maintainAspectRatio: false,
			plugins: {
				title: {
					display: true,
					text: "GRAM/ BIRD",
					font: {
						family: "'Poppins', sans-serif",
						size: 18
					}
				},
				tooltip: {
					mode: "index",
				},
				legend: {
					display: false,
				},
			},
			scales: {
				y: {
					beginAtZero: true,
					ticks: {
						autoSkip: false
					}
				}
			},
			layout: {
				padding: {
					top: 20,
					right: 30,
					bottom: 20,
					left: 20
				}
			}
		}
	};
	
	// Render the chart
	const myChart5 = new Chart(
		document.getElementById( "myChart5" ),
		config
	);
	// END TABLE 2
	
	// START TABLE 3
	const table3 = document.getElementById( "GraphTable3" );
	if ( !table3 ) {
		return;
	}
	const rows3 = table3.getElementsByTagName( "tr" );
	const data3 = [];
	let totalHeatIndex = 0;

	for (let i = 1; i < rows3.length; i++) {
		const cells3 = rows3[i].getElementsByTagName( "td" );
		const ProductionDate3 = cells3[0].textContent;
		const Temperature = cells3[1].textContent;
		const Humidity = parseFloat(cells3[2]?.textContent) || 0;
		const HeatIndex = parseFloat(cells3[3]?.textContent) || 0;
		totalHeatIndex += HeatIndex;

		data3.push( {
			ProductionDate3: ProductionDate3,
			Temperature: Temperature,
			Humidity: Humidity,
			HeatIndex: HeatIndex
		} );
	}
	
	const meanHeatIndex = totalHeatIndex / data3.length;

	const productionDates3 = data3.map(entry => entry.ProductionDate3);
	const dailyHeatIndices = data3.map(entry => entry.HeatIndex);
	const meanHeatIndices = Array(data3.length).fill(meanHeatIndex);
	
	const ctx6 = document.getElementById( "myChart6" ).getContext( "2d" );
	const heatIndexChart = new Chart(ctx6, {
		type: "line", // You can also use "bar" or other chart types
		data: {
			labels: productionDates3,
			datasets: [
				{
					label: "Daily",
					data: dailyHeatIndices,
					borderColor: "rgba(75, 192, 192, 1)",
					backgroundColor: "rgba(75, 192, 192, 1)",
					borderWidth: 2,
					fill: false,
					tension: 0.4,
					pointRadius: 0
				},
				{
					label: "Mean",
					data: meanHeatIndices,
					borderColor: "rgba(255, 99, 132, 1)",
					backgroundColor: "rgba(255, 99, 132, 0.2)",
					borderWidth: 2,
					fill: false,
					tension: 0.4,
					pointRadius: 0
				}
			]
		},
		options: {
			responsive: false,
			maintainAspectRatio: false,
			plugins: {
				title: {
					display: true,
					text: "HEAT INDEX",
					font: {
						family: "'Poppins', sans-serif",
						size: 18
					}
				},
				tooltip: {
					mode: "index",
				},
				legend: {
					display: false,
				},
			},
			scales: {
				y: {
					beginAtZero: true,
					ticks: {
						autoSkip: false,
						callback: function( value ) {
							return parseFloat( value ) + "°C";
						}
					}
				}
			},
			layout: {
				padding: {
					top: 20,
					right: 30,
					bottom: 20,
					left: 20
				}
			}
		}
	} );
	// END TABLE 2
	
	const chartIds = [ "myChart1", "myChart2", "myChart3", "myChart4", "myChart5", "myChart6" ];

	chartIds.forEach( id => {
		const chartCanvas = document.getElementById( id );

		if ( chartCanvas ) {
			chartCanvas.addEventListener( "mouseover", function() {
				const chartInstance = Chart.getChart( id );
				chartInstance.data.datasets.forEach( dataset => {
					dataset.pointRadius = 4;
				} );
				chartInstance.update();
			} );

			chartCanvas.addEventListener( "mouseout", function() {
				const chartInstance = Chart.getChart( id );
				chartInstance.data.datasets.forEach( dataset => {
					dataset.pointRadius = 0;
				} );
				chartInstance.update();
			} );

			chartCanvas.setAttribute( "tabindex", 0 );
		}
	} );
} );