var dataTemporary = [[21.0419, 105.821],
[21.04188, 105.82111],
[21.04186, 105.82137],
[21.04183, 105.82157],
[21.04182, 105.82168],
[21.04179, 105.82188],
[21.04173, 105.82209],
[21.04165, 105.82235],
[21.04158, 105.82258],
[21.04156, 105.82263],
[21.04155, 105.82265],
[21.04147, 105.82285],
[21.04143, 105.82296],
[21.04141, 105.82301],
[21.04129, 105.82333],
[21.0412, 105.82351],
[21.04114, 105.82361],
[21.04113, 105.82365],
[21.04105, 105.82384],
[21.041, 105.82393],
[21.0409, 105.82425],
[21.04085, 105.82441],
[21.04083, 105.82444],
[21.04077, 105.82462],
[21.04076, 105.82463],
[21.0407, 105.8248],
[21.04066, 105.82491],
[21.04057, 105.82516],
[21.04052, 105.82529],
[21.04045, 105.82548],
[21.0404, 105.82562],
[21.04037, 105.82576],
[21.04031, 105.82595],
[21.04023, 105.82618],
[21.04019, 105.8263],
[21.04016, 105.82637],
[21.04009, 105.82653],
[21.04007, 105.82656],
[21.04, 105.82671],
[21.03995, 105.82683],
[21.03986, 105.82702],
[21.03983, 105.82708],
[21.03977, 105.82731],
[21.03972, 105.82748],
[21.03965, 105.82769],
[21.03959, 105.82802],
[21.03952, 105.82841],
[21.03952, 105.8285],
[21.03953, 105.8286],
[21.03957, 105.82871],
[21.03957, 105.82871],
[21.03946, 105.82874],
[21.03921, 105.82882],
[21.03918, 105.82883],
[21.03881, 105.829],
[21.03866, 105.82904],
[21.03841, 105.82913],
[21.03839, 105.8292],
[21.03836, 105.82925],
[21.03823, 105.82966],
[21.03818, 105.82972],
[21.03806, 105.82977],
[21.03785, 105.82976],
[21.03776, 105.8299],
[21.03776, 105.83003],
[21.03776, 105.8302],
[21.03775, 105.83051],
[21.03777, 105.83096],
[21.03772, 105.83102],
[21.03767, 105.83105],
[21.03755, 105.83109],
[21.03751, 105.83109],
[21.03747, 105.83109],
[21.0374, 105.83109],
[21.03712, 105.8311],
[21.03677, 105.8311],
[21.03657, 105.8311],
[21.0365, 105.83112],
[21.03637, 105.83116],
[21.03621, 105.83121],
[21.03596, 105.83129],
[21.03583, 105.83133],
[21.03525, 105.83149],
[21.03512, 105.83153],
[21.03495, 105.83159],
[21.03486, 105.83162],
[21.03481, 105.83163],
[21.0347, 105.83167],
[21.03466, 105.83167],
[21.03452, 105.8317],
[21.03446, 105.83171],
[21.03446, 105.83171],
[21.03442, 105.83162],
[21.03442, 105.83157],
[21.03446, 105.83083],
[21.03448, 105.83052],
[21.03448, 105.83045],
[21.03449, 105.83027],
[21.03453, 105.82988],
[21.03454, 105.82975],
[21.03454, 105.82963],
[21.03457, 105.82924],
[21.03459, 105.82906],
[21.03461, 105.82883],
[21.03461, 105.82873],
[21.03462, 105.8286],
[21.03463, 105.8285],
[21.03463, 105.82849],
[21.03464, 105.82837],
[21.03465, 105.82828],
[21.03465, 105.82826],
[21.03465, 105.82825],
[21.03466, 105.82809],
[21.03467, 105.82804],
[21.03467, 105.828],
[21.03467, 105.82795],
[21.03468, 105.82789],
[21.0347, 105.8276],
[21.03471, 105.82746],
[21.03472, 105.82733],
[21.03472, 105.82717],
[21.03475, 105.82697],
[21.03476, 105.82678],
[21.03478, 105.82662],
[21.03483, 105.82607],
[21.03484, 105.82599],
[21.03485, 105.82574],
[21.03486, 105.82566],
[21.03487, 105.82559],
[21.03488, 105.82536],
[21.03489, 105.82532],
[21.03489, 105.82526],
[21.0349, 105.82513],
[21.03491, 105.82497],
[21.03491, 105.82493],
[21.03491, 105.82488],
[21.03493, 105.82467],
[21.03494, 105.82457],
[21.03494, 105.82451],
[21.03495, 105.82441],
[21.03497, 105.82411],
[21.03499, 105.8239],
[21.03506, 105.82336],
[21.03506, 105.82329],
[21.03507, 105.82319],
[21.03508, 105.8231],
[21.03509, 105.82297],
[21.03509, 105.82293],
[21.03509, 105.8229],
[21.0351, 105.82279],
[21.0351, 105.82271],
[21.03511, 105.82261],
[21.03513, 105.82235],
[21.03514, 105.8223],
[21.03514, 105.82224],
[21.03514, 105.82222],
[21.03515, 105.82213],
[21.03516, 105.82199],
[21.03516, 105.82196],
[21.03517, 105.82181],
[21.03518, 105.82169],
[21.03519, 105.82156],
[21.03519, 105.82148],
[21.0352, 105.8214],
[21.03523, 105.82101],
[21.03524, 105.82082],
[21.03527, 105.8203],
[21.03527, 105.8203],
[21.03541, 105.82032],
[21.03559, 105.82034],
[21.03613, 105.82038],
[21.03635, 105.8204],
[21.03659, 105.8204],
[21.03685, 105.82043],
[21.03705, 105.82045],
[21.03723, 105.82048],
[21.03856, 105.82064],
[21.03874, 105.82066],
[21.03879, 105.82071],
[21.03882, 105.82076],
[21.03884, 105.82082],
[21.03884, 105.82088],
[21.03884, 105.82095],
[21.03883, 105.82102],
[21.03882, 105.8211],
[21.03881, 105.82119],
[21.0388, 105.82131],
[21.03874, 105.82193],
[21.03873, 105.82211],
[21.0387, 105.82263],
[21.03864, 105.82287],
[21.03844, 105.82336],
[21.03836, 105.82362],
[21.03831, 105.82387],
[21.0383, 105.82391],
[21.03828, 105.82404],
[21.03827, 105.82422],
[21.03827, 105.82436],
[21.03827, 105.82449],
[21.03826, 105.82461],
[21.03825, 105.82471],
[21.03823, 105.82481],
[21.0382, 105.82494],
[21.03818, 105.82501],
[21.03818, 105.82501],
[21.0382, 105.82501],
[21.0382, 105.82501]
];

