 <?php
 	require_once("../../public/connection.php");	
	require_once("../../public/functions.php");
	if ($connection->connect_error) {
		die("Connection failed: " . $connection->connect_error);
	}

	// Initialize pass and fail counters
	$pass_count = 0;
	$fail_count = 0;

	// Fetch student performance data
	$query = "SELECT students_sub_average FROM positions";
	$result = $connection->query($query);

	while ($row = $result->fetch_assoc()) {
		if ($row['students_sub_average'] >= 40) {
		    $pass_count++;
		} else {
		    $fail_count++;
		}
	}

	$connection->close();
?>
<div class='page-title'>
  <div>
    <h1><i class='fa fa-laptop'></i> Performance Chart</h1>
    <p>Students Performance Chart</p>
  </div>  
</div>

<div class='card'>
    <canvas id="performanceChart" width="400" height="200"></canvas>
</div>

<script>
    var ctx = document.getElementById('performanceChart').getContext('2d');
    var performanceChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Pass', 'Fail'],
            datasets: [{
                label: 'Number of Students',
                data: [<?php echo $pass_count; ?>, <?php echo $fail_count; ?>],
                backgroundColor: ['green', 'red'],
                borderColor: ['darkgreen', 'darkred'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
