<section class="mobile-page-header">
    <span class="badge">Consulta</span>
    <h2>Consultar protocolo</h2>
    <p>Digite o número recebido ao registrar a ocorrência para acompanhar o atendimento.</p>
</section>

<form method="POST" action="<?= base_url((isset($appMode) && $appMode) ? '/app/consultar' : '/consultar') ?>" class="mobile-query-shell">
    <label>Número do protocolo</label>
    <div class="inline-actions mobile-inline">
        <input type="text" name="protocolo" required placeholder="Ex.: PR-2026-000001">
        <button type="submit" class="mobile-primary-button">Consultar</button>
    </div>
</form>

<?php if (!empty($resultado)): ?>
    <div class="query-result-card">
        <div class="result-header">
            <div>
                <small>Protocolo</small>
                <h3><?= e($resultado['protocolo']) ?></h3>
            </div>
            <span class="mobile-status-badge"><?= e($resultado['status']) ?></span>
        </div>
        <div class="detail-list">
            <p><strong>Categoria:</strong> <?= e($resultado['categoria_nome']) ?></p>
            <p><strong>Setor:</strong> <?= e($resultado['setor_nome'] ?? '-') ?></p>
            <p><strong>Data:</strong> <?= e($resultado['criado_em']) ?></p>
            <p><strong>Referência:</strong> <?= e($resultado['endereco_referencia'] ?: '-') ?></p>
        </div>
        <p><strong>Descrição:</strong> <?= e($resultado['descricao']) ?></p>
        <div id="mapa-consulta" class="query-map"></div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        if (typeof renderReadonlyMap === 'function') {
            renderReadonlyMap('mapa-consulta', <?= json_encode((float)$resultado['latitude']) ?>, <?= json_encode((float)$resultado['longitude']) ?>, <?= json_encode($resultado['categoria_cor'] ?: '#1351b4') ?>);
        }
    });
    </script>
<?php elseif ($_SERVER['REQUEST_METHOD'] === 'POST'): ?>
    <div class="alert error">Protocolo não encontrado.</div>
<?php endif; ?>
