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

<?= $this->section('content') ?>
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-gray-800 fw-bold">Daftar OPD</h1>
            <p class="mb-0 text-muted">Organisasi Perangkat Daerah</p>
        </div>
        <a href="<?= base_url('opd/create') ?>" class="btn btn-primary shadow-sm">
            <i class="fas fa-plus fa-sm text-white-50 me-1"></i> Tambah OPD
        </a>
    </div>

    <?php if(session()->getFlashdata('success')): ?>
        <div class="alert alert-success alert-dismissible fade show shadow-sm border-0 border-start border-success border-4" role="alert">
            <i class="fas fa-check-circle me-2"></i> <?= session()->getFlashdata('success') ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    <?php endif; ?>

    <div class="card shadow-sm border-0 mb-4 rounded-3">
        <div class="card-header bg-white py-3 border-0 d-flex align-items-center justify-content-between">
            <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-building me-2"></i>Data OPD</h6>
            <div class="input-group input-group-sm" style="width: 250px;">
                <input type="text" class="form-control bg-light border-0 small" placeholder="Cari OPD..." aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="button">
                        <i class="fas fa-search fa-sm"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-striped align-middle mb-0" width="100%" cellspacing="0">
                    <thead class="bg-light text-secondary">
                        <tr>
                            <th width="5%" class="text-center py-3">No</th>
                            <th class="py-3">Nama OPD</th>
                            <th class="py-3">Bidang Pengampu</th>
                            <th width="15%" class="text-center py-3">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach($opd as $index => $o): ?>
                        <tr>
                            <td class="text-center fw-bold text-secondary"><?= $index + 1 ?></td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="bg-success bg-opacity-10 text-success rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 35px; height: 35px;">
                                        <i class="fas fa-building"></i>
                                    </div>
                                    <span class="fw-bold"><?= $o['nama_opd'] ?></span>
                                </div>
                            </td>
                            <td>
                                <?php if($o['nama_bidang']): ?>
                                    <span class="badge bg-light text-dark border"><i class="fas fa-layer-group text-primary me-1"></i> <?= $o['nama_bidang'] ?></span>
                                <?php else: ?>
                                    <span class="text-muted fst-italic">-</span>
                                <?php endif; ?>
                            </td>
                            <td class="text-center">
                                <a href="<?= base_url('opd/edit/'.$o['id']) ?>" class="btn btn-warning btn-sm btn-icon-split shadow-sm me-1" title="Edit">
                                    <span class="icon text-white-50"><i class="fas fa-edit"></i></span>
                                </a>
                                <a href="<?= base_url('opd/delete/'.$o['id']) ?>" class="btn btn-danger btn-sm btn-icon-split shadow-sm" onclick="return confirm('Yakin ingin menghapus OPD ini?')" title="Hapus">
                                    <span class="icon text-white-50"><i class="fas fa-trash"></i></span>
                                </a>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer bg-white border-0 py-3">
            <small class="text-muted">Total <?= count($opd) ?> OPD terdaftar</small>
        </div>
    </div>
</div>
<?= $this->endSection() ?>
