{% extends '@AdminLTE/layout/mesodd-layout.html.twig' %}
{% set title = '' %} 
{% if is_granted('ROLE_MANAGER') %}
    {% set title = 'Sensibilité par structure et par ODD' %}
{% elseif app.user.direction %}
    {% set title = 'Sensibilité du ministère par ODD' %}
{% elseif app.user.commune  %}
    {% set title = 'Sensibilité de la commune par ODD' %}
{% elseif is_granted('ROLE_DDD') %}
    {% set title = 'Sensibilité par commune et par ODD' %}
{% endif %}

{% block page_title %}{{ title }}{% 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 show %}
        <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="outputGoalTable" class="table table-striped">
                <thead>
                    <th>Code</th>
                    <th>ODD</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['code'] }}</td>
                    <td>{{ row['name'] }}</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_goal_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>
        let $type = $('#ministry_sel_type');

        $type.change(function() {
            let $form = $type.closest('form');

            let data = {};
            data[$type.attr('name')] = $type.val();

            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: data,
                success: function(html) {
                    $('#ministry_sel_entite').replaceWith(
                        $(html).find('#ministry_sel_entite')
                    );
                }
            });
        });
    </script>
    
    <script src="{{ asset('plugins/datatables/French.json') }}"></script>
    <script>
        $(function () {
            $("#outputGoalTable").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 %}