angular.module('focaAdminSeguimiento').directive('osm', function() {
    return {
        restrict: 'E',
        link: function(scope, el, attrs) {
            var contenedor = document.createElement('div');
            el.append(contenedor);
            scope.map = L.map(contenedor).setView([attrs.latitud, attrs.longitud], attrs.zoom);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scope.map);
        },
        controller: ['$scope', '$filter', function($scope, $filter) {
                $scope.markers = [];
            $scope.$watch('marcadores', function() {
                for(var i in $scope.markers) {
                    $scope.map.removeLayer($scope.markers[i]);
                }
                
                $scope.markers = [];
                angular.forEach($scope.marcadores, function(marcador) {
                    $scope.markers.push(
                        L.marker([marcador.latitud, marcador.longitud]).addTo($scope.map)
                        .bindPopup(
                            'Actividad: ' + marcador.actividad + '<br/>' +
                            'Fecha: ' + $filter('date')(marcador.fecha.slice(0,10), 'dd/MM/yyyy') +
                            ' ' + marcador.fecha.slice(11,19) + '<br/>' +
                            marcador.observaciones
                        ).openPopup()
                    );
                });
            });
        }],
        scope: {
            latitud: '=',
            longitud: '=',
            zoom: '=',
            marcadores: '='
        }
    };
});