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

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

<div class="row mb-4 align-items-center">
    <div class="col-md-6">
        <h4 class="fw-bold text-success"><i class="fa-solid fa-folder-open me-2"></i> Arsip Dokumen</h4>
        <p class="text-muted mb-0">Pusat unduhan berkas dan dokumen KPH III.</p>
    </div>
    <div class="col-md-6 text-md-end mt-3 mt-md-0">
        <?php if(session()->get('role') == 'Admin' || session()->get('role') == 'Kepala Seksi') : ?>
            <a href="<?= base_url('arsip/tambah') ?>" class="btn btn-success rounded-pill shadow-sm"><i class="fa-solid fa-plus me-2"></i> Tambah Dokumen</a>
        <?php endif; ?>
    </div>
</div>

<div class="card shadow-sm border-0">
    <div class="card-body p-0">
        <!-- Fitur Filter & Pencarian -->
        <div class="p-3 border-bottom bg-light">
            <div class="row g-2">
                <div class="col-md-4">
                    <select id="filterKategori" class="form-select">
                        <option value="">Semua Kategori</option>
                        <option value="Laporan Lapangan">Laporan Lapangan</option>
                        <option value="Surat Keputusan (SK)">Surat Keputusan (SK)</option>
                        <option value="Peta Spasial">Peta Spasial</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select id="filterTahun" class="form-select">
                        <option value="">Semua Tahun</option>
                        <option value="2026">2026</option>
                        <option value="2025">2025</option>
                    </select>
                </div>
                <div class="col-md-5">
                    <div class="input-group">
                        <span class="input-group-text bg-white"><i class="fa-solid fa-search text-muted"></i></span>
                        <input type="text" id="inputCari" class="form-control" placeholder="Cari judul spesifik...">
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabel Data -->
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light text-muted">
                    <tr>
                        <th class="ps-4">No</th>
                        <th>Judul Dokumen</th>
                        <th>Kategori</th>
                        <th>Tgl Upload</th>
                        <th class="text-center pe-4">Aksi</th>
                    </tr>
                </thead>
                <!-- Tambahkan ID tabelData disini -->
                <tbody id="tabelData">
                    <?php if(empty($dokumen)) : ?>
                    <tr>
                        <td colspan="5" class="text-center py-5 text-muted">
                            <i class="fa-solid fa-folder-open fa-3x mb-3 text-light"></i>
                            <p>Belum ada dokumen yang diunggah.</p>
                        </td>
                    </tr>
                    <?php else : ?>
                        <?php $no = 1; foreach($dokumen as $row) : ?>
                        <tr>
                            <td class="ps-4"><?= $no++ ?></td>
                            <td class="fw-bold text-dark"><?= $row['judul_dokumen'] ?></td>
                            <td><span class="badge bg-success bg-opacity-10 text-success border border-success"><?= $row['kategori'] ?></span></td>
                            <td><?= date('d M Y', strtotime($row['tanggal_upload'])) ?></td>
                            <td class="text-center pe-4">
                                <a href="<?= base_url('arsip/download/' . $row['id_dokumen']) ?>" class="btn btn-sm btn-primary rounded-pill shadow-sm mb-1"><i class="fa-solid fa-download"></i> Unduh</a>
                                
                                <?php if(session()->get('role') == 'Admin' || session()->get('role') == 'Kepala Seksi') : ?>
                                    <!-- Tombol Edit Arsip -->
                                    <a href="<?= base_url('arsip/edit/' . $row['id_dokumen']) ?>" class="btn btn-sm btn-warning rounded-pill shadow-sm mb-1"><i class="fa-solid fa-pen"></i> Edit</a>
                                    
                                    <a href="<?= base_url('arsip/hapus/' . $row['id_dokumen']) ?>" class="btn btn-sm btn-danger rounded-pill shadow-sm mb-1" onclick="return confirm('Apakah Anda yakin ingin menghapus?')"><i class="fa-solid fa-trash"></i> Hapus</a>
                                <?php endif; ?>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Script untuk Fitur Live Search -->
<script>
    function saringData() {
        let inputCari = document.getElementById('inputCari').value.toLowerCase();
        let kategori = document.getElementById('filterKategori').value.toLowerCase();
        let tahun = document.getElementById('filterTahun').value;
        let barisTabel = document.querySelectorAll('#tabelData tr');

        barisTabel.forEach(function(baris) {
            if (baris.cells.length > 1) {
                let teksJudul = baris.cells[1].textContent.toLowerCase();
                let teksKategori = baris.cells[2].textContent.toLowerCase();
                let teksTanggal = baris.cells[3].textContent; // Berisi tahun
                
                let cocokPencarian = teksJudul.includes(inputCari);
                let cocokKategori = kategori === "" || teksKategori.includes(kategori);
                let cocokTahun = tahun === "" || teksTanggal.includes(tahun);

                if (cocokPencarian && cocokKategori && cocokTahun) {
                    baris.style.display = '';
                } else {
                    baris.style.display = 'none';
                }
            }
        });
    }

    document.getElementById('inputCari').addEventListener('keyup', saringData);
    document.getElementById('filterKategori').addEventListener('change', saringData);
    document.getElementById('filterTahun').addEventListener('change', saringData);
</script>

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