<?php
include "koneksi.php";
$tahun = date("Y");
$tahunsblm = date("Y") - 1;

/* ================= TRACER ================= */
$total = mysqli_fetch_assoc(mysqli_query($koneksi,"SELECT COUNT(*) as jml FROM tracer_study"))['jml'];
$total = $total > 0 ? $total : 1;

$bekerja = mysqli_fetch_assoc(mysqli_query($koneksi,"SELECT COUNT(*) as jml FROM tracer_study WHERE sasaran='Bekerja'"))['jml'];
$kuliah = mysqli_fetch_assoc(mysqli_query($koneksi,"SELECT COUNT(*) as jml FROM tracer_study WHERE sasaran='Kuliah'"))['jml'];
$wirausaha = mysqli_fetch_assoc(mysqli_query($koneksi,"SELECT COUNT(*) as jml FROM tracer_study WHERE sasaran='Wirausaha'"))['jml'];
$belum = mysqli_fetch_assoc(mysqli_query($koneksi,"SELECT COUNT(*) as jml FROM tracer_study WHERE sasaran='Belum'"))['jml'];

$p_bekerja = round(($bekerja/$total)*100);
$p_kuliah = round(($kuliah/$total)*100);
$p_wirausaha = round(($wirausaha/$total)*100);
$p_belum = round(($belum/$total)*100);

/* ================= SNBP ================= */
$total_snbp = mysqli_fetch_assoc(mysqli_query($koneksi,"SELECT COUNT(*) as jml FROM snbp"))['jml'];

$ptn_data = mysqli_query($koneksi,"SELECT PTN, COUNT(*) as jumlah FROM snbp GROUP BY PTN ORDER BY jumlah DESC");

$labels_ptn = [];
$data_ptn = [];

while($row = mysqli_fetch_assoc($ptn_data)){
    $labels_ptn[] = $row['PTN'];
    $data_ptn[] = $row['jumlah'];
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Dashboard Karir</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- AOS -->
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">

<style>
body {
    font-family: 'Poppins', sans-serif;
    background: #f4f6f9;
}

/* NAVBAR */
.navbar-modern {
    background: linear-gradient(135deg,#0059ff,#f4f6f9);
    color:white;
}

/* CARD */
.card-modern {
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border:none;
    transition:0.3s;
}
.card-modern:hover {
    transform:translateY(-5px);
}

/* STAT BOX */
.stat-box {
    border-radius: 16px;
    padding:20px;
    color:white;
}

/* GRADIENT COLORS */
.bg1 {background: linear-gradient(135deg,#22c55e,#16a34a);}
.bg2 {background: linear-gradient(135deg,#0ea5e9,#0284c7);}
.bg3 {background: linear-gradient(135deg,#f59e0b,#d97706);}
.bg4 {background: linear-gradient(135deg,#ef4444,#dc2626);}

.section-title {
    font-weight:600;
}

/* BUTTON */
.btn {
    border-radius:10px;
}
</style>
</head>

<body>

<!-- NAVBAR -->
<nav class="navbar navbar-modern p-3">
<div class="container d-flex justify-content-between">
<span class="font-weight-bold">🎓 Dashboard Karir & Beasiswa</span>
<a href="hal_utama.php" class="btn btn-dark btn-sm">⬅ Kembali</a>
</div>
</nav>

<div class="container py-4">

<h3 class="text-center mb-4" data-aos="fade-down">
📊 Statistik Alumni & SNBP
</h3>

<!-- TRACER -->
<h5 class="section-title mb-3">
Data Tracer Study (Tahun <?= $tahunsblm ?>)
</h5>

<div class="row text-center">

<div class="col-md-3" data-aos="zoom-in">
<div class="stat-box bg1">
<h2><?= $p_bekerja ?>%</h2>
<p>Bekerja</p>
</div>
</div>

<div class="col-md-3" data-aos="zoom-in">
<div class="stat-box bg2">
<h2><?= $p_kuliah ?>%</h2>
<p>Kuliah</p>
</div>
</div>

<div class="col-md-3" data-aos="zoom-in">
<div class="stat-box bg3">
<h2><?= $p_wirausaha ?>%</h2>
<p>Wirausaha</p>
</div>
</div>

<div class="col-md-3" data-aos="zoom-in">
<div class="stat-box bg4">
<h2><?= $p_belum ?>%</h2>
<p>Belum</p>
</div>
</div>

</div>

<div class="card card-modern mt-4" data-aos="fade-up">
<div class="card-body">
<canvas id="tracerChart"></canvas>
</div>
</div>

<!-- SNBP -->
<h5 class="section-title mb-3 mt-5">
Data Lulus SNBP (Tahun <?= $tahun ?>)
</h5>

<div class="row">
<div class="col-md-4" data-aos="zoom-in">
<div class="stat-box bg2">
<h2><?= $total_snbp ?></h2>
<p>Total Lolos PTN</p>
</div>
</div>
</div>

<div class="card card-modern mt-4" data-aos="fade-up">
<div class="card-body">
<canvas id="snbpChart"></canvas>
</div>
</div>

</div>

<!-- JS -->
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script>
AOS.init({duration:1000});
</script>

<script>
// Tracer
new Chart(document.getElementById('tracerChart'), {
type:'doughnut',
data:{
labels:['Bekerja','Kuliah','Wirausaha','Belum'],
datasets:[{
data:[<?= $bekerja ?>,<?= $kuliah ?>,<?= $wirausaha ?>,<?= $belum ?>],
backgroundColor:['#22c55e','#0ea5e9','#f59e0b','#ef4444']
}]
}
});

// SNBP
new Chart(document.getElementById('snbpChart'), {
type:'bar',
data:{
labels:<?= json_encode($labels_ptn) ?>,
datasets:[{
data:<?= json_encode($data_ptn) ?>,
backgroundColor:'#6366f1'
}]
},
options:{plugins:{legend:{display:false}}}
});
</script>

</body>
</html>