<?php
    include("config.php");
    session_start();
    $my_campus = $_SESSION['campus'];
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <title>Document</title>
</head>
<body>

<?php 
  $query = $db->query("
    SELECT * FROM ass_monitoring WHERE Campus = '$my_campus' GROUP BY `Department/Office`
  ");

  foreach($query as $data)
  {
    $de_off[] = $data['Department/Office'];
    $amnt[] = $data['Total_Accomplished'];
  }

?>


<div style="width: 100%;">
    <?php
        include("config.php");
        // COUNT THE NUMBER OF ASSIGNMENTS BY CAMPUS
        $q="SELECT * FROM requirements WHERE Campus='$my_campus'";
        $res=mysqli_query($db,$q);
        $ttl_ass = mysqli_num_rows($res);
    ?>
    <br>
    <center><p style="font-family: Arial; font-weight: bold; width: auto; margin-top: -10px; color: white; background-color: gray; padding: 10px; border-radius: 5px;">TOTAL OF ASSIGNMENTS : <?php echo $ttl_ass; ?></p></center>
    <canvas id="myChart" height="380" width="970"></canvas>
</div>
 
<script>
  // === include 'setup' then 'config' above ===
  const labels = <?php echo json_encode($de_off) ?>;
  const data = {
    labels: labels,
    datasets: [{
      label: 'Work Accomplished',
      data: <?php echo json_encode($amnt) ?>,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
      ],
      borderColor: [
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(54, 162, 235)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
      ],
      borderWidth: 1
    }]
  };

  const config = {
    type: 'bar',
    data: data,
    options: {
        scales: {
        y: {
            ticks: {
          stepSize: 1
        },
            suggestedMin: 0,
            suggestedMax: <?php echo $ttl_ass; ?>
        }
    },
        responsive: false,
      plugins: {
        legend: {
            display: false
        }
    }
    },
  };

  var myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
</script>


</body>
</html>