<?php $this->load->view('template/header'); ?>
<?php $this->load->view('template/sidebar'); ?>

<style>
body{
    background:linear-gradient(135deg,#eef2f7,#f8fbff);
}

.dashboard-title{
    font-weight:700;
    margin-bottom:25px;
}

.stat-card{
    background:#fff;
    border-radius:20px;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
    transition:.3s;
    position:relative;
    overflow:hidden;
}

.stat-card:hover{
    transform:translateY(-8px);
}

.stat-icon{
    width:55px;
    height:55px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    margin-bottom:15px;
    color:#fff;
}

.bg-blue{ background:linear-gradient(45deg,#0d6efd,#4e73df); }
.bg-teal{ background:linear-gradient(45deg,#20c997,#17a2b8); }
.bg-orange{ background:linear-gradient(45deg,#ff9800,#ff5722); }
.bg-red{ background:linear-gradient(45deg,#dc3545,#ff6b6b); }
.bg-green{ background:linear-gradient(45deg,#198754,#20c997); }
.bg-purple{ background:linear-gradient(45deg,#6f42c1,#9b59b6); }

.stat-number{
    font-size:32px;
    font-weight:700;
}

.stat-label{
    color:#777;
}

.chart-card{
    background:#fff;
    border-radius:20px;
    padding:30px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
    margin-top:30px;
}
</style>

<div class="container-fluid">
    <h3 class="dashboard-title">📊 Dashboard Perpustakaan</h3>

    <div class="row g-4">

        <div class="col-md-4">
            <div class="stat-card">
                <div class="stat-icon bg-blue">👥</div>
                <div class="stat-number text-primary"><?= $anggota ?></div>
                <div class="stat-label">Total Anggota</div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="stat-card">
                <div class="stat-icon bg-teal">📚</div>
                <div class="stat-number text-info"><?= $buku ?></div>
                <div class="stat-label">Total Buku</div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="stat-card">
                <div class="stat-icon bg-orange">🏷️</div>
                <div class="stat-number text-warning"><?= $kategori ?></div>
                <div class="stat-label">Kategori</div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="stat-card">
                <div class="stat-icon bg-red">👣</div>
                <div class="stat-number text-danger"><?= $pengunjung ?></div>
                <div class="stat-label">Total Pengunjung</div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="stat-card">
                <div class="stat-icon bg-green">📖</div>
                <div class="stat-number text-success"><?= $dipinjam ?></div>
                <div class="stat-label">Sedang Dipinjam</div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="stat-card">
                <div class="stat-icon bg-purple">✅</div>
                <div class="stat-number text-secondary"><?= $kembali ?></div>
                <div class="stat-label">Sudah Dikembalikan</div>
            </div>
        </div>

    </div>

    <!-- GRAFIK -->
    <div class="chart-card">
        <h5 class="mb-4">📈 Grafik Pengunjung Harian</h5>
        <canvas id="grafikPengunjung" height="100"></canvas>
    </div>

</div>

<script>
document.addEventListener("DOMContentLoaded", function(){

    const labels = [
    <?php foreach($grafik as $g){ ?>
    "<?= $g->tanggal ?>",
    <?php } ?>
    ];

    const data = [
    <?php foreach($grafik as $g){ ?>
    <?= $g->total ?>,
    <?php } ?>
    ];

    const ctx = document.getElementById('grafikPengunjung');

    if(ctx){
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Jumlah Pengunjung',
                    data: data,
                    tension: 0.4,
                    fill: true,
                    borderWidth: 3
                }]
            },
            options:{
                responsive:true,
                plugins:{
                    legend:{display:true}
                }
            }
        });
    }

});
</script>

<?php $this->load->view('template/footer'); ?>
