<!DOCTYPE html>
<?php require("./config/registry.php"); ?>
<?php
    $conn = new mysqli($registryHost, $registryUsername, $registryPassword, $registryDatabase);
    if ($conn->connect_error) {
        die("Connection failed to registry DB: " . $conn->connect_error);
    }

    $search = trim($_GET['q'] ?? '');
    $masjids = [];
    if ($search !== '') {
        $stmt = $conn->prepare("SELECT slug, name, area FROM masjids WHERE is_active = 1 AND (name LIKE ? OR area LIKE ?) ORDER BY name");
        $like = "%$search%";
        $stmt->bind_param("ss", $like, $like);
    } else {
        $stmt = $conn->prepare("SELECT slug, name, area FROM masjids WHERE is_active = 1 ORDER BY name");
    }
    $stmt->execute();
    $result = $stmt->get_result();
    while ($row = $result->fetch_assoc()) {
        $masjids[] = $row;
    }
    $stmt->close();
    $conn->close();
?>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MasjidScreen - Find your masjid's salaah times</title>
<link rel="shortcut icon" type="image/x-icon" href="kaba.ico">
<style>
    body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: #0d1b12; color: #f2f2f2; margin: 0; padding: 0 1rem 4rem; }
    .mb-explore-wrap { max-width: 760px; margin: 0 auto; }
    .mb-explore-header { text-align: center; padding: 3rem 0 2rem; }
    .mb-explore-header h1 { margin: 0 0 0.5rem; font-weight: 300; font-size: 2.2rem; }
    .mb-explore-header p { color: #a9c2ae; margin: 0; }
    .mb-search { display: block; width: 100%; max-width: 480px; margin: 1.5rem auto 0; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid #2d4a35; background: #142a1b; color: #f2f2f2; font-size: 1rem; box-sizing: border-box; }
    .mb-masjid-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
    .mb-masjid-list a { display: block; padding: 1rem 1.25rem; background: #142a1b; border: 1px solid #2d4a35; border-radius: 10px; color: #f2f2f2; text-decoration: none; transition: border-color 0.15s ease; }
    .mb-masjid-list a:hover { border-color: #4caf6a; }
    .mb-masjid-name { font-size: 1.1rem; font-weight: 500; }
    .mb-masjid-area { color: #a9c2ae; font-size: 0.9rem; }
    .mb-empty { text-align: center; color: #a9c2ae; padding: 2rem 0; }
</style>
</head>
<body>
<div class="mb-explore-wrap">
    <div class="mb-explore-header">
        <h1>Find your masjid</h1>
        <p>Live salaah times for masjids on MasjidScreen</p>
        <form method="get" action="/">
            <input class="mb-search" type="text" name="q" placeholder="Search by masjid name or area&hellip;" value="<?= htmlspecialchars($search, ENT_QUOTES) ?>">
        </form>
    </div>
    <?php if (empty($masjids)): ?>
        <p class="mb-empty">No masjids found.</p>
    <?php else: ?>
        <ul class="mb-masjid-list">
            <?php foreach ($masjids as $m): ?>
                <li>
                    <a href="/<?= htmlspecialchars($m['slug'], ENT_QUOTES) ?>">
                        <div class="mb-masjid-name"><?= htmlspecialchars($m['name'], ENT_QUOTES) ?></div>
                        <?php if (!empty($m['area'])): ?><div class="mb-masjid-area"><?= htmlspecialchars($m['area'], ENT_QUOTES) ?></div><?php endif; ?>
                    </a>
                </li>
            <?php endforeach; ?>
        </ul>
    <?php endif; ?>
</div>
</body>
</html>
