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

{% block page_title %}{% trans %}chargement.indicators.title{% endtrans %}{% endblock %}


{% block page_content %}

        {% if year %}
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            Vous travaillez sur l'année {{app.session.get('_year')}}. Rassurez-vous que cette année est correcte.
        </div>
      {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_body %}
            <div class="row">
                <div class="col-sm-6">
                    <div class="text-left">
                        {% if(etat) %}
                        <a href="{{ path('app_commune_format') }}" class="mb-2 mr-2 btn-shadow  btn btn-primary text-right {{etat  ? '' : 'disabled'}}">
                            <i class="fa fa-save"></i> {% trans %}chargement.vide{% endtrans %}
                        </a>
                        {% endif %}
                            <a href="{{ path('app_commune_data') }}" class="mb-2 mr-2 btn-shadow  btn btn-secondary text-right">
                                <i class="fa fa-file-download"></i> {% trans %}chargement.data{% endtrans %} {{app.session.get('_year')}}
                        </a>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="text-right">
                        {% if(etat) %}
                            <button type="button" class="mb-2 mr-2 btn-shadow  btn btn-success text-right {{etat  ? '' : 'disabled'}}" data-toggle="modal" data-target="#importModal">
                                <i class="fa fa-file-import"></i> {% trans %}chargement.import{% endtrans %}
                            </button>
                        {% endif %}
                            <a href="{{path('app_commune_suivi_indicateur') }}" class="mb-2 mr-2 btn-shadow  btn btn-warning text-right">
                                <i class="fa fa-check"></i> Suivi des indicateurs
                            </a>
                    </div>
                    </div>
                </div>
            </div>
            {% endblock %}
        {% endembed %}

        
        <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-12">
                            <h1 class="m-0 text-dark">
                                Valeur des indicateurs en  {{app.session.get('_year')}} (Cliquez sur une cible pour plus de détail)
                            </h1>
                        </div>
                    </div>
                </div>
        </div>

        <section class="content">

            <div class="accordion" id="accordionExample">
                {% for odd in odds %}
					{% if settingsManager.getCibleCommuneByOdd(commune, odd) | length  > 0 %}
						{% for cible in settingsManager.getCibleCommuneByOdd(commune, odd) %}
                            <div class="card">
                                <div class="card-header" id="heading{{cible.id}}">
                                    <h2 class="mb-0">
                                        <button class="btn btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse{{cible.id}}" aria-expanded="false" aria-controls="collapse{{cible.id}}">
                                            <strong>Cible {{cible.code}} </strong>: {{cible.description}} 
                                        </button>
                                    </h2>
                                </div>
                                {% if settingsManager.getIndicateurDesagregeCommuneByCible(cible) | length > 0 or settingsManager.getIndicateursRenseignablesByCible(cible) | length > 0 %}
                                    <div id="collapse{{cible.id}}" class="collapse" aria-labelledby="heading{{cible.id}}" data-parent="#accordionExample">
                                        <div class="card-body">
                                    
                                            <table id="suiviIndicateurTable" class="table table-striped">
                                                <thead>
                                                    <th>
                                                        <div class="row mt-2 mb-2">
                                                            <div class="col-7">Indicateur</div>
                                                                {% for i in 4..0 %}
                                                                <div class="col-1 float-left text-center">{{ year.name - i }}</div>
                                                                {% endfor %}
                                                        </div>
                                                    </th>
                                                </thead>

                                                {% for indicator in settingsManager.getIndicateurDesagregeCommuneByCible(cible) %}
                                                <tr>
                                                    <td>
                                                        <div class="row mt-2 mb-2">
                                                            <div class="col-7">* {{ indicator }}</div>
                                                                {% for i in 4..0 %}
                                                                <div class="col-1 float-left text-center">{{ settingsManager.getValeurIndicateur(year.name - i, indicator, 3,commune.id ) }}</div>
                                                                {% endfor %}
                                                        </div>
                                                    </td>
                                                </tr>
                                                {% endfor %}

                                                {% for indicator in settingsManager.getIndicateursRenseignablesByCible(cible) %}
                                                <tr>
                                                    <td>
                                                        <div class="row mt-2 mb-2">
                                                            <div class="col-7">** {{ indicator }}</div>
                                                                {% for i in 4..0 %}
                                                                <div class="col-1 float-left text-center">{{ settingsManager.getIndiceCommune(commune, indicator, settingsManager.getYear(year.name - i)) }}</div>
                                                                {% endfor %}
                                                        </div>
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                                </table>

                                                <div style="margin-top : 10px;">
                                                    <p style="margin-bottom: -10px;">* Indicateurs ODD</p>
                                                    <p>** Indicateurs renseignables par les communes</p>
                                                </div>
                                        </div>
                                    </div>
                                
                                {% else %}

                                    <div id="collapse{{cible.id}}" class="collapse" aria-labelledby="heading{{cible.id}}" data-parent="#accordionExample">
                                        <div class="card-body">
                                            <strong>Il n'existe aucun indicateur (ni renseignale, ni désagrégeable par commune) pour cette cible. </strong>
                                        </div>
                                    </div>

                                {% endif %}
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            </div>
              
                {% if(etat) %}
                <div class="text-right">
                    <button type="button" class="mb-2 mr-2 btn-shadow  btn btn-danger text-right" data-toggle="modal" data-target="#valideModal">
                        <i class="fa fa-check"></i> {{ is_granted('ROLE_FOCAL') ? 'Soumettre' : 'Valider' }}
                    </button>
                </div>
                {% endif %}
        </section>

        <!-- Import Modal -->
        <div class="modal fade" id="importModal" 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">Importation des indicateurs 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_import') }}" method="POST" role="form" accept-charset="UTF-8" enctype="multipart/form-data">
                    <div class="modal-body">
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">Fichier Excel</label>
                                <input type="file" class="form-control" name="fichier" required="required" value="Importer" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/> 
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-success">Importer</button>
                    </div>
                    </form>
                </div>
            </div>   
        </div>

        <!-- 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') ? 'Soumission' : '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>

{% else %}
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            Veuillez contacter votre administrateur pour cette année.
        </div>
{% endif %}
{% endblock %}