<?php
require_once("auth.php");
require_once("../api/config/db.php");

$q = $conn->query("
SELECT id,name,mobile,father_name,profile_photo 
FROM users 
WHERE village_id='$village_id' 
AND role='sub_admin' 
AND status='approved'
ORDER BY id DESC
");
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Approved Villagers</title>
<link rel="stylesheet" href="../assets/css/mobile-premium.css">

<style>
body{margin:0;font-family:Arial;background:#f1f5f9}
.app{max-width:520px;margin:0 auto;padding-bottom:104px;min-height:100vh;background:#f8fafc}
.header{background:#16a34a;color:white;padding:20px;border-radius:0 0 25px 25px}
.card{background:white;margin:14px;padding:14px;border-radius:18px}
</style>
<link rel="stylesheet" href="../assets/css/mobile-premium.css">
</head>

<body>
<div class="app">

<div class="header">
<h2>Approved Villagers</h2>
</div>

<?php while($row = $q->fetch_assoc()): ?>
<a class="card list-card" href="villager-detail.php?id=<?= intval($row['id']) ?>">
<?php if (!empty($row['profile_photo'])): ?>
<img src="../<?= htmlspecialchars($row['profile_photo']) ?>" alt="">
<?php else: ?>
<div class="mini-avatar"><?= htmlspecialchars(strtoupper(substr($row['name'], 0, 1))) ?></div>
<?php endif; ?>
<div>
<b><?= htmlspecialchars($row['name']) ?></b><br>
<?= htmlspecialchars($row['mobile']) ?><br>
<?= htmlspecialchars($row['father_name'] ?? '-') ?>
</div>
</a>
<?php endwhile; ?>

<?php require_once("includes/bottom-nav.php"); ?>
</div>
<script src="../assets/js/mobile-app.js"></script>
</body>
</html>
