<?php

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

include "../layout/header.php";

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

/* QUERY */
if($role_id == 5){
$village_id = $_SESSION['village_id'] ?? 0;

$query = "
SELECT w.*, v.village_name
FROM village_development_works w
LEFT JOIN villages v ON w.village_id = v.id
WHERE w.village_id='$village_id'
ORDER BY w.id DESC
";
}else{
$query = "
SELECT w.*, v.village_name
FROM village_development_works w
LEFT JOIN villages v ON w.village_id = v.id
ORDER BY w.id DESC
";
}

$works = mysqli_query($conn,$query);
?>

<style>
.toast{
position:fixed;top:20px;left:50%;
transform:translateX(-50%);
background:#28a745;color:#fff;
padding:10px 20px;border-radius:8px;
display:none;z-index:9999;
}
.modal{
position:fixed;top:0;left:0;
width:100%;height:100%;
background:rgba(0,0,0,0.5);
display:none;justify-content:center;align-items:center;
z-index:9999;
}
.modal-content{
background:#fff;padding:20px;border-radius:10px;
width:90%;max-width:400px;
}
.status-badge{
background:#eee;
padding:5px 10px;
border-radius:6px;
font-size:12px;
}
</style>

<div class="toast" id="toastMsg"></div>

<div class="card-box" style="display:flex;justify-content:space-between;">
<h4>Development Works</h4>
<a href="add_development_work.php" class="btn-mobile btn-add">
<i class="fa fa-plus"></i>
</a>
</div>

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

<div class="card-box" id="row_<?php echo $row['id']; ?>">

<h5><?php echo $row['title']; ?></h5>

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

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

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

<div class="status-badge"><?php echo $row['status']; ?></div>

<div style="display:flex;gap:10px;margin-top:10px;">

<button onclick="openEdit(
<?php echo $row['id']; ?>,
'<?php echo addslashes($row['title']); ?>',
'<?php echo addslashes($row['description']); ?>',
'<?php echo $row['status']; ?>',
'<?php echo $row['image']; ?>'
)" class="btn btn-primary">Edit</button>

<button onclick="deleteRow(<?php echo $row['id']; ?>)" class="btn btn-danger">Delete</button>

</div>

</div>

<?php } ?>

<!-- MODAL -->
<div class="modal" id="editModal">
<div class="modal-content">

<h4>Edit Work</h4>

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

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

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

<textarea name="description" id="edit_description" class="form-control"></textarea>

<select name="status" id="edit_status" class="form-control">
<option>Planned</option>
<option>In Progress</option>
<option>Completed</option>
</select>

<input type="file" name="image" id="edit_image" class="form-control">

<img id="preview" style="width:100%;margin-top:10px;display:none;border-radius:10px;">

<br>

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

</form>

</div>
</div>

<script>

/* TOAST */
function showToast(msg){
let t=document.getElementById("toastMsg");
t.innerHTML=msg;
t.style.display="block";
setTimeout(()=>t.style.display="none",2000);
}

/* OPEN MODAL */
function openEdit(id,title,desc,status,image){

document.getElementById("edit_id").value=id;
document.getElementById("edit_title").value=title;
document.getElementById("edit_description").value=desc;
document.getElementById("edit_status").value=status;

let preview=document.getElementById("preview");

if(image){
preview.src="../../uploads/development/"+image;
preview.style.display="block";
}else{
preview.style.display="none";
}

document.getElementById("editModal").style.display="flex";
}

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

/* IMAGE COMPRESS */
let compressedFile=null;

document.getElementById("edit_image").addEventListener("change",function(){

let file=this.files[0];
if(!file) return;

let img=new Image();
img.src=URL.createObjectURL(file);

img.onload=function(){

let canvas=document.createElement("canvas");
let ctx=canvas.getContext("2d");

let maxWidth=800;
let scale=maxWidth/img.width;

canvas.width=maxWidth;
canvas.height=img.height*scale;

ctx.drawImage(img,0,0,canvas.width,canvas.height);

canvas.toBlob(function(blob){
compressedFile=new File([blob],file.name,{type:"image/jpeg"});
});
};

});

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

e.preventDefault();

let formData=new FormData(this);

if(compressedFile){
formData.set("image",compressedFile);
}

fetch("update_development_ajax.php",{method:"POST",body:formData})
.then(res=>res.json())
.then(res=>{
showToast("✅ Updated");
closeModal();
location.reload();
});

});

/* DELETE */
function deleteRow(id){

if(!confirm("Delete this work?")) return;

fetch("delete_development_ajax.php?id="+id)
.then(res=>res.json())
.then(res=>{
document.getElementById("row_"+id).remove();
showToast("🗑 Deleted");
});

}

</script>

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