<?php

// fetch all movies
$query "SELECT pk_Film, name, length, imagePath, releaseDate FROM CINE_Film ORDER BY releaseDate DESC";
$result mysqli_query($dbc$query);

if (!
$result) {
    die(
"Query failed: " mysqli_error($dbc));
}

echo 
'<link rel="stylesheet" href="assets/css/movies.css">';
echo 
'<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">';
?>

<main class="movie-container">
    <div class="movie-header">
        <h1>Now Showing</h1>
        <p>Experience the magic of cinema at CinĂ© Le Paris</p>
    </div>
    
    <div class="movie-filter">
        <button class="movie-filter-btn active" data-filter="all">All Movies</button>
        <button class="movie-filter-btn" data-filter="new">New Releases</button>
        <button class="movie-filter-btn" data-filter="coming">Coming Soon</button>
    </div>
    
    <div class="movie-grid">
        <?php

        
// check for movies
        
if (mysqli_num_rows($result) > 0) {
            
// go through each movie
            
$index 0;
            while (
$movie mysqli_fetch_assoc($result)) {

                
// debugging var_dump($movie);
                
                // Format length
                
$hours floor($movie['length'] / 60);
                
$minutes $movie['length'] % 60;
                
$duration "";
                if (
$hours 0) {
                    
$duration .= $hours "h ";
                }
                
$duration .= $minutes "min";
                
                
// format release date
                
$releaseDate date("M d, Y"strtotime($movie['releaseDate']));
                
                
// default image
                
$imagePath = !empty($movie['imagePath']) ? $movie['imagePath'] : 'assets/images/movies/default-movie.jpg';
                
                
// calculate if less than 14 days old
                
$isNew = (strtotime($movie['releaseDate']) > strtotime('-14 days'));
                
$class $isNew 'movie-card new-release' 'movie-card';
                
                
// output
                
echo "
                <div class='
$class' data-id='{$movie['pk_Film']}' style='--animation-order: $index'>
                    <div class='movie-poster'>
                        <img src='
$imagePath' alt='{$movie['name']}' onerror=\"this.src='assets/images/movies/default-movie.jpg';\">
                        " 
. ($isNew "<span class='movie-badge'>New</span>" "") . "
                    </div>
                    <div class='movie-info'>
                        <h2 class='movie-title'>
{$movie['name']}</h2>
                        <div class='movie-meta'>
                            <span class='movie-duration'><i class='fas fa-clock'></i> 
$duration</span>
                            <span class='movie-release'><i class='fas fa-calendar-alt'></i> 
$releaseDate</span>
                        </div>
                        <a href='index.php?page=moviedetail&id=
{$movie['pk_Film']}' class='movie-btn'>View Details</a>
                    </div>
                </div>
                "
;
                
                
$index++;
            }
        } else {
            echo 
"<div class='no-movies'>No movies currently showing</div>";
        }
        
?>
    </div>
</main>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // filter
    const filterButtons = document.querySelectorAll('.movie-filter-btn');
    const movieCards = document.querySelectorAll('.movie-card');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            // remove active from all button
            filterButtons.forEach(btn => btn.classList.remove('active'));
            
            // add active class
            this.classList.add('active');
            
            const filter = this.getAttribute('data-filter');
            
            // show / hide based on selection
            movieCards.forEach(card => {
                if (filter === 'all') {
                    card.style.display = 'flex';
                } else if (filter === 'new' && card.classList.contains('new-release')) {
                    card.style.display = 'flex';
                } else if (filter === 'coming') {
                    card.style.display = 'none';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    });
});
</script>