<?= $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-users me-2"></i> Data Pegawai & Polhut</h4>
        <p class="text-muted mb-0">Direktori kontak internal KPH III Asahan.</p>
    </div>
    <div class="col-md-6 text-md-end mt-3 mt-md-0">
        <!-- Link tombol tambah diaktifkan -->
        <a href="<?= base_url('pegawai/tambah') ?>" class="btn btn-success rounded-pill shadow-sm"><i class="fa-solid fa-user-plus me-2"></i> Tambah Pegawai</a>
    </div>
</div>

<div class="card shadow-sm border-0">
    <div class="card-body p-0">
        <div class="p-3 border-bottom bg-light">
            <div class="input-group">
                <span class="input-group-text bg-white border-end-0"><i class="fa-solid fa-search text-muted"></i></span>
                <input type="text" id="cariPegawai" class="form-control border-start-0" placeholder="Cari nama atau jabatan pegawai...">
            </div>
        </div>

        <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>Nama Pegawai</th>
                        <th>NIP</th>
                        <th>Jabatan</th>
                        <th>Kontak</th>
                        <th>Status</th>
                        <th class="text-center pe-4">Aksi</th>
                    </tr>
                </thead>
                <tbody id="tabelPegawai">
                    <?php if (empty($pegawai)) : ?>
                        <tr>
                            <td colspan="7" class="text-center py-5 text-muted">
                                <i class="fa-solid fa-users-slash fa-3x mb-3 text-light"></i>
                                <p>Data pegawai belum ditambahkan.</p>
                            </td>
                        </tr>
                    <?php else : ?>
                        <?php $no = 1;
                        foreach ($pegawai as $row) : ?>
                            <tr>
                                <td class="ps-4"><?= $no++ ?></td>
                                <td class="fw-bold text-dark">
                                    <i class="fa-solid fa-circle-user text-secondary me-2 fs-5 align-middle"></i>
                                    <?= $row['nama_pegawai'] ?>
                                </td>
                                <td><?= $row['nip'] ?></td>
                                <td><?= $row['jabatan'] ?></td>
                                <td>
                                    <a href="https://wa.me/<?= preg_replace('/[^0-9]/', '', $row['no_hp']) ?>" target="_blank" class="text-decoration-none text-success">
                                        <i class="fa-brands fa-whatsapp me-1"></i> Hubungi
                                    </a>
                                </td>
                                <td>
                                    <?php if ($row['status'] == 'Aktif'): ?>
                                        <span class="badge bg-success rounded-pill px-3">Aktif</span>
                                    <?php else: ?>
                                        <span class="badge bg-secondary rounded-pill px-3">Nonaktif</span>
                                    <?php endif; ?>
                                </td>
                                <td class="text-center pe-4">
                                <!-- Tombol Edit Ditambahkan -->
                                <a href="<?= base_url('pegawai/edit/' . $row['id_pegawai']) ?>" class="btn btn-sm btn-warning rounded-circle shadow-sm me-1" title="Edit Data">
                                    <i class="fa-solid fa-pen text-dark"></i>
                                </a>
                                
                                <a href="<?= base_url('pegawai/hapus/' . $row['id_pegawai']) ?>" class="btn btn-sm btn-outline-danger rounded-circle shadow-sm" onclick="return confirm('Yakin ingin menghapus data pegawai ini?')" title="Hapus Data">
                                    <i class="fa-solid fa-trash"></i>
                                </a>
                            </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    // Live Search
    document.getElementById('cariPegawai').addEventListener('keyup', function() {
        let filter = this.value.toLowerCase();
        let barisTabel = document.querySelectorAll('#tabelPegawai tr');

        barisTabel.forEach(function(baris) {
            if (baris.cells.length > 1) {
                let teksNama = baris.cells[1].textContent.toLowerCase();
                let teksJabatan = baris.cells[3].textContent.toLowerCase();

                if (teksNama.includes(filter) || teksJabatan.includes(filter)) {
                    baris.style.display = '';
                } else {
                    baris.style.display = 'none';
                }
            }
        });
    });
</script>

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