<?= $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-reader text-primary mr-2"></i>
                Ruang Baca
            </h4>
            <small class="text-muted">
                Koleksi buku dan artikel perpustakaan dalam bentuk PDF
            </small>
        </div>

        <a href="<?= base_url('ruang_baca/create') ?>" class="btn btn-primary shadow-sm">
            <i class="fas fa-plus mr-1"></i>
            Tambah
        </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; ?>

    <?php
    // Pisahkan data buku dan artikel
    $bukuList = [];
    $artikelList = [];

    foreach ($ruang_baca as $r) {
        if ($r['jenis'] == 'buku') {
            $bukuList[] = $r;
        } else {
            $artikelList[] = $r;
        }
    }
    ?>

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

        <div class="col-lg-6">
            <div class="small-box bg-primary shadow-sm">
                <div class="inner">
                    <h3><?= count($bukuList) ?></h3>
                    <p>Total Buku</p>
                </div>
                <div class="icon">
                    <i class="fas fa-book"></i>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="small-box bg-success shadow-sm">
                <div class="inner">
                    <h3><?= count($artikelList) ?></h3>
                    <p>Total Artikel</p>
                </div>
                <div class="icon">
                    <i class="fas fa-newspaper"></i>
                </div>
            </div>
        </div>

    </div>

    <!-- TABS: BUKU & ARTIKEL -->
    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom p-0">
            <ul class="nav nav-tabs card-header-tabs" id="ruangBacaTab" role="tablist">

                <li class="nav-item">
                    <a class="nav-link active" id="buku-tab" data-toggle="tab" href="#buku" role="tab">
                        <i class="fas fa-book text-primary mr-1"></i>
                        Bagian Buku
                        <span class="badge badge-primary ml-1"><?= count($bukuList) ?></span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" id="artikel-tab" data-toggle="tab" href="#artikel" role="tab">
                        <i class="fas fa-newspaper text-success mr-1"></i>
                        Bagian Artikel
                        <span class="badge badge-success ml-1"><?= count($artikelList) ?></span>
                    </a>
                </li>

            </ul>
        </div>

        <div class="card-body">

            <div class="tab-content">

                <!-- ============ TAB BUKU ============ -->
                <div class="tab-pane fade show active" id="buku" role="tabpanel">

                    <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>Judul</th>
                                    <th>Penulis</th>
                                    <th>Kategori</th>
                                    <th>File</th>
                                    <th width="120" class="text-center">Aksi</th>
                                </tr>
                            </thead>

                            <tbody>

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

                                    <?php $no = 1; ?>

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

                                        <tr>

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

                                            <td>
                                                <div class="font-weight-bold text-dark">
                                                    <i class="fas fa-book text-primary mr-1"></i>
                                                    <?= esc($b['judul']) ?>
                                                </div>
                                            </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>

                                                <?php if (!empty($b['file_pdf'])) : ?>

                                                    <span class="badge badge-light border px-2 py-2">
                                                        <i class="fas fa-file-pdf text-danger mr-1"></i>
                                                        PDF
                                                    </span>

                                                <?php else : ?>

                                                    <span class="text-muted">-</span>

                                                <?php endif; ?>

                                            </td>

                                            <td class="text-center">

                                                <div class="btn-group">

                                                    <a href="<?= base_url('ruang_baca/download/' . $b['id']) ?>"
                                                       class="btn btn-info btn-sm"
                                                       title="Download PDF"
                                                       data-toggle="tooltip">
                                                        <i class="fas fa-download"></i>
                                                    </a>

                                                    <a href="<?= base_url('ruang_baca/edit/' . $b['id']) ?>"
                                                       class="btn btn-warning btn-sm"
                                                       title="Edit"
                                                       data-toggle="tooltip">
                                                        <i class="fas fa-edit"></i>
                                                    </a>

                                                    <a href="<?= base_url('ruang_baca/delete/' . $b['id']) ?>"
                                                       class="btn btn-danger btn-sm"
                                                       title="Hapus"
                                                       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="6" class="text-center py-5">
                                            <div class="mb-3">
                                                <i class="fas fa-book fa-3x text-muted"></i>
                                            </div>
                                            <h5 class="font-weight-bold">Belum Ada Buku</h5>
                                            <p class="text-muted">Silakan tambahkan buku terlebih dahulu.</p>
                                        </td>
                                    </tr>

                                <?php endif; ?>

                            </tbody>

                        </table>

                    </div>

                </div>

                <!-- ============ TAB ARTIKEL ============ -->
                <div class="tab-pane fade" id="artikel" role="tabpanel">

                    <div class="table-responsive">

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

                            <thead class="bg-light">
                                <tr>
                                    <th width="60" class="text-center">No</th>
                                    <th>Judul</th>
                                    <th>Penulis</th>
                                    <th>Kategori</th>
                                    <th>File</th>
                                    <th width="120" class="text-center">Aksi</th>
                                </tr>
                            </thead>

                            <tbody>

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

                                    <?php $no = 1; ?>

                                    <?php foreach ($artikelList as $a) : ?>

                                        <tr>

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

                                            <td>
                                                <div class="font-weight-bold text-dark">
                                                    <i class="fas fa-newspaper text-success mr-1"></i>
                                                    <?= esc($a['judul']) ?>
                                                </div>
                                            </td>

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

                                            <td>

                                                <?php if (!empty($a['kategori'])) : ?>

                                                    <span class="badge badge-info px-2 py-2">
                                                        <i class="fas fa-tag mr-1"></i>
                                                        <?= esc($a['kategori']) ?>
                                                    </span>

                                                <?php else : ?>

                                                    <span class="text-muted">-</span>

                                                <?php endif; ?>

                                            </td>

                                            <td>

                                                <?php if (!empty($a['file_pdf'])) : ?>

                                                    <span class="badge badge-light border px-2 py-2">
                                                        <i class="fas fa-file-pdf text-danger mr-1"></i>
                                                        PDF
                                                    </span>

                                                <?php else : ?>

                                                    <span class="text-muted">-</span>

                                                <?php endif; ?>

                                            </td>

                                            <td class="text-center">

                                                <div class="btn-group">

                                                    <a href="<?= base_url('ruang_baca/download/' . $a['id']) ?>"
                                                       class="btn btn-info btn-sm"
                                                       title="Download PDF"
                                                       data-toggle="tooltip">
                                                        <i class="fas fa-download"></i>
                                                    </a>

                                                    <a href="<?= base_url('ruang_baca/edit/' . $a['id']) ?>"
                                                       class="btn btn-warning btn-sm"
                                                       title="Edit"
                                                       data-toggle="tooltip">
                                                        <i class="fas fa-edit"></i>
                                                    </a>

                                                    <a href="<?= base_url('ruang_baca/delete/' . $a['id']) ?>"
                                                       class="btn btn-danger btn-sm"
                                                       title="Hapus"
                                                       data-toggle="tooltip"
                                                       onclick="return confirm('Yakin ingin menghapus artikel <?= esc($a['judul']) ?>?')">
                                                        <i class="fas fa-trash"></i>
                                                    </a>

                                                </div>

                                            </td>

                                        </tr>

                                    <?php endforeach; ?>

                                <?php else : ?>

                                    <tr>
                                        <td colspan="6" class="text-center py-5">
                                            <div class="mb-3">
                                                <i class="fas fa-newspaper fa-3x text-muted"></i>
                                            </div>
                                            <h5 class="font-weight-bold">Belum Ada Artikel</h5>
                                            <p class="text-muted">Silakan tambahkan artikel terlebih dahulu.</p>
                                        </td>
                                    </tr>

                                <?php endif; ?>

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>
    </div>

</div>

<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: "‹" }
        }
    });

    $('#tabelArtikel').DataTable({
        responsive: true,
        autoWidth: false,
        language: {
            search: "Cari Artikel:",
            lengthMenu: "Tampilkan _MENU_ data",
            info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ artikel",
            infoEmpty: "Tidak ada data artikel",
            zeroRecords: "Data artikel tidak ditemukan",
            emptyTable: "Belum ada data artikel",
            paginate: { first: "Awal", last: "Akhir", next: "›", previous: "‹" }
        }
    });

    $('[data-toggle="tooltip"]').tooltip();
});
</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;
}

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

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

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

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

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

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

.badge {
    font-weight: 500;
}

.btn {
    border-radius: 6px;
}

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

.nav-tabs .nav-link {
    font-weight: 600;
    color: #495057;
}

.nav-tabs .nav-link.active {
    color: #007bff;
}

@media (max-width: 768px) {
    .small-box {
        margin-bottom: 10px;
    }
    .card-body {
        padding: 15px;
    }
}
</style>

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