<?php
session_start();
include '../config/koneksi.php';

if(!isset($_SESSION['admin'])){
    header("Location: ../login.php");
    exit;
}

// Statistik Jurusan
$atph = mysqli_num_rows(mysqli_query($conn,
"SELECT * FROM pendaftar WHERE jurusan='ATPH'"));

$atu = mysqli_num_rows(mysqli_query($conn,
"SELECT * FROM pendaftar WHERE jurusan='ATU'"));

$pplg = mysqli_num_rows(mysqli_query($conn,
"SELECT * FROM pendaftar WHERE jurusan='PPLG'"));

$dkv = mysqli_num_rows(mysqli_query($conn,
"SELECT * FROM pendaftar WHERE jurusan='DKV'"));

$tsm = mysqli_num_rows(mysqli_query($conn,
"SELECT * FROM pendaftar WHERE jurusan='TSM'"));

$tptup = mysqli_num_rows(mysqli_query($conn,
"SELECT * FROM pendaftar WHERE jurusan='TPTUP'"));

$total = $atph + $atu + $pplg + $dkv + $tsm + $tptup;
?>

<!DOCTYPE html>
<html lang="id">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Statistik SPMB</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>

body{
    background:#f4f6f9;
    font-family:'Segoe UI',sans-serif;
}

/* Sidebar */
.sidebar{
    width:260px;
    min-height:100vh;
    background:#0d1b2a;
    position:fixed;
    left:0;
    top:0;
    color:white;
    padding-top:20px;
}

.sidebar .logo{
    text-align:center;
    margin-bottom:30px;
}

.sidebar .logo h4{
    font-weight:700;
}

.sidebar a{
    display:block;
    color:white;
    padding:15px 25px;
    text-decoration:none;
    transition:0.3s;
}

.sidebar a:hover{
    background:#1b263b;
    padding-left:35px;
}

.sidebar a i{
    width:25px;
}

/* Main */
.main-content{
    margin-left:260px;
    padding:20px;
}

