<?= $this->extend('layout/template') ?>
<?= $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>
                Data Buku
            </h4>
            <small class="text-muted">
                Kelola data buku perpustakaan
            </small>
        </div>

        <a href="<?= base_url('buku/create') ?>" class="btn btn-primary shadow-sm">
            <i class="fas fa-plus mr-1"></i>
            Tambah Buku
        </a>
    </div>


    <!-- FLASH MESSAGE -->
    <?php if (session()->getFlashdata('success')) : ?>
        <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
            <i class="fas fa-check-circle mr-2"></i>
            <?= session()->getFlashdata('success') ?>

            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    <?php endif; ?>


    <!-- STATISTIK -->
    <div class="row mb-3">

        <!-- TOTAL JUDUL -->
        <div class="col-lg-4 col-md-6 mb-3">
            <div class="small-box bg-primary shadow-sm">
                <div class="inner">
                    <h3><?= count($buku) ?></h3>
                    <p>Total Judul Buku</p>
                </div>

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


        <!-- TOTAL STOK -->
        <div class="col-lg-4 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>


        <!-- STOK HABIS -->
        <div class="col-lg-4 col-md-6 mb-3">
            <div class="small-box bg-danger shadow-sm">
                <div class="inner">

                    <?php
                    $stokHabis = 0;

                    foreach ($buku as $b) {
                        if ((int) $b['stok'] <= 0) {
                            $stokHabis++;
                        }
                    }
                    ?>

                    <h3><?= $stokHabis ?></h3>
                    <p>Buku Stok Habis</p>
                </div>

                <div class="icon">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
            </div>
        </div>

    </div>


    <!-- TABEL DATA -->
    <div class="card shadow-sm border-0">

        <div class="card-header bg-white border-bottom">
            <div class="d-flex justify-content-between align-items-center">

                <div>
                    <h5 class="mb-0 font-weight-bold">
                        <i class="fas fa-list text-primary mr-2"></i>
                        Daftar Buku
                    </h5>

                    <small class="text-muted">
                        Data buku yang tersedia di perpustakaan
                    </small>
                </div>

            </div>
        </div>


        <div class="card-body">

            <div class="table-responsive">

                <table class="table table-hover align-middle" id="tabelBuku">

                    <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>
                            <th width="120" class="text-center">Aksi</th>
                        </tr>

                    </thead>


                    <tbody>

                        <?php if (!empty($buku)) : ?>

                            <?php $no = 1; ?>

                            <?php foreach ($buku as $b) : ?>

                                <tr>

                                    <!-- NO -->
                                    <td class="text-center font-weight-bold">
                                        <?= $no++ ?>
                                    </td>


                                    <!-- KODE -->
                                    <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>


                                    <!-- JUDUL -->
                                    <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>


                                    <!-- PENULIS -->
                                    <td>
                                        <i class="fas fa-user-edit text-muted mr-1"></i>
                                        <?= esc($b['penulis']) ?>
                                    </td>


                                    <!-- KATEGORI -->
                                    <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>


                                    <!-- STOK -->
                                    <td class="text-center">

                                        <?php if ((int) $b['stok'] > 5) : ?>

                                            <span class="badge badge-success px-3 py-2">
                                                <?= esc($b['stok']) ?>
                                            </span>

                                        <?php elseif ((int) $b['stok'] > 0) : ?>

                                            <span class="badge badge-warning px-3 py-2">
                                                <?= esc($b['stok']) ?>
                                            </span>

                                        <?php else : ?>

                                            <span class="badge badge-danger px-2 py-2">
                                                Habis
                                            </span>

                                        <?php endif; ?>

                                    </td>


                                    <!-- AKSI -->
                                    <td class="text-center">

                                        <div class="btn-group">

                                            <!-- EDIT -->
                                            <a href="<?= base_url('buku/edit/' . $b['id']) ?>"
                                               class="btn btn-warning btn-sm"
                                               title="Edit Buku"
                                               data-toggle="tooltip">

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

                                            </a>


                                            <!-- DELETE -->
                                            <a href="<?= base_url('buku/delete/' . $b['id']) ?>"
                                               class="btn btn-danger btn-sm"
                                               title="Hapus Buku"
                                               data-toggle="tooltip"
                                               onclick="return confirm('Yakin ingin menghapus buku <?= esc($b['judul']) ?>?')">

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

                                            </a>

                                        </div>

                                    </td>

                                </tr>

                            <?php endforeach; ?>

                        <?php else : ?>

                            <tr>

                                <td colspan="7" 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">
                                        Belum Ada Data Buku
                                    </h5>

                                    <p class="text-muted">
                                        Silakan tambahkan data buku terlebih dahulu.
                                    </p>

                                    <a href="<?= base_url('buku/create') ?>"
                                       class="btn btn-primary">

                                        <i class="fas fa-plus mr-1"></i>
                                        Tambah Buku

                                    </a>

                                </td>

                            </tr>

                        <?php endif; ?>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>


<!-- DATATABLE -->
<script>

$(document).ready(function () {

    $('#tabelBuku').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: "‹"

            }

        }

    });


    // TOOLTIP
    $('[data-toggle="tooltip"]').tooltip();

});

</script>


<style>

/* CARD */
.card {
    border-radius: 12px;
}

.card-header {
    border-radius: 12px 12px 0 0 !important;
}


/* SMALL BOX */
.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;
}

.small-box .icon {
    transition: all .3s ease;
}

.small-box:hover .icon {
    transform: scale(1.1);
}


/* TABLE */
#tabelBuku thead th {
    border-top: none;
    border-bottom: 2px solid #dee2e6;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #495057;
}

#tabelBuku tbody td {
    vertical-align: middle;
    font-size: 14px;
}

#tabelBuku tbody tr {
    transition: all .15s ease;
}

#tabelBuku tbody tr:hover {
    background-color: #f8fbff;
}


/* BADGE */
.badge {
    font-weight: 500;
}


/* BUTTON */
.btn {
    border-radius: 6px;
}

.btn-group .btn {
    margin: 0 2px;
}


/* DATATABLE */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 6px 10px;
    margin-left: 5px;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 5px 8px;
}


/* MOBILE */
@media (max-width: 768px) {

    .small-box {
        margin-bottom: 10px;
    }

    .card-body {
        padding: 15px;
    }

}

</style>

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