<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB X PLAYER</title>
    <style>
        body {
            background-color: #141414;
            color: white;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
         .featured-movie-container {
        position: relative;
        height: 60vh;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: flex-end;
        padding: 30px;
        box-shadow: inset 0 -100px 100px rgba(0, 0, 0, 0.6);
    }
    .featured-movie-info {
        max-width: 40%;
        padding: 20px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
    }
    .featured-movie-info a#play-link {
        display: inline-block;
        margin-top: 10px;
        padding: 10px 20px;
        background-color: #e50914; /* Red background */
        color: white; /* White text */
        text-decoration: none;
        font-weight: bold;
        border-radius: 5px;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }
    .featured-movie-info a#play-link:hover {
        background-color: #b20710; /* Darker red on hover */
        transform: scale(1.05);
    }
        .banner-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
        .banner-buttons img {
            width: 185px;
            cursor: pointer;
            transition: transform 0.3s;
            animation: pulse 2s infinite;
        }
        .banner-buttons img:hover {
            transform: scale(1.1);
        }
        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 5px rgba(229, 9, 20, 0.5);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 0 25px rgba(229, 9, 20, 0.8);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 5px rgba(229, 9, 20, 0.5);
            }
        }
        .section-title {
            margin: 50px 20px 10px;
            font-size: 24px;
            color: #e50914;
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 20px;
        }
        .grid-item img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 10px;
        }
        .grid-item p {
            text-align: center;
            margin-top: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="featured-movie-container" id="featured-movie-container">
        <div class="featured-movie-info">
            <h2 id="movie-title">Movie Title</h2>
            <p id="movie-description">Movie Description</p>
            <p id="movie-rating">Rating: N/A</p>
            <a id="play-link" href="#">Watch Now</a>
        </div>
    </div>

    <!-- Category buttons -->
    <div class="banner-buttons">
        <a id="max-link"><img src="img/max.webp" alt="HBO Max"></a>
        <a id="disney-link"><img src="img/disney.webp" alt="Disney"></a>
        <a id="netflix-link"><img src="img/netflix.webp" alt="Netflix"></a>
        <a id="amazon-link"><img src="img/prime.webp" alt="Amazon"></a>
        <a id="marvel-link"><img src="img/marvel.webp" alt="Marvel"></a>
        <a id="xmas-link"><img src="img/xmas.webp" alt="Xmas"></a>
        <a id="halloween-link"><img src="img/halloween.webp" alt="Halloween"></a>
    </div>

    <h2 class="section-title">Series</h2>
    <div id="series-container" class="grid-container">
        <!-- Series will be loaded here -->
    </div>

    <h2 class="section-title">Movies</h2>
    <div id="movies-container" class="grid-container">
        <!-- Movies will be loaded here -->
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", async function () {
            const apiBaseUrl = '<?php echo $get_dns; ?>/player_api.php';
            const credentials = {
                username: '<?php echo $username; ?>',
                password: '<?php echo $password; ?>'
            };

            // Helper function to fetch data
            const fetchData = async (action) => {
                try {
                    const url = `${apiBaseUrl}?username=${encodeURIComponent(credentials.username)}&password=${encodeURIComponent(credentials.password)}&action=${action}`;
                    const response = await fetch(url);
                    const data = await response.json();
                    if (data.error) {
                        console.error(`Error fetching ${action}:`, data.error);
                        return [];
                    }
                    return data;
                } catch (error) {
                    console.error(`Error fetching ${action}:`, error);
                    return [];
                }
            };

            // Load categories and update banner links
            const loadCategories = async () => {
                const categories = await fetchData('get_vod_categories');
                const updateLink = (keywords, elementId) => {
                    const category = categories.find(cat => keywords.some(keyword => cat.category_name.toLowerCase().includes(keyword)));
                    if (category) {
                        document.getElementById(elementId).href = `movies.php?id=${category.category_id}`;
                    }
                };
                updateLink(['new releases', 'max'], 'max-link');
                updateLink(['animation', 'disney'], 'disney-link');
                updateLink(['action', 'netflix'], 'netflix-link');
                updateLink(['comedy', 'prime'], 'amazon-link');
                updateLink(['marvel'], 'marvel-link');
                updateLink(['holiday', 'xmas'], 'xmas-link');
                updateLink(['horror', 'halloween'], 'halloween-link');
            };

            // Load movies
            const loadMovies = async () => {
                const movies = await fetchData('get_vod_streams');
                const container = document.getElementById('movies-container');
                container.innerHTML = movies.slice(0, 16).map(movie => `
                    <div class="grid-item">
                        <a href="Movie_description?id=${movie.stream_id}">
                            <img src="${movie.stream_icon || 'https://i.imgur.com/Mn7aXQD.jpg'}" alt="${movie.name}" loading="lazy">
                        </a>
                        <p>${movie.name}</p>
                    </div>
                `).join('');
            };

            // Load series
            const loadSeries = async () => {
                const series = await fetchData('get_series');
                const container = document.getElementById('series-container');
                container.innerHTML = series.slice(0, 16).map(serie => `
                    <div class="grid-item">
                        <a href="seriesvideo?id=${serie.series_id}">
                            <img src="${serie.cover || 'https://i.imgur.com/Mn7aXQD.jpg'}" alt="${serie.name}" loading="lazy">
                        </a>
                        <p>${serie.name}</p>
                    </div>
                `).join('');
            };

            // Load featured movies
            const loadFeaturedMovies = async () => {
                const movies = await fetchData('get_vod_streams');
                const featuredMovieContainer = document.getElementById('featured-movie-container');
                let index = 0;

                const updateFeaturedMovie = () => {
                    const movie = movies[index];
                    if (movie) {
                        featuredMovieContainer.style.backgroundImage = `url(${movie.stream_icon || 'default_background.jpg'})`;
                        document.getElementById('movie-title').textContent = movie.name;
                        document.getElementById('movie-description').textContent = movie.plot || 'No description available.';
                        document.getElementById('movie-rating').textContent = `Rating: ${movie.rating || 'N/A'}`;
                        document.getElementById('play-link').href = `Movie_description?id=${movie.stream_id}`;
                    }
                    index = (index + 1) % movies.length;
                };

                setInterval(updateFeaturedMovie, 5000);
                updateFeaturedMovie();
            };

            // Load all data
            await loadCategories();
            await loadMovies();
            await loadSeries();
            await loadFeaturedMovies();
        });
    </script>
</body>
</html>
