From 1c0cd88a98248cea16b14b99851490d69b669240 Mon Sep 17 00:00:00 2001
From: Hamza-Ayed <hamzaayedflutter@gmail.com>
Date: Mon, 31 Aug 2026 18:01:26 +0300
Subject: [PATCH] Fix RTL player time formatting and add interactive chalkboard
 notes

---
 .../player/socratic_video_player_screen.dart  | 69 ++++++++++++++++++-
 1 file changed, 66 insertions(+), 3 deletions(-)

diff --git a/apps/student_app/lib/presentation/screens/player/socratic_video_player_screen.dart b/apps/student_app/lib/presentation/screens/player/socratic_video_player_screen.dart
index 81f5e88..327a618 100644
--- a/apps/student_app/lib/presentation/screens/player/socratic_video_player_screen.dart
+++ b/apps/student_app/lib/presentation/screens/player/socratic_video_player_screen.dart
@@ -418,9 +418,17 @@ class _SocraticVideoPlayerScreenState extends State<SocraticVideoPlayerScreen> w
                                           onPressed: () => context.read<VideoPlaybackCubit>().togglePlayPause(),
                                         ),
                                         const SizedBox(width: 8),
-                                        Text(
-                                          '${_formatTime(current)} / ${_formatTime(duration)}',
-                                          style: const TextStyle(color: Colors.white70, fontSize: 12, fontWeight: FontWeight.w600),
+                                        Directionality(
+                                          textDirection: TextDirection.ltr,
+                                          child: Text(
+                                            '${_formatTime(current)} / ${_formatTime(duration)}',
+                                            style: const TextStyle(
+                                              color: Colors.white70,
+                                              fontSize: 12,
+                                              fontWeight: FontWeight.w600,
+                                              fontFamily: 'SF Pro Text',
+                                            ),
+                                          ),
                                         ),
                                         const Spacer(),
                                         Container(
@@ -524,6 +532,61 @@ class _SocraticVideoPlayerScreenState extends State<SocraticVideoPlayerScreen> w
                         ],
                       ),
                     ),
+                    const SizedBox(height: 16),
+
+                    // Interactive Digital Chalkboard & Key Concept Breakdown
+                    LuxuryCard(
+                      borderColor: AppColors.appleBlue.withAlpha(40),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Row(
+                            children: [
+                              Container(
+                                width: 32,
+                                height: 32,
+                                decoration: BoxDecoration(
+                                  color: AppColors.saqelCyan.withAlpha(25),
+                                  borderRadius: BorderRadius.circular(8),
+                                ),
+                                child: const Icon(CupertinoIcons.square_pencil, color: AppColors.saqelCyan, size: 18),
+                              ),
+                              const SizedBox(width: 10),
+                              const Text(
+                                'لوحة الشرح التفاعلية والملاحظات الجوهرية 📝',
+                                style: TextStyle(color: Colors.white, fontSize: 15, fontWeight: FontWeight.w800),
+                              ),
+                            ],
+                          ),
+                          const SizedBox(height: 14),
+                          Container(
+                            padding: const EdgeInsets.all(16),
+                            decoration: BoxDecoration(
+                              color: const Color(0xFF07101E),
+                              borderRadius: BorderRadius.circular(16),
+                              border: Border.all(color: AppColors.darkCardBorder),
+                            ),
+                            child: const Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                Text(
+                                  '📌 خطوات الحل المنهجية (وفق معايير التصحيح الوزاري):',
+                                  style: TextStyle(color: AppColors.saqelCyan, fontSize: 13, fontWeight: FontWeight.w700),
+                                ),
+                                SizedBox(height: 8),
+                                Text(
+                                  '1. كتابة المعادلات في الصورة القياسية وتحديد نوع كل معادلة.\n'
+                                  '2. عزل أحد المتغيرين في المعادلة الخطية بالتعويض المباشر.\n'
+                                  '3. حل المعادلة الناتجة باستخدام التحليل إلى العوامل أو القانون العام.\n'
+                                  '4. التحقق من صحة الزوج المرتب (x, y) بالتعويض في كلا المعادلتين.',
+                                  style: TextStyle(color: AppColors.textSecondaryDark, fontSize: 12.5, height: 1.6),
+                                ),
+                              ],
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
                   ],
                 ),
               ),