<?php

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

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

/* GET VILLAGE */
if($role_id == 1){
    $village_id = $_POST['village_id'] ?? 0;
}else{
    $village_id = $_SESSION['village_id'] ?? 0;
}

/* SAVE */
if(isset($_POST['save']))
{

if($role_id == 1){
    $village_id = $_POST['village_id'];
}

$name = mysqli_real_escape_string($conn,$_POST['name']);
$designation = mysqli_real_escape_string($conn,$_POST['designation']);
$mobile = mysqli_real_escape_string($conn,$_POST['mobile']);
$description = mysqli_real_escape_string($conn,$_POST['description']);

$image="";

/* IMAGE UPLOAD */
if(!empty($_FILES['image']['name']))
{
$target_dir="../../uploads/members/";

if(!is_dir($target_dir)){
mkdir($target_dir,0777,true);
}

$ext = strtolower(pathinfo($_FILES['image']['name'],PATHINFO_EXTENSION));
$allowed = ['jpg','jpeg','png','webp'];

if(in_array($ext,$allowed)){

$image="member_".time().rand(100,999).".".$ext;

move_uploaded_file($_FILES['image']['tmp_name'],$target_dir.$image);

}
}

mysqli_query($conn,"
INSERT INTO village_members
(village_id,name,designation,mobile,image,description)
VALUES
('$village_id','$name','$designation','$mobile','$image','$description')
");

$success = true;

}

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

<style>
.msg-success{
background:#d4edda;
color:#155724;
padding:12px;
border-radius:8px;
margin-bottom:10px;
}
.progress{
width:100%;
height:12px;
background:#eee;
border-radius:10px;
margin-top:10px;
overflow:hidden;
display:none;
}
.progress-bar{
height:100%;
width:0%;
background:#28a745;
text-align:center;
color:#fff;
font-size:10px;
}
</style>

<div class="main">
<div class="container-fluid">

<h2 class="mb-4">Add Panchayat Member</h2>

<?php if(isset($success)){ ?>
<div class="msg-success">
✅ Member Added Successfully
</div>
<?php } ?>

<div class="form-box">

<form method="post" enctype="multipart/form-data" id="memberForm">

<?php if($role_id == 1){ ?>

<label>District</label>
<select id="district" class="form-control">
<option value="">Select District</option>

<?php
$dq=mysqli_query($conn,"SELECT * FROM districts ORDER BY district_name");
while($d=mysqli_fetch_assoc($dq)){
?>
<option value="<?php echo $d['id']; ?>">
<?php echo $d['district_name']; ?>
</option>
<?php } ?>
</select>

<label>Block</label>
<select id="block" class="form-control">
<option value="">Select Block</option>
</select>

<label>Village</label>
<select name="village_id" id="village" class="form-control" required>
<option value="">Select Village</option>
</select>

<?php } ?>

<label>Member Name</label>
<input type="text" name="name" class="form-control" required>

<label>Designation</label>
<input type="text" name="designation" class="form-control" placeholder="Sarpanch / Panch">

<label>Mobile</label>
<input type="text" name="mobile" class="form-control">

<!-- IMAGE -->
<label>Image</label>

<label style="
display:block;
background:#3498db;
color:#fff;
padding:12px;
border-radius:8px;
text-align:center;
cursor:pointer;
">
📷 Select Image
<input type="file" name="image" id="fileInput" accept="image/*" style="display:none;">
</label>

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

<!-- PROGRESS -->
<div class="progress" id="progressBox">
<div class="progress-bar" id="progressBar">0%</div>
</div>

<label>Description</label>
<textarea name="description" class="form-control"></textarea>

<br>

<button type="submit" name="save" class="btn btn-success">
Save
</button>

</form>

</div>

</div>
</div>

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

<script>

/* IMAGE PREVIEW */
document.getElementById("fileInput").addEventListener("change", function(){
if(this.files && this.files[0]){
let preview=document.getElementById("preview");
preview.src=URL.createObjectURL(this.files[0]);
preview.style.display="block";
}
});

/* PROGRESS BAR */
document.getElementById("memberForm").addEventListener("submit", function(){

let bar=document.getElementById("progressBar");
let box=document.getElementById("progressBox");

box.style.display="block";

let width=0;

let interval=setInterval(function(){

if(width>=90){
clearInterval(interval);
}else{
width+=10;
bar.style.width=width+"%";
bar.innerHTML=width+"%";
}

},200);

});

/* DISTRICT → BLOCK */
document.getElementById("district")?.addEventListener("change", function(){
fetch("get_blocks.php?district_id="+this.value)
.then(res=>res.text())
.then(data=>{
document.getElementById("block").innerHTML=data;
document.getElementById("village").innerHTML="<option>Select Village</option>";
});
});

/* BLOCK → VILLAGE */
document.getElementById("block")?.addEventListener("change", function(){
fetch("get_villages.php?block_id="+this.value)
.then(res=>res.text())
.then(data=>{
document.getElementById("village").innerHTML=data;
});
});

</script>