<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>غرفة البث الاحترافية v2</title>
    <link rel="stylesheet" href="css/style.css?v=4">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/responsive_mobile.css">
    
    
    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
    <style>
    /* زر كتم الكل في الهيدر */
.mute-all-btn { background: #ef4444; color: white; border: none; padding: 5px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: 0.3s; }
.mute-all-btn:hover { background: #dc2626; }

/* زر التحكم بالصوت الفردي فوق كاميرا الطالب */
.student-audio-ctrl { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; z-index: 10; display: flex; justify-content: center; align-items: center; transition: 0.3s; }
.student-audio-ctrl:hover { transform: scale(1.1); }
.student-audio-ctrl.muted { background: rgba(239, 68, 68, 0.9); } /* لون أحمر عند الكتم */
        .media-btn { background: #94a3b8; color: white; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; font-weight: bold; margin: 0 5px; transition: 0.3s; display: flex; align-items: center; gap: 5px; }
        .media-btn.active-cam, .media-btn.active-mic { background: #22c55e; } 
        .media-btn:hover { opacity: 0.8; }
        
        .draggable-video-wrapper { position: absolute; bottom: 20px; left: 20px; width: 220px; height: 160px; background: #1e293b; border-radius: 12px; border: 2px solid #6b1024; box-shadow: 0 10px 30px rgba(0,0,0,0.4); display: none; flex-direction: column; overflow: hidden; resize: both; z-index: 1000; }
        .video-drag-header { background: rgba(107, 16, 36, 0.9); color: white; font-size: 12px; padding: 5px; text-align: center; cursor: move; user-select: none; }
        #btn-ai-toolbar {
            padding: 10px 20px;
            background-color: #6b1024;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
        }

        #btn-ai-toolbar:hover {
            background-color: #8a152d;
        }
        /* تنسيق النافذة المنبثقة الرئيسية */
.students-modal-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 100000; display: flex; justify-content: center; align-items: center; }
.students-modal-content { 
    background: #fff; 
    width: 90%; 
    max-width: 1000px; 
    height: 85vh; /* 🚀 هنا السر: نحدد ارتفاعاً ثابتاً للنافذة */
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
    display: flex; 
    flex-direction: column; 
    border: 2px solid #6b1024; 
}
.students-modal-header { background: #fff; color: var(--maroon, #6b1024); padding: 15px 20px; font-weight: bold; font-size: 1.1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e2e8f0; }
.close-grid-btn { background: var(--maroon, #6b1024); color: white; border: none; padding: 5px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; }

/* شبكة الكاميرات (Grid) */
.students-grid-container { 
    flex: 1; /* 🚀 هنا السر: نجعل الشبكة تأخذ كل المساحة المتبقية تحت الهيدر */
    padding: 20px; 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 15px; 
    overflow-y: auto; /* 🚀 هنا السر: السكرول سيكون هنا فقط وليس في كامل الصفحة */
    background: #f8fafc; 
}
.empty-state-msg { grid-column: 1 / -1; text-align: center; color: #64748b; padding: 40px; font-size: 1.1rem; }

/* حاوية كاميرا الطالب الفردية */
.student-cam-box { background: #000; border-radius: 8px; overflow: hidden; position: relative; aspect-ratio: 4/3; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; }
.student-cam-box:hover { border-color: #3b82f6; transform: scale(1.02); }
.student-cam-box video { width: 100%; height: 100%; object-fit: cover; }
.student-name-tag { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.6); color: white; padding: 4px 10px; border-radius: 4px; font-size: 12px; }

/* تأثير التكبير (Spotlight) عند الضغط على الكاميرا */
.student-cam-box.spotlight-active { grid-column: 1 / -1; aspect-ratio: auto; height: 500px; border-color: #10b981; cursor: zoom-out; }



    </style>
</head>
<body>

    <div class="main-container" style="max-width: 98% !important; width: 98% !important; margin: 10px auto !important; padding: 0 !important;">
        <div id="board-wrapper" style="position: relative; width: 100%; flex: 1; min-height: 500px; overflow: hidden; background: #ffffff; border-radius: 8px;">
    
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none;">
        
        <div id="media-window-wrapper" class="draggable-video-wrapper" style="display: none; position: absolute; top: 20px; left: 20px; width: 600px; height: 400px; background: #f8fafc; border: 2px solid #6b1024; border-radius: 8px; overflow: hidden; resize: both; box-shadow: 0 5px 15px rgba(0,0,0,0.2); flex-direction: column; pointer-events: auto;">
            <div id="media-drag-handle" style="background: #6b1024; color: white; padding: 8px 15px; cursor: grab; display: flex; justify-content: space-between; align-items: center; font-size: 14px; user-select: none;">
                <span><i class="fas fa-file-alt"></i> نافذة العرض (اسحب للتحريك)</span>
                <button onclick="document.getElementById('media-window-wrapper').style.display='none'; document.getElementById('media-display-area').innerHTML='';" style="background: none; border: none; color: white; cursor: pointer; font-size: 16px;" title="إغلاق"><i class="fas fa-times"></i></button>
            </div>
            <div id="media-display-area" style="width: 100%; flex: 1; position: relative;"></div>
        </div>

    </div>

<canvas id="whiteboard" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 900 !important; background: transparent; touch-action: none; pointer-events: auto;"></canvas>
</div>
        
        <div class="toolbar">
            <div class="tool-group">
                <button id="tool-pen" onclick="document.getElementById('whiteboard').style.pointerEvents = 'auto';">
    <i class="fas fa-pen"></i> </button>
                <button id="tool-text" class="btn" title="نص"><i class="fas fa-font"></i></button>
                <button id="tool-eraser" class="btn" title="ممحاة"><i class="fas fa-eraser"></i></button>
                <button id="tool-hand" onclick="document.getElementById('whiteboard').style.pointerEvents = 'none';">
    <i class="fas fa-hand-paper"></i> </button>

<button id="btn-clear-all" class="btn" title="مسح السبورة بالكامل" style="color: red;">
    <i class="fas fa-trash"></i>
</button>

<div class="tool-group" style="border-left: 2px solid #ddd; padding-left: 10px;">
                    <input type="color" id="color-picker" value="#6b1024" title="اللون">
                    <input type="range" id="pen-width" min="2" max="30" value="3" style="width: 50px;">
                </div>
            </div>

            <div class="tool-group" style="border-right: 2px solid #ddd; padding-right: 10px;">
                <!-- 🚀 زر الدردشة للمدرس مضاف هنا 🚀 -->
                <button class="btn" onclick="ChatModule.toggleChat()" style="position: relative;" title="دردشة الحصة">
                    <i class="fas fa-comment-dots"></i>
                    <span id="chat-badge" style="display: none; position: absolute; top: -6px; right: -6px; background: #ef4444; color: white; font-size: 10px; width: 18px; height: 18px; border-radius: 50%; justify-content: center; align-items: center; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">0</span>
                </button>

                <button onclick="AttendanceModule.toggleWindow()" class="btn" title="قائمة الحضور"><i class="fas fa-users"></i></button>
                <button id="btn-trigger-invite" class="btn" onclick="window.openInviteModal()" style="background: #e74c3c; color: white;" title="دعوة للبث"><i class="fas fa-satellite-dish"></i></button>
                <button onclick="toggleRecord()" class="btn" title="تسجيل"><i class="fas fa-record-vinyl"></i></button>
                <button class="btn" title="كاميرات الطلاب" onclick="
    document.getElementById('students-grid-modal').style.display = 'flex';
    setTimeout(() => {
        document.querySelectorAll('#students-video-grid video').forEach(v => {
            if(v.srcObject) { v.srcObject = v.srcObject; } /* 🚀 خدعة كروم لإعادة رسم الفيديو */
            v.play().catch(e=>{});
        });
    }, 100);
" style="width: 40px; height: 40px; padding: 0; display: inline-flex; justify-content: center; align-items: center; border-radius: 8px;">
    <i class="fas fa-th-large" style="font-size: 1.2rem;"></i>
</button>
            </div>
            
            <div class="tool-group">
                <button id="cam-btn-icon" class="media-btn" onclick="TeacherMedia.toggleCam()" title="كاميرتي">
                    <i class="fas fa-video-slash"></i>
                </button>
                <button id="mic-btn-icon" class="media-btn" onclick="TeacherMedia.toggleMic()" title="المايك">
                    <i class="fas fa-microphone-slash"></i>
                </button>
                
            </div>
            <button onclick="exitSmartboard()" style="background: #ef4444; color: white; border: none; width: 36px; height: 36px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; font-size: 16px; transition: 0.3s;" onmouseover="this.style.background='#dc2626'" onmouseout="this.style.background='#ef4444'" title="إنهاء البث والعودة للوحة المدرس">
    <i class="fas fa-power-off"></i>
</button>
            
            <div class="tool-group">
                <button id="btn-ai-toolbar" class="btn" onclick="document.getElementById('teacher-ai-box').style.display = document.getElementById('teacher-ai-box').style.display === 'none' ? 'block' : 'none';" title="مساعد AI"><i class="fas fa-robot"></i></button>
                <button id="btn-3d" class="btn" title="الوسائل" onclick="document.getElementById('modal-3d').style.display='flex'">
    <i class="fas fa-box-open"></i>
</button>
            </div>
        </div>
    </div>

    <div id="teacher-video-container" class="draggable-video-wrapper">
        <div class="video-drag-header" id="teacher-video-drag-handle">أنت (المدرس) <i class="fas fa-arrows-alt" style="float:left; opacity:0.6;"></i></div>
        <video id="teacherVideo" autoplay playsinline muted style="width: 100%; height: calc(100% - 25px); object-fit: cover; background: #000;"></video>
    </div>
    
    

    <div id="ai-panel" class="side-panel">
        <div class="panel-header">
            <h3>🤖 مساعد المعلم الذكي</h3>
            <button id="close-ai" class="close-btn">✖</button>
        </div>
        <div class="panel-body" id="ai-chat-box">
            <div class="ai-msg">أهلاً بك أستاذنا ! أنا مساعدك الذكي الجاهز للربط بالـ API لتلخيص الحصص وتجهيز الأسئلة فوراً.</div>
        </div>
        <div class="panel-footer">
            <input type="text" id="ai-input" placeholder="اسألني عن أي شيء...">
            <button id="ai-send" class="btn">إرسال</button>
        </div>
    </div>

    <!-- 🚀 صندوق دردشة المدرس العائم المضاف 🚀 -->
    <div id="chat-panel" class="students-modal-wrapper" style="display: none; position: absolute; bottom: 80px; left: 20px; width: 320px; height: 420px; background: #ffffff; border-radius: 12px; border: 2px solid #6b1024; box-shadow: 0 10px 30px rgba(0,0,0,0.3); flex-direction: column; overflow: hidden; z-index: 999999; pointer-events: auto;">
        <div class="chat-header" id="chat-drag-handle" style="background: #6b1024; color: white; font-size: 14px; padding: 12px; font-weight: bold; cursor: move; user-select: none; display: flex; justify-content: space-between; align-items: center;">
            <span><i class="fas fa-comments"></i> دردشة الحصة المباشرة</span>
            <i class="fas fa-times" style="cursor:pointer;" onclick="ChatModule.toggleChat()"></i>
        </div>
        <div class="chat-messages" id="chat-messages" style="flex: 1; padding: 15px; overflow-y: auto; background: #f8fafc; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;">
            <div class="msg-bubble msg-teacher" style="background: #fee2e2; border: 1px solid #fca5a5; color: #7f1d1d; align-self: flex-start; border-top-right-radius: 2px; max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; word-wrap: break-word;">
                <span class="msg-sender" style="font-size: 10px; font-weight: bold; margin-bottom: 3px; display: block; opacity: 0.8;">الأستاذ</span>
                أهلاً بكم في الحصة المباشرة. يرجى الالتزام بالهدوء.
            </div>
        </div>
        <div class="chat-input-area" style="padding: 10px; background: #fff; border-top: 1px solid #e2e8f0; display: flex; gap: 8px; box-sizing: border-box;">
            <input type="text" id="chat-input" placeholder="اكتب ردك هنا..." style="flex: 1; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 20px; outline: none;" onkeypress="if(event.key === 'Enter') ChatModule.sendMessage()">
            <button onclick="ChatModule.sendMessage()" style="background: #6b1024; color: white; border: none; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center;"><i class="fas fa-paper-plane"></i></button>
        </div>
    </div>

    <div id="modal-3d" class="modal">
        <div class="modal-content-large">
            <div class="modal-header">
                <h3>📦 المختبر التعليمي المتكامل (مجسمات، ملفات، وأنيميشن)</h3>
                <button id="close-3d" class="close-btn">✖</button>
            </div>
            <div class="lab-layout">
                
                <div class="lab-sidebar">
                    <h4 class="sidebar-title">اختر المادة الدراسية:</h4>
                    <select id="subject-selector" class="lab-select">
                        <option value="biology">🫀 علم الأحياء</option>
                        <option value="geography">🌍 الجغرافيا والتضاريس</option>
                        <option value="science">⚛️ العلوم والفلك</option>
                        <option value="arabic">🌙 اللغة العربية</option>
                        <option value="math">📐 الرياضيات</option>
                        <option value="english">𔔤 اللغة الإنجليزية</option>
                        <option value="history">📜 التاريخ</option>
                    </select>
                    
                    <h4 class="sidebar-title" style="margin-top:15px;">الوسائل المتاحة:</h4>
                    <div id="lessons-list" class="lessons-menu">
                        </div>

                    <div class="upload-section">
                        <button id="btn-screen-share" class="btn-upload-trigger" style="background: #2980b9; margin-bottom: 10px;">🖥️ بث شاشة سطح المكتب (Live)</button>
                        
                        <button id="btn-toggle-upload" class="btn-upload-trigger">➕ رفع وسيلة تعليمية جديدة</button>
                        
                        <form id="upload-media-form" style="display: none;">
                            <input type="text" id="upload-title" placeholder="اسم الدرس (مثال: وثائقي تشريح القلب)" required>
                            
                            <select id="upload-type" required>
                                <option value="3D">مجسم 3D (.glb)</option>
                                <option value="IMAGE">صورة توضيحية (.jpg, .png)</option>
                                <option value="PDF">ملف PDF</option>
                                <option value="VIDEO">فيديو من الجهاز (.mp4)</option>
                                <option value="YOUTUBE">رابط يوتيوب (YouTube)</option>
                            </select>
                            
                            <input type="file" id="upload-file" accept=".glb,.png,.jpg,.jpeg,.pdf,.mp4" required>
                            
                            <input type="url" id="upload-url" placeholder="الصق رابط اليوتيوب هنا..." style="display: none;">
                            
                            <button type="submit" id="btn-submit-upload" class="btn-submit-upload">رفع وحفظ الآن</button>
                            <div id="upload-status"></div>
                        </form>
                    </div>
                </div>
                
                <div class="lab-theater">
                    <div class="theater-header">
                        <span id="current-media-title" class="media-title">اختر درساً لبدء العرض</span>
                        <span id="media-type-badge" class="badge">---</span>
                    </div>
                    
                    <div class="theater-body">
                        <model-viewer id="real-3d-viewer" camera-controls auto-rotate shadow-intensity="1" style="width: 100%; height: 100%; display: none;"></model-viewer>
                        <canvas id="interactive-2d-canvas" style="width: 100%; height: 100%; display: none;"></canvas>
                        <img id="image-viewer" style="max-width: 100%; max-height: 100%; display: none; object-fit: contain;">
                        <video id="video-viewer" controls style="width: 100%; height: 100%; display: none;"></video>
                        <iframe id="pdf-viewer" style="width: 100%; height: 100%; border: none; display: none;"></iframe>
                        <div id="screen-share-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; display: none;">
    <video id="screen-share-video" autoplay playsinline style="width: 100%; height: 100%; object-fit: contain; background: black;"></video>
</div>
                        
                        <div id="theater-placeholder">
                            <p style="color:#888; font-size:16px;">الرجاء اختيار وسيلة تعليمية من القائمة الجانبية.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
<div id="students-grid-modal" class="students-modal-wrapper" style="display: none;">
    <div class="students-modal-content">
        <div class="students-modal-header">
            <span style="font-size: 1.2rem;"><i class="fas fa-video"></i> كاميرات الطلاب الحاضرين</span>
            <div style="display: flex; gap: 10px;">
                <button onclick="if(typeof StudentsGridModule !== 'undefined') StudentsGridModule.muteAll();" class="mute-all-btn">
                    <i class="fas fa-microphone-slash"></i> كتم الكل
                </button>
                <button onclick="document.getElementById('students-grid-modal').style.display = 'none';" class="close-grid-btn">
                    <i class="fas fa-times"></i> إغلاق
                </button>
            </div>
        </div>
        
        <div id="students-video-grid" class="students-grid-container">
            <div id="no-students-msg" class="empty-state-msg">
                <i class="fas fa-users-slash"></i> لا يوجد طلاب حاضرون في الغرفة حالياً.
            </div>
        </div>
    </div>
</div>
    
    
    <script src="/academy/live_v2/js/modules/whiteboard.js?v=<?php echo time(); ?>"></script>
<script src="/academy/live_v2/js/modules/whiteboard_sync.js?v=<?php echo time(); ?>"></script>
<script src="/academy/live_v2/js/modules/ai_assistant.js?v=<?php echo time(); ?>"></script>
<script src="/academy/live_v2/js/modules/3d_viewer.js?v=<?php echo time(); ?>"></script>
<script src="/academy/live_v2/js/modules/attendance_manager.js?v=<?php echo time(); ?>"></script>
<script src="/academy/live_v2/js/modules/webrtc_core.js?v=<?php echo time(); ?>"></script>
<script src="/academy/live_v2/js/modules/students_grid_webrtc.js?v=<?php echo time(); ?>"></script>
<script src="/academy/live_v2/js/modules/screen_share_core.js?v=<?php echo time(); ?>"></script>
<script src="/academy/live_v2/js/modules/media_sync.js?v=<?php echo time(); ?>"></script>
<!-- المدير يجب أن يكون في النهاية ليتعرف على كل ما سبقه -->
<script src="/academy/live_v2/js/main.js?v=<?php echo time(); ?>"></script>
    
    <script>
    const btnAtt = document.getElementById('btn-toggle-attendance');
    const winAtt = document.getElementById('attendance-window');
    const closeAtt = document.getElementById('close-attendance');
    const headerAtt = document.getElementById('attendance-header');

    if (btnAtt) btnAtt.onclick = () => winAtt.style.display = winAtt.style.display === 'none' ? 'flex' : 'none';
    if (closeAtt) closeAtt.onclick = () => winAtt.style.display = 'none';

    if (headerAtt) {
        headerAtt.onmousedown = (e) => {
            e.preventDefault();
            let shiftX = e.clientX - winAtt.getBoundingClientRect().left;
            let shiftY = e.clientY - winAtt.getBoundingClientRect().top;
            
            const onMouseMove = (me) => {
                winAtt.style.left = (me.pageX - shiftX) + 'px';
                winAtt.style.top = (me.pageY - shiftY) + 'px';
                winAtt.style.right = 'auto'; 
            };
            
            document.addEventListener('mousemove', onMouseMove);
            document.onmouseup = () => {
                document.removeEventListener('mousemove', onMouseMove);
                document.onmouseup = null;
            };
        };
    }
    </script>
    
    <script>
        if (typeof AttendanceModule !== 'undefined') AttendanceModule.init();
    </script>

   <script>
const TeacherMedia = {
    camStream: null, camActive: false, micActive: false,
    toggleCam: async function() {
        const btn = document.getElementById('cam-btn-icon');
        const videoElement = document.getElementById('teacherVideo');
        const container = document.getElementById('teacher-video-container');
        const tid = new URLSearchParams(window.location.search).get('tid');

        // 🚀 السر: مسار وهمي نقي (يمنع الشاشة السوداء عند الطالب)
        if (!window.teacherDummyCanvas) {
            window.teacherDummyCanvas = document.createElement('canvas');
            window.teacherDummyCanvas.width = 640; window.teacherDummyCanvas.height = 480;
            const ctx = window.teacherDummyCanvas.getContext('2d');
            ctx.fillStyle = '#000'; ctx.fillRect(0, 0, 640, 480);
        }
        const dummyTrack = window.teacherDummyCanvas.captureStream(15).getVideoTracks()[0];

        if (this.camActive) {
            if (this.camStream) this.camStream.getVideoTracks().forEach(t => t.stop());
            
            // حقن المسار الوهمي بدلاً من الهدم
            if (typeof WebRTCModule !== 'undefined' && WebRTCModule.peerConnection) {
                const senders = WebRTCModule.peerConnection.getSenders();
                const videoSender = senders.find(s => s.track && s.track.kind === 'video');
                if (videoSender) videoSender.replaceTrack(dummyTrack).catch(e=>{});
            }

            if (videoElement) videoElement.srcObject = null;
            if (container) container.style.display = 'none';
            if (btn) { btn.innerHTML = '<i class="fas fa-video-slash"></i>'; btn.className = 'media-btn'; }
            this.camActive = false;

            if (tid) {
                fetch(`../zoom_api/media_sync_api.php?action=send_command&tid=${tid}`, {
                    method: 'POST', headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ action: 'TEACHER_CAM', data: { state: 'off' } })
                }).catch(e => {});
            }

        } else {
            try {
                const newStream = await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: 1280 } }, audio: true });
                this.camStream = newStream;
                const newVideoTrack = newStream.getVideoTracks()[0];
                const newAudioTrack = newStream.getAudioTracks()[0];
                this.micActive = true; 
                
                const micBtn = document.getElementById('mic-btn-icon');
                if (micBtn) { micBtn.innerHTML = '<i class="fas fa-microphone"></i>'; micBtn.className = 'media-btn active-mic'; }
                
                if (videoElement) {
                    videoElement.srcObject = this.camStream;
                    videoElement.muted = true;
                    videoElement.play().catch(e => {});
                }
                if (container) container.style.display = 'flex';
                if (btn) { btn.innerHTML = '<i class="fas fa-video"></i>'; btn.className = 'media-btn active-cam'; }
                this.camActive = true;

                // التبديل بمسار الكاميرا الحقيقي
                if (typeof WebRTCModule !== 'undefined' && WebRTCModule.peerConnection) {
                    const senders = WebRTCModule.peerConnection.getSenders();
                    const videoSender = senders.find(s => s.track && s.track.kind === 'video');
                    const audioSender = senders.find(s => s.track && s.track.kind === 'audio');
                    
                    if (videoSender) videoSender.replaceTrack(newVideoTrack).catch(e=>{});
                    else WebRTCModule.peerConnection.addTrack(newVideoTrack, this.camStream);

                    if (audioSender) audioSender.replaceTrack(newAudioTrack).catch(e=>{});
                    else WebRTCModule.peerConnection.addTrack(newAudioTrack, this.camStream);
                } else if (typeof WebRTCModule !== 'undefined' && tid) {
                    WebRTCModule.init('teacher', tid, this.camStream);
                }

                if (tid) {
                    fetch(`../zoom_api/media_sync_api.php?action=send_command&tid=${tid}`, {
                        method: 'POST', headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ action: 'TEACHER_CAM', data: { state: 'on' } })
                    }).catch(e => {});
                }
            } catch (err) { alert("تعذر الوصول للكاميرا."); }
        }
    },
// ... (باقي كود TeacherMedia للمايك يبقى كما هو)
    toggleMic: function() {
        if (!this.camStream) {
            alert("الرجاء تشغيل الكاميرا أولاً لتفعيل المايك وبدء البث.");
            return;
        }
        
        const audioTrack = this.camStream.getAudioTracks()[0];
        if (audioTrack) {
            audioTrack.enabled = !audioTrack.enabled;
            this.micActive = audioTrack.enabled;
            
            const btn = document.getElementById('mic-btn-icon');
            if (btn) {
                btn.innerHTML = this.micActive ? '<i class="fas fa-microphone"></i>' : '<i class="fas fa-microphone-slash"></i>';
                btn.className = this.micActive ? 'media-btn active-mic' : 'media-btn';
            }
        }
    }
};

