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

{% block title %}   {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T3'|trans }} {% endblock %}
{% block breadcrumb1 %}  {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T10'|trans }}{% endblock %}
{% block breadcrumb2 %} {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T11'|trans }} {% endblock %}

{% block content %}
    <div class="row ">
        <div class="col-md-6 col-sm-12 col-md-offset-3 ">
            <div class="panel panel-transparent">
                <div class="panel-body">
                    <h4 class="text-center colortmp">{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T1'|trans }}</h4>
                    <select id="pays" class="js-data-array-selected form-control"></select>
                </div>
            </div>
        </div>
    </div>
    <div id="vmap" style="width: 100%; height: 500px;"></div>
    <section id="section-scroll" class="hidden">
        <div class="row">
            <div class="col-sm-8">
                <h1 class="mainTitle">{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T22'|trans }}</h1>
            </div>
        </div>
        <div class="container-fluid container-fullw bg-white ">
            <div class="row">
                <h5 class="over-title margin-bottom-15">{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T12'|trans }} <span
                            class="text-bold">{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T13'|trans }}</span></h5>
                <div class="row">
                    {% if app.request.locale == 'ar' %}
                        <div class="col-md-4 col-sm-12 col-lg-4">
                            <div class="container-fluid ">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="panel-group accordion" id="accordion">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8 col-sm-12 col-lg-8">
                            <div class="tabbable">
                                <ul id="myTab2" class="nav nav-tabs nav-justified">
                                    <li class="active">
                                        <a href="#myTab2_example1" data-toggle="tab">
                                            {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T15'|trans }} <span
                                                    class="text-bold"> </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#myTab2_example2" data-toggle="tab">
                                            {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T16'|trans }} <span
                                                    class="text-bold"> </span>
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane fade in active" id="myTab2_example1">
                                        <!-- start: DYNAMIC TABLE -->
                                        <div class="container-fluid container-fullw bg-white"
                                             style="border-bottom: 0px !important;">
                                            <table class="table table-striped table-bordered table-hover table-full-width"
                                                   id="sample_Elearning_Admin">
                                                <thead>
                                                <tr>
                                                    <th class="hidden-xs"> {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T27'|trans }} </th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T28'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T29'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T30'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T31'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T32'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T33'|trans }}</th>
                                                </tr>
                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                        <!-- end: DYNAMIC TABLE -->
                                    </div>
                                    <div class="tab-pane fade" id="myTab2_example2">
                                        <div class="container-fluid container-fullw bg-white"
                                             style="border-bottom: 0px!important;">
                                            <table class="table table-striped table-bordered table-hover table-full-width"
                                                   id="sample_Presentiel_Admin">
                                                <thead>
                                                <tr>
                                                    <th class="hidden-xs"> {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T27'|trans }} </th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T28'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T29'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T30'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T31'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T32'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T33'|trans }}</th>
                                                </tr>
                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    {% else %}
                        <div class="col-md-8 col-sm-12 col-lg-8">
                            <div class="tabbable">
                                <ul id="myTab2" class="nav nav-tabs nav-justified">
                                    <li class="active">
                                        <a href="#myTab2_example1" data-toggle="tab">
                                            {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T15'|trans }} <span
                                                    class="text-bold"> </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#myTab2_example2" data-toggle="tab">
                                            {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T16'|trans }} <span
                                                    class="text-bold"> </span>
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane fade in active" id="myTab2_example1">
                                        <!-- start: DYNAMIC TABLE -->
                                        <div class="container-fluid container-fullw bg-white"
                                             style="border-bottom: 0px !important;">
                                            <table class="table table-striped table-bordered table-hover table-full-width"
                                                   id="sample_Elearning_Admin">
                                                <thead>
                                                <tr>
                                                    <th class="hidden-xs"> {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T27'|trans }} </th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T28'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T29'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T30'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T31'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T32'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T33'|trans }}</th>
                                                </tr>
                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                        <!-- end: DYNAMIC TABLE -->
                                    </div>
                                    <div class="tab-pane fade" id="myTab2_example2">
                                        <div class="container-fluid container-fullw bg-white"
                                             style="border-bottom: 0px!important;">
                                            <table class="table table-striped table-bordered table-hover table-full-width"
                                                   id="sample_Presentiel_Admin">
                                                <thead>
                                                <tr>
                                                    <th class="hidden-xs"> {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T27'|trans }} </th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T28'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T29'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T30'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T31'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T32'|trans }}</th>
                                                    <th>{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T33'|trans }}</th>
                                                </tr>
                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-4 col-sm-12 col-lg-4">
                            <div class="container-fluid ">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="panel-group accordion" id="accordion">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </section>
    <section id="section-scroll-2" class="hidden">

        <div class="row">
            <div class=" {%  if app.request.locale == 'ar' %} col-sm-pull-8 {% else %} col-sm-8{% endif %}">
                <h1 class="mainTitle">{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T17'|trans }}</h1>
            </div>
        </div>
        <div class="container-fluid container-fullw padding-bottom-10">
            <div class="row">
                <div class="col-sm-12">
                    <div class="row">
                        {% if app.request.locale == 'ar' %}
                            <div class="col-md-5 col-lg-4">
                                <div class="panel panel-white no-radius">
                                    <div class="panel-heading border-light rate text-center ">
                                        <h6 class="panel-title"> {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T19'|trans }} : <span
                                                    class="no-margin text-bold" id="total"> </span></h6>
                                    </div>
                                    <div class="panel-body">
                                        <div class="row margin-top-30">
                                            <div class="col-xs-6 text-center">
                                                <div class="rate">
                                                    <span class="value" id="home"></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" id="femme"></span><span class="percentage"></span>
                                                </div>
                                                {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T24'|trans }}
                                            </div>
                                        </div>
                                        <div class="margin-top-10" id="chartFormeAdmin">
                                            <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 class="col-md-7 col-lg-8">
                                <div class="panel panel-white no-radius" id="visits">
                                    <div class="panel-heading border-light rate 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 "
                                                 id="chart1_formation_Categ">
                                                <span class="text-light">{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T26'|trans }}</span>
                                            </div>
                                            <div class="height-800">
                                                <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>
                        {% else %}
                            <div class="col-md-7 col-lg-8">
                                <div class="panel panel-white no-radius" id="visits">
                                    <div class="panel-heading border-light rate 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 "
                                                 id="chart1_formation_Categ">
                                                <span class="text-light">{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T26'|trans }}</span>
                                            </div>
                                            <div class="height-800">
                                                <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">
                                    <div class="panel-heading border-light rate text-center ">
                                        <h6 class="panel-title"> {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T19'|trans }} : <span
                                                    class="no-margin text-bold" id="total"> </span></h6>
                                    </div>
                                    <div class="panel-body">
                                        <div class="row margin-top-30">
                                            <div class="col-xs-6 text-center">
                                                <div class="rate">
                                                    <span class="value" id="home"></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" id="femme"></span><span class="percentage"></span>
                                                </div>
                                                {{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T24'|trans }}
                                            </div>
                                        </div>
                                        <div class="margin-top-10" id="chartFormeAdmin">
                                            <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>
                        {% endif %}

                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="section-scroll-3" class="hidden">
        <div class="row">
            <div class=" {%  if app.request.locale == 'ar' %} col-sm-pull-8 {% else %} col-sm-8{% endif %}">
                <h1 class="mainTitle">{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T20'|trans }}</h1>
            </div>
        </div>
        <div class="container-fluid container-fullw bg-white">
            <div class="row">
                <div class="col-lg-6">
                    <div class="panel panel-white no-radius">
                        <div class="panel-body">
                            <div class="partition-light-grey padding-15 text-center margin-bottom-20">
                                <h4 class="no-margin">{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T21'|trans }} </h4>
                            </div>
                            <div class="partition-light-grey padding-15 text-center margin-bottom-20 hidden"
                                 id="accordionEvaAdmin_message">
                                <span class="text-light">{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T26'|trans }}</span>
                            </div>
                            <div id="accordionEvaAdmin" class="panel-group accordion accordion-white no-margin">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="panel panel-white no-radius">
                        <div class="panel-body">
                            <div class="partition-light-grey padding-15 text-center margin-bottom-20">
                                <h4 class="no-margin">{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T25'|trans }}</h4>
                            </div>
                            <div class="partition-light-grey padding-15 text-center margin-bottom-20 hidden"
                                 id="chartdivmess4">
                                <span class="text-light">{{ 'ADMIN_TABLEAU_DE_BORD.Statistics.T26'|trans }}</span>
                            </div>
                            <div class="text-center ">
                                <canvas id="evachart3" class="full-width"></canvas>
                            </div>
                            <div class="margin-top-20 text-center legend-xs inline ">
                                <div id="evachart3Legend" class="chart-legend"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end: SECOND SECTION -->
    </section>

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('components/assets/js/vmaps/jquery.vmap.js') }}"></script>
    <script src="{{ asset('components/assets/js/vmaps/jquery.vmap.world.js') }}"></script>
    <script src="{{ asset('assets/total-task/app/statistic/admin_world_statistic.js') }}"></script>


{% endblock %}