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

include 'layout/header.php';

/* ==========================
   QUERY DASHBOARD
========================== */

$total_user = mysqli_num_rows(mysqli_query($conn,
    "SELECT * FROM users"
));

$total_checklist = mysqli_num_rows(mysqli_query($conn,
    "SELECT * FROM checklist_master"
));

// MOD hari ini — pakai id_petugas JOIN ke users
$total_mod = mysqli_num_rows(mysqli_query($conn,
    "SELECT mh.id_petugas
     FROM mod_harian mh
     JOIN users u ON mh.id_petugas = u.id_user
     WHERE mh.tanggal = CURDATE()"
));

// Ambil nama-nama MOD hari ini untuk ditampilkan
$q_mod_names = mysqli_query($conn,
    "SELECT u.nama, mh.shift
     FROM mod_harian mh
     JOIN users u ON mh.id_petugas = u.id_user
     WHERE mh.tanggal = CURDATE()
     ORDER BY mh.shift ASC"
);
$mod_names = mysqli_fetch_all($q_mod_names, MYSQLI_ASSOC);

// Total urgent yang belum selesai (semua user)
$total_urgent = mysqli_num_rows(mysqli_query($conn,
    "SELECT up.id
     FROM urgent_penerima up
     WHERE up.status != 'Selesai'"
));