function makeVideoDraggable(elmnt, header) {
    if (!elmnt || !header) return;
    
    let initialX = 0, initialY = 0, startX = 0, startY = 0;

    function triggerSync() {
        const parent = document.getElementById('board-wrapper');
        if (!parent) return;
        const relLeft = (elmnt.offsetLeft / parent.offsetWidth) * 100;
        const relTop = (elmnt.offsetTop / parent.offsetHeight) * 100;
        // 🚀 إضافة حساب العرض والطول
        const relWidth = (elmnt.offsetWidth / parent.offsetWidth) * 100;
        const relHeight = (elmnt.offsetHeight / parent.offsetHeight) * 100;
        
        if (typeof sendSyncCommand === 'function') {
            sendSyncCommand('MOVE_MEDIA', { 
                id: elmnt.id, 
                left: relLeft + '%', top: relTop + '%',
                width: relWidth + '%', height: relHeight + '%' 
            });
        }
    }

    function preparePanel() {
        const rect = elmnt.getBoundingClientRect();
        initialX = elmnt.offsetLeft;
        initialY = elmnt.offsetTop;

        elmnt.style.setProperty('width', rect.width + 'px', 'important');
        elmnt.style.setProperty('position', 'absolute', 'important'); 
        elmnt.style.setProperty('margin', '0', 'important');
        elmnt.style.setProperty('transform', 'none', 'important');
        elmnt.style.setProperty('right', 'auto', 'important');
        elmnt.style.setProperty('bottom', 'auto', 'important');
    }

    function elementDrag(e) {
        e.preventDefault();
        let currentX = e.clientX || (e.touches && e.touches[0].clientX);
        let currentY = e.clientY || (e.touches && e.touches[0].clientY);
        
        let dx = currentX - startX;
        let dy = currentY - startY;
        
        elmnt.style.setProperty('left', (initialX + dx) + 'px', 'important');
        elmnt.style.setProperty('top', (initialY + dy) + 'px', 'important');
    }

    function closeDragElement() {
        header.style.cursor = 'grab';
        document.onmouseup = null;
        document.onmousemove = null;
        document.ontouchend = null;
        document.ontouchmove = null;
        
        triggerSync(); 
    }

    function dragMouseDown(e) {
        e.preventDefault();
        header.style.cursor = 'grabbing';
        
        startX = e.clientX || (e.touches && e.touches[0].clientX);
        startY = e.clientY || (e.touches && e.touches[0].clientY);
        
        preparePanel();

        if (e.type === 'touchstart') {
            document.ontouchend = closeDragElement;
            document.ontouchmove = elementDrag;
        } else {
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }
    }

    header.style.cursor = 'grab';
    header.onmousedown = dragMouseDown;
    header.ontouchstart = dragMouseDown;
    new ResizeObserver(() => triggerSync()).observe(elmnt);
}

