<div id="mapa_entrega" style="height: 400px; width: 100%; border-radius: 15px;"></div>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
    var map = L.map('mapa_entrega').setView([-22.9068, -43.1729], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    // Ícone do Entregador (pode ser uma moto ou bonequinho)
    var iconEntregador = L.icon({ iconUrl: 'assets/moto.png', iconSize: [38, 38] });
    var marcadorEntregador = L.marker([0, 0], {icon: iconEntregador}).addTo(map);

    // Marcar a Estação de Destino (Ex: Alvorada)
    var destino = L.marker([-23.0003, -43.3659]).addTo(map).bindPopup("Sua Entrega: Estação Alvorada");

    function atualizarMapa() {
        fetch('db/rotas/rota_<?php echo $id_entrega; ?>.json')
        .then(response => response.json())
        .then(data => {
            var novaPos = [data.lat, data.lng];
            marcadorEntregador.setLatLng(novaPos);
            
            // Ajusta o zoom para mostrar tanto o entregador quanto o destino
            var group = new L.featureGroup([marcadorEntregador, destino]);
            map.fitBounds(group.getBounds(), {padding: [50, 50]});
        });
    }

    // Atualiza a posição do entregador no mapa a cada 5 segundos
    setInterval(atualizarMapa, 5000);
</script>