<?php

include "../config/db.php";

$slug = $_GET['village'] ?? '';
$category_id = $_GET['category'] ?? 0;

/* FETCH VILLAGE */

$village = mysqli_fetch_assoc(mysqli_query($conn,"
SELECT * FROM villages WHERE slug='$slug'
"));

if(!$village){
echo "Village not found";
exit;
}

$village_id = $village['id'];

include "header.php";

/* FETCH IMAGES */

$images = mysqli_query($conn,"
SELECT *
FROM gallery_images
WHERE category_id='$category_id'
");

?>

<style>

/* IMAGE GRID */

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:20px;
}

/* IMAGE BOX */

.gallery-item{
background:#fff;
border-radius:6px;
overflow:hidden;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
transition:0.3s;
}

.gallery-item:hover{
transform:translateY(-5px);
}

/* IMAGE */

.gallery-item img{
width:100%;
height:200px;
object-fit:cover;
display:block;
}

/* TITLE */

.image-title{
padding:8px;
font-size:14px;
text-align:center;
background:#f7f7f7;
}

</style>

<div class="container">

<h2 class="section-title">Gallery</h2>

<div class="gallery-grid">

<?php while($img=mysqli_fetch_assoc($images)){ ?>

<div class="gallery-item">

<a href="/digital_panchayat/uploads/gallery/<?php echo $img['image']; ?>" 
data-lightbox="village-gallery"
data-title="<?php echo htmlspecialchars($img['title']); ?>">

<?php if(!empty($img['image'])){ ?>

<img src="/digital_panchayat/uploads/gallery/<?php echo $img['image']; ?>" alt="<?php echo $img['title']; ?>">

<?php } else { ?>

<img src="images/no-image.jpg" alt="no image">

<?php } ?>

</a>

<?php if(!empty($img['title'])){ ?>
<div class="image-title">
<?php echo $img['title']; ?>
</div>
<?php } ?>

</div>

<?php } ?>

</div>

</div>

<script>

/* LIGHTBOX SETTINGS */

lightbox.option({
'resizeDuration': 200,
'wrapAround': true,
'fitImagesInViewport': true,
'maxWidth': 900,
'maxHeight': 600
})

</script>

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