<?php

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

/* ==========================
GET VILLAGE (SUBDOMAIN SUPPORT)
========================== */

$host = $_SERVER['HTTP_HOST'];

if(strpos($host, '.gramadhikar.com') !== false){
    $slug = str_replace('.gramadhikar.com', '', $host);
}else{
    $slug = $_GET['village'] ?? '';
}

if($slug == '' || $slug == 'www' || $slug == 'gramadhikar'){
    die("Invalid Access");
}

/* FETCH VILLAGE */

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

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

$village_id = intval($village['id']);

/* FETCH DEVELOPMENT WORKS */

$works = mysqli_query($conn,"
SELECT * FROM village_development_works
WHERE village_id='$village_id'
ORDER BY id DESC
");

include "header.php";
?>

<style>

/* GRID */
.gallery-grid{
display:grid;
grid-template-columns: repeat(4,1fr);
gap:20px;
}

/* CARD */
.dev-card{
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

/* IMAGE */
.dev-img{
width:100%;
height:200px;
overflow:hidden;
}

.dev-img img{
width:100%;
height:100%;
object-fit:cover;
cursor:pointer;
transition:0.3s;
}

/* HOVER ZOOM */
.dev-img img:hover{
transform:scale(1.1);
}

/* CONTENT */
.dev-content{
padding:10px;
}

.dev-content h4{
margin:5px 0;
font-size:16px;
}

/* STATUS COLORS */
.status-completed{ color:green; font-weight:bold; }
.status-progress{ color:orange; font-weight:bold; }
.status-planned{ color:red; font-weight:bold; }

/* POPUP */
.img-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
justify-content:center;
align-items:center;
z-index:9999;
}

.img-modal img{
width:50%;
max-height:80%;
border-radius:10px;
}

/* MOBILE */
@media(max-width:768px){
.gallery-grid{
grid-template-columns: repeat(2,1fr);
}
}

@media(max-width:480px){
.gallery-grid{
grid-template-columns: 1fr;
}
}

</style>

<div class="container">

<h2 class="section-title">Development Works</h2>

<div class="gallery-grid">

<?php if(mysqli_num_rows($works) > 0){ ?>

<?php while($row=mysqli_fetch_assoc($works)){ ?>

<div class="dev-card">

<?php if(!empty($row['image'])){ ?>
<div class="dev-img">
<img src="/digital_panchayat/uploads/development/<?php echo htmlspecialchars($row['image']); ?>" 
onclick="openImage(this.src)">
</div>
<?php } ?>

<div class="dev-content">

<h4><?php echo htmlspecialchars($row['title']); ?></h4>

<p><?php echo substr(strip_tags($row['description']),0,80); ?>...</p>

<p>

<?php 
$status = $row['status'];

if($status=="Completed"){
echo "<span class='status-completed'>Completed</span>";
}elseif($status=="In Progress"){
echo "<span class='status-progress'>In Progress</span>";
}else{
echo "<span class='status-planned'>Planned</span>";
}
?>

</p>

</div>

</div>

<?php } ?>

<?php } else { ?>

<p>No development works available</p>

<?php } ?>

</div>

</div>

<!-- IMAGE POPUP -->
<div id="imgModal" class="img-modal" onclick="closeImage()">
<img id="modalImg">
</div>

<script>

function openImage(src){
document.getElementById("imgModal").style.display="flex";
document.getElementById("modalImg").src = src;
}

function closeImage(){
document.getElementById("imgModal").style.display="none";
}

</script>

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