<?php
$judul = "Riwayat Checklist";
$menu  = "riwayat";

include 'layout/header.php';

$id_user = $_SESSION['id_user'];

$data = mysqli_query($conn,"
    SELECT ch.*, cm.job_list
    FROM checklist_harian ch
    JOIN checklist_master cm ON ch.id_checklist = cm.id_checklist
    WHERE ch.id_user = '$id_user'
    ORDER BY ch.tanggal DESC, ch.waktu_selesai DESC
");

if(!$data){ die("Query error: " . mysqli_error($conn)); }
?>

<style>
    .panel-card {
        background: var(--surface-1) !important;
        border: 1px solid var(--mint-border) !important;
        border-radius: 12px !important; overflow: hidden;
    }
    .panel-card .card-header {
        background: linear-gradient(90deg, var(--surface-2), var(--surface-1)) !important;
        border-bottom: 1px solid var(--mint-border) !important;
        color: var(--emerald-400) !important;
        font-weight: 700; letter-spacing: 0.05em; font-size: 1.1rem; padding: 16px 20px;
    }
    .table-responsive-custom { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-custom {
        color: var(--text-primary) !important; border-color: var(--mint-border) !important;
        margin-bottom: 0; width: 100%; table-layout: fixed;
    }
    .table-custom thead th {
        background: var(--surface-2) !important; color: var(--text-secondary) !important;
        border-bottom: 2px solid var(--mint-border) !important;
        font-weight: 600; text-transform: uppercase; font-size: 0.8rem;
        letter-spacing: 0.05em; padding: 12px; white-space: nowrap;
    }
    .table-custom tbody td {
        background: transparent !important; border-color: var(--mint-border) !important;
        color: var(--text-primary) !important; padding: 14px 12px;
        vertical-align: middle; word-wrap: break-word; word-break: break-word; white-space: normal !important;
    }
    .table-custom tbody tr:hover td { background: var(--mint-glow) !important; }
    .col-date  { width: 130px !important; }
    .col-status { width: 130px !important; text-align: center; }
    .col-photo { width: 110px !important; text-align: center; }
    .badge-status {
        font-family: 'Space Mono', monospace; padding: 6px 10px; border-radius: 6px;
        font-weight: 600; font-size: 0.75rem; display: inline-block; text-align: center; width: 100%;
    }
    .status-done { background: rgba(16,185,129,0.15) !important; color: var(--emerald-400) !important; border: 1px solid var(--mint-border); }
    .btn-view-photo {
        background: var(--surface-3) !important; border: 1px solid var(--mint-border) !important;
        color: var(--emerald-400) !important; font-weight: 600; font-size: 0.78rem;
        padding: 5px 10px; border-radius: 6px; transition: all 0.2s;
        display: inline-block; width: 100%; text-decoration: none; text-align: center;
    }
    .btn-view-photo:hover { background: var(--mint-glow) !important; border-color: var(--emerald-400) !important; }
    @media (max-width: 576px) {
        .table-custom { table-layout: auto; }
        .table-custom tbody td { font-size: 0.85rem; padding: 10px 8px; }
    }
</style>

<?php include 'layout/sidebar.php'; ?>

<div class="card panel-card shadow-sm">
    <div class="card-header">📋 Riwayat Pelaksanaan Checklist</div>
    <div class="card-body p-0">
        <div class="table-responsive-custom">
            <table class="table table-custom table-bordered">
                <thead>
                    <tr>
                        <th class="col-date">Tanggal</th>
                        <th>Nama Tugas</th>
                        <th class="col-status">Status</th>
                        <th class="col-photo">Foto Bukti</th>
                    </tr>
                </thead>
                <tbody>
                <?php
                $rows = [];
                while($row = mysqli_fetch_assoc($data)) $rows[] = $row;

                if(count($rows) == 0):
                ?>
                    <tr>
                        <td colspan="4" class="text-center py-4" style="color: var(--text-muted); font-style: italic;">
                            📭 Belum ada riwayat checklist.
                        </td>
                    </tr>
                <?php else: foreach($rows as $row): ?>
                    <tr>
                        <td class="font-monospace col-date" style="color: var(--text-secondary);">
                            📅 <?= htmlspecialchars($row['tanggal']) ?>
                        </td>
                        <td><strong><?= htmlspecialchars($row['job_list']) ?></strong></td>
                        <td class="col-status">
                            <span class="badge badge-status status-done">
                                <?= htmlspecialchars($row['status']) ?>
                            </span>
                        </td>
                        <td class="col-photo">
                            <?php if(!empty($row['foto'])): ?>
                                <a href="../upload/<?= htmlspecialchars($row['foto']) ?>" target="_blank" class="btn-view-photo">
                                    👁️ Lihat
                                </a>
                            <?php else: ?>
                                <span style="color: var(--text-muted); font-size: 0.8rem; font-style: italic;">-</span>
                            <?php endif; ?>
                        </td>
                    </tr>
                <?php endforeach; endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

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