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

$role_id = $_SESSION['role_id'];

if($role_id == 1){
$q = mysqli_query($conn,"SELECT gc.*,v.village_name FROM gallery_categories gc LEFT JOIN villages v ON gc.village_id=v.id ORDER BY gc.id DESC");
}else{
$village_id = $_SESSION['village_id'];
$q = mysqli_query($conn,"SELECT * FROM gallery_categories WHERE village_id='$village_id' ORDER BY id DESC");
}
?>

<div class="container">
<h3>📸 Gallery Categories</h3>

<div class="row">
<?php while($row=mysqli_fetch_assoc($q)){ ?>

<div class="col-md-3 col-6 mb-3">
<div style="border:1px solid #ddd;padding:10px;border-radius:10px;text-align:center;">

<img src="../../uploads/gallery/<?php echo $row['image']; ?>" 
style="width:100%;height:120px;object-fit:cover;border-radius:8px;">

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

<button onclick="editCategory(
<?php echo $row['id']; ?>,
'<?php echo addslashes($row['category_name']); ?>',
'<?php echo $row['image']; ?>'
)" class="btn btn-sm btn-primary mt-1">Edit</button>

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

</div>
</div>

<?php } ?>
</div>
</div>

<!-- EDIT MODAL -->
<div id="editModal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000088;">

<div style="background:#fff;padding:20px;margin:50px auto;width:320px;border-radius:10px;">

<h4>Edit Category</h4>

<form id="editForm">

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

<input type="text" name="category_name" id="edit_name" class="form-control mb-2" required>

<img id="preview" style="width:100%;height:120px;object-fit:cover;border-radius:8px;margin-bottom:10px;">

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

<!-- Progress Bar -->
<div style="width:100%;background:#eee;border-radius:5px;overflow:hidden;">
<div id="progressBar" style="width:0%;background:#28a745;height:8px;"></div>
</div>

<br>

<button type="submit" class="btn btn-success w-100">Update</button>

</form>

<br>
<button onclick="closeModal()" class="btn btn-secondary w-100">Close</button>

</div>
</div>

<script>

function editCategory(id,name,image){
document.getElementById('edit_id').value=id;
document.getElementById('edit_name').value=name;
document.getElementById('preview').src='../../uploads/gallery/'+image;
document.getElementById('editModal').style.display='block';
}

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

/* AJAX UPDATE WITH PROGRESS */

document.getElementById("editForm").addEventListener("submit", function(e){
e.preventDefault();

let formData = new FormData(this);
let xhr = new XMLHttpRequest();

xhr.open("POST","update_category.php",true);

/* Progress */
xhr.upload.onprogress = function(e){
if(e.lengthComputable){
let percent = (e.loaded / e.total) * 100;
document.getElementById("progressBar").style.width = percent + "%";
}
};

xhr.onload = function(){
if(xhr.responseText == "success"){
location.reload();
}else{
alert("Error updating");
}
};

xhr.send(formData);

});

</script>

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