<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);

require __DIR__ . '/config.php';

$stmt = $pdo->query(
    'SELECT id, nome, token, compartilhamento_ativo
     FROM dispositivos
     ORDER BY nome'
);

$dispositivos = $stmt->fetchAll();

function h($v)
{
    return htmlspecialchars((string)$v, ENT_QUOTES, 'UTF-8');
}
?>
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Teste da API de Localização</title>

<style>
body{
    font-family:Arial,sans-serif;
    background:#f3f6f9;
    margin:0;
    color:#1f2937
}
.wrap{
    max-width:760px;
    margin:30px auto;
    padding:0 16px
}
.card{
    background:#fff;
    border-radius:14px;
    padding:20px;
    box-shadow:0 3px 16px rgba(0,0,0,.07);
    margin-bottom:18px
}
h1{
    margin-top:0;
    color:#0f2742
}
label{
    display:block;
    font-weight:bold;
    margin:13px 0 6px
}
input,select{
    width:100%;
    box-sizing:border-box;
    padding:11px;
    border:1px solid #ccd5df;
    border-radius:9px;
    font-size:16px
}
button{
    margin-top:18px;
    border:0;
    background:#0f2742;
    color:#fff;
    padding:12px 16px;
    border-radius:9px;
    cursor:pointer;
    font-size:16px
}
button:disabled{
    opacity:.6;
    cursor:not-allowed
}
.resultado{
    margin-top:18px;
    padding:14px;
    border-radius:10px;
    white-space:pre-wrap;
    word-break:break-word;
    display:none
}
.ok{
    background:#e8f5e9;
    color:#166534
}
.erro{
    background:#fee2e2;
    color:#991b1b
}
.info{
    background:#eef4fa;
    color:#0f2742;
    padding:12px;
    border-radius:10px;
    margin-bottom:18px
}
small{
    color:#64748b
}
.actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.btn-secondary{
    background:#64748b
}
@media(max-width:600px){
    .wrap{margin:14px auto}
    .card{padding:18px}
    h1{font-size:28px}
}
</style>
</head>

<body>
<div class="wrap">

<div class="card">

<h1>Teste da API de localização</h1>

<div class="info">
Esta página envia os dados diretamente do navegador para
<strong>/api/localizacao.php</strong>.
</div>

<form id="formLocalizacao">

<label for="dispositivo">Dispositivo</label>

<select id="dispositivo" required>

<option value="">Selecione</option>

<?php foreach ($dispositivos as $d): ?>

<option
    value="<?php echo h($d['token']); ?>"
    data-id="<?php echo (int)$d['id']; ?>"
    data-nome="<?php echo h($d['nome']); ?>"
>

<?php
echo h($d['nome']);

if ((int)$d['compartilhamento_ativo'] === 1) {
    echo ' - ATIVO';
} else {
    echo ' - PAUSADO';
}
?>

</option>

<?php endforeach; ?>

</select>

<label for="token">Token</label>
<input
    id="token"
    name="token"
    readonly
    required
>

<label for="latitude">Latitude</label>
<input
    id="latitude"
    name="latitude"
    value="-28.3925"
    inputmode="decimal"
    required
>

<label for="longitude">Longitude</label>
<input
    id="longitude"
    name="longitude"
    value="-49.3958"
    inputmode="decimal"
    required
>

<label for="precisao">Precisão em metros</label>
<input
    id="precisao"
    name="precisao"
    value="10"
    inputmode="decimal"
>

<label for="bateria">Bateria (%)</label>
<input
    id="bateria"
    name="bateria"
    value="80"
    inputmode="numeric"
>

<div class="actions">
<button type="button" class="btn-secondary" id="btnGps">
Usar GPS deste celular
</button>

<button type="submit" id="btnEnviar">
Enviar localização
</button>
</div>

</form>

<div id="resultado" class="resultado"></div>

<p>
<small>
Depois de receber a mensagem de sucesso, abra
<strong>painel.php</strong> para conferir o mapa.
</small>
</p>

</div>
</div>

<script>
(function(){

    var form = document.getElementById('formLocalizacao');
    var dispositivo = document.getElementById('dispositivo');
    var token = document.getElementById('token');
    var latitude = document.getElementById('latitude');
    var longitude = document.getElementById('longitude');
    var precisao = document.getElementById('precisao');
    var bateria = document.getElementById('bateria');
    var resultado = document.getElementById('resultado');
    var btnEnviar = document.getElementById('btnEnviar');
    var btnGps = document.getElementById('btnGps');

    dispositivo.addEventListener('change', function(){
        token.value = dispositivo.value || '';
    });

    function mostrarResultado(ok, texto){
        resultado.style.display = 'block';
        resultado.className = 'resultado ' + (ok ? 'ok' : 'erro');
        resultado.textContent = texto;
    }

    btnGps.addEventListener('click', function(){

        if (!navigator.geolocation) {
            mostrarResultado(false, 'Este navegador não oferece suporte à geolocalização.');
            return;
        }

        btnGps.disabled = true;
        btnGps.textContent = 'Obtendo GPS...';

        navigator.geolocation.getCurrentPosition(
            function(pos){

                latitude.value = pos.coords.latitude;
                longitude.value = pos.coords.longitude;

                if (typeof pos.coords.accuracy !== 'undefined') {
                    precisao.value = Math.round(pos.coords.accuracy);
                }

                mostrarResultado(
                    true,
                    'GPS obtido com sucesso. Agora clique em "Enviar localização".'
                );

                btnGps.disabled = false;
                btnGps.textContent = 'Usar GPS deste celular';
            },
            function(err){

                var msg = 'Não foi possível obter o GPS.';

                if (err && err.message) {
                    msg += ' ' + err.message;
                }

                mostrarResultado(false, msg);

                btnGps.disabled = false;
                btnGps.textContent = 'Usar GPS deste celular';
            },
            {
                enableHighAccuracy:true,
                timeout:15000,
                maximumAge:0
            }
        );
    });

    form.addEventListener('submit', function(e){

        e.preventDefault();

        if (!token.value) {
            mostrarResultado(false, 'Selecione um dispositivo.');
            return;
        }

        btnEnviar.disabled = true;
        btnEnviar.textContent = 'Enviando...';

        var dados = new FormData();

        dados.append('token', token.value);
        dados.append('latitude', latitude.value);
        dados.append('longitude', longitude.value);
        dados.append('precisao', precisao.value);
        dados.append('bateria', bateria.value);

        fetch('/api/localizacao.php', {
            method:'POST',
            body:dados
        })
        .then(function(resp){
            return resp.text().then(function(txt){
                return {
                    status:resp.status,
                    ok:resp.ok,
                    text:txt
                };
            });
        })
        .then(function(ret){

            var dadosJson = null;

            try {
                dadosJson = JSON.parse(ret.text);
            } catch(e) {}

            if (dadosJson) {

                mostrarResultado(
                    !!dadosJson.ok,
                    JSON.stringify(dadosJson, null, 2)
                );

            } else {

                mostrarResultado(
                    ret.ok,
                    ret.text || ('Resposta HTTP ' + ret.status)
                );
            }

            btnEnviar.disabled = false;
            btnEnviar.textContent = 'Enviar localização';
        })
        .catch(function(err){

            mostrarResultado(
                false,
                'Erro ao comunicar com a API: ' + err.message
            );

            btnEnviar.disabled = false;
            btnEnviar.textContent = 'Enviar localização';
        });
    });

})();
</script>

</body>
</html>
