<?php
$judul = "Monitor Sosial Media";
$menu  = "sosmed";

include 'layout/header.php';

if($_SESSION['role'] != 'direktur'){
    header("Location: ../index.php"); exit;
}

/* Semua task dengan progress */
$q_tasks = mysqli_query($conn,"
    SELECT
        st.*,
        u.nama AS nama_marcom,
        COUNT(DISTINCT sb.id_user)  AS jumlah_submit,
        SUM(sb.like_done)           AS total_like,
        SUM(sb.komen_done)          AS total_komen,
        SUM(sb.share_done)          AS total_share,
        (SELECT COUNT(*) FROM users WHERE role='sa' AND status='aktif') AS total_sa
    FROM sosmed_task st
    JOIN users u ON st.dibuat_oleh = u.id_user
    LEFT JOIN sosmed_bukti sb ON st.id = sb.task_id
    GROUP BY st.id
    ORDER BY st.tanggal_buat DESC
");

include 'layout/sidebar.php';
?>

<style>
.mon-wrap { padding:28px 24px 56px; max-width:1300px; margin:0 auto; font-family:'DM Sans',sans-serif; }

.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; padding-bottom:18px; border-bottom:2px solid var(--green-100); flex-wrap:wrap; gap:12px; }
.page-head h1 { font-size:1.35rem; font-weight:800; color:var(--text-dark); margin:0 0 3px; }
.page-head p  { font-size:0.76rem; color:var(--text-muted); margin:0; }

