{% extends 'base_backend.html.twig' %}
{% block nombreMessage %}{{ nbrMsg }}{% endblock %}

{% block body %}

<div class="row">
    <div class="col-lg-12">
        <div class="wrapper wrapper-content" style="padding: 20px 10px 0px;">
            <div class="ibox-content m-b-sm border-bottom">
                <div class="p-xs">
                    <div class="pull-left m-r-md">
                        <i class="fa fa-globe text-navy mid-icon" style="color:#024071"></i>
                    </div>
                    <h2>Bienvenue à votre compte d'administration</h2>
                    <span>Espace d'administration SOGTM  </span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="wrapper wrapper-content">
    <div class="row">
            <div class="col-lg-3">
                <div class="widget style1 navy-bg">
                    <div class="row">

                        <div class="col-xs-4">
                            <i class="fa fa-clock-o fa-5x"></i>
                        </div>
                        <div class="col-xs-8 text-right">
                            <span>Durée moyenne des sessions </span>
                            <h2 class="font-bold">{{ user.Nom }}<span style="font-size: 13px;">  {{ user.Nom|default('22') }}min</span> </h2>
                        </div>

                    </div>
                </div>
                <div class="widget style1 red-bg">
                    <div class="row">
                            <div class="col-xs-4">
                                <i class="fa fa-globe fa-5x"></i>
                            </div>
                            <div class="col-xs-8 text-right">
                                <span> Total Visiteurs </span>
                                <h2 class="font-bold">{{ user.Nom }}</h2>
                            </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="widget style1 lazur-bg">
                    <div class="row">
                        <div class="col-xs-4">
                            <i class="fa fa-eye fa-5x"></i>
                        </div>
                        <div class="col-xs-8 text-right">
                            <span> Total vues (pages) </span>
                            <h2 class="font-bold">{{ user.Nom }}</h2>
                        </div>

                    </div>
                </div>
                <div class="widget style1 yellow-bg">
                    <div class="row">
                        <a href="{{ path('messages') }}" style="color: white">
                            <div class="col-xs-4">
                                <i class="fa fa-envelope-o fa-5x"></i>
                            </div>
                            <div class="col-xs-8 text-right">
                                <span> Total messages </span>
                                <h2 class="font-bold">{{ user.Nom }}</h2>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        <div class="col-lg-6">

            <div id="donutchart" style="width: 600px; height: 280px;"></div>
            <br>
        </div>
        </div>
<div class="row">
    <div class="col-lg-6">
        <div class="row">

    <div id="regions_div" style="width: 800px; height: 400px;"></div>

</div>
    </div>

    <div class="col-lg-6">
        <div class="row">
            <div id="visites" style="height: 400px; padding:0;">

            </div>
        </div>
    </div>
</div>
</div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/maps/highmaps.js"></script>
    <script src="https://code.highcharts.com/maps/modules/data.js"></script>
    <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
    <script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="{{ asset('bundles/backend/js/plugins/slimscroll/jquery.slimscroll.min.js')}}"></script>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
            'packages':['geochart'],
            // Note: you will need to get a mapsApiKey for your project.
            // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
            'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
        });
        google.charts.setOnLoadCallback(drawRegionsMap);

        function drawRegionsMap() {
            var data = google.visualization.arrayToDataTable({{ user.Nom }});

            var options = {};

            var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

            chart.draw(data, options);
        }
    </script>
    <script type="text/javascript">
        google.charts.load("current", {packages:["corechart"]});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable({{ user.Nom }});

            var options = {
                title: 'Sessions par appareil',
                pieHole: 0.4,
            };

            var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
            chart.draw(data, options);
        }
    </script>
    <script>
        $(document).ready(function(){
            $('.scroll_content').slimscroll({
                height: '180px'
            });

            // alert("ok");
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

       function drawChart() {
            // Sur la ligne ci-dessous, nous faisons un echo en php (code court) du json retourné par la fonction php buildChartArray
            var data = google.visualization.arrayToDataTable( {{ user.Nom }} );
            // Ci-dessous les options du graphique
            var options = {
                curveType: 'function',
                series: {
                    0: {targetAxisIndex:0},
                    1:{targetAxisIndex:1},
                    2:{targetAxisIndex:1}
                },
                hAxis : {
                    textStyle : {
                        fontSize: 10, // or the number you want
                        fontName: 'Nunito'
                    }
                },
                vAxes: {
                    0: {
                        gridlines: {color: 'red'},
                        textStyle : {
                            fontSize: 10, // or the number you want
                            fontName: 'Nunito'
                        }
                    },
                    1: {
                        gridlines: {color: 'green'},
                        textStyle : {
                            fontSize: 10, // or the number you want
                            fontName: 'Nunito'
                        }
                    }
                },
                legend: {
                    position: 'bottom',
                    textStyle : {
                        fontSize: 10, // or the number you want
                        fontName: 'Nunito'
                    }
                }
            };
            // Nous précisons où le graphique doit être "injecté"
            var chart = new google.visualization.LineChart(document.getElementById('visites'));

            // Nous dessinons le graphique
            chart.draw(data, options);

        }
        });
    </script>
{% endblock %}