/* Navbar */
.navbar{
    background:linear-gradient(45deg,#0d6efd,#0b5ed7);
}

/* Card */
.card-modern{
    border:none;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.chart-container{
    position:relative;
    height:400px;
}

/* Statistik Card */
.stat-box{
    border-radius:20px;
    color:white;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    transition:0.3s;
}

.stat-box:hover{
    transform:translateY(-5px);
}

.stat-box i{
    font-size:40px;
    opacity:0.8;
}

.stat-box h2{
    font-weight:700;
}

/* Responsive */
@media(max-width:992px){

    .sidebar{
        position:relative;
        width:100%;
        min-height:auto;
    }

    .main-content{
        margin-left:0;
    }

}

</style>

</head>
<body>

<!-- Sidebar -->
<div class="sidebar">

<div class="logo">
<h4>SPMB ADMIN</h4>
<p>SMKN 1 CIKAUM</p>
</div>

<a href="dashboard.php">
<i class="fa fa-home"></i> Dashboard
</a>

<a href="data_pendaftar.php">
<i class="fa fa-users"></i> Data Pendaftar
</a>


<a href="statistik.php">
<i class="fa fa-chart-bar"></i> Statistik
</a>



<a href="logout.php">
<i class="fa fa-sign-out-alt"></i> Logout
</a>

</div>

<!-- Main -->
<div class="main-content">

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark rounded-4 shadow-sm px-4 mb-4">

<div class="container-fluid">

<span class="navbar-brand fw-bold">
Statistik SPMB
</span>

<div class="text-white">
<i class="fa fa-user-circle"></i>
Administrator
</div>

</div>

</nav>

<!-- Statistik Cards -->
<div class="row g-4 mb-4">

<div class="col-md-3">
<div class="stat-box bg-warning">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6>Total Pendaftar</h6>
<h2><?= $total ?></h2>
</div>
<i class="fa fa-user-graduate"></i>
</div>
</div>
</div>

<div class="col-md-3">
<div class="stat-box bg-success">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6>ATPH</h6>
<h2><?= $atph ?></h2>
</div>
<i class="fa fa-seedling"></i>
</div>
</div>
</div>

<div class="col-md-3">
<div class="stat-box bg-success">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6>ATU</h6>
<h2><?= $atu ?></h2>
</div>
<i class="fa fa-dove"></i>
</div>
</div>
</div>

<div class="col-md-3">
<div class="stat-box bg-danger">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6>PPLG</h6>
<h2><?= $pplg ?></h2>
</div>
<i class="fa fa-computer"></i>
</div>
</div>
</div>

<div class="col-md-3">
<div class="stat-box bg-danger">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6>DKV</h6>
<h2><?= $dkv ?></h2>
</div>
<i class="fa fa-dove"></i>
</div>
</div>
</div>

<div class="col-md-3">
<div class="stat-box bg-primary">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6>TSM</h6>
<h2><?= $tsm ?></h2>
</div>
<i class="fa fa-dove"></i>
</div>
</div>
</div>

<div class="col-md-3">
<div class="stat-box bg-primary">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6>TPTUP</h6>
<h2><?= $tptup ?></h2>
</div>
<i class="fa fa-dove"></i>
</div>
</div>
</div>

</div>

<div class="row g-4 mb-4">
<div class="col-md-6">
<div class="card card-modern">
<div class="card-body p-4">
<h5 class="fw-bold mb-4">
<i class="fa fa-chart-pie text-primary"></i>
Diagram Per Jurusan
</h5>

<div class="chart-container">
<canvas id="pieChart"></canvas>
</div>

</div>

</div>

</div>

<div class="col-md-6">
<div class="card card-modern">
<div class="card-body p-4">
<h5 class="fw-bold mb-4">
<i class="fa fa-chart-column text-success"></i>
Diagram Batang Jurusan
</h5>
<div class="chart-container">
<canvas id="barChart"></canvas>
</div>
</div>
</div>
</div>
</div>

<!-- Tabel Statistik -->
<div class="card card-modern">
<div class="card-body p-4">
<h5 class="fw-bold mb-4">
<i class="fa fa-table text-danger"></i>
Data Statistik Jurusan
</h5>
<div class="table-responsive">
<table class="table table-hover align-middle">

<thead class="table-primary">

<tr>
<th>No</th>
<th>Jurusan</th>
<th>Total Pendaftar</th>
<th>Persentase</th>
</tr>

</thead>

<tbody>

<?php
$jurusan = [
    ['ATPH',$atph],
    ['ATU',$atu],
    ['PPLG',$pplg],
    ['DKV',$dkv],
    ['TSM',$tsm],
    ['TPTUP',$tptup]
];

$no=1;

foreach($jurusan as $j){

$persen = ($total > 0)
? round(($j[1]/$total)*100,1)
: 0;
?>

<tr>

<td><?= $no++ ?></td>

<td><?= $j[0] ?></td>

<td>
<span class="badge bg-primary">
<?= $j[1] ?> Pendaftar
</span>
</td>

<td>
<div class="progress" style="height:25px;">

<div class="progress-bar"
style="width:<?= $persen ?>%">

<?= $persen ?>%

</div>

</div>
</td>

</tr>

<?php } ?>

</tbody>

</table>

</div>

</div>

</div>

<!-- Footer -->
<div class="text-center mt-4 text-muted">
© 2026 SPMB SMKN 1 CIKAUM
</div>

</div>

<script>

// Pie Chart
new Chart(document.getElementById('pieChart'), {
    type: 'pie',
    data: {
        labels: ['ATPH','ATU','PPLG','DKV','TSM','TPTUP'],
        datasets: [{
            data: [
                <?= $atph ?>,
                <?= $atu ?>,
                <?= $pplg ?>,
                <?= $dkv ?>,
                <?= $tsm ?>,
                <?= $tptup ?>
            ],
            backgroundColor: [
                '#198754',
                '#ffc107',
                '#dc3545',
                '#0d6efd',
                '#6610f2',
                '#20c997'
            ]
        }]
    }
});


</script>

// Bar Chart
<script>

new Chart(document.getElementById('barChart'), {
    type: 'bar',
    data: {
        labels: ['ATPH','ATU','PPLG','DKV','TSM','TPTUP'],
        datasets: [{
            label: 'Jumlah Pendaftar',
            data: [
                <?= $atph ?>,
                <?= $atu ?>,
                <?= $pplg ?>,
                <?= $dkv ?>,
                <?= $tsm ?>,
                <?= $tptup ?>
            ],
            borderWidth: 1
        }]
    },

    options: {
        responsive:true,
        maintainAspectRatio:false,

        scales: {
            y: {
                beginAtZero: true,

                ticks: {
                    stepSize: 1
                }
            }
        }
    }
});

</script>




</body>
</html>