<?php
/**
 * Redirect to new dashboard
 * الصفحة الرئيسية الجديدة للوحة التحكم
 */

header('Location: dashboard.php');
exit;

// Get user data
$user_model = new User($db);
$user_data = $user_model->getUserById($_SESSION['user_id']);

// Get models
$product_model = new Product($db);
$order_model = new Order($db);
$review_model = new Review($db);
$beauty_service_model = new BeautyService($db);
$beauty_booking_model = new BeautyBooking($db);
$post_model = new Post($db);
$category_model = new Category($db);
// Initialize AdminController
$admin_controller = new AdminController($db);
$status_ar = [
    'pending' => 'في الانتظار',
    'processing' => 'قيد المعالجة',
    'shipped' => 'تم الشحن',
    'delivered' => 'تم التسليم',
    'cancelled' => 'ملغي'
];

// Get statistics
$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);

// Calculate total sales
$total_sales = array_reduce($all_orders, function($total, $order) {
    return $total + $order['total_amount'];
}, 0);

// Get reviews statistics
$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;


// Get recent orders
$recent_orders = array_slice($all_orders, 0, 5);

// Handle admin actions
$message = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Handle post actions
    if (isset($_POST['create_post'])) {
        $caption = $_POST['caption'] ?? '';
        $image = '';

        // Handle image upload
        if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
            $upload_dir = 'uploads/posts/';
            if (!is_dir($upload_dir)) {
                mkdir($upload_dir, 0755, true);
            }

            $file_extension = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
            $allowed_extensions = ['jpg', 'jpeg', 'png', 'gif'];

            if (in_array($file_extension, $allowed_extensions)) {
                $new_filename = 'post_' . time() . '_' . uniqid() . '.' . $file_extension;
                $upload_path = $upload_dir . $new_filename;

                if (move_uploaded_file($_FILES['image']['tmp_name'], $upload_path)) {
                    $image = $upload_path;
                }
            }
        }

        if ($post_model->create($caption, $image)) {
            $message = 'تم إضافة المنشور بنجاح!';
        } else {
            $message = 'حدث خطأ أثناء إضافة المنشور';
        }
    } elseif (isset($_POST['update_post'])) {
        $post_id = $_POST['post_id'];
        $caption = $_POST['caption'] ?? '';
        $image = null;

        // Handle image upload
        if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
            $upload_dir = 'uploads/posts/';
            if (!is_dir($upload_dir)) {
                mkdir($upload_dir, 0755, true);
            }

            $file_extension = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
            $allowed_extensions = ['jpg', 'jpeg', 'png', 'gif'];

            if (in_array($file_extension, $allowed_extensions)) {
                $new_filename = 'post_' . time() . '_' . uniqid() . '.' . $file_extension;
                $upload_path = $upload_dir . $new_filename;

                if (move_uploaded_file($_FILES['image']['tmp_name'], $upload_path)) {
                    $image = $upload_path;
                }
            }
        }

        if ($post_model->update($post_id, $caption, $image)) {
            $message = 'تم تحديث المنشور بنجاح!';
        } else {
            $message = 'حدث خطأ أثناء تحديث المنشور';
        }
    } elseif (isset($_POST['delete_post'])) {
        $post_id = $_POST['post_id'];
        if ($post_model->delete($post_id)) {
            $message = 'تم حذف المنشور بنجاح!';
        } else {
            $message = 'حدث خطأ أثناء حذف المنشور';
        }
    }

    // Handle identity and design actions
    if (isset($_POST['add_cover'])) {
        $title = trim($_POST['cover_title'] ?? '');
        $type = $_POST['cover_type'] ?? 'home';
        $description = trim($_POST['cover_description'] ?? '');
        $is_active = isset($_POST['is_active']) ? 1 : 0;

        if (empty($title)) {
            $message = 'عنوان الصورة مطلوب';
        } elseif (!isset($_FILES['cover_image']) || $_FILES['cover_image']['error'] !== UPLOAD_ERR_OK) {
            $message = 'صورة الغلاف مطلوبة';
        } else {
            // Handle image upload
            $upload_dir = 'uploads/covers/';
            if (!is_dir($upload_dir)) {
                mkdir($upload_dir, 0755, true);
            }

            $allowed_types = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
            $max_size = 10 * 1024 * 1024; // 10MB

            if (!in_array($_FILES['cover_image']['type'], $allowed_types)) {
                $message = 'نوع الملف غير مدعوم. يرجى رفع صورة بصيغة JPG, PNG, أو GIF';
            } elseif ($_FILES['cover_image']['size'] > $max_size) {
                $message = 'حجم الملف كبير جداً. الحد الأقصى 10 ميجابايت';
            } else {
                $file_extension = pathinfo($_FILES['cover_image']['name'], PATHINFO_EXTENSION);
                $file_name = 'cover_' . time() . '_' . uniqid() . '.' . $file_extension;
                $target_path = $upload_dir . $file_name;

                if (move_uploaded_file($_FILES['cover_image']['tmp_name'], $target_path)) {
                    // Save to database (you'll need to create a covers table)
                    $query = "INSERT INTO covers (title, type, description, image_path, is_active, created_at) VALUES (?, ?, ?, ?, ?, NOW())";
                    $stmt = $db->prepare($query);
                    $stmt->bindParam(1, $title);
                    $stmt->bindParam(2, $type);
                    $stmt->bindParam(3, $description);
                    $stmt->bindParam(4, $target_path);
                    $stmt->bindParam(5, $is_active);

                    if ($stmt->execute()) {
                        $message = 'تم إضافة صورة الغلاف بنجاح!';
                    } else {
                        $message = 'حدث خطأ أثناء حفظ البيانات';
                    }
                } else {
                    $message = 'حدث خطأ أثناء رفع الصورة';
                }
            }
        }
    }

    // Handle beauty service actions
    if (isset($_POST['add_beauty_service'])) {
        $beauty_service_model->name = $_POST['name'];
        $beauty_service_model->description = $_POST['description'];
        $beauty_service_model->price = $_POST['price'];
        $beauty_service_model->duration = $_POST['duration'];
        $beauty_service_model->category = $_POST['category'];
        $beauty_service_model->stock_quantity = $_POST['stock_quantity'] ?? 0;

        if ($beauty_service_model->create()) {
            $message = 'تم إضافة الخدمة بنجاح!';
        } else {
            $message = 'حدث خطأ أثناء إضافة الخدمة';
        }
    } elseif (isset($_POST['update_beauty_service'])) {
        $beauty_service_model->id = $_POST['service_id'];
        $beauty_service_model->name = $_POST['name'];
        $beauty_service_model->description = $_POST['description'];
        $beauty_service_model->price = $_POST['price'];
        $beauty_service_model->duration = $_POST['duration'];
        $beauty_service_model->category = $_POST['category'];
        $beauty_service_model->stock_quantity = $_POST['stock_quantity'] ?? 0;

        if ($beauty_service_model->update()) {
            $message = 'تم تحديث الخدمة بنجاح!';
        } else {
            $message = 'حدث خطأ أثناء تحديث الخدمة';
        }
    } elseif (isset($_POST['toggle_beauty_service'])) {
        $service_id = $_POST['service_id'];
        $query = "UPDATE beauty_services SET is_active = NOT is_active WHERE id = ?";
        $stmt = $db->prepare($query);
        $stmt->bindParam(1, $service_id);

        if ($stmt->execute()) {
            $message = 'تم تحديث حالة الخدمة بنجاح!';
        } else {
            $message = 'حدث خطأ أثناء تحديث حالة الخدمة';
        }
    } elseif (isset($_POST['delete_beauty_service'])) {
        $beauty_service_model->id = $_POST['service_id'];

        if ($beauty_service_model->delete()) {
            $message = 'تم حذف الخدمة بنجاح!';
        } else {

            $message = 'حدث خطأ أثناء حذف الخدمة';

        }

    } elseif (isset($_POST['update_beauty_booking_status'])) 
    
    {
        $beauty_booking_model->id = $_POST['booking_id'];
        $beauty_booking_model->status = $_POST['status'];

        if ($beauty_booking_model->updateStatus()) {
            $message = 'تم تحديث حالة الحجز بنجاح!';
        } else {
            $message = 'حدث خطأ أثناء تحديث حالة الحجز';
        }
    }
    
    if (isset($_POST['update_order_status'])) {
        $order_id = $_POST['order_id'];
        $status = $_POST['status'];
        if ($order_model->updateOrderStatus($order_id, $status)) {
            $message = 'تم تحديث حالة الطلب بنجاح!';
            // Reload orders data after update
            $all_orders = $order_model->getAllOrders();
            $recent_orders = array_slice($all_orders, 0, 5);
        } else {
            $message = 'حدث خطأ أثناء تحديث حالة الطلب';
        }
    } elseif (isset($_POST['delete_user'])) {
        // Simple delete user implementation (should be refined in a real system)
        $user_id = $_POST['user_id'];
        if ($user_model->deleteUser($user_id)) {
            $message = 'تم حذف المستخدم بنجاح!';
             // Reload users data after update
            $total_users = count($user_model->getAllUsers() ?? []);
        } else {
            $message = 'حدث خطأ أثناء حذف المستخدم';
        }

    } elseif (isset($_POST['delete_product'])) {
        $product_id = $_POST['product_id'];
        $product_model->id = $product_id;

        // Get product data first to delete image
        $product_data = $product_model->getOne();
        if ($product_data && $product_model->delete()) {
            // Delete image file if exists
            if (!empty($product_data['image']) && file_exists($product_data['image'])) {
                // Ensure 'uploads' path is correct relative to admin.php
                $image_path = __DIR__ . '/' . $product_data['image'];
                if (file_exists($image_path)) {
                    unlink($image_path);
                }
            }
            $message = 'تم حذف المنتج بنجاح!';
            // Reload products data after update
            $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);
        } else {
            $message = 'حدث خطأ أثناء حذف المنتج';
        }
    }

    // Handle category actions
    if (isset($_POST['add_category'])) {
        $result = $admin_controller->addCategory($_POST, $_FILES);
        if ($result['success']) {
            $message = $result['message'];
        } else {
            $message = $result['message'];
        }
    } elseif (isset($_POST['update_category'])) {
        $result = $admin_controller->updateCategory($_POST['category_id'], $_POST, $_FILES);
        if ($result['success']) {
            $message = $result['message'];
        } else {
            $message = $result['message'];
        }
    } elseif (isset($_POST['delete_category'])) {
        $result = $admin_controller->deleteCategory($_POST['category_id']);
        if ($result['success']) {
            $message = $result['message'];
        } else {
            $message = $result['message'];
        }
    } elseif (isset($_POST['toggle_category'])) {
        $result = $admin_controller->toggleCategory($_POST['category_id']);
        if ($result['success']) {
            $message = $result['message'];
        } else {
            $message = $result['message'];
        }
    }
}
?>

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>لوحة تحكم المدير</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">
    <script src="https://unpkg.com/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            font-family: 'Tajawal', sans-serif;
            direction: rtl;
        }
        /* Style for active section */
        .section {
            display: none;
        }
        .section.active {
            display: block;
        }

        .menu-link.active-link {
            background: linear-gradient(to right, #8b5cf6, #9333ea); /* purple-600 to purple-700 */
            color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
            transform: scale(1.05);
        }
        .menu-link.active-link .icon-wrapper { /* Assuming a wrapper for the icon */
            background-color: rgba(255, 255, 255, 0.2);
        }

        /* Welcome screen styles */
        .welcome-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(15, 118, 110, 0.95), rgba(6, 78, 59, 0.95), rgba(34, 197, 94, 0.95));
            backdrop-filter: blur(20px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
            transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .welcome-overlay.fade-out {
            opacity: 0;
            pointer-events: none;
            transform: scale(1.1);
        }

        .welcome-content {
            text-align: center;
            color: white;
            transform: scale(0.8) translateY(20px);
            transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
            opacity: 0;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 3rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
            max-width: 500px;
            margin: 0 auto;
        }

        .welcome-overlay.show .welcome-content {
            transform: scale(1) translateY(0);
            opacity: 1;
        }

        .welcome-icon {
            margin-bottom: 2rem;
            animation: float 3s ease-in-out infinite;
        }

        .welcome-icon i {
            font-size: 4rem;
            color: #34d399;
            filter: drop-shadow(0 4px 12px rgba(52, 211, 153, 0.4));
        }

        .welcome-title {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            text-shadow: 0 2px 6px rgba(0,0,0,0.3);
            background: linear-gradient(45deg, #ffffff, #34d399);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .welcome-subtitle {
            font-size: 1.3rem;
            margin-bottom: 2.5rem;
            opacity: 0.9;
            font-weight: 300;
            letter-spacing: 0.5px;
        }

        .welcome-name {
            font-size: 1.8rem;
            font-weight: 600;
            margin-top: 1.5rem;
            color: #34d399;
            background: rgba(255, 255, 255, 0.15);
            padding: 1rem 2rem;
            border-radius: 50px;
            border: 2px solid rgba(52, 211, 153, 0.3);
            backdrop-filter: blur(15px);
            box-shadow: 0 8px 25px rgba(52, 211, 153, 0.2);
        }

        .welcome-profile {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto 1.5rem;
            border: 3px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

        .welcome-profile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .welcome-profile .default-avatar {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2.5rem;
            font-weight: bold;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .welcome-loading {
            margin-top: 2rem;
            opacity: 0.8;
        }

        .welcome-loading div {
            display: inline-block;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: white;
            animation: loading 1.4s ease-in-out infinite both;
        }

        .welcome-loading div:nth-child(1) { animation-delay: -0.32s; }
        .welcome-loading div:nth-child(2) { animation-delay: -0.16s; }

        @keyframes loading {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen" style="background-attachment: fixed;">

    <!-- Welcome Screen -->
    <div id="welcome-screen" class="welcome-overlay" style="display: none;">
        <div class="welcome-content">
            <div class="welcome-icon">
                <i class="fas fa-crown"></i>
            </div>
            <h1 class="welcome-title">مرحباً بك</h1>
            <p class="welcome-subtitle">في لوحة تحكم متجر Roz Skin</p>
            <?php if ($user_data['profile_picture']): ?>
                <img src="<?php echo htmlspecialchars($user_data['profile_picture']); ?>" alt="صورة الملف الشخصي" class="welcome-profile">
            <?php else: ?>
                <div class="welcome-profile">
                    <div class="default-avatar">
                        <?php echo strtoupper(substr($user_data['name'], 0, 1)); ?>
                    </div>
                </div>
            <?php endif; ?>
            <div class="welcome-name">
                <?php echo htmlspecialchars($user_data['name']); ?>
            </div>
            <div class="welcome-loading">
                <div></div><div></div><div></div>
            </div>
            <button onclick="hideWelcomeScreen()" class="mt-4 px-4 py-2 bg-white bg-opacity-20 text-white rounded-lg hover:bg-opacity-30 transition-all">
                المتابعة للوحة التحكم
            </button>
        </div>
    </div>
    <!-- Header -->
    <header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-20">
        <div class="flex items-center justify-between px-6 py-3">
            <div class="flex items-center">
                <button id="sidebarToggle" class="p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-all duration-200">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
                <div class="flex items-center ml-4">
                    <?php if ($user_data['profile_picture']): ?>
                        <img src="<?php echo htmlspecialchars($user_data['profile_picture']); ?>" alt="صورة الملف الشخصي" class="w-8 h-8 rounded-lg mr-3 object-cover">
                    <?php else: ?>
                        <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-sm mr-3">
                            <?php echo strtoupper(substr($user_data['name'], 0, 1)); ?>
                        </div>
                    <?php endif; ?>
                    <h1 class="text-xl font-semibold text-gray-900">لوحة التحكم</h1>
                </div>
            </div>
            <div class="flex items-center space-x-4 space-x-reverse">
                <a href="index.php" class="p-2 rounded-md text-gray-600 hover:bg-gray-100" title="المتجر">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                    </svg>
                </a>
                <a href="#" class="p-2 rounded-md text-gray-600 hover:bg-gray-100" title="الحساب">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                    </svg>
                </a>
                <a href="logout.php" class="p-2 rounded-md text-gray-600 hover:bg-gray-100" title="تسجيل الخروج">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                    </svg>
                </a>
            </div>
        </div>
    </header>

    <div class="flex">
        
        <!-- Sidebar -->
        <div id="sidebar" class="w-72 bg-white shadow-lg border-l border-gray-200 flex-shrink-0 overflow-y-auto overflow-x-hidden transition-all duration-300">
            <div class="p-4 sticky top-[5.2rem]"> <!-- Adjusted top for sticky header -->
                <!-- Logo Section -->
                <div class="mb-6 flex items-center justify-center">
                    <div class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg">
                        R
                    </div>
                    <div class="mr-3 sidebar-logo-text">
                        <h3 class="font-bold text-gray-800 text-lg sidebar-text">Roz Skin</h3>
                        <p class="text-xs text-gray-600 sidebar-text">لوحة التحكم</p>
                    </div>
                </div>

                <!-- Navigation Menu -->
                <nav class="space-y-2">
                    <!-- Main Dashboard -->
                    <div class="mb-6">
                        <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-2">الرئيسي</h4>
                        <a href="#dashboard" class="menu-link group flex items-center px-3 py-3 text-sm font-medium rounded-lg bg-blue-50 text-blue-700 border-r-2 border-blue-700" data-section="dashboard">
                            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center ml-3">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z"></path>
                                </svg>
                            </div>
                            <span class="sidebar-text">لوحة التحكم</span>
                        </a>
                    </div>

                    <!-- Business Operations -->
                    <div class="mb-6">
                        <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-2">العمليات التجارية</h4>
                        <a href="#orders" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200" data-section="orders">
                            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-blue-200 transition-colors">
                                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                </svg>
                            </div>
                            <span class="sidebar-text">إدارة الطلبات</span>
                        </a>
                        <a href="products/" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200">
                            <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-green-200 transition-colors">
                                <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                                </svg>
                            </div>
                            <span class="sidebar-text">إدارة المنتجات</span>
                        </a>
                        <a href="#shipping" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200" data-section="shipping">
                            <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-orange-200 transition-colors">
                                <i class="fas fa-truck text-orange-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">إدارة الشحن</span>
                        </a>
                        <a href="#categories" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200" data-section="categories">
                            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-blue-200 transition-colors">
                                <i class="fas fa-tags text-blue-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">الفئات</span>
                        </a>
                        <a href="beauty.php" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200">
                            <div class="w-8 h-8 bg-pink-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-pink-200 transition-colors">
                                <i class="fas fa-spa text-pink-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">البيوتي سنتر</span>
                        </a>
                    </div>

                    <!-- Customer Management -->
                    <div class="mb-6">
                        <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-2">إدارة العملاء</h4>
                        <a href="#customers" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200" data-section="customers">
                            <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-indigo-200 transition-colors">
                                <i class="fas fa-users-cog text-indigo-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">إدارة العملاء</span>
                        </a>
                        <a href="#users" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200" data-section="users">
                            <div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-teal-200 transition-colors">
                                <i class="fas fa-user-shield text-teal-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">إدارة المستخدمين</span>
                        </a>
                        <a href="#support" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200" data-section="support">
                            <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-red-200 transition-colors">
                                <i class="fas fa-headset text-red-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">خدمة العملاء</span>
                        </a>
                        <a href="messages.php" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200">
                            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-blue-200 transition-colors">
                                <i class="fas fa-envelope text-blue-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">الرسائل</span>
                        </a>
                    </div>

                    <!-- Marketing & Design -->
                    <div class="mb-6">
                        <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-2">التسويق والتصميم</h4>
                        <a href="posts.php" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200">
                            <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-green-200 transition-colors">
                                <i class="fas fa-tree text-green-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">إدارة المنشورات</span>
                        </a>
                        <a href="reviews.php" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200">
                            <div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-yellow-200 transition-colors">
                                <i class="fas fa-star text-yellow-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">إدارة التقييمات</span>
                        </a>
                        <a href="#marketing" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200" data-section="marketing">
                            <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-orange-200 transition-colors">
                                <i class="fas fa-bullhorn text-orange-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">إدارة التسويق</span>
                        </a>
                        <a href="#identity" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200" data-section="identity">
                            <div class="w-8 h-8 bg-cyan-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-cyan-200 transition-colors">
                                <i class="fas fa-palette text-cyan-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">الهوية والتصميم</span>
                        </a>
                    </div>

                    <!-- Monitoring & Control -->
                    <div class="mb-6">
                        <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-2">المراقبة والتحكم</h4>
                        <a href="monitoring.php" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200">
                            <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-red-200 transition-colors">
                                <i class="fas fa-video text-red-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">المراقبة والتحكم</span>
                        </a>
                    </div>

                    <!-- System Settings -->
                    <div class="mb-6">
                        <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-2">النظام</h4>
                        <a href="payments.php" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-white hover:shadow-md transition-all duration-200">
                            <div class="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-emerald-200 transition-colors">
                                <i class="fas fa-credit-card text-emerald-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">إدارة الدفع</span>
                        </a>
                        <a href="fawry_api.php" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-white hover:shadow-md transition-all duration-200">
                            <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-orange-200 transition-colors">
                                <i class="fas fa-mobile-alt text-orange-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">إعدادات فوري API</span>
                        </a>
                        <a href="business_licenses.php" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-white hover:shadow-md transition-all duration-200">
                            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-blue-200 transition-colors">
                                <i class="fas fa-file-alt text-blue-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">التراخيص والمستندات</span>
                        </a>
                        <a href="fawry_application.php" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-white hover:shadow-md transition-all duration-200">
                            <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-purple-200 transition-colors">
                                <i class="fas fa-file-signature text-purple-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">طلب تسجيل فوري</span>
                        </a>
                        <a href="#settings" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-white hover:shadow-md transition-all duration-200" data-section="settings">
                            <div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-gray-200 transition-colors">
                                <i class="fas fa-cog text-gray-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">الإعدادات</span>
                        </a>
                        <a href="dev_info.php" class="menu-link group flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-white hover:shadow-md transition-all duration-200">
                            <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center ml-3 group-hover:bg-purple-200 transition-colors">
                                <i class="fas fa-info-circle text-purple-600 text-sm"></i>
                            </div>
                            <span class="sidebar-text">معلومات النظام</span>
                        </a>
                    </div>
                </nav>

                <!-- Sidebar Footer -->
                <div class="mt-8 pt-4 border-t border-emerald-200">
                    <div class="text-center">
                        <p class="text-xs text-gray-500 mb-2">متجر Roz Skin</p>
                        <div class="flex items-center justify-center space-x-1 space-x-reverse">
                            <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                            <span class="text-xs text-gray-500 sidebar-text">متصل</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content Area -->
        <div class="flex-1 flex flex-col min-w-0">
            <div class="p-4 lg:p-6 xl:p-8 flex-1 overflow-auto">
                
                <!-- Success/Error Message Display -->
                <?php if ($message): ?>
                    <div class="bg-green-50 border-r-4 border-green-400 p-4 mb-6">
                        <div class="flex min-h-screen w-full">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="mr-3">
                                <p class="text-sm text-green-700"><?php echo $message; ?></p>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>

                <!-- Breadcrumb -->
                <div class="mb-6">
                    <nav class="flex text-sm text-gray-500">
                        <span>الرئيسية</span>
                        <span class="mx-2">/</span>
                        <span class="text-gray-900">لوحة التحكم</span>
                    </nav>
                </div>

                <!-- Statistics Cards -->
                <div id="stats-cards" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <!-- Total Orders -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-all duration-200">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-600">إجمالي الطلبات</p>
                                <p class="text-2xl font-bold text-gray-900"><?php echo $total_orders; ?></p>
                            </div>
                            <div class="bg-blue-50 p-3 rounded-lg">
                                <svg class="w-6 h-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </div>
                        <div class="mt-4">
                            <span class="text-green-600 text-sm font-medium">+12.6% من الشهر الماضي</span>
                        </div>
                    </div>

                    <!-- Total Users -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-all duration-200">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-600">إجمالي المستخدمين</p>
                                <p class="text-2xl font-bold text-gray-900"><?php echo $total_users; ?></p>
                            </div>
                            <div class="bg-green-50 p-3 rounded-lg">
                                <svg class="w-6 h-6 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </div>
                        <div class="mt-4">
                            <span class="text-green-600 text-sm font-medium">+28.4% من الشهر الماضي</span>
                        </div>
                    </div>

                    <!-- Total Products -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-all duration-200">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-600">إجمالي المنتجات</p>
                                <p class="text-2xl font-bold text-gray-900"><?php echo $all_products; ?></p>
                            </div>
                            <div class="bg-yellow-50 p-3 rounded-lg">
                                <svg class="w-6 h-6 text-yellow-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.293l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </div>
                        <div class="mt-4">
                            <span class="text-green-600 text-sm font-medium">+8.1% من الشهر الماضي</span>
                        </div>
                    </div>

                    <!-- Total Sales -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-all duration-200">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-600">إجمالي المبيعات</p>
                                <p class="text-2xl font-bold text-gray-900">EGP <?php echo number_format($total_sales, 0, ',', ','); ?></p>
                            </div>
                            <div class="bg-purple-50 p-3 rounded-lg">
                                <svg class="w-6 h-6 text-purple-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </div>
                        <div class="mt-4">
                            <span class="text-green-600 text-sm font-medium">+340% من الشهر الماضي</span>
                        </div>
                    </div>

                    <!-- Total Reviews -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-all duration-200">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-600">إجمالي التقييمات</p>
                                <p class="text-2xl font-bold text-gray-900"><?php echo $total_reviews; ?></p>
                            </div>
                            <div class="bg-yellow-50 p-3 rounded-lg">
                                <svg class="w-6 h-6 text-yellow-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                </svg>
                            </div>
                        </div>
                        <div class="mt-4">
                            <span class="text-yellow-600 text-sm font-medium"><?php echo number_format($average_rating, 1); ?> ★ متوسط التقييم</span>
                        </div>
                    </div>
                </div>

                <!-- Dashboard Section -->
                <div id="dashboard" class="section active">
                    <div class="mb-8">
                        <h2 class="text-3xl font-bold text-gray-900 mb-2">لوحة التحكم العامة</h2>
                        <p class="text-gray-600 text-lg">نظرة عامة على أداء النظام</p>
                    </div>

                    <!-- Recent Orders -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="px-6 py-5 border-b border-gray-200 bg-gray-50">
                            <h3 class="text-xl font-semibold text-gray-900">أحدث الطلبات</h3>
                        </div>
                        <div class="overflow-x-auto">
                            <?php if (!empty($recent_orders)): ?>
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الطلب</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العميل</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المبلغ</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <?php foreach ($recent_orders as $order): ?>
                                            <tr class="hover:bg-gray-50">
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#<?php echo $order['id']; ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><?php echo htmlspecialchars($order['customer_name']); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">EGP <?php echo number_format($order['total_amount'], 0, ',', ','); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <?php
                                                        $status_classes = [
                                                            'pending' => 'bg-yellow-100 text-yellow-800',
                                                            'processing' => 'bg-blue-100 text-blue-800',
                                                            'shipped' => 'bg-indigo-100 text-indigo-800',
                                                            'delivered' => 'bg-green-100 text-green-800',
                                                            'cancelled' => 'bg-red-100 text-red-800'
                                                        ];
                                                        $status_class = $status_classes[$order['status']] ?? 'bg-gray-100 text-gray-800';
                                                    ?>
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <?php echo $status_class; ?>">
                                                        <?php echo $status_ar[$order['status']] ?? $order['status']; ?>
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo date('Y-m-d', strtotime($order['created_at'])); ?></td>
                                            </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>
                            <?php else: ?>
                                <div class="text-center py-12">
                                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                    </svg>
                                    <h3 class="mt-2 text-sm font-medium text-gray-900">لا توجد طلبات حديثة</h3>
                                    <p class="mt-1 text-sm text-gray-500">لم يتم العثور على أي طلبات في النظام.</p>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>

                    <!-- Quick Management Actions -->
                    <div class="mt-8">
                        <h3 class="text-xl font-semibold text-gray-900 mb-4">إدارة سريعة</h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <a href="products.php" class="bg-blue-50 hover:bg-blue-100 p-6 rounded-lg transition-all duration-200">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center text-white">
                                        <i class="fas fa-box text-xl"></i>
                                    </div>
                                    <div class="mr-4">
                                        <h4 class="font-semibold text-gray-900">إدارة المنتجات</h4>
                                        <p class="text-sm text-gray-600">إضافة وتعديل المنتجات</p>
                                    </div>
                                </div>
                            </a>
                            <a href="posts.php" class="bg-green-50 hover:bg-green-100 p-6 rounded-lg transition-all duration-200">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center text-white">
                                        <i class="fas fa-tree text-xl"></i>
                                    </div>
                                    <div class="mr-4">
                                        <h4 class="font-semibold text-gray-900">إدارة المنشورات</h4>
                                        <p class="text-sm text-gray-600">إدارة منشورات TREE</p>
                                    </div>
                                </div>
                            </a>
                            <button onclick="showBeautyBookings()" class="bg-pink-50 hover:bg-pink-100 p-6 rounded-lg transition-all duration-200 text-left">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 bg-pink-500 rounded-lg flex items-center justify-center text-white">
                                        <i class="fas fa-spa text-xl"></i>
                                    </div>
                                    <div class="mr-4">
                                        <h4 class="font-semibold text-gray-900">البيوتي سنتر</h4>
                                        <p class="text-sm text-gray-600">إدارة الخدمات والحجوزات</p>
                                    </div>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Orders Section -->
                <div id="orders" class="section">
                    <div class="mb-8">
                        <h2 class="text-3xl font-bold text-gray-900 mb-2">إدارة الطلبات</h2>
                        <p class="text-gray-600 text-lg">إدارة وتتبع جميع الطلبات في النظام</p>
                    </div>

                    <?php if (!empty($all_orders)): ?>
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                            <div class="px-6 py-4 border-b border-gray-200">
                                <h3 class="text-lg font-medium text-gray-900">جميع الطلبات</h3>
                            </div>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الطلب</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العميل</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الهاتف</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المبلغ</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <?php foreach ($all_orders as $order): ?>
                                            <tr class="hover:bg-gray-50">
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#<?php echo $order['id']; ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><?php echo htmlspecialchars($order['customer_name']); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo htmlspecialchars($order['customer_phone']); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">EGP <?php echo number_format($order['total_amount'], 0, ',', ','); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                                        <?php echo $status_classes[$order['status']] ?? 'bg-gray-100 text-gray-800'; ?>">
                                                        <?php echo $status_ar[$order['status']] ?? $order['status']; ?>
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo date('Y-m-d H:i', strtotime($order['created_at'])); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                    <form method="POST" class="inline-flex items-center space-x-2 space-x-reverse">
                                                        <input type="hidden" name="order_id" value="<?php echo $order['id']; ?>">
                                                        <select name="status" class="text-sm border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                                            <option value="pending" <?php echo $order['status'] == 'pending' ? 'selected' : ''; ?>>في الانتظار</option>
                                                            <option value="processing" <?php echo $order['status'] == 'processing' ? 'selected' : ''; ?>>قيد المعالجة</option>
                                                            <option value="shipped" <?php echo $order['status'] == 'shipped' ? 'selected' : ''; ?>>تم الشحن</option>
                                                            <option value="delivered" <?php echo $order['status'] == 'delivered' ? 'selected' : ''; ?>>تم التسليم</option>
                                                            <option value="cancelled" <?php echo $order['status'] == 'cancelled' ? 'selected' : ''; ?>>ملغي</option>
                                                        </select>
                                                        <button type="submit" name="update_order_status" class="bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white px-3 py-1 rounded-md text-xs font-medium transition-all duration-200 transform hover:scale-105 shadow-md">
                                                            <i class="fas fa-save ml-1"></i> تحديث
                                                        </button>
                                                    </form>
                                                </td>
                                            </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    <?php else: ?>
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12">
                            <div class="text-center">
                                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                </svg>
                                <h3 class="mt-2 text-sm font-medium text-gray-900">لا توجد طلبات</h3>
                                <p class="mt-1 text-sm text-gray-500">لم يتم العثور على أي طلبات في النظام.</p>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Products link removed - now handled by products.php -->

                <!-- Users Section -->
                <div id="users" class="section">
                    <div class="mb-6">
                        <h2 class="text-2xl font-semibold text-gray-900 mb-2">إدارة المستخدمين</h2>
                        <p class="text-gray-600">إدارة حسابات المستخدمين والصلاحيات</p>
                    </div>

                    <?php
                    $users = $user_model->getAllUsers();
                    if (!empty($users)):
                    ?>
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                            <div class="px-6 py-4 border-b border-gray-200">
                                <h3 class="text-lg font-medium text-gray-900">جميع المستخدمين</h3>
                            </div>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الاسم</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الهاتف</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الدور</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاريخ التسجيل</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <?php foreach ($users as $user): ?>
                                            <tr class="hover:bg-gray-50">
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"><?php echo htmlspecialchars($user['name']); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo htmlspecialchars($user['phone']); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                                        <?php echo $user['role'] == 'admin' ? 'bg-purple-100 text-purple-800' : 'bg-green-100 text-green-800'; ?>">
                                                        <?php echo $user['role'] == 'admin' ? 'مدير' : 'مستخدم'; ?>
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo date('Y-m-d', strtotime($user['created_at'])); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                    <?php if ($user['id'] != $_SESSION['user_id']): ?>
                                                        <button onclick="deleteUser(<?php echo $user['id']; ?>, '<?php echo htmlspecialchars(addslashes($user['name'])); ?>')" class="text-red-600 hover:text-red-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-red-50 transition-colors">
                                                            <i class="fas fa-user-times ml-1"></i>
                                                            حذف
                                                        </button>
                                                    <?php else: ?>
                                                        <span class="text-gray-400 text-sm bg-gray-100 px-2 py-1 rounded-md">
                                                            <i class="fas fa-user-shield ml-1"></i>
                                                            الحساب الحالي
                                                        </span>
                                                    <?php endif; ?>
                                                </td>
                                            </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    <?php else: ?>
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12">
                            <div class="text-center">
                                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                                </svg>
                                <h3 class="mt-2 text-sm font-medium text-gray-900">لا يوجد مستخدمون</h3>
                                <p class="mt-1 text-sm text-gray-500">لم يتم العثور على أي مستخدمين في النظام.</p>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Shipping Management Section -->
                <div id="shipping" class="section">
                    <div class="mb-6">
                        <div class="flex justify-between items-center">
                            <div>
                                <h2 class="text-2xl font-semibold text-gray-900 mb-2">إدارة الشحن</h2>
                                <p class="text-gray-600">إدارة طرق الشحن وأسعارها</p>
                            </div>
                            <button onclick="showAddShippingModal()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center">
                                <i class="fas fa-plus ml-2"></i>
                                إضافة طريقة شحن جديدة
                            </button>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-medium text-gray-900">طرق الشحن</h3>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الاسم</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الوصف</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">السعر</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المدة المتوقعة</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <!-- Standard Shipping -->
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">الشحن القياسي</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">خدمة الشحن العادية</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">EGP 50</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3-5 أيام</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">نشط</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2 space-x-reverse">
                                            <button onclick="editShippingMethod('standard')" class="text-yellow-600 hover:text-yellow-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-yellow-50 transition-colors">
                                                <i class="fas fa-edit ml-1"></i>
                                                تعديل
                                            </button>
                                            <button onclick="toggleShippingMethod('standard')" class="text-red-600 hover:text-red-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-red-50 transition-colors">
                                                <i class="fas fa-ban ml-1"></i>
                                                تعطيل
                                            </button>
                                        </td>
                                    </tr>
                                    <!-- Express Shipping -->
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">الشحن السريع</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">خدمة الشحن السريع للتسليم السريع</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">EGP 100</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1-2 أيام</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">نشط</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2 space-x-reverse">
                                            <button onclick="editShippingMethod('express')" class="text-yellow-600 hover:text-yellow-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-yellow-50 transition-colors">
                                                <i class="fas fa-edit ml-1"></i>
                                                تعديل
                                            </button>
                                            <button onclick="toggleShippingMethod('express')" class="text-red-600 hover:text-red-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-red-50 transition-colors">
                                                <i class="fas fa-ban ml-1"></i>
                                                تعطيل
                                            </button>
                                        </td>
                                    </tr>
                                    <!-- Free Shipping -->
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">الشحن المجاني</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">الشحن المجاني للطلبات فوق 500 جنيه</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">EGP 0</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5-7 أيام</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">نشط</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2 space-x-reverse">
                                            <button onclick="editShippingMethod('free')" class="text-yellow-600 hover:text-yellow-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-yellow-50 transition-colors">
                                                <i class="fas fa-edit ml-1"></i>
                                                تعديل
                                            </button>
                                            <button onclick="toggleShippingMethod('free')" class="text-red-600 hover:text-red-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-red-50 transition-colors">
                                                <i class="fas fa-ban ml-1"></i>
                                                تعطيل
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Categories Management Section -->
                <div id="categories" class="section">
                    <div class="mb-6">
                        <div class="flex justify-between items-center">
                            <div>
                                <h2 class="text-2xl font-semibold text-gray-900 mb-2">إدارة الفئات</h2>
                                <p class="text-gray-600">إدارة فئات المنتجات وتصنيفها</p>
                            </div>
                            <button onclick="showAddCategoryModal()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center">
                                <i class="fas fa-plus ml-2"></i>
                                فئة جديدة
                            </button>
                        </div>
                    </div>

                    <?php
                    // Get categories using AdminController
                    $categories_data = $admin_controller->getCategories();
                    $categories = $categories_data['categories'] ?? [];
                    ?>

                    <?php if (!empty($categories)): ?>
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                            <div class="px-6 py-4 border-b border-gray-200">
                                <h3 class="text-lg font-medium text-gray-900">جميع الفئات</h3>
                                <p class="text-sm text-gray-600 mt-1">إجمالي الفئات: <?php echo count($categories); ?> | منتجات: <?php echo $categories_data['stats']['total_products'] ?? 0; ?> | خدمات: <?php echo $categories_data['stats']['total_services'] ?? 0; ?></p>
                            </div>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الاسم</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">النوع</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الوصف</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">عدد العناصر</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاريخ الإنشاء</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <?php foreach ($categories as $category): ?>
                                            <tr class="hover:bg-gray-50">
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                                    <div class="flex items-center">
                                                        <?php if (!empty($category['image'])): ?>
                                                            <img src="<?php echo htmlspecialchars($category['image']); ?>" alt="<?php echo htmlspecialchars($category['name']); ?>" class="w-8 h-8 rounded-lg object-cover ml-3">
                                                        <?php endif; ?>
                                                        <?php echo htmlspecialchars($category['name']); ?>
                                                    </div>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                                        <?php echo $category['type'] == 'product' ? 'bg-green-100 text-green-800' : 'bg-purple-100 text-purple-800'; ?>">
                                                        <?php echo $category['type'] == 'product' ? 'منتج' : 'خدمة'; ?>
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 text-sm text-gray-900 max-w-xs truncate"><?php echo htmlspecialchars($category['description'] ?? ''); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                                        <?php echo $category['is_active'] ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'; ?>">
                                                        <?php echo $category['is_active'] ? 'نشط' : 'معطل'; ?>
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                        <?php echo $category['item_count']; ?> <?php echo $category['type'] == 'product' ? 'منتج' : 'خدمة'; ?>
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo date('Y-m-d', strtotime($category['created_at'])); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2 space-x-reverse">
                                                    <button onclick="editCategory(<?php echo $category['id']; ?>, '<?php echo htmlspecialchars(addslashes($category['name'])); ?>', '<?php echo htmlspecialchars(addslashes($category['description'] ?? '')); ?>', '<?php echo $category['type']; ?>')" class="text-yellow-600 hover:text-yellow-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-yellow-50 transition-colors">
                                                        <i class="fas fa-edit ml-1"></i>
                                                        تعديل
                                                    </button>
                                                    <button onclick="toggleCategoryStatus(<?php echo $category['id']; ?>, '<?php echo htmlspecialchars(addslashes($category['name'])); ?>', <?php echo $category['is_active'] ? 1 : 0; ?>)" class="text-blue-600 hover:text-blue-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-blue-50 transition-colors">
                                                        <i class="fas fa-<?php echo $category['is_active'] ? 'ban' : 'check'; ?> ml-1"></i>
                                                        <?php echo $category['is_active'] ? 'تعطيل' : 'تفعيل'; ?>
                                                    </button>
                                                    <?php if ($category['item_count'] == 0): ?>
                                                        <button onclick="deleteCategory(<?php echo $category['id']; ?>, '<?php echo htmlspecialchars(addslashes($category['name'])); ?>')" class="text-red-600 hover:text-red-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-red-50 transition-colors">
                                                            <i class="fas fa-trash ml-1"></i>
                                                            حذف
                                                        </button>
                                                    <?php else: ?>
                                                        <button disabled class="text-gray-400 inline-flex items-center px-2 py-1 rounded-md bg-gray-50 cursor-not-allowed">
                                                            <i class="fas fa-trash ml-1"></i>
                                                            يحتوي عناصر
                                                        </button>
                                                    <?php endif; ?>
                                                </td>
                                            </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    <?php else: ?>
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12">
                            <div class="text-center">
                                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                                </svg>
                                <h3 class="mt-2 text-sm font-medium text-gray-900">لا توجد فئات</h3>
                                <p class="mt-1 text-sm text-gray-500">لم يتم العثور على أي فئات في النظام.</p>
                                <div class="mt-6">
                                    <button onclick="showAddCategoryModal()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center">
                                        <i class="fas fa-plus ml-2"></i>
                                        إضافة فئة جديدة
                                    </button>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Beauty section removed - now handled by beauty.php -->

                <!-- Customer Management Section -->
                <div id="customers" class="section">
                    <div class="mb-6">
                        <h2 class="text-2xl font-semibold text-gray-900 mb-2">إدارة العملاء</h2>
                        <p class="text-gray-600">إدارة بيانات العملاء ومعلومات الاتصال</p>
                    </div>

                    <?php if (!empty($users)): ?>
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                            <div class="px-6 py-4 border-b border-gray-200">
                                <h3 class="text-lg font-medium text-gray-900">قائمة العملاء</h3>
                            </div>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الاسم</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الهاتف</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">البريد الإلكتروني</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">إجمالي الطلبات</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">إجمالي المشتريات</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <?php foreach ($users as $user): ?>
                                            <?php
                                            // Get customer order stats
                                            $customer_orders = array_filter($all_orders, function($order) use ($user) {
                                                return $order['customer_phone'] === $user['phone'];
                                            });
                                            $total_customer_orders = count($customer_orders);
                                            $total_customer_spent = array_reduce($customer_orders, function($total, $order) {
                                                return $total + $order['total_amount'];
                                            }, 0);
                                            ?>
                                            <tr class="hover:bg-gray-50">
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"><?php echo htmlspecialchars($user['name']); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo htmlspecialchars($user['phone']); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo htmlspecialchars($user['email'] ?? 'غير محدد'); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><?php echo $total_customer_orders; ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">EGP <?php echo number_format($total_customer_spent, 0, ',', ','); ?></td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2 space-x-reverse">
                                                    <button onclick="viewCustomerDetails(<?php echo $user['id']; ?>)" class="text-green-600 hover:text-green-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-green-50 transition-colors">
                                                        <i class="fas fa-eye ml-1"></i>
                                                        عرض التفاصيل
                                                    </button>
                                                    <button onclick="contactCustomer('<?php echo htmlspecialchars(addslashes($user['phone'])); ?>')" class="text-blue-600 hover:text-blue-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-blue-50 transition-colors">
                                                        <i class="fas fa-phone ml-1"></i>
                                                        اتصال
                                                    </button>
                                                </td>
                                            </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    <?php else: ?>
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12">
                            <div class="text-center">
                                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                                </svg>
                                <h3 class="mt-2 text-sm font-medium text-gray-900">لا يوجد عملاء</h3>
                                <p class="mt-1 text-sm text-gray-500">لم يتم العثور على أي عملاء في النظام.</p>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Settings Section -->
                <div id="settings" class="section">
                    <div class="mb-6">
                        <h2 class="text-2xl font-semibold text-gray-900 mb-2">الإعدادات</h2>
                        <p class="text-gray-600">إدارة إعدادات النظام والتكوينات العامة</p>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <!-- General Settings -->
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                            <div class="px-6 py-4 border-b border-gray-200">
                                <h3 class="text-lg font-medium text-gray-900">الإعدادات العامة</h3>
                            </div>
                            <div class="p-6 space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">اسم المتجر</label>
                                    <input type="text" value="Roz Skin" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">البريد الإلكتروني</label>
                                    <input type="email" value="info@rozskin.com" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">رقم الهاتف</label>
                                    <input type="tel" value="+20 123 456 7890" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">العملة</label>
                                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                        <option value="EGP" selected>جنيه مصري (EGP)</option>
                                        <option value="USD">دولار أمريكي (USD)</option>
                                        <option value="EUR">يورو (EUR)</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- System Toggles -->
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                            <div class="px-6 py-4 border-b border-gray-200">
                                <h3 class="text-lg font-medium text-gray-900">إعدادات النظام</h3>
                            </div>
                            <div class="p-6 space-y-4">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <label class="text-sm font-medium text-gray-700">تفعيل المتجر</label>
                                        <p class="text-xs text-gray-500">إظهار/إخفاء المتجر للعملاء</p>
                                    </div>
                                    <label class="inline-flex items-center cursor-pointer">
                                        <input type="checkbox" checked class="sr-only peer">
                                        <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
                                    </label>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <label class="text-sm font-medium text-gray-700">تفعيل البيوتي سنتر</label>
                                        <p class="text-xs text-gray-500">إظهار/إخفاء خدمات البيوتي سنتر</p>
                                    </div>
                                    <label class="inline-flex items-center cursor-pointer">
                                        <input type="checkbox" checked class="sr-only peer">
                                        <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                                    </label>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <label class="text-sm font-medium text-gray-700">السماح بالتسجيل</label>
                                        <p class="text-xs text-gray-500">السماح للعملاء بالتسجيل الجديد</p>
                                    </div>
                                    <label class="inline-flex items-center cursor-pointer">
                                        <input type="checkbox" checked class="sr-only peer">
                                        <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                                    </label>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <label class="text-sm font-medium text-gray-700">إشعارات الطلبات</label>
                                        <p class="text-xs text-gray-500">إرسال إشعارات للطلبات الجديدة</p>
                                    </div>
                                    <label class="inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer">
                                        <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-orange-600"></div>
                                    </label>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <label class="text-sm font-medium text-gray-700">وضع الصيانة</label>
                                        <p class="text-xs text-gray-500">تفعيل وضع الصيانة للموقع</p>
                                    </div>
                                    <label class="inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer">
                                        <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Configuration Options -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mt-6">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-medium text-gray-900">تكوينات إضافية</h3>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">حد الشحن المجاني</label>
                                    <input type="number" value="500" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">عمولة الدفع</label>
                                    <input type="number" step="0.01" value="2.5" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">الحد الأدنى للطلب</label>
                                    <input type="number" value="50" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">الضريبة (%)</label>
                                    <input type="number" step="0.01" value="14" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6 flex justify-end">
                        <button onclick="saveSettings()" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center">
                            <i class="fas fa-save ml-2"></i>
                            حفظ الإعدادات
                        </button>
                    </div>
                </div>

                <!-- Identity and Design Management Section -->
                <div id="identity" class="section">
                    <div class="mb-6">
                        <h2 class="text-2xl font-semibold text-gray-900 mb-2">إدارة الهوية والتصميم</h2>
                        <p class="text-gray-600">إدارة شعار المتجر، الألوان، والعناصر البصرية</p>
                    </div>

                    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
                        <!-- Logo Management -->
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                            <div class="px-6 py-4 border-b border-gray-200">
                                <h3 class="text-lg font-medium text-gray-900">إدارة الشعار</h3>
                            </div>
                            <div class="p-6">
                                <div class="text-center mb-6">
                                    <div class="w-32 h-32 mx-auto bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                                        <i class="fas fa-image text-purple-400 text-4xl"></i>
                                    </div>
                                    <p class="text-sm text-gray-500 mb-4">الشعار الحالي: Roz Skin</p>
                                </div>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">نص الشعار</label>
                                        <input type="text" value="Roz Skin" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">رفع شعار جديد</label>
                                        <input type="file" accept="image/*" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                    </div>
                                    <div class="flex space-x-2 space-x-reverse">
                                        <button onclick="previewLogo()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center">
                                            <i class="fas fa-eye ml-2"></i>
                                            معاينة
                                        </button>
                                        <button onclick="updateLogo()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center">
                                            <i class="fas fa-save ml-2"></i>
                                            تحديث الشعار
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Brand Color Management -->
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                            <div class="px-6 py-4 border-b border-gray-200">
                                <h3 class="text-lg font-medium text-gray-900">إدارة ألوان الهوية البصرية</h3>
                            </div>
                            <div class="p-6">
                                <div class="mb-4 p-4 bg-pink-50 border border-pink-200 rounded-lg">
                                    <div class="flex items-center">
                                        <i class="fas fa-info-circle text-pink-500 ml-2"></i>
                                        <p class="text-sm text-pink-700">تغيير الألوان سيؤثر على جميع صفحات الموقع. تأكد من اختيار ألوان متناسقة.</p>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <!-- Primary Colors -->
                                    <div class="space-y-4">
                                        <h4 class="font-medium text-gray-900 border-b border-gray-200 pb-2">الألوان الأساسية</h4>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">اللون الأساسي</label>
                                            <div class="flex items-center space-x-2 space-x-reverse">
                                                <input type="color" id="primary_color" value="#ec4899" class="w-12 h-10 border border-gray-300 rounded cursor-pointer">
                                                <input type="text" id="primary_color_text" value="#ec4899" class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500">
                                            </div>
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">اللون الثانوي</label>
                                            <div class="flex items-center space-x-2 space-x-reverse">
                                                <input type="color" id="secondary_color" value="#f472b6" class="w-12 h-10 border border-gray-300 rounded cursor-pointer">
                                                <input type="text" id="secondary_color_text" value="#f472b6" class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500">
                                            </div>
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">لون التمييز</label>
                                            <div class="flex items-center space-x-2 space-x-reverse">
                                                <input type="color" id="accent_color" value="#06b6d4" class="w-12 h-10 border border-gray-300 rounded cursor-pointer">
                                                <input type="text" id="accent_color_text" value="#06b6d4" class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-500">
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Status Colors -->
                                    <div class="space-y-4">
                                        <h4 class="font-medium text-gray-900 border-b border-gray-200 pb-2">ألوان الحالة</h4>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">لون النجاح</label>
                                            <div class="flex items-center space-x-2 space-x-reverse">
                                                <input type="color" id="success_color" value="#10b981" class="w-12 h-10 border border-gray-300 rounded cursor-pointer">
                                                <input type="text" id="success_color_text" value="#10b981" class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                                            </div>
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">لون التحذير</label>
                                            <div class="flex items-center space-x-2 space-x-reverse">
                                                <input type="color" id="warning_color" value="#f59e0b" class="w-12 h-10 border border-gray-300 rounded cursor-pointer">
                                                <input type="text" id="warning_color_text" value="#f59e0b" class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500">
                                            </div>
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">لون الخطر</label>
                                            <div class="flex items-center space-x-2 space-x-reverse">
                                                <input type="color" id="danger_color" value="#ef4444" class="w-12 h-10 border border-gray-300 rounded cursor-pointer">
                                                <input type="text" id="danger_color_text" value="#ef4444" class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Color Preview -->
                                <div class="mt-6 p-4 bg-gray-50 rounded-lg">
                                    <h4 class="font-medium text-gray-900 mb-3">معاينة الألوان</h4>
                                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                        <div class="text-center">
                                            <div id="preview-primary" class="w-full h-12 rounded-md mb-2" style="background-color: #ec4899"></div>
                                            <span class="text-xs text-gray-600">أساسي</span>
                                        </div>
                                        <div class="text-center">
                                            <div id="preview-secondary" class="w-full h-12 rounded-md mb-2" style="background-color: #f472b6"></div>
                                            <span class="text-xs text-gray-600">ثانوي</span>
                                        </div>
                                        <div class="text-center">
                                            <div id="preview-accent" class="w-full h-12 rounded-md mb-2" style="background-color: #06b6d4"></div>
                                            <span class="text-xs text-gray-600">تمييز</span>
                                        </div>
                                        <div class="text-center">
                                            <div id="preview-success" class="w-full h-12 rounded-md mb-2" style="background-color: #10b981"></div>
                                            <span class="text-xs text-gray-600">نجاح</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-6 flex justify-end">
                                    <button onclick="saveBrandColors()" class="bg-pink-600 hover:bg-pink-700 text-white px-6 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center">
                                        <i class="fas fa-save ml-2"></i>
                                        حفظ ألوان الهوية
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Social Media Links -->
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 mt-6">
                            <div class="px-6 py-4 border-b border-gray-200">
                                <h3 class="text-lg font-medium text-gray-900">روابط وسائل التواصل الاجتماعي</h3>
                            </div>
                            <div class="p-6">
                                <div class="space-y-4">
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">رابط واتساب</label>
                                            <input type="url" id="whatsapp_link" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="https://wa.me/201234567890" value="<?php echo htmlspecialchars($user_model->getSetting('whatsapp_link') ?? ''); ?>">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">رابط فيسبوك</label>
                                            <input type="url" id="facebook_link" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="https://facebook.com/yourpage" value="<?php echo htmlspecialchars($user_model->getSetting('facebook_link') ?? ''); ?>">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">رابط انستغرام</label>
                                            <input type="url" id="instagram_link" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="https://instagram.com/yourpage" value="<?php echo htmlspecialchars($user_model->getSetting('instagram_link') ?? ''); ?>">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">رابط ثريدز</label>
                                            <input type="url" id="threads_link" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-transparent" placeholder="https://threads.net/yourpage" value="<?php echo htmlspecialchars($user_model->getSetting('threads_link') ?? ''); ?>">
                                        </div>
                                    </div>
                                    <div class="flex justify-end">
                                        <button onclick="saveSocialMedia()" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center">
                                            <i class="fas fa-save ml-2"></i>
                                            حفظ الروابط
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    <!-- Design Elements -->
                    <!-- Cover Images Management -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mt-6">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-medium text-gray-900">إدارة صور الغلاف</h3>
                        </div>
                        <div class="p-6">
                            <div class="mb-6">
                                <h4 class="text-md font-medium text-gray-900 mb-4">إضافة صورة غلاف جديدة</h4>
                                <form method="POST" enctype="multipart/form-data" class="space-y-4">
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">عنوان الصورة</label>
                                            <input type="text" name="cover_title" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="مثال: غلاف المتجر الرئيسي">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">النوع</label>
                                            <select name="cover_type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
                                                <option value="home">الصفحة الرئيسية</option>
                                                <option value="store">متجر</option>
                                                <option value="beauty">البيوتي سنتر</option>
                                                <option value="identity">الهوية والتصميم</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">وصف الصورة</label>
                                        <textarea name="cover_description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="وصف مختصر للصورة..."></textarea>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">رفع الصورة</label>
                                        <input type="file" name="cover_image" accept="image/*" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-purple-50 file:text-purple-700 hover:file:bg-purple-100">
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" name="is_active" checked class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                        <label class="mr-2 block text-sm text-gray-900">تفعيل هذه الصورة</label>
                                    </div>
                                    <button type="submit" name="add_cover" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center">
                                        <i class="fas fa-plus ml-2"></i>
                                        إضافة الصورة
                                    </button>
                                </form>
                            </div>

                            <div class="border-t pt-6">
                                <h4 class="text-md font-medium text-gray-900 mb-4">صور الغلاف الموجودة</h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                    <!-- Cover Image Card Example -->
                                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                                        <div class="aspect-w-16 aspect-h-9">
                                            <img src="uploads/covers/sample_cover.jpg" alt="غلاف المتجر" class="w-full h-48 object-cover">
                                        </div>
                                        <div class="p-4">
                                            <h5 class="font-medium text-gray-900">غلاف المتجر الرئيسي</h5>
                                            <p class="text-sm text-gray-600 mt-1">صورة تعريفية للمتجر...</p>
                                            <div class="flex justify-between items-center mt-3">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">نشط</span>
                                                <div class="flex space-x-2 space-x-reverse">
                                                    <button onclick="editCover(1)" class="text-yellow-600 hover:text-yellow-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-yellow-50 transition-colors">
                                                        <i class="fas fa-edit ml-1"></i>
                                                    </button>
                                                    <button onclick="deleteCover(1, 'غلاف المتجر')" class="text-red-600 hover:text-red-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-red-50 transition-colors">
                                                        <i class="fas fa-trash ml-1"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mt-6">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-medium text-gray-900">عناصر التصميم</h3>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                <!-- Fonts -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">الخط</label>
                                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                        <option value="Tajawal" selected>Tajawal (العربية)</option>
                                        <option value="Cairo">Cairo</option>
                                        <option value="Amiri">Amiri</option>
                                        <option value="Noto Sans Arabic">Noto Sans Arabic</option>
                                    </select>
                                </div>

                                <!-- Theme -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">الموضوع</label>
                                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                        <option value="light" selected>فاتح</option>
                                        <option value="dark">داكن</option>
                                        <option value="auto">تلقائي</option>
                                    </select>
                                </div>

                                <!-- Layout -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">تخطيط الصفحة</label>
                                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                        <option value="default" selected>افتراضي</option>
                                        <option value="boxed">محدود</option>
                                        <option value="wide">واسع</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Preview Section -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mt-6">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-medium text-gray-900">معاينة التصميم</h3>
                        </div>
                        <div class="p-6">
                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
                                <div class="space-y-4">
                                    <div class="flex justify-center space-x-4 space-x-reverse">
                                        <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center">
                                            <i class="fas fa-mobile-alt ml-2"></i>
                                            معاينة الموبايل
                                        </button>
                                        <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center">
                                            <i class="fas fa-desktop ml-2"></i>
                                            معاينة سطح المكتب
                                        </button>
                                    </div>
                                    <p class="text-gray-500 text-sm">اضغط على أزرار المعاينة لرؤية كيف سيبدو التصميم الجديد</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6 flex justify-end space-x-2 space-x-reverse">
                        <button onclick="resetDesign()" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center">
                            <i class="fas fa-undo ml-2"></i>
                            استعادة الافتراضي
                        </button>
                        <button onclick="saveDesign()" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center">
                        <i class="fas fa-save ml-2"></i>
                        حفظ التصميم
                    </button>
                </div>
            </div>

            <!-- Marketing Management Section -->
            <div id="marketing" class="section">
                <div class="mb-6">
                    <div class="flex justify-between items-center">
                        <div>
                            <h2 class="text-2xl font-semibold text-gray-900 mb-2">إدارة التسويق</h2>
                            <p class="text-gray-600">إدارة الحملات التسويقية وتكامل API الخارجي</p>
                        </div>
                        <button onclick="createCampaign()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center">
                            <i class="fas fa-plus ml-2"></i>
                            حملة تسويقية جديدة
                        </button>
                    </div>
                </div>

                <!-- Marketing Stats -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                    <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow-lg border border-blue-200 p-6 text-white transform hover:scale-105 transition-all duration-300">
                        <div class="flex items-center">
                            <div class="p-3 bg-white bg-opacity-20 rounded-xl backdrop-blur-sm">
                                <i class="fas fa-eye text-2xl"></i>
                            </div>
                            <div class="mr-4">
                                <p class="text-sm font-medium opacity-90">مشاهدات الحملات</p>
                                <p class="text-3xl font-bold">12.5K</p>
                                <p class="text-xs opacity-75 mt-1">+15% هذا الشهر</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-gradient-to-r from-green-500 to-green-600 rounded-lg shadow-lg border border-green-200 p-6 text-white transform hover:scale-105 transition-all duration-300">
                        <div class="flex items-center">
                            <div class="p-3 bg-white bg-opacity-20 rounded-xl backdrop-blur-sm">
                                <i class="fas fa-mouse-pointer text-2xl"></i>
                            </div>
                            <div class="mr-4">
                                <p class="text-sm font-medium opacity-90">نقرات</p>
                                <p class="text-3xl font-bold">2.8K</p>
                                <p class="text-xs opacity-75 mt-1">+8% هذا الشهر</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-lg shadow-lg border border-yellow-200 p-6 text-white transform hover:scale-105 transition-all duration-300">
                        <div class="flex items-center">
                            <div class="p-3 bg-white bg-opacity-20 rounded-xl backdrop-blur-sm">
                                <i class="fas fa-shopping-cart text-2xl"></i>
                            </div>
                            <div class="mr-4">
                                <p class="text-sm font-medium opacity-90">تحويلات</p>
                                <p class="text-3xl font-bold">425</p>
                                <p class="text-xs opacity-75 mt-1">+22% هذا الشهر</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg shadow-lg border border-purple-200 p-6 text-white transform hover:scale-105 transition-all duration-300">
                        <div class="flex items-center">
                            <div class="p-3 bg-white bg-opacity-20 rounded-xl backdrop-blur-sm">
                                <i class="fas fa-dollar-sign text-2xl"></i>
                            </div>
                            <div class="mr-4">
                                <p class="text-sm font-medium opacity-90">عائد الاستثمار</p>
                                <p class="text-3xl font-bold">340%</p>
                                <p class="text-xs opacity-75 mt-1">متوسط الشهر</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- API Integration -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-medium text-gray-900">تكامل API التسويقي</h3>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <!-- Facebook Ads -->
                            <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                                <div class="flex items-center justify-between mb-4">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold">
                                            <i class="fab fa-facebook-f"></i>
                                        </div>
                                        <div class="mr-3">
                                            <h4 class="font-semibold text-gray-900">Facebook Ads</h4>
                                            <p class="text-sm text-gray-500">فيسبوك إعلانات</p>
                                        </div>
                                    </div>
                                    <label class="inline-flex items-center cursor-pointer">
                                        <input type="checkbox" checked class="sr-only peer">
                                        <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                                    </label>
                                </div>
                                <div class="space-y-2">
                                    <input type="text" placeholder="App ID" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    <input type="password" placeholder="Access Token" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    <button onclick="testFacebookAPI()" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-150">
                                        اختبار الاتصال
                                    </button>
                                </div>
                            </div>

                            <!-- Google Ads -->
                            <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                                <div class="flex items-center justify-between mb-4">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 bg-red-600 rounded-lg flex items-center justify-center text-white font-bold">
                                            <i class="fab fa-google"></i>
                                        </div>
                                        <div class="mr-3">
                                            <h4 class="font-semibold text-gray-900">Google Ads</h4>
                                            <p class="text-sm text-gray-500">جوجل إعلانات</p>
                                        </div>
                                    </div>
                                    <label class="inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer">
                                        <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-red-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div>
                                    </label>
                                </div>
                                <div class="space-y-2">
                                    <input type="text" placeholder="Customer ID" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent">
                                    <input type="password" placeholder="API Key" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent">
                                    <button onclick="testGoogleAPI()" class="w-full bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-150">
                                        اختبار الاتصال
                                    </button>
                                </div>
                            </div>

                            <!-- Instagram -->
                            <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                                <div class="flex items-center justify-between mb-4">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center text-white font-bold">
                                            <i class="fab fa-instagram"></i>
                                        </div>
                                        <div class="mr-3">
                                            <h4 class="font-semibold text-gray-900">Instagram</h4>
                                            <p class="text-sm text-gray-500">انستغرام بيزنس</p>
                                        </div>
                                    </div>
                                    <label class="inline-flex items-center cursor-pointer">
                                        <input type="checkbox" checked class="sr-only peer">
                                        <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-pink-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gradient-to-r peer-checked:from-purple-500 peer-checked:to-pink-500"></div>
                                    </label>
                                </div>
                                <div class="space-y-2">
                                    <input type="text" placeholder="Business Account ID" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent">
                                    <input type="password" placeholder="Access Token" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent">
                                    <button onclick="testInstagramAPI()" class="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-150">
                                        اختبار الاتصال
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Campaigns Table -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-medium text-gray-900">الحملات التسويقية</h3>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم الحملة</th>
                                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المنصة</th>
                                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الميزانية</th>
                                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
                                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">النتائج</th>
                                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">حملة منتجات الشتاء</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center space-x-2 space-x-reverse">
                                            <i class="fab fa-facebook text-blue-600"></i>
                                            <span class="text-sm text-gray-900">Facebook</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">EGP 2,500</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">نشطة</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.2K نقرة</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2 space-x-reverse">
                                        <button onclick="editCampaign('winter_products')" class="text-yellow-600 hover:text-yellow-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-yellow-50 transition-colors">
                                            <i class="fas fa-edit ml-1"></i>
                                            تعديل
                                        </button>
                                        <button onclick="pauseCampaign('winter_products')" class="text-orange-600 hover:text-orange-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-orange-50 transition-colors">
                                            <i class="fas fa-pause ml-1"></i>
                                            إيقاف مؤقت
                                        </button>
                                    </td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">عرض العناية بالبشرة</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center space-x-2 space-x-reverse">
                                            <i class="fab fa-instagram text-pink-600"></i>
                                            <span class="text-sm text-gray-900">Instagram</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">EGP 1,800</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">نشطة</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">856 نقرة</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2 space-x-reverse">
                                        <button onclick="editCampaign('skin_care')" class="text-yellow-600 hover:text-yellow-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-yellow-50 transition-colors">
                                            <i class="fas fa-edit ml-1"></i>
                                            تعديل
                                        </button>
                                        <button onclick="pauseCampaign('skin_care')" class="text-orange-600 hover:text-orange-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-orange-50 transition-colors">
                                            <i class="fas fa-pause ml-1"></i>
                                            إيقاف مؤقت
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


            <!-- Reviews Management Section -->
            <div id="reviews" class="section">
                <div class="mb-6">
                    <h2 class="text-2xl font-semibold text-gray-900 mb-2">إدارة التقييمات</h2>
                    <p class="text-gray-600">إدارة وعرض جميع التقييمات والآراء المرسلة من العملاء</p>
                </div>

                <?php if (!empty($all_reviews)): ?>
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-medium text-gray-900">جميع التقييمات</h3>
                            <p class="text-sm text-gray-600 mt-1">إجمالي التقييمات: <?php echo $total_reviews; ?> | متوسط التقييم: <?php echo number_format($average_rating, 1); ?> نجوم</p>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العميل</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المنتج</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التقييم</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الرأي</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                <?php foreach ($all_reviews as $review): ?>
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"><?php echo htmlspecialchars($review['user_name']); ?></td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><?php echo htmlspecialchars($review['product_name']); ?></td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <?php for ($i = 1; $i <= 5; $i++): ?>
                                                    <span class="text-lg <?php echo $i <= $review['rating'] ? 'text-yellow-400' : 'text-gray-300'; ?>">★</span>
                                                <?php endfor; ?>
                                                <span class="ml-2 text-sm text-gray-600">(<?php echo $review['rating']; ?>/5)</span>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 text-sm text-gray-900 max-w-xs truncate"><?php echo htmlspecialchars($review['comment']); ?></td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center space-x-2 space-x-reverse">
                                                <?php if ($review['is_approved']): ?>
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">معتمد</span>
                                                <?php else: ?>
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">في الانتظار</span>
                                                <?php endif; ?>
                                                <?php if ($review['is_visible']): ?>
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">مرئي</span>
                                                <?php else: ?>
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">مخفي</span>
                                                <?php endif; ?>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo date('Y-m-d H:i', strtotime($review['created_at'])); ?></td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2 space-x-reverse">
                                            <?php if (!$review['is_approved']): ?>
                                                <button onclick="approveReview(<?php echo $review['id']; ?>, '<?php echo htmlspecialchars(addslashes($review['user_name'])); ?>')" class="text-green-600 hover:text-green-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-green-50 transition-colors">
                                                    <i class="fas fa-check ml-1"></i>
                                                    اعتماد
                                                </button>
                                            <?php endif; ?>
                                            <?php if ($review['is_visible']): ?>
                                                <button onclick="hideReview(<?php echo $review['id']; ?>, '<?php echo htmlspecialchars(addslashes($review['user_name'])); ?>')" class="text-orange-600 hover:text-orange-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-orange-50 transition-colors">
                                                    <i class="fas fa-eye-slash ml-1"></i>
                                                    إخفاء
                                                </button>
                                            <?php else: ?>
                                                <button onclick="showReview(<?php echo $review['id']; ?>, '<?php echo htmlspecialchars(addslashes($review['user_name'])); ?>')" class="text-blue-600 hover:text-blue-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-blue-50 transition-colors">
                                                    <i class="fas fa-eye ml-1"></i>
                                                    إظهار
                                                </button>
                                            <?php endif; ?>
                                            <button onclick="deleteReview(<?php echo $review['id']; ?>, '<?php echo htmlspecialchars(addslashes($review['user_name'])); ?>')" class="text-red-600 hover:text-red-700 inline-flex items-center px-2 py-1 rounded-md hover:bg-red-50 transition-colors">
                                                <i class="fas fa-trash ml-1"></i>
                                                حذف
                                            </button>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                <?php else: ?>
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12">
                        <div class="text-center">
                            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                            </svg>
                            <h3 class="mt-2 text-sm font-medium text-gray-900">لا توجد تقييمات</h3>
                            <p class="mt-1 text-sm text-gray-500">لم يتم العثور على أي تقييمات في النظام.</p>
                        </div>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Customer Service Section -->
            <div id="support" class="section">
                <div class="mb-6">
                    <h2 class="text-2xl font-semibold text-gray-900 mb-2">خدمة العملاء</h2>
                    <p class="text-gray-600">إدارة استفسارات العملاء ورسائل الدعم</p>
                </div>

                <!-- Support Stats -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                    <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow-lg border border-blue-200 p-6 text-white transform hover:scale-105 transition-all duration-300">
                        <div class="flex items-center">
                            <div class="p-3 bg-white bg-opacity-20 rounded-xl backdrop-blur-sm">
                                <i class="fas fa-envelope text-2xl"></i>
                            </div>
                            <div class="mr-4">
                                <p class="text-sm font-medium opacity-90">رسائل جديدة</p>
                                <p class="text-3xl font-bold">24</p>
                                <p class="text-xs opacity-75 mt-1">في انتظار الرد</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-gradient-to-r from-green-500 to-green-600 rounded-lg shadow-lg border border-green-200 p-6 text-white transform hover:scale-105 transition-all duration-300">
                        <div class="flex items-center">
                            <div class="p-3 bg-white bg-opacity-20 rounded-xl backdrop-blur-sm">
                                <i class="fas fa-check-circle text-2xl"></i>
                            </div>
                            <div class="mr-4">
                                <p class="text-sm font-medium opacity-90">تم حلها</p>
                                <p class="text-3xl font-bold">156</p>
                                <p class="text-xs opacity-75 mt-1">هذا الشهر</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-lg shadow-lg border border-yellow-200 p-6 text-white transform hover:scale-105 transition-all duration-300">
                        <div class="flex items-center">
                            <div class="p-3 bg-white bg-opacity-20 rounded-xl backdrop-blur-sm">
                                <i class="fas fa-clock text-2xl"></i>
                            </div>
                            <div class="mr-4">
                                <p class="text-sm font-medium opacity-90">متوسط وقت الرد</p>
                                <p class="text-3xl font-bold">2.4</p>
                                <p class="text-xs opacity-75 mt-1">ساعات</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg shadow-lg border border-purple-200 p-6 text-white transform hover:scale-105 transition-all duration-300">
                        <div class="flex items-center">
                            <div class="p-3 bg-white bg-opacity-20 rounded-xl backdrop-blur-sm">
                                <i class="fas fa-star text-2xl"></i>
                            </div>
                            <div class="mr-4">
                                <p class="text-sm font-medium opacity-90">رضا العملاء</p>
                                <p class="text-3xl font-bold">4.8</p>
                                <p class="text-xs opacity-75 mt-1">درجة متوسطة</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Support Channels -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                    <!-- Quick Responses -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-medium text-gray-900">الردود السريعة</h3>
                        </div>
                        <div class="p-6">
                            <div class="space-y-3">
                                <button onclick="sendQuickResponse('thank_you')" class="w-full text-right bg-gray-50 hover:bg-gray-100 p-3 rounded-md transition-colors duration-150">
                                    <p class="text-sm font-medium text-gray-900">شكراً لتواصلك معنا</p>
                                    <p class="text-xs text-gray-500 mt-1">نقدر ثقتك بنا ونتطلع لخدمتك</p>
                                </button>
                                <button onclick="sendQuickResponse('order_status')" class="w-full text-right bg-gray-50 hover:bg-gray-100 p-3 rounded-md transition-colors duration-150">
                                    <p class="text-sm font-medium text-gray-900">حالة الطلب</p>
                                    <p class="text-xs text-gray-500 mt-1">طلبك قيد المعالجة وسيتم شحنه قريباً</p>
                                </button>
                                <button onclick="sendQuickResponse('shipping_info')" class="w-full text-right bg-gray-50 hover:bg-gray-100 p-3 rounded-md transition-colors duration-150">
                                    <p class="text-sm font-medium text-gray-900">معلومات الشحن</p>
                                    <p class="text-xs text-gray-500 mt-1">سيصل طلبك خلال 3-5 أيام عمل</p>
                                </button>
                                <button onclick="sendQuickResponse('refund_policy')" class="w-full text-right bg-gray-50 hover:bg-gray-100 p-3 rounded-md transition-colors duration-150">
                                    <p class="text-sm font-medium text-gray-900">سياسة الاسترداد</p>
                                    <p class="text-xs text-gray-500 mt-1">يمكنك إرجاع المنتج خلال 14 يوماً</p>
                                </button>
                            </div>
                            <button onclick="addQuickResponse()" class="w-full mt-4 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center justify-center">
                                <i class="fas fa-plus ml-2"></i>
                                إضافة رد سريع جديد
                            </button>
                        </div>
                    </div>

                    <!-- Support Tickets -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-medium text-gray-900">تذاكر الدعم</h3>
                        </div>
                        <div class="divide-y divide-gray-200 max-h-80 overflow-y-auto">
                            <div class="p-4 hover:bg-gray-50 cursor-pointer">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-exclamation-triangle text-red-600 text-xs"></i>
                                        </div>
                                        <div class="mr-3">
                                            <p class="text-sm font-medium text-gray-900">مشكلة في الطلب #12345</p>
                                            <p class="text-xs text-gray-500">أحمد محمد - منذ 2 ساعات</p>
                                        </div>
                                    </div>
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">عاجل</span>
                                </div>
                            </div>
                            <div class="p-4 hover:bg-gray-50 cursor-pointer">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-question-circle text-yellow-600 text-xs"></i>
                                        </div>
                                        <div class="mr-3">
                                            <p class="text-sm font-medium text-gray-900">استفسار عن الشحن</p>
                                            <p class="text-xs text-gray-500">فاطمة علي - منذ 4 ساعات</p>
                                        </div>
                                    </div>
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">عادي</span>
                                </div>
                            </div>
                            <div class="p-4 hover:bg-gray-50 cursor-pointer">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-check-circle text-green-600 text-xs"></i>
                                        </div>
                                        <div class="mr-3">
                                            <p class="text-sm font-medium text-gray-900">شكوى تم حلها</p>
                                            <p class="text-xs text-gray-500">محمد أحمد - منذ يوم</p>
                                        </div>
                                    </div>
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">مغلق</span>
                                </div>
                            </div>
                        </div>
                        <div class="p-4 border-t border-gray-200">
                            <button onclick="viewAllTickets()" class="w-full bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-150 inline-flex items-center justify-center">
                                <i class="fas fa-list ml-2"></i>
                                عرض جميع التذاكر
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Communication Channels -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-medium text-gray-900">قنوات التواصل</h3>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <button onclick="openWhatsApp()" class="flex items-center justify-center p-4 bg-green-50 hover:bg-green-100 rounded-lg transition-colors duration-150">
                                <div class="text-center">
                                    <i class="fab fa-whatsapp text-2xl text-green-600 mb-2"></i>
                                    <p class="text-sm font-medium text-gray-900">واتساب</p>
                                    <p class="text-xs text-gray-500">3 رسائل جديدة</p>
                                </div>
                            </button>
                            <button onclick="openMessenger()" class="flex items-center justify-center p-4 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors duration-150">
                                <div class="text-center">
                                    <i class="fab fa-facebook-messenger text-2xl text-blue-600 mb-2"></i>
                                    <p class="text-sm font-medium text-gray-900">ماسنجر</p>
                                    <p class="text-xs text-gray-500">12 رسالة جديدة</p>
                                </div>
                            </button>
                            <button onclick="openEmail()" class="flex items-center justify-center p-4 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors duration-150">
                                <div class="text-center">
                                    <i class="fas fa-envelope text-2xl text-gray-600 mb-2"></i>
                                    <p class="text-sm font-medium text-gray-900">البريد الإلكتروني</p>
                                    <p class="text-xs text-gray-500">8 رسائل جديدة</p>
                                </div>
                            </button>
                            <button onclick="openPhone()" class="flex items-center justify-center p-4 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors duration-150">
                                <div class="text-center">
                                    <i class="fas fa-phone text-2xl text-purple-600 mb-2"></i>
                                    <p class="text-sm font-medium text-gray-900">الهاتف</p>
                                    <p class="text-xs text-gray-500">مكالمة واحدة</p>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- End of p-6 wrapper -->
    </div> <!-- End of flex-1 Main Content Area -->
</div> <!-- End of flex container -->

    <script>
        // Sidebar toggle functionality
        let sidebarCollapsed = false;

        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.querySelector('.flex-1');
            const toggleBtn = document.getElementById('sidebarToggle');
            const toggleIcon = toggleBtn.querySelector('svg');

            if (sidebarCollapsed) {
                // Expand sidebar
                sidebar.classList.remove('w-16');
                sidebar.classList.add('w-72');
                mainContent.classList.remove('ml-16');
                toggleIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
                sidebarCollapsed = false;

                // Show all text content with animation
                document.querySelectorAll('.sidebar-text').forEach(el => {
                    el.classList.remove('hidden');
                    el.style.opacity = '0';
                    el.style.transform = 'translateX(-20px)';
                    setTimeout(() => {
                        el.style.opacity = '1';
                        el.style.transform = 'translateX(0)';
                    }, 100);
                });
                document.querySelectorAll('.sidebar-logo-text').forEach(el => {
                    el.classList.remove('hidden');
                    el.style.opacity = '0';
                    el.style.transform = 'translateX(-20px)';
                    setTimeout(() => {
                        el.style.opacity = '1';
                        el.style.transform = 'translateX(0)';
                    }, 100);
                });

                // Show section headers with staggered animation
                document.querySelectorAll('h4.text-xs').forEach((header, index) => {
                    header.style.opacity = '0';
                    header.style.transform = 'translateX(-20px)';
                    setTimeout(() => {
                        header.style.opacity = '1';
                        header.style.transform = 'translateX(0)';
                    }, 100 + (index * 50));
                });
            } else {
                // Collapse sidebar
                sidebar.classList.remove('w-72');
                sidebar.classList.add('w-16');
                mainContent.classList.add('ml-16');
                toggleIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>';
                sidebarCollapsed = true;

                // Hide text content with animation
                document.querySelectorAll('.sidebar-text').forEach(el => {
                    el.style.opacity = '0';
                    el.style.transform = 'translateX(-20px)';
                    setTimeout(() => {
                        el.classList.add('hidden');
                    }, 150);
                });
                document.querySelectorAll('.sidebar-logo-text').forEach(el => {
                    el.style.opacity = '0';
                    el.style.transform = 'translateX(-20px)';
                    setTimeout(() => {
                        el.classList.add('hidden');
                    }, 150);
                });

                // Hide section headers
                document.querySelectorAll('h4.text-xs').forEach(header => {
                    header.style.opacity = '0';
                    header.style.transform = 'translateX(-20px)';
                });
            }
        }

        // Welcome screen functionality
        function hideWelcomeScreen() {
            const welcomeScreen = document.getElementById('welcome-screen');
            welcomeScreen.classList.add('fade-out');
            setTimeout(() => {
                welcomeScreen.style.display = 'none';
            }, 500);
        }

        // Show welcome screen on page load
        document.addEventListener('DOMContentLoaded', () => {
            const welcomeScreen = document.getElementById('welcome-screen');
            welcomeScreen.style.display = 'flex';
            setTimeout(() => {
                welcomeScreen.classList.add('show');
            }, 100);

            // Hide welcome screen after 3 seconds
            setTimeout(() => {
                hideWelcomeScreen();
            }, 3000);

            // Initialize admin panel
            const menuLinks = document.querySelectorAll('.menu-link');
            const sections = document.querySelectorAll('.section');
            const sidebarToggle = document.getElementById('sidebarToggle');

            // Add toggle functionality
            sidebarToggle.addEventListener('click', toggleSidebar);

            // OLD CODE - DISABLED (using external admin-navigation.js instead)
            /*
            menuLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    const sectionId = this.getAttribute('data-section');

                    // Only prevent default for internal sections, allow external links
                    if (!sectionId) {
                        return; // Allow default behavior for external links
                    }

                    e.preventDefault();

                    // إذا كنت تضغط على القسم النشط بالفعل
                    if (this.classList.contains('bg-gradient-to-r')) {
                        console.log(`Section ${sectionId} already active.`);
                        return;
                    }

                    // إزالة الفئة النشطة من جميع الروابط والأقسام
                    menuLinks.forEach(l => {
                        // إزالة تنسيق الرابط النشط
                        l.classList.remove('bg-gradient-to-r', 'from-purple-600', 'to-purple-700', 'text-white', 'shadow-lg', 'transform', 'scale-105');
                        l.classList.add('text-gray-700', 'hover:bg-white', 'hover:shadow-md');

                        // إعادة تعيين لون الأيقونة
                        const iconDiv = l.querySelector('div');
                        if (iconDiv && iconDiv.classList.contains('bg-white')) {
                            iconDiv.classList.remove('bg-white', 'bg-opacity-20');
                            // حفظ الفئة الأصلية (للتشغيل السليم عند العودة من التفعيل)
                            const iconDefaultClasses = iconDiv.className.match(/bg-(\w+)-(100|200)/);
                            if (iconDefaultClasses) {
                                this.dataset.iconClass = iconDefaultClasses[0];
                            }
                            // إعادة تعيين الألوان الافتراضية
                            if (sectionId === 'dashboard' && iconDiv.classList.contains('bg-blue-100')) {
                                // للأيقونات الأخرى، سنحتاج إلى إعادة تعيينها حسب القسم
                            }
                        }
                    });

                    // إزالة العرض النشط من جميع الأقسام (باستخدام الفئة)
                    sections.forEach(s => {
                        s.classList.remove('active');
                        // تأكد من إخفاء قسم beauty-bookings إذا كان مرئياً
                        if (s.id === 'beauty-bookings') {
                             s.classList.remove('active');
                        }
                    });

                    // إضافة الفئة النشطة إلى الرابط والقسم المحدد
                    this.classList.remove('text-gray-700', 'hover:bg-white', 'hover:shadow-md');
                    this.classList.add('bg-gradient-to-r', 'from-purple-600', 'to-purple-700', 'text-white', 'shadow-lg', 'transform', 'scale-105');

                    // تغيير لون الأيقونة للرابط الجديد
                    const iconDiv = this.querySelector('div');
                    if (iconDiv) {
                        // حفظ الفئة الأصلية (للتشغيل السليم عند العودة من التفعيل)
                        const iconDefaultClasses = iconDiv.className.match(/bg-(\w+)-(100|200)/);
                        if (iconDefaultClasses) {
                            this.dataset.iconClass = iconDefaultClasses[0];
                        }
                        iconDiv.classList.add('bg-white', 'bg-opacity-20');
                        iconDiv.classList.remove('bg-blue-100', 'bg-green-100', 'bg-orange-100', 'bg-pink-100', 'bg-indigo-100', 'bg-teal-100', 'bg-red-100', 'bg-yellow-100', 'bg-cyan-100', 'bg-gray-100');
                    }

                    const targetSection = document.getElementById(sectionId);
                    if (targetSection) {
                        targetSection.classList.add('active');
                        console.log(`Switched to section: ${sectionId}`);
                    } else {
                        console.error(`Section with ID ${sectionId} not found.`);
                    }

                    // تحديث hash في العنوان
                    history.pushState(null, '', `#${sectionId}`);
                });
            });
            */
            // END OLD CODE

            // Handle initial load based on URL hash
            /*
            const hash = window.location.hash.substring(1) || 'dashboard';
            const initialLink = document.querySelector(`.menu-link[data-section="${hash}"]`);
            const initialSection = document.getElementById(hash);

            if (initialLink && initialSection) {
                // Ensure only the correct section/link is active on load
                menuLinks.forEach(l => {
                    l.classList.remove('bg-gradient-to-r', 'from-purple-600', 'to-purple-700', 'text-white', 'shadow-lg', 'transform', 'scale-105');
                    l.classList.add('text-gray-700', 'hover:bg-white', 'hover:shadow-md');
                    // Reset icon backgrounds
                    const iconDiv = l.querySelector('div');
                    if (iconDiv) {
                        iconDiv.classList.remove('bg-white', 'bg-opacity-20');
                        const iconClass = iconDiv.className.match(/bg-(\w+)-100/);
                        if (iconClass) {
                            iconDiv.classList.add(`bg-${iconClass[1]}-100`);
                        }
                    }
                });
                sections.forEach(s => {
                    s.classList.remove('active');
                    // تأكد من إخفاء قسم beauty-bookings إذا كان مرئياً
                    if (s.id === 'beauty-bookings') {
                         s.classList.remove('active');
                    }
                });

                initialLink.classList.remove('text-gray-700', 'hover:bg-white', 'hover:shadow-md');
                initialLink.classList.add('bg-gradient-to-r', 'from-purple-600', 'to-purple-700', 'text-white', 'shadow-lg', 'transform', 'scale-105');
                // Make icon background white with opacity
                const iconDiv = initialLink.querySelector('div');
                if (iconDiv) {
                    iconDiv.classList.remove('bg-blue-100', 'bg-green-100', 'bg-orange-100', 'bg-pink-100', 'bg-indigo-100', 'bg-teal-100', 'bg-red-100', 'bg-yellow-100', 'bg-cyan-100', 'bg-gray-100');
                    iconDiv.classList.add('bg-white', 'bg-opacity-20');
                }
                initialSection.classList.add('active');
            }
            */
        });


        // Product management functions
        function viewProduct(productId) {
            window.location.href = 'product.php?id=' + productId;
        }

        function deleteProduct(productId, productName) {
            Swal.fire({
                title: 'هل أنت متأكد؟',
                text: `سيتم حذف المنتج "${productName}" نهائياً!`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'نعم، احذف!',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.innerHTML = `
                        <input type="hidden" name="product_id" value="${productId}">
                        <input type="hidden" name="delete_product" value="1">
                    `;
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }

        function deleteUser(userId, userName) {
            Swal.fire({
                title: 'هل أنت متأكد؟',
                text: `سيتم حذف المستخدم "${userName}" نهائياً!`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'نعم، احذف!',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.innerHTML = `
                        <input type="hidden" name="user_id" value="${userId}">
                        <input type="hidden" name="delete_user" value="1">
                    `;
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }

        // Shipping management functions
        function showAddShippingModal() {
            Swal.fire({
                title: 'إضافة طريقة شحن جديدة',
                html: `
                    <div class="text-right">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">اسم طريقة الشحن</label>
                            <input type="text" id="shipping_name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="مثال: الشحن السريع">
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">الوصف</label>
                            <textarea id="shipping_description" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="وصف طريقة الشحن"></textarea>
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">السعر (جنيه مصري)</label>
                            <input type="number" id="shipping_price" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="0">
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">المدة المتوقعة</label>
                            <input type="text" id="shipping_duration" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="مثال: 1-2 أيام">
                        </div>
                    </div>
                `,
                showCancelButton: true,
                confirmButtonColor: '#7c3aed',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'إضافة',
                cancelButtonText: 'إلغاء',
                preConfirm: () => {
                    const name = document.getElementById('shipping_name').value;
                    const description = document.getElementById('shipping_description').value;
                    const price = document.getElementById('shipping_price').value;
                    const duration = document.getElementById('shipping_duration').value;

                    if (!name || !description || !price || !duration) {
                        Swal.showValidationMessage('يرجى ملء جميع الحقول');
                        return false;
                    }
                    return { name, description, price, duration };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        icon: 'success',
                        title: 'تم بنجاح!',
                        text: 'تم إضافة طريقة الشحن بنجاح',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            });
        }

        function editShippingMethod(method) {
            Swal.fire({
                title: 'تعديل طريقة الشحن',
                text: `تعديل طريقة الشحن: ${method}`,
                icon: 'info'
            });
        }

        function toggleShippingMethod(method) {
            Swal.fire({
                title: 'هل أنت متأكد؟',
                text: `هل تريد تعطيل طريقة الشحن: ${method}؟`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'نعم، تعطيل',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        icon: 'success',
                        title: 'تم التعطيل!',
                        text: 'تم تعطيل طريقة الشحن بنجاح',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            });
        }

        // Beauty center management functions
        function showBeautyBookings() {
            // إخفاء قسم الخدمات الرئيسي
            document.getElementById('beauty').classList.remove('active');

            // إظهار قسم الحجوزات
            const bookingsSection = document.getElementById('beauty-bookings');
            bookingsSection.classList.add('active');

            // تحديث URL للحجوزات
            history.pushState(null, '', '#beauty-bookings');
        }

        function showBeautyServices() {
            // إخفاء قسم الحجوزات
            document.getElementById('beauty-bookings').classList.remove('active');

            // إظهار قسم الخدمات الرئيسي
            const beautySection = document.getElementById('beauty');
            beautySection.classList.add('active');

            // تحديث URL للخدمات
            history.pushState(null, '', '#beauty');
        }

        function showAddServiceModal() {
            Swal.fire({
                title: 'إضافة خدمة جديدة',
                html: `
                    <form id="addServiceForm" method="POST" action="">
                        <div class="text-right">
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">اسم الخدمة</label>
                                <input type="text" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="مثال: قص الشعر" required>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">الوصف</label>
                                <textarea name="description" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="وصف الخدمة" required></textarea>
                            </div>
                            <div class="grid grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">السعر (جنيه مصري)</label>
                                    <input type="number" name="price" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="0" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">المدة (دقائق)</label>
                                    <input type="number" name="duration" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="60" required>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">الفئة</label>
                                    <select name="category" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                        <option value="skin_care">عناية بالبشرة</option>
                                        <option value="hair_care">عناية بالشعر</option>
                                        <option value="massage">مساج وتدليك</option>
                                        <option value="skin_treatment">علاجات البشرة</option>
                                        <option value="other">أخرى</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">كمية المخزون</label>
                                    <input type="number" name="stock_quantity" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="0" value="0">
                                </div>
                            </div>
                            <input type="hidden" name="add_beauty_service" value="1">
                        </div>
                    </form>
                `,
                showCancelButton: true,
                confirmButtonColor: '#7c3aed',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'إضافة الخدمة',
                cancelButtonText: 'إلغاء',
                preConfirm: () => {
                    const form = document.getElementById('addServiceForm');
                    const name = form.name.value;
                    const description = form.description.value;
                    const price = form.price.value;
                    const duration = form.duration.value;

                    if (!name || !description || !price || !duration) {
                        Swal.showValidationMessage('يرجى ملء جميع الحقول المطلوبة');
                        return false;
                    }

                    // Submit the form
                    form.submit();
                    return false; // Prevent Swal from closing
                }
            });
        }

        function editService(serviceId) {
            // Fetch service data first (simplified - in real implementation you'd fetch from server)
            Swal.fire({
                title: 'تعديل الخدمة',
                html: `
                    <form id="editServiceForm" method="POST" action="">
                        <div class="text-right">
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">اسم الخدمة</label>
                                <input type="text" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" value="قص الشعر" required>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">الوصف</label>
                                <textarea name="description" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" required>خدمة قص وتصفيف الشعر</textarea>
                            </div>
                            <div class="grid grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">السعر (جنيه مصري)</label>
                                    <input type="number" name="price" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" value="150" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">المدة (دقائق)</label>
                                    <input type="number" name="duration" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" value="60" required>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">الفئة</label>
                                    <select name="category" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                        <option value="skin_care">عناية بالبشرة</option>
                                        <option value="hair_care" selected>عناية بالشعر</option>
                                        <option value="massage">مساج وتدليك</option>
                                        <option value="skin_treatment">علاجات البشرة</option>
                                        <option value="other">أخرى</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">كمية المخزون</label>
                                    <input type="number" name="stock_quantity" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" value="10">
                                </div>
                            </div>
                            <input type="hidden" name="service_id" value="${serviceId}">
                            <input type="hidden" name="update_beauty_service" value="1">
                        </div>
                    </form>
                `,
                showCancelButton: true,
                confirmButtonColor: '#7c3aed',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'تحديث الخدمة',
                cancelButtonText: 'إلغاء',
                preConfirm: () => {
                    const form = document.getElementById('editServiceForm');
                    const name = form.name.value;
                    const description = form.description.value;
                    const price = form.price.value;
                    const duration = form.duration.value;

                    if (!name || !description || !price || !duration) {
                        Swal.showValidationMessage('يرجى ملء جميع الحقول المطلوبة');
                        return false;
                    }

                    // Submit the form
                    form.submit();
                    return false; // Prevent Swal from closing
                }
            });
        }

        function toggleService(serviceId) {
            Swal.fire({
                title: 'هل أنت متأكد؟',
                text: 'هل تريد تغيير حالة هذه الخدمة؟',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#7c3aed',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، غير الحالة',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.innerHTML = `
                        <input type="hidden" name="service_id" value="${serviceId}">
                        <input type="hidden" name="toggle_beauty_service" value="1">
                    `;
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }

        function deleteService(serviceId) {
            Swal.fire({
                title: 'هل أنت متأكد؟',
                text: 'سيتم حذف هذه الخدمة نهائياً ولا يمكن التراجع عن هذا الإجراء!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، احذف',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.innerHTML = `
                        <input type="hidden" name="service_id" value="${serviceId}">
                        <input type="hidden" name="delete_beauty_service" value="1">
                    `;
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }

        function updateBookingStatus(bookingId, status) {
            const statusText = {
                'pending': 'في الانتظار',
                'confirmed': 'مؤكد',
                'completed': 'مكتمل',
                'cancelled': 'ملغي'
            };

            Swal.fire({
                title: 'تحديث حالة الحجز',
                text: `هل تريد تغيير حالة الحجز إلى "${statusText[status]}"؟`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#7c3aed',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، حدث',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.innerHTML = `
                        <input type="hidden" name="booking_id" value="${bookingId}">
                        <input type="hidden" name="status" value="${status}">
                        <input type="hidden" name="update_beauty_booking_status" value="1">
                    `;
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }

        // Customer management functions
        function viewCustomerDetails(customerId) {
            Swal.fire({
                title: 'تفاصيل العميل',
                text: `عرض تفاصيل العميل رقم: ${customerId}`,
                icon: 'info'
            });
        }

        function contactCustomer(phone) {
            const message = `مرحباً، أريد التواصل معك بخصوص طلبك في متجر Roz Skin.`;
            const whatsappUrl = `https://wa.me/2${phone.replace(/\s/g, '')}?text=${encodeURIComponent(message)}`;
            window.open(whatsappUrl, '_blank');
        }

        // Settings functions
        function saveSettings() {
            Swal.fire({
                title: 'هل أنت متأكد؟',
                text: 'هل تريد حفظ الإعدادات الجديدة؟',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#7c3aed',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، حفظ',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        icon: 'success',
                        title: 'تم الحفظ!',
                        text: 'تم حفظ الإعدادات بنجاح',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            });
        }

        // Social Media functions
        function saveSocialMedia() {
            const whatsappLink = document.getElementById('whatsapp_link').value;
            const facebookLink = document.getElementById('facebook_link').value;
            const instagramLink = document.getElementById('instagram_link').value;
            const threadsLink = document.getElementById('threads_link').value;

            fetch('api/router.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    action: 'save_social_media',
                    whatsapp_link: whatsappLink,
                    facebook_link: facebookLink,
                    instagram_link: instagramLink,
                    threads_link: threadsLink
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'تم الحفظ!',
                        text: 'تم حفظ روابط وسائل التواصل الاجتماعي بنجاح',
                        timer: 2000,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'خطأ!',
                        text: data.message || 'حدث خطأ أثناء حفظ الروابط'
                    });
                }
            })
            .catch(error => {
                Swal.fire({
                    icon: 'error',
                    title: 'خطأ!',
                    text: 'حدث خطأ في الاتصال بالخادم'
                });
            });
        }

        // Identity and Design functions
        function previewLogo() {
            Swal.fire({
                title: 'معاينة الشعار',
                text: 'سيتم عرض معاينة الشعار الجديد',
                icon: 'info'
            });
        }

        function updateLogo() {
            Swal.fire({
                title: 'هل أنت متأكد؟',
                text: 'هل تريد تحديث الشعار؟',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#ec4899',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، تحديث',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        icon: 'success',
                        title: 'تم التحديث!',
                        text: 'تم تحديث الشعار بنجاح',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            });
        }

        // Brand Colors Management
        function saveBrandColors() {
            const colors = {
                primary_color: document.getElementById('primary_color').value,
                secondary_color: document.getElementById('secondary_color').value,
                accent_color: document.getElementById('accent_color').value,
                success_color: document.getElementById('success_color').value,
                warning_color: document.getElementById('warning_color').value,
                danger_color: document.getElementById('danger_color').value
            };

            Swal.fire({
                title: 'هل أنت متأكد؟',
                text: 'سيتم تحديث ألوان الهوية البصرية للموقع بالكامل. هل تريد المتابعة؟',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#ec4899',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، تحديث الألوان',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch('api/admin/brand-colors', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify(colors)
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'تم الحفظ!',
                                text: 'تم حفظ ألوان الهوية البصرية بنجاح',
                                timer: 2000,
                                showConfirmButton: false
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'خطأ!',
                                text: data.message || 'حدث خطأ أثناء حفظ الألوان'
                            });
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'خطأ!',
                            text: 'حدث خطأ في الاتصال بالخادم'
                        });
                    });
                }
            });
        }

        function saveDesign() {
            Swal.fire({
                title: 'هل أنت متأكد؟',
                text: 'هل تريد حفظ التغييرات على التصميم؟',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#7c3aed',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، حفظ',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        icon: 'success',
                        title: 'تم الحفظ!',
                        text: 'تم حفظ التغييرات على التصميم بنجاح',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            });
        }

        function editCover(coverId) {
            Swal.fire({
                title: 'تعديل صورة الغلاف',
                text: `تعديل صورة الغلاف رقم: ${coverId}`,
                icon: 'info'
            });
        }

        function deleteCover(coverId, coverTitle) {
            Swal.fire({
                title: 'هل أنت متأكد؟',
                text: `سيتم حذف صورة الغلاف "${coverTitle}" نهائياً!`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'نعم، احذف!',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch('api/router.php', {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            action: 'delete_cover',
                            cover_id: coverId
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'تم الحذف!',
                                text: 'تم حذف صورة الغلاف بنجاح',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'خطأ!',
                                text: data.message || 'حدث خطأ أثناء حذف الصورة'
                            });
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'خطأ!',
                            text: 'حدث خطأ في الاتصال بالخادم'
                        });
                    });
                }
            });
        }

        function resetDesign() {
            Swal.fire({
                title: 'استعادة الإعدادات الافتراضية',
                text: 'هل تريد استعادة جميع إعدادات التصميم إلى الافتراضية؟',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، استعادة',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        icon: 'success',
                        title: 'تم الاستعادة!',
                        text: 'تم استعادة الإعدادات الافتراضية',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            });
        }

        // Marketing functions
        function createCampaign() {
            Swal.fire({
                title: 'إنشاء حملة تسويقية جديدة',
                html: `
                    <div class="text-right">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">اسم الحملة</label>
                            <input type="text" id="campaign_name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="مثال: حملة منتجات الشتاء">
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">المنصة</label>
                            <select id="campaign_platform" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                <option value="facebook">فيسبوك</option>
                                <option value="instagram">انستغرام</option>
                                <option value="google">جوجل</option>
                            </select>
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">الميزانية (جنيه مصري)</label>
                            <input type="number" id="campaign_budget" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="0">
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">مدة الحملة (أيام)</label>
                            <input type="number" id="campaign_duration" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="30">
                        </div>
                    </div>
                `,
                showCancelButton: true,
                confirmButtonColor: '#7c3aed',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'إنشاء الحملة',
                cancelButtonText: 'إلغاء',
                preConfirm: () => {
                    const name = document.getElementById('campaign_name').value;
                    const platform = document.getElementById('campaign_platform').value;
                    const budget = document.getElementById('campaign_budget').value;
                    const duration = document.getElementById('campaign_duration').value;

                    if (!name || !platform || !budget || !duration) {
                        Swal.showValidationMessage('يرجى ملء جميع الحقول');
                        return false;
                    }
                    return { name, platform, budget, duration };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        icon: 'success',
                        title: 'تم إنشاء الحملة!',
                        text: 'تم إنشاء الحملة التسويقية بنجاح',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            });
        }

        function editCampaign(campaignId) {
            Swal.fire({
                title: 'تعديل الحملة',
                text: `تعديل حملة: ${campaignId}`,
                icon: 'info'
            });
        }

        function pauseCampaign(campaignId) {
            Swal.fire({
                title: 'إيقاف الحملة مؤقتاً',
                text: `هل تريد إيقاف حملة ${campaignId} مؤقتاً؟`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#f59e0b',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، أوقف',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        icon: 'success',
                        title: 'تم الإيقاف!',
                        text: 'تم إيقاف الحملة مؤقتاً',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            });
        }

        function testFacebookAPI() {
            Swal.fire({
                title: 'اختبار اتصال Facebook API',
                text: 'جاري الاتصال بـ Facebook API...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            setTimeout(() => {
                Swal.fire({
                    icon: 'success',
                    title: 'نجح الاتصال!',
                    text: 'تم الاتصال بـ Facebook API بنجاح',
                    timer: 2000,
                    showConfirmButton: false
                });
            }, 2000);
        }

        function testGoogleAPI() {
            Swal.fire({
                title: 'اختبار اتصال Google API',
                text: 'جاري الاتصال بـ Google API...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            setTimeout(() => {
                Swal.fire({
                    icon: 'success',
                    title: 'نجح الاتصال!',
                    text: 'تم الاتصال بـ Google API بنجاح',
                    timer: 2000,
                    showConfirmButton: false
                });
            }, 2000);
        }

        function testInstagramAPI() {
            Swal.fire({
                title: 'اختبار اتصال Instagram API',
                text: 'جاري الاتصال بـ Instagram API...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            setTimeout(() => {
                Swal.fire({
                    icon: 'success',
                    title: 'نجح الاتصال!',
                    text: 'تم الاتصال بـ Instagram API بنجاح',
                    timer: 2000,
                    showConfirmButton: false
                });
            }, 2000);
        }

        // Customer Service functions
        function sendQuickResponse(responseType) {
            Swal.fire({
                title: 'إرسال الرد السريع',
                text: `هل تريد إرسال "${responseType}" للعميل؟`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#7c3aed',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، أرسل',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        icon: 'success',
                        title: 'تم الإرسال!',
                        text: 'تم إرسال الرد للعميل',
                        timer: 1500,
                        showConfirmButton: false
                    });
                }
            });
        }

        function addQuickResponse() {
            Swal.fire({
                title: 'إضافة رد سريع جديد',
                html: `
                    <div class="text-right">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">عنوان الرد</label>
                            <input type="text" id="quick_title" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="مثال: شكراً لتواصلك">
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">نص الرد</label>
                            <textarea id="quick_message" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="اكتب نص الرد هنا..." rows="3"></textarea>
                        </div>
                    </div>
                `,
                showCancelButton: true,
                confirmButtonColor: '#7c3aed',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'إضافة الرد',
                cancelButtonText: 'إلغاء',
                preConfirm: () => {
                    const title = document.getElementById('quick_title').value;
                    const message = document.getElementById('quick_message').value;

                    if (!title || !message) {
                        Swal.showValidationMessage('يرجى ملء جميع الحقول');
                        return false;
                    }
                    return { title, message };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        icon: 'success',
                        title: 'تم الإضافة!',
                        text: 'تم إضافة الرد السريع بنجاح',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            });
        }

        function viewAllTickets() {
            Swal.fire({
                title: 'جميع تذاكر الدعم',
                text: 'سيتم عرض جميع تذاكر الدعم في نافذة منفصلة',
                icon: 'info'
            });
        }

        function openWhatsApp() {
            window.open('https://wa.me/201234567890', '_blank');
        }

        function openMessenger() {
            window.open('https://m.me/yourpage', '_blank');
        }

        function openEmail() {
            window.open('mailto:support@rozskin.com', '_blank');
        }

        function openPhone() {
            window.open('tel:+201234567890', '_blank');
        }

        // Review management functions
        function approveReview(reviewId, userName) {
            Swal.fire({
                title: 'اعتماد التقييم',
                text: `هل تريد اعتماد تقييم ${userName}؟`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#10b981',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، اعتماد',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch('api/router.php', {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            action: 'approve_review',
                            review_id: reviewId
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'تم الاعتماد!',
                                text: 'تم اعتماد التقييم بنجاح',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'خطأ!',
                                text: data.message || 'حدث خطأ أثناء اعتماد التقييم'
                            });
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'خطأ!',
                            text: 'حدث خطأ في الاتصال بالخادم'
                        });
                    });
                }
            });
        }

        function hideReview(reviewId, userName) {
            Swal.fire({
                title: 'إخفاء التقييم',
                text: `هل تريد إخفاء تقييم ${userName}؟`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#f59e0b',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، إخفاء',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch('api/router.php', {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            action: 'hide_review',
                            review_id: reviewId
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'تم الإخفاء!',
                                text: 'تم إخفاء التقييم بنجاح',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'خطأ!',
                                text: data.message || 'حدث خطأ أثناء إخفاء التقييم'
                            });
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'خطأ!',
                            text: 'حدث خطأ في الاتصال بالخادم'
                        });
                    });
                }
            });
        }

        function showReview(reviewId, userName) {
            Swal.fire({
                title: 'إظهار التقييم',
                text: `هل تريد إظهار تقييم ${userName}؟`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3b82f6',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، إظهار',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch('api/router.php', {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            action: 'show_review',
                            review_id: reviewId
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'تم الإظهار!',
                                text: 'تم إظهار التقييم بنجاح',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'خطأ!',
                                text: data.message || 'حدث خطأ أثناء إظهار التقييم'
                            });
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'خطأ!',
                            text: 'حدث خطأ في الاتصال بالخادم'
                        });
                    });
                }
            });
        }

        function deleteReview(reviewId, userName) {
            Swal.fire({
                title: 'حذف التقييم',
                text: `هل تريد حذف تقييم ${userName} نهائياً؟`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، حذف',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch('api/router.php', {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            action: 'delete_review',
                            review_id: reviewId
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'تم الحذف!',
                                text: 'تم حذف التقييم بنجاح',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'خطأ!',
                                text: data.message || 'حدث خطأ أثناء حذف التقييم'
                            });
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'خطأ!',
                            text: 'حدث خطأ في الاتصال بالخادم'
                        });
                    });
                }
            });
        }

        function addNewPost() {
            Swal.fire({
                title: 'إضافة منشور جديد',
                html: `
                    <form id="addPostForm" method="POST" action="">
                        <div class="text-right">
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">المحتوى النصي</label>
                                <textarea name="caption" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="اكتب محتوى المنشور..." rows="4" required></textarea>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">الصورة (اختياري)</label>
                                <input type="file" name="image" accept="image/*" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
                            </div>
                        </div>
                        <input type="hidden" name="create_post" value="1">
                    </form>
                `,
                showCancelButton: true,
                confirmButtonColor: '#10b981',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نشر المنشور',
                cancelButtonText: 'إلغاء',
                preConfirm: () => {
                    const form = document.getElementById('addPostForm');
                    const caption = form.caption.value;

                    if (!caption.trim()) {
                        Swal.showValidationMessage('يرجى كتابة محتوى المنشور');
                        return false;
                    }

                    // Submit the form
                    form.submit();
                    return false; // Prevent Swal from closing
                }
            });
        }

        function editPost(postId) {
            // Fetch post data first (in a real app, you'd fetch this via AJAX)
            Swal.fire({
                title: 'تعديل المنشور',
                html: `
                    <form id="editPostForm" method="POST" action="">
                        <div class="text-right">
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">المحتوى النصي</label>
                                <textarea name="caption" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="اكتب محتوى المنشور..." rows="4" required>محتوى المنشور الحالي...</textarea>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">تغيير الصورة (اختياري)</label>
                                <input type="file" name="image" accept="image/*" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
                            </div>
                        </div>
                        <input type="hidden" name="post_id" value="${postId}">
                        <input type="hidden" name="update_post" value="1">
                    </form>
                `,
                showCancelButton: true,
                confirmButtonColor: '#10b981',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'تحديث المنشور',
                cancelButtonText: 'إلغاء',
                preConfirm: () => {
                    const form = document.getElementById('editPostForm');
                    const caption = form.caption.value;

                    if (!caption.trim()) {
                        Swal.showValidationMessage('يرجى كتابة محتوى المنشور');
                        return false;
                    }

                    // Submit the form
                    form.submit();
                    return false; // Prevent Swal from closing
                }
            });
        }

        function deletePost(postId, userName) {
            Swal.fire({
                title: 'حذف المنشور',
                text: `هل تريد حذف منشور ${userName} نهائياً؟`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، حذف',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.innerHTML = `
                        <input type="hidden" name="post_id" value="${postId}">
                        <input type="hidden" name="delete_post" value="1">
                    `;
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }

        // Category management functions
        function showAddCategoryModal() {
            Swal.fire({
                title: 'إضافة فئة جديدة',
                html: `
                    <form id="addCategoryForm" method="POST" enctype="multipart/form-data" action="">
                        <div class="text-right">
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">اسم الفئة</label>
                                <input type="text" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="مثال: عناية بالبشرة" required>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">الوصف</label>
                                <textarea name="description" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="وصف الفئة" rows="3"></textarea>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">النوع</label>
                                <select name="type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                    <option value="product">منتج</option>
                                    <option value="service">خدمة</option>
                                </select>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">الصورة (اختياري)</label>
                                <input type="file" name="image" accept="image/*" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-purple-50 file:text-purple-700 hover:file:bg-purple-100">
                            </div>
                        </div>
                        <input type="hidden" name="add_category" value="1">
                    </form>
                `,
                showCancelButton: true,
                confirmButtonColor: '#7c3aed',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'إضافة الفئة',
                cancelButtonText: 'إلغاء',
                preConfirm: () => {
                    const form = document.getElementById('addCategoryForm');
                    const name = form.name.value;
                    const type = form.type.value;

                    if (!name.trim()) {
                        Swal.showValidationMessage('يرجى إدخال اسم الفئة');
                        return false;
                    }

                    if (!type) {
                        Swal.showValidationMessage('يرجى اختيار نوع الفئة');
                        return false;
                    }

                    // Submit the form
                    form.submit();
                    return false; // Prevent Swal from closing
                }
            });
        }

        function editCategory(categoryId, name, description, type) {
            Swal.fire({
                title: 'تعديل الفئة',
                html: `
                    <form id="editCategoryForm" method="POST" enctype="multipart/form-data" action="">
                        <div class="text-right">
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">اسم الفئة</label>
                                <input type="text" name="name" value="${name}" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" required>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">الوصف</label>
                                <textarea name="description" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" rows="3">${description || ''}</textarea>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">النوع</label>
                                <select name="type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                    <option value="product" ${type === 'product' ? 'selected' : ''}>منتج</option>
                                    <option value="service" ${type === 'service' ? 'selected' : ''}>خدمة</option>
                                </select>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">تغيير الصورة (اختياري)</label>
                                <input type="file" name="image" accept="image/*" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-purple-50 file:text-purple-700 hover:file:bg-purple-100">
                            </div>
                        </div>
                        <input type="hidden" name="category_id" value="${categoryId}">
                        <input type="hidden" name="update_category" value="1">
                    </form>
                `,
                showCancelButton: true,
                confirmButtonColor: '#7c3aed',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'تحديث الفئة',
                cancelButtonText: 'إلغاء',
                preConfirm: () => {
                    const form = document.getElementById('editCategoryForm');
                    const name = form.name.value;
                    const type = form.type.value;

                    if (!name.trim()) {
                        Swal.showValidationMessage('يرجى إدخال اسم الفئة');
                        return false;
                    }

                    if (!type) {
                        Swal.showValidationMessage('يرجى اختيار نوع الفئة');
                        return false;
                    }

                    // Submit the form
                    form.submit();
                    return false; // Prevent Swal from closing
                }
            });
        }

        function toggleCategoryStatus(categoryId, categoryName, currentStatus) {
            const action = currentStatus == 1 ? 'تعطيل' : 'تفعيل';
            const newStatus = currentStatus == 1 ? 0 : 1;

            Swal.fire({
                title: `${action} الفئة`,
                text: `هل تريد ${action.toLowerCase()} فئة "${categoryName}"؟`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: currentStatus == 1 ? '#f59e0b' : '#10b981',
                cancelButtonColor: '#6b7280',
                confirmButtonText: `نعم، ${action}`,
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch('api/router.php', {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            action: 'toggle_category',
                            category_id: categoryId
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'تم بنجاح!',
                                text: `تم ${action.toLowerCase()} الفئة بنجاح`,
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'خطأ!',
                                text: data.message || `حدث خطأ أثناء ${action.toLowerCase()} الفئة`
                            });
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'خطأ!',
                            text: 'حدث خطأ في الاتصال بالخادم'
                        });
                    });
                }
            });
        }

        function deleteCategory(categoryId, categoryName) {
            Swal.fire({
                title: 'حذف الفئة',
                text: `هل تريد حذف فئة "${categoryName}" نهائياً؟ هذا الإجراء لا يمكن التراجع عنه.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'نعم، حذف',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch('api/router.php', {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            action: 'delete_category',
                            category_id: categoryId
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'تم الحذف!',
                                text: 'تم حذف الفئة بنجاح',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'خطأ!',
                                text: data.message || 'حدث خطأ أثناء حذف الفئة'
                            });
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'خطأ!',
                            text: 'حدث خطأ في الاتصال بالخادم'
                        });
                    });
                }
            });
        }

        // Success message with SweetAlert2
        <?php if ($message && !isset($_POST['update_order_status'])): // Exclude status update message from large Swal to prevent annoyance ?>
        // We use the simpler inline PHP message for status updates, and Swal for delete actions.
        <?php elseif ($message): ?>
        // If the action was a delete action, use Swal for confirmation of success
        Swal.fire({
            icon: 'success',
            title: 'تم بنجاح!',
            text: '<?php echo $message; ?>',
            timer: 3000,
            showConfirmButton: false
        });
        <?php endif; ?>
    </script>
    
    <!-- Admin Navigation Script -->
    <script src="assets/js/admin-navigation.js"></script>
</body>
</html>