HEX

File: /home/workzeni/stream-flix.workzenix.com/resources/views/website/index.blade.php
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StreamFlix -</title>

    @include('website.includes.meta')
    @include('website.includes.style')
</head>

<body>
    <!-- Header -->
    @include('website.includes.header')


    <!-- content -->
    @yield('body')



    <!-- Footer -->
    @include('website.includes.footer')

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Custom JavaScript -->
    <script src="{{ asset('website/assets/js/scripts.js') }}"></script>

    <script>
        class AjaxMovieSearch {
            constructor() {
                this.searchTimeout = null;
                this.init();
            }

            init() {
                const searchInput = document.getElementById('searchInput');
                const searchResultsList = document.getElementById('searchResultsList');
                const searchResults = document.getElementById('searchResults');

                if (!searchInput) return;

                searchInput.addEventListener('input', (e) => {
                    const query = e.target.value.trim();

                    clearTimeout(this.searchTimeout);

                    this.searchTimeout = setTimeout(() => {
                        if (query.length >= 2) {
                            this.fetchMovies(query);
                            searchResults.classList.add('show');
                        } else {
                            searchResults.classList.remove('show');
                            searchResultsList.innerHTML = '';
                        }
                    }, 300);
                });
            }

            fetchMovies(query) {
                fetch(`/movies/search?q=${encodeURIComponent(query)}`)
                    .then(response => response.json())
                    .then(data => {
                        this.renderResults(data.movies || []);
                    })
                    .catch(error => {
                        console.error('Search error:', error);
                    });
            }

            renderResults(movies) {
                const list = document.getElementById('searchResultsList');
                const noResults = document.getElementById('searchNoResults');
                const count = document.getElementById('searchCount');

                if (!list) return;

                list.innerHTML = '';

                if (count) {
                    count.textContent = `${movies.length} movie${movies.length !== 1 ? 's' : ''} found`;
                }

                if (movies.length === 0) {
                    if (noResults) noResults.classList.add('show');
                    return;
                }

                if (noResults) noResults.classList.remove('show');

                movies.slice(0, 8).forEach(movie => {
                    const item = document.createElement('div');
                    item.className = 'search-result-item';
                    item.innerHTML = `
                <div class="search-result-poster">
                    <img src="${movie.poster}" alt="${movie.title}" loading="lazy">
                </div>
                <div class="search-result-info">
                    <div class="search-result-title">${movie.title}</div>
                    <div class="search-result-meta">
                        <span class="search-result-year">${movie.year}</span> •
                        <span>${movie.duration || ''} min</span> •
                        <span>${movie.rating || ''}/10</span>
                    </div>
                </div>
            `;
                    item.addEventListener('click', () => {
                        window.location.href = `/movie/${movie.id}`;
                    });
                    list.appendChild(item);
                });

                if (movies.length > 8) {
                    const more = document.createElement('div');
                    more.className = 'search-result-item more-results';
                    more.innerHTML = `<div class="search-result-title">And ${movies.length - 8} more results...</div>`;
                    more.addEventListener('click', () => {
                        window.location.href = `/movies?search=${encodeURIComponent(query)}`;
                    });
                    list.appendChild(more);
                }
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            new AjaxMovieSearch();
        });
    </script>
</body>

</html>