function updateService(dataTemporary) {
    let id = "HN1234";
    for (let i = 0; i < dataTemporary.length; i++) {
        // console.log(dataTemporary[i][0], dataTemporary[i][1]);
        setTimeout(function () {
            $.getJSON("/majestic/Dashboard/php/api/post/update_service.php", {
                id:id,
                lat: dataTemporary[i][0],
                long: dataTemporary[i][1]
            }, function (data) {
                // console.log(data);
            });

        }, 500*i);

    }
}
updateService(dataTemporary);

// function loadname(){
//     $.getJSON('/majestic/Dashboard/php/api/post/R_temporary.php',{},function (data) {
//         // console.log(data);
//         $("#display-username").text(data["username"]);
//         // $("#display-fullname").text('Welcome back ' + data["fullname"]);
//     });
// }
// window.onload=loadname;
// Define map

var cities = L.layerGroup();
var mLittleton = L.marker([21.1227, 105.7532], { icon: iconRed }).bindPopup('This is Littleton, CO.').addTo(cities);
var mDenver = L.marker([21.0046, 105.8529], { icon: iconRed }).bindPopup('This is Denver, CO.').addTo(cities);
var mAurora = L.marker([21.1108, 105.852], { icon: iconRed }).bindPopup('This is Aurora, CO.').addTo(cities);
var mGolden = L.marker([21.05285, 105.852], { icon: iconRed }).bindPopup('This is Golden, CO.').addTo(cities);

var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
var mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var grayscale = L.tileLayer(mbUrl, { id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr });
var streets = L.tileLayer(mbUrl, { id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr });
var outdoors = L.tileLayer(mbUrl, { id: 'mapbox/outdoors-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr });

var mylayers = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
})
var googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});
// Hybrid: s,h;
// Satellite: s;
// Streets: m;
// Terrain: p;
var map = L.map('map', {
    center: [21.57201, 105.61388],
    maxZoom: 20,
    layers: [streets]
    // layers: [googleStreets, cities]
});

