<?php 
include '../includes/config.php'; 
include '../includes/header.php'; 

$laporan = null;
$error = null;

if (isset($_GET['kode'])) {
    // Trim spasi dan pastikan format konsisten
    $kode = strtoupper(trim($_GET['kode']));
    
    try {
        // Pencarian case-insensitive terhadap kode_tracking
        $stmt = $pdo->prepare("SELECT * FROM laporan WHERE UPPER(kode_tracking) = ?");
        $stmt->execute([$kode]);
        $laporan = $stmt->fetch();
        
        if (!$laporan) {
            $error = "Maaf, kode tracking <strong>$kode</strong> tidak ditemukan. Silakan periksa kembali.";
        }
    } catch (PDOException $e) {
        $error = "Terjadi kesalahan sistem: " . $e->getMessage();
    }
}
?>

<style>
    body { background-color: #f0f2f5; font-family: 'Inter', sans-serif; }
    .card-search { border-radius: 15px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
    .status-badge { border-radius: 50px; padding: 12px 30px; font-weight: 700; text-transform: uppercase; }
    
    /* Timeline Logic */
    .timeline-steps { display: flex; justify-content: space-between; align-items: center; position: relative; margin-top: 40px; }
    .timeline-steps::before { content: ""; position: absolute; top: 22px; left: 10%; right: 10%; height: 4px; background: #dee2e6; z-index: 0; }
    
    .step-item { position: relative; z-index: 1; text-align: center; flex: 1; }
    .step-icon { width: 45px; height: 45px; border-radius: 50%; background: #dee2e6; color: white; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; border: 5px solid #fff; transition: all 0.3s ease; }
    
    /* Warna Status Aktif (Biru) */
    .step-active .step-icon { background: #0d6efd; box-shadow: 0 0 15px rgba(13,110,253,0.3); transform: scale(1.1); }
    .step-active .step-label { color: #0d6efd; font-weight: 700; }
    
    /* Warna Status Selesai (Hijau) */
    .step-success .step-icon { background: #198754 !important; box-shadow: 0 0 15px rgba(25,135,84,0.3); }
    .step-success .step-label { color: #198754 !important; }

    /* Warna Status Ditolak (Merah) */
    .step-rejected .step-icon { background: #dc3545 !important; box-shadow: 0 0 15px rgba(220,53,69,0.3); }
    .step-rejected .step-label { color: #dc3545 !important; }

    .step-label { font-size: 0.7rem; color: #adb5bd; text-transform: uppercase; letter-spacing: 0.5px; }
    .catatan-box { border-left: 5px solid; border-radius: 8px; }
    
    @media print { .btn, form, .text-muted, .navbar, footer { display: none !important; } .container { margin-top: 0; } }
</style>

<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            
            <div class="text-center mb-5 d-print-none">
                <h2 class="fw-bold text-primary">Lacak Aduan Anda</h2>
                <p class="text-muted">Gunakan kode unik yang Anda terima saat mengirim laporan.</p>
            </div>

            <div class="card card-search mb-4 d-print-none">
                <div class="card-body p-4">
                    <form action="" method="GET">
                        <div class="input-group input-group-lg">
                            <span class="input-group-text bg-white border-end-0 text-primary"><i class="bi bi-search"></i></span>
                            <input type="text" name="kode" class="form-control border-start-0" 
                                   placeholder="Masukkan Kode Tracking..." 
                                   value="<?= isset($_GET['kode']) ? htmlspecialchars($_GET['kode']) : '' ?>" required>
                            <button type="submit" class="btn btn-primary px-4 fw-bold">Cek Progres</button>
                        </div>
                    </form>
                </div>
            </div>

            <?php if ($error): ?>
                <div class="alert alert-danger border-0 shadow-sm d-flex align-items-center" role="alert">
                    <i class="bi bi-exclamation-triangle-fill me-3 fs-3"></i>
                    <div><?= $error ?></div>
                </div>
            <?php endif; ?>

            <?php if ($laporan): ?>
                <?php 
                    $status = $laporan['status'];
                    $badge = 'bg-secondary';
                    if($status == 'Baru') $badge = 'bg-danger';
                    if($status == 'Diproses') $badge = 'bg-warning text-dark';
                    if($status == 'Selesai') $badge = 'bg-success';
                    if($status == 'Ditolak') $badge = 'bg-dark';
                ?>

                <div class="card card-search animate__animated animate__fadeIn">
                    <div class="card-header bg-white py-4 border-0 text-center">
                        <span class="text-muted small">STATUS SAAT INI</span><br>
                        <div class="badge <?= $badge ?> status-badge fs-5 mt-2 shadow-sm"><?= $status ?></div>
                    </div>

                    <div class="card-body p-4 p-md-5 pt-0">
                        
                        <div class="timeline-steps mb-5">
                            <?php if ($status == 'Ditolak'): ?>
                                <div class="step-item step-active">
                                    <div class="step-icon"><i class="bi bi-file-earmark-check"></i></div>
                                    <div class="step-label">Diterima</div>
                                </div>
                                <div class="step-item step-active step-rejected">
                                    <div class="step-icon"><i class="bi bi-x-circle"></i></div>
                                    <div class="step-label">Ditolak</div>
                                </div>
                            <?php else: ?>
                                <div class="step-item <?= ($status == 'Baru' || $status == 'Diproses' || $status == 'Selesai') ? 'step-active' : '' ?>">
                                    <div class="step-icon"><i class="bi bi-file-earmark-plus"></i></div>
                                    <div class="step-label">Diterima</div>
                                </div>
                                <div class="step-item <?= ($status == 'Diproses' || $status == 'Selesai') ? 'step-active' : '' ?>">
                                    <div class="step-icon"><i class="bi bi-gear-wide-connected"></i></div>
                                    <div class="step-label">Diproses</div>
                                </div>
                                <div class="step-item <?= ($status == 'Selesai') ? 'step-active step-success' : '' ?>">
                                    <div class="step-icon"><i class="bi bi-check-circle-fill"></i></div>
                                    <div class="step-label">Selesai</div>
                                </div>
                            <?php endif; ?>
                        </div>

                        <div class="row g-4">
                            <div class="col-md-6">
                                <label class="text-muted small fw-bold text-uppercase">Kode Tracking</label>
                                <p class="fw-bold text-primary fs-5 mb-0"><?= $laporan['kode_tracking'] ?></p>
                            </div>
                            <div class="col-md-6 text-md-end text-start">
                                <label class="text-muted small fw-bold text-uppercase">Tanggal Lapor</label>
                                <p class="fw-semibold mb-0"><?= date('d F Y', strtotime($laporan['created_at'])) ?></p>
                            </div>
                            
                            <div class="col-12">
                                <label class="text-muted small fw-bold text-uppercase">Dugaan Pelanggaran</label>
                                <div class="p-3 bg-light rounded-3 mt-1">
                                    <?= htmlspecialchars($laporan['jenis_dugaan']) ?>
                                </div>
                            </div>

                            <div class="col-12">
                                <label class="text-muted small fw-bold text-uppercase">Tanggapan Admin/Petugas</label>
                                <div class="catatan-box p-3 mt-1 <?= ($status == 'Ditolak') ? 'bg-danger-subtle border-danger' : 'bg-primary-subtle border-primary' ?>">
                                    <p class="mb-0 fst-italic text-dark">
                                        <?= !empty($laporan['catatan_admin']) ? '"'.htmlspecialchars($laporan['catatan_admin']).'"' : 'Laporan telah diterima. Petugas sedang melakukan verifikasi awal atas data dan bukti yang Anda lampirkan.' ?>
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-5 d-print-none">
                            <button onclick="window.print()" class="btn btn-outline-dark btn-sm rounded-pill px-4">
                                <i class="bi bi-printer me-2"></i>Cetak Status Laporan
                            </button>
                        </div>
                    </div>
                </div>
            <?php endif; ?>

        </div>
    </div>
</div>

<?php include '../includes/footer.php'; ?>