{% extends "base/templates/base.html" %}
{% load staticfiles %}


{% block toolbar %}
	
{% endblock %}

{% block content_all %}
	<div class="row">
		<div class="col-md-6">

			<!-- Basic pie chart -->
			<div class="panel panel-flat">
				<div class="panel-heading">
					<h5 class="panel-title"><strong>Estado de Importaciones</strong></h5>
				</div>
				<div class="panel-body">
					<div class="chart-container has-scroll">
						<div class="chart has-fixed-height has-minimum-width" id="estado_importaciones"></div>
					</div>
				</div>
			</div>
			<!-- /bacis pie chart -->


			<div class="panel panel-flat">
				<div class="panel-heading">
					<h5 class="panel-title"><strong>Canal de Aforo(Importaciones)</strong></h5>
				</div>
				<div class="panel-body">
					<div class="chart-container has-scroll">
						<div class="chart has-fixed-height has-minimum-width" id="canales_importaciones"></div>
					</div>
				</div>
			</div>


		</div>

		<div class="col-md-6">

			<div class="panel panel-flat">
				<div class="panel-heading">
					<h5 class="panel-title"><strong>Estado de Exportaciones</strong></h5>
				</div>
				<div class="panel-body">
					<div class="chart-container has-scroll">
						<div class="chart has-fixed-height has-minimum-width" id="estado_exportaciones"></div>
					</div>
				</div>
			</div>

			<div class="panel panel-flat">
				<div class="panel-heading">
					<h5 class="panel-title"><strong>Canal de Aforo(Exportaciones)</strong></h5>
				</div>

				<div class="panel-body">
					<div class="chart-container has-scroll">
						<div class="chart has-fixed-height has-minimum-width" id="canales_exportaciones"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	
	<div class="row">
		<div class="col-md-6">
			<div class="panel panel-flat">
				<div class="panel-heading">
					<h5 class="panel-title"><strong>Importaciones</strong></h5>
				</div>
				<div class="panel-body">
					<div class="chart-container">
						<div class="chart has-fixed-height" id="global_importaciones"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="panel panel-flat">
				<div class="panel-heading">
					<h5 class="panel-title"><strong>Exportaciones</strong></h5>
				</div>
				<div class="panel-body">
					<div class="chart-container">
						<div class="chart has-fixed-height" id="global_exportaciones"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-flat">
				<div class="panel-heading">
					<h5 class="panel-title">Mis veh&iacute;culos</h5>
				</div>
				<div class="panel-body">
					<div class="map-container map-marker-animation"></div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block footer_js %}
	


	<script type="text/javascript">
		
		$(function(){
			estados_imp = JSON.parse('{{ estados_imp|safe }}');
			estados_exp = JSON.parse('{{ estados_exp|safe }}');
			canales_imp = JSON.parse('{{ canales_imp|safe }}');
			canales_exp = JSON.parse('{{ canales_exp|safe }}');
			
			require.config({
			        paths: {
			            echarts: 'static/all/assets/js/plugins/visualization/echarts/'
			        }
			    });
			
			
			    // Configuration
			    require(
			        [
			            'echarts',
			            'echarts/theme/limitless',
			            'echarts/chart/pie',
			            'echarts/chart/funnel',
			            'echarts/chart/line'
			        ],

		        // Charts setup
		        function (ec, limitless) {
		
		            // Initialize charts
		            var basic_pie = ec.init(document.getElementById('estado_importaciones'), limitless);
		
		            // Charts setup
		            labels_estado_importaciones = []; 
			        for (i = 0; i < estados_imp.length; i++){
			            labels_estado_importaciones.push(estados_imp[i].name);
			        }
		            basic_pie_options = {
		
		                // Add title
		                title: {
		                    //text: 'Estados',
		                    //subtext: 'etc',
		                    x: 'center'
		                },
		
		                // Add tooltip
		                tooltip: {
		                    trigger: 'item',
		                    formatter: "{a} <br/>{b}: {c} ({d}%)"
		                },
		
		                // Add legend
		                legend: {
		                    orient: 'vertical',
		                    x: 'left',
		                    data: labels_estado_importaciones
		                },
		
		                // Display toolbox
		                toolbox: {
		                    show: true,
		                    orient: 'vertical',
		                    feature: {
		                        mark: {
		                            show: false,
		                            title: {
		                                mark: 'Markline switch',
		                                markUndo: 'Undo markline',
		                                markClear: 'Clear markline'
		                            }
		                        },
		                        dataView: {
		                            show: true,
		                            readOnly: false,
		                            title: 'Ver info',
		                            lang: ['Ver data', 'Cerrar', 'Actualizar']
		                        },
		                        magicType: {
		                            show: true,
		                            title: {
		                                pie: 'Tipo pie',
		                                funnel: 'Tipo embudo',
		                            },
		                            type: ['pie', 'funnel'],
		                            option: {
		                                funnel: {
		                                    x: '25%',
		                                    y: '20%',
		                                    width: '80%',
		                                    height: '70%',
		                                    funnelAlign: 'center',
		                                    max: 100
		                                }
		                            }
		                        },
		                        restore: {
		                            show: true,
		                            title: 'Restaurar'
		                        },
		                        saveAsImage: {
		                            show: true,
		                            title: 'Guardar como imagen',
		                            lang: ['Guardar']
		                        }
		                    }
		                },
		
		                // Enable drag recalculate
		                calculable: true,
		
		                // Add series
		                series: [{
		                    name: 'Browsers',
		                    type: 'pie',
		                    radius: '70%',
		                    center: ['50%', '57.5%'],
		                    data: estados_imp
		                }]
		            };

		            // Apply options
		            basic_pie.setOption(basic_pie_options);
		           	//------------------------------------------------- fin estado importaciones
		           	
		           	
		           	
		           	var pie_estado_exportaciones = ec.init(document.getElementById('estado_exportaciones'), limitless);
		
		            // Charts setup
		            // ------------------------------         
		            
		            labels_estado_exportaciones = []; 
			        for (i = 0; i < estados_exp.length; i++){
			            labels_estado_exportaciones.push(estados_exp[i].name);
			        }
		            pie_estado_exportaciones_options = {
		
		                // Add title
		                title: {
		                    //text: 'Estados',
		                    //subtext: 'etc',
		                    x: 'center'
		                },
		
		                // Add tooltip
		                tooltip: {
		                    trigger: 'item',
		                    formatter: "{a} <br/>{b}: {c} ({d}%)"
		                },
		
		                // Add legend
		                legend: {
		                    orient: 'vertical',
		                    x: 'left',
		                    data: labels_estado_exportaciones
		                },
		
		                // Display toolbox
		                toolbox: {
		                    show: true,
		                    orient: 'vertical',
		                    feature: {
		                        mark: {
		                            show: false,
		                            title: {
		                                mark: 'Markline switch',
		                                markUndo: 'Undo markline',
		                                markClear: 'Clear markline'
		                            }
		                        },
		                        dataView: {
		                            show: true,
		                            readOnly: false,
		                            title: 'Ver info',
		                            lang: ['Ver data', 'Cerrar', 'Actualizar']
		                        },
		                        magicType: {
		                            show: true,
		                            title: {
		                                pie: 'Tipo pie',
		                                funnel: 'Tipo embudo',
		                            },
		                            type: ['pie', 'funnel'],
		                            option: {
		                                funnel: {
		                                    x: '25%',
		                                    y: '20%',
		                                    width: '80%',
		                                    height: '70%',
		                                    funnelAlign: 'center',
		                                    max: 100
		                                }
		                            }
		                        },
		                        restore: {
		                            show: true,
		                            title: 'Restaurar'
		                        },
		                        saveAsImage: {
		                            show: true,
		                            title: 'Guardar como imagen',
		                            lang: ['Guardar']
		                        }
		                    }
		                },
		
		                // Enable drag recalculate
		                calculable: true,
		
		                // Add series
		                series: [{
		                    name: 'Browsers',
		                    type: 'pie',
		                    radius: '70%',
		                    center: ['50%', '57.5%'],
		                    data: estados_exp
		                }]
		            };

		            // Apply options
		            pie_estado_exportaciones.setOption(pie_estado_exportaciones_options);
		           	//------------------------- FIN DE PIE ESTADO EXPORTACIONES
		           	
		           	
		           	
		           	
		           	
		           	
		           	
		           	var pie_canales_importaciones = ec.init(document.getElementById('canales_importaciones'), limitless);
		
		            // Charts setup
		            // ------------------------------         
		            
		            labels_canales_importaciones = []; 
			        for (i = 0; i < canales_imp.length; i++){
			            labels_canales_importaciones.push(canales_imp[i].name);
			        }
		            pie_canales_importaciones_options = {
		
		                // Add title
		                title: {
		                    //text: 'Estados',
		                    //subtext: 'etc',
		                    x: 'center'
		                },
		
		                // Add tooltip
		                tooltip: {
		                    trigger: 'item',
		                    formatter: "{a} <br/>{b}: {c} ({d}%)"
		                },
		
		                // Add legend
		                legend: {
		                    orient: 'vertical',
		                    x: 'left',
		                    data: labels_canales_importaciones
		                },
		
		                // Display toolbox
		                toolbox: {
		                    show: true,
		                    orient: 'vertical',
		                    feature: {
		                        mark: {
		                            show: false,
		                            title: {
		                                mark: 'Markline switch',
		                                markUndo: 'Undo markline',
		                                markClear: 'Clear markline'
		                            }
		                        },
		                        dataView: {
		                            show: true,
		                            readOnly: false,
		                            title: 'Ver info',
		                            lang: ['Ver data', 'Cerrar', 'Actualizar']
		                        },
		                        magicType: {
		                            show: true,
		                            title: {
		                                pie: 'Tipo pie',
		                                funnel: 'Tipo embudo',
		                            },
		                            type: ['pie', 'funnel'],
		                            option: {
		                                funnel: {
		                                    x: '25%',
		                                    y: '20%',
		                                    width: '80%',
		                                    height: '70%',
		                                    funnelAlign: 'center',
		                                    max: 100
		                                }
		                            }
		                        },
		                        restore: {
		                            show: true,
		                            title: 'Restaurar'
		                        },
		                        saveAsImage: {
		                            show: true,
		                            title: 'Guardar como imagen',
		                            lang: ['Guardar']
		                        }
		                    }
		                },
		
		                // Enable drag recalculate
		                calculable: true,
		
		                // Add series
		                series: [{
		                    name: 'Browsers',
		                    type: 'pie',
		                    radius: '70%',
		                    center: ['50%', '57.5%'],
		                    data: canales_imp
		                }]
		            };

		            // Apply options
		            pie_canales_importaciones.setOption(pie_canales_importaciones_options);
		           	//------------------------- FIN DE PIE CANALES IMPORTACIONES
		            
		            
					
					
		           	var pie_canales_exportaciones = ec.init(document.getElementById('canales_exportaciones'), limitless);
		
		            // Charts setup
		            // ------------------------------         
		            
		            labels_canales_exportaciones = []; 
			        for (i = 0; i < canales_imp.length; i++){
			            labels_canales_exportaciones.push(canales_imp[i].name);
			        }
		            pie_canales_exportaciones_options = {
		
		                // Add title
		                title: {
		                    //text: 'Estados',
		                    //subtext: 'etc',
		                    x: 'center'
		                },
		
		                // Add tooltip
		                tooltip: {
		                    trigger: 'item',
		                    formatter: "{a} <br/>{b}: {c} ({d}%)"
		                },
		
		                // Add legend
		                legend: {
		                    orient: 'vertical',
		                    x: 'left',
		                    data: labels_canales_exportaciones
		                },
		
		                // Display toolbox
		                toolbox: {
		                    show: true,
		                    orient: 'vertical',
		                    feature: {
		                        mark: {
		                            show: false,
		                            title: {
		                                mark: 'Markline switch',
		                                markUndo: 'Undo markline',
		                                markClear: 'Clear markline'
		                            }
		                        },
		                        dataView: {
		                            show: true,
		                            readOnly: false,
		                            title: 'Ver info',
		                            lang: ['Ver data', 'Cerrar', 'Actualizar']
		                        },
		                        magicType: {
		                            show: true,
		                            title: {
		                                pie: 'Tipo pie',
		                                funnel: 'Tipo embudo',
		                            },
		                            type: ['pie', 'funnel'],
		                            option: {
		                                funnel: {
		                                    x: '25%',
		                                    y: '20%',
		                                    width: '80%',
		                                    height: '70%',
		                                    funnelAlign: 'center',
		                                    max: 100
		                                }
		                            }
		                        },
		                        restore: {
		                            show: true,
		                            title: 'Restaurar'
		                        },
		                        saveAsImage: {
		                            show: true,
		                            title: 'Guardar como imagen',
		                            lang: ['Guardar']
		                        }
		                    }
		                },
		
		                // Enable drag recalculate
		                calculable: true,
		
		                // Add series
		                series: [{
		                    name: 'Browsers',
		                    type: 'pie',
		                    radius: '70%',
		                    center: ['50%', '57.5%'],
		                    data: canales_exp
		                }]
		            };

		            // Apply options
		            pie_canales_exportaciones.setOption(pie_canales_exportaciones_options);
		           	//------------------------- FIN DE PIE CANALES EXPORTACIONES
		            
		            
					
					var global_importaciones = ec.init(document.getElementById('global_importaciones'), limitless);
					// Stacked lines options
					global_importaciones_options = {
					
					    // Setup grid
					    grid: {
					        x: 40,
					        x2: 20,
					        y: 35,
					        y2: 25
					    },
					
					    // Add tooltip
					    tooltip: {
					        trigger: 'axis'
					    },
					
					    // Add legend
					    legend: {
					        data: ['2015', '2016']
					    },
					
					    // Enable drag recalculate
					    calculable: true,
					
					    // Hirozontal axis
					    xAxis: [{
					        type: 'category',
					        boundaryGap: false,
					        data: [
					            'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
					        ]
					    }],
					
					    // Vertical axis
					    yAxis: [{
					        type: 'value'
					    }],
					
					    // Add series
					    series: [
					        {
					            name: '2015',
					            type: 'line',
					            stack: 'Total',
					            data: [120, 132, 101, 134, 90, 230, 210,90, 230, 210, 210, 210]
					        },
					        {
					            name: '2016',
					            type: 'line',
					            stack: 'Total',
					            data: [220, 182, 191, 234, 290, 330, 310,  201, 154, 190, 330, 225]
					        },
					    ]
					};
					
					// Apply options
		            global_importaciones.setOption(global_importaciones_options);
					
					
					//-------------------------------
					var global_exportaciones = ec.init(document.getElementById('global_exportaciones'), limitless);
					// Stacked lines options
					global_exportaciones_options = {
					
					    // Setup grid
					    grid: {
					        x: 40,
					        x2: 20,
					        y: 35,
					        y2: 25
					    },
					
					    // Add tooltip
					    tooltip: {
					        trigger: 'axis'
					    },
					
					    // Add legend
					    legend: {
					        data: ['2015', '2016']
					    },
					
					    // Enable drag recalculate
					    calculable: true,
					
					    // Hirozontal axis
					    xAxis: [{
					        type: 'category',
					        boundaryGap: false,
					        data: [
					            'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
					        ]
					    }],
					
					    // Vertical axis
					    yAxis: [{
					        type: 'value'
					    }],
					
					    // Add series
					    series: [
					        {
					            name: '2015',
					            type: 'line',
					            stack: 'Total',
					            data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134,55]
					        },
					        {
					            name: '2016',
					            type: 'line',
					            stack: 'Total',
					            data: [150, 232, 201, 154,120, 132, 101, 134,11, 190, 330, 410]
					        },
					    ]
					};
					
					// Apply options
		            global_exportaciones.setOption(global_exportaciones_options);
		            
		            // Resize charts
		            window.onresize = function () {
		                setTimeout(function (){
		                    basic_pie.resize();//importaciones
		                    pie_estado_exportaciones.resize();
		                    pie_canales_importaciones.resize();
		                    pie_canales_exportaciones.resize();
		                    global_importaciones.resize();
		                    global_exportaciones.resize();
		                }, 200);
		            };
		        }
		    );
		    
		    
		    
		    
		    
		    
		    
		    
			
		
			// Initialize map on window load
			google.maps.event.addDomListener(window, 'load', inicializar_mapa_vehiculos);
			
			
			
					
			 
				
		});
		
		////////////////// MIS VEHICULOS //////////////////////////////////
		var infowindow = null;
		function inicializar_mapa_vehiculos(){
		    var ubicaciones_vehiculos = '{{ registros_vehiculos|safe }}';		    
		    var ubicaciones_vehiculos_json = JSON.parse(ubicaciones_vehiculos);
		    
		    // Add Ecuador coordinates
		    var ecuador = new google.maps.LatLng(-2.1486126,-79.8509881);
		
	
			// Options
			var mapOptions = {
				zoom: 12,
				center: ecuador
			};
	
			// Apply options
			var map = new google.maps.Map($('.map-marker-animation')[0], mapOptions);
	
			setMarkers(map, ubicaciones_vehiculos_json);
			infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });
		};
		
		function setMarkers(map, ubicaciones_vehiculos_json) {
				console.log("ssss");
		        for (var i = 0; i < ubicaciones_vehiculos_json.length; i++) {
		            //var sites = markers[i];
		            latitud = ubicaciones_vehiculos_json[i].latitud;
		    		longitud = ubicaciones_vehiculos_json[i].longitud;
		    		vehiculo = ubicaciones_vehiculos_json[i].vehiculo;
		            var ubicacion = new google.maps.LatLng(latitud, longitud);
		            var marker = new google.maps.Marker({
		                position: ubicacion,
		                map: map,
		                scaleControl: true,
		                title: 'Mapa',
		                //zIndex: '33',
		                html: '<b>Veh&iacute;culo</b>: ' + vehiculo
		            });
		
		            var contentString = "Some content" + i;
		
		            google.maps.event.addListener(marker, "click", function () {
		                //alert(this.html);
		                infowindow.setContent(this.html);
		                infowindow.open(map, this);
		            });
		        }
		    }	
	</script>

	<script type="text/javascript" src="{% static 'all/assets/js/plugins/visualization/echarts/echarts.js' %}"></script>
	<script type="text/javascript" src="{% static 'all/assets/js/plugins/visualization/echarts/chart/funnel.js' %}"></script>
	
	<!-- mapa -->
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBS53fWEJGaH9ZaAzzZRjDXyyQMbgQWOUw"></script><!-- api key deberia estar en el settings -->

{% endblock %}