╔════════════════════════════════════════════════════════════════════════════╗
║                   📋 توثيق مميزات صفحات إدارة الأحداث                     ║
╚════════════════════════════════════════════════════════════════════════════╝

═══════════════════════════════════════════════════════════════════════════
1️⃣ صفحة قائمة الأحداث (Index)
═══════════════════════════════════════════════════════════════════════════

المسار: /superadmin/events

المميزات:
✅ عرض جميع الأحداث في جدول منظم
✅ عرض العنوان بالعربية والإنجليزية
✅ عرض التاريخ والوقت بصيغة منسقة
✅ عرض الموقع (إن وجد)
✅ عرض حالة الحدث (نشط/غير نشط) بألوان مميزة
✅ أزرار تعديل وحذف لكل حدث
✅ تأكيد قبل الحذف
✅ حالة فارغة جميلة عند عدم وجود أحداث
✅ زر "إضافة حدث جديد" بارز
✅ دعم الترقيم (Pagination)
✅ تصميم استجابي (Responsive)

الألوان:
• الحالة النشطة: أخضر (#d4edda)
• الحالة غير النشطة: أحمر (#f8d7da)
• أزرار التعديل: أزرق (#3498db)
• أزرار الحذف: أحمر (#e74c3c)

═══════════════════════════════════════════════════════════════════════════
2️⃣ صفحة إضافة حدث جديد (Create)
═══════════════════════════════════════════════════════════════════════════

المسار: /superadmin/events/create

المميزات:
✅ تصميم حديث وجميل
✅ تبويبات لغة (العربية/الإنجليزية)
✅ محرر TinyMCE متقدم للمحتوى
✅ حقول منفصلة لكل لغة
✅ معاينة فورية للمحتوى
✅ رفع الصور مباشرة من المحرر
✅ دعم RTL/LTR تلقائي
✅ حقل تاريخ ووقت الحدث
✅ حقل الموقع (اختياري)
✅ اختيار الحالة (نشط/غير نشط)
✅ رسائل خطأ واضحة
✅ زر حفظ وزر إلغاء

الحقول:
1. العنوان بالعربية (مطلوب)
2. المحتوى بالعربية (مطلوب) - مع TinyMCE
3. العنوان بالإنجليزية (مطلوب)
4. المحتوى بالإنجليزية (مطلوب) - مع TinyMCE
5. تاريخ ووقت الحدث (مطلوب)
6. الموقع بالعربية (اختياري)
7. الموقع بالإنجليزية (اختياري)
8. الحالة (نشط/غير نشط)

═══════════════════════════════════════════════════════════════════════════
3️⃣ صفحة تعديل حدث (Edit)
═══════════════════════════════════════════════════════════════════════════

المسار: /superadmin/events/{id}/edit

المميزات:
✅ نفس التصميم الحديث
✅ تحميل البيانات الموجودة تلقائياً
✅ تبويبات لغة (العربية/الإنجليزية)
✅ محرر TinyMCE متقدم
✅ عرض تاريخ آخر تحديث
✅ حفظ التغييرات بسهولة
✅ رسائل خطأ واضحة
✅ زر حفظ التغييرات وزر إلغاء

═══════════════════════════════════════════════════════════════════════════
🎨 مميزات محرر TinyMCE
═══════════════════════════════════════════════════════════════════════════

أدوات التنسيق:
✅ Undo/Redo
✅ Bold, Italic, Underline, Strikethrough
✅ Heading Styles (H1-H6)
✅ Font Family و Font Size
✅ Text Alignment (Left, Center, Right, Justify)
✅ Line Height
✅ Lists (Ordered, Unordered, Checklist)
✅ Indent/Outdent
✅ Link Insertion
✅ Image Insertion
✅ Video Insertion
✅ Table Creation
✅ Emoticons
✅ Character Map
✅ Code View
✅ Full Screen Mode
✅ Preview Mode

رفع الصور:
✅ رفع مباشر من المحرر
✅ دعم Drag & Drop
✅ معاينة الصور
✅ تحديد حجم الصور
✅ تحديد النص البديل (Alt Text)

═══════════════════════════════════════════════════════════════════════════
🌐 دعم اللغات
═══════════════════════════════════════════════════════════════════════════

✅ العربية (RTL - Right to Left)
   • محاذاة النص من اليمين
   • دعم الأحرف العربية الكاملة
   • تنسيق مناسب للنصوص العربية

✅ الإنجليزية (LTR - Left to Right)
   • محاذاة النص من اليسار
   • دعم الأحرف الإنجليزية
   • تنسيق مناسب للنصوص الإنجليزية

═══════════════════════════════════════════════════════════════════════════
🎯 التصميم والألوان
═══════════════════════════════════════════════════════════════════════════

الألوان الأساسية:
• الأحمر الرئيسي: #e74c3c
• الأخضر: #27ae60
• الأزرق: #3498db
• الرمادي: #7f8c8d
• الأبيض: #ffffff
• الخلفية: #f8fafc

التدرجات:
• رأس النموذج: linear-gradient(135deg, #e74c3c, #c0392b)
• زر الحفظ: linear-gradient(135deg, #27ae60, #2ecc71)

الظلال:
• ظل خفيف: 0 2px 20px rgba(0,0,0,0.08)
• ظل عند التركيز: 0 0 0 3px rgba(231, 76, 60, 0.1)

═══════════════════════════════════════════════════════════════════════════
📱 الاستجابة (Responsive Design)
═══════════════════════════════════════════════════════════════════════════

✅ شاشات الكمبيوتر (Desktop)
   • عرض كامل للنماذج
   • جدول منظم
   • تخطيط متعدد الأعمدة

✅ الأجهزة اللوحية (Tablet)
   • تخطيط متكيف
   • أزرار كبيرة للنقر
   • نصوص قابلة للقراءة

✅ الهواتف الذكية (Mobile)
   • تخطيط أحادي العمود
   • أزرار كبيرة وسهلة النقر
   • نصوص واضحة وكبيرة

═══════════════════════════════════════════════════════════════════════════
🔒 الأمان والتحقق
═══════════════════════════════════════════════════════════════════════════

✅ CSRF Protection (Cross-Site Request Forgery)
✅ التحقق من صحة البيانات
✅ تأكيد قبل الحذف
✅ معالجة الأخطاء الآمنة
✅ رسائل خطأ واضحة

═══════════════════════════════════════════════════════════════════════════
⚡ الأداء والتحسينات
═══════════════════════════════════════════════════════════════════════════

✅ تحميل سريع
✅ CSS مدمج (Inline CSS)
✅ JavaScript محسّن
✅ معالجة فعالة للصور
✅ دعم الترقيم (Pagination)

═══════════════════════════════════════════════════════════════════════════
🚀 كيفية الاستخدام
═══════════════════════════════════════════════════════════════════════════

1. الوصول إلى الصفحة:
   http://localhost/val-admin/public/superadmin/events

2. إضافة حدث:
   • انقر على "إضافة حدث جديد"
   • ملء البيانات المطلوبة
   • استخدم محرر TinyMCE للمحتوى
   • انقر "حفظ الحدث"

3. تعديل حدث:
   • انقر على "تعديل" بجانب الحدث
   • عدّل البيانات
   • انقر "حفظ التغييرات"

4. حذف حدث:
   • انقر على "حذف" بجانب الحدث
   • أكد الحذف

═══════════════════════════════════════════════════════════════════════════
📞 الدعم والمساعدة
═══════════════════════════════════════════════════════════════════════════

في حالة وجود مشاكل:
1. تأكد من تسجيل الدخول
2. امسح الـ Cache (php artisan cache:clear)
3. تحقق من صحة البيانات المدخلة
4. تحقق من رسائل الخطأ

═══════════════════════════════════════════════════════════════════════════

تم إنشاء هذا التوثيق في: 2025-10-18
آخر تحديث: 2025-10-18