<?php
session_start();
if (!isset($_SESSION['id_admin'])) {
    header('Location: login_admin.php');
    exit;
}

include 'includes/config.php';
include 'includes/header_admin.php';
include 'includes/sidebar_admin.php';

// Jumlah Aktiviti
$total_aktiviti = $conn->query("SELECT COUNT(*) AS total FROM aktiviti")->fetch_assoc()['total'] ?? 0;

// Jumlah Pelajar
$total_pelajar = $conn->query("SELECT COUNT(*) AS total FROM pelajar")->fetch_assoc()['total'] ?? 0;

// Jumlah Penyertaan
$total_penyertaan = $conn->query("SELECT COUNT(*) AS total FROM penyertaan")->fetch_assoc()['total'] ?? 0;

// Pecahan Peringkat Aktiviti
$peringkat_data = [];
$peringkat_labels = [];
$result_peringkat = $conn->query("SELECT peringkat, COUNT(*) AS jumlah FROM aktiviti GROUP BY peringkat");
while ($row = $result_peringkat->fetch_assoc()) {
    $peringkat_labels[] = $row['peringkat'];
    $peringkat_data[] = $row['jumlah'];
}
?>

<style>
.main-content {
    margin-left: 180px;
    margin-top: 100px;
    padding: 30px 40px;
}

.stats-box {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}
.stats-number {
    font-size: 32px;
    color: #3b0a77;
}

.chart-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 20px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
        margin-top: 130px;
        padding: 20px;
    }
}
</style>

<div class="main-content">
    <h2 class="page-title">Laporan & Statistik</h2>

    <!-- Kotak Statistik -->
    <div class="row" style="display: flex; gap: 20px; flex-wrap: wrap;">
        <div class="stats-box" style="flex: 1;">
            Jumlah Aktiviti
            <div class="stats-number"><?= $total_aktiviti ?></div>
        </div>
        <div class="stats-box" style="flex: 1;">
            Jumlah Pelajar
            <div class="stats-number"><?= $total_pelajar ?></div>
        </div>
        <div class="stats-box" style="flex: 1;">
            Jumlah Penyertaan
            <div class="stats-number"><?= $total_penyertaan ?></div>
        </div>
    </div>

    <!-- Pecahan Peringkat Aktiviti -->
    <div class="chart-container" style="max-width: 800px; margin: 30px auto;">
        <h4 style="text-align:center;"><i class="bi bi-pie-chart-fill"></i> Pecahan Peringkat Aktiviti</h4>
        <div style="width:100%; height:400px;">
            <canvas id="peringkatChart"></canvas>
        </div>
    </div>

    <!-- Button Cetak -->
    <!-- Button Cetak -->
	<div style="text-align:center; margin:50px 0 100px 0;"> <!-- margin bawah 100px -->
    <button onclick="window.print()" class="btn btn-primary">
        <i class="bi bi-printer-fill"></i> Cetak Laporan
    </button>
	</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const peringkatLabels = <?= json_encode($peringkat_labels) ?>;
const peringkatValues = <?= json_encode($peringkat_data) ?>;

const ctx = document.getElementById('peringkatChart').getContext('2d');

new Chart(ctx, {
    type: 'pie',
    data: {
        labels: peringkatLabels,
        datasets: [{
            data: peringkatValues,
            backgroundColor: ['#6f42c1', '#fd7e14', '#198754', '#17a2b8', '#e83e8c', '#20c997'],
            borderColor: '#fff',
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    font: {
                        size: 14
                    }
                }
            },
            tooltip: {
                bodyFont: {
                    size: 14
                }
            }
        }
    }
});
</script>

<?php include 'includes/footer.php'; ?>
