<?php
$catPre = isset($_GET['cat']) ? (int) $_GET['cat'] : 0;
$sucessoEnvio = isset($_GET['sent']) && $_GET['sent'] === '1';
?>

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

<?php if ($sucessoEnvio): ?>
    <div class="app-alert app-alert--success pulse-in">
        <strong>✔ Ocorrência enviada com sucesso</strong>
        <div>Seu protocolo foi gerado. Você pode acompanhar em Consultar protocolo.</div>
    </div>
<?php endif; ?>

<section class="card-soft form-card">
    <div class="form-card__header">
        <h2>Registrar ocorrência</h2>
        <p>Informe o problema e confirme a localização.</p>
    </div>

    <form method="POST" action="<?= base_url('/registrar') ?>" enctype="multipart/form-data" class="app-form" id="formOcorrenciaApp">
        <label for="categoria_id">Tipo de ocorrência</label>
        <select name="categoria_id" id="categoria_id" required>
            <option value="">Selecione</option>
            <?php if (!empty($categorias)): ?>
                <?php foreach ($categorias as $categoria): ?>
                    <option value="<?= (int) $categoria['id'] ?>" <?= $catPre === (int) $categoria['id'] ? 'selected' : '' ?>>
                        <?= e($categoria['nome']) ?>
                    </option>
                <?php endforeach; ?>
            <?php endif; ?>
        </select>

        <label for="descricao">Descrição</label>
        <textarea name="descricao" id="descricao" rows="4" placeholder="Descreva o problema encontrado" required></textarea>

        <label for="imagem">Foto</label>
        <input type="file" name="imagem" id="imagem" accept="image/*" capture="environment">
        <small class="form-tip">No celular, a câmera traseira será sugerida automaticamente quando disponível.</small>

        <div class="form-actions-inline">
            <button type="button" class="btn-app btn-app--secondary tap-animate" id="btnGeoAuto">📍 Usar minha localização</button>
        </div>

        <div id="map" class="map-box"></div>

        <div class="grid-2">
            <div>
                <label for="latitude">Latitude</label>
                <input type="text" name="latitude" id="latitude" required>
            </div>
            <div>
                <label for="longitude">Longitude</label>
                <input type="text" name="longitude" id="longitude" required>
            </div>
        </div>

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

        <label class="check-row">
            <input type="checkbox" name="anonima" value="1">
            <span>Enviar ocorrência anonimamente</span>
        </label>

        <label for="cidadao_nome">Nome</label>
        <input type="text" name="cidadao_nome" id="cidadao_nome">

        <label for="cidadao_telefone">Telefone</label>
        <input type="text" name="cidadao_telefone" id="cidadao_telefone">

        <label for="cidadao_email">E-mail</label>
        <input type="email" name="cidadao_email" id="cidadao_email">

        <button type="submit" class="btn-app btn-app--primary tap-animate">Enviar ocorrência</button>
    </form>
</section>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
(function () {
    var latInput = document.getElementById('latitude');
    var lngInput = document.getElementById('longitude');
    var enderecoInput = document.getElementById('endereco_referencia');
    var btnGeo = document.getElementById('btnGeoAuto');
    var form = document.getElementById('formOcorrenciaApp');

    if (!document.getElementById('map')) {
        return;
    }

    var startLat = parseFloat(latInput.value || '-20.5833');
    var startLng = parseFloat(lngInput.value || '-46.9200');
    var map = L.map('map').setView([startLat, startLng], 16);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    var marker = L.marker([startLat, startLng], { draggable: true }).addTo(map);

    function atualizarCampos(lat, lng) {
        latInput.value = lat.toFixed(6);
        lngInput.value = lng.toFixed(6);
    }

    function buscarEndereco(lat, lng) {
        var url = 'https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=' + encodeURIComponent(lat) + '&lon=' + encodeURIComponent(lng);
        fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (data && data.display_name && !enderecoInput.value) {
                    enderecoInput.value = data.display_name;
                }
            })
            .catch(function () {});
    }

    marker.on('dragend', function (e) {
        var p = e.target.getLatLng();
        atualizarCampos(p.lat, p.lng);
        buscarEndereco(p.lat, p.lng);
    });

    map.on('click', function (e) {
        marker.setLatLng(e.latlng);
        atualizarCampos(e.latlng.lat, e.latlng.lng);
        buscarEndereco(e.latlng.lat, e.latlng.lng);
    });

    function localizarUsuario() {
        if (!navigator.geolocation) {
            return;
        }

        btnGeo.classList.add('is-loading');
        navigator.geolocation.getCurrentPosition(function (pos) {
            var lat = pos.coords.latitude;
            var lng = pos.coords.longitude;
            map.setView([lat, lng], 17);
            marker.setLatLng([lat, lng]);
            atualizarCampos(lat, lng);
            buscarEndereco(lat, lng);
            btnGeo.classList.remove('is-loading');
        }, function () {
            btnGeo.classList.remove('is-loading');
        }, {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 0
        });
    }

    btnGeo.addEventListener('click', localizarUsuario);
    atualizarCampos(startLat, startLng);

    setTimeout(localizarUsuario, 500);

    form.addEventListener('submit', function () {
        var submit = form.querySelector('button[type="submit"]');
        submit.classList.add('is-loading');
        submit.innerHTML = 'Enviando...';
    });
})();
</script>