// var control = L.Routing.control({
//     waypoints: [
//         L.latLng(21.0419, 105.821),
//         L.latLng(21.0382, 105.825)
//     ],
//     routeWhileDragging: true,
//     // createMarker: function () {
//     //     return null;
//     // }
// }).addTo(map);

var xxx = L.polyline(dataTemporary).addTo(map);

map.setView([21.037181, 105.833485], 15);

var baseLayers = {
    'Grayscale': grayscale,
    'Streets': streets,
    'Outdoors': outdoors,
    'MyLayers': mylayers,
    'Google Streets': googleStreets
};

var overlays = {
    'Cities': cities
};

// var layerControl = L.control.layers(baseLayers, overlays).addTo(map);
var layerControl = L.control.layers(baseLayers).addTo(map);

var iconRed = L.icon({
    iconUrl: './images/red-garbage.png',
    iconSize: [25, 41],
});
var iconGreen = L.icon({
    iconUrl: './images/green-garbage.png',
    iconSize: [25, 41],
});
var iconYellow = L.icon({
    iconUrl: './images/yellow-garbage.png',
    iconSize: [25, 41],
});
var iconVehicleRed = L.icon({
    iconUrl: './images/red-vehicle.png',
    iconSize: [16, 35],
});
var iconVehicleGreen = L.icon({
    iconUrl: './images/green-vehicle.png',
    iconSize: [16, 35],
});

(function() {
    // save these original methods before they are overwritten
    var proto_initIcon = L.Marker.prototype._initIcon;
    var proto_setPos = L.Marker.prototype._setPos;

    var oldIE = (L.DomUtil.TRANSFORM === 'msTransform');

    L.Marker.addInitHook(function() {
        var iconOptions = this.options.icon && this.options.icon.options;
        var iconAnchor = iconOptions && this.options.icon.options.iconAnchor;
        if (iconAnchor) {
            iconAnchor = (iconAnchor[0] + 'px ' + iconAnchor[1] + 'px');
        }
        this.options.rotationOrigin = this.options.rotationOrigin || iconAnchor || 'center center';
        this.options.rotationAngle = this.options.rotationAngle || 0;

        // Ensure marker keeps rotated during dragging
        this.on('drag', function(e) { e.target._applyRotation(); });
    });

    L.Marker.include({
        _initIcon: function() {
            proto_initIcon.call(this);
        },

        _setPos: function(pos) {
            proto_setPos.call(this, pos);
            this._applyRotation();
        },

        _applyRotation: function() {
            if (this.options.rotationAngle) {
                this._icon.style[L.DomUtil.TRANSFORM + 'Origin'] = this.options.rotationOrigin;

                if (oldIE) {
                    // for IE 9, use the 2D rotation
                    this._icon.style[L.DomUtil.TRANSFORM] = 'rotate(' + this.options.rotationAngle + 'deg)';
                    // this._icon.style[L.DomUtil.TRANSITION] = 'all 2s linear';
                } else {
                    // for modern browsers, prefer the 3D accelerated version
                    this._icon.style[L.DomUtil.TRANSFORM] += ' rotateZ(' + this.options.rotationAngle + 'deg)';
                    // this._icon.style[L.DomUtil.TRANSITION] = 'all 2s linear';
                }
            }
        },

        setRotationAngle: function(angle) {
            this.options.rotationAngle = angle;
            this.update();
            return this;
        },

        setRotationOrigin: function(origin) {
            this.options.rotationOrigin = origin;
            this.update();
            return this;
        }
    });
})();


function _getAngle(startx, starty, endx, endy) {
    var tan = 0
    if (endx == startx) {
        tan = 90;
    } else {
        tan = Math.atan(Math.abs((endy - starty) / (endx - startx))) * 180 / Math.PI;
        console.log(tan);
    }

    if (endx >= startx && endy >= starty) //First quadrant
    {
        return -tan;
    } else if (endx > startx && endy < starty) //Delta Quadrant
    {
        return tan;
    } else if (endx < startx && endy > starty) //Beta Quadrant
    {
        return tan - 180;
    } else {
        return 180 - tan; //third quadrant
    }
}


