script_fixed.js

/**
 * MyTheater - Main JavaScript File
 * Handles navigation, search, and general functionality
 */

document.addEventListener('DOMContentLoaded', function() {
    // Initialize all components
    initNavigation();
    initSearch();
    initHamburgerMenu();
    initVideoPlayer();
    initSlider(); // Initialize homepage slider

    // Add unique class to first slide image for specific styling
    const firstSlideImg = document.querySelector('.slides-container .slide-item[aria-label="Iron Man movie"] img');
    if (firstSlideImg) {
        firstSlideImg.classList.add('first-slide-img');
    }

    // Check for search parameter in URL and auto-search if present
    const urlParams = new URLSearchParams(window.location.search);
    const searchQuery = urlParams.get('search');
    if (searchQuery) {
        console.log('Auto-searching for:', searchQuery);
        // Set the search input value
        const searchInput = document.getElementById('searchInput');
        if (searchInput) {
            searchInput.value = decodeURIComponent(searchQuery);
        }
        // Perform the search
        performSearch(decodeURIComponent(searchQuery));
    }
});

/**
 * Initialize navigation functionality
 */
function initNavigation() {
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');

    if (hamburger && navLinks) {
        hamburger.addEventListener('click', function() {
            const isExpanded = hamburger.getAttribute('aria-expanded') === 'true';

            hamburger.setAttribute('aria-expanded', !isExpanded);
            navLinks.classList.toggle('active');
        });
    }

    // Close mobile menu when clicking outside
    document.addEventListener('click', function(e) {
        if (hamburger && navLinks) {
            if (!hamburger.contains(e.target) && !navLinks.contains(e.target)) {
                hamburger.setAttribute('aria-expanded', 'false');
                navLinks.classList.remove('active');
            }
        }
    });

    // Close mobile menu when pressing Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && navLinks && navLinks.classList.contains('active')) {
            hamburger.setAttribute('aria-expanded', 'false');
            navLinks.classList.remove('active');
        }
    });
}

/**
 * Initialize search functionality
 */
function initSearch() {
    const searchForm = document.querySelector('.search-form');
    const searchInput = document.getElementById('searchInput');

    if (searchForm && searchInput) {
        searchForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const query = searchInput.value.trim();

            if (query) {
                performSearch(query);
            }
        });

        // Add real-time search on input
        searchInput.addEventListener('input', function() {
            const query = searchInput.value.trim();
            if (query.length > 2) {
                performSearch(query);
            } else if (query.length === 0) {
                // Show all content when search is cleared
                showAllContent();
            }
        });
    }
}

/**
 * Perform search through all content
 */
function performSearch(query) {
    console.log('Performing search for:', query);
    const contentItems = document.querySelectorAll('.content-item');
    const sections = document.querySelectorAll('.content-section');
    let hasResults = false;

    console.log('Found', contentItems.length, 'content items to search');

    // Remove any existing no-results message
    removeNoResultsMessage();

    contentItems.forEach((item, index) => {
        const title = item.querySelector('h3')?.textContent?.toLowerCase() || '';
        const meta = item.querySelector('.item-meta')?.textContent?.toLowerCase() || '';
        const searchText = (title + ' ' + meta).toLowerCase();

        console.log(`Item ${index + 1}: '${title}' - '${meta}' - '${searchText}'`);

        if (searchText.includes(query.toLowerCase())) {
            item.style.display = 'block';
            item.classList.add('search-result');
            hasResults = true;
            console.log(`✅ Item ${index + 1} matches: '${title}'`);
        } else {
            item.style.display = 'none';
            item.classList.remove('search-result');
            console.log(`❌ Item ${index + 1} no match: '${title}'`);
        }
    });

    // Check if any section has visible items
    sections.forEach(section => {
        const visibleItems = section.querySelectorAll('.content-item[style*="block"]');
        const sectionTitle = section.querySelector('.section-title');

        if (visibleItems.length === 0) {
            // Hide empty sections
            section.style.display = 'none';
        } else {
            section.style.display = 'block';
            // Add search indicator to section title
            if (sectionTitle && !sectionTitle.textContent.includes('(Search Results)')) {
                sectionTitle.textContent = sectionTitle.textContent.replace(' (Search Results)', '') + ' (Search Results)';
            }
        }
    });

    // Show no results message if no items found
    if (!hasResults) {
        showNoResultsMessage(query);
    }
}

