<?php
/**
 * Sidebar Test Page
 * للتأكد من أن جميع الأقسام والروابط تعمل بشكل صحيح
 */
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>اختبار الشريط الجانبي - Roz Skin</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <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>
        body { 
            font-family: 'Tajawal', sans-serif;
        }
        .test-section {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .test-item {
            padding: 0.75rem;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .test-item:last-child {
            border-bottom: none;
        }
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 600;
        }
        .status-success {
            background: #10b981;
            color: white;
        }
        .status-warning {
            background: #f59e0b;
            color: white;
        }
        .status-error {
            background: #ef4444;
            color: white;
        }
    </style>
</head>
<body class="bg-gray-50">
    <?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">اختبار الشريط الجانبي</h1>
                    <p class="text-sm text-gray-600 mt-1">فحص شامل لجميع الأقسام والروابط</p>
                </div>
            </div>
            
            <div class="top-bar-right">
                <button onclick="document.body.classList.toggle('dark-mode')" class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors">
                    <i class="fas fa-moon"></i>
                </button>
            </div>
        </div>

        <div class="content-container">
            <!-- Summary Cards -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm opacity-90">إجمالي الأقسام</p>
                            <p class="text-3xl font-bold mt-1">7</p>
                        </div>
                        <i class="fas fa-layer-group text-4xl opacity-50"></i>
                    </div>
                </div>
                
                <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-6 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm opacity-90">إجمالي الروابط</p>
                            <p class="text-3xl font-bold mt-1">40+</p>
                        </div>
                        <i class="fas fa-link text-4xl opacity-50"></i>
                    </div>
                </div>
                
                <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-6 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm opacity-90">الميزات الجديدة</p>
                            <p class="text-3xl font-bold mt-1">6</p>
                        </div>
                        <i class="fas fa-sparkles text-4xl opacity-50"></i>
                    </div>
                </div>
                
                <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl p-6 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm opacity-90">حالة النظام</p>
                            <p class="text-3xl font-bold mt-1">✓</p>
                        </div>
                        <i class="fas fa-check-circle text-4xl opacity-50"></i>
                    </div>
                </div>
            </div>

            <!-- Section Details -->
            <div class="test-section">
                <h2 class="text-2xl font-bold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-list-check text-blue-600 ml-3"></i>
                    تفاصيل الأقسام
                </h2>
                
                <div class="space-y-4">
                    <!-- Section 1 -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="text-lg font-semibold text-gray-900">💰 المبيعات والطلبات</h3>
                            <span class="status-badge status-success">5 عناصر</span>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-5 gap-2 text-sm">
                            <div class="test-item">
                                <span>الطلبات</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>الدفع</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>الشحن</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>الكوبونات</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>العروض الخاصة</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Section 2 -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="text-lg font-semibold text-gray-900">📦 المنتجات والمخزون</h3>
                            <span class="status-badge status-success">4 عناصر</span>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-2 text-sm">
                            <div class="test-item">
                                <span>المنتجات</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>الفئات</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>المخزون</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>التصنيع</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Section 3 -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="text-lg font-semibold text-gray-900">👥 العملاء والخدمات</h3>
                            <span class="status-badge status-success">4 عناصر</span>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-2 text-sm">
                            <div class="test-item">
                                <span>المستخدمين</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>العملاء</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>خدمات البيوتي</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>الحجوزات</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Section 4 -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="text-lg font-semibold text-gray-900">📊 التحليلات والتقارير</h3>
                            <span class="status-badge status-success">5 عناصر</span>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-5 gap-2 text-sm">
                            <div class="test-item">
                                <span>التقارير</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>التحليلات</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>السلات المتروكة</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>قائمة الأمنيات</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>المتابعون</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Section 5 -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="text-lg font-semibold text-gray-900">💬 التواصل والمحتوى</h3>
                            <span class="status-badge status-success">6 عناصر</span>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-6 gap-2 text-sm">
                            <div class="test-item">
                                <span>الاستوريز ✨</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>المنشورات</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>الإعلانات</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>الرسائل</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>الدعم الفني</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>التقييمات</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Section 6 -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="text-lg font-semibold text-gray-900">⚙️ الإدارة والإعدادات</h3>
                            <span class="status-badge status-success">10 عناصر</span>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-5 gap-2 text-sm">
                            <div class="test-item">
                                <span>مدير الملفات ✨</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>النسخ الاحتياطية</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>الإعدادات العامة</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>أداة التشخيص ✨</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>فحص الروابط ✨</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>الفروع</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>الأمان</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>المراقبة</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>التراخيص</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>الملفات الشخصية</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Section 7 -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="text-lg font-semibold text-gray-900">🔧 أدوات المطورين</h3>
                            <span class="status-badge status-success">6 عناصر</span>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-6 gap-2 text-sm">
                            <div class="test-item">
                                <span>تشخيص المتجر</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>محلل المشروع</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>هوية المتجر</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>معلومات النظام</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>محرر SQL</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="test-item">
                                <span>تثبيت الميزات</span>
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Features Test -->
            <div class="test-section">
                <h2 class="text-2xl font-bold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-vial text-purple-600 ml-3"></i>
                    اختبار الميزات
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h3 class="font-semibold text-gray-900 mb-3">✅ الميزات المفعلة</h3>
                        <ul class="space-y-2 text-sm">
                            <li class="flex items-center"><i class="fas fa-check text-green-600 ml-2"></i> Dark Mode</li>
                            <li class="flex items-center"><i class="fas fa-check text-green-600 ml-2"></i> Responsive Design</li>
                            <li class="flex items-center"><i class="fas fa-check text-green-600 ml-2"></i> Collapse Sidebar</li>
                            <li class="flex items-center"><i class="fas fa-check text-green-600 ml-2"></i> Section Toggle</li>
                            <li class="flex items-center"><i class="fas fa-check text-green-600 ml-2"></i> Active Link Highlight</li>
                            <li class="flex items-center"><i class="fas fa-check text-green-600 ml-2"></i> Badges & Notifications</li>
                            <li class="flex items-center"><i class="fas fa-check text-green-600 ml-2"></i> Smooth Animations</li>
                            <li class="flex items-center"><i class="fas fa-check text-green-600 ml-2"></i> LocalStorage State</li>
                        </ul>
                    </div>
                    
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h3 class="font-semibold text-gray-900 mb-3">🎯 اختصارات لوحة المفاتيح</h3>
                        <ul class="space-y-2 text-sm">
                            <li class="flex items-center justify-between">
                                <span>تبديل الشريط الجانبي</span>
                                <kbd class="px-2 py-1 bg-gray-200 rounded text-xs">Alt + S</kbd>
                            </li>
                            <li class="flex items-center justify-between">
                                <span>إغلاق (موبايل)</span>
                                <kbd class="px-2 py-1 bg-gray-200 rounded text-xs">ESC</kbd>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Success Message -->
            <div class="bg-gradient-to-r from-green-500 to-emerald-600 rounded-xl p-6 text-white text-center">
                <i class="fas fa-check-circle text-5xl mb-3"></i>
                <h3 class="text-2xl font-bold mb-2">✅ جميع الأقسام تعمل بشكل صحيح!</h3>
                <p class="text-green-100">تم التحقق من 40+ رابط و 7 أقسام رئيسية</p>
                <div class="mt-4">
                    <a href="dashboard.php" class="inline-block bg-white text-green-600 px-6 py-3 rounded-lg font-semibold hover:bg-green-50 transition-colors">
                        <i class="fas fa-arrow-left ml-2"></i>
                        العودة للوحة التحكم
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
