<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Networking Hub</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href="/css/networkingstyle.css">
    <script src="https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/uuid.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h2 class="animate__animated animate__fadeIn"><i class="fas fa-users"></i> Networking Hub</h2>
            <div class="search-box">
                <input type="text" placeholder="Search companies...">
            </div>
            <ul id="company-list" class="animated-list"></ul>
        </div>
                    
        <!-- Main Content Area -->
        <div class="main-content">
            <div class="help-support-container">
                <button class="help-button" id="helpButton">
                  <i class="fas fa-question-circle"></i> Help & Support
                </button>
                <a href="/logout" class="logout-btn">Logout</a>
                <div class="help-modal" id="helpModal">
                    <div class="help-content">
                        <div class="help-header">
                            <span class="close-help">&times;</span>
                            <h3>Help Center</h3>
                       </div>
                      <div class="help-options">
                        <button class="help-option-btn" id="faqBtn">
                          <i class="fas fa-book"></i> FAQs & Guides
                        </button>
                        <button class="help-option-btn" id="supportBtn">
                          <i class="fas fa-headset"></i> Contact Support
                        </button>
                      </div>
                    </div>
                  </div>
                  
                  <!-- FAQ Modal -->
                  <div class="help-modal" id="faqModal">
                    <div class="help-content">
                        <div class="help-header">
                            <span class="close-help">&times;</span>
                            <button class="back-btn" id="backToHelp">
                                <i class="fas fa-arrow-left"></i> Back
                            </button>
                      </div>
                      <h3>FAQs & Guides</h3>
                      <div class="faq-content">
                        <div class="tab-content active" id="faq">
                            <div class="faq-item">
                              <h4>1. How do I create a new discussion?</h4>
                              <p>Click the "New Discussion" button and fill out the form with your title and content.</p>
                            </div>
                            <div class="faq-item">
                              <h4>2. How can I join a meeting?</h4>
                              <p>Click on any meeting invitation you receive or go to the Meetings section.</p>
                            </div>
                          </div>
                      </div>
                    </div>
                  </div>
                  
                  <!-- Support Modal -->
                  <div class="help-modal" id="supportModal">
                    <div class="help-content">
                        <div class="help-header">
                            <span class="close-help">&times;</span>
                            <button class="back-btn" id="backToHelpFromSupport">
                                <i class="fas fa-arrow-left"></i> Back
                            </button>
                        </div>
                      <h3>Contact Support</h3>
                      <div class="support-content">
                        <div class="direct-contact">
                            <h4>Contact Us Directly</h4>
                            <p><i class="fas fa-envelope"></i> Email: <a href="mailto:support@yourcompany.com">support@yourcompany.com</a></p>
                            <p><i class="fas fa-phone"></i> Phone: <a href="tel:+1234567890">+1 (234) 567-890</a></p>
                            <p><i class="fas fa-clock"></i> Support Hours: Mon-Fri, 9AM-5PM</p>
                          </div>
                          
                          <div class="support-form">
                            <h4>Or send us a message</h4>
                            <form id="supportForm">
                              <div class="form-group">
                                <label>Your Name (Optional)</label>
                                <input type="text" id="supportName">
                              </div>
                              <div class="form-group">
                                <label>Your Email*</label>
                                <input type="email" id="supportEmail" required>
                              </div>
                              <div class="form-group">
                                <label>Phone Number (Optional)</label>
                                <input type="tel" id="supportPhone" placeholder="For call back support">
                              </div>
                              <div class="form-group">
                                <label>Message*</label>
                                <textarea id="supportMessage" rows="5" required></textarea>
                              </div>
                              <button type="submit" class="btn btn-primary">Send Message</button>
                            </form>
                          </div>
                      </div>
                    </div>
                  </div>
            </div>
            <div class="quick-meeting-container animate__zoomIn" id="quick-meeting-container">
                <div class="meeting-header">
                    <h3><i class="fas fa-video"></i> Quick Meeting Hub</h3>
                    <button class="btn btn-primary start-meeting-btn" onclick="showScheduleMeetingModal()">
                        <i class="fas fa-plus"></i> Schedule Meeting
                    </button>
                </div>
                <div class="meeting-controls">
                    <button class="btn btn-primary" onclick="startQuickMeeting()">
                        <i class="fas fa-bolt"></i> Start Instant Meeting
                    </button>
                </div>
            </div>
            
            <button class="meeting-history-btn" onclick="showMeetingHistory()">
                <i class="fas fa-history"></i> View Meeting History
            </button>
            <div class="forum-container">
                <div class="forum-header">
                    <h3><i class="fas fa-comments"></i> Community Discussions</h3>
                    <button class="btn btn-primary" onclick="showNewDiscussionModal()">
                        <i class="fas fa-plus"></i> Start New Discussion
                    </button>
                </div>
                
                <div class="discussions-list" id="discussions-list">
                    <!-- Discussions will be loaded here -->
                </div>
                <div id="pagination-controls"></div>
            </div>
        </div>
                
        
    </div>
    
    <!-- Modal Container -->
    <div id="action-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div id="modal-body"></div>
        </div>
    </div>

    <script src="/js/networkingjs.js"></script>
    <script src='https://meet.jit.si/external_api.js'></script>
</body>
</html>