setInterval(() => {
    const studentVideos = document.querySelectorAll('#students-video-grid video');
    
    studentVideos.forEach(vid => {
        let isLive = false;
        
        if (vid.srcObject && vid.srcObject.active) {
            const tracks = vid.srcObject.getVideoTracks();
            if (tracks.length > 0 && tracks[0].readyState === 'live' && tracks[0].enabled) {
                isLive = true;
            }
        }
        
        const box = vid.closest('.student-cam-box');
        if (box) {
            if (isLive) {
                vid.style.opacity = '1';
                let offMsg = box.querySelector('.cam-off-msg');
                if (offMsg) offMsg.style.display = 'none';
            } else {
                vid.style.opacity = '0'; 
                let offMsg = box.querySelector('.cam-off-msg');
                if (!offMsg) {
                    offMsg = document.createElement('div');
                    offMsg.className = 'cam-off-msg';
                    offMsg.innerHTML = '<i class="fas fa-video-slash" style="font-size:30px; color:#ef4444; margin-bottom:10px;"></i><span style="font-size:13px; color:#cbd5e1; font-weight:bold;">الطالب أغلق الكاميرا</span>';
                    offMsg.style.cssText = 'position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#0f172a; z-index:5;';
                    box.appendChild(offMsg);
                }
                offMsg.style.display = 'flex';
            }
        }
    });
}, 3000);

