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

$q = $conn->query("
SELECT v.id,v.name,v.mobile,v.selfie 
FROM visitors v
JOIN visitor_logs vl ON v.id=vl.visitor_id
WHERE vl.village_id='$village_id'
GROUP BY v.id
ORDER BY v.id DESC
");
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visitors</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:#2563eb;color:white;padding:20px;border-radius:0 0 25px 25px}
.card{background:white;margin:14px;padding:14px;border-radius:18px;display:flex;gap:12px;align-items:center}
img{width:60px;height:60px;border-radius:12px;object-fit:cover}
</style>
<link rel="stylesheet" href="../assets/css/mobile-premium.css">
</head>

<body>
<div class="app">

<div class="header">
<h2>Visitors</h2>
</div>

<?php while($row = $q->fetch_assoc()): ?>
<a class="card" href="visitor-detail.php?id=<?= intval($row['id']) ?>">
<?php if (!empty($row['selfie'])): ?>
<img src="../<?= htmlspecialchars($row['selfie']) ?>" alt="">
<?php else: ?>
<div class="mini-avatar">User</div>
<?php endif; ?>
<div>
<b><?= htmlspecialchars($row['name']) ?></b><br>
<?= htmlspecialchars($row['mobile']) ?>
</div>
</a>
<?php endwhile; ?>

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