{% extends '@AdminLTE/layout/mesodd-layout.html.twig' %}

{% block page_title %}{% trans %}output.direction.title{% endtrans %}{% endblock %}


{% block page_content %}
    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            {{ form_start(form) }}
                {{ form_widget(form) }}
            {{ form_end(form) }}    
        {% endblock %}
    {% endembed %}

    {% if datas['rows'] %}
        <div class="row">
            <div class="col-12 col-sm-6 col-md-3">
                {% embed '@AdminLTE/Widgets/infobox-widget.html.twig'  with {
                    'color' : datas["header"]["flag"],
                    'icon'  : 'fas fa-map-signs',
                }%}
                    {% block box_text %}Nombre d'activités{% endblock %}
                    {% block box_number %}{{ datas['header']['nbActivity'] }}{% endblock %}
                    {% block progress_description %}{% endblock %}
                {% endembed %}
            </div>
            <div class="col-12 col-sm-6 col-md-3">
                {% embed '@AdminLTE/Widgets/infobox-widget.html.twig'  with {
                    'color' : datas["header"]["flag"],
                    'icon'  : 'fas fa-chart-line',
                }%}
                    {% block box_text %}Sensibilité globale{% endblock %}
                    {% block box_number %}{{ datas['header']['sensitivity'] }}{% endblock %}
                    {% block progress_description %}{% endblock %}
                {% endembed %}
            </div>
            <div class="clearfix hidden-md-up"></div>
            <div class="col-12 col-sm-6 col-md-3">
                {% embed '@AdminLTE/Widgets/infobox-widget.html.twig'  with {
                    'color' : datas["header"]["flag"],
                    'icon'  : 'fas fa-exclamation',
                }%}
                    {% block box_text %}Appréciation globale{% endblock %}
                    {% block box_number %}{{ datas['header']['appreciation'] }}{% endblock %}
                    {% block progress_description %}{% endblock %}
                {% endembed %}
            </div>
            <div class="col-12 col-sm-6 col-md-3">
                {% embed '@AdminLTE/Widgets/infobox-widget.html.twig'  with {
                    'color' : datas["header"]["flag"],
                    'icon'  : 'fas fa-hryvnia',
                }%}
                    {% block box_text %}Montant global{% endblock %}
                    {% block box_number %}{{ datas['header']['amount']|number_format(0, ',', ' ') }}{% endblock %}
                    {% block progress_description %}{% endblock %}
                {% endembed %}
            </div>
        </div>
        
        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_body %}
                <table id="outputDirectionTable" class="table table-striped">
                <thead>
                    <th>Direction</th>
                    <th>Ministère</th>
                    <th style="width: 50px"># Act.</th>
                    <th style="width: 150px">Sensibilité</th>
                    <th style="width: 80px">Appréciation</th>
                    <th style="width: 80px">Montant</th>
                </thead>
                {% for row in datas['rows'] %}
                <tr>
                    <td>{{ row['name'] }} ({{ row['code'] }})</td>
                    <td>{{ row['ministry'] }}</td>
                    <td class="text-center">{{ row['nbActivity'] }}</td>
                    <td>
                        <div class="progress progress-xm mt-1">
                            <div class="progress-bar bg-{{ row['flag'] }}" style="width: {{ row['sensitivity'] }}%">{{ row['sensitivity'] }}%</div>
                        </div>
                    </td>
                    <td><span class="badge bg-{{ row['flag'] }}">{{ row['appreciation'] }}</span></td>
                    <td class="text-right">{{ row['amount']|number_format(0, ',', ' ') }}</td>
                </tr>
                {% endfor %}
                </table>
            {% endblock %}
            
            {% block box_footer %}
            <form name="output_ministry_export" method="post" action="{{ path('app_output_direction_export') }}">
                <input type="hidden" name="datas" value="{{ datas|json_encode() }}"/>
                <div class="row">
                    <div class="col-sm-3">
                        <button type="submit" class="btn btn-block btn-primary">{% trans %}basics.export{% endtrans %}</button>
                    </div>
                    <div class="col-sm-9"></div>
                </div>
            </form>       
            {% endblock %}
        {% endembed %}

    {% endif %}

{% endblock %}

{% block javascripts %}
    <script src="{{ asset('plugins/datatables/French.json') }}"></script>
    <script src="{{ asset('plugins/datatables/French.json') }}"></script>
    <script>
        $(function () {
            $("#outputDirectionTable").DataTable({
                "pageLength": 25,
                "language": {
                    "url": "{{ asset('plugins/datatables/French.json') }}"
                }
            });
        });
    </script>

    <script src="{{ asset('plugins/datatables/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.js') }}"></script>
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.css') }}">
{% endblock %}