<?php
include "../../config/master.php";
allowRoles([1,5]);
include "../layout/header.php";

$role_id = $_SESSION['role_id'] ?? 0;

// FETCH NEWS
if($role_id == 1){

$news = mysqli_query($conn,"
SELECT n.*, v.village_name
FROM village_news n
LEFT JOIN villages v ON n.village_id = v.id
ORDER BY n.id DESC
");

}else{

$village_id = $_SESSION['village_id'];

$news = mysqli_query($conn,"
SELECT n.*, v.village_name
FROM village_news n
LEFT JOIN villages v ON n.village_id = v.id
WHERE n.village_id='$village_id'
ORDER BY n.id DESC
");

}
?>

<div class="main">
<div class="container-fluid">

<!-- HEADER -->
<div class="card-box" style="display:flex;justify-content:space-between;align-items:center;">
    <div>
        <h4 style="margin:0;">📰 Village News</h4>
        <p style="font-size:12px;color:#777;margin:0;">Latest updates</p>
    </div>

    <a href="add_news.php" class="btn btn-success">+ Add News</a>
</div>

<!-- NEWS LIST -->
<?php if(mysqli_num_rows($news) > 0){ ?>

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

<div class="card-box">

<!-- IMAGE -->
<?php if(!empty($row['image'])){ ?>
<img src="../../uploads/news/<?php echo $row['image']; ?>" 
style="width:100%;border-radius:10px;margin-bottom:10px;">
<?php } ?>

<!-- TITLE -->
<h5 style="margin:0;"><?php echo $row['title']; ?></h5>

<!-- VILLAGE -->
<p style="font-size:12px;color:#666;margin:5px 0;">
📍 <?php echo $row['village_name'] ?? 'General'; ?>
</p>

<!-- DATE -->
<p style="font-size:12px;color:#999;">
🗓 <?php echo $row['news_date']; ?>
</p>

<!-- ACTIONS -->
<div style="margin-top:10px;display:flex;gap:10px;">
<button class="btn btn-primary btn-sm editBtn" data-id="<?php echo $row['id']; ?>">
Edit
</button>

<a href="delete_news.php?id=<?php echo $row['id']; ?>"
onclick="return confirm('Delete this news?')"
class="btn btn-danger btn-sm">
Delete
</a>
</div>

</div>

<?php } ?>

<?php } else { ?>

<div class="card-box" style="text-align:center;">
No news available
</div>

<?php } ?>

</div>
</div>

<!-- ================= MODAL ================= -->

<div id="editModal" style="
display:none;
position:fixed;
top:10%;
left:50%;
transform:translateX(-50%);
background:#fff;
padding:20px;
border-radius:10px;
width:90%;
max-width:500px;
z-index:9999;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
">

<h4>Edit News</h4>

<form id="editForm" enctype="multipart/form-data">

<input type="hidden" name="id" id="edit_id">

<label>Title</label>
<input type="text" name="title" id="edit_title" class="form-control">

<br>

<label>Date</label>
<input type="date" name="news_date" id="edit_date" class="form-control">

<br>

<label>Description</label>
<textarea name="description" id="edit_desc" class="form-control"></textarea>

<br>

<label>Change Image</label>
<input type="file" name="image" class="form-control">

<br>

<button type="submit" class="btn btn-success">Update</button>
<button type="button" onclick="closeModal()" class="btn btn-secondary">Close</button>

</form>

</div>

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

<script>

// OPEN MODAL + LOAD DATA
document.querySelectorAll(".editBtn").forEach(btn=>{
btn.addEventListener("click", function(){

let id = this.dataset.id;

fetch("get_news.php?id="+id)
.then(res=>res.json())
.then(data=>{

document.getElementById("edit_id").value = data.id;
document.getElementById("edit_title").value = data.title;
document.getElementById("edit_date").value = data.news_date;
document.getElementById("edit_desc").value = data.description;

document.getElementById("editModal").style.display = "block";

});

});
});

// CLOSE MODAL
function closeModal(){
document.getElementById("editModal").style.display = "none";
}

// UPDATE NEWS
document.getElementById("editForm").addEventListener("submit", function(e){

e.preventDefault();

let formData = new FormData(this);

fetch("update_news.php",{
method:"POST",
body:formData
})
.then(res=>res.text())
.then(()=>{
alert("News Updated Successfully");
location.reload();
});

});

</script>