/**
 * Show all content (reset search)
 */
function showAllContent() {
    const contentItems = document.querySelectorAll('.content-item');
    const sections = document.querySelectorAll('.content-section');
    const sectionTitles = document.querySelectorAll('.section-title');

    contentItems.forEach(item => {
        item.style.display = 'block';
        item.classList.remove('search-result');
    });

    sections.forEach(section => {
        section.style.display = 'block';
    });

    // Remove search indicators from section titles
    sectionTitles.forEach(title => {
        title.textContent = title.textContent.replace(' (Search Results)', '');
    });

    // Remove any existing no-results message
    removeNoResultsMessage();
}

/**
 * Show no results message
 */
function showNoResultsMessage(query) {
    removeNoResultsMessage(); // Remove any existing message

    const mainContent = document.querySelector('.main-content');
    if (mainContent) {
        const noResultsDiv = document.createElement('div');
        noResultsDiv.className = 'no-results-message';
        noResultsDiv.innerHTML = `
            <div style="text-align: center; padding: 2rem; background: rgba(0,0,0,0.8); border-radius: 10px; margin: 2rem 0;">
                <h3 style="color: #fff; margin-bottom: 1rem;">No results found</h3>
                <p style="color: #ccc; margin-bottom: 1rem;">No movies or TV shows match "${query}"</p>
                <button onclick="showAllContent()" style="background: #ff0000; color: white; border: none; padding: 0.5rem 1rem; border-radius: 5px; cursor: pointer;">Show All Content</button>
            </div>
        `;

        // Insert after the hero section
        const heroSection = document.querySelector('.hero-section');
        if (heroSection) {
            heroSection.insertAdjacentElement('afterend', noResultsDiv);
        } else {
            mainContent.insertBefore(noResultsDiv, mainContent.firstChild);
        }
    }
}

/**
 * Remove no results message
 */
function removeNoResultsMessage() {
    const noResultsMessage = document.querySelector('.no-results-message');
    if (noResultsMessage) {
        noResultsMessage.remove();
    }
}

/**
 * Initialize hamburger menu functionality
 */
function initHamburgerMenu() {
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');

    if (hamburger && navLinks) {
        hamburger.addEventListener('click', function() {
            const isExpanded = hamburger.getAttribute('aria-expanded') === 'true';

            hamburger.setAttribute('aria-expanded', !isExpanded);
            navLinks.classList.toggle('active');
        });

        // Close mobile menu on window resize
        window.addEventListener('resize', function() {
            if (window.innerWidth > 768) {
                hamburger.setAttribute('aria-expanded', 'false');
                navLinks.classList.remove('active');
            }
        });
    }
}

/**
 * Initialize video player functionality
 */
