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

$villager_id = intval($_GET["id"] ?? 0);
if (!$villager_id) {
    die("Villager ID required");
}

function userColumnExistsForDetail($conn, $column) {
    $column = $conn->real_escape_string($column);
    $res = $conn->query("SHOW COLUMNS FROM users LIKE '$column'");
    return $res && $res->num_rows > 0;
}

$hasAadhaarBack = userColumnExistsForDetail($conn, "aadhaar_back");
$aadhaarBackSelect = $hasAadhaarBack ? "u.aadhaar_back," : "NULL AS aadhaar_back,";

$q = $conn->query("
SELECT
    u.id,
    u.name,
    u.mobile,
    u.father_name,
    u.dob,
    u.age,
    u.status,
    u.profile_photo,
    u.id_proof,
    $aadhaarBackSelect
    u.id_type,
    u.created_at,
    v.village_name,
    b.name AS block_name,
    d.name AS district_name
FROM users u
LEFT JOIN villages v ON u.village_id = v.id
LEFT JOIN blocks b ON v.block_id = b.id
LEFT JOIN districts d ON b.district_id = d.id
WHERE u.id='$villager_id'
AND u.village_id='$village_id'
AND u.role='sub_admin'
LIMIT 1
");

if (!$q || $q->num_rows === 0) {
    die("Villager not found");
}

$data = $q->fetch_assoc();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Villager Detail</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../assets/css/mobile-premium.css">
<style>
.selfie{width:128px;height:128px;border-radius:34px;object-fit:cover;background:#e2e8f0;margin:0 auto 12px;display:block}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.doc-img{width:100%;height:170px;object-fit:cover;border-radius:18px;background:#e2e8f0}
@media(max-width:420px){.doc-grid{grid-template-columns:1fr}}
</style>
</head>
<body>
<div class="mobile-shell">
    <div class="mobile-header">
        <a href="<?= $data["status"] === "pending" ? "pending-sub-admins.php" : "approved-sub-admins.php" ?>" style="color:#fff;font-weight:800;">Back</a>
        <h2>Villager Detail</h2>
        <p><?= htmlspecialchars($data["village_name"] ?? "Village") ?></p>
    </div>

    <div class="premium-card" style="text-align:center;">
        <?php if (!empty($data["profile_photo"])): ?>
            <img class="selfie" src="../<?= htmlspecialchars($data["profile_photo"]) ?>" alt="">
        <?php else: ?>
            <div class="selfie" style="display:grid;place-items:center;"><?= htmlspecialchars(strtoupper(substr($data["name"], 0, 1))) ?></div>
        <?php endif; ?>
        <h2><?= htmlspecialchars($data["name"]) ?></h2>
        <p><?= htmlspecialchars($data["mobile"]) ?></p>
        <span class="badge"><?= htmlspecialchars(ucfirst($data["status"])) ?></span>
    </div>

    <div class="premium-card">
        <h3>Personal Information</h3>
        <div class="row"><span>Father Name</span><b><?= htmlspecialchars($data["father_name"] ?? "-") ?></b></div>
        <div class="row"><span>Date of Birth</span><b><?= htmlspecialchars($data["dob"] ?? "-") ?></b></div>
        <div class="row"><span>Age</span><b><?= htmlspecialchars($data["age"] ?? "-") ?></b></div>
        <div class="row"><span>Village</span><b><?= htmlspecialchars($data["village_name"] ?? "-") ?></b></div>
        <div class="row"><span>Block</span><b><?= htmlspecialchars($data["block_name"] ?? "-") ?></b></div>
        <div class="row"><span>District</span><b><?= htmlspecialchars($data["district_name"] ?? "-") ?></b></div>
        <div class="row"><span>Registered</span><b><?= htmlspecialchars($data["created_at"] ?? "-") ?></b></div>
    </div>

    <div class="premium-card">
        <h3>Documents</h3>
        <div class="doc-grid">
            <div>
                <p><b><?= htmlspecialchars($data["id_type"] ? ucfirst(str_replace("_", " ", $data["id_type"])) : "Aadhaar") ?> Front</b></p>
                <?php if (!empty($data["id_proof"])): ?>
                    <img class="doc-img" src="../<?= htmlspecialchars($data["id_proof"]) ?>" alt="">
                <?php else: ?>
                    <div class="empty">No front image</div>
                <?php endif; ?>
            </div>
            <div>
                <p><b>Aadhaar Back</b></p>
                <?php if (!empty($data["aadhaar_back"])): ?>
                    <img class="doc-img" src="../<?= htmlspecialchars($data["aadhaar_back"]) ?>" alt="">
                <?php else: ?>
                    <div class="empty">No back image</div>
                <?php endif; ?>
            </div>
        </div>
    </div>

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