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

<?= $this->section('content') ?>
<div class="d-flex justify-content-between align-items-end mb-4">
    <div>
        <h3 class="fw-bold text-dark mb-0">Kelola Pengaduan</h3>
        <p class="text-muted mb-0 mt-1">Daftar seluruh laporan pengaduan dan aspirasi masyarakat</p>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4">
    <div class="card-body p-4">
        
        <!-- Filter Bar (Tradisional GET Form) -->
        <form action="<?= base_url('admin/pengaduan') ?>" method="GET" class="row g-3 mb-4 bg-light p-3 rounded-4 border border-light-subtle" style="max-width: 600px;">
            <div class="col-md-4">
                <select name="jenis" class="form-select border-0 shadow-none">
                    <option value="">Semua Jenis</option>
                    <option value="1" <?= (isset($filter_jenis) && $filter_jenis == '1') ? 'selected' : '' ?>>Pengaduan</option>
                    <option value="2" <?= (isset($filter_jenis) && $filter_jenis == '2') ? 'selected' : '' ?>>Aspirasi</option>
                </select>
            </div>
            <div class="col-md-4">
                <select name="status" class="form-select border-0 shadow-none">
                    <option value="">Semua Status</option>
                    <option value="1" <?= (isset($filter_status) && $filter_status == '1') ? 'selected' : '' ?>>Baru</option>
                    <option value="2" <?= (isset($filter_status) && $filter_status == '2') ? 'selected' : '' ?>>Ditunda</option>
                    <option value="3" <?= (isset($filter_status) && $filter_status == '3') ? 'selected' : '' ?>>Ditindaklanjuti</option>
                    <option value="4" <?= (isset($filter_status) && $filter_status == '4') ? 'selected' : '' ?>>Tuntas</option>
                </select>
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-dark w-100 rounded-pill fw-medium"><i class="bi bi-search me-2"></i>Filter</button>
            </div>
        </form>

        <div class="table-responsive">
            <table class="table table-hover align-middle border-bottom">
                <thead class="table-light">
                    <tr>
                        <th class="text-uppercase text-muted" style="font-size: 0.8rem; font-weight: 600; letter-spacing: 0.5px;">ID Laporan</th>
                        <th class="text-uppercase text-muted" style="font-size: 0.8rem; font-weight: 600; letter-spacing: 0.5px;">Tanggal</th>
                        <th class="text-uppercase text-muted" style="font-size: 0.8rem; font-weight: 600; letter-spacing: 0.5px;">Jenis</th>
                        <th class="text-uppercase text-muted" style="font-size: 0.8rem; font-weight: 600; letter-spacing: 0.5px;">Pelapor</th>
                        <th class="text-uppercase text-muted" style="font-size: 0.8rem; font-weight: 600; letter-spacing: 0.5px;">Judul Laporan</th>
                        <th class="text-uppercase text-muted" style="font-size: 0.8rem; font-weight: 600; letter-spacing: 0.5px;">Status</th>
                        <th class="text-uppercase text-muted text-center" style="font-size: 0.8rem; font-weight: 600; letter-spacing: 0.5px;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if(empty($pengaduan)): ?>
                        <tr>
                            <td colspan="7" class="text-center py-5">
                                <i class="bi bi-inboxes text-muted" style="font-size: 3rem;"></i>
                                <p class="text-muted mt-2 mb-0">Belum ada data pengaduan masuk atau filter tidak ditemukan.</p>
                            </td>
                        </tr>
                    <?php else: ?>
                        <?php foreach($pengaduan as $row): ?>
                        <tr>
                            <td><span class="fw-bold text-dark"><?= $row['id_pengaduan'] ?></span></td>
                            <td class="text-muted" style="font-size: 0.9rem;"><?= date('d/m/Y H:i', strtotime($row['created_at'])) ?></td>
                            <td>
                                <span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 px-2 py-1 rounded-pill">
                                    <?= $row['nama_kategori'] ?>
                                </span>
                            </td>
                            <td>
                                <?php if($row['is_anonim'] == 1): ?>
                                    <span class="badge bg-dark bg-opacity-10 text-dark border border-dark border-opacity-25 px-2 py-1 rounded-pill"><i class="bi bi-incognito me-1"></i>Anonim</span>
                                <?php else: ?>
                                    <span class="fw-medium text-dark"><?= $row['nama'] ?></span>
                                <?php endif; ?>
                            </td>
                            <td class="text-dark fw-medium">
                                <?= strlen($row['judul']) > 35 ? substr($row['judul'], 0, 35) . '...' : $row['judul'] ?>
                            </td>
                            <td>
                                <?php 
                                    $badgeClass = 'bg-secondary bg-opacity-10 text-secondary border-secondary';
                                    if($row['status_id'] == 1) $badgeClass = 'bg-danger bg-opacity-10 text-danger border-danger';
                                    if($row['status_id'] == 3) $badgeClass = 'bg-warning bg-opacity-10 text-warning border-warning';
                                    if($row['status_id'] == 4) $badgeClass = 'bg-success bg-opacity-10 text-success border-success';
                                ?>
                                <span class="badge <?= $badgeClass ?> border border-opacity-25 px-3 py-2 rounded-pill shadow-none fw-bold">
                                    <?= $row['nama_status'] ?>
                                </span>
                            </td>
                            <td class="text-center">
                                <div class="d-flex justify-content-center gap-2">
                                    <!-- Tombol Lihat -->
                                    <button type="button" class="btn btn-sm btn-light text-primary border-0 rounded-circle" style="width: 35px; height: 35px;" title="Lihat Ringkasan" data-bs-toggle="modal" data-bs-target="#modalLihat<?= $row['id_pengaduan'] ?>">
                                        <i class="bi bi-eye-fill"></i>
                                    </button>
                                    <!-- Tombol Tindak Lanjuti -->
                                    <a href="<?= base_url('admin/pengaduan/detail/' . $row['id_pengaduan']) ?>" class="btn btn-sm btn-light text-success border-0 rounded-circle" style="width: 35px; height: 35px;" title="Tindak Lanjuti">
                                        <i class="bi bi-pencil-square"></i>
                                    </a>
                                    <!-- Tombol Hapus -->
                                    <a href="<?= base_url('admin/pengaduan/hapus/' . $row['id_pengaduan']) ?>" class="btn btn-sm btn-light text-danger border-0 rounded-circle" style="width: 35px; height: 35px;" title="Hapus Data" onclick="return confirm('Yakin ingin menghapus laporan ini secara permanen?')">
                                        <i class="bi bi-trash-fill"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>

        <!-- Modal -->
        <?php if(!empty($pengaduan)): ?>
            <?php foreach($pengaduan as $row): ?>
            <div class="modal fade" id="modalLihat<?= $row['id_pengaduan'] ?>" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content rounded-4 border-0 shadow-lg">
                        <div class="modal-header border-bottom-0 pb-0 pt-4 px-4">
                            <h5 class="modal-title fw-bold text-dark">Ringkasan Laporan: <span class="text-primary"><?= $row['id_pengaduan'] ?></span></h5>
                            <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body p-4">
                            <div class="bg-light p-3 rounded-4 border border-light-subtle mb-4">
                                <div class="row text-dark">
                                    <div class="col-sm-6 mb-3 mb-sm-0">
                                        <small class="text-muted d-block mb-1">Pelapor</small>
                                        <span class="fw-bold"><?= $row['is_anonim'] == 1 ? '<i class="bi bi-incognito text-danger me-1"></i> Rahasia / Anonim' : $row['nama'] . ' (' . $row['no_hp'] . ')' ?></span>
                                    </div>
                                    <div class="col-sm-6">
                                        <small class="text-muted d-block mb-1">Tujuan Laporan</small>
                                        <span class="fw-bold">
                                            <?php if($row['kategori_id'] == 1): ?>
                                                <i class="bi bi-building text-primary me-1"></i> Komisi: <?= $row['nama_komisi'] ?? '-' ?>
                                            <?php else: ?>
                                                <i class="bi bi-person-badge text-success me-1"></i> Anggota DPRD: <?= $row['nama_anggota'] ?? '-' ?>
                                            <?php endif; ?>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            
                            <table class="table table-borderless mb-0 text-dark align-middle">
                                <tr>
                                    <td width="30%" class="text-muted py-2">Tanggal Kejadian</td>
                                    <td width="70%" class="fw-semibold py-2"><?= date('d M Y', strtotime($row['tanggal'])) ?></td>
                                </tr>
                                <tr>
                                    <td class="text-muted py-2">Lokasi</td>
                                    <td class="fw-semibold py-2"><?= $row['lokasi'] ?></td>
                                </tr>
                                <tr>
                                    <td class="text-muted py-2">Judul</td>
                                    <td class="fw-semibold py-2 fs-5"><?= $row['judul'] ?></td>
                                </tr>
                            </table>
                            
                            <div class="p-3 bg-white border border-light-subtle rounded-3 mt-3">
                                <small class="text-muted d-block mb-2 fw-medium">Detail Isi Laporan:</small>
                                <p class="text-dark mb-0" style="line-height: 1.6;">
                                    <?= nl2br($row['detail_laporan']) ?>
                                </p>
                            </div>
                        </div>
                        <div class="modal-footer border-top-0 pt-0 pb-4 px-4">
                            <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Tutup</button>
                            <a href="<?= base_url('admin/pengaduan/detail/' . $row['id_pengaduan']) ?>" class="btn btn-primary rounded-pill px-4 fw-medium">Tindak Lanjuti Laporan</a>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        <?php endif; ?>

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