From a18d19588dd83647c1977bc5fcdba61a12e0118a Mon Sep 17 00:00:00 2001
From: Hamza-Ayed <hamzaayedflutter@gmail.com>
Date: Fri, 28 Aug 2026 23:11:55 +0300
Subject: [PATCH] feat: add unified print utility for students (StepLab &
 Exams)

---
 backend/app/Views/StudentPortal.php | 106 +++++++++++++++++++++++++++-
 1 file changed, 105 insertions(+), 1 deletion(-)

diff --git a/backend/app/Views/StudentPortal.php b/backend/app/Views/StudentPortal.php
index 15397e3..d540e50 100644
--- a/backend/app/Views/StudentPortal.php
+++ b/backend/app/Views/StudentPortal.php
@@ -898,6 +898,7 @@ class StudentPortal
                         <h3 style="font-size: 18px; font-weight: 800;">مختبر التفكير السقراطي والمحاكاة التفاعلية (StepLab) 🧪</h3>
                         <p style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">فترة التفكير الإجبارية (Productive Struggle) + محاكاة هندسية بالـ Canvas.</p>
                     </div>
+                    <button type="button" onclick="printElement('tab_steplab_content', 'مختبر التفكير السقراطي (StepLab)')" class="btn-primary" style="width: auto; padding: 6px 14px; font-size: 12px; background: rgba(0,245,212,0.15); border: 1px solid rgba(0,245,212,0.3); color: var(--accent-cyan);">🖨️ طباعة المسألة والشرح</button>
                 </div>
 
                 <!-- Problem Selector Chips -->
@@ -994,7 +995,10 @@ class StudentPortal
         <div id="exam_taking_modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(16px); z-index: 200; align-items: center; justify-content: center; padding: 20px;">
             <div class="auth-box" style="max-width: 680px; width: 100%; max-height: 90vh; overflow-y: auto;">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;">
-                    <h3 style="font-size: 18px; font-weight: 800;" id="exam_title_display">امتحان تقييمي</h3>
+                    <div style="display: flex; align-items: center; gap: 10px;">
+                        <h3 style="font-size: 18px; font-weight: 800;" id="exam_title_display">امتحان تقييمي</h3>
+                        <button type="button" onclick="printElement('exam_question_container', 'سؤال امتحان - صَقِل')" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 11px; cursor: pointer;">🖨️ طباعة السؤال</button>
+                    </div>
                     <button type="button" onclick="closeExamModal()" style="background: transparent; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer;">✕</button>
                 </div>
 
@@ -2351,6 +2355,106 @@ class StudentPortal
             `).join('');
         }
 
+        // ==========================================
+        // Print Utility (طباعة المحتوى للطلاب)
+        // ==========================================
+        function printElement(elementId, title = 'صَقِل - طباعة') {
+            const el = document.getElementById(elementId);
+            if (!el) {
+                showError('المحتوى غير متوفر للطباعة');
+                return;
+            }
+            
+            // Clone the element to safely modify it before printing
+            const clone = el.cloneNode(true);
+            
+            // Remove interactive elements that shouldn't be printed
+            const removeSelectors = ['button', 'input[type="range"]', '.no-print'];
+            removeSelectors.forEach(sel => {
+                const elements = clone.querySelectorAll(sel);
+                elements.forEach(e => e.remove());
+            });
+
+            // Expand all steplab steps if they are hidden
+            const hiddenSteps = clone.querySelectorAll('.studio-card > div[style*="display: none"]');
+            hiddenSteps.forEach(e => { e.style.display = 'block'; });
+            const dimCards = clone.querySelectorAll('.studio-card[style*="opacity"]');
+            dimCards.forEach(e => { e.style.opacity = '1'; });
+            
+            const printWindow = window.open('', '', 'width=900,height=900');
+            printWindow.document.write(`
+                <html dir="rtl" lang="ar">
+                <head>
+                    <title>${title}</title>
+                    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap" rel="stylesheet">
+                    <style>
+                        :root {
+                            --accent-cyan: #000;
+                            --accent-gold: #000;
+                            --accent-purple: #000;
+                            --text-muted: #444;
+                            --text-secondary: #222;
+                            --border: #ccc;
+                        }
+                        body { 
+                            font-family: 'Cairo', system-ui, sans-serif; 
+                            padding: 30px; 
+                            color: #000; 
+                            background: #fff; 
+                            line-height: 1.6;
+                        }
+                        h3, h4 { color: #000 !important; }
+                        /* Force colors to black/white for print */
+                        * { 
+                            color: #000 !important; 
+                            text-shadow: none !important;
+                            box-shadow: none !important;
+                        }
+                        .studio-card { 
+                            border: 1px solid #aaa !important; 
+                            margin-bottom: 20px; 
+                            padding: 20px; 
+                            border-radius: 8px; 
+                            background: #fff !important; 
+                        }
+                        .step-card { border: 1px solid #ccc; margin-bottom: 15px; padding: 15px; border-radius: 8px; }
+                        /* Show originally hidden step bodies */
+                        #steplab_steps_ladder { display: flex !important; flex-direction: column !important; }
+                        #steplab_steps_ladder .studio-card div { display: block !important; }
+                        
+                        @media print {
+                            @page { margin: 1.5cm; }
+                        }
+                    </style>
+                </head>
+                <body>
+                    <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #000; padding-bottom: 15px; margin-bottom: 25px;">
+                        <div>
+                            <h2 style="margin: 0;">منصة صَقِل التعليمية</h2>
+                            <span style="font-size: 14px; color: #555;">المرجع المطبوع - استوديو الطالب</span>
+                        </div>
+                        <div style="text-align: left;">
+                            <h3 style="margin: 0; font-size: 16px;">${title}</h3>
+                        </div>
+                    </div>
+                    ${clone.innerHTML}
+                    
+                    <div style="margin-top: 40px; border-top: 1px dashed #ccc; padding-top: 10px; font-size: 12px; text-align: center;">
+                        حقوق الطبع محفوظة لمنصة صَقِل - تم توليد هذه الورقة بناءً على المنهاج الوزاري الأردني.
+                    </div>
+                </body>
+                </html>
+            `);
+            
+            printWindow.document.close();
+            printWindow.focus();
+            
+            setTimeout(() => {
+                printWindow.print();
+                printWindow.close();
+            }, 800);
+        }
+
     </script>
 </body>
 </html>