{% extends 'Backoffice/base.html.twig' %}

{% block activeLiDash %}class="active"{% endblock %}
{% block activeDash %}class="active"{% endblock %}
{% block body %}
    <section class="vbox">
        <section class="scrollable padder">
            <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                <li class="active">Tableau de bord</li>
            </ul>
            <div class="m-b-md">
                <h3 class="m-b-none">Tableau de bord</h3>
                <small>Résumé</small>
            </div>
            <section class="panel panel-default">
                <div class="row m-l-none m-r-none bg-light lter">
                    <div class="col-sm-6 col-md-3 padder-v b-r b-light">
                            <span class="fa-stack fa-2x pull-left m-r-sm">
                              <i class="fa fa-circle fa-stack-2x text-info"></i>
                              <i class="fa fa-users fa-stack-1x text-white"></i>
                            </span>
                        <a class="clear" href="#">
                            <span class="h3 block m-t-xs"><strong>{{ nbrCellule }}</strong></span>
                            <small class="text-muted text-uc">Commissions</small>
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-3 padder-v b-r b-light lt">
                            <span class="fa-stack fa-2x pull-left m-r-sm">
                              <i class="fa fa-circle fa-stack-2x text-warning"></i>
                              <i class="fa fa-bullhorn fa-stack-1x text-white"></i>
                              <span class="easypiechart pos-abt" data-percent="100" data-line-width="4" data-track-Color="#fff" data-scale-Color="false" data-size="50" data-line-cap='butt' data-animate="2000" data-target="#bugs" data-update="3000"></span>
                            </span>
                        <a class="clear" href="#">
                            <span class="h3 block m-t-xs"><strong id="bugs">{{ nbrActualites }}</strong></span>
                            <small class="text-muted text-uc">Actualités</small>
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-3 padder-v b-r b-light">
                            <span class="fa-stack fa-2x pull-left m-r-sm">
                              <i class="fa fa-circle fa-stack-2x text-danger"></i>
                              <i class="fa fa-edit fa-stack-1x text-white"></i>
                              <span class="easypiechart pos-abt" data-percent="100" data-line-width="4" data-track-Color="#f5f5f5" data-scale-Color="false" data-size="50" data-line-cap='butt' data-animate="3000" data-target="#firers" data-update="5000"></span>
                            </span>
                        <a class="clear" href="#">
                            <span class="h3 block m-t-xs"><strong id="firers">{{ nbrPublications }}</strong></span>
                            <small class="text-muted text-uc">Publications</small>
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-3 padder-v b-r b-light lt">
                            <span class="fa-stack fa-2x pull-left m-r-sm">
                              <i class="fa fa-circle fa-stack-2x icon-muted"></i>
                              <i class="fa fa-newspaper-o fa-stack-1x text-white"></i>
                            </span>
                        <a class="clear" href="#">
                            <span class="h3 block m-t-xs"><strong>{{ nbrArticles }}</strong></span>
                            <small class="text-muted text-uc">Articles</small>
                        </a>
                    </div>
                </div>
            </section>
            <div class="row">
                <div class="col-md-8">
                    <section class="panel panel-default">
                        <header class="panel-heading font-bold">Statistiques Commission</header>
                        <div class="panel-body">
                            <div id="flot-1ine" style="height:210px"></div>
                        </div>
                    </section>
                </div>
                <div class="col-md-4">
                    <section class="panel b-light">
                        <header class="panel-heading bg-primary dker no-border"><strong>Evenements</strong></header>
                        <div id="calendar" class="bg-primary m-l-n-xxs m-r-n-xxs"></div>
                    </section>
                </div>
            </div>
        </section>
    </section>
{% endblock %}
{% block js %}

    <script type="text/javascript">
        $(document).ready( function(){
            var cTime = new Date(), month = cTime.getMonth()+1, year = cTime.getFullYear();

            theMonths = ["Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre"];

            theDays = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"];
            events = [
                {% for e in events %}
                    [
                        "{{ "%2d"|format(e.dateEvenement|date("d"))|replace({' ': ''}) }}/{{ "%2d"|format(e.dateEvenement|date("m"))|replace({' ': ''}) }}/{{ "%2d"|format(e.dateEvenement|date("Y"))|replace({' ': ''}) }}",
                        '{{ e.titreFr }}',
                        '/updateEvenement/?id={{ e.id }}',
                        '#fb6b5b',
                        ''
                    ],
                {% endfor %}
            ];
            $('#calendar').calendar({
                months: theMonths,
                days: theDays,
                events: events,
                popover_options:{
                    placement: 'top',
                    html: true
                }
            });
        });

        $(function(){

            //
            var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
            var d1 = [];
            {% set index = 1 %}
            {% for c in chart %}
                d1.push([{{ index }}, {{ c["nbrPub"] }}]);
                {% set index = index+1 %}
            {% endfor %}

            $("#flot-1ine").length && $.plot($("#flot-1ine"), [{
                        data: d1
                    }],
                    {
                        series: {
                            lines: {
                                show: true,
                                lineWidth: 2,
                                fill: true,
                                fillColor: {
                                    colors: [{
                                        opacity: 0.0
                                    }, {
                                        opacity: 0.2
                                    }]
                                }
                            },
                            points: {
                                radius: 5,
                                show: true
                            },
                            grow: {
                                active: true,
                                steps: 50
                            },
                            shadowSize: 2
                        },
                        grid: {
                            hoverable: true,
                            clickable: true,
                            tickColor: "#f0f0f0",
                            borderWidth: 1,
                            color: '#f0f0f0'
                        },
                        colors: ["#65bd77"],
                        xaxis:{
                            ticks: [[1, "Jan"], [2, "Fev"], [3, "Mar"], [4, "Avr"], [5, "Mai"], [6, "Juin"], [7, "Juil"], [8, "Aou"], [9, "Sep"], [10, "Oct"], [11, "Nov"], [12, "Dec"]]
                        },
                        yaxis: {
                            ticks: 5
                        },
                        tooltip: true,
                        tooltipOpts: {
                            content: "Nombre publication : %y.1",
                            defaultTheme: false,
                            shifts: {
                                x: 0,
                                y: 20
                            }
                        }
                    }
            );

        });
    </script>

{% endblock %}