<?php
$judul = "Checklist Weekly";
$menu  = "weekly";

include 'layout/header.php';

$id_user = $_SESSION['id_user'];
$tanggal = date('Y-m-d');
$jabatan = $_SESSION['role'];

$data = mysqli_query($conn,"
    SELECT cm.*
    FROM checklist_master cm
    INNER JOIN checklist_pic cp ON cm.id_checklist = cp.id_checklist
    WHERE cp.jabatan = '$jabatan'
    AND cm.jenis     = 'Weekly'
    AND cm.status    = 'aktif'
    ORDER BY cm.job_list ASC
");

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-fit    { width: 60px !important; text-align: center; }
    .col-status { width: 150px !important; text-align: center; }
    .col-action { width: 125px !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); }
    .status-pending { background: rgba(239,68,68,0.15)  !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,0.3); }
    .btn-action-success {
        background: var(--emerald-500) !important; border: 1px solid var(--emerald-600) !important;
        color: #fff !important; font-weight: 600; font-size: 0.78rem; padding: 6px 12px;
        border-radius: 6px; transition: all 0.2s; display: inline-block; width: 100%; text-decoration: none;
    }
    .btn-action-success:hover { background: var(--emerald-400) !important; box-shadow: 0 0 12px var(--mint-glow); color: #fff !important; }
    .btn-action-disabled {
        background: var(--surface-3) !important; border: 1px solid var(--mint-border) !important;
        color: var(--text-muted) !important; font-size: 0.78rem; padding: 6px 12px;
        border-radius: 6px; opacity: 0.6; width: 100%;
    }
    @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">📆 Weekly Checklist — <?= htmlspecialchars($label_role) ?></div>
    <div class="card-body p-0">
        <div class="table-responsive-custom">
            <table class="table table-custom table-bordered">
                <thead>
                    <tr>
                        <th class="col-fit">No</th>
                        <th>Nama Tugas</th>
                        <th class="col-status">Status Minggu Ini</th>
                        <th class="col-action">Aksi</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;">
                            📭 Tidak ada checklist weekly untuk role ini.
                        </td>
                    </tr>
                <?php else: $no = 1; foreach($rows as $row):
                    $id_checklist = $row['id_checklist'];
                    $cek = mysqli_query($conn,"
                        SELECT * FROM checklist_harian
                        WHERE id_user     = '$id_user'
                        AND id_checklist  = '$id_checklist'
                        AND WEEK(tanggal) = WEEK('$tanggal')
                        AND YEAR(tanggal) = YEAR('$tanggal')
                    ");
                    $sudah = mysqli_num_rows($cek);
                ?>
                    <tr>
                        <td class="text-center font-monospace col-fit" style="color: var(--text-muted);"><?= $no++ ?></td>
                        <td><strong><?= htmlspecialchars($row['job_list']) ?></strong>
                            <?php if(!empty($row['job_desc'])): ?>
                            <br><small style="color: var(--text-muted); font-size: 0.78rem;"><?= htmlspecialchars($row['job_desc']) ?></small>
                            <?php endif; ?>
                        </td>
                        <td class="col-status">
                            <?= $sudah
                                ? '<span class="badge badge-status status-done">Selesai</span>'
                                : '<span class="badge badge-status status-pending">Belum</span>'
                            ?>
                        </td>
                        <td class="col-action">
                            <?php if($sudah): ?>
                                <button class="btn btn-action-disabled btn-sm" disabled>Sudah</button>
                            <?php else: ?>
                                <a href="kerjakan_checklist.php?id=<?= $id_checklist ?>" class="btn btn-action-success btn-sm">Kerjakan</a>
                            <?php endif; ?>
                        </td>
                    </tr>
                <?php endforeach; endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

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