<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webinar Room</title>
    <link rel="icon" type="/images/x-icon" href="/images/favicon.ico">
    <script src="/socket.io/socket.io.js"></script>
    <script>
        function loadMediasoup() {
            return new Promise((resolve, reject) => {
                if (window.mediasoupClient) {
                    return resolve();
                }
                
                const script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/mediasoup-client@3.6.47/dist/mediasoup-client.min.js';
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }
        
        // Load mediasoup before webinar.js
        // document.addEventListener('DOMContentLoaded', async () => {
        //     try {
        //         await loadMediasoup();
        //         // Now it's safe to load webinar.js
        //         const script = document.createElement('script');
        //         script.src = '/js/webinar.js';
        //         document.head.appendChild(script);
        //     } catch (error) {
        //         console.error('Failed to load mediasoup:', error);
        //         alert('Failed to load required components. Please refresh the page.');
        //     }
        // });
    </script>
    <script src="/js/webinar.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="/css/webinar.css">
</head>
<body>
    <div class="webinar-container">
        <!-- Main Content Area -->
        <div class="main-content">
            
            <!-- Video Container -->
            <div class="video-container" id="videoContainer">
                <!-- Presenter's video will be here -->
            </div>
            
            <!-- Controls -->
            <div class="controls">
                <button id="toggleAudio" class="control-btn" data-tooltip="Toggle Microphone">🎤</button>
                <button id="toggleVideo" class="control-btn" data-tooltip="Toggle Camera">🎥</button>
                <button id="screenShare" class="control-btn" data-tooltip="Share Screen">🖥️</button>
                <button id="leaveBtn" class="control-btn danger" data-tooltip="Leave Webinar">Leave</button>
            </div>
        </div>
        <div id="remoteVideos" class="remoteVideos"></div>
        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Participants List -->
            <div class="participants">
                <h3>Participants (<span id="participantCount">0</span>)</h3>
                <ul id="participantsList"></ul>
            </div>
            
            <!-- Chat -->
            <div class="chat">
                <h3>Chat</h3>
                <div class="chat-messages" id="chatMessages"></div>
                <div class="chat-input">
                    <input type="text" id="chatInput" placeholder="Type your message...">
                    <button id="sendMessage">Send</button>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>