<?php
// تحديد المسار الأساسي
$admin_base = '';
function admin_url($path) {
    global $admin_base;
    return $admin_base . $path;
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🐛 Debug Console - لوحة التحكم</title>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="assets/css/admin-layout.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Tajawal', sans-serif;
            background: #0f172a;
            color: #e2e8f0;
        }
        
        .content-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 2rem;
            color: #60a5fa;
            font-size: 2rem;
        }
        
        .console-box {
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            max-height: 400px;
            overflow-y: auto;
        }
        
        .console-box::-webkit-scrollbar {
            width: 8px;
        }
        
        .console-box::-webkit-scrollbar-track {
            background: #0f172a;
        }
        
        .console-box::-webkit-scrollbar-thumb {
            background: #334155;
            border-radius: 4px;
        }
        
        .log-entry {
            padding: 0.5rem;
            margin-bottom: 0.5rem;
            border-radius: 6px;
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
        }
        
        .log-entry.info {
            background: rgba(59, 130, 246, 0.1);
            border-left: 3px solid #3b82f6;
        }
        
        .log-entry.success {
            background: rgba(16, 185, 129, 0.1);
            border-left: 3px solid #10b981;
        }
        
        .log-entry.warning {
            background: rgba(245, 158, 11, 0.1);
            border-left: 3px solid #f59e0b;
        }
        
        .log-entry.error {
            background: rgba(239, 68, 68, 0.1);
            border-left: 3px solid #ef4444;
        }
        
        .log-icon {
            font-size: 1.2rem;
            min-width: 24px;
        }
        
        .log-content {
            flex: 1;
        }
        
        .log-time {
            color: #64748b;
            font-size: 0.85rem;
        }
        
        .test-buttons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .test-btn {
            padding: 1rem;
            background: #334155;
            border: 1px solid #475569;
            border-radius: 8px;
            color: #e2e8f0;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1rem;
            font-family: 'Tajawal', sans-serif;
        }
        
        .test-btn:hover {
            background: #475569;
            transform: translateY(-2px);
        }
        
        .test-btn i {
            margin-left: 0.5rem;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
        }
        
        .stat-value {
            font-size: 2.5rem;
            font-weight: bold;
            margin: 0.5rem 0;
        }
        
        .stat-label {
            color: #94a3b8;
            font-size: 0.9rem;
        }
        
        .clear-btn {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            padding: 1rem 1.5rem;
            background: #ef4444;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-family: 'Tajawal', sans-serif;
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
            z-index: 100;
        }
        
        .clear-btn:hover {
            background: #dc2626;
        }
        
        h1 {
            margin-bottom: 1rem !important;
        }
        
        h2 {
            margin-top: 1rem;
        }
    </style>
