<?php

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

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

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

if($role_id == 1){
$members=mysqli_query($conn,"
SELECT vm.*,v.village_name
FROM village_members vm
LEFT JOIN villages v ON vm.village_id=v.id
ORDER BY vm.id DESC
");
}else{
$village_id=$_SESSION['village_id'];

$members=mysqli_query($conn,"
SELECT vm.*,v.village_name
FROM village_members vm
LEFT JOIN villages v ON vm.village_id=v.id
WHERE vm.village_id='$village_id'
ORDER BY vm.id DESC
");
}
?>

<style>
.member-card{
display:flex;
gap:12px;
align-items:center;
}

.member-img img{
width:60px;
height:60px;
border-radius:50%;
object-fit:cover;
}

.actions{
display:flex;
gap:8px;
margin-top:10px;
}

.btn-sm{
flex:1;
padding:8px;
border-radius:8px;
border:none;
color:#fff;
font-size:13px;
}

.btn-edit{background:#3498db;}
.btn-delete{background:#e74c3c;}

.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-box{
background:#fff;
padding:20px;
border-radius:10px;
width:90%;
max-width:400px;
}
</style>

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

<!-- HEADER -->
<div class="card-box" style="display:flex;justify-content:space-between;align-items:center;">

<div>
<h4>Panchayat Members</h4>
<p style="font-size:12px;color:#777;">Village representatives</p>
</div>

<a href="add_member.php" class="btn-mobile btn-add">
<i class="fa fa-plus"></i>
</a>

</div>

<!-- LIST -->

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

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

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

<div class="member-card">

<div class="member-img">
<?php if(!empty($row['image'])){ ?>
<img src="../../uploads/members/<?php echo $row['image']; ?>">
<?php } else { ?>
<img src="https://via.placeholder.com/60">
<?php } ?>
</div>

<div style="flex:1;">
<h5 style="margin:0;"><?php echo $row['name']; ?></h5>

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

<p style="font-size:13px;margin:2px 0;">
<?php echo $row['designation']; ?>
</p>

<p style="font-size:12px;color:#999;">
📞 <?php echo $row['mobile']; ?>
</p>
</div>

</div>

<!-- ACTIONS -->
<div class="actions">

<button class="btn-sm btn-edit"
onclick="openEdit(
<?php echo $row['id']; ?>,
'<?php echo addslashes($row['name']); ?>',
'<?php echo addslashes($row['designation']); ?>',
'<?php echo $row['mobile']; ?>'
)">
Edit
</button>

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

</div>

</div>

<?php } ?>

<?php } else { ?>

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

<?php } ?>

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

<h4>Edit Member</h4>

<form id="editForm">

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

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

<input type="text" name="designation" id="edit_designation" class="form-control">

<input type="text" name="mobile" id="edit_mobile" 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("toast");
t.innerHTML=msg;
t.style.display="block";
setTimeout(()=>t.style.display="none",2000);
}

/* OPEN MODAL */
function openEdit(id,name,designation,mobile){
document.getElementById("edit_id").value=id;
document.getElementById("edit_name").value=name;
document.getElementById("edit_designation").value=designation;
document.getElementById("edit_mobile").value=mobile;
document.getElementById("editModal").style.display="flex";
}

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

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

e.preventDefault();

let formData=new FormData(this);

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

});

/* DELETE */
function deleteMember(id){

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

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

}

</script>

<!-- BOTTOM NAV -->
<div class="bottom-nav">
<a href="../dashboard.php"><i class="fa fa-home"></i>Home</a>
<a href="../villages/village_data.php"><i class="fa fa-map"></i>Villages</a>
<a href="../families/view_families.php"><i class="fa fa-users"></i>Families</a>
<a href="../schemes/view_schemes.php"><i class="fa fa-list"></i>Schemes</a>
</div>

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