
<?php
session_start();
// Apabila user belum login
if (empty($_SESSION['namauser']) AND empty($_SESSION['passuser'])){
  echo "<link href=\"\" rel=\"stylesheet\" type=\"text/css\" />
        <div id=\"login\"><h1 class=\"fail\">Untuk mengakses modul, Anda harus login dulu.</h1>
        <p class=\"fail\"><a href=\"index.php\">LOGIN</a></p></div>";  
}
// Apabila user sudah login dengan benar, maka terbentuklah session
else{
    include "../config/koneksi.php";
     $query = "SELECT * FROM identitas LIMIT 1";
        $hasil = mysqli_query($konek, $query);
        $r     = mysqli_fetch_array($hasil);
    
?>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Administrator</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <!-- Favicon -->
    <link href="../foto_icon/<?php echo"$r[favicon]"?>" rel="icon">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Roboto:wght@500;700&display=swap" rel="stylesheet"> 
    
    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />

    <!-- Customized Bootstrap Stylesheet -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
    
    
    <style>
/* ==========================================================================
   PREMIUM ULTRA-DARK RED THEME (Vercel / Linear Style)
   Prefix: adm- (100% Isolated)
   ========================================================================== */

:root {
    --adm-bg-main: #08080a;
    --adm-bg-surface: rgba(18, 18, 22, 0.75);
    --adm-bg-card: rgba(24, 24, 30, 0.6);
    --adm-bg-hover: rgba(255, 255, 255, 0.04);
    
    --adm-border: rgba(255, 255, 255, 0.08);
    --adm-border-active: rgba(230, 57, 70, 0.4);
    
    --adm-primary: #e63946;
    --adm-primary-gradient: linear-gradient(135deg, #e63946 0%, #9d1723 100%);
    --adm-glow: rgba(230, 57, 70, 0.15);
    
    --adm-text: #f8fafc;
    --adm-text-sub: #8e8ea0;
    
    --adm-sidebar-w: 260px;
    --adm-navbar-h: 68px;
    --adm-radius: 14px;
    --adm-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    background-color: var(--adm-bg-main) !important;
    color: var(--adm-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    /* Ambient Glow Background */
    background-image: 
        radial-gradient(circle at 0% 0%, rgba(230, 57, 70, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(230, 57, 70, 0.03) 0%, transparent 40%);
    background-attachment: fixed;
}

.adm-wrapper {
    display: flex;
    min-height: 100vh;
}

/* ==========================================================================
   SIDEBAR (Glassmorphism Modern)
   ========================================================================== */
.adm-sidebar {
    width: var(--adm-sidebar-w);
    background: var(--adm-bg-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--adm-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    transition: var(--adm-transition);
}

/* Header Brand */
.adm-sidebar-brand {
    height: var(--adm-navbar-h);
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--adm-border);
}

.adm-brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--adm-text);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
}

.adm-brand-icon {
    width: 32px;
    height: 32px;
    background: var(--adm-primary-gradient);
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px var(--adm-glow);
}

/* User Card - Compact Style */
.adm-user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin: 16px;
    background: var(--adm-bg-hover);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
}

.adm-avatar-wrapper {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.adm-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.adm-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 9px;
    height: 9px;
    background: #10b981;
    border: 2px solid #121216;
    border-radius: 50%;
}

.adm-user-name {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--adm-text);
}

.adm-user-role {
    font-size: 0.7rem;
    color: var(--adm-text-sub);
}

/* Navigation Links */
.adm-nav-menu {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.adm-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--adm-text-sub);
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    transition: var(--adm-transition);
}

.adm-nav-item:hover {
    background: var(--adm-bg-hover);
    color: var(--adm-text);
}

.adm-nav-item.active {
    background: var(--adm-bg-hover);
    color: var(--adm-text);
    border: 1px solid var(--adm-border-active);
    box-shadow: 0 0 15px var(--adm-glow);
}

.adm-nav-item.active .adm-nav-icon {
    color: var(--adm-primary);
}

.adm-nav-icon {
    font-size: 1rem;
    width: 18px;
    text-align: center;
    transition: var(--adm-transition);
}

.adm-logout {
    margin-top: auto;
    color: #f87171;
}

.adm-logout:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ==========================================================================
   MAIN CONTENT & HEADER
   ========================================================================== */
.adm-main-content {
    flex: 1;
    margin-left: var(--adm-sidebar-w);
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: var(--adm-transition);
}

.adm-navbar {
    height: var(--adm-navbar-h);
    background: var(--adm-bg-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--adm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 900;
}

.adm-toggle-btn {
    background: var(--adm-bg-hover);
    border: 1px solid var(--adm-border);
    color: var(--adm-text);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--adm-transition);
}

