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

{% block page_title %}{% trans %}TEF PTA par Pilier et par ODD{% 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 %}Montants Programmés{% endblock %}
                    {% block box_number %}{{ datas['header']['sumExpectedCost']|number_format(0, ',', ' ') }}{% 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 %}Montants Réalisés{% endblock %}
                    {% block box_number %}{{ datas['header']['sumRealizedCost']|number_format(0, ',', ' ') }}{% 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 %}TEF (%){% endblock %}
                    {% block box_number %}{{ datas['header']['totalRate']|number_format(2, ',', ' ') }}{% endblock %}
                    {% block progress_description %}{% endblock %}
                {% endembed %}
            </div>
        </div>
        
        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_body %}
                <table id="outputMinistryTable" class="table table-striped">
                <thead>
                    <th>Code</th>
                    <th>{{title}}</th>
                    <th style="width: 50px"># Act.</th>
                    <th style="width: 150px">Mt. Programmés</th>
                    <th style="width: 80px">Mt. Réalisés</th>
                    <th style="width: 80px">TEF (%)</th>
                </thead>
                {% for row in datas['rows'] %}
                <tr>
                    <td>{{ row['code'] }}</td>
                    <td>{{ row['name'] }}</td>
                    <td class="text-center">{{ row['nbActivity'] }}</td>
                    <td class="text-right">{{ row['sumExpectedCost']|number_format(0, ',', ' ') }}</td>
                    <td class="text-right">{{ row['sumRealizedCost']|number_format(0, ',', ' ') }}</td>
                    <td class="text-right">{{ row['rate']|number_format(2, ',', ' ') }}</td>
                </tr>
                {% endfor %}
                </table>
            {% endblock %}

            {% block box_footer %}
            <form name="output_ministry_export" method="post" action="{{ path('app_output_ministry_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>
        $(function () {
            $("#outputMinistryTable").DataTable({
                "searching": false,
                "pageLength": 25,
                "lengthChange": false
            });
        });
    </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 %}