Default page

Viewing : info_all.php

<?= $this->extend('front-template'); ?>
<?= $this->section('head'); ?>
<style type="text/css">
    /* Container Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px; /* Jarak antar kotak */
    list-style: none;
    padding: 20px 0;
}

/* Kotak Standar (Angka & Navigasi) */
.pagination li a, 
.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 10px; /* Membuat kotak sedikit membulat */
    background-color: #ffffff;
    color: #008080; /* Warna Hijau Teal */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Saat Kursor Diarahkan (Hover) */
.pagination li a:hover {
    background-color: #004d40; /* Hijau lebih gelap */
    color: #ffffff;
    border-color: #004d40;
    transform: translateY(-2px); /* Efek melompat sedikit */
}

/* Kotak Angka yang Sedang Aktif (Current Page) */
.pagination li.active span, 
.pagination li.active a {
    background-color: #008080 !important;
    color: #ffffff !important;
    border-color: #008080 !important;
    box-shadow: 0 4px 10px rgba(0, 128, 128, 0.3);
}

/* Kotak Non-Aktif (Misal tombol 'Next' jika sudah di akhir) */
.pagination li.disabled span {
    color: #bdbdbd;
    background-color: #f5f5f5;
    border-color: #eeeeee;
    cursor: not-allowed;
}
</style>
<style>
    /* Agar baris tabel sedikit lebih lega */
    .table td { padding-top: 15px; padding-bottom: 15px; }
    .btn-outline-primary { color: #008080; border-color: #008080; }
    .btn-outline-primary:hover { background-color: #008080; border-color: #008080; color: white; }
    .list-group-item-action:hover { background-color: #f0fdfa; }
</style>

<?= $this->endSection(); ?>
<?= $this->section('content'); ?>
<div class="container my-5">
    <div class="row g-5">
        <div class="col-lg-8">
            <nav aria-label="breadcrumb" class="mb-4">
                <ol class="breadcrumb small">
                    <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-muted">Beranda</a></li>
                    <li class="breadcrumb-item active text-primary" aria-current="page">Informasi</li>
                </ol>
            </nav>

            <h1 class="fw-bold display-6 mb-4" style="color: #004d40; line-height: 1.3;">
                Arsip Informasi & Pengumuman
            </h1>

            <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead style="background-color: #f8f9fa;">
                            <tr>
                                <th class="px-4 py-3 text-muted small" width="50">NO</th>
                                <th class="py-3 text-muted small">JUDUL INFORMASI</th>
                                <th class="py-3 text-muted small" width="150">TANGGAL</th>
                                <th class="py-3 text-muted small text-center" width="100">AKSI</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if(!empty($informasi)): ?>
                                <?php 
                                $no = 1 + (10 * ($pager->getCurrentPage('group_info') - 1));
                                foreach($informasi as $info): 
                                ?>
                                <tr>
                                    <td class="px-4 fw-bold text-muted"><?= $no++ ?></td>
                                    <td>
                                        <div class="fw-bold text-dark lh-sm"><?= $info['title'] ?></div>
                                        <div class="text-muted small mt-1 d-none d-md-block">
                                            <?= substr(strip_tags($info['narration']), 0, 80) ?>...
                                        </div>
                                    </td>
                                    <td class="text-muted small">
                                        <i class="bi bi-calendar3 me-1"></i> <?= date('d M Y', strtotime($info['created_at'])) ?>
                                    </td>
                                    <td class="text-center">
                                        <a href="<?= base_url('uploads/informasi/' . $info['file_path']) ?>" 
                                           class="btn btn-outline-primary btn-sm rounded-pill px-3" 
                                           target="_blank">
                                            <i class="bi bi-download me-1"></i> PDF
                                        </a>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <tr>
                                    <td colspan="4" class="text-center py-5 text-muted">Belum ada informasi yang dipublikasikan.</td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="d-flex justify-content-center">
                <?= $pager->links('group_info', 'default_full') ?>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="sticky-top" style="top: 100px; z-index: 1;">
                <h5 class="fw-bold mb-4" style="border-left: 5px solid #008080; padding-left: 15px;">Informasi Terbaru</h5>
                
                <div class="list-group list-group-flush shadow-sm rounded-4 overflow-hidden border">
                    <?php if(!empty($info_sidebar)): ?>
                        <?php foreach($info_sidebar as $is): ?>
                        <a href="<?= base_url('uploads/informasi/' . $is['file_path']) ?>" 
                           target="_blank"
                           class="list-group-item list-group-item-action p-3">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="fw-bold mb-1 text-dark small" style="line-height: 1.4;"><?= $is['title'] ?></h6>
                            </div>
                            <small class="text-primary fw-bold" style="font-size: 0.7rem;">
                                <i class="bi bi-file-earmark-pdf-fill"></i> DOWNLOAD PDF
                            </small>
                        </a>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>

                <div class="card border-0 rounded-4 mt-5 shadow-sm overflow-hidden text-white" style="background: linear-gradient(135deg, #008080 0%, #004d40 100%);">
                    <div class="card-body p-4">
                        <h6 class="fw-bold mb-2"><i class="bi bi-info-circle-fill me-2"></i>Bantuan</h6>
                        <p class="small opacity-75 mb-0">Pastikan perangkat Anda memiliki aplikasi pembaca PDF untuk melihat dokumen.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?= $this->endSection(); ?>