<?php
// Tentukan halaman aktif untuk sidebar
$current_page = basename($_SERVER['PHP_SELF']);
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bapintar</title>
    
    <!-- plugins:css -->
    <link rel="stylesheet" href="assets_skydash/vendors/feather/feather.css">
    <link rel="stylesheet" href="assets_skydash/vendors/ti-icons/css/themify-icons.css">
    <link rel="stylesheet" href="assets_skydash/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="assets_skydash/vendors/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets_skydash/vendors/mdi/css/materialdesignicons.min.css">
    <!-- endinject -->
    
    <!-- Plugin css for this page -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.7.0/css/select.bootstrap5.min.css">
    <!-- End plugin css for this page -->
    
    <!-- inject:css -->
    <link rel="stylesheet" href="assets_skydash/css/style.css">
    <!-- endinject -->
    <link rel="shortcut icon" href="<?= !empty($logo_path) ? htmlspecialchars($logo_path) : 'assets/images/favicon.ico' ?>" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">

    <!-- Custom CSS for Dashboard Widgets -->
    <style>
        .badge-custom { padding: 6px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.3px; display: inline-block;}
        .bg-positif, .bg-baik { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0;}
        .bg-negatif, .bg-buruk { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca;}
        .bg-netral { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;}
        .bg-tinggi { background: #fee2e2; color: #b91c1c; }
        .bg-sedang { background: #fef3c7; color: #b45309; }
        .bg-rendah { background: #dbeafe; color: #1d4ed8; }
        .news-thumbnail { width: 70px; height: 70px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);}
        .news-placeholder { width: 70px; height: 70px; background: #f1f5f9; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 1.8rem; }
        .carousel-item { height: 350px; border-radius: 20px; overflow: hidden; background: #0f172a; position: relative;}
        .carousel-item img { object-fit: cover; width: 100%; height: 100%; opacity: 0.6; transition: transform 5s ease;}
        .carousel-caption { bottom: 0; text-align: left; left: 0; right: 0; padding: 40px 30px 30px; background: linear-gradient(to top, rgba(15,23,42,0.9), transparent); }
        .carousel-caption h3 { font-weight: 800; font-size: 1.8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; margin-bottom: 10px;}
        .log-box-container { border-radius: 16px; overflow: hidden; background: #0f172a; box-shadow: 0 15px 35px -5px rgba(15,23,42,0.4); border: 1px solid #1e293b;}
        .log-box-header { background: #1e293b; padding: 10px 16px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid #334155;}
        .log-dot { width: 12px; height: 12px; border-radius: 50%; }
        .dot-red { background: #ff5f56; } .dot-yellow { background: #ffbd2e; } .dot-green { background: #27c93f; }
        .log-title { color: #94a3b8; font-size: 0.75rem; font-weight: 600; margin-left: auto;}
        .log-box { background: #0f172a; color: #f8fafc; padding: 16px; font-family: monospace; font-size: 0.85rem; height: 140px; overflow-y: auto; line-height: 1.5;}
        .log-success { color: #34d399; } .log-error { color: #f87171; } .log-warn { color: #fbbf24; } .log-info { color: #94a3b8; margin-bottom: 6px; }
        .icon-blue { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #2563eb; }
        .icon-green { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #059669; }
        .icon-red { background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #dc2626; }
        .card-icon { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-right: 20px; }
        .stat-value { font-size: 2.2rem; font-weight: 800; color: #0f172a; line-height: 1.1; letter-spacing: -0.5px; }
        .stat-label { font-size: 0.85rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px;}
        .dash-card { padding: 24px; display: flex; align-items: center; background: #ffffff; border-radius: 20px; border: 1px solid rgba(226,232,240,0.6); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.03);}
    </style>

    <!-- plugins:js -->
    <script src="assets_skydash/vendors/js/vendor.bundle.base.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="assets_skydash/vendors/chart.js/chart.umd.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>
    <script src="assets/libs/apexcharts/apexcharts.min.js"></script>

</head>
<body>
<div class="container-scroller">
    <!-- partial:partials/_navbar.html -->
    <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
        <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-start">
            <a class="navbar-brand brand-logo me-5" href="index.php" style="font-weight: 700; color: #4B49AC; font-size: 20px; display: flex; align-items: center;">
                <img src="<?= !empty($logo_path) ? htmlspecialchars($logo_path) : 'assets/images/logo-dark.png' ?>" alt="logo" style="height:40px; margin-right:10px; object-fit: contain;"> Bapintar
            </a>
            <a class="navbar-brand brand-logo-mini" href="index.php" style="font-weight: 700; color: #4B49AC; font-size: 20px;">
                <img src="<?= !empty($logo_path) ? htmlspecialchars($logo_path) : 'assets/images/logo-sm-dark.png' ?>" alt="logo" style="height:40px; object-fit: contain;">
            </a>
        </div>
        <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
            <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
                <span class="icon-menu"></span>
            </button>
            <ul class="navbar-nav mr-lg-2">
                <li class="nav-item nav-search d-none d-lg-block">
                    <div class="input-group">
                        <div class="input-group-prepend hover-cursor" id="navbar-search-icon">
                            <span class="input-group-text" id="search">
                                <i class="icon-search"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control" id="navbar-search-input" placeholder="Search now" aria-label="search" aria-describedby="search">
                    </div>
                </li>
            </ul>
            <ul class="navbar-nav navbar-nav-right">
                <li class="nav-item nav-profile dropdown">
                    <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" data-bs-toggle="dropdown" id="profileDropdown">
                        <img src="assets_skydash/images/faces/face28.jpg" alt="profile" class="me-2"/>
                        <span class="d-none d-xl-inline-block"><?= htmlspecialchars($nama_instansi ?? 'Instansi') ?></span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="profileDropdown">
                        <a class="dropdown-item" href="pengaturan.php">
                            <i class="ti-settings text-primary"></i> Pengaturan
                        </a>
                        <a class="dropdown-item" href="logout.php">
                            <i class="ti-power-off text-primary"></i> Logout
                        </a>
                    </div>
                </li>
            </ul>
            <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
                <span class="icon-menu"></span>
            </button>
        </div>
    </nav>

    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
        <!-- partial:partials/_sidebar.html -->
        <nav class="sidebar sidebar-offcanvas" id="sidebar">
            <ul class="nav">
                <?php if(isset($_SESSION['role']) && $_SESSION['role'] === 'pimpinan'): ?>
                <li class="nav-item <?= ($current_page == 'dashboard_executive.php') ? 'active' : '' ?>">
                    <a class="nav-link" href="dashboard_executive.php">
                        <i class="icon-grid menu-icon text-success"></i>
                        <span class="menu-title fw-bold text-success">Executive Dashboard</span>
                    </a>
                </li>
                <?php else: ?>
                <li class="nav-item <?= ($current_page == 'index.php') ? 'active' : '' ?>">
                    <a class="nav-link" href="index.php">
                        <i class="icon-grid menu-icon"></i>
                        <span class="menu-title">Dashboard</span>
                    </a>
                </li>
                <?php endif; ?>
                
                <li class="nav-item <?= ($current_page == 'semua_berita.php') ? 'active' : '' ?>">
                    <a class="nav-link" href="semua_berita.php">
                        <i class="icon-paper menu-icon"></i>
                        <span class="menu-title">Semua Berita</span>
                    </a>
                </li>
                <li class="nav-item <?= ($current_page == 'sosmed.php') ? 'active' : '' ?>">
                    <a class="nav-link" href="sosmed.php">
                        <i class="icon-share menu-icon"></i>
                        <span class="menu-title">Sosmed</span>
                    </a>
                </li>
                
                <li class="nav-item <?= ($current_page == 'trend_sentimen.php') ? 'active' : '' ?>">
                    <a class="nav-link" href="trend_sentimen.php">
                        <i class="icon-bar-graph menu-icon text-info"></i>
                        <span class="menu-title fw-bold text-info">Tren Sentimen</span>
                    </a>
                </li>

                <?php if(!isset($_SESSION['role']) || $_SESSION['role'] !== 'pimpinan'): ?>
                <li class="nav-item <?= ($current_page == 'media.php') ? 'active' : '' ?>">
                    <a class="nav-link" href="media.php">
                        <i class="icon-layout menu-icon"></i>
                        <span class="menu-title">Kelola Media</span>
                    </a>
                </li>
                <li class="nav-item <?= ($current_page == 'skpd.php') ? 'active' : '' ?>">
                    <a class="nav-link" href="skpd.php">
                        <i class="icon-grid menu-icon text-primary"></i>
                        <span class="menu-title fw-bold">Master SKPD</span>
                    </a>
                </li>
                <?php endif; ?>

                <li class="nav-item <?= ($current_page == 'lapor.php') ? 'active' : '' ?>">
                    <a class="nav-link" href="lapor.php">
                        <i class="icon-bell menu-icon text-danger"></i>
                        <span class="menu-title fw-bold">SP4N LAPOR!</span>
                    </a>
                </li>

                <?php if(!isset($_SESSION['role']) || $_SESSION['role'] !== 'pimpinan'): ?>
                <li class="nav-item <?= ($current_page == 'pengaturan.php') ? 'active' : '' ?>">
                    <a class="nav-link" href="pengaturan.php">
                        <i class="icon-columns menu-icon"></i>
                        <span class="menu-title">Pengaturan</span>
                    </a>
                </li>
                <?php endif; ?>

                <li class="nav-item">
                    <a class="nav-link text-danger" href="logout.php">
                        <i class="icon-head menu-icon text-danger"></i>
                        <span class="menu-title text-danger">Logout</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- partial -->
        <div class="main-panel">
            <div class="content-wrapper">