{% extends '@CadolesCore/base.html.twig' %}

{% block beforepage %}
<div id="mapid" style="width:100%;height:500px"></div>
{% endblock %}

{% block pagewrapper %}
    <div class="row" style="margin-top:20px">
        

        <div class="col-md-6 col-md-offset-1" style="padding:20px;text-align:center;">
            <div class="col-md-12">
                <h1 style="margin-top:0px; margin-bottom:25px""><i class="fa fa-cubes fa-fw"></i>Applications = {{ totalapplications }} </h1>
            </div>

            <h1>Applications Installées</h1>        

            <div class="col-md-8" >
                <div id='byapplication-chart'></div>
            </div>
            <div id="byapplication-legend" class="col-md-4"></div>
        </div>  

        <div class="col-md-4" style="padding:20px;text-align:center;">
            <div class="col-md-12">
                <h1 style="margin-top:0px"><i class="fa fa-server fa-fw"></i>Serveurs = {{ totalservers }} </h1>
            </div>

            <div class="row">
                <div class="col-md-6" >
                    <h2>Serveurs par Académies</h2>
                    <div id='byacademie-chart' style="height:250px"></div>
                    <div id="byacademie-legend"></div>
                </div>

                <div class="col-md-6" >
                    <h2>Serveurs par Secteurs</h2>
                    <div id='bysecteur-chart' style="height:250px"></div>
                    <div id="bysecteur-legend"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6" >
                    <h2>Serveurs par Natures</h2>
                    <div id='bynature-chart' style="height:250px"></div>
                    <div id="bynature-legend"></div>
                </div>

                <div class="col-md-6" >
                    <h2>Serveurs par Module</h2>
                    <div id='bymodule-chart' style="height:250px"></div>
                    <div id="bymodule-legend"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6" >
                    <h2>Serveurs par Version</h2>
                    <div id='byversion-chart' style="height:250px"></div>
                    <div id="byversion-legend"></div>
                </div>            
            </div>
        </div>
    </div>

{% endblock %}

