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

{% block page_title %}{% trans %}Chargement des indicateurs{% endtrans %}{% endblock %}


{% block page_content %}
    {% if not is_granted('ROLE_MANAGER')  and not is_granted('ROLE_INSTAD') %}
    <div class="row">
      <div class="col-xl-12 col-sm-12 col-12 mb-4">
        {% if fin %}
            <div class="alert alert-success">
                Vous avez jusqu'au {{ fin |date('d/m/Y')  }} pour envoyer les données de votre ministère.
            </div>
        {% else %}
            <div class="alert alert-danger">
                Vous ne pouvez pas envoyer des données pour l'année {{year}}. Veuillez contacter la DGCS-ODD.
            </div>     
        {% endif %}
      </div>
    </div>
    {% endif %}

    {% if(is_granted('ROLE_DPP') or is_granted('ROLE_FOCAL') or is_granted('ROLE_INSTAD')) %}
            <div class="row">
                <div class="col-sm-6">
                    
                    {% if etat %}
                    <div class="text-left">
                        {% if is_granted('ROLE_MANAGER') %}
                            <button type="button" class="mb-2 mr-2 btn-shadow  btn btn-primary text-right {{etat  ? '' : 'disabled'}}" data-toggle="modal" data-target="#formatModal">
                                    <i class="fa fa-save"></i> {% trans %}chargement.vide{% endtrans %}
                            </button>
                        {% else %} 
                        <a href="{{ path('app_ministere_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 %}

                           <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>
                    </div>
                    {% endif %}
                </div>
                 {% if(is_granted('ROLE_DPP') or is_granted('ROLE_FOCAL')) %}
                    <div class="col-sm-6">
                        <div class="text-right">
                            <a href="{{ path('app_suiviIND') }}" class="mb-2 mr-2 btn-shadow  btn btn-warning text-right">
                            <i class="fa fa-check"></i> Suivi des indicateurs
                        </a>
                        </div>
                    </div>
                {% endif %}
            </div>
    {% endif %}
    </br> 
        {% if indicators|length > 0 %}
        {% 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-4">Indicateur</div>
                            <div class="col-6">
                                {% for i in 4..0 %}
                                <div class="col-2 float-left text-center">{{ year - i }}</div>
                                {% endfor %}
                                <div class="col-2 float-left text-center">Val. cible</div>
                            </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-4">{{ indicator }}</div>
                            <div class="col-6">
                                {% for i in 4..0 %}
                                <div class="col-2 float-left text-center">{{ suivis[indicator.id][year - i] ? suivis[indicator.id][year - i] : '-' }}</div>
                                {% endfor %}
                                <div class="col-2 float-left text-center"><b>{{ indicator.maxValue }}</b></div>
                                
                                <div class="col-12 float-left"><hr>{{suivis[indicator.id]['observation']}}</div>
                            </div>
                        </div>
                    </td>
                </tr>
                {% endfor %}
                </table>
            {% endblock %}
        {% endembed %}  
        {% endif %}
    
    {% if indicators|length == 0 %}
    <div class="alert alert-primary alert-dismissible fade show" role="alert">
       Vous n'êtes en charge d'aucun indicateur
    </div>
    {% endif %}

    <!-- 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>
                    <div class="modal-body">
                    {{ form_start(formimport, { 'attr': { 'enctype': 'multipart/form-data'}}) }}
                        {{ form_widget(formimport) }}
                         <div class="row form-group">
                                <div class="col-sm-2"><label for="recipient-name" class="col-form-label">Fichier Excel</label></div>
                                <div class="col-sm-10"><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">
                            <div class="col-sm-2"><button type="button" class="btn btn-primary" data-dismiss="modal">Annuler</button></div>
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-success">Importer</button>
                            </div>
                        </div>
                    {{ form_end(formimport) }}
                    </div>
                </div>
            </div>   
        </div>



 <!-- Format Modal -->
        <div class="modal fade" id="formatModal" 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">Télécharger la maquette vide 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>
                    <div class="modal-body">
                    {{ form_start(formformat) }}
                        {{ form_widget(formformat) }}
                        <div class="modal-footer">
                            <div class="col-sm-2"><button type="button" class="btn btn-primary" data-dismiss="modal">Annuler</button></div>
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-success">Télécharger</button>
                            </div>
                        </div>
                    {{ form_end(formformat) }}
                    </div>
                </div>
            </div>   
        </div>

{% endblock %}

{% block javascripts %}
    <script>
        
        $(document).on('change', '#evaluation_ministry, #evaluation_programm', function () {
            let $ministry = $('#evaluation_ministry')
            let $form = $(this).closest('form')

            let data = {}
            data[$ministry.attr('name')] = $ministry.val()
            data[$(this).attr('name')] = $(this).val()
            
            let $field = $(this).attr('id')
            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: data,
                success: function(html) {
                    if ($field == 'evaluation_ministry') {
                        $('#evaluation_programm').replaceWith(
                            $(html).find('#evaluation_programm')
                        )
                        $('#evaluation_action').replaceWith(
                            $(html).find('#evaluation_action')
                        )
                    }
                    if ($field == 'evaluation_programm') {
                        $('#evaluation_action').replaceWith(
                            $(html).find('#evaluation_action')
                        )
                    }
                }
            });
        });

        $(function () {
            $("#planAppreciationTable").DataTable({
                "searching": false,
                "pageLength": 25,
                "lengthChange": false,
                "columnDefs": [
                  { "orderable": false, "targets": -1 }
                ]
            });
        });
        
        $(document).ready(function() {
            // Setup - add a text input to each footer cell
            /*$('#planAppreciationTable thead tr').clone(true).appendTo( '#planAppreciationTable thead' );
            $('#planAppreciationTable thead tr:eq(1) th').each( function (i) {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        
                $( 'input', this ).on( 'keyup change', function () {
                    if ( table.column(i).search() !== this.value ) {
                        table
                            .column(i)
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        
            var table = $('#planAppreciationTable').DataTable( {
                orderCellsTop: true,
                fixedHeader: true
            } );*/

            $('#planAppreciationTables').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );

        } );

    </script>

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

    <script src="{{ asset('assets/js/select2.min.js') }}"></script>
	<script>
		$(document).ready(function () {
            $('.select2').select2({theme: "classic", placeholder: "Choisir un ministère", width: '100%'});
        });
	</script>

{% endblock %}

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