.adm-toggle-btn:hover {
    border-color: var(--adm-border-active);
    color: var(--adm-primary);
}

/* User Dropdown */
.adm-dropdown {
    position: relative;
}

.adm-dropdown-toggle {
    background: var(--adm-bg-hover);
    border: 1px solid var(--adm-border);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--adm-text);
    cursor: pointer;
    padding: 4px 12px 4px 6px;
    border-radius: 30px;
    transition: var(--adm-transition);
}

.adm-dropdown-toggle:hover {
    border-color: var(--adm-border-active);
}

.adm-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.adm-username-display {
    font-size: 0.82rem;
    font-weight: 500;
}

.adm-caret {
    font-size: 0.7rem;
    color: var(--adm-text-sub);
}

.adm-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 180px;
    background: rgba(18, 18, 22, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: none;
    flex-direction: column;
    padding: 6px;
    z-index: 1000;
}

.adm-dropdown-menu.adm-show {
    display: flex;
    animation: adm-slideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes adm-slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.adm-dropdown-item {
    padding: 8px 12px;
    color: var(--adm-text-sub);
    text-decoration: none;
    font-size: 0.82rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--adm-transition);
}

.adm-dropdown-item:hover {
    background: var(--adm-bg-hover);
    color: var(--adm-text);
}

/* Content Panel */
.adm-container {
    padding: 24px;
    flex: 1;
}

.adm-card {
    background: var(--adm-bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    padding: 24px;
}

/* Spinner Loader */
.adm-spinner-overlay {
    position: fixed;
    inset: 0;
    background: var(--adm-bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: var(--adm-transition);
}

.adm-spinner-overlay.adm-show {
    opacity: 1;
    visibility: visible;
}

.adm-spinner-ring {
    width: 36px;
    height: 36px;
    border: 2px solid var(--adm-border);
    border-top-color: var(--adm-primary);
    border-radius: 50%;
    animation: adm-spin 0.7s linear infinite;
}

@keyframes adm-spin {
    to { transform: rotate(360deg); }
}

/* Mobile Responsive Overlay */
.adm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: var(--adm-transition);
}

.adm-overlay.adm-active {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 991.98px) {
    .adm-sidebar {
        transform: translateX(-100%);
    }

    .adm-sidebar.adm-mobile-open {
        transform: translateX(0);
    }

    .adm-main-content {
        margin-left: 0 !important;
    }

    .adm-navbar {
        padding: 0 16px;
    }

    .adm-container {
        padding: 16px;
    }

    .adm-username-display {
        display: none;
    }
}
    </style>
</head>

  <!-- TinyMCE (WYSIYWG Editor) -->
  <script type="text/javascript" src="../tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
  <script type="text/javascript" src="../tinymce/jscripts/tiny_mce/tiny_lokomedia.js"></script>
<script src="js/ckeditor.js"></script>


<body>

<div class="adm-wrapper">
    <!-- Backdrop Overlay HP -->
    <div class="adm-overlay" id="admOverlay"></div>

    <!-- Spinner Loading -->
    <div id="adm-spinner" class="adm-spinner-overlay adm-show">
        <div class="adm-spinner-ring"></div>
    </div>

    <!-- Sidebar Start -->
    <aside class="adm-sidebar" id="admSidebar">
        <div class="adm-sidebar-brand">
            <a href="?module=beranda" class="adm-brand-link">
                <div class="adm-brand-icon">
                    <i class="fa fa-shield-alt"></i>
                </div>
                <span>CORE ADMIN</span>
            </a>
        </div>

        <div class="adm-user-profile">
            <div class="adm-avatar-wrapper">
                <img class="adm-avatar-img" src="../foto_icon/<?php echo"$r[favicon]"?>" alt="Avatar">
                <span class="adm-status-dot"></span>
            </div>
            <div class="adm-user-info">
                <h6 class="adm-user-name"><?php echo $_SESSION['namalengkap'] ?? 'Admin'; ?></h6>
                <span class="adm-user-role">Administrator</span>
            </div>
        </div>

        <nav class="adm-nav-menu">
            <a href="?module=beranda" class="adm-nav-item active">
                <i class="fa fa-chart-pie adm-nav-icon"></i>
                <span>Beranda</span>
            </a>
            
            <div class="adm-nav-custom-wrapper">
                <?php include "menu.php"; ?>
            </div>

            <a href="logout.php" class="adm-nav-item adm-logout">
                <i class="fa fa-power-off adm-nav-icon"></i>
                <span>Keluar</span>
            </a>
        </nav>
    </aside>

    <!-- Main Content Start -->
    <div class="adm-main-content">
        <header class="adm-navbar">
            <button type="button" class="adm-toggle-btn" id="admSidebarToggle" aria-label="Toggle Navigation">
                <i class="fa fa-bars"></i>
            </button>

            <div class="adm-dropdown">
                <button class="adm-dropdown-toggle" type="button" id="admUserMenuBtn">
                    <img class="adm-avatar-sm" src="../foto_icon/<?php echo"$r[favicon]"?>" alt="User">
                    <span class="adm-username-display"><?php echo $r['nama_pemilik'] ?? 'Admin'; ?></span>
                    <i class="fa fa-chevron-down adm-caret"></i>
                </button>
                <div class="adm-dropdown-menu" id="admUserDropdown">
                    <a href="?module=user" class="adm-dropdown-item">
                        <i class="fa fa-user-cog"></i> Profil
                    </a>
                    <a href="logout.php" class="adm-dropdown-item" style="color: #f87171;">
                        <i class="fa fa-sign-out-alt"></i> Keluar
                    </a>
                </div>
            </div>
        </header>

        <main class="adm-container">
            <div class="adm-card">
                <?php include "content.php"; ?>
            </div>
        </main>
    </div>
</div>







<script>
   document.addEventListener('DOMContentLoaded', () => {
    const sidebar = document.getElementById('admSidebar');
    const toggleBtn = document.getElementById('admSidebarToggle');
    const overlay = document.getElementById('admOverlay');
    const userMenuBtn = document.getElementById('admUserMenuBtn');
    const userDropdown = document.getElementById('admUserDropdown');
    const spinner = document.getElementById('adm-spinner');

    // Hide loader
    if (spinner) {
        setTimeout(() => spinner.classList.remove('adm-show'), 200);
    }

    // Toggle Sidebar Desktop & Mobile
    const handleToggle = () => {
        const isMobile = window.innerWidth < 992;
        if (isMobile) {
            sidebar.classList.toggle('adm-mobile-open');
            overlay.classList.toggle('adm-active');
        } else {
            const isCollapsed = sidebar.style.transform === 'translateX(-100%)';
            sidebar.style.transform = isCollapsed ? 'translateX(0)' : 'translateX(-100%)';
            document.querySelector('.adm-main-content').style.marginLeft = isCollapsed ? 'var(--adm-sidebar-w)' : '0';
        }
    };

    if (toggleBtn) toggleBtn.addEventListener('click', handleToggle);
    if (overlay) overlay.addEventListener('click', handleToggle);

    // Toggle Custom Dropdown
    if (userMenuBtn && userDropdown) {
        userMenuBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            userDropdown.classList.toggle('adm-show');
        });

        document.addEventListener('click', () => {
            userDropdown.classList.remove('adm-show');
        });
    }
});
</script>








    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="lib/chart/chart.min.js"></script>
    <script src="lib/easing/easing.min.js"></script>
    <script src="lib/waypoints/waypoints.min.js"></script>
    <script src="lib/owlcarousel/owl.carousel.min.js"></script>
    <script src="lib/tempusdominus/js/moment.min.js"></script>
    <script src="lib/tempusdominus/js/moment-timezone.min.js"></script>
    <script src="lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js"></script>

    <!-- Template Javascript -->
    <script src="js/main.js"></script>
