<?php 
include 'header.php'; 
// تأكد أن ملف الاتصال (الذي يحتوي على PDO) مدرج هنا أو داخل header.php
?>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />

<div style="direction: <?php echo ($lang == 'ar' ? 'rtl' : 'ltr'); ?>; 
            text-align: <?php echo ($lang == 'ar' ? 'right' : 'left'); ?>;
            background: url('your-texture-image.jpg'); 
            background-attachment: fixed; 
            background-size: cover; 
            min-height: 100vh;">

    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5 bg-white bg-opacity-75 p-4 rounded-4 shadow-sm" style="backdrop-filter: blur(5px); border-bottom: 3px solid #d9b34d;">
                <h2 class="fw-bold" style="color: #1a1a1a;">
                    <?php echo ($lang == 'ar' ? 'معرض الصور' : ($lang == 'tr' ? 'Fotoğraf Galerisi' : 'Photo Gallery')); ?>
                </h2>
                <p style="color: #d9b34d; font-weight: 600; font-size: 1.1rem;">
                    <?php echo ($lang == 'ar' ? 'لحظات مميزة من رحلتنا في معهد لغة العرب' : ($lang == 'tr' ? 'Lughat Al Arab Enstitüsü yolculuğumuzdan özel anlar' : 'Special moments from our journey at Lughat Al Arab')); ?>
                </p>
                <div style="width: 80px; height: 3px; background: #d9b34d; margin: 15px auto;"></div>
            </div>

            <div class="row g-4">
                <?php 
                try {
                    // جلب البيانات باستخدام PDO (المتغير $conn من ملفك)
                    $query = "SELECT * FROM gallery ORDER BY id DESC";
                    $stmt = $conn->prepare($query);
                    $stmt->execute();
                    $images = $stmt->fetchAll();

                    if ($images):
                        foreach ($images as $row): 
                ?>
                <div class="col-lg-4 col-md-6">
                    <div class="gallery-card shadow-lg bg-white p-2 rounded-4">
                        <a href="images/<?php echo htmlspecialchars($row['image_path']); ?>" 
                           data-fancybox="gallery" 
                           data-caption="<?php echo htmlspecialchars($row['title_'.$lang]); ?>">
                            
                            <div class="image-wrapper rounded-3">
                                <img src="images/<?php echo htmlspecialchars($row['image_path']); ?>" 
                                     class="img-fluid w-100" 
                                     style="height: 250px; object-fit: cover;" 
                                     alt="Lughat Al Arab">
                                
                                <div class="overlay">
                                    <i class="fas fa-expand-alt text-white fa-2x"></i>
                                </div>
                            </div>
                        </a>
                        
                        <div class="p-3 text-center border-top mt-2" style="border-top: 2px solid #f2e5d9 !important;">
                            <h6 class="fw-bold mb-0 text-dark">
                                <?php echo htmlspecialchars($row['title_'.$lang]); ?>
                            </h6>
                        </div>
                    </div>
                </div>
                <?php 
                        endforeach; 
                    else:
                        // رسالة في حال عدم وجود صور
                        echo "<div class='col-12 text-center p-5 bg-white rounded-4 shadow-sm'>" . 
                             ($lang == 'ar' ? 'المعرض لا يحتوي على صور حالياً.' : ($lang == 'tr' ? 'Galeri şu anda boş.' : 'The gallery is currently empty.')) . 
                             "</div>";
                    endif; 
                } catch (PDOException $e) {
                    echo "<div class='alert alert-danger'>خطأ في قاعدة البيانات: " . $e->getMessage() . "</div>";
                }
                ?>
            </div>
        </div>
    </section>
</div>

<style>
    .gallery-card {
        transition: all 0.3s ease-in-out;
        border: 1px solid rgba(217, 179, 77, 0.1);
    }
    
    .gallery-card:hover {
        transform: translateY(-8px);
        border-color: #d9b34d;
    }

    .image-wrapper {
        position: relative;
        overflow: hidden;
    }

    .image-wrapper img {
        transition: transform 0.5s ease;
    }

    .overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(26, 26, 26, 0.5); /* تعتيم خفيف عند الحوم */
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .gallery-card:hover .overlay {
        opacity: 1;
    }

    .gallery-card:hover img {
        transform: scale(1.1);
    }
    
    /* جعل العناوين والحدود متناسقة مع لغة الضاد */
    .border-top {
        border-color: #d9b34d !important;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script>
    Fancybox.bind("[data-fancybox]", {
        // خيارات العرض (اختياري)
        infinite: true,
        keyboard: true
    });
</script>

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