angular.module('focaLogisticaPedidoRuta').directive('foca', 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', function($scope) {
            $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) {                    
                    var observacion = '<i class="fa fa-map-marker fa-5x" aria-hidden="true"'+
                        'class="form-control" ondragend="dropEnd()" ondragstart="drag(event, '+
                        JSON.stringify(marcador)+')" draggable="true"></i>';
                    $scope.markers.push(
                        L.marker([marcador.latitud, marcador.longitud]).addTo($scope.map)
                        .bindPopup(observacion)
                    );

                    $scope.markers[0].openPopup();
                });
            });
        }],
        scope: {
            latitud: '=',
            longitud: '=',
            zoom: '=',
            marcadores: '=',
            parametros: '='
        }
    };
});