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

echo "<style>
.sidebar{display:none !important;}
.topbar{margin-left:0 !important;}
.main{margin-left:0 !important;padding-bottom:80px;}
</style>";

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

if($role_id == 1){
$sliders=mysqli_query($conn,"
SELECT s.*,v.village_name
FROM village_sliders s
LEFT JOIN villages v ON s.village_id=v.id
ORDER BY s.display_order ASC
");
}else{
$village_id=$_SESSION['village_id'];

$sliders=mysqli_query($conn,"
SELECT s.*,v.village_name
FROM village_sliders s
LEFT JOIN villages v ON s.village_id=v.id
WHERE s.village_id='$village_id'
ORDER BY s.display_order ASC
");
}
?>

<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;
}
</style>

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

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

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

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

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

<h5><?php echo htmlspecialchars($row['title']); ?></h5>
<p>📍 <?php echo htmlspecialchars($row['village_name']); ?></p>
<p>🔢 Order: <?php echo $row['display_order']; ?></p>

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

<button onclick="openEdit(
<?php echo $row['id']; ?>,
'<?php echo addslashes($row['title']); ?>',
'<?php echo addslashes($row['description']); ?>',
'<?php echo $row['display_order']; ?>',
'<?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 Slider</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">

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

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

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

<input type="number" name="display_order" id="edit_order" 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>
</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,order,image){

document.getElementById("edit_id").value=id;
document.getElementById("edit_title").value=title;
document.getElementById("edit_description").value=desc;
document.getElementById("edit_order").value=order;

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

if(image){
preview.src="../../uploads/sliders/"+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_slider_ajax.php",{method:"POST",body:formData})
.then(res=>res.json())
.then(res=>{
showToast("✅ Updated");
closeModal();
location.reload();
});

});

/* DELETE */
function deleteRow(id){

if(!confirm("Delete slider?")) return;

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

}

</script>

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