// 🚀 محرك إدارة ومزامنة دردشة المدرس المضاف حديثاً 🚀
const ChatModule = {
    isOpen: false,
    lastMsgId: 0,
    roomTid: new URLSearchParams(window.location.search).get('tid') || 'unknown',
    
    toggleChat: function() {
        const panel = document.getElementById('chat-panel');
        this.isOpen = !this.isOpen;
        panel.style.display = this.isOpen ? 'flex' : 'none';
        if (this.isOpen) {
            this.resetBadge();
            this.scrollToBottom();
        }
    },
    
    sendMessage: function() {
        const input = document.getElementById('chat-input');
        const text = input.value.trim();
        if (!text) return;

        let formData = new FormData();
        formData.append('sender', 'الأستاذ');
        formData.append('msg', text);

        fetch(`../zoom_api/chat_api.php?action=send&tid=${this.roomTid}`, {
            method: 'POST',
            body: formData
        });
        
        input.value = '';
    },

    fetchUpdates: function() {
        if (!this.roomTid) return;
        fetch(`../zoom_api/chat_api.php?action=fetch&tid=${this.roomTid}`)
        .then(res => res.json())
        .then(messages => {
            if (messages && messages.length > 0) {
                const container = document.getElementById('chat-messages');
                let unreadCount = 0;
                let hasNew = false;
                
                messages.forEach(msg => {
                    if (parseInt(msg.id) > this.lastMsgId) {
                        this.lastMsgId = parseInt(msg.id);
                        hasNew = true;
                        
                        const isMe = (msg.sender_name === 'الأستاذ');
                        const cssClass = isMe ? 'msg-student' : 'msg-teacher'; 
                        const senderDisplay = isMe ? 'أنت' : msg.sender_name;
                        
                        container.innerHTML += `
                            <div class="msg-bubble ${cssClass}" style="max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; word-wrap: break-word; margin-bottom: 5px; ${isMe ? 'background: #6b1024; color: white; align-self: flex-end; border-top-left-radius: 2px;' : 'background: #fee2e2; border: 1px solid #fca5a5; color: #7f1d1d; align-self: flex-start; border-top-right-radius: 2px;'}">
                                <span class="msg-sender" style="font-size: 10px; font-weight: bold; display: block; opacity: 0.8; margin-bottom:3px;">${senderDisplay}</span>
                                ${msg.message}
                            </div>`;
                            
                        if (!this.isOpen && !isMe) {
                            unreadCount++;
                        }
                    }
                });
                
                if (unreadCount > 0) {
                    const badge = document.getElementById('chat-badge');
                    if (badge) {
                        badge.innerText = parseInt(badge.innerText || 0) + unreadCount;
                        badge.style.display = 'flex';
                        badge.style.animation = 'pop 0.3s ease-out';
                    }
                }
                
                if (hasNew) this.scrollToBottom();
            }
        }).catch(e => console.log(""));
    },

    resetBadge: function() {
        const badge = document.getElementById('chat-badge');
        if (badge) {
            badge.innerText = '0';
            badge.style.display = 'none';
        }
    },

    scrollToBottom: function() {
        const container = document.getElementById('chat-messages');
        if(container) container.scrollTop = container.scrollHeight;
    }
};

