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

{% block page_title %}{% trans %}suivi.indicateur.title{% endtrans %}{% endblock %}


{% block page_content %}     
        {% if indicators|length > 0 %}
            {% if(etat) %}
                <div class="row">
                    <div class="col-sm-12">
                        <div class="text-right">
                            <button type="button" class="mb-2 mr-2 btn-shadow  btn btn-danger text-right {{(etat) ? '' : 'disabled'}}" data-toggle="modal" data-target="#valideModal">
                                <i class="fa fa-check"></i> {{ is_granted('ROLE_FOCAL') ? 'Soumettre' : 'Valider' }}
                            </button>
                        </div>
                    </div>
                </div>
            {% else %}
                {% if is_granted('ROLE_FOCAL') %}
                    {% if(structureyear and structureyear.focal2) %}
                        <div class="alert alert-success">
                            Bravo!!!! Vous avez déjà soumis vos données. En cas de modification, veuillez contacter votre SE.
                        </div>
                    {% else %} 
                        <div class="alert alert-danger">
                            Vous ne pouvez plus soumettre les données de votre commune. Veuillez le SE de votre commune.
                        </div>
                    {% endif %}
                {% endif %}
                {% if is_granted('ROLE_DPP') %}
                    {% if(structureyear and structureyear.dpp2) %}
                        <div class="alert alert-success">
                            Bravo!!!! Vous avez déjà validé vos données. En cas de modification, veuillez contacter la DGCS-ODD.
                        </div>
                    {% else %} 
                        <div class="alert alert-danger">
                            Vous ne pouvez pas valider les données de votre commune. Soit le point focal ne les a pas encore soumis. Veuillez lui demander de soummettre les données. Soit vous avez dépassé le délai accordé par la DGCS-ODD et dans ce cas, veuillez contacter la DGCS-ODD.
                        </div>
                    {% endif %}
                {% endif %}
            {% endif %}
        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_body %}
                <table id="suiviIndicateurTable" class="table table-striped">
                <thead>
                    <th>
                        <div class="row mt-2 mb-2">
                            <div class="col-2">Cible</div>
                            <div class="col-3">Indicateur</div>
                            <div class="col-6">
                                {% for i in 5..0 %}
                                <div class="col-2 float-left text-center">{{ year - i }}</div>
                                {% endfor %}
                            </div>
                            
                            <div class="col-1 text-center"></div>
                        </div>
                    </th>
                </thead>

                {% for indicator in indicators %}
                <tr>
                    <td>
                        <div class="row mt-2 mb-2">
                            <div class="col-2">{{ indicator.target }}</div>
                            <div class="col-3">{{ indicator }}</div>
                            <div class="col-6">
                                {% for i in 5..0 %}
                                <div class="col-2 float-left text-center">{{ suivis[indicator.id][year - i] }} {{suivis[indicator.id][year - i] =="-" ? "" : indicator.unity}}</div>
                                {% endfor %}
                                
                                <div class="col-12 float-left">
                                    <hr>
                                        <i>{{ suivis[indicator.id]['observation'] }}</i>
                                    <br>
                                        <i><b>Source : {{ suivis[indicator.id]['source'] }}</i></b> 
                                </div>
                            </div>
                            
                            <div class="col-1 text-center">
                                <a href="{{ path('app_commune_indice_edit', { 'id': indicator.id}) }}" class="btn btn-sm btn-secondary">{% trans %}Modifier{% endtrans %}</a>
                            </div>
                        </div>
                    </td>
                </tr>
                {% endfor %}
                </table>
            {% endblock %}
        {% endembed %}  
        {% endif %}
    
    {% if indicators|length == 0 and goal and entry %}
    <div class="alert alert-primary alert-dismissible fade show" role="alert">
       Vous n'êtes en charge d'aucun indicateur. Veuillez contacter la DGCS-ODD.
    </div>
    {% endif %}

<!-- Valide Modal -->
        <div class="modal fade" id="valideModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title h4" id="myLargeModalLabel">{{ is_granted('ROLE_FOCAL') ? 'Soumision' : 'Validation'}} des données de {{app.session.get('_year')}}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form action="{{ path('app_commune_validation') }}" method="post" enctype="multipart/form-data">
                    <div class="modal-body">
                           Vous êtes sur le point de {{ is_granted('ROLE_FOCAL') ? 'soumettre' : 'valider' }} vos données. Vous ne pouvez plus les modifier.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-success">{{ is_granted('ROLE_FOCAL') ? 'Soumettre' : 'Valider' }}</button>
                    </div>
                    </form>
                </div>
            </div>   
        </div>
{% endblock %}

{% block javascripts %}
    <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 %}