function initVideoPlayer() {
    const video = document.getElementById('mainVideo');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const muteBtn = document.getElementById('muteBtn');
    const volumeSlider = document.getElementById('volumeSlider');
    const progressBar = document.getElementById('progressBar');
    const fullscreenBtn = document.getElementById('fullscreenBtn');
    const currentTimeEl = document.getElementById('currentTime');
    const durationEl = document.getElementById('duration');
    const videoControls = document.getElementById('videoControls');
    const videoLoading = document.getElementById('videoLoading');

    // Episode navigation
    const episodeBtns = document.querySelectorAll('.episode-btn');
    const prevEpisodeBtn = document.getElementById('prevEpisode');
    const nextEpisodeBtn = document.getElementById('nextEpisode');
    const currentEpisodeEl = document.getElementById('currentEpisode');

    let currentEpisode = 1;
    const totalEpisodes = 12;

    if (!video) return; // Exit if video element doesn't exist

    // Show loading spinner
    function showLoading() {
        if (videoLoading) {
            videoLoading.style.display = 'block';
        }
    }

    // Hide loading spinner
    function hideLoading() {
        if (videoLoading) {
            videoLoading.style.display = 'none';
        }
    }

    // Format time for display
    function formatTime(seconds) {
        const mins = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    }

    // Update progress bar
    function updateProgress() {
        if (progressBar && video.duration) {
            const progress = (video.currentTime / video.duration) * 100;
            progressBar.value = progress;
        }
    }

    // Update time display
    function updateTimeDisplay() {
        if (currentTimeEl && durationEl) {
            currentTimeEl.textContent = formatTime(video.currentTime);
            durationEl.textContent = formatTime(video.duration);
        }
    }

    // Toggle play/pause
    function togglePlayPause() {
        if (video.paused) {
            video.play();
            playPauseBtn?.querySelector('.play-icon')?.setAttribute('style', 'display: none;');
            playPauseBtn?.querySelector('.pause-icon')?.setAttribute('style', 'display: block;');
            playPauseBtn?.setAttribute('aria-label', 'Pause');
        } else {
            video.pause();
            playPauseBtn?.querySelector('.play-icon')?.setAttribute('style', 'display: block;');
            playPauseBtn?.querySelector('.pause-icon')?.setAttribute('style', 'display: none;');
            playPauseBtn?.setAttribute('aria-label', 'Play');
        }
    }

    // Toggle mute
    function toggleMute() {
        video.muted = !video.muted;
        if (muteBtn) {
            if (video.muted) {
                muteBtn.querySelector('.volume-high-icon')?.setAttribute('style', 'display: none;');
                muteBtn.querySelector('.volume-muted-icon')?.setAttribute('style', 'display: block;');
                muteBtn.setAttribute('aria-label', 'Unmute');
            } else {
                muteBtn.querySelector('.volume-high-icon')?.setAttribute('style', 'display: block;');
                muteBtn.querySelector('.volume-muted-icon')?.setAttribute('style', 'display: none;');
                muteBtn.setAttribute('aria-label', 'Mute');
            }
        }
    }

    // Handle volume change
    function handleVolumeChange() {
        video.volume = volumeSlider?.value || 1;
        video.muted = video.volume === 0;
        toggleMute(); // Update mute button state
    }

    // Handle progress bar change
    function handleProgressChange() {
        if (video.duration) {
            const newTime = (progressBar?.value / 100) * video.duration;
            video.currentTime = newTime;
        }
    }

    // Toggle fullscreen
    function toggleFullscreen() {
        if (!document.fullscreenElement) {
            video.requestFullscreen?.();
        } else {
            document.exitFullscreen?.();
        }
    }

    // Episode switching
    function switchEpisode(episodeNumber) {
        currentEpisode = episodeNumber;
        currentEpisodeEl.textContent = `Episode ${episodeNumber}`;

        // Update active episode button
        episodeBtns.forEach(btn => {
            btn.classList.remove('active');
            if (parseInt(btn.dataset.episode) === episodeNumber) {
                btn.classList.add('active');
            }
        });

        // In a real application, you would load the new episode video here
        console.log(`Switching to episode ${episodeNumber}`);

        // Reset video state
        video.currentTime = 0;
        if (!video.paused) {
            video.pause();
            togglePlayPause(); // Update play/pause button
        }
    }

    // Navigate to previous episode
    function prevEpisode() {
        if (currentEpisode > 1) {
            switchEpisode(currentEpisode - 1);
        }
    }

    // Navigate to next episode
    function nextEpisode() {
        if (currentEpisode < totalEpisodes) {
            switchEpisode(currentEpisode + 1);
        }
    }

    // Event listeners
    playPauseBtn?.addEventListener('click', togglePlayPause);
    muteBtn?.addEventListener('click', toggleMute);
    volumeSlider?.addEventListener('input', handleVolumeChange);
    progressBar?.addEventListener('input', handleProgressChange);
    fullscreenBtn?.addEventListener('click', toggleFullscreen);

    // Video event listeners
    video.addEventListener('loadedmetadata', function() {
        hideLoading();
        updateTimeDisplay();
    });

    video.addEventListener('timeupdate', function() {
        updateProgress();
        updateTimeDisplay();
    });

    video.addEventListener('play', function() {
        playPauseBtn?.querySelector('.play-icon')?.setAttribute('style', 'display: none;');
        playPauseBtn?.querySelector('.pause-icon')?.setAttribute('style', 'display: block;');
    });

    video.addEventListener('pause', function() {
        playPauseBtn?.querySelector('.play-icon')?.setAttribute('style', 'display: block;');
        playPauseBtn?.querySelector('.pause-icon')?.setAttribute('style', 'display: none;');
    });

    video.addEventListener('loadstart', showLoading);
    video.addEventListener('waiting', showLoading);
    video.addEventListener('canplay', hideLoading);

    // Episode button event listeners
    episodeBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const episodeNumber = parseInt(this.dataset.episode);
            switchEpisode(episodeNumber);
        });
    });

    prevEpisodeBtn?.addEventListener('click', prevEpisode);
    nextEpisodeBtn?.addEventListener('click', nextEpisode);

    // Keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        switch(e.code) {
            case 'Space':
                e.preventDefault();
                togglePlayPause();
                break;
            case 'KeyM':
                e.preventDefault();
                toggleMute();
                break;
            case 'KeyF':
                e.preventDefault();
                toggleFullscreen();
                break;
            case 'ArrowLeft':
                e.preventDefault();
                video.currentTime = Math.max(0, video.currentTime - 10);
                break;
            case 'ArrowRight':
                e.preventDefault();
                video.currentTime = Math.min(video.duration, video.currentTime + 10);
                break;
        }
    });

    // Show controls on mouse movement
    let controlsTimeout;
    const videoContainer = video.parentElement;

    videoContainer?.addEventListener('mousemove', function() {
        if (videoControls) {
            videoControls.classList.add('active');

            clearTimeout(controlsTimeout);
            controlsTimeout = setTimeout(() => {
                if (!video.paused) {
                    videoControls.classList.remove('active');
                }
            }, 3000);
        }
    });

    // Keep controls visible when paused
    video.addEventListener('pause', function() {
        if (videoControls) {
            videoControls.classList.add('active');
        }
    });

    video.addEventListener('play', function() {
        if (videoControls) {
            setTimeout(() => {
                if (!videoContainer.matches(':hover')) {
                    videoControls.classList.remove('active');
                }
            }, 3000);
        }
    });
}

/**
 * Initialize homepage slider functionality
 */
function initSlider() {
    const slides = document.querySelectorAll('.slide-item');
    const prevBtn = document.querySelector('.slider-nav.prev');
    const nextBtn = document.querySelector('.slider-nav.next');
    let currentIndex = 0;
    let slideInterval;

    function showSlide(index) {
        slides.forEach((slide, i) => {
            slide.classList.toggle('active', i === index);
        });
    }

    function nextSlide() {
        currentIndex = (currentIndex + 1) % slides.length;
        showSlide(currentIndex);
    }

    function prevSlide() {
        currentIndex = (currentIndex - 1 + slides.length) % slides.length;
        showSlide(currentIndex);
    }

    function startAutoSlide() {
        slideInterval = setInterval(nextSlide, 5000);
    }

    function stopAutoSlide() {
        clearInterval(slideInterval);
    }

    if (prevBtn && nextBtn && slides.length > 0) {
        prevBtn.addEventListener('click', () => {
            prevSlide();
            stopAutoSlide();
            startAutoSlide();
        });

        nextBtn.addEventListener('click', () => {
            nextSlide();
            stopAutoSlide();
            startAutoSlide();
        });

        showSlide(currentIndex);
        startAutoSlide();
    }
}