document.addEventListener('DOMContentLoaded', () => {
    if (typeof makeVideoDraggable === 'function') {
        makeVideoDraggable(document.getElementById('chat-panel'), document.getElementById('chat-drag-handle'));
    }
    setInterval(() => ChatModule.fetchUpdates(), 1500);
});
</script>

<div id="teacher-ai-box" style="display:none; position:fixed; bottom:80px; right:20px; width:300px; height:400px; background:white; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.3); z-index:9999; padding:15px; border:2px solid #6b1024;">
    <h4 style="margin:0; padding-bottom:10px; border-bottom:1px solid #eee;">🤖 مساعد المعلم الذكي</h4>
    <div id="ai-chat-history" style="height:250px; overflow-y:auto; margin:10px 0; font-size:13px; color:#333;"></div>
    <input type="text" id="ai-input" placeholder="اسألني عن أي شيء..." style="width:100%; padding:8px; border:1px solid #ccc; border-radius:5px;">
    <button id="send-ai-btn" style="width:100%; margin-top:10px; background:#6b1024; color:white; border:none; padding:8px; border-radius:5px; cursor:pointer;">إرسال</button>
</div>


<?php include_once 'live_invite_modal.php'; ?>

<script>
// تفعيل زر بث الشاشة للمدرس (الزر الأزرق)
document.getElementById('btn-screen-share').addEventListener('click', async () => {
    try {
        // 1. طلب التقاط الشاشة من جهاز المدرس
        const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
        
        // 2. إرسال الشاشة عبر محرك WebRTC الحالي
        if (typeof WebRTCModule !== 'undefined') {
            const currentTid = new URLSearchParams(window.location.search).get('tid');
            
            if (!WebRTCModule.peerConnection) {
                // إذا لم يقم المدرس بتشغيل كاميرته بعد، نفتح الاتصال ليرسل الشاشة مباشرة
                WebRTCModule.init('teacher', currentTid, screenStream);
            } else {
                // إذا كانت كاميرا المدرس تعمل، نضيف الشاشة فوقها كمسار (Track) إضافي
                screenStream.getTracks().forEach(track => {
                    WebRTCModule.peerConnection.addTrack(track, screenStream);
                });
                // إرسال تحديث للطالب ليقوم بفتح النافذة المنبثقة
                await WebRTCModule.createOffer(); 
            }
            
            // إغلاق نافذة "المختبر" بمجرد بدء البث لكي يرى المدرس سبورته
            const modal3d = document.getElementById('modal-3d');
            if(modal3d) modal3d.style.display = 'none';
            
            alert("🖥️ بدأ بث الشاشة للطلاب بنجاح! ستظهر لهم كنافذة منبثقة قابلة للتحكم.");
            
            // ما الذي يحدث عندما يضغط المدرس "Stop sharing" من شريط المتصفح؟
            screenStream.getVideoTracks()[0].onended = async () => {
                alert("تم إيقاف بث الشاشة. ستعود الكاميرا الآن.");
                
                // 🚀 إرجاع كاميرا المدرس للبث المباشر
                if (typeof WebRTCModule !== 'undefined' && WebRTCModule.peerConnection && TeacherMedia.camStream) {
                    const camTrack = TeacherMedia.camStream.getVideoTracks()[0];
                    const senders = WebRTCModule.peerConnection.getSenders();
                    const videoSender = senders.find(s => s.track && s.track.kind === 'video');
                    if (videoSender) videoSender.replaceTrack(camTrack); // استبدال الشاشة بالكاميرا
                }
                
                await WebRTCModule.createOffer(); 
            };
        }
    } catch (err) {
        console.log("تم إلغاء بث الشاشة من قبل المدرس.");
    }
});




// 🚀 محرك السحب الحر للنافذة العائمة (خاص بالمختبر والملفات)
document.addEventListener('DOMContentLoaded', () => {
    const mediaWindow = document.getElementById('media-window-wrapper');
    const dragHandle = document.getElementById('media-drag-handle');

    if (mediaWindow && dragHandle) {
        let isDraggingMedia = false;
        let startX, startY, initialLeft, initialTop;

        // عند الضغط على الشريط العلوي العنابي
        dragHandle.addEventListener('mousedown', (e) => {
            isDraggingMedia = true;
            startX = e.clientX;
            startY = e.clientY;
            initialLeft = mediaWindow.offsetLeft;
            initialTop = mediaWindow.offsetTop;
            document.body.style.userSelect = 'none'; // منع تظليل النصوص بالخطأ
        });

        // تحريك النافذة مع الماوس
        document.addEventListener('mousemove', (e) => {
            if (!isDraggingMedia) return;
            const dx = e.clientX - startX;
            const dy = e.clientY - startY;
            mediaWindow.style.left = (initialLeft + dx) + 'px';
            mediaWindow.style.top = (initialTop + dy) + 'px';
        });

        // إفلات النافذة
        document.addEventListener('mouseup', () => {
            isDraggingMedia = false;
            document.body.style.userSelect = '';
        });
    }
});
// بعد أن يفتح المدرس الملف، يرسل هذا الأمر لقاعدة البيانات
function broadcastMedia(fileUrl, fileType) {
    let formData = new FormData();
    formData.append('action', 'SYNC_MEDIA');
    formData.append('url', fileUrl);
    formData.append('type', fileType);
    
    // إرسال لملف المزامنة الخاص بك
    fetch('../zoom_api/media_sync.php', { method: 'POST', body: formData });
}

