<?= $this->extend('layout/template_siswa') ?>
<?= $this->section('page_title') ?>Daftar Buku<?= $this->endSection() ?>
<?= $this->section('content') ?>

<div class="container-fluid">

    <!-- HEADER -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h4 class="font-weight-bold mb-1">
                <i class="fas fa-book text-primary mr-2"></i>
                Daftar Buku Tersedia
            </h4>
            <small class="text-muted">
                Koleksi buku yang tersedia di perpustakaan
            </small>
        </div>
    </div>

    <!-- STATISTIK -->
    <div class="row mb-3">
        <div class="col-lg-6 col-md-6 mb-3">
            <div class="small-box bg-primary shadow-sm">
                <div class="inner">
                    <h3><?= count($buku) ?></h3>
                    <p>Total Buku Tersedia</p>
                </div>
                <div class="icon">
                    <i class="fas fa-book"></i>
                </div>
            </div>
        </div>

        <div class="col-lg-6 col-md-6 mb-3">
            <div class="small-box bg-success shadow-sm">
                <div class="inner">
                    <?php
                    $totalStok = 0;
                    foreach ($buku as $b) {
                        $totalStok += (int) $b['stok'];
                    }
                    ?>
                    <h3><?= $totalStok ?></h3>
                    <p>Total Stok Buku</p>
                </div>
                <div class="icon">
                    <i class="fas fa-layer-group"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- TABEL DATA -->
    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom">
            <h5 class="mb-0 font-weight-bold">
                <i class="fas fa-list text-primary mr-2"></i>
                Daftar Buku
            </h5>
            <small class="text-muted">
                Buku yang masih memiliki stok di perpustakaan
            </small>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="tabelKatalog">
                    <thead class="bg-light">
                        <tr>
                            <th width="60" class="text-center">No</th>
                            <th>Kode Buku</th>
                            <th>Judul Buku</th>
                            <th>Penulis</th>
                            <th>Kategori</th>
                            <th width="100" class="text-center">Stok</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (!empty($buku)) : ?>
                            <?php $no = 1; ?>
                            <?php foreach ($buku as $b) : ?>
                                <tr>
                                    <td class="text-center font-weight-bold"><?= $no++ ?></td>
                                    <td>
                                        <span class="badge badge-light border px-2 py-2">
                                            <i class="fas fa-barcode mr-1 text-primary"></i>
                                            <?= esc($b['kode_buku']) ?>
                                        </span>
                                    </td>
                                    <td>
                                        <div class="font-weight-bold text-dark">
                                            <?= esc($b['judul']) ?>
                                        </div>
                                        <small class="text-muted">
                                            <i class="fas fa-book-open mr-1"></i>
                                            Buku Perpustakaan
                                        </small>
                                    </td>
                                    <td>
                                        <i class="fas fa-user-edit text-muted mr-1"></i>
                                        <?= esc($b['penulis']) ?>
                                    </td>
                                    <td>
                                        <?php if (!empty($b['kategori'])) : ?>
                                            <span class="badge badge-info px-2 py-2">
                                                <i class="fas fa-tag mr-1"></i>
                                                <?= esc($b['kategori']) ?>
                                            </span>
                                        <?php else : ?>
                                            <span class="text-muted">-</span>
                                        <?php endif; ?>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge badge-success px-3 py-2">
                                            <?= esc($b['stok']) ?>
                                        </span>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php else : ?>
                            <tr>
                                <td colspan="6" class="text-center py-5">
                                    <div class="mb-3">
                                        <i class="fas fa-book-open fa-3x text-muted"></i>
                                    </div>
                                    <h5 class="font-weight-bold">Tidak Ada Buku Tersedia</h5>
                                    <p class="text-muted">
                                        Saat ini belum ada buku yang tersedia di perpustakaan.
                                    </p>
                                </td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<script>
$(document).ready(function () {
    $('#tabelKatalog').DataTable({
        responsive: true,
        autoWidth: false,
        language: {
            search: "Cari Buku:",
            lengthMenu: "Tampilkan _MENU_ data",
            info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ buku",
            infoEmpty: "Tidak ada data buku",
            zeroRecords: "Data buku tidak ditemukan",
            emptyTable: "Belum ada data buku",
            paginate: { first: "Awal", last: "Akhir", next: "›", previous: "‹" }
        }
    });
});
</script>

<style>
.card {
    border-radius: 12px;
}
.card-header {
    border-radius: 12px 12px 0 0 !important;
}
.small-box {
    border-radius: 12px;
    overflow: hidden;
    transition: all .25s ease;
}
.small-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
}
#tabelKatalog thead th {
    border-top: none;
    border-bottom: 2px solid #dee2e6;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #495057;
}
#tabelKatalog tbody td {
    vertical-align: middle;
    font-size: 14px;
}
#tabelKatalog tbody tr:hover {
    background-color: #f8fbff;
}
.badge {
    font-weight: 500;
}
</style>

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