</head>
<body class="dark-mode">
    <?php include 'includes/sidebar.php'; ?>
    
    <div class="main-content">
        <!-- Top Bar -->
        <div class="top-bar">
            <div class="top-bar-left">
                <button class="mobile-menu-btn" onclick="openSidebar()">
                    <i class="fas fa-bars"></i>
                </button>
                <div>
                    <h1 class="page-title">🐛 Debug Console</h1>
                </div>
            </div>
            
            <div class="top-bar-right">
                <!-- Notifications -->
                <div class="relative">
                    <a href="#" class="p-2 text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white relative inline-block">
                        <i class="fas fa-bell text-xl"></i>
                    </a>
                </div>
                
                <!-- Theme Selector -->
                <div class="relative">
                    <button class="p-2 text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" 
                            id="themeToggle" 
                            title="اختيار الثيم">
                        <i class="fas fa-palette text-xl"></i>
                    </button>
                    <div class="theme-selector" id="themeSelector">
                        <div class="theme-option active" data-theme="dark">
                            <div class="theme-color" style="background: linear-gradient(135deg, #0f172a, #1e293b);"></div>
                            <span class="theme-name">الوضع الليلي</span>
                        </div>
                        <div class="theme-option" data-theme="light">
                            <div class="theme-color" style="background: linear-gradient(135deg, #f8fafc, #e2e8f0);"></div>
                            <span class="theme-name">الوضع النهاري</span>
                        </div>
                    </div>
                </div>
                
                <!-- Back to Dashboard -->
                <a href="dashboard.php" class="p-2 text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400" title="العودة للوحة التحكم">
                    <i class="fas fa-home text-xl"></i>
                </a>
            </div>
        </div>
        
        <div class="content-container" style="padding: 2rem;">
        <div style="text-align: center; margin-bottom: 2rem;">
            <h1 style="margin-bottom: 0.5rem;">🐛 Debug Console - اختبار شامل</h1>
            <p style="color: #94a3b8;">
                هذه الصفحة تحتوي على Sidebar و Top Bar الحقيقيين للاختبار
            </p>
        </div>
        
        <!-- Stats -->
        <div class="stats-grid">
            <div class="stat-card">
                <i class="fas fa-check-circle" style="color: #10b981; font-size: 2rem;"></i>
                <div class="stat-value" id="successCount">0</div>
                <div class="stat-label">نجح</div>
            </div>
            <div class="stat-card">
                <i class="fas fa-exclamation-triangle" style="color: #f59e0b; font-size: 2rem;"></i>
                <div class="stat-value" id="warningCount">0</div>
                <div class="stat-label">تحذير</div>
            </div>
            <div class="stat-card">
                <i class="fas fa-times-circle" style="color: #ef4444; font-size: 2rem;"></i>
                <div class="stat-value" id="errorCount">0</div>
                <div class="stat-label">خطأ</div>
            </div>
            <div class="stat-card">
                <i class="fas fa-info-circle" style="color: #3b82f6; font-size: 2rem;"></i>
                <div class="stat-value" id="infoCount">0</div>
                <div class="stat-label">معلومات</div>
            </div>
        </div>
        
        <!-- Test Buttons -->
        <div class="test-buttons">
            <button class="test-btn" onclick="testSidebar()">
                <i class="fas fa-bars"></i>
                اختبار Sidebar
            </button>
            <button class="test-btn" onclick="testTopBar()">
                <i class="fas fa-window-maximize"></i>
                اختبار Top Bar
            </button>
            <button class="test-btn" onclick="testThemes()">
                <i class="fas fa-palette"></i>
                اختبار الثيمات
            </button>
            <button class="test-btn" onclick="testIcons()">
                <i class="fas fa-icons"></i>
                اختبار الأيقونات
            </button>
            <button class="test-btn" onclick="testCSS()">
                <i class="fas fa-paint-brush"></i>
                اختبار CSS
            </button>
            <button class="test-btn" onclick="testJavaScript()">
                <i class="fas fa-code"></i>
                اختبار JavaScript
            </button>
            <button class="test-btn" onclick="testLocalStorage()">
                <i class="fas fa-database"></i>
                اختبار LocalStorage
            </button>
            <button class="test-btn" onclick="testAll()">
                <i class="fas fa-check-double"></i>
                اختبار شامل
            </button>
        </div>
        
        <!-- Console Output -->
        <h2 style="margin-bottom: 1rem; color: #94a3b8;">📋 Console Output</h2>
        <div class="console-box" id="consoleOutput"></div>
        
        <button class="clear-btn" onclick="clearConsole()">
            <i class="fas fa-trash"></i>
            مسح Console
        </button>
        </div>
    </div>

    <script>
        let successCount = 0;
        let warningCount = 0;
        let errorCount = 0;
        let infoCount = 0;
        
        function log(message, type = 'info') {
            const console = document.getElementById('consoleOutput');
            const time = new Date().toLocaleTimeString('ar-EG');
            
            const icons = {
                info: 'fa-info-circle',
                success: 'fa-check-circle',
                warning: 'fa-exclamation-triangle',
                error: 'fa-times-circle'
            };
            
            const entry = document.createElement('div');
            entry.className = `log-entry ${type}`;
            entry.innerHTML = `
                <i class="fas ${icons[type]} log-icon"></i>
                <div class="log-content">
                    <div>${message}</div>
                    <div class="log-time">${time}</div>
                </div>
            `;
            
            console.appendChild(entry);
            console.scrollTop = console.scrollHeight;
            
            // Update stats
            if (type === 'success') successCount++;
            else if (type === 'warning') warningCount++;
            else if (type === 'error') errorCount++;
            else infoCount++;
            
            updateStats();
        }
        
        function updateStats() {
            document.getElementById('successCount').textContent = successCount;
            document.getElementById('warningCount').textContent = warningCount;
            document.getElementById('errorCount').textContent = errorCount;
            document.getElementById('infoCount').textContent = infoCount;
        }
        
        function clearConsole() {
            document.getElementById('consoleOutput').innerHTML = '';
            successCount = warningCount = errorCount = infoCount = 0;
            updateStats();
            log('Console cleared', 'info');
        }
        
        // ===================================
        // TEST FUNCTIONS
        // ===================================
        
        function testSidebar() {
            log('🔍 بدء اختبار Sidebar...', 'info');
            
            // Check if sidebar exists
            const sidebar = document.getElementById('sidebar');
            if (sidebar) {
                log('✅ عنصر Sidebar موجود', 'success');
            } else {
                log('❌ عنصر Sidebar غير موجود!', 'error');
                return;
            }
            
            // Check sections
            const sections = document.querySelectorAll('.sidebar-section');
            log(`📊 عدد الأقسام: ${sections.length}`, sections.length > 0 ? 'success' : 'warning');
            
            // Check toggle function
            if (typeof toggleSection === 'function') {
                log('✅ دالة toggleSection موجودة', 'success');
            } else {
                log('❌ دالة toggleSection غير موجودة!', 'error');
            }
            
            log('✅ اختبار Sidebar مكتمل', 'success');
        }
        
        function testTopBar() {
            log('🔍 بدء اختبار Top Bar...', 'info');
            
            // Check theme toggle
            const themeToggle = document.getElementById('themeToggle');
            if (themeToggle) {
                log('✅ زر الثيمات موجود', 'success');
            } else {
                log('❌ زر الثيمات غير موجود!', 'error');
            }
            
            // Check theme selector
            const themeSelector = document.getElementById('themeSelector');
            if (themeSelector) {
                log('✅ قائمة الثيمات موجودة', 'success');
                const options = themeSelector.querySelectorAll('.theme-option');
                log(`📊 عدد الثيمات: ${options.length}`, 'info');
            } else {
                log('❌ قائمة الثيمات غير موجودة!', 'error');
            }
            
            log('✅ اختبار Top Bar مكتمل', 'success');
        }
        
        function testThemes() {
            log('🔍 بدء اختبار الثيمات...', 'info');
            
            const themes = ['dark', 'light', 'blue', 'purple', 'green'];
            themes.forEach(theme => {
                log(`🎨 اختبار ثيم: ${theme}`, 'info');
            });
            
            const savedTheme = localStorage.getItem('adminTheme');
            log(`💾 الثيم المحفوظ: ${savedTheme || 'لا يوجد'}`, savedTheme ? 'success' : 'warning');
            
            log('✅ اختبار الثيمات مكتمل', 'success');
        }
        
        function testIcons() {
            log('🔍 بدء اختبار الأيقونات...', 'info');
            
            // Check Font Awesome
            const testIcon = document.createElement('i');
            testIcon.className = 'fas fa-home';
            document.body.appendChild(testIcon);
            
            const computed = window.getComputedStyle(testIcon, ':before');
            const faLoaded = computed.content !== 'none' && computed.content !== '';
            
            document.body.removeChild(testIcon);
            
            if (faLoaded) {
                log('✅ Font Awesome محمل بنجاح', 'success');
            } else {
                log('❌ Font Awesome غير محمل!', 'error');
            }
            
            // Count icons
            const icons = document.querySelectorAll('.fas, .far, .fab');
            log(`📊 عدد الأيقونات في الصفحة: ${icons.length}`, 'info');
            
            log('✅ اختبار الأيقونات مكتمل', 'success');
        }
        
        function testCSS() {
            log('🔍 بدء اختبار CSS...', 'info');
            
            // Check if CSS is loaded
            const stylesheets = document.styleSheets;
            log(`📊 عدد ملفات CSS: ${stylesheets.length}`, 'info');
            
            // Check specific classes
            const testClasses = ['.sidebar', '.sidebar-item', '.top-bar'];
            testClasses.forEach(className => {
                const element = document.querySelector(className);
                if (element) {
                    const styles = window.getComputedStyle(element);
                    log(`✅ ${className} له تنسيقات`, 'success');
                } else {
                    log(`⚠️ ${className} غير موجود`, 'warning');
                }
            });
            
            log('✅ اختبار CSS مكتمل', 'success');
        }
        
        function testJavaScript() {
            log('🔍 بدء اختبار JavaScript...', 'info');
            
            // Check functions
            const functions = ['toggleSection', 'toggleSidebarCollapse', 'openSidebar', 'closeSidebar'];
            functions.forEach(func => {
                if (typeof window[func] === 'function') {
                    log(`✅ دالة ${func} موجودة`, 'success');
                } else {
                    log(`❌ دالة ${func} غير موجودة!`, 'error');
                }
            });
            
            // Check jQuery (if used)
            if (typeof jQuery !== 'undefined') {
                log(`✅ jQuery محمل (الإصدار: ${jQuery.fn.jquery})`, 'success');
            } else {
                log('ℹ️ jQuery غير محمل (غير مطلوب)', 'info');
            }
            
            log('✅ اختبار JavaScript مكتمل', 'success');
        }
        
        function testLocalStorage() {
            log('🔍 بدء اختبار LocalStorage...', 'info');
            
            try {
                // Test write
                localStorage.setItem('test', 'value');
                log('✅ الكتابة في LocalStorage تعمل', 'success');
                
                // Test read
                const value = localStorage.getItem('test');
                if (value === 'value') {
                    log('✅ القراءة من LocalStorage تعمل', 'success');
                }
                
                // Clean up
                localStorage.removeItem('test');
                
                // Show saved data
                const savedTheme = localStorage.getItem('adminTheme');
                const sidebarCollapsed = localStorage.getItem('sidebarCollapsed');
                
                log(`💾 الثيم المحفوظ: ${savedTheme || 'لا يوجد'}`, 'info');
                log(`💾 حالة Sidebar: ${sidebarCollapsed || 'لا يوجد'}`, 'info');
                
            } catch (e) {
                log(`❌ خطأ في LocalStorage: ${e.message}`, 'error');
            }
            
            log('✅ اختبار LocalStorage مكتمل', 'success');
        }
        
        function testAll() {
            log('🚀 بدء الاختبار الشامل...', 'info');
            log('═══════════════════════════════════', 'info');
            
            testSidebar();
            log('───────────────────────────────────', 'info');
            
            testTopBar();
            log('───────────────────────────────────', 'info');
            
            testThemes();
            log('───────────────────────────────────', 'info');
            
            testIcons();
            log('───────────────────────────────────', 'info');
            
            testCSS();
            log('───────────────────────────────────', 'info');
            
            testJavaScript();
            log('───────────────────────────────────', 'info');
            
            testLocalStorage();
            log('═══════════════════════════════════', 'info');
            
            log('🎉 الاختبار الشامل مكتمل!', 'success');
        }
        
        // Auto-run on load
        window.addEventListener('load', () => {
            log('🚀 Debug Console جاهز', 'success');
            log('اضغط على أي زر لبدء الاختبار', 'info');
        });
    </script>
</body>
</html>