.mon-card { background:#fff; border:1.5px solid var(--green-100); border-radius:16px; overflow:hidden; margin-bottom:24px; box-shadow:0 2px 10px rgba(0,0,0,0.05); }

.mon-card-head { padding:16px 22px; background:linear-gradient(135deg,#f0fdf4,#e8faf1); border-bottom:1.5px solid var(--green-100); display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.mon-card-head h5 { font-size:0.92rem; font-weight:700; color:#0a2e1c; margin:0; flex:1; }

.platform-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:0.7rem; font-weight:700; }
.platform-instagram { background:#fce7f3; color:#be185d; border:1px solid #fbcfe8; }
.platform-facebook  { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.platform-tiktok    { background:#f5f3ff; color:#6d28d9; border:1px solid #ddd6fe; }
.platform-twitter   { background:#e0f2fe; color:#0369a1; border:1px solid #bae6fd; }
.platform-youtube   { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }

/* Summary stats */
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 22px; border-bottom:1.5px solid var(--green-100); }
@media(max-width:600px){ .stat-row { grid-template-columns:repeat(2,1fr); } }

.stat-box { text-align:center; padding:12px; background:#f8fffe; border:1px solid var(--green-100); border-radius:10px; }
.stat-val { font-size:1.5rem; font-weight:800; font-family:'Space Mono',monospace; color:var(--green-600); line-height:1; margin-bottom:4px; }
.stat-lbl { font-size:0.7rem; color:#6b9e82; font-weight:500; }

/* Table */
.table-responsive { width:100%; overflow-x:auto; }
.mon-table { width:100%; min-width:700px; border-collapse:collapse; font-size:0.83rem; color:#0a2e1c; }
.mon-table thead tr { background:linear-gradient(135deg,#f0fdf4,#e8faf1); border-bottom:2px solid var(--green-100); }
.mon-table thead th { padding:11px 16px; font-size:0.7rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--green-600); white-space:nowrap; text-align:left; }
.mon-table thead th:first-child { width:44px; text-align:center; }
.mon-table tbody tr { border-bottom:1px solid #f0fdf4; transition:background 0.15s; }
.mon-table tbody tr:last-child { border-bottom:none; }
.mon-table tbody tr:hover { background:#f8fffe; }
.mon-table tbody td { padding:11px 16px; vertical-align:middle; }
.mon-table tbody td:first-child { text-align:center; }

.row-num { display:inline-flex; width:26px; height:26px; border-radius:50%; background:#f0fdf4; border:1px solid var(--green-100); align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; color:var(--green-600); }

/* Check icons */
.check-yes { color:#16a34a; font-size:15px; }
.check-no  { color:#e2e8f0; font-size:15px; }

/* Foto thumbnail */
.foto-thumb { width:40px; height:40px; border-radius:6px; object-fit:cover; border:1px solid var(--green-100); cursor:pointer; transition:transform 0.18s; }
.foto-thumb:hover { transform:scale(1.1); }
.no-foto { font-size:0.72rem; color:#a3c4b0; }

/* Prog mini */
.prog-mini-track { height:7px; background:#f0fdf4; border:1px solid var(--green-100); border-radius:999px; overflow:hidden; min-width:80px; }
.prog-mini-fill  { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--green-600),var(--green-400)); }

/* Lightbox */
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:2000; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width:90vw; max-height:90vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.lightbox-close { position:absolute; top:16px; right:20px; color:#fff; font-size:28px; cursor:pointer; background:rgba(0,0,0,0.4); border:none; border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; }
</style>

<div class="mon-wrap">

<div class="page-head">
    <div>
        <h1>📊 Monitor Sosial Media</h1>
        <p>Pantau progress like, komen & share dari seluruh SA</p>
    </div>
</div>

<?php if(mysqli_num_rows($q_tasks) == 0): ?>
<div style="text-align:center;padding:60px 20px;color:#6b9e82;">
    <div style="font-size:48px;margin-bottom:14px;opacity:0.4;">📱</div>
    <p>Belum ada social media task.</p>
</div>
<?php else: while($task = mysqli_fetch_assoc($q_tasks)):

    $total_sa = (int)$task['total_sa'];
    $pct = $total_sa > 0 ? round(($task['jumlah_submit'] / $total_sa) * 100) : 0;
    $plat = strtolower($task['platform']);

    /* Detail per SA */
    $q_sa = mysqli_query($conn,"
        SELECT sb.*, u.nama
        FROM sosmed_bukti sb
        JOIN users u ON sb.id_user = u.id_user
        WHERE sb.task_id = '".$task['id']."'
        ORDER BY sb.submitted_at DESC
    ");

    /* SA yang belum submit */
    $q_belum = mysqli_query($conn,"
        SELECT u.nama FROM users u
        WHERE u.role='sa' AND u.status='aktif'
        AND u.id_user NOT IN (
            SELECT id_user FROM sosmed_bukti WHERE task_id='".$task['id']."'
        )
    ");
?>
<div class="mon-card">

    <div class="mon-card-head">
        <div style="flex:1;">
            <h5><?= htmlspecialchars($task['judul']) ?></h5>
            <div style="font-size:0.72rem;color:#6b9e82;margin-top:3px;">
                Dibuat oleh: <?= htmlspecialchars($task['nama_marcom']) ?>
                <?php if($task['deadline']): ?>
                &nbsp;·&nbsp; ⏰ <?= date('d/m/Y',strtotime($task['deadline'])) ?>
                <?php endif; ?>
                <?php if($task['link_post']): ?>
                &nbsp;·&nbsp; <a href="<?= htmlspecialchars($task['link_post']) ?>" target="_blank" style="color:var(--green-600);">🔗 Lihat Post</a>
                <?php endif; ?>
            </div>
        </div>
        <span class="platform-badge platform-<?= $plat ?>">
            <?= htmlspecialchars($task['platform']) ?>
        </span>
    </div>

    <!-- Summary stats -->
    <div class="stat-row">
        <div class="stat-box">
            <div class="stat-val"><?= $task['jumlah_submit'] ?>/<?= $total_sa ?></div>
            <div class="stat-lbl">SA Submit</div>
            <div class="prog-mini-track" style="margin-top:6px;">
                <div class="prog-mini-fill" style="width:<?= $pct ?>%;"></div>
            </div>
        </div>
        <div class="stat-box">
            <div class="stat-val" style="color:#16a34a;"><?= (int)$task['total_like'] ?></div>
            <div class="stat-lbl">👍 Like</div>
        </div>
        <div class="stat-box">
            <div class="stat-val" style="color:#2563eb;"><?= (int)$task['total_komen'] ?></div>
            <div class="stat-lbl">💬 Komen</div>
        </div>
        <div class="stat-box">
            <div class="stat-val" style="color:#7c3aed;"><?= (int)$task['total_share'] ?></div>
            <div class="stat-lbl">🔁 Share</div>
        </div>
    </div>

    <!-- Tabel SA yang sudah submit -->
    <?php if(mysqli_num_rows($q_sa) > 0): ?>
    <div class="table-responsive">
        <table class="mon-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Nama SA</th>
                    <th>👍 Like</th>
                    <th>Bukti Like</th>
                    <th>💬 Komen</th>
                    <th>Bukti Komen</th>
                    <th>🔁 Share</th>
                    <th>Bukti Share</th>
                    <th>Waktu Upload</th>
                </tr>
            </thead>
            <tbody>
            <?php $no=1; while($sa = mysqli_fetch_assoc($q_sa)): ?>
            <tr>
                <td><span class="row-num"><?= $no++ ?></span></td>
                <td style="font-weight:600;"><?= htmlspecialchars($sa['nama']) ?></td>

                <td><?= $sa['like_done']  ? '<span class="check-yes">✅</span>' : '<span class="check-no">—</span>' ?></td>
                <td>
                    <?php if($sa['like_bukti']): ?>
                    <img src="../uploads/sosmed/<?= $sa['like_bukti'] ?>"
                         class="foto-thumb"
                         onclick="openLightbox(this.src)" alt="Like">
                    <?php else: ?>
                    <span class="no-foto">—</span>
                    <?php endif; ?>
                </td>

                <td><?= $sa['komen_done'] ? '<span class="check-yes">✅</span>' : '<span class="check-no">—</span>' ?></td>
                <td>
                    <?php if($sa['komen_bukti']): ?>
                    <img src="../uploads/sosmed/<?= $sa['komen_bukti'] ?>"
                         class="foto-thumb"
                         onclick="openLightbox(this.src)" alt="Komen">
                    <?php else: ?>
                    <span class="no-foto">—</span>
                    <?php endif; ?>
                </td>

                <td><?= $sa['share_done'] ? '<span class="check-yes">✅</span>' : '<span class="check-no">—</span>' ?></td>
                <td>
                    <?php if($sa['share_bukti']): ?>
                    <img src="../uploads/sosmed/<?= $sa['share_bukti'] ?>"
                         class="foto-thumb"
                         onclick="openLightbox(this.src)" alt="Share">
                    <?php else: ?>
                    <span class="no-foto">—</span>
                    <?php endif; ?>
                </td>

                <td style="font-size:0.75rem;color:#6b9e82;font-family:'Space Mono',monospace;">
                    <?= date('d/m H:i',strtotime($sa['submitted_at'])) ?>
                </td>
            </tr>
            <?php endwhile; ?>
            </tbody>
        </table>
    </div>
    <?php endif; ?>

    <!-- SA belum submit -->
    <?php if(mysqli_num_rows($q_belum) > 0): ?>
    <div style="padding:12px 22px 16px;border-top:1px solid #f0fdf4;">
        <div style="font-size:0.72rem;font-weight:700;color:#a3c4b0;letter-spacing:0.07em;text-transform:uppercase;margin-bottom:8px;">
            ⏳ Belum Submit
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:6px;">
            <?php while($b = mysqli_fetch_assoc($q_belum)): ?>
            <span style="display:inline-flex;align-items:center;gap:4px;background:#fef9c3;color:#a16207;border:1px solid #fde68a;border-radius:999px;padding:3px 10px;font-size:0.72rem;font-weight:600;">
                ⏳ <?= htmlspecialchars($b['nama']) ?>
            </span>
            <?php endwhile; ?>
        </div>
    </div>
    <?php endif; ?>

</div>
<?php endwhile; endif; ?>

</div>

<!-- Lightbox -->
<div class="lightbox" id="lightbox" onclick="closeLightbox()">
    <button class="lightbox-close" onclick="closeLightbox()">✕</button>
    <img id="lightbox-img" src="" alt="">
</div>

<script>
function openLightbox(src) {
    document.getElementById('lightbox-img').src = src;
    document.getElementById('lightbox').classList.add('open');
    document.body.style.overflow = 'hidden';
}
function closeLightbox() {
    document.getElementById('lightbox').classList.remove('open');
    document.body.style.overflow = '';
}
</script>

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