var statBin = {
    "full": iconRed,
    "empty": iconGreen,
    "mid": iconYellow,
};
var statVehicle = {
    "on": iconVehicleRed,
    "On work": iconVehicleGreen,
};

objLatlngs = [];
$.getJSON('/majestic/Dashboard/php/api/post/R_vehicle.php', {}, (data) => {
    let body = document.querySelector(".table tbody");
    for (let i = 0; i < data.data.length; i++) {
        let oV = {
            lat: data.data[i].lat,
            long: data.data[i].long,
            angle: 0
        }
        objLatlngs.push(oV);
    }
});
// console.log(objLatlngs);

var objBin = [];
var objVehicle = [];
var layerGrBin, layerGrVehicle;
var oB = new Object();
var oV = new Object();
setInterval(function() {
    objBin = [];
    $.getJSON('/majestic/Dashboard/php/api/post/R_bin.php', {}, (data) => {

        for (let i = 0; i < data.data.length; i++) {
            oB = {
                lat: data.data[i].lat,
                long: data.data[i].long,
                markerBin: L.marker([data.data[i].lat, data.data[i].long]).bindPopup(
                "ID: "+data.data[i].id +"<br>" +
                "addresses: "+data.data[i].addresses +"<br>" +
                "createddate: "+data.data[i].createddate +"<br>" +
                "lat: "+data.data[i].lat +"<br>" +
                "long: "+data.data[i].long +"<br>" +
                "statuses: "+data.data[i].statuses +"<br>"
                ).openPopup()
            };
            oB.markerBin.setIcon(statBin[data.data[i].statuses]);
            objBin.push(oB.markerBin);
        }
    });
    objVehicle = [];
    $.getJSON('/majestic/Dashboard/php/api/post/R_vehicle.php', {}, (data) => {
        // console.log(data);
        let body = document.querySelector(".table tbody");
        for (let i = 0; i < data.data.length; i++) {
            oV = {
                lat: data.data[i].lat,
                long: data.data[i].long,
                markerVehicle: L.marker([data.data[i].lat, data.data[i].long]).bindPopup(
                "ID: "+data.data[i].id +"<br>" +
                // "typed: "+data.data[i].typed +"<br>" +
                "license: "+data.data[i].license +"<br>" +
                // "code: "+data.data[i].code +"<br>" +
                "lat: "+data.data[i].lat +"<br>" +
                "long: "+data.data[i].long +"<br>" +
                "addresses: "+data.data[i].addresses +"<br>" +
                "statuses: "+data.data[i].statuses +"<br>"
                ).openPopup()
            }
            oV.markerVehicle.setIcon(statVehicle[data.data[i].statuses]);
            objVehicle.push(oV.markerVehicle);
        }
    });
    setTimeout(function() {
        for (let i = 0; i < objVehicle.length; i++) {
            if (objVehicle[i]._latlng.lat !== objLatlngs[i].lat || objVehicle[i]._latlng.lng !== objLatlngs[i].long) {
                let angle = _getAngle(objLatlngs[i].long, objLatlngs[i].lat, objVehicle[i]._latlng.lng, objVehicle[i]._latlng.lat);
                // objVehicle[i].setRotationAngle(angle);
                // objVehicle[i].setRotationOrigin(16 + 'px ' + 35 + 'px');
                objLatlngs[i].angle = angle;
                objLatlngs[i].lat = objVehicle[i]._latlng.lat;
                objLatlngs[i].long = objVehicle[i]._latlng.lng;
                console.log("Update");
            }
            if (objVehicle[i].options.rotationAngle == 0) {
                objVehicle[i].setRotationAngle(objLatlngs[i].angle);
                objVehicle[i].setRotationOrigin(16 + 'px ' + 35 + 'px');
            }
            console.log(objVehicle[i].options.rotationAngle);
        }
        if (layerGrBin) {
            map.removeLayer(layerGrBin);
        }
        if (layerGrVehicle) {
            map.removeLayer(layerGrVehicle);
        }
        layerGrBin = L.layerGroup(objBin).addTo(map);
        layerGrVehicle = L.layerGroup(objVehicle).addTo(map);

    }, 200);
}, 500);