function generatePanelContent(data) {
    const { movie, credits } = data;

    const posterUrl = movie.poster_path
        ? `https://image.tmdb.org/t/p/w200${movie.poster_path}`
        : 'default_image_url';

    const genres = movie.genres.map(genre => {
        return `<a href="/genre/${genre.id}">${genre.name}</a>`;
    }).join(', ');

    const director = credits.crew.find(crewMember => crewMember.job === 'Director');
    const directorLink = director
        ? `<a href="/cast/${director.id}">${director.name}</a>`
        : 'N/A';

    const cast = credits.cast.slice(0, 5).map(castMember => {
        return `<a href="/cast/${castMember.id}">${castMember.name}</a>`;
    }).join(', ');

    const movieDetailsInnerHTML = `
        <h2>${movie.title}</h2>
        <p>${movie.overview}</p>
        <strong>Genres:</strong> ${genres}<br>
        <strong>Director:</strong> ${directorLink}<br>
        <strong>Cast:</strong> ${cast}`;

    return { posterUrl, movieDetailsInnerHTML };
}

function showDetails(movieId) {
    fetch(`/movie/${movieId}`)
        .then(response => response.json())
        .then(movie => {
            fetch(`/movie/${movieId}/credits`)
                .then(response => response.json())
                .then(credits => {
                    const panel = document.getElementById('side-panel');
                    const overlay = document.getElementById('overlay');
                    const moviePoster = document.getElementById('movie-poster');
                    const movieDetails = document.getElementById('movie-details');

                    // Retrieve posterUrl and movieDetailsInnerHTML from generatePanelContent
                    const { posterUrl, movieDetailsInnerHTML } = generatePanelContent({ movie, credits });

                    // Update the respective DOM elements
                    moviePoster.src = posterUrl;
                    movieDetails.innerHTML = movieDetailsInnerHTML;

                    panel.classList.add('active'); // Add active class to slide in
                    overlay.classList.add('active'); // Show overlay
                });
        });
}

function closePanel() {
    const panel = document.getElementById('side-panel');
    const overlay = document.getElementById('overlay');
    panel.classList.remove('active'); // Remove active class to slide out
    overlay.classList.remove('active'); // Hide overlay
}