<section class="page-header">
    <h2>Mapa geral das ocorrencias</h2>
    <p>Visualize os pontos registrados para orientar a triagem e o deslocamento das equipes.</p>
</section>

<?php
$mapaBasePath = app_base_path() . '/index.php';
$mapaFilterAction = $mapaBasePath;
$mapaClearAction = $mapaBasePath . '?route=' . rawurlencode('/admin/mapa');
$mapaStatuses = ['ABERTA','RECEBIDA','EM_ANALISE','ENCAMINHADA','EM_ATENDIMENTO','CONCLUIDA','NAO_PROCEDE','DUPLICADA'];
?>

<form method="GET" action="<?= e($mapaFilterAction) ?>" class="card filter-grid">
    <input type="hidden" name="route" value="/admin/mapa">
    <div>
        <label>Status</label>
        <select name="status">
            <option value="">Em andamento</option>
            <?php foreach ($mapaStatuses as $status): ?>
                <option value="<?= e($status) ?>" <?= ($filtrosMapa['status'] ?? '') === $status ? 'selected' : '' ?>><?= e($status) ?></option>
            <?php endforeach; ?>
        </select>
    </div>
    <div>
        <label>Categoria</label>
        <select name="categoria_id">
            <option value="">Todas</option>
            <?php foreach ($categorias as $categoria): ?>
                <option value="<?= (int)$categoria['id'] ?>" <?= (string)($filtrosMapa['categoria_id'] ?? '') === (string)$categoria['id'] ? 'selected' : '' ?>><?= e($categoria['nome']) ?></option>
            <?php endforeach; ?>
        </select>
    </div>
    <div class="filter-actions">
        <button type="submit" class="btn">Aplicar filtros</button>
        <a href="<?= e($mapaClearAction) ?>" class="btn btn-outline">Limpar</a>
    </div>
</form>

<div class="card">
    <div class="card-head">
        <div>
            <h3>Pontos no mapa</h3>
            <p class="muted"><?= count($pontosMapa) ?> ocorrencia(s) exibida(s).</p>
        </div>
    </div>
    <div class="map-layout"><div id="mapa-geral" class="map-box extra-large-map"></div><aside class="map-legend"><h4>Legenda por categoria</h4><?php if (empty($legendaCategorias)): ?><p class="muted">Sem ocorrencias no mapa.</p><?php else: ?><ul><?php foreach ($legendaCategorias as $nome => $cor): ?><li><span class="legend-swatch" style="background: <?= e($cor) ?>;"></span><?= e($nome) ?></li><?php endforeach; ?></ul><?php endif; ?></aside></div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    if (typeof renderMultiMarkerMap === 'function') {
        renderMultiMarkerMap('mapa-geral', <?= json_encode($pontosMapa, JSON_UNESCAPED_UNICODE) ?>);
    }
});
</script>