// 🚀 إجبار زر "سلة المهملات" على مسح النوافذ من شاشة المدرس والطالب معاً
document.addEventListener('DOMContentLoaded', () => {
    const clearBtn = document.getElementById('btn-clear-all');
    if (clearBtn) {
        clearBtn.addEventListener('click', () => {
            // 1. إغلاق ومسح كل نوافذ العرض المفتوحة على شاشة المدرس
            document.querySelectorAll('.draggable-video-wrapper[id^="media-"]').forEach(el => el.remove());
            
            // 2. إرسال أمر مسح لقاعدة البيانات لكي تمسح من عند الطالب
            const tid = new URLSearchParams(window.location.search).get('tid');
            if (tid) {
                fetch(`../zoom_api/media_sync_api.php?action=send_command&tid=${tid}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ action: 'CLEAR' })
                }).catch(e => console.log(e));
            }
        });
    }
});
// 🚀 تنظيف قاعدة البيانات لمنع "الملفات الشبحية" عند الطالب
window.addEventListener('DOMContentLoaded', () => {
    const tid = new URLSearchParams(window.location.search).get('tid');
    if (tid) {
        // 1. عند دخول المدرس، نصفر قاعدة البيانات فوراً لكي يدخل الطالب على سبورة نظيفة
        fetch(`../zoom_api/media_sync_api.php?action=send_command&tid=${tid}`, {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ action: 'CLEAR' })
        }).catch(e => {});

        // 2. عند الضغط على زر (سلة المهملات)، نمسح الملفات من شاشة المدرس والطالب معاً
        const clearBtn = document.getElementById('btn-clear-all');
        if (clearBtn) {
            clearBtn.addEventListener('click', () => {
                // مسح كل نوافذ العرض من شاشة المدرس
                document.querySelectorAll('.draggable-video-wrapper[id^="media-"]').forEach(el => el.remove());
                
                // إرسال أمر المسح لقاعدة البيانات ليمسح شاشة الطالب
                fetch(`../zoom_api/media_sync_api.php?action=send_command&tid=${tid}`, {
                    method: 'POST', headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ action: 'CLEAR' })
                }).catch(e => {});
            });
        }
    }
});

// 🚀 المفتاح الرئيسي: تشغيل كل المحركات بمجرد تحميل الصفحة
window.addEventListener('DOMContentLoaded', () => {
    const urlParams = new URLSearchParams(window.location.search);
    const tid = urlParams.get('tid');

    // 1. تشغيل محرك السبورة وإرسال الرسم للطلاب
    if (typeof WhiteboardModule !== 'undefined') {
        WhiteboardModule.init('teacher');
    }
    if (typeof WhiteboardSync !== 'undefined' && tid) {
        WhiteboardSync.startTeacherSync(tid);
    }

    // 2. تشغيل محرك شبكة الطلاب (لاستقبال الكاميرات)
    if (typeof StudentsGridModule !== 'undefined' && tid) {
        StudentsGridModule.init(tid);
    }

    // 3. تفعيل سحب كاميرا المدرس
    const teacherVideoContainer = document.getElementById('teacher-video-container');
    const teacherVideoDragHandle = document.getElementById('teacher-video-drag-handle');
    if (typeof makeVideoDraggable === 'function' && teacherVideoContainer && teacherVideoDragHandle) {
        makeVideoDraggable(teacherVideoContainer, teacherVideoDragHandle);
    }

    // 4. تشغيل محرك المساعد الذكي
    const sendBtn = document.getElementById('send-ai-btn');
    if (sendBtn) {
        sendBtn.onclick = function() {
            const input = document.getElementById('ai-input');
            const history = document.getElementById('ai-chat-history');
            const msg = input.value;
            if (!msg) return;
            
            history.innerHTML += `<div style="margin:5px 0;"><b>أنت:</b> ${msg}</div>`;
            input.value = '';

            fetch('../live_v2/roozmari_ai.php', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ prompt: msg })
            })
            .then(res => res.json())
            .then(data => {
                if (data.candidates && data.candidates[0]) {
                    history.innerHTML += `<div style="margin:5px 0; color:#6b1024;"><b>المساعد:</b> ${data.candidates[0].content.parts[0].text}</div>`;
                    history.scrollTop = history.scrollHeight;
                }
            }).catch(e => console.error(e));
        };
    }
});

</script>
<script>
// دالة إغلاق السبورة والعودة للرابط النظيف للوحة المدرس
function exitSmartboard() {
    if(confirm("⚠️ هل أنت متأكد من إنهاء البث وإغلاق السبورة؟")) {
        const urlParams = new URLSearchParams(window.location.search);
        const tid = urlParams.get('tid');
        
        // 🚀 مسح رسائل الدردشة الخاصة بهذه الحصة
        if(tid) {
            fetch(`../zoom_api/chat_api.php?action=clear_all&tid=${tid}`);
        }

        if (tid) {
            // 🚀 التوجيه للرابط النظيف مباشرة بدون اسم الملف
            window.location.href = `../teacher_id=${tid}`;
        } else {
            window.location.href = "../"; 
        }
    }
}
</script>
<script>
let mediaRecorder;
let recordedChunks = [];
let currentRecordedBlob = null;
let timerInterval;
let secondsElapsed = 0;
let cropAnimationId;

let pendingScreenStream = null;
let pendingMicStream = null;
let isRecordingSetupPhase = false;

// تجهيز ميزة السحب والتكبير عند فتح الصفحة (لكن الإطار يبقى مخفياً)
document.addEventListener("DOMContentLoaded", () => {
    const frame = document.getElementById("recording-crop-frame");
    const resizer = document.getElementById("crop-resizer");
    if(frame) {
        initDrag(frame);
        initResize(frame, resizer);
    }
});

// 1. المرحلة الأولى: طلب الشاشة وإظهار إطار التحديد
async function toggleRecord() {
    // إذا كان يسجل بالفعل، أوقف التسجيل
    if (mediaRecorder && mediaRecorder.state === "recording") {
        mediaRecorder.stop();
        return;
    }

    // منع تكرار الضغط أثناء الإعداد
    if (isRecordingSetupPhase) return;

    try {
        isRecordingSetupPhase = true;
        
        // طلب الشاشة والمايك
        pendingScreenStream = await navigator.mediaDevices.getDisplayMedia({ video: { cursor: "always" }, audio: true });
        pendingMicStream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true } });

        // إظهار إطار القص والأزرار الخاصة به للمدرس ليتحكم بها
        const frame = document.getElementById("recording-crop-frame");
        const cropHeader = document.getElementById("crop-header");
        const resizer = document.getElementById("crop-resizer");

        frame.style.display = "block";
        frame.style.border = "3px dashed #38bdf8";
        cropHeader.style.display = "flex";
        resizer.style.display = "block";

    } catch (err) {
        console.error(err);
        isRecordingSetupPhase = false;
        alert("⚠️ تم إلغاء العملية أو لم يتم منح صلاحية الشاشة والميكروفون.");
    }
}

// 2. إلغاء العملية قبل البدء
function cancelRecordingSetup() {
    isRecordingSetupPhase = false;
    document.getElementById("recording-crop-frame").style.display = "none";
    if (pendingScreenStream) pendingScreenStream.getTracks().forEach(t => t.stop());
    if (pendingMicStream) pendingMicStream.getTracks().forEach(t => t.stop());
    pendingScreenStream = null;
    pendingMicStream = null;
}

// 3. المرحلة الثانية: بدء التسجيل الفعلي (بعد الضغط على الزر الأخضر في الإطار)
async function startActualRecording() {
    isRecordingSetupPhase = false;
    const frame = document.getElementById('recording-crop-frame');
    const cropHeader = document.getElementById('crop-header');
    const resizer = document.getElementById('crop-resizer');

    // إخفاء أزرار التحكم في الإطار لكي لا تزعج المدرس وتغيير لونه للأحمر الخفيف
    cropHeader.style.display = 'none';
    resizer.style.display = 'none';
    frame.style.border = '2px dashed rgba(239, 68, 68, 0.7)';

    const recIcon = document.getElementById('rec-icon');
    const bubble = document.getElementById('rec-status-bubble');

    const videoElem = document.createElement('video');
    videoElem.srcObject = pendingScreenStream;
    videoElem.muted = true;
    await videoElem.play();

    const canvasElem = document.createElement('canvas');
    const canvasCtx = canvasElem.getContext('2d');

    function renderCroppedFrame() {
        if (videoElem.paused || videoElem.ended) return;

        const rect = frame.getBoundingClientRect();
        const scaleX = videoElem.videoWidth / window.innerWidth;
        const scaleY = videoElem.videoHeight / window.innerHeight;

        const cropX = rect.left * scaleX;
        const cropY = rect.top * scaleY;
        const cropWidth = rect.width * scaleX;
        const cropHeight = rect.height * scaleY;

        canvasElem.width = rect.width;
        canvasElem.height = rect.height;

        canvasCtx.drawImage(videoElem, cropX, cropY, cropWidth, cropHeight, 0, 0, rect.width, rect.height);
        cropAnimationId = requestAnimationFrame(renderCroppedFrame);
    }
    
    renderCroppedFrame();

    const croppedVideoTrack = canvasElem.captureStream(30).getVideoTracks()[0];
    const finalTracks = [croppedVideoTrack, ...pendingMicStream.getAudioTracks()];
    if (pendingScreenStream.getAudioTracks().length > 0) {
        finalTracks.push(pendingScreenStream.getAudioTracks()[0]);
    }

    const combinedStream = new MediaStream(finalTracks);
    mediaRecorder = new MediaRecorder(combinedStream, { mimeType: 'video/webm;codecs=vp9' });
    recordedChunks = [];

    mediaRecorder.ondataavailable = e => { if (e.data.size > 0) recordedChunks.push(e.data); };

    mediaRecorder.onstop = () => {
        cancelAnimationFrame(cropAnimationId);
        clearInterval(timerInterval);
        
        const blob = new Blob(recordedChunks, { type: 'video/webm' });
        
        // تنظيف الواجهة وإخفاء كل شيء
        if (bubble) bubble.style.display = 'none';
        if (recIcon) recIcon.style.color = ""; 
        frame.style.display = "none";
        
        showSaveOptions(blob);
        
        combinedStream.getTracks().forEach(track => track.stop());
        pendingScreenStream.getTracks().forEach(track => track.stop());
        pendingMicStream.getTracks().forEach(track => track.stop());
        pendingScreenStream = null;
        pendingMicStream = null;
    };

    mediaRecorder.start();
    
    // تشغيل المؤقت الزمني
    secondsElapsed = 0;
    document.getElementById('live-timer-clock').innerText = "00:00:00";
    timerInterval = setInterval(() => {
        secondsElapsed++;
        let hrs = Math.floor(secondsElapsed / 3600).toString().padStart(2, '0');
        let mins = Math.floor((secondsElapsed % 3600) / 60).toString().padStart(2, '0');
        let secs = (secondsElapsed % 60).toString().padStart(2, '0');
        document.getElementById('live-timer-clock').innerText = `${hrs}:${mins}:${secs}`;
    }, 1000);

    // تحديث شكل الأزرار
    if (recIcon) recIcon.style.color = "#ef4444"; 
    if (bubble) bubble.style.display = 'flex';

    pendingScreenStream.getVideoTracks()[0].onended = () => {
        if (mediaRecorder && mediaRecorder.state !== 'inactive') mediaRecorder.stop();
    };
}

// -----------------------------------------
// باقي الدوال الأساسية (السحب، التكبير، الحفظ)
// -----------------------------------------
function initDrag(el) {
    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    el.onmousedown = (e) => {
        if(e.target.id === "crop-resizer" || e.target.tagName === "BUTTON") return;
        e.preventDefault();
        pos3 = e.clientX; pos4 = e.clientY;
        document.onmouseup = () => { document.onmouseup = null; document.onmousemove = null; };
        document.onmousemove = (ev) => {
            ev.preventDefault();
            pos1 = pos3 - ev.clientX; pos2 = pos4 - ev.clientY;
            pos3 = ev.clientX; pos4 = ev.clientY;
            el.style.top = (el.offsetTop - pos2) + "px";
            el.style.left = (el.offsetLeft - pos1) + "px";
        };
    };
}

function initResize(el, handle) {
    handle.onmousedown = (e) => {
        e.preventDefault();
        let startWidth = el.offsetWidth; let startHeight = el.offsetHeight;
        let startX = e.clientX; let startY = e.clientY;
        document.onmouseup = () => { document.onmouseup = null; document.onmousemove = null; };
        document.onmousemove = (ev) => {
            el.style.width = (startWidth + (ev.clientX - startX)) + "px";
            el.style.height = (startHeight + (ev.clientY - startY)) + "px";
        };
    };
}

function showSaveOptions(recordedBlob) {
    currentRecordedBlob = recordedBlob;
    let savedTitle = localStorage.getItem('roozmari_lesson_title');
    let titleInput = document.getElementById('record-title');
    titleInput.value = savedTitle && savedTitle.trim() !== '' ? savedTitle : "درس_مقتص_" + new Date().toISOString().slice(0,10);
    document.getElementById('save-record-modal').style.display = 'flex';
}

function closeSaveModal() {
    document.getElementById('save-record-modal').style.display = 'none';
    currentRecordedBlob = null;
}

function saveRecordAction(choice) {
    if (!currentRecordedBlob) return;
    let title = document.getElementById('record-title').value.trim();
    while (!title) {
        title = prompt("يرجى كتابة عنوان للحصة لحفظها:");
        if (title === null) return;
    }
    
    const statusText = document.getElementById('save-status');

    if (choice === 'pc' || choice === 'both') {
        const url = URL.createObjectURL(currentRecordedBlob);
        const a = document.createElement('a');
        a.href = url;
        a.download = title.replace(/[^a-zA-Z0-9أ-ي\s]/g, '_') + '.webm';
        a.click();
        if(choice === 'pc') { alert("✅ تم الحفظ في جهازك بنجاح!"); closeSaveModal(); return; }
    }

    if (choice === 'server' || choice === 'both') {
        statusText.style.display = 'block';
        statusText.style.color = '#f59e0b';
        statusText.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الرفع للأرشيف...';

        const formData = new FormData();
        formData.append('api', 'upload');
        formData.append('video_file', currentRecordedBlob, 'live_record.webm');
        formData.append('title', title);
        
        const urlParams = new URLSearchParams(window.location.search);
        formData.append('teacher_id', urlParams.get('tid') || 'unknown');

        fetch('archive_live.php', { method: 'POST', body: formData })
        .then(async res => {
            const rawResponse = await res.text();
            try { return JSON.parse(rawResponse); } catch(e) { throw new Error(rawResponse); }
        })
        .then(res => {
            if(res.success) {
                statusText.style.color = '#22c55e';
                statusText.innerHTML = '✅ تم الحفظ في أرشيف المنصة!';
                setTimeout(closeSaveModal, 2000);
            } else {
                statusText.style.color = '#ef4444';
                statusText.innerHTML = '❌ فشل الرفع: ' + res.message;
            }
        })
        .catch(err => {
            statusText.style.color = '#ef4444';
            statusText.innerHTML = 'خطأ اتصال. تم تحويل الملف لجهازك كاحتياط.<br><textarea style="width:100%; height:40px;" readonly>' + err.message + '</textarea>';
        });
    }
}
</script>

<div id="rec-status-bubble" class="rec-bubble" style="display:none; position: fixed; bottom: 110px; right: 20px; background: rgba(15, 23, 42, 0.9); color: white; padding: 12px 20px; border-radius: 30px; z-index: 9999999 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.4); font-weight: bold; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); direction: rtl; align-items: center; font-family: sans-serif;">
    <span style="color:#ef4444; animation: pulse 1s infinite; margin-left: 8px; font-size: 18px;">●</span> 
    <span style="margin-left: 10px;">جاري التسجيل:</span>
    <span id="live-timer-clock" style="color: #38bdf8; font-family: monospace; font-size: 18px; letter-spacing: 1px;">00:00:00</span>
</div>

<div id="recording-crop-frame" style="display: none; position: fixed; top: 15%; left: 15%; width: 70%; height: 70%; border: 3px dashed #38bdf8; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6); z-index: 999998; border-radius: 8px; pointer-events: auto; cursor: move;">
    
    <div id="crop-header" style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 999999;">
        <div style="background: rgba(15, 23, 42, 0.9); color: white; padding: 8px 15px; font-size: 13px; font-weight: bold; border-radius: 8px; display: flex; align-items: center; gap: 5px;">
            <i class="fas fa-expand-arrows-alt"></i> حدد منطقة الشرح
        </div>
        <button onclick="startActualRecording()" style="background: #22c55e; color: white; border: none; padding: 8px 15px; font-size: 14px; font-weight: bold; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 10px rgba(34, 197, 94, 0.4); display: flex; align-items: center; gap: 5px; transition: 0.2s;">
            <i class="fas fa-play"></i> بدء التسجيل الآن
        </button>
        <button onclick="cancelRecordingSetup()" style="background: #ef4444; color: white; border: none; padding: 8px 15px; font-size: 14px; font-weight: bold; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4); display: flex; align-items: center; gap: 5px; transition: 0.2s;">
            <i class="fas fa-times"></i> إلغاء
        </button>
    </div>

    <div id="crop-resizer" style="width: 25px; height: 25px; background: #38bdf8; position: absolute; right: -12px; bottom: -12px; cursor: nwse-resize; border-radius: 50%; border: 3px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.3);"></div>
</div>

<div id="save-record-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index: 99999999 !important; justify-content: center; align-items: center; backdrop-filter: blur(5px);">
    <div style="background:#fff; padding:25px; border-radius:15px; width:90%; max-width:400px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,0.5); font-family: sans-serif; direction: rtl;">
        <h3 style="margin-top:0; color:#1e293b; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px;">
            <i class="fas fa-save" style="color: #3b82f6;"></i> إعدادات حفظ الحصة
        </h3>
        <input type="text" id="record-title" placeholder="أدخل اسم الحصة (مثال: درس الرياضيات)" style="width:100%; box-sizing: border-box; padding:12px; margin-bottom:20px; border:1px solid #cbd5e1; border-radius:8px; font-weight: bold; text-align: center;">
        <p style="margin-bottom:15px; font-weight:bold; color:#475569;">أين تريد حفظ هذا التسجيل المجتزأ؟</p>
        <div style="display:flex; flex-direction:column; gap:10px;">
            <button onclick="saveRecordAction('pc')" style="background:#3b82f6; color:white; padding:12px; border:none; border-radius:8px; cursor:pointer; font-weight:bold;">💻 حفظ في جهازي الشخصي</button>
            <button onclick="saveRecordAction('server')" style="background:#22c55e; color:white; padding:12px; border:none; border-radius:8px; cursor:pointer; font-weight:bold;">☁️ حفظ في أرشيف المنصة مباشرة</button>
            <button onclick="saveRecordAction('both')" style="background:#f59e0b; color:white; padding:12px; border:none; border-radius:8px; cursor:pointer; font-weight:bold;">📦 حفظ في الجهاز والمنصة معاً</button>
            <button onclick="closeSaveModal()" style="background:#ef4444; color:white; padding:10px; border:none; border-radius:8px; cursor:pointer; margin-top:10px;">❌ إلغاء وحذف</button>
        </div>
        <p id="save-status" style="margin-top:15px; font-weight:bold; display:none; padding: 10px; background: #f8fafc; border-radius: 8px;"></p>
    </div>
</div>
<script>
// ==========================================================
// 🚀 ربط أزرار (البدء / الإيقاف) بقاعدة البيانات ولوحة الإدارة
// ==========================================================

// 1. دالة بدء البث (ترتبط بالزر الأخضر)
async function forceStartWebRTCBroadcast() {
    const tid = new URLSearchParams(window.location.search).get('tid');
    if (!tid) return;

    // 💡 إذا لم يقم المدرس بتشغيل الكاميرا بعد، سنصنع "تياراً وهمياً صامتاً"
    // لكي يقبله نظام الـ WebRTC وينشئ إشارة البث (Offer) بنجاح.
    let streamToUse = TeacherMedia.camStream;
    if (!streamToUse) {
        if (!window.teacherDummyCanvas) {
            window.teacherDummyCanvas = document.createElement('canvas');
            window.teacherDummyCanvas.width = 640; window.teacherDummyCanvas.height = 480;
            const ctx = window.teacherDummyCanvas.getContext('2d');
            ctx.fillStyle = '#000'; ctx.fillRect(0, 0, 640, 480); // شاشة سوداء
        }
        streamToUse = window.teacherDummyCanvas.captureStream(15);
    }

    // 🚀 تهيئة الاتصال وإجبار النظام على إرسال الـ Offer لقاعدة البيانات
    if (typeof WebRTCModule !== 'undefined') {
        await WebRTCModule.init('teacher', tid, streamToUse);
        setTimeout(async () => {
            await WebRTCModule.createOffer();
            console.log("✅ تم إرسال إشارة البث للوحة الإدارة بنجاح!");
        }, 500); // تأخير نصف ثانية لضمان استقرار الاتصال
    }
}

// 2. دالة إيقاف البث (ترتبط بالزر الأحمر)
function forceStopWebRTCBroadcast() {
    const tid = new URLSearchParams(window.location.search).get('tid');
    if (tid) {
        // إرسال أمر مسح الإشارة من قاعدة البيانات ليختفي المدرس من لوحة الإدارة
        fetch(`../zoom_api/waiting_room_api.php?action=clear_signal&tid=${tid}`);
        console.log("🛑 تم إيقاف البث ومسحه من لوحة الإدارة.");
    }
}
</script>

<script>
// ==========================================================
// 🚀 نظام اصطياد الأزرار وربطها بلوحة الإدارة (Hijack System)
// ==========================================================
document.addEventListener('DOMContentLoaded', () => {
    
    // 1. اصطياد الزر الأخضر (بدء البث للطلاب)
    const originalStartLive = window.sendLiveAlert || function(){};
    window.sendLiveAlert = function() {
        // تشغيل الوظيفة الأصلية (إشعار الطلاب)
        originalStartLive(); 
        
        // 🚀 إرسال الإشارة السرية للوحة الإدارة
        const tid = new URLSearchParams(window.location.search).get('tid');
        if(tid) {
            fetch(`../zoom_api/waiting_room_api.php?action=set_live_status&status=active&tid=${tid}`)
            .then(res => res.json())
            .then(data => {
                console.log("🟢 تم إرسال إشارة البث للوحة الإدارة بنجاح!");
            }).catch(err => console.log(err));
        }
    };

    // 2. اصطياد الزر الأحمر (إيقاف البث)
    const originalStopLive = window.stopLiveAlert || function(){};
    window.stopLiveAlert = function() {
        // تشغيل الوظيفة الأصلية
        originalStopLive();
        
        // 🚀 إرسال إشارة الإيقاف للوحة الإدارة
        const tid = new URLSearchParams(window.location.search).get('tid');
        if(tid) {
            fetch(`../zoom_api/waiting_room_api.php?action=set_live_status&status=inactive&tid=${tid}`)
            .then(res => res.json())
            .then(data => {
                console.log("🔴 تم مسح البث من لوحة الإدارة.");
            }).catch(err => console.log(err));
        }
    };
});
</script>

</body>
</html>