<script >
    
document.addEventListener('DOMContentLoaded', () => {
  let editorInstance;

  ClassicEditor
    .create(document.querySelector('#editor'), {
      ckfinder: {
        uploadUrl: 'backend/upload.php'
      },
      toolbar: [
        'heading', '|',
        'bold', 'italic', 'link', '|',
        'bulletedList', 'numberedList', '|',
        'imageUpload', 'mediaEmbed', 'htmlEmbed', 'sourceEditing', '|',
        'undo', 'redo'
      ],
      image: {
        toolbar: ['imageTextAlternative', 'imageStyle:full', 'imageStyle:side']
      },
      htmlEmbed: {
        showPreviews: true
      },
      mediaEmbed: {
        previewsInData: true
      }
    })
    .then(editor => {
      editorInstance = editor;
      console.log('Editor berhasil diinisialisasi');
    })
    .catch(error => {
      console.error('Terjadi kesalahan saat inisialisasi editor:', error);
    });

  const form = document.getElementById('editorForm');
  const messageDiv = document.getElementById('message');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const content = editorInstance.getData();

    try {
      const response = await fetch('backend/save.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `content=${encodeURIComponent(content)}`,
      });

      const result = await response.json();
      messageDiv.textContent = result.message;
      messageDiv.style.color = result.success ? 'green' : 'red';
    } catch (error) {
      messageDiv.textContent = 'Terjadi kesalahan saat menyimpan konten.';
      messageDiv.style.color = 'red';
    }
  });
});


    
    
</script>
  
  </body>
</html>
<?php } ?>
