<section class="app-form-card">
    <div class="app-section-kicker">Nova ocorrência</div>
    <h2 class="app-form-title">Registrar ocorrência</h2>

    <?php if (!empty($erro)): ?>
        <div class="app-alert app-alert-error"><?= e($erro) ?></div>
    <?php endif; ?>

    <form method="POST" action="<?= base_url('/app/registrar') ?>" enctype="multipart/form-data" id="appRegistroForm">
        <label class="app-label">Categoria</label>
        <select name="categoria_id" id="categoria_id" class="app-input" required>
            <?php foreach (($categorias ?? array()) as $categoria): ?>
                <option value="<?= (int)$categoria['id'] ?>" <?= ((int)($_GET['cat'] ?? 0) === (int)$categoria['id']) ? 'selected' : '' ?>>
                    <?= e($categoria['nome']) ?>
                </option>
            <?php endforeach; ?>
        </select>

        <label class="app-label">Descreva o problema</label>
        <textarea name="descricao" class="app-input app-textarea" rows="4" placeholder="Ex.: buraco grande em frente ao número 120" required></textarea>

        <label class="app-label">Foto</label>
        <input type="file" name="imagem" class="app-input" accept="image/*" capture="environment">
        <div class="app-hint">No celular, tente abrir a câmera traseira automaticamente.</div>

        <label class="app-label">Endereço de referência</label>
        <input type="text" name="endereco_referencia" class="app-input" placeholder="Rua, número, ponto de referência">

        <div class="app-map-card">
            <div class="app-map-title">📍 Localização</div>
            <div class="app-hint">Ao abrir a tela, o app tenta capturar sua localização automaticamente.</div>
            <div class="app-grid-2">
                <input type="text" name="latitude" id="latitude" class="app-input" placeholder="Latitude" required>
                <input type="text" name="longitude" id="longitude" class="app-input" placeholder="Longitude" required>
            </div>
            <button type="button" class="btn-secondary" id="geoButton">Usar minha localização</button>
        </div>

        <label class="app-checkline">
            <input type="checkbox" name="anonima" value="1">
            <span>Enviar de forma anônima</span>
        </label>

        <div class="app-grid-1">
            <input type="text" name="cidadao_nome" class="app-input" placeholder="Seu nome (opcional)">
            <input type="text" name="cidadao_telefone" class="app-input" placeholder="Telefone (opcional)">
            <input type="email" name="cidadao_email" class="app-input" placeholder="E-mail (opcional)">
        </div>

        <button type="submit" class="btn-submit" id="submitAppButton">Enviar ocorrência</button>
        <div class="app-submit-feedback" id="submitFeedback">Enviando ocorrência...</div>
    </form>
</section>