{% block localjavascript %}

    // On initialise la latitude et la longitude de Paris (centre de la carte)
    var lat = 48.852969;
    var lon = 2.349903;
    var macarte = null;
    // Fonction d'initialisation de la carte
    function initMap() {
        // Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
        macarte = L.map('mapid').setView([lat, lon], 3);

        // Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
        L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
            // Il est toujours bien de laisser le lien vers la source des données
            attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
            minZoom: 1,
            maxZoom: 20
        }).addTo(macarte);
    }
            
    $(document).ready(function() {
        initMap(); 
        marker=[];

        {% for etab in etabs %}
            {% if not etab.servers is empty and not etab.latitude is null%}
                var marker = L.marker([{{ etab.latitude }}, {{ etab.longitude }}]).addTo(macarte);
                html ="<h3>Etablissement</h3>";
                {% if(etab.id!=-100) %}
                    html+="<b>UAI</b> = {{etab.numerouai}}<br>";
                    html+="<b>Nom</b> = {{etab.denominationprincipale}}<br>";
                    html+="<b>Adresse</b> = {{etab.adresseuai}} {{etab.codecommune}} {{etab.libellecommune}}<br>";
                    html+="<b>Académie</b> = {{etab.libelleacademie}}<br>";
                    html+="<b>Secteur</b> = {{etab.secteurpublicprivelibe}}<br>";
                    html+="<b>Nature</b> = {{etab.natureuailibe}}<br>";
                {% else %}
                    html+="Non Localisé<br>";
                {% endif %}

                html+="<hr>";
                {% for server in etab.servers %}
                    html+="<a style='cursor:pointer' onClick='showModal({{server.id}})'>Serveur id = {{ server.id}}</a><br>";
                {% endfor %}
                marker.bindPopup(html);
            {% endif %}
        {% endfor %}

        //== byAcademie
        var byacademie =  Morris.Donut({
            element: 'byacademie-chart',
            data: [ 
                {% for total in totalbyacademies %}
                    {'label':'{{ total.label }}','value':{{ total.total }}},
                {% endfor %}
            ],
            resize: true
        });

        byacademie.options.data.forEach(function(label, i) {
            var legendItem = $('<span style="margin:auto; display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span>&nbsp;</span>');
            legendItem.find('span')
                .css('backgroundColor', byacademie.options.colors[i])
                .css('width', '20px')
                .css('display', 'inline-block')
                .css('margin', '5px');
                $('#byacademie-legend').append(legendItem)
        });
                
        //== byNature
        var bynature =  Morris.Donut({
            element: 'bynature-chart',
            data: [ 
                {% for total in totalbynatures %}
                    {'label':'{{ total.label }}','value':{{ total.total }}},
                {% endfor %}
            ],
            resize: true
        });

        bynature.options.data.forEach(function(label, i) {
            var legendItem = $('<span style="margin:auto; display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span>&nbsp;</span>');
            legendItem.find('span')
                .css('backgroundColor', bynature.options.colors[i])
                .css('width', '20px')
                .css('display', 'inline-block')
                .css('margin', '5px');
                $('#bynature-legend').append(legendItem)
        });

        //== bySecteur
        var bysecteur =  Morris.Donut({
            element: 'bysecteur-chart',
            data: [ 
                {% for total in totalbysecteurs %}
                    {'label':'{{ total.label }}','value':{{ total.total }}},
                {% endfor %}
            ],
            resize: true
        });

        bysecteur.options.data.forEach(function(label, i) {
            var legendItem = $('<span style="margin:auto; display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span>&nbsp;</span>');
            legendItem.find('span')
                .css('backgroundColor', bysecteur.options.colors[i])
                .css('width', '20px')
                .css('display', 'inline-block')
                .css('margin', '5px');
                $('#bysecteur-legend').append(legendItem)
        });

        //== byModule
        var bymodule =  Morris.Donut({
            element: 'bymodule-chart',
            data: [ 
                {% for total in totalbymodules %}
                    {'label':'{{ total.label }}','value':{{ total.total }}},
                {% endfor %}
            ],
            resize: true
        });

        bymodule.options.data.forEach(function(label, i) {
            var legendItem = $('<span style="margin:auto; display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span>&nbsp;</span>');
            legendItem.find('span')
                .css('backgroundColor', bymodule.options.colors[i])
                .css('width', '20px')
                .css('display', 'inline-block')
                .css('margin', '5px');
                $('#bymodule-legend').append(legendItem)
        });

        //== byVersion
        var byversion =  Morris.Donut({
            element: 'byversion-chart',
            data: [ 
                {% for total in totalbyversions %}
                    {'label':'{{ total.label }}','value':{{ total.total }}},
                {% endfor %}
            ],
            resize: true
        });

        byversion.options.data.forEach(function(label, i) {
            var legendItem = $('<span style="margin:auto; display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span>&nbsp;</span>');
            legendItem.find('span')
                .css('backgroundColor', byversion.options.colors[i])
                .css('width', '20px')
                .css('display', 'inline-block')
                .css('margin', '5px');
            $('#byversion-legend').append(legendItem)        
        });
  
        //== byApplication
        var byapplication =  Morris.Donut({
            element: 'byapplication-chart',
            data: [ 
                {% for total in totalbyapplications %}
                    {
                        'label':'{{ total.label }}',
                        'value':{{ total.total }},
                    },
                {% endfor %}
            ],
            resize: true
        });

        byapplication.options.data.forEach(function(label, i) {
            var legendItem = $('<span style="display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span>&nbsp;</span>');
            legendItem.find('span')
                .css('backgroundColor', byapplication.options.colors[i])
                .css('width', '20px')
                .css('display', 'inline-block')
                .css('margin', '0px 5px 5px 0px');
            $('#byapplication-legend').append(legendItem)        
            
        });
    });

    function showModal(id) {
        var url="{{ path('cadoles_core_server',{id:'xx'})}}";
        
        url=url.replace('xx',id);

        console.log("pouet");
        $("#mymodal .modal-title").html("Informations Serveur");
        $("#mymodal #framemodal").attr("src",url);

        $("#mymodal").modal('show');
    }
{% endblock %}