angular.module('focaLogisticaPedidoRuta').directive('focaLogistica', function() {
    return {
        restrict: 'E',
        link: function(scope, el, attrs) {
            var contenedor = document.createElement('div');
            contenedor.className = 'border border-light rounded';
            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', '$compile', 'focaModalService',
        function($scope, $filter, $compile, focaModalService) {
            $scope.markers = [];
            $scope.verProductos = function(id) {
                var parametrosModal = {
                    titulo: 'Productos',
                    query: '/articulos/remito/' + id,
                    soloMostrar: true,
                    size: 'md',
                    columnas: [
                        {
                            nombre: 'Producto',
                            propiedad: 'descripcion'
                        },
                        {
                            nombre: 'Cantidad',
                            propiedad: 'cantidad'
                        }
                    ]
                };
                focaModalService.modal(parametrosModal).then();
            };
            $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 =
                        'Vendedor: ' + marcador.notaPedido.idVendedor + ' - ' +
                        (
                            marcador.notaPedido.vendedor ?
                            marcador.notaPedido.vendedor.NOM :
                            ''
                        ) + '<br/>';
                    observacion += 'Fecha: ' +
                        $filter('date')(marcador.fecha.slice(0,10), 'dd/MM/yyyy') + ' ' +
                        marcador.fecha.slice(11,19) + '<br/>';
                    observacion += 'Remito Nº: ' + $filter('comprobante')([
                        marcador.notaPedido.remito.sucursal,
                        marcador.notaPedido.remito.numeroRemito
                    ]) + '<br/>';
                    observacion += 'Cliente: ' + 
                        marcador.notaPedido.cliente.NOM;
                    
                    // if($scope.parametros.individual) {
                    observacion = 'Orden: ' + marcador.orden + '<br/>' + observacion;

                    if (marcador.distancia) {
                        observacion += '<br/>Distancia a casa central: ' +
                            marcador.distancia + 'km';
                    }
                    var icon;
                    if (marcador.notaPedido.remito.idUsuarioProceso) {
                        observacion += '<br/>';
                        observacion += '<strong>';
                        observacion += 'Fecha de entrega: ' + marcador.notaPedido.remito
                            .cisternaMovimientos[0].cisternaCarga.fechaReparto.substring(0, 10);
                        observacion += '<br/>';
                        observacion += 'Vehículo: ' + marcador.notaPedido.remito
                            .cisternaMovimientos[0].cisternaCarga.cisterna.vehiculo.codigo;
                        observacion += '<br/>';
                        observacion += 'Transportista: ' + marcador.notaPedido.remito
                            .cisternaMovimientos[0].cisternaCarga.cisterna.vehiculo.transportista
                            .NOM;
                        observacion += '</strong>';
                        //Asignado ROJO
                        icon = new L.Icon({
                            iconUrl: 'img/marker-icon-2x-red.png',
                            shadowUrl: 'img/marker-shadow.png',
                            iconSize: [25, 41],
                            iconAnchor: [12, 41],
                            popupAnchor: [1, -34],
                            shadowSize: [41, 41]
                        });
                    } else {
                        observacion += '<br/>';
                        observacion += '<i class="fa fa-map-marker fa-3x" aria-hidden="true"'+
                        'class="form-control" ondragend="dropEnd()" ondragstart=\'drag(event, '+
                        JSON.stringify(marcador)+')\' draggable="true"></i>(Arrastrar icono)';
                        observacion += '<button title="Ver productos" class="btn btn-secondary' +
                                    ' float-right mt-2"'+
                                    'ng-click="verProductos('+marcador.notaPedido.remito.id+')">' +
                                    '<i class="fa fa-info" aria-hidden="true"></i>' +
                                    '</button>';

                        //Sin asignar VERDE
                        icon = new L.Icon({
                            iconUrl: 'img/marker-icon-2x-green.png',
                            shadowUrl: 'img/marker-shadow.png',
                            iconSize: [25, 41],
                            iconAnchor: [12, 41],
                            popupAnchor: [1, -34],
                            shadowSize: [41, 41]
                            });
                    }

                    //COMPILO HTML PARA QUE FUNCIONE BOTON EN POPUP
                    observacion = '<div>' + observacion + '</div>';
                    var compiledHtml = $compile(angular.element(observacion))($scope);

                    $scope.markers.push(
                        L.marker(
                            [marcador.latitud, marcador.longitud], {icon: icon})
                        .addTo($scope.map)
                        .bindPopup(compiledHtml[0])
                        .bindTooltip('Haga click para seleccionar')
                    );
                    //abre marcador del primer punto
                    //$scope.markers[0].openPopup();
                });
            });
        }],
        scope: {
            latitud: '=',
            longitud: '=',
            zoom: '=',
            marcadores: '=',
            parametros: '='
        }
    };
});