<!DOCTYPE html>
<html lang="en">

<head>
  <?= $this->include('layout/head') ?>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Dashboard - EduControl</title>
  <meta content="" name="description">
  <meta content="" name="keywords">
  <!-- Favicons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


  <!-- =======================================================
  * Template Name: NiceAdmin
  * Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
  * Updated: Apr 20 2024 with Bootstrap v5.3.3
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body>
  <?= $this->include('layout/sidebar') ?>
  <!-- ======= Sidebar ======= -->
  <main id="main" class="main">

    <div class="pagetitle">
      <h1>Dashboard Kepala Sekolah</h1>
      <nav>
        <ol class="breadcrumb">
          <!-- <li class="breadcrumb-item"><a href="index.html">Home</a></li>
          <li class="breadcrumb-item active">Dashboard</li> -->

        </ol>
      </nav>
    </div><!-- End Page Title -->

    <section class="section dashboard">
    <div class="container mt-4">
        <?php if (!empty($ajuan)): ?>
            <div class="row">
                <div class="col-md-12">
                    <div class="card text-white bg-warning mb-3 shadow-sm">
                        <div class="card-body text-center p-3">
                            <p class="text-center mb-4">
                                Terdapat <strong><?= esc($ajuan); ?></strong> laporan yang belum ditinjau. 
                                <a href="<?= base_url('/evaluasi/evaluasi_kepsek') ?>" class="btn btn-light btn-sm ms-2">Lihat</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        <?php endif; ?>
        <div class="row">
            <!-- Total Guru -->
            <div class="col-md-4">
                <div class="card text-white bg-success mb-3 shadow-sm">
                    <div class="card-body text-center p-3">
                        <h6 class="card-title mb-1">Total Guru</h6>
                        <h4 class="mb-0"><?= esc($totalGuru); ?></h4>
                    </div>
                </div>
            </div>

            <!-- Laporan Kinerja  Disetujui -->
            <div class="col-md-4">
                <div class="card text-white bg-primary mb-3 shadow-sm">
                    <div class="card-body text-center p-3">
                        <h6 class="card-title mb-1">Laporan Kinerja Disetujui</h6>
                    <h4 class="mb-0"><?= esc($totalDisetujui); ?></h4>
                    </div>
                </div>
            </div>

            <!-- Laporan Kinerja Ditolak -->
            <div class="col-md-4">
                <div class="card text-white bg-danger mb-3 shadow-sm">
                    <div class="card-body text-center p-3">
                        <h6 class="card-title mb-1">Laporan Kinerja Ditolak</h6>
                        <h4 class="mb-0"><?= esc($totalDitolak); ?></h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </section>

         <!-- Grafik Kinerja Guru -->
        <div class="card mt-3">
            <div class="card-body">
                <h5 class="card-title">Grafik Kinerja Guru</h5>
                <canvas id="performanceChart"></canvas>
            </div>
        </div>
    </div>
    <footer id="footer" class="footer text-center mt-4 p-3 bg-light">
        &copy; 2025 Manajemen Kinerja Guru. All Rights Reserved.
    </footer>

    <?php
        $labels = [];
        $dataRataRata = [];

        foreach ($rekap as $periodeData) {
            $periodeNama = $periodeData['periode']['nama_periode'];
            $labels[] = $periodeNama;

            $totalNilai = 0;
            $jumlahGuru = count($periodeData['guru']);

            foreach ($periodeData['guru'] as $guru) {
                $totalNilai += (int)$guru['total_nilai'];
            }

            $rataRata = $jumlahGuru > 0 ? round($totalNilai / $jumlahGuru, 2) : 0;
            $dataRataRata[] = $rataRata;
        }
        ?>


    <script>
        var labels = <?= json_encode($labels) ?>;
        var dataRataRata = <?= json_encode($dataRataRata) ?>;

        var ctx = document.getElementById('performanceChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Rata-rata Skor Kinerja',
                    data: dataRataRata,
                    fill: false,
                    borderColor: 'rgba(54, 162, 235, 1)',
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    tension: 0.3,
                    pointBackgroundColor: 'rgba(54, 162, 235, 1)',
                    pointRadius: 5
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: true },
                    tooltip: {
                        enabled: true,
                        callbacks: {
                            label: function(context) {
                                return 'Rata-rata: ' + context.parsed.y;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        title: {
                            display: true,
                            text: 'Skor'
                        }
                    },
                   x: {
                        title: {
                            display: true,
                            text: 'Periode <?= date('Y') ?>'
                        }
                    }
                }
            }
        });
    </script>
 </body>
</html>