<?php
// Database connection
$dbError = false;
$galleryItems = [];

// Base URL configuration
$baseUrl = '/Real_state_website/'; // Update this to match your project's base URL

// Database configuration
$host = 'localhost';
$dbname = 'godsonin_real_state';
$username = 'godsonin_real';
$password = 'Nitin@321';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // Fetch all gallery categories with their images
    $stmt = $pdo->query("
        SELECT gi.*, gc.name as category_name 
        FROM gallery_images gi
        LEFT JOIN gallery_categories gc ON gi.category_id = gc.id
        ORDER BY gi.uploaded_at DESC
    ");
    $galleryItems = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    error_log("Database error: " . $e->getMessage());
    $dbError = true;
} catch (Exception $e) {
    error_log("General error: " . $e->getMessage());
    $dbError = true;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sales Basket ::Gallery</title>
    <link rel="icon" href="images/icon.webp" type="image/gif" sizes="16x16">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="description">
    <meta content="" name="keywords">
    <meta content="" name="author">
    <!-- CSS Files
    ================================================== -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bootstrap">
    <link href="css/plugins.css" rel="stylesheet" type="text/css">
    <link href="css/swiper.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/coloring.css" rel="stylesheet" type="text/css">
    <link href="css/swiper-custom-1.css" rel="stylesheet" type="text/css">
    <link href="css/colors/scheme-01.css" id="colors" rel="stylesheet" type="text/css">
    <style>
        .gallery-item {
            margin-bottom: 30px;
            transition: transform 0.3s ease;
        }
        .gallery-item:hover {
            transform: translateY(-5px);
        }
        .gallery-category {
            margin-bottom: 30px;
        }
        .gallery-category h3 {
            position: relative;
            padding-bottom: 15px;
            margin-bottom: 25px;
        }
        .gallery-category h3:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            background: var(--primary-color);
        }
        .error-message {
            background-color: #f8d7da;
            color: #721c24;
            padding: 20px;
            border-radius: 5px;
            margin: 20px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <?php include 'header.php'; ?>

    <main>
        <a href="#" id="back-to-top"></a>
        <!-- page preloader begin -->
        <div id="de-loader"></div>
        <!-- page preloader close -->

        <section class="jarallax text-light relative overflow-hidden mt-80 mt-sm-50">
            <img src="images/background/1.webp" class="jarallax-img" alt="">
            <div class="container relative z-2">
                <div class="row g-4 justify-content-between align-items-center">
                    <div class="col-md-7">
                        <h1 class="fs-72 fs-xs-10vw lh-1-1 split">Gallery</h1>
                    </div>
                    <div class="col-md-5 text-md-end">
                        <ul class="crumb text-light">
                            <li><a href="index-2.html">Home</a></li>
                            <li class="active">Gallery</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="sw-overlay op-6"></div>
        </section>

        <section id="section-gallery" class="bg-color">
            <div class="container">
                <?php if ($dbError): ?>
                    <div class="error-message">
                        <i class="fas fa-exclamation-triangle"></i> 
                        <h4>We're experiencing technical difficulties</h4>
                        <p>Our gallery is temporarily unavailable. Please try again later.</p>
                    </div>
                <?php elseif (empty($galleryItems)): ?>
                    <div class="text-center py-5">
                        <i class="fas fa-images fa-4x text-muted mb-3"></i>
                        <h4>No gallery items found</h4>
                        <p class="text-muted">Please check back later for updates.</p>
                    </div>
                <?php else: ?>
                    <?php 
                    // Group items by category
                    $groupedItems = [];
                    foreach ($galleryItems as $item) {
                        $category = !empty($item['category_name']) ? $item['category_name'] : 'Uncategorized';
                        $groupedItems[$category][] = $item;
                    }
                    ?>
                    
                    <?php foreach ($groupedItems as $category => $items): ?>
                        <div class="gallery-category">
                            <h3><?php echo htmlspecialchars($category); ?></h3>
                            <div class="row g-4">
                                <?php foreach ($items as $item): ?>
                                    <div class="col-md-4 gallery-item">
                                        <?php 
                                        // Ensure the image path is clean and properly formatted
                                        $imagePath = ltrim($item['image_path'], './');
                                        $imagePath = ltrim($imagePath, '/'); // Remove leading slash if present
                                        
                                        // Construct the correct path with base URL
                                        $fullImagePath = $baseUrl . $imagePath;
                                        ?>
                                        <a href="<?php echo htmlspecialchars($fullImagePath); ?>" class="image-popup d-block hover">
                                            <div class="relative overflow-hidden rounded-1">
                                                <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">
                                                    View
                                                </div>
                                                <div class="absolute start-0 w-100 h-100 overlay-black-5 hover-op-1 z-2"></div>
                                                <img src="<?php echo htmlspecialchars($fullImagePath); ?>" 
                                                     class="w-100 hover-scale-1-2" 
                                                     alt="<?php echo htmlspecialchars($item['title']); ?>"
                                                     style="height: 250px; object-fit: cover;">
                                                <div class="abs z-2 bottom-0 mb-3 w-100 text-center hover-op-0">
                                                    <h4 class="text-light mb-3"><?php echo htmlspecialchars($item['category_name'] ?? 'Uncategorized'); ?></h4>
                                                </div>
                                                <div class="gradient-edge-bottom abs w-100 h-50 op-5 bottom-0"></div>
                                            </div>
                                        </a>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </section>

        <!-- Rest of your content remains the same -->
        <section>
            <div class="container">
                <div class="row g-4 align-items-center justify-content-between">
                    <!-- ... rest of your floorplan section ... -->
                </div>
            </div>
        </section>
    </main>

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

    <!-- Javascript Files -->
    <script src="js/vendors.js"></script>
    <script src="js/designesia.js"></script>
    <script src="js/custom-marquee.js"></script>
    <script src="js/custom-swiper-1.js"></script>
    <script src="js/custom-datepicker.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize image popup if the plugin is available
        if (typeof $.fn.magnificPopup !== 'undefined') {
            $('.image-popup').magnificPopup({
                type: 'image',
                gallery: {
                    enabled: true
                },
                zoom: {
                    enabled: true,
                    duration: 300
                }
            });
        }
    });
    </script>
</body>
</html>