<?php
require_once '../config.php';
$app_title = getSetting($pdo, 'app_title');
$app_align = getSetting($pdo, 'app_align') ?: 'text-center';
$page_title = "Lacak Pengajuan - " . $app_title;
$active_page = 'track';

$tiket = isset($_GET['tiket']) ? trim($_GET['tiket']) : '';
$data = null;

if (!empty($tiket)) {
    $stmt = $pdo->prepare("SELECT * FROM tbl_pengajuan WHERE no_tiket = ? LIMIT 1");
    $stmt->execute([$tiket]);
    $data = $stmt->fetch();
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($page_title) ?></title>
    <link rel="icon" type="image/png" href="<?= base_url('logo/logo.png?v='.time()) ?>">
    <link rel="shortcut icon" type="image/png" href="<?= base_url('logo/logo.png?v='.time()) ?>">
    <?php if(file_exists('logo/logo.png')): ?>
    <link rel="preload" as="image" href="<?= base_url('logo/logo.png') ?>">
    <?php endif; ?>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        html, body { height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; background-color: #f8f9fa; }
        .track-wrapper { height: 100vh; display: flex; flex-direction: column; }
        .track-container { flex: 1; overflow-y: auto; padding: 1rem; max-width: 1200px; margin: 0 auto; width: 100%; }
        
        /* Perbaikan scroll khusus Mobile */
        @media (max-width: 767px) {
            html, body { height: auto; overflow: visible; }
            .track-container { overflow-y: visible; padding-bottom: 2rem; }
        }

        .stepper-wrapper {
            display: flex; justify-content: space-between; margin-top: 30px; margin-bottom: 20px; position: relative;
        }
        .stepper-wrapper::before {
            content: ""; position: absolute; top: 18px; left: 0; width: 100%; height: 4px; background-color: #e9ecef; z-index: 0;
        }
        .stepper-item {
            position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; z-index: 1; text-align: center;
        }
        .stepper-item::after {
            content: ""; position: absolute; top: 18px; left: 50%; width: 100%; height: 4px; background-color: #e9ecef; z-index: -1;
        }
        .stepper-item:last-child::after { display: none; }
        
        .step-counter {
            width: 40px; height: 40px; border-radius: 50%; background: #e9ecef; color: #6c757d;
            display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 1.1rem;
            border: 4px solid #fff; transition: all 0.3s;
        }
        .step-name { margin-top: 12px; font-size: 0.95rem; font-weight: 700; color: #6c757d; }
        .step-date { font-size: 0.75rem; color: #adb5bd; margin-top: 2px; }

        /* Completed Step */
        .stepper-item.completed .step-counter { background-color: #0d6efd; color: #fff; }
        .stepper-item.completed .step-name { color: #0d6efd; }
        .stepper-item.completed::after { background-color: #0d6efd; }

        /* Active Step (Blinking/Pulse) */
        .stepper-item.active .step-counter { background-color: #0d6efd; color: #fff; box-shadow: 0 0 0 5px rgba(13, 110, 253, 0.2); }
        .stepper-item.active .step-name { color: #0d6efd; }

        /* Success Step (Selesai) */
        .stepper-item.success .step-counter { background-color: #198754; color: #fff; box-shadow: 0 0 0 5px rgba(25, 135, 84, 0.2); }
        .stepper-item.success .step-name { color: #198754; }

        /* Danger Step (Ditolak) */
        .stepper-item.danger .step-counter { background-color: #dc3545; color: #fff; box-shadow: 0 0 0 5px rgba(220, 53, 69, 0.2); }
        .stepper-item.danger .step-name { color: #dc3545; }

        @media (max-width: 768px) {
            .stepper-wrapper { flex-direction: column; align-items: flex-start; padding-left: 20px; }
            .stepper-wrapper::before { top: 0; left: 38px; width: 4px; height: 100%; }
            .stepper-item { flex-direction: row; align-items: flex-start; margin-bottom: 30px; width: 100%; text-align: left; }
            .stepper-item::after { display: none; /* Hide horizontal connecting lines on mobile */ }
            .step-counter { margin-right: 20px; z-index: 2; flex-shrink: 0; }
            .step-content { flex: 1; padding-top: 5px; }
            .step-name { margin-top: 0; }
            /* Mobile vertical line colored for completed steps */
            .stepper-item.completed::before {
                content: ""; position: absolute; top: 40px; left: 18px; width: 4px; height: calc(100% + 30px - 40px); background-color: #0d6efd; z-index: 1;
            }
            .stepper-item:last-child::before { display: none; }
        }

        .detail-card { background: #fff; border-radius: 8px; border-top: 4px solid #0d6efd; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
    </style>
</head>
<body class="pb-5">

<main class="container mt-5 mb-4">
    <!-- Header Publik Terpusat -->
    <?php include 'header_public.php'; ?>

    <div class="track-container mt-4 mb-5">
        <?php if(!$data): ?>
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4 mt-4">
            <div class="card-body p-4 p-md-5 position-relative">
                <!-- Tombol Beranda di pojok atas -->
                <a href="../index.php" class="text-decoration-none fw-bold text-primary position-absolute d-none d-sm-block" style="top: 25px; left: 30px;">
                    <i class="fas fa-home me-1"></i> Beranda
                </a>
                <a href="../index.php" class="text-decoration-none fw-bold text-primary d-block d-sm-none mb-3 text-center">
                    <i class="fas fa-home me-1"></i> Beranda
                </a>
                
                <div class="text-center mb-4 mt-1">
                    <h3 class="fw-bold text-dark">Lacak Status Pengajuan</h3>
                    <p class="text-muted small">Masukkan Nomor Tiket Anda untuk melihat riwayat secara real-time.</p>
                </div>
                <form action="track.php" method="GET" class="mx-auto" style="max-width: 600px;">
                    <div class="input-group shadow-sm rounded-pill overflow-hidden border">
                        <input type="text" class="form-control border-0 px-3 px-md-4 fw-bold text-uppercase py-2 py-md-3" name="tiket" placeholder="Contoh: T-2026..." required>
                        <button class="btn btn-primary px-4 px-md-5 fw-bold py-2 py-md-3" type="submit"><i class="fas fa-search me-2"></i> Lacak</button>
                    </div>
                </form>
            </div>
        </div>
        <?php else: ?>
        <!-- Tombol Beranda -->
        <div class="mb-3">
            <a href="../index.php" class="text-decoration-none fw-bold text-primary">
                <i class="fas fa-home me-1"></i> Beranda
            </a>
        </div>
        <!-- Compact Search Bar if data is present -->
        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <h4 class="fw-bold m-0"><i class="fas fa-route text-primary me-2"></i>Status Pengajuan</h4>
            <form action="track.php" method="GET" style="max-width: 350px; width:100%;">
                <div class="input-group shadow-sm rounded overflow-hidden border">
                        <input type="text" class="form-control form-control-sm border-0 px-2 px-md-3 fw-bold text-uppercase" name="tiket" value="<?= htmlspecialchars($tiket) ?>" required>
                        <button class="btn btn-primary btn-sm px-2 px-md-3 fw-bold" type="submit"><i class="fas fa-search"></i> Cek Lain</button>
                    </div>
            </form>
        </div>
        <?php endif; ?>

        <?php if(!empty($tiket)): ?>
            <?php if($data): ?>
                <div class="row justify-content-center mt-2">
                    <div class="col-12">
                        <div class="bg-white p-4 rounded-4 shadow-sm border mb-4">
                            <h5 class="fw-bold mb-2 border-bottom pb-3"><i class="fas fa-route me-2 text-primary"></i>Jalur Proses Pengajuan</h5>
                            
                            <?php
                            // Logic Stepper State
                            $s = $data->status;
                            $step1 = 'active'; $step2 = ''; $step3 = ''; $step4 = '';
                            if (in_array($s, ['diverifikasi', 'diproses', 'selesai', 'ditolak'])) { $step1 = 'completed'; $step2 = 'active'; }
                            if (in_array($s, ['diproses', 'selesai', 'ditolak'])) { $step2 = 'completed'; $step3 = 'active'; }
                            if (in_array($s, ['selesai', 'ditolak'])) {
                                $step3 = 'completed';
                                $step4 = ($s == 'selesai') ? 'success' : 'danger';
                            }
                            ?>

                            <div class="stepper-wrapper">
                                <!-- Step 1: Masuk -->
                                <div class="stepper-item <?= $step1 ?>">
                                    <div class="step-counter"><i class="fas fa-inbox"></i></div>
                                    <div class="step-content">
                                        <div class="step-name">Pengajuan Masuk</div>
                                        <div class="step-date"><i class="far fa-clock"></i> <?= date('d M Y, H:i', strtotime($data->created_at)) ?></div>
                                    </div>
                                </div>

                                <!-- Step 2: Diverifikasi -->
                                <div class="stepper-item <?= $step2 ?>">
                                    <div class="step-counter"><i class="fas fa-check-double"></i></div>
                                    <div class="step-content">
                                        <div class="step-name">Diverifikasi</div>
                                        <?php if(in_array($s, ['diverifikasi'])): ?>
                                        <div class="step-date"><i class="far fa-clock"></i> <?= date('d M Y, H:i', strtotime($data->updated_at)) ?></div>
                                        <?php endif; ?>
                                    </div>
                                </div>

                                <!-- Step 3: Diproses -->
                                <div class="stepper-item <?= $step3 ?>">
                                    <div class="step-counter"><i class="fas fa-cogs"></i></div>
                                    <div class="step-content">
                                        <div class="step-name">Diproses</div>
                                        <?php if(in_array($s, ['diproses'])): ?>
                                        <div class="step-date"><i class="far fa-clock"></i> <?= date('d M Y, H:i', strtotime($data->updated_at)) ?></div>
                                        <?php endif; ?>
                                    </div>
                                </div>

                                <!-- Step 4: Selesai / Ditolak -->
                                <div class="stepper-item <?= $step4 ?>">
                                    <div class="step-counter"><i class="fas <?= $s == 'ditolak' ? 'fa-times' : 'fa-flag-checkered' ?>"></i></div>
                                    <div class="step-content">
                                        <div class="step-name"><?= $s == 'ditolak' ? 'Ditolak' : 'Selesai' ?></div>
                                        <?php if(in_array($s, ['selesai', 'ditolak'])): ?>
                                        <div class="step-date"><i class="far fa-clock"></i> <?= date('d M Y, H:i', strtotime($data->updated_at)) ?></div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                        
                    <!-- Bawah: Informasi Pemohon (Lebih Kecil) -->
                    <div class="col-md-10 col-lg-8 col-xl-6">
                        <div class="detail-card p-3 mb-4">
                            <h6 class="fw-bold mb-3 border-bottom pb-2"><i class="fas fa-user-circle me-2 text-primary"></i>Informasi Pemohon</h6>
                            
                            <table class="table table-borderless table-sm mb-0" style="font-size:0.9rem;">
                                <tr>
                                    <td class="text-muted" width="40%">Nomor Tiket</td>
                                    <td class="fw-bold text-primary">: <?= htmlspecialchars($data->no_tiket) ?></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Status Terkini</td>
                                    <td>: 
                                        <?php 
                                            if($data->status == 'diterima') echo '<span class="badge bg-secondary"><i class="fas fa-inbox"></i> Diterima</span>';
                                            elseif($data->status == 'diverifikasi') echo '<span class="badge bg-primary"><i class="fas fa-check-double"></i> Diverifikasi</span>';
                                            elseif($data->status == 'diproses') echo '<span class="badge bg-warning text-dark"><i class="fas fa-spinner fa-spin"></i> Diproses</span>';
                                            elseif($data->status == 'selesai') echo '<span class="badge bg-success"><i class="fas fa-check-circle"></i> Selesai</span>';
                                            elseif($data->status == 'ditolak') echo '<span class="badge bg-danger"><i class="fas fa-times-circle"></i> Ditolak</span>';
                                        ?>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Nama Lengkap</td>
                                    <td class="fw-bold">: <?= htmlspecialchars($data->nama_lengkap) ?></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Instansi</td>
                                    <td class="fw-bold">: <?= htmlspecialchars($data->asal_instansi) ?></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Tujuan</td>
                                    <td class="fw-bold">: <?= htmlspecialchars($data->tujuan) ?></td>
                                </tr>
                                <?php if($data->status != 'diterima'): ?>
                                <tr>
                                    <td colspan="2"><hr class="my-2"></td>
                                </tr>
                                <tr>
                                    <td class="text-muted" style="vertical-align: top; width:35%;">Catatan Petugas</td>
                                    <td>
                                        <div class="p-2 bg-light rounded border-start border-4 <?= ($data->status == 'selesai') ? 'border-success' : (($data->status == 'ditolak') ? 'border-danger' : 'border-primary') ?>" style="font-size: 0.85rem;">
                                            <?php
                                                if (!empty($data->keterangan_admin)) {
                                                    echo nl2br(htmlspecialchars($data->keterangan_admin));
                                                } else {
                                                    if ($data->status == 'diverifikasi') echo 'Berkas Anda sedang dalam proses pemeriksaan awal (verifikasi).';
                                                    elseif ($data->status == 'diproses') echo 'Pengajuan Anda sah dan saat ini sedang ditindaklanjuti/diproses oleh tim terkait.';
                                                    elseif ($data->status == 'selesai') echo 'Proses telah berakhir dengan sukses.';
                                                    elseif ($data->status == 'ditolak') echo 'Pengajuan ditolak.';
                                                }
                                            ?>
                                            <?php if($data->status == 'selesai' && !empty($data->surat_balasan)): ?>
                                            <div class="mt-3">
                                                <a href="<?= base_url('uploads/'.$data->surat_balasan) ?>" target="_blank" class="btn btn-sm btn-success rounded-pill"><i class="fas fa-download me-1"></i> Unduh Surat Balasan</a>
                                            </div>
                                            <?php endif; ?>
                                        </div>
                                    </td>
                                </tr>
                                <?php endif; ?>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- Jarak ekstra agar tidak menempel footer -->
                <div style="height: 100px;"></div>
            <?php else: ?>
                <div class="alert alert-danger text-center shadow-sm rounded-4 py-4 mt-4">
                    <i class="fas fa-search-minus fa-2x mb-2 text-danger"></i>
                    <h5 class="fw-bold">Tiket Tidak Ditemukan</h5>
                    <p class="mb-0 small">Maaf, Nomor Tiket <strong><?= htmlspecialchars($tiket) ?></strong> tidak terdaftar.</p>
                </div>
            <?php endif; ?>
        <?php endif; ?>
    </div>
</main>

<footer class="fixed-bottom bg-transparent text-secondary py-3" style="pointer-events: none;">
    <div class="container text-center">
        <p class="mb-0 small fw-bold text-shadow-sm" style="text-shadow: 0 1px 2px rgba(255,255,255,0.8);">&copy; <?= date('Y') ?> <?= htmlspecialchars($app_title) ?>. Kantor Imigrasi Kelas I Non TPI Sukabumi.</p>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
