<?php
require_once '../config/database.php';
require_once '../models/user.php';
require_once '../models/product.php';
require_once '../models/order.php';
require_once '../models/review.php';

// تم إلغاء تسجيل الدخول - الوصول مفتوح للجميع
// session_start();

$database = new Database();
$db = $database->getConnection();

// Get statistics
$user_model = new User($db);
$product_model = new Product($db);
$order_model = new Order($db);
$review_model = new Review($db);

$all_orders = $order_model->getAllOrders();
$total_orders = count($all_orders);
$total_users = count($user_model->getAllUsers() ?? []);
$all_products_stmt = $product_model->getAll();
$all_products_data = $all_products_stmt ? $all_products_stmt->fetchAll(PDO::FETCH_ASSOC) : [];
$all_products = count($all_products_data);

$total_sales = array_reduce($all_orders, function($total, $order) {
    return $total + $order['total_amount'];
}, 0);

$all_reviews = $review_model->getAllReviews();
$total_reviews = count($all_reviews);
$average_rating = $total_reviews > 0 ? array_reduce($all_reviews, function($total, $review) {
    return $total + $review['rating'];
}, 0) / $total_reviews : 0;

// Check if posts and stories tables exist (for links only)
$posts_table_exists = false;
$stories_table_exists = false;

try {
    $check_posts = $db->query("SHOW TABLES LIKE 'posts'");
    $posts_table_exists = $check_posts->rowCount() > 0;
    
    $check_stories = $db->query("SHOW TABLES LIKE 'stories'");
    $stories_table_exists = $check_stories->rowCount() > 0;
} catch (Exception $e) {
    // Silent fail
}

