{% extends "admin/base_site.html" %}
{% load i18n admin_static %}
{% load static from staticfiles %}

{% block title %}SIGI{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" >

    <script type="text/javascript" src="{% static 'admin/js/core.js' %}" ></script>
    <script type="text/javascript" src="{% static 'admin/js/jquery.min.js' %}" ></script>
    <script type="text/javascript" src="{% static 'admin/js/jquery.init.js' %}" ></script>
    <script type="text/javascript" src="{% static 'js/Chart.min.js' %}" ></script>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script>
    <script type="text/javascript">
        (function($) {
            $(document).ready(function($) {
                var latlng = new google.maps.LatLng(-14.2350040, -51.925280);
                var myOptions = {
                    zoom: 3,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                        myOptions);

                $.get("/diagnosticos/mundiagjson/", function(municipios) {
                    for (var i in municipios) {
                        var municipio = municipios[i];
                        var markData = {
                            map: map,
                            position: new google.maps.LatLng(municipio.lat, municipio.lng),
                            title: municipio.nome,
                            icon: "{% static 'img/mapmarker.png' %}"
                        }
                        var mark = new google.maps.Marker(markData);
                        var infoWin = new google.maps.InfoWindow({content:
                                '<strong>' + municipio.nome + '</strong><br/>' +
                                '<strong>Início da visita:</strong><br/>' + municipio.inicio + '<br/>' +
                                '<strong>Término da visita:</strong><br/>' + municipio.fim + '<br/>' +
                                '<strong>Equipe:</trong><br/>' + municipio.equipe });
                        linkMarkMessage(mark, infoWin, map);
                    }
                });

                function linkMarkMessage(mark, infoWin, map) {
                    google.maps.event.addListener(mark, 'click', function() {
                        infoWin.open(map, mark);});
                }
            })
        })(django.jQuery);
    </script>
    <script>
        {% for num, dados in dados_graficos_convenio_projeto %}
            var pieData{{ num }} = [
                {% for label, value, color, highlight in dados %}
                    {
                        label: "{{ label }}",
                        value: {{ value }},
                        color:"{{ color }}",
                        highlight: "{{ highlight }}"
                    },
                {% endfor %}
            ]
            window.onload = function(){
                var canvas1 = document.getElementById("canvas-holder-1");
                var ctx = document.getElementById("chart-area-1").getContext("2d");
                window.myPie = new Chart(ctx).Pie(pieData1).generateLegend();

                var legendHolder = document.createElement('div');
                legendHolder.innerHTML = myPie;
                canvas1.appendChild(legendHolder.firstChild);

                var canvas2 = document.getElementById("canvas-holder-2");
                var ctx2 = document.getElementById("chart-area-2").getContext("2d");
                window.myPie2 = new Chart(ctx2).Pie(pieData2);

                var legendHolder2 = document.createElement('div');
                legendHolder2.innerHTML = myPie2.generateLegend();
                canvas2.appendChild(legendHolder2.firstChild);
            };
        {% endfor %}
    </script>
    {# Highcharts scripts #}
    {#    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>#}
    {#    <script src="http://code.highcharts.com/highcharts.js"></script>#}
    {##}
    {#    <script type="text/javascript">#}
    {#        $(function () {#}
    {#            var chart;#}
    {##}
    {#            $(document).ready(function () {#}
    {##}
    {#                // Build the chart#}
    {#                $('#processos_conv').highcharts({#}
    {#                    chart: {#}
    {#                        plotBackgroundColor: null,#}
    {#                        plotBorderWidth: null,#}
    {#                        plotShadow: false#}
    {#                    },#}
    {#                    title: {#}
    {#                        text: 'Processos de convênios por projeto <br/> {{ g_conv_proj.0 }}'#}
    {#                    },#}
    {#                    tooltip: {#}
    {#                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'#}
    {#                    },#}
    {#                    plotOptions: {#}
    {#                        pie: {#}
    {#                            allowPointSelect: true,#}
    {#                            cursor: 'pointer',#}
    {#                            dataLabels: {#}
    {#                                enabled: false#}
    {#                            },#}
    {#                            showInLegend: true#}
    {#                        }#}
    {#                    },#}
    {#                    series: [{#}
    {#                        type: 'pie',#}
    {#                        name: 'Browser share',#}
    {#                        data: [#}
    {#                            {% for k, v in g_conv_proj %}#}
    {#                                {% if not  forloop.first %}#}
    {#                                    ['{{ k }}', {{ v }}],#}
    {#                                {% endif %}#}
    {#                            {% endfor %}#}
    {#                        ]#}
    {#                    }]#}
    {#                });#}
    {#                $('#processos_conv_ass').highcharts({#}
    {#                    chart: {#}
    {#                        plotBackgroundColor: null,#}
    {#                        plotBorderWidth: null,#}
    {#                        plotShadow: false#}
    {#                    },#}
    {#                    title: {#}
    {#                        text: 'Convênios assinados por projeto <br/> {{ g_convassinado_proj.0 }}'#}
    {#                    },#}
    {#                    tooltip: {#}
    {#                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'#}
    {#                    },#}
    {#                    plotOptions: {#}
    {#                        pie: {#}
    {#                            allowPointSelect: true,#}
    {#                            cursor: 'pointer',#}
    {#                            dataLabels: {#}
    {#                                enabled: false#}
    {#                            },#}
    {#                            showInLegend: true#}
    {#                        }#}
    {#                    },#}
    {#                    series: [{#}
    {#                        type: 'pie',#}
    {#                        name: 'Browser share',#}
    {#                        data: [#}
    {#                            {% for k, v in g_convassinado_proj %}#}
    {#                                {% if not  forloop.first %}#}
    {#                                    ['{{ k }}', {{ v }}],#}
    {#                                {% endif %}#}
    {#                            {% endfor %}#}
    {#                        ]#}
    {#                    }]#}
    {#                });#}
    {#            });#}
    {##}
    {#        });#}
    {#    </script>#}
    {# end highcharts scripts #}

    <style type="text/css">

      .numeros td,
      .numeros th {
        text-align: right;
      }
      .numeros tr :first-child {
        text-align: left;
      }
      .servicos tr :first-child {
        width: 40%;
      }
      #dashboard-mapa a img {
        width: 80%;
      }
      .panel-footer dl {
        margin-bottom: 5px;
      }

    </style>

{% endblock %}

{% block content_title %}<h1>{% trans 'Dashboard' %}</h1>{% endblock %}

{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "admin/css/dashboard.css" %}" />{% endblock %}

{% block coltype %}colMS{% endblock %}

{% block bodyclass %}dashboard{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
    <div id="content-main">
        {% include "snippets/modules/charts-convenios.html" %}
    </div>
{% endblock %}