<?php
require_once __DIR__ . '/session.php';
require_once __DIR__ . '/utils.php';

$session = SessionManager::getInstance();

if (!$session->isLoggedIn() && basename($_SERVER['PHP_SELF']) !== 'login.php') {
    header('Location: login.php');
    exit;
}

$currentPage = basename($_SERVER['PHP_SELF'], '.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>⬡ CLASSIFIED // Admin Panel</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-primary: #0a0e17;
            --bg-secondary: #0d1321;
            --bg-card: #111827;
            --bg-card-hover: #1a2332;
            --border-color: #1e3a5f;
            --border-glow: #00ff88;
            --text-primary: #e0e7ef;
            --text-secondary: #64748b;
            --text-muted: #3a5068;
            --accent-green: #00ff88;
            --accent-cyan: #00d4ff;
            --accent-red: #ff3366;
            --accent-amber: #ffaa00;
            --accent-purple: #a855f7;
            --glow-green: 0 0 10px rgba(0,255,136,0.3);
            --glow-cyan: 0 0 10px rgba(0,212,255,0.3);
            --glow-red: 0 0 10px rgba(255,51,102,0.3);
            --scanline: rgba(0,255,136,0.03);
        }

        * { box-sizing: border-box; }
        
        body {
            font-family: 'JetBrains Mono', monospace;
            background: var(--bg-primary);
            color: var(--text-primary);
            margin: 0;
            padding-bottom: 75px;
            font-size: 12px;
            position: relative;
            overflow-x: hidden;
        }

        /* Scanline overlay effect */
        body::before {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                var(--scanline) 2px,
                var(--scanline) 4px
            );
            pointer-events: none;
            z-index: 9999;
            animation: scanFlicker 8s infinite;
        }

        @keyframes scanFlicker {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 0.2; }
        }

        /* Matrix rain canvas (background) */
        #matrixCanvas {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: -1;
            opacity: 0.06;
        }

        /* Top Nav Bar */
        .top-nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            height: 56px;
            background: rgba(10,14,23,0.95);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            padding: 0 16px;
            z-index: 100;
            backdrop-filter: blur(10px);
        }
        .top-nav::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
            animation: navGlow 3s ease-in-out infinite;
        }
        @keyframes navGlow {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

        .top-nav .page-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 13px;
            font-weight: 700;
            color: var(--accent-green);
            flex: 1;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: var(--glow-green);
        }
        .top-nav .page-title::before {
            content: '⬡ ';
            color: var(--accent-cyan);
        }
        .top-nav .nav-icon {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 8px;
            color: var(--accent-red);
            font-size: 16px;
            cursor: pointer;
            border: 1px solid rgba(255,51,102,0.3);
            transition: all 0.3s;
        }
        .top-nav .nav-icon:hover { 
            background: rgba(255,51,102,0.1); 
            box-shadow: var(--glow-red);
            border-color: var(--accent-red);
        }

        /* System status bar */
        .sys-status {
            position: fixed;
            top: 56px; left: 0; right: 0;
            height: 24px;
            background: rgba(0,20,10,0.9);
            border-bottom: 1px solid rgba(0,255,136,0.1);
            display: flex;
            align-items: center;
            padding: 0 12px;
            font-size: 9px;
            color: var(--accent-green);
            z-index: 99;
            gap: 12px;
            overflow: hidden;
        }
        .sys-status .blink {
            animation: blink 1s infinite;
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        .sys-status .status-item {
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }
        .sys-status .dot {
            width: 5px; height: 5px;
            border-radius: 50%;
            background: var(--accent-green);
            box-shadow: var(--glow-green);
        }
        .sys-status .dot.red {
            background: var(--accent-red);
            box-shadow: var(--glow-red);
        }

        /* Main Content */
        .main-content {
            padding: 92px 12px 12px;
            max-width: 100%;
        }

        /* Bottom Tab Bar */
        .bottom-tabs {
            position: fixed;
            bottom: 0; left: 0; right: 0;
            height: 68px;
            background: rgba(10,14,23,0.97);
            border-top: 1px solid var(--border-color);
            display: flex;
            z-index: 100;
            backdrop-filter: blur(10px);
        }
        .bottom-tabs::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
        }
        .bottom-tabs a {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: var(--text-muted);
            font-size: 9px;
            font-weight: 500;
            gap: 4px;
            transition: all 0.3s;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .bottom-tabs a i { font-size: 18px; }
        .bottom-tabs a.active { 
            color: var(--accent-green);
            text-shadow: var(--glow-green);
        }
        .bottom-tabs a.active i {
            filter: drop-shadow(0 0 4px rgba(0,255,136,0.5));
        }
        .bottom-tabs a:hover { color: var(--accent-cyan); }

        /* Cards */
        .card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: none;
            margin-bottom: 12px;
            overflow: hidden;
            position: relative;
        }
        .card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
            opacity: 0.5;
        }
        .card:hover { 
            border-color: rgba(0,212,255,0.3);
        }
        .card-header {
            background: rgba(0,30,60,0.5);
            border-bottom: 1px solid var(--border-color);
            padding: 10px 14px;
            font-weight: 600;
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: var(--accent-cyan);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: 'Orbitron', sans-serif;
        }
        .card-header::before {
            content: '◈ ';
            color: var(--accent-green);
        }
        .card-body { padding: 10px 14px; }

        /* Mobile Data Cards */
        .data-item {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 10px 12px;
            margin-bottom: 8px;
            transition: all 0.2s;
            position: relative;
        }
        .data-item:hover {
            border-color: var(--accent-green);
            box-shadow: inset 0 0 20px rgba(0,255,136,0.02);
        }
        .data-item::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 2px; height: 100%;
            background: var(--accent-green);
            border-radius: 2px;
            opacity: 0.5;
        }
        .data-item .item-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
        }
        .data-item .item-id {
            font-size: 10px;
            font-weight: 600;
            color: var(--accent-cyan);
            font-family: 'JetBrains Mono', monospace;
        }
        .data-item .item-date {
            font-size: 9px;
            color: var(--text-muted);
            font-family: 'JetBrains Mono', monospace;
        }
        .data-item .item-title {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 2px;
        }
        .data-item .item-sub {
            font-size: 11px;
            color: var(--text-secondary);
        }
        .data-item .item-actions {
            display: flex;
            gap: 6px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(30,58,95,0.5);
        }
        .data-item .item-expand {
            display: none;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--border-color);
            font-size: 11px;
            color: var(--text-secondary);
        }
        .data-item .item-expand.show { display: block; }
        .data-item .expand-row {
            display: flex;
            padding: 3px 0;
        }
        .data-item .expand-row .lbl {
            width: 80px;
            color: var(--text-muted);
            font-size: 10px;
            font-weight: 500;
        }
        .data-item .expand-row .val {
            flex: 1;
            color: var(--accent-green);
            font-size: 11px;
            word-break: break-all;
        }

        /* Toggle expand button */
        .btn-expand {
            background: rgba(0,255,136,0.1);
            border: 1px solid rgba(0,255,136,0.2);
            border-radius: 4px;
            padding: 3px 8px;
            font-size: 10px;
            color: var(--accent-green);
            cursor: pointer;
            font-weight: 500;
            font-family: 'JetBrains Mono', monospace;
        }
        .btn-expand:hover { background: rgba(0,255,136,0.2); }

        /* Buttons */
        .btn-primary {
            background: rgba(0,255,136,0.15);
            border: 1px solid var(--accent-green);
            border-radius: 4px;
            font-weight: 600;
            font-size: 11px;
            color: var(--accent-green);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: 'JetBrains Mono', monospace;
        }
        .btn-primary:hover { 
            background: rgba(0,255,136,0.25);
            color: var(--accent-green);
            box-shadow: var(--glow-green);
        }
        .btn-sm { padding: 4px 8px; font-size: 10px; border-radius: 4px; }
        .btn-outline-primary {
            color: var(--accent-cyan);
            border: 1px solid rgba(0,212,255,0.3);
            border-radius: 4px;
            font-size: 10px;
            font-family: 'JetBrains Mono', monospace;
            text-transform: uppercase;
        }
        .btn-outline-primary:hover { 
            background: rgba(0,212,255,0.1); 
            color: var(--accent-cyan); 
            border-color: var(--accent-cyan);
            box-shadow: var(--glow-cyan);
        }
        .btn-danger { 
            background: rgba(255,51,102,0.15); 
            border: 1px solid rgba(255,51,102,0.4); 
            color: var(--accent-red); 
            border-radius: 4px;
            font-family: 'JetBrains Mono', monospace;
        }
        .btn-danger:hover { 
            background: rgba(255,51,102,0.3); 
            color: var(--accent-red);
            box-shadow: var(--glow-red);
        }
        .btn-secondary { 
            background: rgba(100,116,139,0.1); 
            border: 1px solid var(--border-color); 
            color: var(--text-secondary); 
            border-radius: 4px; 
        }

        /* Form controls */
        .form-control, .form-select {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 10px 12px;
            font-size: 12px;
            color: var(--accent-green);
            font-family: 'JetBrains Mono', monospace;
        }
        .form-control:focus, .form-select:focus {
            background: var(--bg-secondary);
            border-color: var(--accent-green);
            box-shadow: var(--glow-green);
            color: var(--accent-green);
        }
        .form-control::placeholder {
            color: var(--text-muted);
        }

        /* Badges */
        .badge { border-radius: 3px; font-weight: 600; font-size: 9px; padding: 2px 6px; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'JetBrains Mono', monospace; }
        .badge.bg-success { background: rgba(0,255,136,0.15) !important; color: var(--accent-green) !important; border: 1px solid rgba(0,255,136,0.3); }
        .badge.bg-danger { background: rgba(255,51,102,0.15) !important; color: var(--accent-red) !important; border: 1px solid rgba(255,51,102,0.3); }
        .badge.bg-info { background: rgba(0,212,255,0.15) !important; color: var(--accent-cyan) !important; border: 1px solid rgba(0,212,255,0.3); }

        /* Stat cards */
        .stat-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 14px;
            position: relative;
            overflow: hidden;
        }
        .stat-card::after {
            content: '';
            position: absolute;
            top: 0; right: 0;
            width: 60px; height: 60px;
            border-radius: 50%;
            opacity: 0.05;
        }
        .stat-card .stat-icon {
            width: 32px; height: 32px;
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            font-size: 14px;
            margin-bottom: 8px;
        }
        .stat-card .stat-value { 
            font-family: 'Orbitron', sans-serif;
            font-size: 20px; 
            font-weight: 700; 
            color: var(--text-primary);
            text-shadow: 0 0 10px rgba(255,255,255,0.1);
        }
        .stat-card .stat-label { 
            font-size: 9px; 
            color: var(--text-muted); 
            font-weight: 500; 
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 2px;
        }

        .stat-card.blue .stat-icon { background: rgba(0,212,255,0.15); color: var(--accent-cyan); }
        .stat-card.blue .stat-value { color: var(--accent-cyan); text-shadow: var(--glow-cyan); }
        .stat-card.blue { border-color: rgba(0,212,255,0.2); }

        .stat-card.green .stat-icon { background: rgba(0,255,136,0.15); color: var(--accent-green); }
        .stat-card.green .stat-value { color: var(--accent-green); text-shadow: var(--glow-green); }
        .stat-card.green { border-color: rgba(0,255,136,0.2); }

        .stat-card.purple .stat-icon { background: rgba(168,85,247,0.15); color: var(--accent-purple); }
        .stat-card.purple .stat-value { color: var(--accent-purple); }
        .stat-card.purple { border-color: rgba(168,85,247,0.2); }

        .stat-card.amber .stat-icon { background: rgba(255,170,0,0.15); color: var(--accent-amber); }
        .stat-card.amber .stat-value { color: var(--accent-amber); }
        .stat-card.amber { border-color: rgba(255,170,0,0.2); }

        /* Alerts */
        .alert { border-radius: 4px; font-size: 11px; padding: 10px 12px; border: 1px solid; font-family: 'JetBrains Mono', monospace; }
        .alert-success { background: rgba(0,255,136,0.05); color: var(--accent-green); border-color: rgba(0,255,136,0.2); }
        .alert-danger { background: rgba(255,51,102,0.05); color: var(--accent-red); border-color: rgba(255,51,102,0.2); }

        /* Pagination */
        .pagination { display: flex; flex-wrap: wrap; gap: 4px; }
        .pagination .pagination-item {
            padding: 5px 9px;
            border-radius: 4px;
            font-size: 11px;
            color: var(--text-secondary);
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            text-decoration: none;
            font-family: 'JetBrains Mono', monospace;
        }
        .pagination .pagination-item.active { 
            background: rgba(0,255,136,0.15); 
            color: var(--accent-green); 
            border-color: var(--accent-green);
            box-shadow: var(--glow-green);
        }

        /* Search bar */
        .search-bar {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }
        .search-bar .form-control { flex: 1; }

        /* Checkbox */
        input[type="checkbox"] { 
            width: 14px; height: 14px; 
            accent-color: var(--accent-green); 
        }

        /* Modal */
        .modal-content { 
            border-radius: 8px; 
            border: 1px solid var(--border-color);
            background: var(--bg-card);
        }
        .modal-header { border-bottom: 1px solid var(--border-color); padding: 12px 16px; }
        .modal-footer { border-top: 1px solid var(--border-color); padding: 10px 16px; }

        /* Loading animation for page transitions */
        .page-loader {
            position: fixed;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent-green), var(--accent-cyan), transparent);
            z-index: 10000;
            animation: loadSlide 1.5s ease-in-out;
            animation-fill-mode: forwards;
        }
        @keyframes loadSlide {
            0% { transform: translateX(-100%); opacity: 1; }
            90% { transform: translateX(0%); opacity: 1; }
            100% { transform: translateX(0%); opacity: 0; }
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Glitch text effect for headings */
        .glitch {
            position: relative;
        }

        /* Typing cursor effect */
        .typing-cursor::after {
            content: '█';
            animation: blink 0.7s infinite;
            color: var(--accent-green);
            margin-left: 2px;
        }

        /* Grid animation on cards */
        .grid-bg {
            background-image: 
                linear-gradient(rgba(0,255,136,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,255,136,0.03) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        /* Row utility */
        .row { --bs-gutter-x: 0.5rem; }
    </style>
</head>
<body class="grid-bg">
    <!-- Page load animation -->
    <div class="page-loader"></div>
    
    <!-- Matrix rain background -->
    <canvas id="matrixCanvas"></canvas>

    <!-- Top Navigation -->
    <div class="top-nav">
        <div class="page-title"><?php echo ucfirst($currentPage); ?></div>
        <a href="logout.php" class="nav-icon" title="TERMINATE SESSION"><i class="bi bi-power"></i></a>
    </div>

    <!-- System Status Bar -->
    <div class="sys-status">
        <div class="status-item"><span class="dot"></span> SYS:ACTIVE</div>
        <div class="status-item"><span class="dot"></span> DB:CONNECTED</div>
        <div class="status-item"><span class="dot"></span> FCM:ONLINE</div>
        <div class="status-item" id="sysTime"></div>
        <div class="blink">█</div>
    </div>

    <!-- Page Loading Overlay -->
    <div id="pageLoader" style="position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-primary);z-index:9998;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;transition:opacity 0.4s;">
        <div style="width:40px;height:40px;border:2px solid var(--border-color);border-top-color:var(--accent-green);border-radius:50%;animation:spin 0.8s linear infinite;"></div>
        <div style="font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent-green);letter-spacing:1px;text-transform:uppercase;" id="loadText">Loading...</div>
    </div>

    <!-- Main Content -->
    <div class="main-content">