$recent_orders = array_slice($all_orders, 0, 5);
$status_ar = [
    'pending' => 'في الانتظار',
    'processing' => 'قيد المعالجة',
    'shipped' => 'تم الشحن',
    'delivered' => 'تم التسليم',
    'cancelled' => 'ملغي'
];
?>
<?php
$page_title = 'لوحة التحكم الرئيسية';
$breadcrumb = [
    ['title' => 'الرئيسية']
];
?>
<!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">
    <link rel="stylesheet" href="assets/css/admin-improvements.css">
    <style>
        body { 
            font-family: 'Tajawal', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        
        /* Dark Mode Styles */
        body.dark-mode {
            background-color: #0f172a;
            color: #e2e8f0;
        }
        body.dark-mode .bg-white { background-color: #1e293b !important; }
        body.dark-mode .bg-gray-50 { background-color: #0f172a !important; }
        body.dark-mode .text-gray-900 { color: #e2e8f0 !important; }
        body.dark-mode .text-gray-600 { color: #94a3b8 !important; }
        body.dark-mode .text-gray-500 { color: #64748b !important; }
        body.dark-mode .border-gray-200 { border-color: #334155 !important; }
        body.dark-mode .divide-gray-200 { border-color: #334155 !important; }
        body.dark-mode .bg-gray-600 { background-color: #475569 !important; }
        body.dark-mode .hover\:bg-gray-50:hover { background-color: #1e293b !important; }
        
        /* Glassmorphism */
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        body.dark-mode .glass-card {
            background: rgba(30, 41, 59, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes countUp {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .animate-fade-in-up {
            animation: fadeInUp 0.6s ease-out forwards;
        }
        
        .animate-count {
            animation: countUp 1s ease-out;
        }
        
        .section-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        .section-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .section-card:hover::before {
            opacity: 1;
        }
        
        .section-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }
        
        /* Notification Badge */
        .notification-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
            border-radius: 9999px;
            padding: 2px 8px;
            font-size: 11px;
            font-weight: bold;
            animation: pulse 2s infinite;
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
        }
        
        /* Progress Bar */
        .progress-bar {
            height: 4px;
            background: rgba(0,0,0,0.1);
            border-radius: 9999px;
            overflow: hidden;
            margin-top: 8px;
        }
        
        body.dark-mode .progress-bar {
            background: rgba(255,255,255,0.1);
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #10b981 0%, #059669 100%);
            border-radius: 9999px;
            transition: width 1s ease-out;
        }
        
        .progress-fill.warning {
            background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
        }
        
        .progress-fill.danger {
            background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
        }
        
        /* Search Box */
        .search-box {
            position: relative;
        }
        
        .search-box input {
            transition: all 0.3s ease;
        }
        
        .search-box input:focus {
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
        }
        
        /* Sparkline */
        .sparkline {
            display: inline-block;
            width: 60px;
            height: 20px;
        }
        
        /* Stagger Animation */
        .stagger-item {
            opacity: 0;
            animation: fadeInUp 0.6s ease-out forwards;
        }
        
        .stagger-item:nth-child(1) { animation-delay: 0.1s; }
        .stagger-item:nth-child(2) { animation-delay: 0.2s; }
        .stagger-item:nth-child(3) { animation-delay: 0.3s; }
        .stagger-item:nth-child(4) { animation-delay: 0.4s; }
        
        /* Dark Mode Toggle */
        .dark-mode-toggle {
            position: relative;
            width: 60px;
            height: 30px;
            background: #cbd5e1;
            border-radius: 9999px;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        
        body.dark-mode .dark-mode-toggle {
            background: #3b82f6;
        }
        
        .dark-mode-toggle::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 24px;
            height: 24px;
            background: white;
            border-radius: 50%;
            transition: transform 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        body.dark-mode .dark-mode-toggle::after {
            transform: translateX(30px);
        }
        
        /* Shimmer Loading Effect */
        @keyframes shimmer {
            0% { background-position: -1000px 0; }
            100% { background-position: 1000px 0; }
        }
        
        .shimmer {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 1000px 100%;
            animation: shimmer 2s infinite;
        }
        
        /* Floating Animation */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .float-animation {
            animation: float 3s ease-in-out infinite;
        }
        
        /* Glow Effect */
        .glow {
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
        }
        
        body.dark-mode .glow {
            box-shadow: 0 0 30px rgba(59, 130, 246, 0.7);
        }
        
        /* Gradient Text */
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* Card Shine Effect */
        .card-shine {
            position: relative;
            overflow: hidden;
        }
        
        .card-shine::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                45deg,
                transparent 30%,
                rgba(255, 255, 255, 0.1) 50%,
                transparent 70%
            );
            transform: rotate(45deg);
            animation: shine 3s infinite;
        }
        
        @keyframes shine {
            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .search-box input {
                width: 150px;
            }
            
            .section-card {
                padding: 1rem;
            }
        }
        
        /* Print styles */
        @media print {
            .dark-mode-toggle,
            .search-box,
            header a,
            .section-card {
                display: none !important;
            }
        }
    </style>
</head>
<body class="bg-gray-50 dark-mode" id="body">
    <?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>
                </div>
            </div>
            
            <div class="top-bar-right">
                <!-- Search Box -->
                <div class="search-box hidden md:block relative">
                    <input type="text" id="searchInput" placeholder="بحث سريع..." 
                           class="px-4 py-2 pr-10 rounded-lg border border-gray-300 focus:outline-none focus:border-blue-500 text-sm"
                           style="width: 200px;">
                    <i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                
                <!-- Notifications -->
                <div class="relative">
                    <a href="orders/" class="text-gray-600 hover:text-gray-900 relative p-2" title="الطلبات الجديدة">
                        <i class="fas fa-bell text-xl"></i>
                        <?php if ($new_orders_count > 0): ?>
                            <span class="notification-badge"><?php echo $new_orders_count; ?></span>
                        <?php endif; ?>
                    </a>
                </div>
                
                <!-- Dark Mode Toggle -->
                <div class="dark-mode-toggle" id="darkModeToggle" title="تبديل الوضع الليلي"></div>
                
                <!-- User Menu -->
                <div class="flex items-center space-x-3 space-x-reverse">
                    <div class="w-10 h-10 bg-gradient-to-br from-blue-600 to-purple-600 rounded-full flex items-center justify-center text-white font-bold">
                        A
                    </div>
                </div>
            </div>
        </div>

        <div class="content-container">
            <!-- Quick Actions Bar -->
            <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl shadow-lg p-4 mb-6 text-white animate-fade-in-up">
                <div class="flex items-center justify-between flex-wrap gap-4">
                    <div class="flex items-center space-x-2 space-x-reverse">
                        <i class="fas fa-bolt text-yellow-300"></i>
                        <span class="font-semibold">إجراءات سريعة</span>
                    </div>
                    <div class="flex items-center space-x-3 space-x-reverse flex-wrap gap-2">
                        <a href="settings/index.php" class="bg-yellow-400/30 hover:bg-yellow-400/40 backdrop-blur-sm px-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105 border border-yellow-300/50">
                            <i class="fas fa-cog ml-1"></i> الإعدادات
                        </a>
                        <a href="orders/" class="bg-white/20 hover:bg-white/30 backdrop-blur-sm px-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105">
                            <i class="fas fa-plus ml-1"></i> طلب جديد
                        </a>
                        <a href="products/" class="bg-white/20 hover:bg-white/30 backdrop-blur-sm px-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105">
                            <i class="fas fa-box ml-1"></i> منتج جديد
                        </a>
                        <a href="manufacturing/production.php" class="bg-white/20 hover:bg-white/30 backdrop-blur-sm px-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105">
                            <i class="fas fa-industry ml-1"></i> دفعة إنتاج
                        </a>
                        <a href="reports/" class="bg-white/20 hover:bg-white/30 backdrop-blur-sm px-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105">
                            <i class="fas fa-chart-bar ml-1"></i> تقرير
                        </a>
                    </div>
                </div>
            </div>

            <!-- Statistics Cards -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="stagger-item bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-shadow glass-card">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">مبيعات اليوم</p>
                            <?php
                            $today_sales = array_reduce($all_orders, function($total, $order) {
                                if (date('Y-m-d', strtotime($order['created_at'])) === date('Y-m-d')) {
                                    return $total + $order['total_amount'];
                                }
                                return $total;
                            }, 0);
                            ?>
                            <p class="text-3xl font-bold text-gray-900 animate-count">EGP <?php echo number_format($today_sales, 0); ?></p>
                            <p class="text-xs text-green-600 mt-1">
                                <i class="fas fa-arrow-up"></i> +<?php echo number_format(($today_sales / max($total_sales, 1)) * 100, 1); ?>%
                            </p>
                            <!-- Mini Sparkline -->
                            <svg class="sparkline mt-2" viewBox="0 0 60 20">
                                <polyline fill="none" stroke="#10b981" stroke-width="2" 
                                          points="0,15 10,12 20,14 30,8 40,10 50,5 60,3"/>
                            </svg>
                        </div>
                        <div class="bg-gradient-to-br from-green-50 to-emerald-50 p-3 rounded-lg">
                            <i class="fas fa-dollar-sign text-green-600 text-2xl"></i>
                        </div>
                    </div>
                </div>

                <div class="stagger-item bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-shadow glass-card relative">
                    <?php if ($new_orders_count > 0): ?>
                        <span class="notification-badge"><?php echo $new_orders_count; ?></span>
                    <?php endif; ?>
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">طلبات جديدة</p>
                            <?php
                            $new_orders = array_filter($all_orders, function($order) {
                                return $order['status'] === 'pending';
                            });
                            $new_orders_count = count($new_orders);
                            ?>
                            <p class="text-3xl font-bold text-gray-900 animate-count"><?php echo $new_orders_count; ?></p>
                            <p class="text-xs text-blue-600 mt-1">
                                <i class="fas fa-clock"></i> تحتاج معالجة
                            </p>
                            <!-- Mini Sparkline -->
                            <svg class="sparkline mt-2" viewBox="0 0 60 20">
                                <polyline fill="none" stroke="#3b82f6" stroke-width="2" 
                                          points="0,10 10,8 20,12 30,7 40,9 50,6 60,8"/>
                            </svg>
                        </div>
                        <div class="bg-gradient-to-br from-blue-50 to-cyan-50 p-3 rounded-lg">
                            <i class="fas fa-shopping-cart text-blue-600 text-2xl"></i>
                        </div>
                    </div>
                </div>

                <div class="stagger-item bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-shadow glass-card relative">
                    <?php if ($low_stock_count > 0): ?>
                        <span class="notification-badge"><?php echo $low_stock_count; ?></span>
                    <?php endif; ?>
                    <div class="flex items-center justify-between">
                        <div class="w-full">
                            <p class="text-sm font-medium text-gray-600">تنبيهات المخزون</p>
                            <?php
                            $low_stock = array_filter($all_products_data, function($product) {
                                return isset($product['stock']) && $product['stock'] < 10;
                            });
                            $low_stock_count = count($low_stock);
                            $stock_percentage = $all_products > 0 ? (($all_products - $low_stock_count) / $all_products) * 100 : 100;
                            ?>
                            <p class="text-3xl font-bold text-gray-900 animate-count"><?php echo $low_stock_count; ?></p>
                            <p class="text-xs text-orange-600 mt-1">
                                <i class="fas fa-exclamation-triangle"></i> منتج منخفض
                            </p>
                            <!-- Progress Bar -->
                            <div class="progress-bar">
                                <div class="progress-fill <?php echo $stock_percentage < 50 ? 'danger' : ($stock_percentage < 80 ? 'warning' : ''); ?>" 
                                     style="width: <?php echo $stock_percentage; ?>%"></div>
                            </div>
                        </div>
                        <div class="bg-gradient-to-br from-orange-50 to-amber-50 p-3 rounded-lg">
                            <i class="fas fa-boxes text-orange-600 text-2xl"></i>
                        </div>
                    </div>
                </div>

                <div class="stagger-item bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-shadow glass-card">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">دفعات الإنتاج</p>
                            <p class="text-3xl font-bold text-gray-900 animate-count">12</p>
                            <p class="text-xs text-purple-600 mt-1">
                                <i class="fas fa-industry"></i> نشطة الآن
                            </p>
                        </div>
                        <div class="bg-gradient-to-br from-purple-50 to-violet-50 p-3 rounded-lg">
                            <i class="fas fa-cogs text-purple-600 text-2xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Stats Chart -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8 glass-card animate-fade-in-up">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-900">نظرة سريعة</h3>
                    <div class="flex items-center space-x-2 space-x-reverse text-sm text-gray-500">
                        <i class="fas fa-chart-bar"></i>
                        <span>آخر 30 يوم</span>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <!-- Total Orders Card -->
                    <div class="stat-card-enhanced gradient-blue fade-in-up">
                        <div class="stat-icon-enhanced">
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                        <h3 class="text-sm font-medium opacity-90 mb-1">إجمالي الطلبات</h3>
                        <p class="stat-number"><?php echo $total_orders; ?></p>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            <span>+12.5%</span>
                        </div>
                    </div>

                    <!-- Total Sales Card -->
                    <div class="stat-card-enhanced gradient-green fade-in-up" style="animation-delay: 0.1s;">
                        <div class="stat-icon-enhanced">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <h3 class="text-sm font-medium opacity-90 mb-1">إجمالي المبيعات</h3>
                        <p class="stat-number">EGP <?php echo number_format($total_sales, 0); ?></p>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            <span>+18.2%</span>
                        </div>
                    </div>

                    <!-- Total Products Card -->
                    <div class="stat-card-enhanced gradient-yellow fade-in-up" style="animation-delay: 0.2s;">
                        <div class="stat-icon-enhanced">
                            <i class="fas fa-box"></i>
                        </div>
                        <h3 class="text-sm font-medium opacity-90 mb-1">المنتجات</h3>
                        <p class="stat-number"><?php echo $all_products; ?></p>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            <span>+5 جديد</span>
                        </div>
                    </div>

                    <!-- Total Users Card -->
                    <div class="stat-card-enhanced gradient-pink fade-in-up" style="animation-delay: 0.3s;">
                        <div class="stat-icon-enhanced">
                            <i class="fas fa-users"></i>
                        </div>
                        <h3 class="text-sm font-medium opacity-90 mb-1">العملاء</h3>
                        <p class="stat-number"><?php echo $total_users; ?></p>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            <span>+8.7%</span>
                        </div>
                    </div>
                </div>
                

            </div>

            <!-- Quick Settings Access -->
            <div class="mb-6 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl shadow-lg p-6 text-white animate-fade-in-up">
                <div class="flex items-center justify-between flex-wrap gap-4">
                    <div class="flex items-center space-x-4 space-x-reverse">
                        <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                            <i class="fas fa-cog text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold">⚙️ إعدادات التواصل والسوشيال ميديا</h3>
                            <p class="text-sm text-purple-100">قم بتحديث بيانات التواصل وروابط السوشيال ميديا من هنا</p>
                        </div>
                    </div>
                    <a href="settings/index.php" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-purple-50 transition-all transform hover:scale-105 shadow-lg">
                        <i class="fas fa-arrow-left ml-2"></i>
                        افتح الإعدادات
                    </a>
                </div>
            </div>

            <!-- Main Sections Grid -->
            <div class="mb-8">
                
                <!-- 1. المبيعات والطلبات -->
                <div class="mb-8 animate-fade-in-up">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="w-1 h-8 bg-blue-600 rounded-full mr-3"></div>
                            <h2 class="text-xl font-bold text-gray-900">💰 المبيعات والطلبات</h2>
                        </div>
                        <span class="text-sm text-gray-500 bg-blue-50 px-3 py-1 rounded-full">4 أقسام</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">

                        <!-- Orders -->
                        <a href="orders/" class="section-card card-shine bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg p-5 text-white relative">
                            <?php if ($new_orders_count > 0): ?>
                                <span class="notification-badge"><?php echo $new_orders_count; ?></span>
                            <?php endif; ?>
                            <i class="fas fa-shopping-cart text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">الطلبات</h3>
                            <p class="text-sm text-blue-100"><?php echo $total_orders; ?> طلب</p>
                        </a>

                        <!-- Payments -->
                        <a href="payments/" class="section-card bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-credit-card text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">الدفع</h3>
                            <p class="text-sm text-emerald-100">طرق الدفع</p>
                        </a>

                        <!-- Shipping -->
                        <a href="shipping/" class="section-card bg-gradient-to-br from-cyan-500 to-blue-500 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-truck text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">الشحن</h3>
                            <p class="text-sm text-cyan-100">إدارة الشحن</p>
                        </a>

                        <!-- Coupons -->
                        <a href="coupons/" class="section-card bg-gradient-to-br from-pink-500 to-rose-500 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-ticket-alt text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">الكوبونات</h3>
                            <p class="text-sm text-pink-100">عروض وخصومات</p>
                        </a>
                    </div>
                </div>

                <!-- 2. المنتجات والمخزون -->
                <div class="mb-8 animate-fade-in-up" style="animation-delay: 0.1s;">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="w-1 h-8 bg-green-600 rounded-full mr-3"></div>
                            <h2 class="text-xl font-bold text-gray-900">📦 المنتجات والمخزون</h2>
                        </div>
                        <span class="text-sm text-gray-500 bg-green-50 px-3 py-1 rounded-full">4 أقسام</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        
                        <!-- Products -->
                        <a href="products/" class="section-card bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-box text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">المنتجات</h3>
                            <p class="text-sm text-green-100"><?php echo $all_products; ?> منتج</p>
                        </a>

                        <!-- Categories -->
                        <a href="categories/" class="section-card bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-tags text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">الفئات</h3>
                            <p class="text-sm text-purple-100">تنظيم المنتجات</p>
                        </a>

                        <!-- Inventory -->
                        <a href="inventory/" class="section-card card-shine bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl shadow-lg p-5 text-white relative">
                            <?php if ($low_stock_count > 0): ?>
                                <span class="notification-badge"><?php echo $low_stock_count; ?></span>
                            <?php endif; ?>
                            <i class="fas fa-boxes text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">المخزون</h3>
                            <p class="text-sm text-emerald-100">تتبع المخزون</p>
                        </a>

                        <!-- Manufacturing -->
                        <a href="manufacturing/" class="section-card bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-industry text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">التصنيع</h3>
                            <p class="text-sm text-orange-100">مواد وإنتاج</p>
                        </a>
                    </div>
                </div>

                <!-- 3. العملاء والخدمات -->
                <div class="mb-8 animate-fade-in-up" style="animation-delay: 0.2s;">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="w-1 h-8 bg-purple-600 rounded-full mr-3"></div>
                            <h2 class="text-xl font-bold text-gray-900">👥 العملاء والخدمات</h2>
                        </div>
                        <span class="text-sm text-gray-500 bg-purple-50 px-3 py-1 rounded-full">4 أقسام</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        
                        <!-- Users -->
                        <a href="users/" class="section-card bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-users text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">المستخدمين</h3>
                            <p class="text-sm text-indigo-100"><?php echo $total_users; ?> مستخدم</p>
                        </a>

                        <!-- Customers -->
                        <a href="customers/" class="section-card bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-users-cog text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">العملاء</h3>
                            <p class="text-sm text-indigo-100">بيانات العملاء</p>
                        </a>

                        <!-- Beauty Services -->
                        <a href="services/" class="section-card bg-gradient-to-br from-pink-500 to-pink-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-spa text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">خدمات البيوتي</h3>
                            <p class="text-sm text-pink-100">خدمات التجميل</p>
                        </a>

                        <!-- Bookings -->
                        <a href="bookings/" class="section-card bg-gradient-to-br from-violet-500 to-violet-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-calendar-check text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">الحجوزات</h3>
                            <p class="text-sm text-violet-100">حجوزات البيوتي</p>
                        </a>
                    </div>
                </div>

                <!-- 4. التحليلات والتقارير -->
                <div class="mb-8 animate-fade-in-up" style="animation-delay: 0.3s;">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="w-1 h-8 bg-orange-600 rounded-full mr-3"></div>
                            <h2 class="text-xl font-bold text-gray-900">📊 التحليلات والتقارير</h2>
                        </div>
                        <span class="text-sm text-gray-500 bg-orange-50 px-3 py-1 rounded-full">4 أقسام</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        
                        <!-- Reports -->
                        <a href="reports/" class="section-card bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-chart-line text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">التقارير</h3>
                            <p class="text-sm text-orange-100">تقارير الأداء</p>
                        </a>

                        <!-- Abandoned Carts -->
                        <a href="analytics/abandoned-carts.php" class="section-card bg-gradient-to-br from-orange-600 to-red-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-shopping-cart text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">السلات المتروكة</h3>
                            <p class="text-sm text-orange-100">تحليل السلات</p>
                        </a>

                        <!-- Wishlist -->
                        <a href="analytics/wishlist.php" class="section-card bg-gradient-to-br from-pink-600 to-rose-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-heart text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">قائمة الأمنيات</h3>
                            <p class="text-sm text-pink-100">المنتجات المفضلة</p>
                        </a>

                        <!-- Followers -->
                        <a href="analytics/followers.php" class="section-card bg-gradient-to-br from-violet-600 to-purple-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-user-friends text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">المتابعون</h3>
                            <p class="text-sm text-violet-100">إحصائيات المتابعين</p>
                        </a>
                    </div>
                </div>

                <!-- 5. التواصل والمحتوى -->
                <div class="mb-8 animate-fade-in-up" style="animation-delay: 0.4s;">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="w-1 h-8 bg-cyan-600 rounded-full mr-3"></div>
                            <h2 class="text-xl font-bold text-gray-900">💬 التواصل والمحتوى</h2>
                        </div>
                        <span class="text-sm text-gray-500 bg-cyan-50 px-3 py-1 rounded-full">5 أقسام</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        
                        <!-- Stories - NEW! -->
                        <a href="<?php echo $stories_table_exists ? 'stories/index.php' : 'install-features.php'; ?>" class="section-card bg-gradient-to-br from-pink-500 to-purple-600 rounded-xl shadow-lg p-5 text-white relative overflow-hidden">
                            <div class="absolute top-2 right-2 bg-white/20 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-bold">
                                <?php echo $stories_table_exists ? 'جديد ✨' : 'تثبيت 🔧'; ?>
                            </div>
                            <i class="fas fa-circle-notch text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">الاستوريز</h3>
                            <p class="text-sm text-pink-100"><?php echo $stories_table_exists ? 'مثل Instagram' : 'اضغط للتثبيت'; ?></p>
                        </a>
                        
                        <!-- Messages -->
                        <a href="messages.php" class="section-card bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-envelope text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">الرسائل</h3>
                            <p class="text-sm text-cyan-100">رسائل العملاء</p>
                        </a>

                        <!-- Support -->
                        <a href="support/" class="section-card bg-gradient-to-br from-rose-500 to-rose-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-headset text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">الدعم الفني</h3>
                            <p class="text-sm text-rose-100">مشاكل العملاء</p>
                        </a>

                        <!-- Reviews -->
                        <a href="reviews.php" class="section-card bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-star text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">التقييمات</h3>
                            <p class="text-sm text-yellow-100"><?php echo number_format($average_rating, 1); ?>★</p>
                        </a>

                        <!-- Posts - NEW! -->
                        <a href="<?php echo $posts_table_exists ? 'posts/index.php' : 'install-features.php'; ?>" class="section-card bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl shadow-lg p-5 text-white relative overflow-hidden">
                            <div class="absolute top-2 right-2 bg-white/20 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-bold">
                                <?php echo $posts_table_exists ? 'جديد ✨' : 'تثبيت 🔧'; ?>
                            </div>
                            <i class="fas fa-newspaper text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">المنشورات</h3>
                            <p class="text-sm text-indigo-100"><?php echo $posts_table_exists ? 'المدونة والأخبار' : 'اضغط للتثبيت'; ?></p>
                        </a>
                    </div>
                </div>

                <!-- 6. الإدارة والإعدادات -->
                <div class="mb-8 animate-fade-in-up" style="animation-delay: 0.5s;">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="w-1 h-8 bg-gray-600 rounded-full mr-3"></div>
                            <h2 class="text-xl font-bold text-gray-900">⚙️ الإدارة والإعدادات</h2>
                        </div>
                        <span class="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full">9 أقسام</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        
                        <!-- File Manager - NEW! -->
                        <a href="file-manager/" class="section-card bg-gradient-to-br from-blue-600 to-indigo-700 rounded-xl shadow-lg p-5 text-white hover:scale-105 transition-transform relative overflow-hidden">
                            <div class="absolute top-2 right-2 bg-white/20 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-bold">
                                جديد ✨
                            </div>
                            <i class="fas fa-folder-open text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">📁 مدير الملفات</h3>
                            <p class="text-sm text-blue-100">إدارة ملفات الموقع</p>
                            <div class="mt-2 text-xs bg-blue-500 bg-opacity-30 rounded px-2 py-1 inline-block">
                                <i class="fas fa-upload ml-1"></i>رفع وحذف الملفات
                            </div>
                        </a>
                        
                        <!-- Backup -->
                        <a href="backup.php" class="section-card bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl shadow-lg p-5 text-white hover:scale-105 transition-transform">
                            <i class="fas fa-database text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">💾 النسخ الاحتياطية</h3>
                            <p class="text-sm text-emerald-100">إدارة النسخ الاحتياطية</p>
                            <div class="mt-2 text-xs bg-emerald-400 bg-opacity-30 rounded px-2 py-1 inline-block">
                                <i class="fas fa-shield-alt ml-1"></i>حماية البيانات
                            </div>
                        </a>
                        
                        <!-- Settings -->
                        <a href="settings/index.php" class="section-card bg-gradient-to-br from-purple-600 to-purple-700 rounded-xl shadow-lg p-5 text-white hover:scale-105 transition-transform">
                            <i class="fas fa-cog text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">⚙️ الإعدادات</h3>
                            <p class="text-sm text-purple-200">إعدادات النظام والتواصل</p>
                            <div class="mt-2 text-xs bg-purple-500 bg-opacity-30 rounded px-2 py-1 inline-block">
                                <i class="fas fa-phone ml-1"></i>بيانات التواصل
                            </div>
                        </a>

                        <!-- Diagnostics - NEW! -->
                        <a href="settings/diagnostics.php" class="section-card bg-gradient-to-br from-cyan-600 to-blue-700 rounded-xl shadow-lg p-5 text-white hover:scale-105 transition-transform relative overflow-hidden">
                            <div class="absolute top-2 right-2 bg-white/20 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-bold">
                                جديد ✨
                            </div>
                            <i class="fas fa-stethoscope text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">🔍 أداة التشخيص</h3>
                            <p class="text-sm text-cyan-100">فحص شامل للمشروع</p>
                            <div class="mt-2 text-xs bg-cyan-500 bg-opacity-30 rounded px-2 py-1 inline-block">
                                <i class="fas fa-bug ml-1"></i>اكتشاف المشاكل
                            </div>
                        </a>

                        <!-- Links Checker - NEW! -->
                        <a href="settings/links-checker.php" class="section-card bg-gradient-to-br from-teal-600 to-green-700 rounded-xl shadow-lg p-5 text-white hover:scale-105 transition-transform relative overflow-hidden">
                            <div class="absolute top-2 right-2 bg-white/20 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-bold">
                                جديد ✨
                            </div>
                            <i class="fas fa-link text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">🔗 فحص الروابط</h3>
                            <p class="text-sm text-teal-100">فحص أزرار المتجر</p>
                            <div class="mt-2 text-xs bg-teal-500 bg-opacity-30 rounded px-2 py-1 inline-block">
                                <i class="fas fa-check ml-1"></i>اختبار الروابط
                            </div>
                        </a>

                        <!-- Branches -->
                        <a href="branches/" class="section-card bg-gradient-to-br from-sky-500 to-sky-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-store text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">الفروع</h3>
                            <p class="text-sm text-sky-100">فروع المتجر</p>
                        </a>

                        <!-- Security -->
                        <a href="security/" class="section-card bg-gradient-to-br from-slate-600 to-slate-700 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-shield-alt text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">الأمان</h3>
                            <p class="text-sm text-slate-100">الحماية والأمان</p>
                        </a>

                        <!-- Monitoring -->
                        <a href="monitoring.php" class="section-card bg-gradient-to-br from-red-500 to-red-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-video text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">المراقبة</h3>
                            <p class="text-sm text-red-100">مراقبة النظام</p>
                        </a>

                        <!-- Licenses -->
                        <a href="licenses/" class="section-card bg-gradient-to-br from-amber-500 to-amber-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-file-contract text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">التراخيص</h3>
                            <p class="text-sm text-amber-100">المستندات القانونية</p>
                        </a>

                        <!-- Profiles -->
                        <a href="profiles/" class="section-card bg-gradient-to-br from-fuchsia-500 to-fuchsia-600 rounded-xl shadow-lg p-5 text-white">
                            <i class="fas fa-id-card text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">الملفات الشخصية</h3>
                            <p class="text-sm text-fuchsia-100">هوية العلامة</p>
                        </a>
                    </div>
                </div>

                <!-- 7. أدوات المطورين -->
                <div class="mb-8 animate-fade-in-up" style="animation-delay: 0.6s;">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="w-1 h-8 bg-red-600 rounded-full mr-3"></div>
                            <h2 class="text-xl font-bold text-gray-900">🛠️ أدوات المطورين</h2>
                        </div>
                        <span class="text-sm text-gray-500 bg-red-50 px-3 py-1 rounded-full">1 قسم</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        
                        <!-- SQL Query Tool -->
                        <a href="sql-query.php" class="section-card bg-gradient-to-br from-red-600 to-red-700 rounded-xl shadow-lg p-5 text-white hover:scale-105 transition-transform relative overflow-hidden">
                            <div class="absolute top-2 right-2 bg-yellow-400 text-red-900 px-2 py-1 rounded-full text-xs font-bold">
                                ⚠️ خطر
                            </div>
                            <i class="fas fa-database text-3xl mb-2 opacity-80"></i>
                            <h3 class="text-lg font-bold">استعلامات SQL</h3>
                            <p class="text-sm text-red-100">تنفيذ استعلامات مباشرة</p>
                            <div class="mt-2 text-xs bg-red-500 bg-opacity-30 rounded px-2 py-1 inline-block">
                                <i class="fas fa-code ml-1"></i>للمطورين فقط
                            </div>
                        </a>
                    </div>
                </div>

            </div>

            <!-- Recent Orders -->
            <div class="card-enhanced fade-in-up" style="animation-delay: 0.6s;">
                <div class="card-header-enhanced">
                    <h3 class="card-title-enhanced">
                        <i class="fas fa-receipt text-blue-600"></i>
                        أحدث الطلبات
                    </h3>
                    <a href="orders/" class="btn-enhanced btn-secondary-enhanced">
                        عرض الكل
                        <i class="fas fa-arrow-left"></i>
                    </a>
                </div>
                <div class="overflow-x-auto">
                    <?php if (!empty($recent_orders)): ?>
                        <table class="table-enhanced">
                            <thead>
                                <tr>
                                    <th>رقم الطلب</th>
                                    <th>العميل</th>
                                    <th>المبلغ</th>
                                    <th>الحالة</th>
                                    <th>التاريخ</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($recent_orders as $order): ?>
                                    <tr>
                                        <td class="font-semibold text-gray-900">#<?php echo $order['id']; ?></td>
                                        <td class="text-gray-900"><?php echo htmlspecialchars($order['customer_name']); ?></td>
                                        <td class="font-semibold text-gray-900">EGP <?php echo number_format($order['total_amount'], 0); ?></td>
                                        <td>
                                            <?php
                                                $badge_classes = [
                                                    'pending' => 'badge-pending',
                                                    'processing' => 'badge-info',
                                                    'shipped' => 'badge-info',
                                                    'delivered' => 'badge-success',
                                                    'cancelled' => 'badge-danger'
                                                ];
                                                $badge_icons = [
                                                    'pending' => 'fa-clock',
                                                    'processing' => 'fa-spinner',
                                                    'shipped' => 'fa-truck',
                                                    'delivered' => 'fa-check-circle',
                                                    'cancelled' => 'fa-times-circle'
                                                ];
                                                $badge_class = $badge_classes[$order['status']] ?? 'badge-info';
                                                $badge_icon = $badge_icons[$order['status']] ?? 'fa-circle';
                                            ?>
                                            <span class="badge-enhanced <?php echo $badge_class; ?>">
                                                <i class="fas <?php echo $badge_icon; ?>"></i>
                                                <?php echo $status_ar[$order['status']] ?? $order['status']; ?>
                                            </span>
                                        </td>
                                        <td class="text-gray-600"><?php echo date('Y-m-d', strtotime($order['created_at'])); ?></td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    <?php else: ?>
                        <div class="p-8 text-center text-gray-500">
                            <i class="fas fa-inbox text-4xl mb-4 opacity-50"></i>
                            <p class="text-lg font-medium">لا توجد طلبات حالياً</p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // Mobile Sidebar
        function openSidebar() {
            document.getElementById('sidebar').classList.add('active');
            document.getElementById('sidebarOverlay').classList.add('active');
            document.body.style.overflow = 'hidden';
        }
    </script>

    <script>
        // Dark Mode Toggle
        const darkModeToggle = document.getElementById('darkModeToggle');
        const body = document.getElementById('body');
        
        // Load saved preference
        if (localStorage.getItem('darkMode') === 'enabled') {
            body.classList.add('dark-mode');
        }
        
        darkModeToggle.addEventListener('click', () => {
            body.classList.toggle('dark-mode');
            
            if (body.classList.contains('dark-mode')) {
                localStorage.setItem('darkMode', 'enabled');
            } else {
                localStorage.setItem('darkMode', 'disabled');
            }
        });
        
        // Search Functionality
        const searchInput = document.getElementById('searchInput');
        const sectionCards = document.querySelectorAll('.section-card');
        
        searchInput?.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            
            sectionCards.forEach(card => {
                const text = card.textContent.toLowerCase();
                const parent = card.closest('.grid');
                
                if (text.includes(searchTerm)) {
                    card.style.display = '';
                    card.style.animation = 'fadeInUp 0.3s ease-out';
                } else {
                    card.style.display = 'none';
                }
            });
            
            // Show/hide section headers
            document.querySelectorAll('.mb-8 > .flex.items-center').forEach(header => {
                const section = header.closest('.mb-8');
                const visibleCards = section.querySelectorAll('.section-card:not([style*="display: none"])');
                
                if (visibleCards.length === 0 && searchTerm !== '') {
                    section.style.display = 'none';
                } else {
                    section.style.display = '';
                }
            });
        });
        
        // Counter Animation
        function animateCounter(element, target, duration = 1000) {
            const start = 0;
            const increment = target / (duration / 16);
            let current = start;
            
            const timer = setInterval(() => {
                current += increment;
                if (current >= target) {
                    element.textContent = target;
                    clearInterval(timer);
                } else {
                    element.textContent = Math.floor(current);
                }
            }, 16);
        }
        
        // Animate counters on page load
        document.addEventListener('DOMContentLoaded', () => {
            const counters = document.querySelectorAll('.animate-count');
            counters.forEach(counter => {
                const target = parseInt(counter.textContent.replace(/[^0-9]/g, ''));
                if (!isNaN(target)) {
                    counter.textContent = '0';
                    setTimeout(() => animateCounter(counter, target), 300);
                }
            });
            
            // Animate progress bars
            setTimeout(() => {
                document.querySelectorAll('.progress-fill').forEach(bar => {
                    const width = bar.style.width;
                    bar.style.width = '0%';
                    setTimeout(() => {
                        bar.style.width = width;
                    }, 100);
                });
            }, 500);
        });
        
        // Keyboard Shortcuts
        document.addEventListener('keydown', (e) => {
            // Ctrl/Cmd + K for search
            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                e.preventDefault();
                searchInput?.focus();
            }
            
            // Ctrl/Cmd + D for dark mode
            if ((e.ctrlKey || e.metaKey) && e.key === 'd') {
                e.preventDefault();
                darkModeToggle.click();
            }
            
            // ESC to clear search
            if (e.key === 'Escape' && searchInput) {
                searchInput.value = '';
                searchInput.dispatchEvent(new Event('input'));
                searchInput.blur();
            }
        });
        
        // Add hover effect sound (optional - commented out)
        /*
        sectionCards.forEach(card => {
            card.addEventListener('mouseenter', () => {
                // Play subtle hover sound
                // const audio = new Audio('hover.mp3');
                // audio.volume = 0.1;
                // audio.play();
            });
        });
        */
        
        // Notification pulse effect
        setInterval(() => {
            document.querySelectorAll('.notification-badge').forEach(badge => {
                badge.style.animation = 'none';
                setTimeout(() => {
                    badge.style.animation = 'pulse 2s infinite';
                }, 10);
            });
        }, 5000);
        
        // Add tooltips
        const tooltips = {
            'Ctrl/Cmd + K': 'بحث سريع',
            'Ctrl/Cmd + D': 'تبديل الوضع الليلي',
            'ESC': 'إلغاء البحث'
        };
        
        // Show welcome message on first visit
        if (!localStorage.getItem('visited')) {
            setTimeout(() => {
                console.log('🎉 مرحباً بك في لوحة التحكم المحدثة!');
                console.log('💡 اختصارات لوحة المفاتيح:');
                console.log('   Ctrl/Cmd + K: بحث سريع');
                console.log('   Ctrl/Cmd + D: تبديل الوضع الليلي');
                console.log('   ESC: إلغاء البحث');
                localStorage.setItem('visited', 'true');
            }, 1000);
        }
        
        // Add smooth scroll behavior
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
        
        // Add loading state to cards on click
        sectionCards.forEach(card => {
            card.addEventListener('click', function(e) {
                if (!e.ctrlKey && !e.metaKey) {
                    this.style.opacity = '0.6';
                    this.style.transform = 'scale(0.98)';
                }
            });
        });
        
        // Performance monitoring
        window.addEventListener('load', () => {
            const loadTime = performance.now();
            console.log(`⚡ تم تحميل الصفحة في ${Math.round(loadTime)}ms`);
        });
        
        // Auto-refresh notifications every 30 seconds
        setInterval(() => {
            // In production, this would fetch new data via AJAX
            console.log('🔄 تحديث الإشعارات...');
        }, 30000);
    </script>
</body>
</html>
