@extends('layouts.logeado')
@section('style')
    <link rel="stylesheet" href="https://openlayers.org/en/v6.9.0/css/ol.css" type="text/css">
    <style>
        .ol-popup {
            position: absolute;
            background-color: white;
            box-shadow: 0 1px 4px rgba(0,0,0,0.2);
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 280px;
        }
        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }
        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }
        .ol-popup-closer:after {
            content: "✖";
        }          
    </style>
@endsection
@section('sub_title', 'Vehiculos Avianca')
@section('sub_content')
<div class="card">
    <div class="card-body" style="min-height: 500px;">
        <div id="mapa" style="height: 500px;width: 100%; ">

        </div>
    </div>
</div>
<div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
</div>
@endsection
@section('script')
<script src="https://openlayers.org/en/v6.9.0/build/ol.js" type="text/javascript"></script>
<script>
    var fbuscar = 0;
    var markers = new Array();
    var infos = new Array();
    var borrar = new Array();
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var closer = document.getElementById('popup-closer');
    var vectorSource, vectorLayer;

    var iconoAv = new ol.style.Icon({
                size: [40,28],
                src: '/img/iconolibre.png'
            });

    const overlay = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250,
        }
    });

    closer.onclick = function () {
        overlay.setPosition(undefined);
        closer.blur();
        return false;
    };

    var placa = "";

    var currWindow = false;
    var map, vehiculo, fbuscar = 0;

    map = new ol.Map({ 
        layers: [ 
            new ol.layer.Tile({ 
                source: new ol.source.OSM() 
            })], 
        target: 'mapa', 
        view: new ol.View({ 
            center: ol.proj.fromLonLat([-73.12, 7.122270]),
            zoom: 13
        }) 
    });

    $(document).ready(function() {
        vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector()
        });
        map.addLayer(vectorLayer);
        map.addOverlay(overlay);

        initaxis();
    });

    function initaxis() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "/vehiculos/ubicar/avianca",
        })
        .done(function(data, textStatus, jqXHR) {
            console.log(data.vehiculos, "init");
            if (data.vehiculos,length > 0) {
                vehiculo = 0;
                for (let j in data.vehiculos) {
                    markers[vehiculo] = new ol.Feature({
                        geometry: new ol.geom.Point(ol.proj.fromLonLat([data.vehiculos[j].longitud, data.vehiculos[j].latitud])),
                        posicion: vehiculo,
                        cuenta: data.vehiculos[j].id
                    });
                    markers[vehiculo].setStyle(new ol.style.Style({
                        image: iconoAv
                    }));
                    vectorLayer.getSource().addFeature(markers[vehiculo]);

                    infos[vehiculo] = data.vehiculos[j].conductor.NOMBRE + '<br>Placa: ' + data.vehiculos[j].placa + '<br>Teléfono: ' + data.vehiculos[j].conductor.TELEFONO + '<br>Celular: ' + data.vehiculos[j].conductor.CELULAR;
                    vehiculo++;
                }
            } 
            console.log(markers, "init");
            setInterval(ubicar, 15000);
        
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'La consulta de vehículos falló'
			});
        });
    }

    map.on("click", function (evt) {
        var feature = map.forEachFeatureAtPixel(evt.pixel,
            function(feature) {
                return feature;
            }
        );

        if (feature) {
            var coordinates = this.getCoordinateFromPixel(evt.pixel);
            content.innerHTML = infos[feature.A.posicion];
            overlay.setPosition(coordinates);
        }
    });


    function ubicar() {
         if (fbuscar == 0) {
             fbuscar = 1;

            $.ajax({
                type: "GET",
                dataType: "json",
                url: "/vehiculos/ubicar/avianca",
            })
            .done(function(data, textStatus, jqXHR) {
                console.log(data.vehiculos, "ubicar");
                if (data.vehiculos.length > 0) {
                    borrar = [];
                    if(placa = ""){
                        for (let a in markers) {
                            let found = false;
                            for (var b in data.vehiculos) {
                                if(markers[a].A.cuenta == data.vehiculos[b].id){
                                    data.vehiculos[b].mapeado = 1;
                                    markers[a].getGeometry().setCoordinates(new ol.geom.Point(ol.proj.fromLonLat(data.vehiculos[b].longitud, data.vehiculos[b].latitud)));
                                    markers[a].setStyle(new ol.style.Style({
                                        image: iconoAv
                                    }));
                                    found = true;
                                    break;
                                }
                            }
                            if(found == false){
                                vectorLayer.getSource().removeFeatures(markers[a]);
                                borrar.push(a);                        
                            }
                        }
                    }else{
                        vectorLayer.getSource().clear();
                        markers = [];
                        infos = [];
                    }

                    var size = markers.length;
                    for (let key in data.vehiculos) {
                        if (!data.vehiculos[key].hasOwnProperty('mapeado')){
                            markers[size] = new ol.Feature({
                                geometry: new ol.geom.Point(ol.proj.fromLonLat([data.vehiculos[key].longitud, data.vehiculos[key].latitud])),
                                posicion: size,
                                cuenta: data.vehiculos[key].id
                            });
                            markers[size].setStyle(new ol.style.Style({
                                image: iconoAv
                            }));
                            vectorLayer.getSource().addFeature(markers[size]);
                           
                            infos[size] = data.vehiculos[key].conductor.NOMBRE + '<br>Placa: ' + data.vehiculos[key].placa + '<br>Teléfono: ' + data.vehiculos[key].conductor.TELEFONO + '<br>Celular: ' + data.vehiculos[key].conductor.CELULAR;
                            size++;
                        }
                    }  
                }else {
                    vectorLayer.getSource().clear();
                    markers = [];
                    infos = [];
                }
                borrarMarcadores(); 
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                fbuscar = 0;
            });
         }
    }

    function borrarMarcadores() {
        for (let key in borrar) {
            markers.splice(borrar[key], 1);
            infos.splice(borrar[key], 1);
        }
        borrar = [];
        fbuscar = 0;
    }

</script>

@endsection