// Total checklist daily aktif
$total_harian = mysqli_num_rows(mysqli_query($conn,"
    SELECT id_checklist FROM checklist_master
    WHERE LOWER(jenis) = 'daily' AND status = 'aktif'
"));

/* ── DAILY ── */
$q_selesai = mysqli_num_rows(mysqli_query($conn,"
    SELECT DISTINCT ch.id_checklist
    FROM checklist_harian ch
    JOIN checklist_master cm ON ch.id_checklist = cm.id_checklist
    WHERE ch.tanggal      = CURDATE()
    AND   ch.status       = 'Selesai'
    AND   cm.status       = 'aktif'
    AND   LOWER(cm.jenis) = 'daily'
"));

$q_belum = mysqli_num_rows(mysqli_query($conn,"
    SELECT cm.id_checklist
    FROM checklist_master cm
    WHERE LOWER(cm.jenis) = 'daily'
    AND   cm.status = 'aktif'
    AND   cm.id_checklist NOT IN (
        SELECT id_checklist FROM checklist_harian
        WHERE tanggal = CURDATE() AND status = 'Selesai'
    )
"));

$progress = ($total_harian > 0)
    ? round(($q_selesai / $total_harian) * 100) : 0;

/* ── WEEKLY (Senin s/d hari ini) ── */
$week_start = date('Y-m-d', strtotime('monday this week'));
$week_end   = date('Y-m-d');
$week_days  = (int)((strtotime($week_end) - strtotime($week_start)) / 86400) + 1;
$week_total = $total_harian * $week_days;

$week_selesai = (int)(mysqli_fetch_assoc(mysqli_query($conn,"
    SELECT COUNT(DISTINCT CONCAT(ch.id_checklist,'-',ch.tanggal)) AS n
    FROM checklist_harian ch
    JOIN checklist_master cm ON ch.id_checklist = cm.id_checklist
    WHERE ch.tanggal BETWEEN '$week_start' AND '$week_end'
    AND   ch.status       = 'Selesai'
    AND   cm.status       = 'aktif'
    AND   LOWER(cm.jenis) = 'daily'
"))['n'] ?? 0);

$week_belum = max(0, $week_total - $week_selesai);
$week_pct   = $week_total > 0 ? round(($week_selesai / $week_total) * 100) : 0;

/* ── MONTHLY (1 s/d hari ini bulan ini) ── */
$month_start = date('Y-m-01');
$month_end   = date('Y-m-d');
$month_days  = (int)((strtotime($month_end) - strtotime($month_start)) / 86400) + 1;
$month_total = $total_harian * $month_days;

$month_selesai = (int)(mysqli_fetch_assoc(mysqli_query($conn,"
    SELECT COUNT(DISTINCT CONCAT(ch.id_checklist,'-',ch.tanggal)) AS n
    FROM checklist_harian ch
    JOIN checklist_master cm ON ch.id_checklist = cm.id_checklist
    WHERE ch.tanggal BETWEEN '$month_start' AND '$month_end'
    AND   ch.status       = 'Selesai'
    AND   cm.status       = 'aktif'
    AND   LOWER(cm.jenis) = 'daily'
"))['n'] ?? 0);

$month_belum = max(0, $month_total - $month_selesai);
$month_pct   = $month_total > 0 ? round(($month_selesai / $month_total) * 100) : 0;

include 'layout/sidebar.php';
?>

<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

.dash-wrapper {
    padding: 24px 24px 48px;
    max-width: 1100px;
    margin: 0 auto;
}

.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--green-100);
    flex-wrap: wrap;
    gap: 10px;
}

.dash-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    margin: 0;
}

.dash-title span { color: var(--green-600); }

.dash-date {
    font-size: 0.7rem;
    font-family: 'Space Mono', monospace;
    color: var(--text-muted);
    background: var(--green-50);
    border: 1.5px solid var(--green-100);
    padding: 5px 12px;
    border-radius: 20px;
}

.section-label {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-label::after {
    content: '';
    flex: 1;
    height: 1.5px;
    background: var(--green-100);
}

/* ── Stat Grid ── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.stat-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

@media (max-width: 900px) {
    .stat-grid   { grid-template-columns: repeat(2, 1fr); }
    .stat-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .stat-grid   { grid-template-columns: 1fr; }
    .stat-grid-3 { grid-template-columns: 1fr; }
    .dash-wrapper { padding: 16px 16px 40px; }
}

/* ── Stat Card ── */
.stat-card {
    background: #ffffff;
    border: 1.5px solid var(--green-100);
    border-radius: 14px;
    padding: 18px 16px 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    animation: fadeUp 0.4s ease both;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green-600), var(--green-500));
    opacity: 0;
    transition: opacity 0.2s;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--green-200);
    box-shadow: 0 8px 24px rgba(34,197,94,0.12);
}

.stat-card:hover::before { opacity: 1; }

.stat-card .orb {
    position: absolute;
    bottom: -20px; right: -20px;
    width: 70px; height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34,197,94,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.stat-card .card-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--green-50);
    border: 1.5px solid var(--green-100);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    margin-bottom: 14px;
    transition: background 0.2s;
}

.stat-card:hover .card-icon { background: var(--green-100); }

.stat-card .card-value {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-dark);
    letter-spacing: -0.04em;
    margin-bottom: 5px;
    font-family: 'Space Mono', monospace;
}

.stat-card .card-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* Variant: success */
.stat-card.success {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #ffffff 55%, #f0fdf4);
}
.stat-card.success .card-value { color: var(--green-600); }
.stat-card.success .card-icon  { background: #dcfce7; border-color: #bbf7d0; }
.stat-card.success::before      { background: linear-gradient(90deg, #16a34a, #4ade80); }
.stat-card.success:hover         { box-shadow: 0 8px 24px rgba(34,197,94,0.15); }

/* Variant: danger */
.stat-card.danger {
    border-color: #fecaca;
    background: linear-gradient(135deg, #ffffff 55%, #fff5f5);
}
.stat-card.danger .card-value { color: #dc2626; }
.stat-card.danger .card-icon  { background: #fef2f2; border-color: #fecaca; }
.stat-card.danger::before      { background: linear-gradient(90deg, #dc2626, #f87171); }
.stat-card.danger:hover         { box-shadow: 0 8px 24px rgba(239,68,68,0.12); border-color: #fca5a5; }

/* Variant: urgent (merah animasi pulse) */
.stat-card.urgent {
    border-color: #fca5a5;
    background: linear-gradient(135deg, #ffffff 55%, #fff5f5);
    animation: fadeUp 0.4s ease both, urgentPulse 2.4s ease-in-out infinite;
}
.stat-card.urgent .card-value { color: #dc2626; }
.stat-card.urgent .card-icon  { background: #fef2f2; border-color: #fecaca; }
.stat-card.urgent::before      { background: linear-gradient(90deg, #dc2626, #f87171); opacity: 1; }
.stat-card.urgent:hover         { box-shadow: 0 8px 24px rgba(239,68,68,0.2); border-color: #f87171; }

@keyframes urgentPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
    50%       { box-shadow: 0 0 20px 4px rgba(239,68,68,0.18); }
}

/* Variant: mod (biru/teal) */
.stat-card.mod {
    border-color: #bae6fd;
    background: linear-gradient(135deg, #ffffff 55%, #f0f9ff);
}
.stat-card.mod .card-value { color: #0369a1; }
.stat-card.mod .card-icon  { background: #e0f2fe; border-color: #bae6fd; }
.stat-card.mod::before      { background: linear-gradient(90deg, #0369a1, #38bdf8); }
.stat-card.mod:hover         { box-shadow: 0 8px 24px rgba(14,165,233,0.15); border-color: #7dd3fc; }

/* MOD names list di dalam kartu */
.mod-names-list {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mod-name-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.mod-name-chip.pagi   { background: #fef9c3; color: #92400e; border-color: #fde68a; }
.mod-name-chip.siang  { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.mod-name-chip.sore   { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.mod-name-chip.malam  { background: #1e1b4b; color: #c7d2fe; border-color: #3730a3; }

/* Animation delays */
.stat-grid   .stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-grid   .stat-card:nth-child(2) { animation-delay: 0.10s; }
.stat-grid   .stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-grid   .stat-card:nth-child(4) { animation-delay: 0.20s; }
.stat-grid-3 .stat-card:nth-child(1) { animation-delay: 0.25s; }
.stat-grid-3 .stat-card:nth-child(2) { animation-delay: 0.30s; }
.stat-grid-3 .stat-card:nth-child(3) { animation-delay: 0.35s; }

/* ── Progress Card ── */
.progress-card {
    background: #ffffff;
    border: 1.5px solid var(--green-100);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 24px;
    animation: fadeUp 0.45s 0.45s ease both;
}

.progress-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(135deg, #f0fdf4, #e8faf1);
    border-bottom: 1.5px solid var(--green-100);
    flex-wrap: wrap;
    gap: 8px;
}

.progress-card-head h6 {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.progress-card-head .head-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.progress-pct-badge {
    font-family: 'Space Mono', monospace;
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--green-700);
    background: #dcfce7;
    border: 1.5px solid #bbf7d0;
    padding: 3px 11px;
    border-radius: 20px;
}

.progress-period-badge {
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    color: var(--text-muted);
    background: var(--green-50);
    border: 1.5px solid var(--green-100);
    padding: 3px 10px;
    border-radius: 20px;
}

.progress-card-body { padding: 20px; }

.progress-track {
    width: 100%;
    height: 13px;
    background: var(--green-50);
    border: 1px solid var(--green-100);
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 999px;
    background-size: 200% 100%;
    animation: shimmer 2.4s linear infinite;
    transition: width 1s cubic-bezier(.4,0,.2,1);
}

.progress-fill.daily   { background: linear-gradient(90deg, #16a34a, #22c55e, #4ade80); box-shadow: 0 0 8px rgba(34,197,94,0.3); }
.progress-fill.weekly  { background: linear-gradient(90deg, #0369a1, #0ea5e9, #38bdf8); box-shadow: 0 0 8px rgba(14,165,233,0.3); }
.progress-fill.monthly { background: linear-gradient(90deg, #7c3aed, #a855f7, #c084fc); box-shadow: 0 0 8px rgba(168,85,247,0.3); }
.progress-fill.warning { background: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24); box-shadow: 0 0 8px rgba(245,158,11,0.3); }
.progress-fill.danger  { background: linear-gradient(90deg, #dc2626, #ef4444, #f87171); box-shadow: 0 0 8px rgba(239,68,68,0.3); }

.progress-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    flex-wrap: wrap;
    gap: 6px;
}

.progress-meta .meta-item {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: 'Space Mono', monospace;
    background: var(--green-50);
    border: 1px solid var(--green-100);
    padding: 3px 10px;
    border-radius: 7px;
}

.progress-meta .meta-item strong { color: var(--text-dark); font-weight: 700; }

/* Progress grid */
.progress-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 640px) {
    .progress-grid { grid-template-columns: 1fr; }
}

.progress-card.weekly .progress-card-head  { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-bottom-color: #bfdbfe; }
.progress-card.weekly .progress-pct-badge  { background: #dbeafe; border-color: #bfdbfe; color: #1d4ed8; }
.progress-card.weekly .progress-track      { background: #eff6ff; border-color: #bfdbfe; }

.progress-card.monthly .progress-card-head { background: linear-gradient(135deg, #faf5ff, #ede9fe); border-bottom-color: #ddd6fe; }
.progress-card.monthly .progress-pct-badge { background: #ede9fe; border-color: #ddd6fe; color: #7c3aed; }
.progress-card.monthly .progress-track     { background: #faf5ff; border-color: #ddd6fe; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
</style>

<div class="dash-wrapper">

    <div class="dash-header">
        <h1 class="dash-title">Dashboard <span>Direktur</span></h1>
        <span class="dash-date"><?= strtoupper(date('D, d M Y')) ?></span>
    </div>

    <!-- Ringkasan Sistem -->
    <p class="section-label">Ringkasan Sistem</p>

    <!-- 4 kartu: User, Checklist, MOD, Urgent -->
    <div class="stat-grid">

        <!-- Total User -->
        <div class="stat-card">
            <div class="orb"></div>
            <div class="card-icon">👤</div>
            <div class="card-value"><?= $total_user ?></div>
            <div class="card-label">Total User</div>
        </div>

        <!-- Total Checklist -->
        <div class="stat-card">
            <div class="orb"></div>
            <div class="card-icon">📋</div>
            <div class="card-value"><?= $total_checklist ?></div>
            <div class="card-label">Total Checklist</div>
        </div>

        <!-- MOD Hari Ini -->
        <div class="stat-card mod">
            <div class="orb" style="background:radial-gradient(circle,rgba(14,165,233,0.1) 0%,transparent 70%);"></div>
            <div class="card-icon">🛡️</div>
            <div class="card-value"><?= $total_mod ?></div>
            <div class="card-label">MOD Hari Ini</div>
            <?php if(count($mod_names) > 0): ?>
            <div class="mod-names-list">
                <?php foreach($mod_names as $mn):
                    $wl = strtolower($mn['waktu'] ?? '');
                    $chip_class = '';
                    $chip_icon  = '🛡️';
                    if(str_contains($wl,'pagi'))       { $chip_class='pagi';  $chip_icon='🌅'; }
                    elseif(str_contains($wl,'siang'))  { $chip_class='siang'; $chip_icon='☀️'; }
                    elseif(str_contains($wl,'sore'))   { $chip_class='sore';  $chip_icon='🌇'; }
                    elseif(str_contains($wl,'malam'))  { $chip_class='malam'; $chip_icon='🌙'; }
                ?>
                <span class="mod-name-chip <?= $chip_class ?>">
                    <?= $chip_icon ?> <?= htmlspecialchars($mn['nama']) ?>
                </span>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>
        </div>

        <!-- Urgent Belum Selesai -->
        <div class="stat-card urgent">
            <div class="orb" style="background:radial-gradient(circle,rgba(239,68,68,0.1) 0%,transparent 70%);"></div>
            <div class="card-icon">🚨</div>
            <div class="card-value"><?= $total_urgent ?></div>
            <div class="card-label">Urgent Belum Selesai</div>
        </div>

    </div>

    <!-- Status Checklist Harian -->
    <p class="section-label">Status Checklist Harian</p>

    <div class="stat-grid-3">
        <div class="stat-card success">
            <div class="orb"></div>
            <div class="card-icon">✅</div>
            <div class="card-value"><?= $q_selesai ?></div>
            <div class="card-label">Checklist Selesai</div>
        </div>
        <div class="stat-card danger">
            <div class="orb"></div>
            <div class="card-icon">⏳</div>
            <div class="card-value"><?= $q_belum ?></div>
            <div class="card-label">Checklist Belum</div>
        </div>
        <div class="stat-card">
            <div class="orb"></div>
            <div class="card-icon">📊</div>
            <div class="card-value"><?= $progress ?>%</div>
            <div class="card-label">Progress Hari Ini</div>
        </div>
    </div>

    <!-- Progress Checklist -->
    <p class="section-label">Progress Checklist</p>

    <div class="progress-card">
        <div class="progress-card-head">
            <h6>📅 Progress Harian</h6>
            <div class="head-right">
                <span class="progress-period-badge"><?= date('d/m/Y') ?></span>
                <span class="progress-pct-badge"><?= $progress ?>%</span>
            </div>
        </div>
        <div class="progress-card-body">
            <?php $dc = $progress==100?'daily':($progress>=50?'warning':'danger'); ?>
            <div class="progress-track">
                <div class="progress-fill <?= $dc ?>" style="width:<?= $progress ?>%;"></div>
            </div>
            <div class="progress-meta">
                <div class="meta-item">Selesai: <strong><?= $q_selesai ?></strong></div>
                <div class="meta-item">Total: <strong><?= $total_harian ?></strong></div>
                <div class="meta-item">Belum: <strong><?= $q_belum ?></strong></div>
            </div>
        </div>
    </div>

    <!-- Progress Weekly & Monthly -->
    <div class="progress-grid">

        <div class="progress-card weekly">
            <div class="progress-card-head">
                <h6>📆 Progress Mingguan</h6>
                <div class="head-right">
                    <span class="progress-period-badge">
                        <?= date('d/m', strtotime($week_start)) ?> – <?= date('d/m/Y', strtotime($week_end)) ?>
                    </span>
                    <span class="progress-pct-badge"><?= $week_pct ?>%</span>
                </div>
            </div>
            <div class="progress-card-body">
                <?php $wc = $week_pct==100?'weekly':($week_pct>=50?'warning':'danger'); ?>
                <div class="progress-track">
                    <div class="progress-fill <?= $wc ?>" style="width:<?= $week_pct ?>%;"></div>
                </div>
                <div class="progress-meta">
                    <div class="meta-item">Selesai: <strong><?= $week_selesai ?></strong></div>
                    <div class="meta-item">Total: <strong><?= $week_total ?></strong></div>
                    <div class="meta-item">Belum: <strong><?= $week_belum ?></strong></div>
                </div>
            </div>
        </div>

        <div class="progress-card monthly">
            <div class="progress-card-head">
                <h6>🗓️ Progress Bulanan</h6>
                <div class="head-right">
                    <span class="progress-period-badge">
                        <?= date('d/m', strtotime($month_start)) ?> – <?= date('d/m/Y', strtotime($month_end)) ?>
                    </span>
                    <span class="progress-pct-badge"><?= $month_pct ?>%</span>
                </div>
            </div>
            <div class="progress-card-body">
                <?php $mc = $month_pct==100?'monthly':($month_pct>=50?'warning':'danger'); ?>
                <div class="progress-track">
                    <div class="progress-fill <?= $mc ?>" style="width:<?= $month_pct ?>%;"></div>
                </div>
                <div class="progress-meta">
                    <div class="meta-item">Selesai: <strong><?= $month_selesai ?></strong></div>
                    <div class="meta-item">Total: <strong><?= $month_total ?></strong></div>
                    <div class="meta-item">Belum: <strong><?= $month_belum ?></strong></div>
                </div>
            </div>
        </div>

    </div>

</div>

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