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

{% block title %} {{'DASHBOARD_ADMIN.T39'|trans}} {% endblock %}
{% block breadcrumb1 %}  {{'ADMIN_TABLEAU_DE_BORD.Statistics.T40'|trans}}{% endblock %}
{% block breadcrumb2 %} {{'ADMIN_TABLEAU_DE_BORD.Statistics.T41'|trans}} {% endblock %}

{% block content %}
    <!-- start: FIRST SECTION -->
    <div class="container-fluid container-fullw padding-bottom-10">
        <div class="row">
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-md-7 col-lg-8">
                        <div class="panel panel-white no-radius" id="visits">
                            <div class="panel-heading border-light text-center">
                                <h4 class="panel-title"> {{'ADMIN_TABLEAU_DE_BORD.Statistics.T18'|trans}} </h4>
                            </div>
                            <div collapse="visits" class="panel-wrapper">
                                <div class="panel-body">
                                    <div class="partition-light-grey padding-15 text-center margin-bottom-20 hidden" id="chartdivmess">
                                        <span class="text-light">{{'ADMIN_TABLEAU_DE_BORD.Statistics.T42'|trans}}</span>
                                    </div>
                                    <div class="height-800 hidden" id="chartdiv">
                                        <canvas id="chart1" class="full-width"></canvas>
                                        <div class="margin-top-20">
                                            <div class="inline text-center">
                                                <div id="chart1Legend" class="chart-legend"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5 col-lg-4">
                        <div class="panel panel-white no-radius text-center">
                            <div class="panel-heading border-light rate text-center">
                                <h4 class="panel-title">  {{'ADMIN_TABLEAU_DE_BORD.Statistics.T19'|trans}} : <span class="value"> {{ total }} </span> </h4>
                            </div>
                            <div class="panel-body">
                                <div class="row margin-top-30">
                                    <div class="col-xs-6 text-center">
                                        <div class="rate">
                                            <span class="value">{{ homme }}</span><span class="percentage"> %</span>
                                        </div>
                                        {{'ADMIN_TABLEAU_DE_BORD.Statistics.T23'|trans}}
                                    </div>
                                    <div class="col-xs-6 text-center">
                                        <div class="rate">
                                            <span class="value">{{ femme }}</span><span class="percentage"> %</span>
                                        </div>
                                        {{'ADMIN_TABLEAU_DE_BORD.Statistics.T24'|trans}}

                                    </div>
                                </div>
                                <div class="margin-top-10" id="chartdiv1">
                                    <div class="height-230">
                                        <div class="text-center">
                                             <canvas id="chart2" class="full-width"></canvas>
                                        </div>
                                        <div class="margin-top-20 text-center legend-xs inline">
                                            <div id="chart2Legend" class="chart-legend"></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('components/vendor/Chart.js/chartsjs_formation.js') }}"></script>
    <script>
        Index.init();
    </script>

{% endblock %}