<?php
session_start();
include 'koneksi.php';
/* ========== STATISTIK DASHBOARD ========== */

// Total Berita
$q_berita = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM berita");
$total_berita = ($q_berita && mysqli_num_rows($q_berita) > 0) ? mysqli_fetch_assoc($q_berita)['total'] : 0;

// Berita Bulan Ini
$bulan_ini = mysqli_fetch_assoc(mysqli_query($koneksi, "
    SELECT COUNT(*) as total FROM berita 
    WHERE MONTH(tanggal) = MONTH(CURDATE()) 
    AND YEAR(tanggal) = YEAR(CURDATE())
"))['total'];

// Total Arsip
$tabel_arsip = '';
$cek_tabel1 = mysqli_query($koneksi, "SHOW TABLES LIKE 'arsip'");
$cek_tabel2 = mysqli_query($koneksi, "SHOW TABLES LIKE 'tb_arsip'");
$cek_tabel3 = mysqli_query($koneksi, "SHOW TABLES LIKE 'data_arsip'");

if ($cek_tabel1 && mysqli_num_rows($cek_tabel1) > 0) {
    $tabel_arsip = 'arsip';
} elseif ($cek_tabel2 && mysqli_num_rows($cek_tabel2) > 0) {
    $tabel_arsip = 'tb_arsip';
} elseif ($cek_tabel3 && mysqli_num_rows($cek_tabel3) > 0) {
    $tabel_arsip = 'data_arsip';
}

if ($tabel_arsip != '') {
    $q_arsip = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM $tabel_arsip");
    $total_arsip = ($q_arsip && mysqli_num_rows($q_arsip) > 0) ? mysqli_fetch_assoc($q_arsip)['total'] : 0;
    
    // Cek kolom untuk arsip dinamis dan statis
    $cek_kolom = mysqli_query($koneksi, "DESCRIBE $tabel_arsip");
    $kolom_tersedia = [];
    if ($cek_kolom) {
        while ($kolom = mysqli_fetch_assoc($cek_kolom)) {
            $kolom_tersedia[] = $kolom['Field'];
        }
    }
    
    if (in_array('jenis_arsip', $kolom_tersedia)) {
        $q_arsip_dinamis = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM $tabel_arsip WHERE jenis_arsip = 'dinamis'");
        $total_arsip_dinamis = ($q_arsip_dinamis && mysqli_num_rows($q_arsip_dinamis) > 0) ? mysqli_fetch_assoc($q_arsip_dinamis)['total'] : 0;
        
        $q_arsip_statis = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM $tabel_arsip WHERE jenis_arsip = 'statis'");
        $total_arsip_statis = ($q_arsip_statis && mysqli_num_rows($q_arsip_statis) > 0) ? mysqli_fetch_assoc($q_arsip_statis)['total'] : 0;
    } else {
        $total_arsip_dinamis = 0;
        $total_arsip_statis = 0;
    }
} else {
    $total_arsip = 0;
    $total_arsip_dinamis = 0;
    $total_arsip_statis = 0;
}

// Total Galeri
$q_galeri = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM arsip_foto");
$total_galeri = ($q_galeri && mysqli_num_rows($q_galeri) > 0) ? mysqli_fetch_assoc($q_galeri)['total'] : 0;

// Total Video
$cek_tabel_video = mysqli_query($koneksi, "SHOW TABLES LIKE 'arsip_video'");
if($cek_tabel_video && mysqli_num_rows($cek_tabel_video) > 0){
    $q_video = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM arsip_video");
    $total_video = ($q_video && mysqli_num_rows($q_video) > 0) ? mysqli_fetch_assoc($q_video)['total'] : 0;
} else {
    $total_video = 0;
}

// Total Pengguna (opsional)
$q_user = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM users");
$total_user = ($q_user && mysqli_num_rows($q_user) > 0) ? mysqli_fetch_assoc($q_user)['total'] : 0;
/* CEK LOGIN ADMIN */
if(!isset($_SESSION['admin'])){
    header("Location: login.php");
    exit;
}

/* AMBIL DATA BERITA */
$query = mysqli_query($koneksi,"
    SELECT * FROM berita
    ORDER BY id DESC
");

// Hitung total berita
$total_berita = mysqli_num_rows($query);

// Hitung berita bulan ini
$bulan_ini = mysqli_fetch_assoc(mysqli_query($koneksi, "
    SELECT COUNT(*) as total FROM berita 
    WHERE MONTH(tanggal) = MONTH(CURDATE()) 
    AND YEAR(tanggal) = YEAR(CURDATE())
"))['total'];

// ========== NOTIFIKASI ==========
// Buat tabel notifikasi jika belum ada
mysqli_query($koneksi, "
    CREATE TABLE IF NOT EXISTS notifications (
        id INT AUTO_INCREMENT PRIMARY KEY,
        jenis VARCHAR(50) NOT NULL,
        pesan TEXT NOT NULL,
        link VARCHAR(255),
        is_read TINYINT DEFAULT 0,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    )
");

// Tambahkan notifikasi contoh jika tabel kosong
$cek_notif = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM notifications");
if($cek_notif && mysqli_num_rows($cek_notif) > 0){
    $row_notif = mysqli_fetch_assoc($cek_notif);
    if($row_notif['total'] == 0){
        mysqli_query($koneksi, "
            INSERT INTO notifications (jenis, pesan, link, is_read) VALUES 
            ('berita', 'Selamat datang di Dashboard Admin DPAD', '#', 0),
            ('pengaduan', 'Sistem pengaduan masyarakat siap digunakan', 'pengaduan_admin.php', 0),
            ('arsip', 'Kelola arsip foto dan video di menu Arsip', 'arsip_poto.php', 0)
        ");
    }
}

// Hitung notifikasi belum dibaca
$query_notif = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM notifications WHERE is_read = 0");
$total_notif = 0;
if($query_notif && mysqli_num_rows($query_notif) > 0){
    $row = mysqli_fetch_assoc($query_notif);
    $total_notif = $row['total'];
}

// Ambil 5 notifikasi terbaru
$query_list = mysqli_query($koneksi, "
    SELECT * FROM notifications 
    ORDER BY created_at DESC 
    LIMIT 5
");
$notifications = [];
while($row = mysqli_fetch_array($query_list)){
    $notifications[] = $row;
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Admin | DPAD Solok Selatan</title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    
    <!-- AOS Animation -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #f0f4f8;
            min-height: 100vh;
        }

        /* ========== HEADER PREMIUM DENGAN ICON ========== */
        .header {
            background: linear-gradient(135deg, #0f3b2c 0%, #1a5f4b 100%);
            padding: 15px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .logo-area {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo-icon {
            width: 45px;
            height: 45px;
            background: rgba(255,255,255,0.15);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
        }

        .logo-icon i {
            font-size: 24px;
            color: #f5c542;
        }

        .logo-text h2 {
            color: white;
            font-size: 1.1rem;
            font-weight: 700;
        }

        .logo-text p {
            color: rgba(255,255,255,0.7);
            font-size: 0.65rem;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
        }

        /* ========== ICON BUTTON DENGAN TOOLTIP ========== */
        .icon-btn {
            position: relative;
            background: rgba(255,255,255,0.12);
            backdrop-filter: blur(10px);
            color: white;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            text-decoration: none;
            font-size: 1.2rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .icon-btn:hover {
            background: white;
            color: #1a5f4b;
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .icon-btn .tooltip {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            background: #1e293b;
            color: white;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.7rem;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            z-index: 100;
            pointer-events: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

        .icon-btn .tooltip::before {
            content: '';
            position: absolute;
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid #1e293b;
        }

        .icon-btn:hover .tooltip {
            opacity: 1;
            visibility: visible;
            bottom: -35px;
        }

        .icon-btn .badge-notif {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ef4444;
            color: white;
            font-size: 0.6rem;
            font-weight: 700;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ========== NOTIFIKASI DROPDOWN ========== */
        .notif-dropdown {
            position: absolute;
            top: 60px;
            right: 0;
            width: 380px;
            max-height: 420px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .notif-dropdown.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .notif-header {
            padding: 15px 20px;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
        }

        .notif-header span {
            font-weight: 700;
            color: #1e293b;
            font-size: 0.95rem;
        }

        .notif-header a {
            font-size: 0.7rem;
            color: #1a5f4b;
            text-decoration: none;
        }

        .notif-header a:hover {
            text-decoration: underline;
        }

        .notif-list {
            max-height: 340px;
            overflow-y: auto;
        }

        .notif-list::-webkit-scrollbar {
            width: 4px;
        }

        .notif-list::-webkit-scrollbar-track {
            background: #f1f5f9;
        }

        .notif-list::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        .notif-item {
            padding: 12px 20px;
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: 0.2s;
            cursor: pointer;
        }

        .notif-item:hover {
            background: #f8fafc;
        }

        .notif-item.unread {
            background: #f0fdf4;
            border-left: 3px solid #1a5f4b;
        }

        .notif-item .icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .notif-item .icon.berita {
            background: #dbeafe;
            color: #2563eb;
        }

        .notif-item .icon.pengaduan {
            background: #fef3c7;
            color: #d97706;
        }

        .notif-item .icon.arsip {
            background: #dcfce7;
            color: #1a5f4b;
        }

        .notif-item .content {
            flex: 1;
        }

        .notif-item .content .pesan {
            font-size: 0.85rem;
            color: #1e293b;
        }

        .notif-item .content .waktu {
            font-size: 0.65rem;
            color: #94a3b8;
            margin-top: 3px;
        }

        .notif-empty {
            text-align: center;
            padding: 40px;
            color: #94a3b8;
        }

        .notif-empty i {
            font-size: 30px;
            margin-bottom: 10px;
            display: block;
        }

        /* ========== CONTAINER ========== */
        .container {
            padding: 30px 40px;
            max-width: 1400px;
            margin: 0 auto;
        }

/* ========== STATISTIK CARD ========== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 35px;
}

.stat-card {
    background: white;
    padding: 22px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    border-left: 4px solid #f5c542;
    border: 1px solid #eef2f5;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border-color: #dce7e2;
}

.stat-info h3 {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.stat-info .number {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0f3b2c;
    line-height: 1.2;
}

.stat-info .sub-text {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 4px;
}

.stat-info .sub-text i {
    margin-right: 4px;
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #e8f5e9, #c8e6d9);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.stat-card:hover .stat-icon {
    transform: scale(1.05) rotate(3deg);
}

.stat-icon i {
    font-size: 1.6rem;
    color: #1a5f4b;
}

/* Responsive */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .stat-card {
        padding: 16px 18px;
    }
    
    .stat-info .number {
        font-size: 1.4rem;
    }
    
    .stat-icon {
        width: 42px;
        height: 42px;
    }
    
    .stat-icon i {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .stat-card {
        padding: 14px 16px;
    }
    
    .stat-info .number {
        font-size: 1.2rem;
    }
    
    .stat-info h3 {
        font-size: 0.6rem;
    }
    
    .stat-icon {
        width: 36px;
        height: 36px;
    }
    
    .stat-icon i {
        font-size: 1rem;
    }
}

        /* ========== DATE TIME PREMIUM ========== */
        .datetime-premium {
            background: white;
            padding: 15px 25px;
            border-radius: 60px;
            margin-bottom: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .datetime-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .datetime-left .date-icon {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, #1a5f4b, #0f3b2c);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
        }

        .date-info .day {
            font-size: 0.8rem;
            color: #64748b;
        }

        .date-info .date {
            font-size: 1.2rem;
            font-weight: 700;
            color: #1e293b;
        }

        .date-info .time {
            font-size: 0.8rem;
            color: #94a3b8;
            margin-top: 2px;
        }

        .datetime-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .datetime-right .greeting {
            font-size: 0.85rem;
            color: #1a5f4b;
            font-weight: 600;
        }

        .datetime-right .greeting i {
            color: #f5c542;
            margin-right: 5px;
        }

        /* ========== SEARCH BAR ========== */
        .search-bar {
            background: white;
            padding: 15px 25px;
            border-radius: 60px;
            margin-bottom: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .search-box {
            display: flex;
            gap: 10px;
            flex: 1;
            max-width: 350px;
        }

        .search-box input {
            flex: 1;
            padding: 12px 18px;
            border: 2px solid #e2e8f0;
            border-radius: 40px;
            font-size: 0.9rem;
            outline: none;
            transition: all 0.3s;
        }

        .search-box input:focus {
            border-color: #1a5f4b;
            box-shadow: 0 0 0 3px rgba(26,95,75,0.1);
        }

        .search-box button {
            background: #1a5f4b;
            border: none;
            padding: 0 22px;
            border-radius: 40px;
            color: white;
            cursor: pointer;
            transition: 0.3s;
        }

        .search-box button:hover {
            background: #0f3b2c;
        }

        .info-text {
            color: #64748b;
            font-size: 0.85rem;
        }

        .info-text i {
            color: #1a5f4b;
        }

        /* ========== TABEL MODERN ========== */
        .table-wrapper {
            background: white;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table th {
            background: linear-gradient(135deg, #1a5f4b, #0f3b2c);
            color: white;
            padding: 18px 15px;
            text-align: left;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        table td {
            padding: 16px 15px;
            border-bottom: 1px solid #edf2f7;
            vertical-align: middle;
        }

        table tr:last-child td {
            border-bottom: none;
        }

        table tr:hover {
            background: #f8fafc;
        }

        .gambar-preview {
            width: 70px;
            height: 55px;
            object-fit: cover;
            border-radius: 10px;
            background: #f1f5f9;
        }

        .judul-berita {
            font-weight: 600;
            color: #1e293b;
            max-width: 250px;
        }

        .tanggal {
            font-size: 0.85rem;
            color: #64748b;
            white-space: nowrap;
        }

        /* Tombol Aksi */
        .btn-group {
            display: flex;
            gap: 10px;
        }

        .btn-edit, .btn-delete {
            padding: 8px 16px;
            border-radius: 30px;
            text-decoration: none;
            font-size: 0.75rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
        }

        .btn-edit {
            background: #f5c542;
            color: #0f3b2c;
        }

        .btn-edit:hover {
            background: #eab308;
            transform: translateY(-2px);
        }

        .btn-delete {
            background: #fee2e2;
            color: #dc2626;
        }

        .btn-delete:hover {
            background: #dc2626;
            color: white;
            transform: translateY(-2px);
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 60px;
            background: white;
            border-radius: 24px;
        }

        .empty-state i {
            font-size: 4rem;
            color: #cbd5e1;
            margin-bottom: 20px;
        }

        /* Footer */
        .footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: #94a3b8;
            font-size: 0.75rem;
        }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 1200px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 992px) {
            .container {
                padding: 25px;
            }
        }

        @media (max-width: 768px) {
            .header {
                padding: 12px 20px;
            }
            .logo-text h2 {
                font-size: 0.85rem;
            }
            .logo-icon {
                width: 38px;
                height: 38px;
            }
            .logo-icon i {
                font-size: 18px;
            }
            .icon-btn {
                width: 38px;
                height: 38px;
                font-size: 1rem;
            }
            .notif-dropdown {
                width: 320px;
                right: -80px;
            }
            .container {
                padding: 15px;
            }
            .stats-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            .stat-card {
                padding: 18px;
            }
            .stat-info .number {
                font-size: 1.5rem;
            }
            .datetime-premium {
                flex-direction: column;
                align-items: stretch;
                border-radius: 30px;
                padding: 15px 20px;
            }
            .datetime-left {
                justify-content: center;
            }
            .datetime-right {
                justify-content: center;
                border-top: 1px solid #e2e8f0;
                padding-top: 12px;
            }
            table th, table td {
                padding: 10px 8px;
                font-size: 0.8rem;
            }
            .gambar-preview {
                width: 50px;
                height: 40px;
            }
            .judul-berita {
                max-width: 120px;
                font-size: 0.8rem;
            }
            .btn-group {
                flex-direction: column;
                gap: 5px;
            }
            .btn-edit, .btn-delete {
                padding: 6px 12px;
                font-size: 0.65rem;
            }
            .search-bar {
                flex-direction: column;
                align-items: stretch;
                border-radius: 30px;
                padding: 15px 20px;
            }
            .search-box {
                max-width: 100%;
            }
            .info-text {
                text-align: center;
            }
            .header-actions {
                gap: 8px;
            }
        }

        @media (max-width: 480px) {
            .header {
                padding: 10px 15px;
            }
            .logo-text h2 {
                font-size: 0.7rem;
            }
            .logo-text p {
                font-size: 0.55rem;
            }
            .container {
                padding: 10px;
            }
            .stat-card {
                padding: 15px;
                border-left-width: 3px;
            }
            .stat-info .number {
                font-size: 1.3rem;
            }
            .stat-icon {
                width: 45px;
                height: 45px;
            }
            .stat-icon i {
                font-size: 1.4rem;
            }
            .date-info .date {
                font-size: 1rem;
            }
            .notif-dropdown {
                width: 290px;
                right: -100px;
            }
            table th, table td {
                padding: 8px 6px;
                font-size: 0.7rem;
            }
            .btn-edit, .btn-delete {
                padding: 4px 10px;
                font-size: 0.6rem;
            }
            .btn-edit i, .btn-delete i {
                font-size: 0.6rem;
            }
            .search-box input {
                padding: 10px 14px;
                font-size: 0.8rem;
            }
            .search-box button {
                padding: 0 16px;
            }
        }
    </style>
</head>
<body>

<!-- ========== HEADER PREMIUM DENGAN ICON ========== -->
<div class="header">
    <div class="logo-area">
        <div class="logo-icon">
            <?php if(file_exists("img/logo.png")): ?>
                <img src="img/logo.png" style="width:32px; height:32px; object-fit:contain;">
            <?php else: ?>
                <i class="fas fa-archive"></i>
            <?php endif; ?>
        </div>
        <div class="logo-text">
            <h2>DINAS KEARSIPAN<br>KABUPATEN SOLOK SELATAN</h2>
            <p>Dinas Perpustakaan dan Arsip Daerah</p>
        </div>
    </div>
    
    <div class="header-actions">
        <!-- Icon Home -->
        <a href="admin/index.php" class="icon-btn">
            <i class="fas fa-home"></i>
            <span class="tooltip">Halaman Utama</span>
        </a>
        
        <!-- Icon Tambah Berita -->
        <a href="admin/tambah_berita.php" class="icon-btn">
            <i class="fas fa-plus-circle"></i>
            <span class="tooltip">Tambah Berita</span>
        </a>
        
        <!-- Icon Notifikasi -->
        <a href="#" class="icon-btn" id="notifBtn" onclick="toggleNotif()">
            <i class="fas fa-bell"></i>
            <span class="tooltip">Notifikasi</span>
            <span class="badge-notif" id="notifBadge"><?php echo $total_notif > 0 ? $total_notif : ''; ?></span>
        </a>
    
        <!-- Icon Logout -->
        <a href="dashboard.php" class="icon-btn" onclick="return confirm('Yakin ingin logout?')">
            <i class="fas fa-sign-out-alt"></i>
            <span class="tooltip">Logout</span>
        </a>
        
        <!-- ========== NOTIFIKASI DROPDOWN ========== -->
        <div class="notif-dropdown" id="notifDropdown">
            <div class="notif-header">
                <span><i class="fas fa-bell" style="color:#1a5f4b;"></i> Notifikasi</span>
                <a href="#" onclick="markAllRead()">Tandai semua dibaca</a>
            </div>
            <div class="notif-list" id="notifList">
                <?php if(count($notifications) > 0): ?>
                    <?php foreach($notifications as $notif): ?>
                        <?php 
                            $iconClass = $notif['jenis'] == 'berita' ? 'berita' : ($notif['jenis'] == 'pengaduan' ? 'pengaduan' : 'arsip');
                            $icon = $notif['jenis'] == 'berita' ? 'fa-newspaper' : ($notif['jenis'] == 'pengaduan' ? 'fa-comment-dots' : 'fa-archive');
                            $unread = $notif['is_read'] == 0 ? 'unread' : '';
                        ?>
                        <div class="notif-item <?php echo $unread; ?>" onclick="markRead(<?php echo $notif['id']; ?>)">
                            <div class="icon <?php echo $iconClass; ?>">
                                <i class="fas <?php echo $icon; ?>"></i>
                            </div>
                            <div class="content">
                                <div class="pesan"><?php echo htmlspecialchars($notif['pesan']); ?></div>
                                <div class="waktu"><?php echo date('d/m/Y H:i', strtotime($notif['created_at'])); ?></div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="notif-empty">
                        <i class="fas fa-inbox"></i>
                        <p>Belum ada notifikasi</p>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<div class="container">
    
<!-- ========== STATISTIK CARD ========== -->
<div class="stats-grid" data-aos="fade-up">
    <div class="stat-card">
        <div class="stat-info">
            <h3>Total Berita</h3>
            <div class="number"><?php echo number_format($total_berita); ?></div>
            <div class="sub-text"><i class="fas fa-arrow-up" style="color:#10b981;"></i> <?php echo $bulan_ini; ?> bulan ini</div>
        </div>
        <div class="stat-icon">
            <i class="fas fa-newspaper"></i>
        </div>
    </div>

    <div class="stat-card" style="border-left-color: #f59e0b;">
        <div class="stat-info">
            <h3>Total Galeri</h3>
            <div class="number"><?php echo number_format($total_galeri); ?></div>
            <div class="sub-text"><i class="fas fa-image"></i> Arsip Foto</div>
        </div>
        <div class="stat-icon" style="background: linear-gradient(135deg, #fef3c7, #fde68a);">
            <i class="fas fa-images" style="color: #d97706;"></i>
        </div>
    </div>
    
    <div class="stat-card" style="border-left-color: #8b5cf6;">
        <div class="stat-info">
            <h3>Total Video</h3>
            <div class="number"><?php echo number_format($total_video); ?></div>
            <div class="sub-text"><i class="fas fa-video"></i> Dokumentasi</div>
        </div>
        <div class="stat-icon" style="background: linear-gradient(135deg, #ede9fe, #ddd6fe);">
            <i class="fas fa-video" style="color: #7c3aed;"></i>
        </div>
    </div>
</div>

    <!-- ========== DATE TIME PREMIUM ========== -->
    <div class="datetime-premium" data-aos="fade-up" data-aos-delay="100">
        <div class="datetime-left">
            <div class="date-icon">
                <i class="fas fa-calendar-day"></i>
            </div>
            <div class="date-info">
                <div class="day"><?php echo date('l'); ?></div>
                <div class="date"><?php echo date('d F Y'); ?></div>
                <div class="time"><i class="far fa-clock"></i> <?php echo date('H:i:s'); ?> WIB</div>
            </div>
        </div>
        <div class="datetime-right">
            <div class="greeting">
                <i class="fas fa-hand-peace"></i> 
                Selamat <?php 
                    $jam = date('H');
                    if($jam >= 4 && $jam < 10) echo 'Pagi';
                    elseif($jam >= 10 && $jam < 15) echo 'Siang';
                    elseif($jam >= 15 && $jam < 18) echo 'Sore';
                    else echo 'Malam';
                ?>, Admin!
            </div>
            <div style="display: flex; gap: 5px; font-size: 1.2rem;">
                <?php
                $hari = date('N');
                for($i=1; $i<=7; $i++):
                    $active = ($i == $hari) ? 'style="color: #1a5f4b; transform: scale(1.2);"' : 'style="color: #cbd5e1;"';
                ?>
                <span <?php echo $active; ?>>
                    <?php 
                        $nama_hari = ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min'];
                        echo $nama_hari[$i-1];
                    ?>
                </span>
                <?php endfor; ?>
            </div>
        </div>
    </div>

    <!-- ========== SEARCH BAR ========== -->
    <div class="search-bar" data-aos="fade-up" data-aos-delay="200">
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Cari berita berdasarkan judul..." onkeyup="searchBerita()">
            <button onclick="searchBerita()"><i class="fas fa-search"></i></button>
        </div>
        <div class="info-text">
            <i class="fas fa-info-circle"></i> Total <strong><?php echo $total_berita; ?></strong> berita terdaftar
        </div>
    </div>

    <!-- ========== TABEL BERITA ========== -->
    <div class="table-wrapper" data-aos="fade-up" data-aos-delay="300">
        <table id="beritaTable">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Gambar</th>
                    <th>Judul Berita</th>
                    <th>Tanggal</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php
                $no = 1;
                if(mysqli_num_rows($query) > 0):
                    while($data = mysqli_fetch_array($query)):
                ?>
                <tr>
                    <td><?php echo $no++; ?></td>
                    <td>
                        <?php 
                        $gambar_array = explode(',', $data['gambar']);
                        $gambar_pertama = trim($gambar_array[0]);
                        if(!empty($gambar_pertama) && file_exists("img/".$gambar_pertama)): 
                        ?>
                            <img src="img/<?php echo $gambar_pertama; ?>" class="gambar-preview" alt="Gambar">
                        <?php else: ?>
                            <img src="https://placehold.co/70x55/1a5f4b/white?text=No+Img" class="gambar-preview" alt="No Image">
                        <?php endif; ?>
                    </td>
                    <td class="judul-berita"><?php echo htmlspecialchars($data['judul']); ?></td>
                    <td class="tanggal">
                        <i class="fas fa-calendar-alt" style="color: #1a5f4b; margin-right:5px;"></i>
                        <?php echo date('d F Y', strtotime($data['tanggal'])); ?>
                    </td>
                    <td>
                        <div class="btn-group">
                            <a href="edit.php?id=<?php echo $data['id']; ?>" class="btn-edit">
                                <i class="fas fa-edit"></i> Edit
                            </a>
                            <a href="hapus_berita.php?id=<?php echo $data['id']; ?>" class="btn-delete" onclick="return confirm('Yakin ingin menghapus berita ini?')">
                                <i class="fas fa-trash-alt"></i> Hapus
                            </a>
                        </div>
                    </td>
                </tr>
                <?php 
                    endwhile;
                else:
                ?>
                <tr>
                    <td colspan="5" style="text-align: center; padding: 60px;">
                        <div class="empty-state" style="background: transparent;">
                            <i class="fas fa-newspaper"></i>
                            <h3 style="margin-bottom: 10px;">Belum Ada Berita</h3>
                            <p style="color: #64748b;">Silakan tambah berita pertama Anda</p>
                            <a href="tambah_berita.php" style="display: inline-block; margin-top: 15px; background: #1a5f4b; color: white; padding: 10px 25px; border-radius: 30px; text-decoration: none;">
                                <i class="fas fa-plus"></i> Tambah Berita
                            </a>
                        </div>
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <div class="footer">
        <p>&copy; <?php echo date('Y'); ?> Dinas Perpustakaan dan Arsip Daerah Kabupaten Solok Selatan</p>
        <p style="margin-top: 5px;">Dashboard Admin - Kelola Berita & Informasi Publik</p>
    </div>
</div>

<!-- ========== SCRIPT ========== -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 600,
        once: true,
        offset: 50
    });

    // Fungsi pencarian berita
    function searchBerita() {
        const input = document.getElementById('searchInput');
        const filter = input.value.toLowerCase();
        const table = document.getElementById('beritaTable');
        const tr = table.getElementsByTagName('tr');

        for (let i = 1; i < tr.length; i++) {
            const td = tr[i].getElementsByTagName('td')[2];
            if (td) {
                const txtValue = td.textContent || td.innerText;
                tr[i].style.display = txtValue.toLowerCase().indexOf(filter) > -1 ? '' : 'none';
            }
        }
    }

    // Update waktu real-time
    function updateTime() {
        const now = new Date();
        const options = { 
            weekday: 'long', 
            year: 'numeric', 
            month: 'long', 
            day: 'numeric' 
        };
        const timeStr = now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
        document.querySelector('.date-info .day').textContent = now.toLocaleDateString('id-ID', { weekday: 'long' });
        document.querySelector('.date-info .date').textContent = now.toLocaleDateString('id-ID', options);
        document.querySelector('.date-info .time').innerHTML = `<i class="far fa-clock"></i> ${timeStr} WIB`;
    }
    updateTime();
    setInterval(updateTime, 1000);

    // ========== FUNGSI NOTIFIKASI ==========
    function toggleNotif() {
        const dropdown = document.getElementById('notifDropdown');
        dropdown.classList.toggle('active');
        if(dropdown.classList.contains('active')) {
            loadNotifications();
        }
    }

    function loadNotifications() {
        // Gunakan data dari PHP yang sudah ada, bukan fetch
        // Karena data notifikasi sudah di-load dari PHP
        const badge = document.getElementById('notifBadge');
        const list = document.getElementById('notifList');
        
        // Data notifikasi sudah ada dari PHP ($notifications)
        // Tapi kita tetap panggil fetch untuk update real-time
        fetch('get_notifikasi.php')
            .then(response => response.json())
            .then(data => {
                if(data.total > 0) {
                    badge.textContent = data.total > 99 ? '99+' : data.total;
                    badge.style.display = 'flex';
                } else {
                    badge.style.display = 'none';
                }
                
                if(data.list && data.list.length > 0) {
                    let html = '';
                    data.list.forEach(notif => {
                        const iconClass = notif.jenis === 'berita' ? 'berita' : 
                                         notif.jenis === 'pengaduan' ? 'pengaduan' : 'arsip';
                        const icon = notif.jenis === 'berita' ? 'fa-newspaper' :
                                    notif.jenis === 'pengaduan' ? 'fa-comment-dots' : 'fa-archive';
                        const unreadClass = notif.is_read == 0 ? 'unread' : '';
                        
                        html += `
                            <div class="notif-item ${unreadClass}" onclick="markRead(${notif.id})">
                                <div class="icon ${iconClass}">
                                    <i class="fas ${icon}"></i>
                                </div>
                                <div class="content">
                                    <div class="pesan">${notif.pesan}</div>
                                    <div class="waktu">${notif.waktu}</div>
                                </div>
                            </div>
                        `;
                    });
                    list.innerHTML = html;
                } else {
                    list.innerHTML = `
                        <div class="notif-empty">
                            <i class="fas fa-inbox"></i>
                            <p>Belum ada notifikasi</p>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // Jika fetch gagal, gunakan data dari PHP
                <?php if(count($notifications) > 0): ?>
                let html = '';
                <?php foreach($notifications as $notif): ?>
                    <?php 
                        $iconClass = $notif['jenis'] == 'berita' ? 'berita' : ($notif['jenis'] == 'pengaduan' ? 'pengaduan' : 'arsip');
                        $icon = $notif['jenis'] == 'berita' ? 'fa-newspaper' : ($notif['jenis'] == 'pengaduan' ? 'fa-comment-dots' : 'fa-archive');
                        $unread = $notif['is_read'] == 0 ? 'unread' : '';
                    ?>
                    html += `
                        <div class="notif-item <?php echo $unread; ?>" onclick="markRead(<?php echo $notif['id']; ?>)">
                            <div class="icon <?php echo $iconClass; ?>">
                                <i class="fas <?php echo $icon; ?>"></i>
                            </div>
                            <div class="content">
                                <div class="pesan"><?php echo addslashes(htmlspecialchars($notif['pesan'])); ?></div>
                                <div class="waktu"><?php echo date('d/m/Y H:i', strtotime($notif['created_at'])); ?></div>
                            </div>
                        </div>
                    `;
                <?php endforeach; ?>
                list.innerHTML = html;
                <?php else: ?>
                list.innerHTML = `
                    <div class="notif-empty">
                        <i class="fas fa-inbox"></i>
                        <p>Belum ada notifikasi</p>
                    </div>
                `;
                <?php endif; ?>
            });
    }

    function markRead(id) {
        fetch('mark_notif_read.php?id=' + id)
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    // Update badge
                    fetch('get_notifikasi.php')
                        .then(res => res.json())
                        .then(data => {
                            const badge = document.getElementById('notifBadge');
                            if(data.total > 0) {
                                badge.textContent = data.total > 99 ? '99+' : data.total;
                                badge.style.display = 'flex';
                            } else {
                                badge.style.display = 'none';
                            }
                        });
                    // Refresh list
                    loadNotifications();
                }
            });
    }

    function markAllRead() {
        fetch('mark_all_read.php')
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    document.getElementById('notifBadge').style.display = 'none';
                    document.getElementById('notifDropdown').classList.remove('active');
                    loadNotifications();
                }
            });
    }

    // Tutup dropdown saat klik di luar
    document.addEventListener('click', function(e) {
        const dropdown = document.getElementById('notifDropdown');
        const btn = document.getElementById('notifBtn');
        if(dropdown && !dropdown.contains(e.target) && !btn.contains(e.target)) {
            dropdown.classList.remove('active');
        }
    });

    // Load notifikasi saat halaman dimuat
    document.addEventListener('DOMContentLoaded', function() {
        // Load notifikasi pertama kali
        loadNotifications();
        // Refresh notifikasi setiap 30 detik
        setInterval(loadNotifications, 30000);
    });
</script>

</body>
</html>