<?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>