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

<?= $this->section('content') ?>
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <a href="<?= base_url('admin/pengaduan') ?>" class="btn btn-sm btn-light text-secondary border-0 rounded-pill px-3 fw-medium mb-2"><i class="bi bi-arrow-left me-1"></i> Kembali ke Daftar</a>
        <h3 class="fw-bold text-dark mb-0">Detail Laporan: <span class="text-primary"><?= $pengaduan['id_pengaduan'] ?></span></h3>
    </div>
    
    <div>
        <?php if($pengaduan['is_anonim'] == 1): ?>
            <span class="badge bg-dark bg-opacity-10 text-dark border border-dark border-opacity-25 px-3 py-2 rounded-pill fs-6 fw-medium"><i class="bi bi-incognito me-1"></i> Pelapor Anonim (Notif WA Nonaktif)</span>
        <?php else: ?>
            <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25 px-3 py-2 rounded-pill fs-6 fw-medium"><i class="bi bi-whatsapp me-1"></i> Notif WA Aktif (<?= $pengaduan['no_hp'] ?>)</span>
        <?php endif; ?>
    </div>
</div>

<div class="row g-4">
    <!-- Kolom Kiri: Detail Laporan -->
    <div class="col-md-7">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-header bg-white border-bottom-0 pt-4 pb-0 px-4">
                <h5 class="fw-bold text-dark mb-0">Informasi Laporan</h5>
            </div>
            <div class="card-body p-4">
                
                <!-- Box Meta Data -->
                <div class="bg-light p-3 rounded-4 border border-light-subtle mb-4">
                    <div class="row text-dark mb-3">
                        <div class="col-sm-4 text-muted fw-medium fs-7">Tanggal Masuk</div>
                        <div class="col-sm-8 fw-bold"><?= date('d M Y, H:i', strtotime($pengaduan['created_at'])) ?></div>
                    </div>
                    <div class="row text-dark mb-3">
                        <div class="col-sm-4 text-muted fw-medium fs-7">Kategori</div>
                        <div class="col-sm-8 fw-bold">
                            <span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 px-2 py-1 rounded-pill"><?= $pengaduan['nama_kategori'] ?></span>
                        </div>
                    </div>
                    <div class="row text-dark mb-3">
                        <div class="col-sm-4 text-muted fw-medium fs-7">Tujuan Laporan</div>
                        <div class="col-sm-8 fw-bold">
                            <?php if($pengaduan['kategori_id'] == 1): ?>
                                <i class="bi bi-building text-primary me-1"></i> Komisi: <?= $pengaduan['nama_komisi'] ?? '-' ?>
                            <?php else: ?>
                                <i class="bi bi-person-badge text-success me-1"></i> Anggota DPRD: <?= $pengaduan['nama_anggota'] ?? '-' ?>
                            <?php endif; ?>
                        </div>
                    </div>
                    <hr class="border-secondary border-opacity-25 my-3">
                    <div class="row text-dark mb-3">
                        <div class="col-sm-4 text-muted fw-medium fs-7">Nama Pelapor</div>
                        <div class="col-sm-8 fw-bold"><?= $pengaduan['is_anonim'] == 1 ? '<span class="text-danger"><i class="bi bi-incognito"></i> Rahasia / Anonim</span>' : $pengaduan['nama'] ?></div>
                    </div>
                    <div class="row text-dark">
                        <div class="col-sm-4 text-muted fw-medium fs-7">Alamat Pelapor</div>
                        <div class="col-sm-8"><?= $pengaduan['is_anonim'] == 1 ? '-' : $pengaduan['alamat'] ?></div>
                    </div>
                </div>
                
                <!-- Konten Laporan -->
                <h5 class="fw-bold mt-2 text-dark fs-4"><?= $pengaduan['judul'] ?></h5>
                <div class="d-flex gap-3 mb-3 text-muted fs-7 fw-medium">
                    <span><i class="bi bi-geo-alt-fill text-danger me-1"></i> <?= $pengaduan['lokasi'] ?></span>
                    <span><i class="bi bi-calendar-event-fill text-primary me-1"></i> <?= date('d M Y', strtotime($pengaduan['tanggal'])) ?></span>
                </div>
                
                <div class="p-4 bg-white border border-light-subtle rounded-4 mb-4 shadow-sm">
                    <p class="mb-0 text-dark" style="line-height: 1.7;">
                        <?= nl2br($pengaduan['detail_laporan']) ?>
                    </p>
                </div>
                
                <?php if($pengaduan['lampiran']): ?>
                    <div class="mt-4">
                        <p class="fw-bold text-dark mb-2">Dokumen Lampiran:</p>
                        <a href="<?= base_url('uploads/lampiran/' . $pengaduan['lampiran']) ?>" target="_blank" class="btn btn-light border text-primary rounded-pill px-4 fw-medium shadow-sm hover-elevate-up">
                            <i class="bi bi-file-earmark-arrow-down-fill me-2"></i> Lihat / Unduh Lampiran
                        </a>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Kolom Kanan: Update Progres & Riwayat -->
    <div class="col-md-5 d-flex flex-column gap-4">
        
        <!-- Form Tindak Lanjut -->
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-header bg-white border-bottom-0 pt-4 pb-0 px-4">
                <h5 class="fw-bold text-dark mb-0">Tindak Lanjuti Laporan</h5>
            </div>
            <div class="card-body p-4">
                <form action="<?= base_url('admin/pengaduan/update') ?>" method="POST">
                    <input type="hidden" name="id_pengaduan" value="<?= $pengaduan['id_pengaduan'] ?>">
                    
                    <div class="mb-4">
                        <label class="form-label fw-bold text-dark fs-7">Ubah Status</label>
                        <select class="form-select border-light-subtle rounded-3 py-2 shadow-none" name="status_id" required>
                            <?php foreach($status_options as $status): ?>
                                <option value="<?= $status['id'] ?>" <?= $status['id'] == $pengaduan['status_id'] ? 'selected' : '' ?>>
                                    <?= $status['nama_status'] ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label fw-bold text-dark fs-7">Catatan / Tanggapan</label>
                        <textarea class="form-control border-light-subtle rounded-3 p-3 shadow-none" name="tanggapan" rows="3" required placeholder="Ketik tanggapan atau pembaruan progres di sini..."></textarea>
                        <?php if($pengaduan['is_anonim'] == 0): ?>
                            <div class="d-flex align-items-center mt-2 p-2 bg-success bg-opacity-10 rounded-3">
                                <i class="bi bi-info-circle-fill text-success me-2"></i>
                                <small class="text-success fw-medium">Catatan ini akan otomatis dikirimkan ke WhatsApp pelapor.</small>
                            </div>
                        <?php endif; ?>
                    </div>
                    
                    <button type="submit" class="btn btn-primary w-100 rounded-pill fw-bold py-2 shadow-sm">Simpan Pembaruan</button>
                </form>
            </div>
        </div>

        <!-- Riwayat Timeline -->
        <div class="card border-0 shadow-sm rounded-4 flex-grow-1">
            <div class="card-header bg-white border-bottom-0 pt-4 pb-0 px-4">
                <h5 class="fw-bold text-dark mb-0">Riwayat Progres</h5>
            </div>
            <div class="card-body p-4">
                <div class="timeline mt-2" style="border-left: 2px dashed #cbd5e1; margin-left: 15px; padding-left: 25px;">
                    <?php foreach($history as $hist): ?>
                    <div class="mb-4 position-relative">
                        <!-- Titik Timeline -->
                        <span class="position-absolute bg-primary rounded-circle shadow-sm border border-2 border-white" style="left: -32px; top: 0; width: 14px; height: 14px;"></span>
                        
                        <div class="d-flex align-items-center mb-2">
                            <?php 
                                $badgeClass = 'bg-secondary';
                                if($hist['status_id'] == 1) $badgeClass = 'bg-danger';
                                if($hist['status_id'] == 3) $badgeClass = 'bg-warning text-dark';
                                if($hist['status_id'] == 4) $badgeClass = 'bg-success';
                            ?>
                            <span class="badge <?= $badgeClass ?> rounded-pill px-2 py-1 me-2 shadow-none"><?= $hist['nama_status'] ?></span>
                            <small class="text-muted fw-medium"><i class="bi bi-clock me-1"></i><?= date('d/m/Y H:i', strtotime($hist['created_at'])) ?></small>
                        </div>
                        
                        <div class="p-3 bg-light rounded-4 border border-light-subtle text-dark" style="font-size: 0.9rem; line-height: 1.5;">
                            <?= nl2br($hist['tanggapan']) ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        
    </div>
</div>
<?= $this->endSection() ?>