<?= $this->extend('layout/template') ?>

<?= $this->section('content') ?>


<div class="row">


    <!-- JUMLAH BUKU -->

    <div class="col-lg-3 col-6">

        <div class="small-box bg-primary">


            <div class="inner">

                <h3>
                    <?= $jumlahBuku ?>
                </h3>


                <p>
                    Jumlah Buku
                </p>


            </div>



            <div class="icon">

                <i class="fas fa-book"></i>

            </div>



            <a href="<?= base_url('buku') ?>"
               class="small-box-footer">

                Lihat Buku

                <i class="fas fa-arrow-circle-right"></i>

            </a>


        </div>


    </div>





    <!-- JUMLAH ANGGOTA -->


    <div class="col-lg-3 col-6">


        <div class="small-box bg-success">


            <div class="inner">


                <h3>

                    <?= $jumlahAnggota ?>

                </h3>


                <p>

                    Jumlah Anggota

                </p>


            </div>




            <div class="icon">


                <i class="fas fa-users"></i>


            </div>



            <a href="<?= base_url('anggota') ?>"
               class="small-box-footer">


                Lihat Anggota


                <i class="fas fa-arrow-circle-right"></i>


            </a>



        </div>


    </div>







    <!-- PEMINJAMAN AKTIF -->


    <div class="col-lg-3 col-6">


        <div class="small-box bg-warning">


            <div class="inner">


                <h3>

                    <?= $sedangDipinjam ?>

                </h3>



                <p>

                    Sedang Dipinjam

                </p>



            </div>




            <div class="icon">


                <i class="fas fa-book-reader"></i>


            </div>




            <a href="<?= base_url('peminjaman') ?>"
               class="small-box-footer">


                Lihat Peminjaman


                <i class="fas fa-arrow-circle-right"></i>


            </a>



        </div>


    </div>







    <!-- PENGUNJUNG -->


    <div class="col-lg-3 col-6">


        <div class="small-box bg-danger">


            <div class="inner">


                <h3>

                    <?= $pengunjung ?>

                </h3>



                <p>

                    Pengunjung Hari Ini

                </p>



            </div>




            <div class="icon">


                <i class="fas fa-user-check"></i>


            </div>




            <a href="#"
               class="small-box-footer">


                Informasi


                <i class="fas fa-arrow-circle-right"></i>


            </a>



        </div>


    </div>




</div>





<!-- INFORMASI PERPUSTAKAAN -->


<div class="card">


    <div class="card-header bg-primary text-white">


        <h3 class="card-title">

            Informasi Perpustakaan

        </h3>


    </div>



    <div class="card-body">


        <div class="row">



            <div class="col-md-4">


                <div class="info-box">


                    <span class="info-box-icon bg-primary">

                        <i class="fas fa-book"></i>

                    </span>


                    <div class="info-box-content">


                        <span class="info-box-text">

                            Total Buku

                        </span>


                        <span class="info-box-number">

                            <?= $jumlahBuku ?>

                        </span>


                    </div>


                </div>


            </div>





            <div class="col-md-4">


                <div class="info-box">


                    <span class="info-box-icon bg-success">

                        <i class="fas fa-users"></i>

                    </span>


                    <div class="info-box-content">


                        <span class="info-box-text">

                            Total Anggota

                        </span>


                        <span class="info-box-number">

                            <?= $jumlahAnggota ?>

                        </span>


                    </div>


                </div>


            </div>






            <div class="col-md-4">


                <div class="info-box">


                    <span class="info-box-icon bg-warning">

                        <i class="fas fa-exchange-alt"></i>

                    </span>


                    <div class="info-box-content">


                        <span class="info-box-text">

                            Buku Dipinjam

                        </span>


                        <span class="info-box-number">

                            <?= $sedangDipinjam ?>

                        </span>


                    </div>


                </div>


            </div>




        </div>


    </div>


</div>





<!-- GRAFIK PEMINJAMAN & DENDA -->
<div class="row">
    <div class="col-md-12">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-chart-line mr-1"></i>
                    Grafik Peminjaman 7 Hari Terakhir
                </h3>
                <div class="card-tools">
                    <a href="<?= base_url('dashboard/grafik') ?>" class="btn btn-tool" title="Lihat detail grafik">
                        <i class="fas fa-expand"></i>
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div style="height: 250px;">
                            <canvas id="chartPinjam"></canvas>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div style="height: 250px;">
                            <canvas id="chartDenda"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="<?= base_url('plugins/chart.js/Chart.min.js') ?>"></script>
<script>
const tanggal = <?= $tanggal ?? '[]' ?>;
const total   = <?= $total ?? '[]' ?>;
const denda   = <?= $denda ?? '[]' ?>;

// 📊 Grafik Peminjaman
new Chart(document.getElementById('chartPinjam'), {
    type: 'line',
    data: {
        labels: tanggal,
        datasets: [{
            label: 'Jumlah Peminjaman',
            data: total,
            borderColor: '#007bff',
            backgroundColor: 'rgba(0,123,255,0.1)',
            borderWidth: 2,
            fill: true,
            tension: 0.4,
            pointRadius: 3,
            pointHoverRadius: 5
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: true }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: { precision: 0 }
            }
        }
    }
});

// 💰 Grafik Denda
new Chart(document.getElementById('chartDenda'), {
    type: 'bar',
    data: {
        labels: tanggal,
        datasets: [{
            label: 'Total Denda (Rp)',
            data: denda,
            backgroundColor: 'rgba(220,53,69,0.7)',
            borderColor: '#dc3545',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: true }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: { precision: 0 }
            }
        }
    }
});
</script>

<?= $this->endSection() ?>
