<?php
include 'header.php';

// ================== STATISTIK DASHBOARD ==================
$total_buku = mysqli_fetch_assoc(
    mysqli_query($koneksi, "SELECT COUNT(*) AS total FROM buku")
)['total'];

$buku_dipinjam = mysqli_fetch_assoc(
    mysqli_query($koneksi, "SELECT COUNT(*) AS total FROM peminjaman WHERE status='Dipinjam'")
)['total'];

$total_pengembalian = mysqli_fetch_assoc(
    mysqli_query($koneksi, "SELECT COUNT(*) AS total FROM peminjaman WHERE status='Dikembalikan'")
)['total'];

// ================== WAKTU ==================
date_default_timezone_set('Asia/Jakarta');
$tanggal_hari_ini = date('l, d F Y');
$jam_sekarang = date('H:i:s');

// ================== GRAFIK ==================
$grafik = mysqli_query($koneksi, "
    SELECT 
        MONTH(tanggal_pinjam) AS bulan,
        SUM(CASE WHEN status='Dipinjam' THEN 1 ELSE 0 END) AS dipinjam,
        SUM(CASE WHEN status='Dikembalikan' THEN 1 ELSE 0 END) AS dikembalikan
    FROM peminjaman
    WHERE YEAR(tanggal_pinjam)=YEAR(CURDATE())
    GROUP BY MONTH(tanggal_pinjam)
    ORDER BY bulan
");

$bulan = [];
$dipinjam = [];
$dikembalikan = [];

while ($row = mysqli_fetch_assoc($grafik)) {
    $bulan[] = date('M', mktime(0,0,0,$row['bulan'],1));
    $dipinjam[] = $row['dipinjam'];
    $dikembalikan[] = $row['dikembalikan'];
}
?>

<style>
.dashboard-stats { display:flex; gap:20px; }
.stat-card {
    flex:1; padding:20px; border-radius:8px; color:#fff;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.stat-blue { background:#007bff; }
.stat-yellow { background:#ffc107; color:#333; }
.stat-green { background:#28a745; }
.stat-card h3 { margin:0 0 10px; font-size:1.1em; }
.stat-card p { font-size:2.5em; margin:0; font-weight:bold; }

.dashboard-time {
    margin:10px 0 20px;
    font-size:.95em;
    color:#555;
}
</style>

<h3>Dashboard</h3>

<div class="dashboard-time">
    <strong><?= $tanggal_hari_ini ?></strong> |
    <span id="clock"><?= $jam_sekarang ?></span>
</div>

<div class="dashboard-stats">
    <div class="stat-card stat-blue">
        <h3>Total Buku</h3>
        <p><?= $total_buku ?></p>
    </div>
    <div class="stat-card stat-yellow">
        <h3>Buku Dipinjam</h3>
        <p><?= $buku_dipinjam ?></p>
    </div>
    <div class="stat-card stat-green">
        <h3>Total Pengembalian</h3>
        <p><?= $total_pengembalian ?></p>
    </div>
</div>

<div class="card" style="margin-top:30px;">
    <h3>Grafik Peminjaman & Pengembalian (Tahun Ini)</h3>
    <canvas id="grafikPeminjaman" height="100"></canvas>
</div>

<div class="card" style="margin-top:30px;">
    <h3>Selamat Datang, <?= $_SESSION['nama']; ?>!</h3>
    <p>Anda login sebagai <strong><?= $_SESSION['username']; ?></strong>.</p>
    <p>Gunakan menu di samping untuk mengelola data perpustakaan.</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
new Chart(document.getElementById('grafikPeminjaman'), {
    type: 'bar',
    data: {
        labels: <?= json_encode($bulan) ?>,
        datasets: [
            {
                label: 'Dipinjam',
                data: <?= json_encode($dipinjam) ?>,
                backgroundColor: '#ffc107'
            },
            {
                label: 'Dikembalikan',
                data: <?= json_encode($dikembalikan) ?>,
                backgroundColor: '#28a745'
            }
        ]
    },
    options: {
        responsive:true,
        scales:{ y:{ beginAtZero:true, ticks:{ stepSize:1 } } }
    }
});

// Jam realtime
setInterval(() => {
    const now = new Date();
    document.getElementById('clock').innerText =
        now.toLocaleTimeString('id-ID');
}, 1000);
</script>

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