File Manager V1.5

FILE_CONTENT: gallery.php

<?php
include 'header.php';
require_once 'admin/functions.php';

// Get category filter
$category = isset($_GET['category']) ? $_GET['category'] : null;
$gallery_images = $category ? getGalleryImagesByCategory($category) : getAllGalleryImages();
?>

<section class="gallery-section py-5" style="margin-top:10%;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <h1 class="text-center mb-5">Our Gallery</h1>

                <!-- Category Filter -->
                <div class="text-center mb-4">
                    <div class="btn-group" role="group">
                        <a href="gallery.php" class="btn <?php echo !$category ? 'btn-primary' : 'btn-outline-primary'; ?>">All</a>
                        <a href="gallery.php?category=repairs" class="btn <?php echo $category == 'repairs' ? 'btn-primary' : 'btn-outline-primary'; ?>">Repairs</a>
                        <a href="gallery.php?category=maintenance" class="btn <?php echo $category == 'maintenance' ? 'btn-primary' : 'btn-outline-primary'; ?>">Maintenance</a>
                        <a href="gallery.php?category=diagnostics" class="btn <?php echo $category == 'diagnostics' ? 'btn-primary' : 'btn-outline-primary'; ?>">Diagnostics</a>
                        <a href="gallery.php?category=other" class="btn <?php echo $category == 'other' ? 'btn-primary' : 'btn-outline-primary'; ?>">Other</a>
                    </div>
                </div>

                <!-- Gallery Grid -->
                <div class="row g-4">
                    <?php if ($gallery_images && $gallery_images->num_rows > 0): ?>
                        <?php while ($image = $gallery_images->fetch_assoc()): ?>
                            <div class="col-md-4 mb-4">
                                <div class="card h-100 shadow-sm">
                                    <img src="<?php echo htmlspecialchars($image['image_url'] ?? ''); ?>" 
                                         class="card-img-top" 
                                         alt="<?php echo htmlspecialchars($image['title'] ?? ''); ?>"
                                         style="height: 250px; object-fit: cover;"
                                         data-bs-toggle="modal" 
                                         data-bs-target="#imageModal<?php echo $image['id'] ?? ''; ?>"
                                         role="button">
                                    <div class="card-body">
                                        <h5 class="card-title"><?php echo htmlspecialchars($image['title'] ?? ''); ?></h5>
                                        <p class="card-text"><?php echo htmlspecialchars($image['description'] ?? ''); ?></p>
                                        <span class="badge bg-info"><?php echo htmlspecialchars($image['category'] ?? ''); ?></span>
                                    </div>
                                </div>

                                <!-- Modal for full-size image -->
                                <div class="modal fade" id="imageModal<?php echo $image['id'] ?? ''; ?>" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-lg modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title"><?php echo htmlspecialchars($image['title'] ?? ''); ?></h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body p-0">
                                                <img src="<?php echo htmlspecialchars($image['image_url'] ?? ''); ?>" 
                                                     class="img-fluid" 
                                                     alt="<?php echo htmlspecialchars($image['title'] ?? ''); ?>">
                                            </div>
                                            <div class="modal-footer">
                                                <p class="text-muted mb-0"><?php echo htmlspecialchars($image['description'] ?? ''); ?></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endwhile; ?>
                    <?php else: ?>
                        <div class="col-12">
                            <div class="alert alert-info text-center">
                                No images found in this category.
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .card {
        transition: transform 0.3s ease-in-out;
    }
    .card:hover {
        transform: translateY(-5px);
    }
    .card img {
        cursor: pointer;
    }
    .modal-dialog {
        max-width: 800px;
    }
    .btn-group .btn {
        margin: 0 2px;
    }
    @media (max-width: 768px) {
        .btn-group {
            flex-wrap: wrap;
        }
        .btn-group .btn {
            margin: 2px;
        }
    }
</style>

<?php include 'footer.php'; ?>