<?php
$judul = "Dashboard";
$menu  = "dashboard";

include 'layout/header.php';

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

// Tentukan awal minggu (Senin) dan akhir minggu (Minggu)
$day_of_week = date('N');
$start_week  = date('Y-m-d', strtotime("-" . ($day_of_week - 1) . " days"));
$end_week    = date('Y-m-d', strtotime("+" . (7 - $day_of_week) . " days"));

// Bulan berjalan
$start_month = date('Y-m-01');
$end_month   = date('Y-m-t');

// Total checklist per jenis
$daily = mysqli_num_rows(mysqli_query($conn,"
    SELECT cm.id_checklist
    FROM checklist_master cm
    INNER JOIN checklist_pic cp ON cm.id_checklist = cp.id_checklist
    WHERE cp.jabatan = '$jabatan'
    AND cm.jenis     = 'Daily'
    AND cm.status    = 'aktif'
"));

$weekly = mysqli_num_rows(mysqli_query($conn,"
    SELECT cm.id_checklist
    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'
"));

$monthly = mysqli_num_rows(mysqli_query($conn,"
    SELECT cm.id_checklist
    FROM checklist_master cm
    INNER JOIN checklist_pic cp ON cm.id_checklist = cp.id_checklist
    WHERE cp.jabatan = '$jabatan'
    AND cm.jenis     = 'Monthly'
    AND cm.status    = 'aktif'
"));

// Progress daily hari ini
$done_today = mysqli_num_rows(mysqli_query($conn,"
    SELECT ch.id_harian
    FROM checklist_harian ch
    INNER JOIN checklist_master cm ON ch.id_checklist = cm.id_checklist
    INNER JOIN checklist_pic cp    ON cm.id_checklist = cp.id_checklist
    WHERE ch.id_user  = '$id_user'
    AND ch.tanggal    = '$tanggal'
    AND cp.jabatan    = '$jabatan'
    AND cm.jenis      = 'Daily'
    AND cm.status     = 'aktif'
"));

// Progress weekly
$done_week = mysqli_num_rows(mysqli_query($conn,"
    SELECT DISTINCT ch.id_checklist
    FROM checklist_harian ch
    INNER JOIN checklist_master cm ON ch.id_checklist = cm.id_checklist
    INNER JOIN checklist_pic cp    ON cm.id_checklist = cp.id_checklist
    WHERE ch.id_user  = '$id_user'
    AND ch.tanggal   BETWEEN '$start_week' AND '$end_week'
    AND cp.jabatan    = '$jabatan'
    AND cm.jenis      = 'Weekly'
    AND cm.status     = 'aktif'
"));

// Progress monthly
$done_month = mysqli_num_rows(mysqli_query($conn,"
    SELECT DISTINCT ch.id_checklist
    FROM checklist_harian ch
    INNER JOIN checklist_master cm ON ch.id_checklist = cm.id_checklist
    INNER JOIN checklist_pic cp    ON cm.id_checklist = cp.id_checklist
    WHERE ch.id_user  = '$id_user'
    AND ch.tanggal   BETWEEN '$start_month' AND '$end_month'
    AND cp.jabatan    = '$jabatan'
    AND cm.jenis      = 'Monthly'
    AND cm.status     = 'aktif'
"));

$progress_daily_pct   = ($daily   > 0) ? round(($done_today / $daily)   * 100) : 0;
$progress_weekly_pct  = ($weekly  > 0) ? round(($done_week  / $weekly)  * 100) : 0;
$progress_monthly_pct = ($monthly > 0) ? round(($done_month / $monthly) * 100) : 0;

// ============================================================
// URGENT: ambil dari urgent_penerima JOIN urgent_task
// Hanya yang diterima user login dan statusnya BELUM selesai
// ============================================================
$urgent_result = mysqli_query($conn,"
    SELECT
        ut.judul,
        ut.deskripsi,
        ut.dibuat_oleh,
        up.status AS status_penerima
    FROM urgent_penerima up
    INNER JOIN urgent_task ut ON up.id = ut.id
    WHERE up.id_user = '$id_user'
    AND up.status != 'Selesai'
    ORDER BY ut.dibuat_oleh DESC
");
$urgent_count = mysqli_num_rows($urgent_result);
$urgent_rows  = mysqli_fetch_all($urgent_result, MYSQLI_ASSOC);
?>

<style>
    .stat-card {
        background: var(--surface-1) !important;
        border: 1px solid var(--mint-border) !important;
        border-radius: 14px !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
        text-decoration: none; display: block; color: inherit;
    }
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 28px rgba(16,185,129,0.15) !important;
        border-color: var(--emerald-400) !important; color: inherit;
    }
    .stat-card .card-body { padding: 28px 20px 22px; text-align: center; }
    .stat-icon { font-size: 2rem; margin-bottom: 10px; display: block; }
    .stat-number {
        color: var(--emerald-400) !important;
        font-family: 'Space Mono', monospace;
        font-weight: 700; font-size: 2.6rem;
        line-height: 1; margin: 6px 0 8px; display: block;
    }
    .stat-label {
        color: var(--text-secondary) !important; font-weight: 600;
        font-size: 0.82rem; letter-spacing: 0.07em;
        text-transform: uppercase; margin: 0;
    }

    /* Stat card urgent override */
    .stat-card-urgent {
        border-color: rgba(239,68,68,0.45) !important;
        background: rgba(239,68,68,0.05) !important;
        cursor: default;
    }
    .stat-card-urgent .stat-number { color: #ef4444 !important; }
    .stat-card-urgent .stat-label  { color: #ef4444 !important; }
    .stat-card-urgent:hover {
        box-shadow: 0 10px 28px rgba(239,68,68,0.18) !important;
        border-color: #ef4444 !important;
        transform: translateY(-5px);
    }

    /* ── Urgent Detail Card ── */
    .urgent-card {
        border-radius: 14px !important;
        border: 1.5px solid #ef4444 !important;
        background: rgba(239,68,68,0.05) !important;
        animation: urgentPulse 2.4s ease-in-out infinite;
    }
    @keyframes urgentPulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.0); }
        50%       { box-shadow: 0 0 20px 5px rgba(239,68,68,0.16); }
    }
    .urgent-card .card-body { padding: 22px 24px 18px; }

    .urgent-header {
        display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
    }
    .urgent-header .u-icon  { font-size: 1.4rem; }
    .urgent-header .u-title {
        font-size: 0.82rem; font-weight: 700; letter-spacing: 0.07em;
        text-transform: uppercase; color: #ef4444; margin: 0;
    }
    .urgent-header .u-badge {
        margin-left: auto;
        background: #ef4444; color: #fff;
        font-family: 'Space Mono', monospace;
        font-size: 1rem; font-weight: 700;
        padding: 2px 14px; border-radius: 999px;
        min-width: 36px; text-align: center;
    }

    .urgent-list { list-style: none; padding: 0; margin: 0; }
    .urgent-list li {
        display: flex; align-items: flex-start; gap: 10px;
        padding: 10px 12px; border-radius: 9px;
        border: 1px solid rgba(239,68,68,0.15);
        background: rgba(239,68,68,0.04);
        margin-bottom: 8px;
    }
    .urgent-list li:last-child { margin-bottom: 0; }
    .u-bullet {
        font-size: 1rem; margin-top: 1px; flex-shrink: 0;
    }
    .u-info { flex: 1; }
    .u-job {
        color: var(--text-primary); font-weight: 600;
        font-size: 0.87rem; margin-bottom: 2px; display: block;
    }
    .u-desc {
        color: var(--text-muted); font-size: 0.78rem;
        display: block; margin-bottom: 4px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 420px;
    }
    .u-date {
        font-size: 0.72rem; color: var(--text-muted);
        font-family: 'Space Mono', monospace;
    }
    .u-status {
        font-size: 0.72rem; font-weight: 700;
        padding: 2px 9px; border-radius: 999px;
        white-space: nowrap; align-self: center;
        background: rgba(239,68,68,0.14); color: #ef4444;
    }

    /* Progress Cards */
    .progress-card {
        background: var(--surface-1) !important;
        border: 1px solid var(--mint-border) !important;
        border-radius: 14px !important;
    }
    .progress-card .card-body { padding: 22px 24px; }
    .progress-card .card-title {
        font-size: 0.82rem; font-weight: 700;
        letter-spacing: 0.07em; text-transform: uppercase;
        color: var(--text-secondary); margin-bottom: 14px;
    }
    .progress { background: var(--surface-3) !important; border-radius: 999px; height: 10px; }
    .progress-bar-daily {
        background: linear-gradient(90deg, var(--emerald-600), var(--emerald-400)) !important;
        border-radius: 999px; box-shadow: 0 0 8px rgba(16,185,129,0.4);
        transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
    }
    .progress-bar-weekly {
        background: linear-gradient(90deg, #2563eb, #60a5fa) !important;
        border-radius: 999px; box-shadow: 0 0 8px rgba(96,165,250,0.4);
        transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
    }
    .progress-bar-monthly {
        background: linear-gradient(90deg, #7c3aed, #a78bfa) !important;
        border-radius: 999px; box-shadow: 0 0 8px rgba(167,139,250,0.4);
        transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
    }
    .progress-meta {
        display: flex; justify-content: space-between;
        align-items: center; margin-top: 10px;
    }
    .progress-meta span { font-size: 0.78rem; color: var(--text-muted); font-family: 'Space Mono', monospace; }
    .progress-meta .pct-daily   { color: var(--emerald-400); font-family: 'Space Mono', monospace; font-size: 0.92rem; font-weight: 700; }
    .progress-meta .pct-weekly  { color: #60a5fa;            font-family: 'Space Mono', monospace; font-size: 0.92rem; font-weight: 700; }
    .progress-meta .pct-monthly { color: #a78bfa;            font-family: 'Space Mono', monospace; font-size: 0.92rem; font-weight: 700; }
</style>

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

<!-- ── Stat Cards ── -->
<div class="row g-3 mb-3">

    <div class="col-6 col-md-3">
        <a href="checklist_daily.php" class="stat-card card shadow-sm">
            <div class="card-body">
                <span class="stat-icon">📅</span>
                <span class="stat-number"><?= $daily ?></span>
                <p class="stat-label">Daily</p>
            </div>
        </a>
    </div>

    <div class="col-6 col-md-3">
        <a href="checklist_weekly.php" class="stat-card card shadow-sm">
            <div class="card-body">
                <span class="stat-icon">📆</span>
                <span class="stat-number"><?= $weekly ?></span>
                <p class="stat-label">Weekly</p>
            </div>
        </a>
    </div>

    <div class="col-6 col-md-3">
        <a href="checklist_monthly.php" class="stat-card card shadow-sm">
            <div class="card-body">
                <span class="stat-icon">🗓</span>
                <span class="stat-number"><?= $monthly ?></span>
                <p class="stat-label">Monthly</p>
            </div>
        </a>
    </div>

    <!-- Kartu Urgent Count -->
    <div class="col-6 col-md-3">
        <div class="stat-card stat-card-urgent card shadow-sm">
            <div class="card-body">
                <span class="stat-icon">🚨</span>
                <span class="stat-number"><?= $urgent_count ?></span>
                <p class="stat-label">Urgent</p>
            </div>
        </div>
    </div>

</div>

<!-- ── Detail Urgent (hanya muncul jika ada urgent belum selesai) ── -->
<?php if($urgent_count > 0): ?>
<div class="mb-3">
    <div class="card urgent-card shadow-sm">
        <div class="card-body">

            <div class="urgent-header">
                <span class="u-icon">🚨</span>
                <p class="u-title">Urgent Belum Diselesaikan</p>
                <span class="u-badge"><?= $urgent_count ?></span>
            </div>

            <ul class="urgent-list">
                <?php foreach($urgent_rows as $ur): ?>
                <li>
                    <span class="u-bullet">⚠️</span>
                    <div class="u-info">
                        <span class="u-job">
                            <?= htmlspecialchars($ur['judul']) ?>
                        </span>
                        <?php if(!empty($ur['deskripsi'])): ?>
                        <span class="u-desc">
                            <?= htmlspecialchars($ur['deskripsi']) ?>
                        </span>
                        <?php endif; ?>
                        <span class="u-date">
                            📅 <?= date('d M Y, H:i', strtotime($ur['dibuat_oleh'])) ?>
                        </span>
                    </div>
                    <span class="u-status">
                        <?= htmlspecialchars($ur['status_penerima']) ?>
                    </span>
                </li>
                <?php endforeach; ?>
            </ul>

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

<!-- ── Progress Cards ── -->
<div class="row g-3">

    <!-- Daily -->
    <div class="col-md-4">
        <div class="card progress-card shadow-sm h-100">
            <div class="card-body">
                <div class="card-title">📅 Progress Daily — <?= date('d M Y') ?></div>
                <div class="progress">
                    <div class="progress-bar progress-bar-daily" role="progressbar"
                         style="width: <?= $progress_daily_pct ?>%"
                         aria-valuenow="<?= $progress_daily_pct ?>"
                         aria-valuemin="0" aria-valuemax="100">
                    </div>
                </div>
                <div class="progress-meta">
                    <span><?= $done_today ?> / <?= $daily ?> tugas selesai</span>
                    <span class="pct-daily"><?= $progress_daily_pct ?>%</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Weekly -->
    <div class="col-md-4">
        <div class="card progress-card shadow-sm h-100">
            <div class="card-body">
                <div class="card-title">📆 Progress Weekly — Minggu Ini</div>
                <div class="progress">
                    <div class="progress-bar progress-bar-weekly" role="progressbar"
                         style="width: <?= $progress_weekly_pct ?>%"
                         aria-valuenow="<?= $progress_weekly_pct ?>"
                         aria-valuemin="0" aria-valuemax="100">
                    </div>
                </div>
                <div class="progress-meta">
                    <span><?= $done_week ?> / <?= $weekly ?> tugas selesai</span>
                    <span class="pct-weekly"><?= $progress_weekly_pct ?>%</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Monthly -->
    <div class="col-md-4">
        <div class="card progress-card shadow-sm h-100">
            <div class="card-body">
                <div class="card-title">🗓 Progress Monthly — <?= date('M Y') ?></div>
                <div class="progress">
                    <div class="progress-bar progress-bar-monthly" role="progressbar"
                         style="width: <?= $progress_monthly_pct ?>%"
                         aria-valuenow="<?= $progress_monthly_pct ?>"
                         aria-valuemin="0" aria-valuemax="100">
                    </div>
                </div>
                <div class="progress-meta">
                    <span><?= $done_month ?> / <?= $monthly ?> tugas selesai</span>
                    <span class="pct-monthly"><?= $progress_monthly_pct ?>%</span>
                </div>
            </div>
        </div>
    </div>

</div>

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