<?php

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

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

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

$family_id = intval($_GET['family_id'] ?? 0);

if($family_id == 0){
header("Location: ../families/view_families.php");
exit;
}

/* FETCH FAMILY */
$fam = mysqli_query($conn,"SELECT * FROM families WHERE id='$family_id'");
$family = mysqli_fetch_assoc($fam);

if(!$family){
header("Location: ../families/view_families.php");
exit;
}

/* FETCH MEMBERS */
$members = mysqli_query($conn,"
SELECT 
fm.*,
fr.relation_type,
fr.parent_id,
p.name AS parent_name
FROM family_members fm
LEFT JOIN family_relationships fr ON fr.member_id = fm.id
LEFT JOIN family_members p ON fr.parent_id = p.id
WHERE fm.family_id='$family_id'
ORDER BY fm.id 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="app-content">

<div class="card-box">
<h4><?php echo htmlspecialchars($family['family_head']); ?></h4>
<p style="font-size:12px;color:#777;">
🏠 House No: <?php echo htmlspecialchars($family['house_number']); ?>
</p>

<a href="add_member.php?family_id=<?php echo $family_id; ?>"
class="btn-mobile" style="background:#2c7be5;color:#fff;margin-top:10px;">
+ Add Member
</a>
</div>

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

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

<h5><?php echo htmlspecialchars($row['name']); ?></h5>

<p style="font-size:12px;color:#666;">
👤 <?php echo $row['gender']; ?> | 🎂 <?php echo $row['age']; ?> yrs
</p>

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

<p style="font-size:12px;color:#999;">

<?php
if($row['relation_type']!=''){
if($row['parent_id']==0){
echo "👨‍👩‍👧 ".$row['relation_type']." of Head";
}else{
echo "👨‍👩‍👧 ".$row['relation_type']." of ".$row['parent_name'];
}
}else{
echo "👑 Head Member";
}
?>

</p>

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

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

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

</div>

</div>

<?php } ?>

</div>

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

<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">

<select name="gender" id="edit_gender" class="form-control">
<option>Male</option>
<option>Female</option>
</select>

<input type="number" name="age" id="edit_age" 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("toastMsg");
t.innerHTML=msg;
t.style.display="block";
setTimeout(()=>t.style.display="none",2000);
}

/* OPEN MODAL */
function openEdit(id,name,gender,age,mobile){

document.getElementById("edit_id").value=id;
document.getElementById("edit_name").value=name;
document.getElementById("edit_gender").value=gender;
document.getElementById("edit_age").value=age;
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(res=>{
showToast("✅ Updated");
closeModal();
location.reload();
});

});

/* DELETE */
function deleteRow(id){

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

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

}

</script>

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