<?php

namespace PHPMaker2021\rdigital21;

use PHPMaker2021\rdigital21\{UserProfile, Language, AdvancedSecurity, Timer, HttpErrorHandler};
use Psr\Http\Message\ServerRequestInterface as Request;
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Container\ContainerInterface;
use DI\Container as Container;
use DI\ContainerBuilder;
use Selective\SameSiteCookie\SameSiteCookieConfiguration;
use Selective\SameSiteCookie\SameSiteCookieMiddleware;
use Selective\SameSiteCookie\SameSiteSessionMiddleware;
use Slim\Factory\AppFactory;
use Slim\Factory\ServerRequestCreatorFactory;
use Slim\Exception\HttpInternalServerErrorException;
use Nyholm\Psr7\Factory\Psr17Factory;
use Nyholm\Psr7Server\ServerRequestCreator;

// Relative path
$RELATIVE_PATH = "";

// Require files
require_once "vendor/autoload.php";
require_once "src/constants.php";
require_once "src/config.php";
require_once "src/phpfn.php";
require_once "src/userfn.php";
?>

<?php
$kode_tapel = kode_tapel();
$tapel = tapel();

$query = "SELECT 
proyek.kelas,
proyek.project,
( SELECT COUNT( * ) FROM nilai_p5 WHERE nilai_p5.kelas = proyek.kelas AND tahun_pelajaran='$tapel' ) AS jumlah 
FROM
proyek
INNER JOIN tema ON proyek.tema = tema.tema_id 
WHERE
proyek.tahun_pelajaran = '$tapel'
GROUP BY project
";

$result = ExecuteQuery($query);
$data = array();

while ($row = $result->fetch()) {
  $data[] = $row;
}

$datajson = json_encode($data);
?>

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>

<body>
  <center>Statistik Jumlah Siswa Per Proyek</center>
  <canvas id="proyek"></canvas>

  <script>
    var data = <?php echo $datajson; ?>;

    var proyekLabels = data.map(item => item.project);
    var jumlahData = data.map(item => item.jumlah);

    var ctx = document.getElementById('proyek').getContext('2d');

    var barChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: proyekLabels,
        datasets: [{
          label: 'Jumlah Siswa',
          data: jumlahData,
          backgroundColor: 'rgba(255, 193, 7, 0.51)',
          borderWidth: 1,
        }, ],
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: "bottom",
            display: true,
          },
          datalabels: {
            anchor: 'end',
            align: 'bottom',
            color: '#333',
            font: {
              weight: 'bold',
            },
            formatter: (value) => value, // Menampilkan nilai data
          },
        },
        scales: {
          x: {
            beginAtZero: true,
          },
        },
      },
      plugins: [ChartDataLabels], // Tambahkan plugin di sini
    });
  </script>
</body>

</html>