@extends('layout.home', ['valor' => 'dispositivos'])

@section('content')
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>

<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet"></script>

<!-- Esri Leaflet Geocoder -->
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css" />
<script src="https://unpkg.com/esri-leaflet-geocoder"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>


<div id="map" style="width: 100%; height: 100%; margin-bottom: 50%"></div>

<script>
    $(document).ready(function() {
            var map = initializeMap();
            var searchControl = initializeGeocoding(map);
            var results = L.layerGroup().addTo(map);

            searchControl.on("results", function(data) {
                displaySearchResults(data, results);
            });

            var geolocalizacion = @json($geolocalizacion);
            if (geolocalizacion.length > 0) {
                addMarkers(map, geolocalizacion);
                addPolyline(map, geolocalizacion);
            }
        });

        function initializeMap() {
            var map = L.map("map").setView([-34.66949400236502, -58.55846806222107], 12);
            L.esri.basemapLayer("Streets").addTo(map);
            return map;
        }

        function initializeGeocoding(map) {
            return L.esri.Geocoding.geosearch({
                providers: [
                    L.esri.Geocoding.arcgisOnlineProvider({
                        apikey: 'AAPTxy8BH1VEsoebNVZXo8HurK3an6GNHxXLDmAqhfeWr3Pbzw9a3cP4FuzlAnKp2FsXZs6mhcxqlv6NMMYPw5sfWisM8Wf__Sy8rWt0AdUrNKNnLMyUuLuTsTWoK6CSa9YFjXh9fjPmL45whYtvfZHsGGirIB3ZL-s-E6xy1srzUKAHgPy32KzULuubzKl4xUQE0uIS4WJQttp8ZNuQrYH0OVHaCKfz-Vh7G4GadZ1kdtw.AT1_qMoNt6Nc'
                    })
                ]
            }).addTo(map);
        }

        function displaySearchResults(data, results) {
            results.clearLayers();
            for (var i = data.results.length - 1; i >= 0; i--) {
                results.addLayer(L.marker(data.results[i].latlng));
            }
        }

        function addMarkers(map, geolocalizacion) {
            var firstPoint = geolocalizacion[0];
            var lastPoint = geolocalizacion[geolocalizacion.length - 1];

            if (firstPoint.latitud && firstPoint.longitud) {
                L.marker([firstPoint.latitud, firstPoint.longitud])
                    .bindTooltip("Latitud: " + firstPoint.latitud + "<br>Longitud: " + firstPoint.longitud +
                        "<br>Rumbo: " + firstPoint.rumbo)
                    .addTo(map);
            }

            if (lastPoint.latitud && lastPoint.longitud) {
                L.marker([lastPoint.latitud, lastPoint.longitud])
                    .bindTooltip("Latitud: " + lastPoint.latitud + "<br>Longitud: " + lastPoint.longitud +
                        "<br>Rumbo: " + lastPoint.rumbo)
                    .addTo(map);
            }
        }

        function addPolyline(map, geolocalizacion) {
            var latlngs = geolocalizacion.map(function(point) {
            return [point.latitud, point.longitud];
            });

            var polyline = L.polyline(latlngs, {
            color: 'blue'
            }).addTo(map);

            polyline.getLatLngs().forEach(function(latlng, index) {
            var icon = L.divIcon({
                className: 'custom-div-icon',
                html: `<img src="{{ asset('img/arrow.png') }}" style="transform: rotate(${geolocalizacion[index].rumbo}deg); width: 20px; height: 20px;">`,
                iconSize: [20, 20],
                iconAnchor: [10, 10]
            });

            L.marker(latlng, {
                icon: icon
            })
            .bindTooltip("Latitud: " + latlng.lat + "<br>Longitud: " + latlng.lng + "<br>Rumbo: " +
                geolocalizacion[index].rumbo)
            .addTo(map);
            });
        }
</script>
@endsection