<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Event Webinars</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/css/webinar.css">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4895ef;
            --dark: #1b263b;
            --light: #f8f9fa;
            --success: #4cc9f0;
            --danger: #f72585;
            --warning: #f8961e;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(45deg, 
            rgba(10, 134, 97, 0.58) 0%, 
            rgba(3, 27, 83, 0.9) 100%);
            color: var(--dark);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        h1 {
            color:darkgreen;
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        
        
    </style>
</head>
<body>
    <header>
        <a href="/logout" class="logout-btn">Logout</a>
        <div class="container">
            <h1>Virtual Event Webinars</h1>
            <p class="subtitle"><b>Learn, connect and grow with our expert-led sessions</b></p>
        </div>
    </header>

    <div class="container">
        <div class="search-filter">
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input class = "searchBox" id= "searchBox" type="text" placeholder="Search webinars...">
            </div>
            <div class="filter-dropdown">
                <button class="filter-btn">
                    Filter by <i class="fas fa-chevron-down"></i>
                </button>
                <div class="filter-menu">
                    <div class="filter-item">All Webinars</div>
                    <div class="filter-item">Live Now</div>
                    <div class="filter-item">Upcoming</div>
                    <div class="filter-item">Recordings</div>
                    <div class="filter-item">By Category</div>
                </div>
            </div>
        </div>

        <div class="tabs">
            <button class="tab-btn active" data-tab="live">Live Webinars</button>
            <button class="tab-btn" data-tab="upcoming">Upcoming</button>
            <button class="tab-btn" data-tab="recordings">Recordings</button>
        </div>

        <div class="tab-content active" id="live">
            <div class="webinar-grid">
                <!-- Content will be loaded dynamically -->
                <div class="empty-state">
                    <i class="fas fa-spinner fa-spin"></i>
                    <p>Loading live webinars...</p>
                </div>
            </div>
        </div>

        <div class="tab-content" id="upcoming">
            <div class="webinar-grid">
                <div class="empty-state">
                    <i class="fas fa-spinner fa-spin"></i>
                    <p>Loading upcoming webinars...</p>
                </div>
            </div>
        </div>

        <div class="tab-content" id="recordings">
            <div class="webinar-grid">
                <div class="empty-state">
                    <i class="fas fa-spinner fa-spin"></i>
                    <p>Loading recorded webinars...</p>
                </div>
            </div>
        </div>
    </div>

    <footer style="text-align: center; padding: 20px; background-color: #f5f7fa; color: #666; margin-top: 20px;">
        <p>&copy; 2023 Arena Expos. All rights reserved.</p>
        <p>Follow us on <a href="#" style="color: var(--primary);">Twitter</a>, <a href="#" style="color: var(--primary);">Facebook</a>, and <a href="#" style="color: var(--primary);">LinkedIn</a></p>

    </footer>
    <script src="/socket.io/socket.io.js"></script>
  <script src="/js/webinar.js"></script>
  <script>
    // Debug session issues
    window.addEventListener('load', () => {
      console.log('Webinar page loaded');
      fetch('/api/verify-session', { credentials: 'include' })
        .then(response => response.json())
        .then(data => console.log('Initial session check:', data))
        .catch(err => console.error('Session check error:', err));
    });
  </script>
</body>
</html>