# تحديث عرض الخدمات في الصفحة الرئيسية 🎨

## التحديثات المطبقة

### 1. عرض الخدمات من قاعدة البيانات
بدلاً من الخدمات الثابتة، الآن يتم جلب الخدمات من جدول `beauty_services`:

```php
// جلب 3 خدمات فقط للصفحة الرئيسية
$servicesStmt = $conn->prepare("
    SELECT id, name, description, price, duration, image, category
    FROM beauty_services
    WHERE is_active = 1
    ORDER BY created_at DESC
    LIMIT 3
");
```

### 2. عرض صور الخدمات
- يتم عرض صورة الخدمة إذا كانت موجودة في `uploads/services/`
- إذا لم تكن موجودة، يتم عرض صورة افتراضية من Unsplash
- الصورة تغطي الجزء العلوي من البطاقة بشكل جذاب

### 3. زر عرض التفاصيل
كل خدمة الآن لها زرين:
- **احجزي الآن**: يفتح نافذة الحجز مباشرة
- **عرض التفاصيل** (أيقونة بحث): ينقل لصفحة تفاصيل الخدمة

### 4. تصميم محسّن
- بطاقات أنيقة مع صور كبيرة
- تدرجات لونية مختلفة لكل خدمة
- تأثيرات حركية عند التمرير
- عرض الفئة والمدة والسعر بشكل واضح

## الملفات المحدثة

### ✅ backend/public/index.php
**التغييرات:**
1. إضافة استعلام لجلب 3 خدمات من قاعدة البيانات
2. تحديث قسم عرض الخدمات ليكون ديناميكياً
3. عرض صور الخدمات
4. إضافة زر "عرض التفاصيل"
5. تحسين التصميم والاستجابة

**الكود الجديد:**
```php
// جلب الخدمات
$servicesStmt = $conn->prepare("
    SELECT id, name, description, price, duration, image, category
    FROM beauty_services
    WHERE is_active = 1
    ORDER BY created_at DESC
    LIMIT 3
");
$servicesStmt->execute();
$services = $servicesStmt->fetchAll(PDO::FETCH_ASSOC);
```

### ✅ backend/public/service.php (جديد)
صفحة جديدة لعرض تفاصيل الخدمة:
- عرض صورة كبيرة للخدمة
- تفاصيل كاملة (الوصف، السعر، المدة، الفئة)
- تعليمات الاستخدام (إن وجدت)
- زر حجز مباشر
- تصميم أنيق ومتجاوب

## المميزات الجديدة

### 1. عرض ديناميكي
- الخدمات تُجلب من قاعدة البيانات
- يمكن إضافة/تعديل/حذف الخدمات من لوحة التحكم
- التحديثات تظهر فوراً في الصفحة الرئيسية

### 2. صور الخدمات
```php
$serviceImage = !empty($service['image']) && file_exists('../uploads/services/' . $service['image']) 
    ? '../uploads/services/' . htmlspecialchars($service['image']) 
    : 'https://images.unsplash.com/photo-1540555700478-4be289fbecef?w=600&h=400&fit=crop';
```

### 3. تدرجات لونية متنوعة
```php
$gradients = [
    'linear-gradient(135deg, #E57393 0%, #D1537A 100%)',
    'linear-gradient(135deg, #F2A8C0 0%, #E57393 100%)',
    'linear-gradient(135deg, #D1537A 0%, #C73E6B 100%)'
];
```

### 4. زرين للتفاعل
- **احجزي الآن**: حجز مباشر
- **عرض التفاصيل**: صفحة كاملة للخدمة

## التصميم

### بطاقة الخدمة
```
┌─────────────────────────┐
│   صورة الخدمة          │
│   (220px height)        │
│   ┌─────────────────┐   │
│   │ اسم الخدمة     │   │
│   │ السعر | المدة  │   │
│   └─────────────────┘   │
├─────────────────────────┤
│ الوصف (3 أسطر)         │
│ الفئة                   │
│ [احجزي الآن] [🔍]      │
└─────────────────────────┘
```

### الاستجابة
- **Desktop**: 3 أعمدة
- **Tablet**: 2 أعمدة
- **Mobile**: عمود واحد

## كيفية الاستخدام

### 1. إضافة خدمة جديدة
من لوحة التحكم:
1. اذهب إلى "الخدمات"
2. أضف خدمة جديدة
3. ارفع صورة للخدمة
4. احفظ

### 2. رفع صور الخدمات
الصور يجب أن تكون في:
```
backend/uploads/services/
```

### 3. عرض تفاصيل الخدمة
الرابط:
```
service.php?id=1
```

## الخلاصة

✅ عرض 3 خدمات فقط في الصفحة الرئيسية
✅ صور الخدمات تظهر بشكل جذاب
✅ زر "عرض التفاصيل" لكل خدمة
✅ صفحة تفاصيل كاملة لكل خدمة
✅ تصميم متجاوب وأنيق
✅ تدرجات لونية متنوعة
✅ تأثيرات حركية سلسة

---
تم التحديث: <?php echo date('Y-m-d H:i:s'); ?>