<?php
/**
 * gallery.php - প্রতিষ্ঠানের ওয়েবসাইট গ্যালারি ভিউ
 * প্রিমিয়াম এনিমেশন এবং ম্যানুয়াল সিএসএস ব্যবহার করে ডিজাইন করা হয়েছে।
 */

include('db_config.php');
include('header.php');  

$db_handle = isset($conn) ? $conn : (isset($db) ? $db : (isset($con) ? $con : null));

if (!$db_handle) {
    die("Error: ডাটাবেজ কানেকশন ভেরিয়েবল পাওয়া যায়নি।");
}

$album_id = isset($_GET['album']) ? intval($_GET['album']) : null;
?>

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ফটো গ্যালারি - প্রিমিয়াম ভিউ</title>
    
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="assets/js/reveal.js"></script>
    <!-- External Resources -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/css/glightbox.min.css">
    
    <style>
        /* ব্যানার সেকশন ডিজাইন */
        .reg-hero-banner {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                        url('https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>

<section class="reg-hero-banner" style="padding: 0px 0px 60px 0px; position: relative;">
    <div class="hero-content">
        <h1>স্মৃতির ক্যানভাস</h1>
        <p>আমাদের পথচলার প্রতিটি স্মরণীয় মুহূর্ত</p>
    </div>
    <div class="divider-svg">
        <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5,73.84-4.36,147.54,16.88,218.2,35.26,69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113,2,1200,34.72V0Z"></path>
        </svg>
    </div>
</section>

<main class="container reveal up">
    
    <?php if (!$album_id): ?>
        <!-- হেডিং এনিমেশন সহ -->
        <div class="section-header">
            <h2>স্মৃতির পাতায় আমরা</h2>
            <p>আমাদের প্রতিষ্ঠানের প্রতিটি মুহূর্তই আনন্দ এবং অর্জনের গল্প বলে। নিচে আমাদের বিভিন্ন অনুষ্ঠানের স্থিরচিত্রগুলো খুঁজে পাবেন।</p>
        </div>

        <div class="gallery-grid">
            <?php
            $album_query = "SELECT * FROM gallery_albums ORDER BY album_date DESC";
            $album_result = mysqli_query($db_handle, $album_query);

            if ($album_result && mysqli_num_rows($album_result) > 0) {
                $delay = 100; // এনিমেশন ডিলের জন্য
                while ($album = mysqli_fetch_assoc($album_result)) {
                    $count_res = mysqli_query($db_handle, "SELECT COUNT(*) as total FROM gallery_images WHERE album_id = ".$album['id']);
                    $count_data = mysqli_fetch_assoc($count_res);
                    $cover = !empty($album['cover_image']) ? str_replace('assets/uploads/gallery/', 'assets/files/gallery/', $album['cover_image']) : 'https://via.placeholder.com/600x400?text=No+Cover';
            ?>
                <a href="gallery.php?album=<?php echo $album['id']; ?>" 
                   class="gallery-item" 
                   <?php echo $delay; ?>">
                    <div class="img-container">
                        <img src="<?php echo $cover; ?>" alt="<?php echo $album['album_name']; ?>">
                        <div class="badge-count">
                            <i class="fas fa-images"></i> <?php echo $count_data['total']; ?>+
                        </div>
                    </div>
                    <div class="item-info">
                        <span class="date"><?php echo date('F d, Y', strtotime($album['album_date'])); ?></span>
                        <h3><?php echo $album['album_name']; ?></h3>
                    </div>
                </a>
            <?php 
                $delay += 100; // পরবর্তী কার্ডের জন্য ১০০ মিলি-সেকেন্ড ডিল বাড়বে
                }
            } else {
                echo "<div class='empty-msg'>অ্যালবাম পাওয়া যায়নি।</div>";
            }
            ?>
        </div>

    <?php else: ?>
        <!-- অ্যালবাম ভিউ -->
        <?php
        $album_info_res = mysqli_query($db_handle, "SELECT * FROM gallery_albums WHERE id = $album_id");
        $album_info = mysqli_fetch_assoc($album_info_res);

        if ($album_info):
        ?>
            <div style="margin-top: 50px;">
                <a href="gallery.php" class="back-link">
                    <i class="fas fa-long-arrow-alt-left" style="margin-right: 10px;"></i> গ্যালারিতে ফিরে যান
                </a>
                <h2 style="font-size: 2rem; color: #0f172a; margin-bottom: 10px;"><?php echo $album_info['album_name']; ?></h2>
                <!-- অ্যালবাম বর্ণনা (album_desc) এখানে প্রদর্শিত হবে -->
                <p style="color: #64748b; margin-bottom: 30px; font-size: 1.1rem;"><?php echo !empty($album_info['album_desc']) ? $album_info['album_desc'] : ''; ?></p>
            </div>

            <div class="photo-stream">
                <?php
                $img_query = "SELECT * FROM gallery_images WHERE album_id = $album_id ORDER BY id DESC";
                $img_result = mysqli_query($db_handle, $img_query);
                $img_delay = 50;
                if ($img_result) {
                    while ($img = mysqli_fetch_assoc($img_result)) {
                        $img_path = str_replace('assets/uploads/gallery/', 'assets/files/gallery/', $img['image_path']);
                ?>
                    <a href="<?php echo $img_path; ?>" 
                       class="glightbox photo-box" 
                       <?php echo $img_delay; ?>">
                        <img src="<?php echo $img_path; ?>" alt="Gallery Image">
                    </a>
                <?php 
                    $img_delay += 30;
                    }
                } 
                ?>
            </div>
        <?php endif; ?>
    <?php endif; ?>

</main>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/js/glightbox.min.js"></script>
<script>

    // গ্লাইটবক্স ইনিশিয়ালাইজেশন
    const lightbox = GLightbox({
        selector: '.glightbox',
        touchNavigation: true,
        loop: true,
        zoomable: true
    });
</script>

<?php
if (file_exists('footer.php')) {
    include 'footer.php';
}
?>
</body>
</html>