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

{% block title %} {{'DAshboardAdminCountry.T5'|trans}} {% endblock %}
{% block breadcrumb1 %}  {{'ADMIN_TABLEAU_DE_BORD.Statistics.T37'|trans}}{% endblock %}
{% block breadcrumb2 %} {{'ADMIN_TABLEAU_DE_BORD.Statistics.T38'|trans}} {% endblock %}

{% block content %}
    <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">
                                    {#<h5 class="over-title margin-bottom-15">Liste <span
                                                class="text-bold"> des Formation</span></h5>#}
                                    <div class="panel-group accordion" id="accordion">
                                        {% for key,value  in array_id %}
                                            <div class="panel panel-white">
                                                <div class="panel-heading">
                                                    <h5 class="panel-title">
                                                        <a class="accordion-toggle" data-toggle="collapse"
                                                           data-parent="#accordion" href="#{{ value }}">
                                                            <i class="icon-arrow"></i>  {{ array_name[key]}}
                                                        </a></h5>
                                                </div>
                                                <div id="{{  value }}" class="panel-collapse collapse">
                                                    <div class="panel-body">
                                                        <div class="row text-center hidden">
                                                            <h5 class="text-bold">{{'ADMIN_TABLEAU_DE_BORD.Statistics.T34'|trans}}</h5>
                                                            <br>
                                                            <canvas id="doughnutChart{{  value }}" class="full-width"></canvas>
                                                            <div class="col-sm-12">
                                                                <p class="margin-top-20">
                                                                <div id="doughnutLegend{{  value }}"
                                                                     class="chart-legend"></div>
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <hr>
                                                        <div class="row text-center hidden">
                                                            <h5 class="text-bold">{{'ADMIN_TABLEAU_DE_BORD.Statistics.T35'|trans}}</h5>
                                                            <br>
                                                            <canvas id="doughnutChartone{{  value }}" class="full-width"></canvas>
                                                            <div class="col-sm-12">
                                                                <p class="margin-top-20">
                                                                <div id="doughnutLegendone{{  value }}"
                                                                     class="chart-legend"></div>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </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">
                                        <span class="text-bold"> {{'ADMIN_TABLEAU_DE_BORD.Statistics.T15'|trans}} </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#myTab2_example2" data-toggle="tab">
                                        <span class="text-bold"> {{'ADMIN_TABLEAU_DE_BORD.Statistics.T16'|trans}}</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">
                                            <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">
                                            <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">
                                        <span class="text-bold"> {{'ADMIN_TABLEAU_DE_BORD.Statistics.T15'|trans}} </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#myTab2_example2" data-toggle="tab">
                                        <span class="text-bold"> {{'ADMIN_TABLEAU_DE_BORD.Statistics.T16'|trans}}</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">
                                            <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">
                                            <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">
                                    {#<h5 class="over-title margin-bottom-15">Liste <span
                                                class="text-bold"> des Formation</span></h5>#}
                                    <div class="panel-group accordion" id="accordion">
                                        {% for key,value  in array_id %}
                                            <div class="panel panel-white">
                                                <div class="panel-heading">
                                                    <h5 class="panel-title">
                                                        <a class="accordion-toggle" data-toggle="collapse"
                                                           data-parent="#accordion" href="#{{ value }}">
                                                            <i class="icon-arrow"></i>  {{ array_name[key]}}
                                                        </a></h5>
                                                </div>
                                                <div id="{{  value }}" class="panel-collapse collapse">
                                                    <div class="panel-body">
                                                        <div class="row text-center hidden">
                                                            <h5 class="text-bold">{{'ADMIN_TABLEAU_DE_BORD.Statistics.T34'|trans}}</h5>
                                                            <br>
                                                            <canvas id="doughnutChart{{  value }}" class="full-width"></canvas>
                                                            <div class="col-sm-12">
                                                                <p class="margin-top-20">
                                                                <div id="doughnutLegend{{  value }}"
                                                                     class="chart-legend"></div>
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <hr>
                                                        <div class="row text-center hidden">
                                                            <h5 class="text-bold">{{'ADMIN_TABLEAU_DE_BORD.Statistics.T35'|trans}}</h5>
                                                            <br>
                                                            <canvas id="doughnutChartone{{  value }}" class="full-width"></canvas>
                                                            <div class="col-sm-12">
                                                                <p class="margin-top-20">
                                                                <div id="doughnutLegendone{{  value }}"
                                                                     class="chart-legend"></div>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                {% endif %}

            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/total-task/app/statistic/statistic.js') }}"></script>

{% endblock %}