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

{% block page_title %}{% trans %}evaluation.title{% endtrans %}{% endblock %}


{% block page_content %}
    {{ form_start(form) }}
  
        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_body %}
                <div class="text-right">
                    <a href="{{ path('app_notations', { 'id': actionId }) }}" class="btn btn-primary">
                        <i class="fas fa-angle-double-left"></i> {% trans %}basics.processus{% endtrans %}
                    </a>
                </div><br>
                {% if is_granted('ROLE_MANAGER') %}
                    {{ form_row(form.type) }}
                    {{ form_row(form.entite) }}
                {% endif %}
                {% if is_granted('ROLE_DDD') %}
                    {{ form_row(form.entite) }}
                {% endif %}
                {{ form_row(form.programm) }}
                {{ form_row(form.action) }}
            {% endblock %}
        {% endembed %}
     
        {% if actionId > 0 %}
        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_body %}
                <table id="planAppreciationTable" class="table table-striped">
                <thead>
                    <th>Activité</th>
                    <th>Nature</th>
                    <th>Cible</th>
                    <th style="width: 50px">{{(app.session.get('_commune') or app.session.get('_departement')) ? '# Arr.' : '# Com.'}}</th>
                    <th style="width: 75px">Sensibilité</th>
                    <th style="width: 75px">Appréciation</th>
                    {% if (is_granted('ROLE_MANAGER')) %}
                    <th style="width:100px"></th>
                    {% endif %}
                </thead>
                {% for notation in notations %}
                <tr>
                    <td>{{ notation.activity.code }} - {{ notation.activity.name }}</td>
                    <td>{{ notation.nature.name }}</td>
                    <td>
                        {% if notation.target %}
                            {{ notation.target.name }}
                        {% endif %}
                    </td>
                    <td class="text-center">{{ notation.nbOfLocation }}</td>
                    <td class="text-right">{{ notation.sensitivity|number_format(2) }} %</td>
                    <td class="text-left"><span class="badge bg-{{ notation.appreciation.flag }}">{{ notation.appreciation.name }}</span></td>
                    {% if (is_granted('ROLE_MANAGER')) %}
                    <td class="text-center mb-2">
                        <a href="{{ path('app_notation_edit', { 'id': notation.id }) }}" class="btn btn-sm btn-secondary">{% trans %}basics.update{% endtrans %}</a>
                        <br><br>
                        {% if notation.duplicated %}
                            <a href="#" data-toggle="modal" data-target="#modal-delete-{{ notation.id }}" class="btn btn-sm btn-default">{% trans %}basics.delete{% endtrans %}</a>
                            
                            <div class="modal fade" id="modal-delete-{{ notation.id }}">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">{% trans %}basics.delete.title{% endtrans %}</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <p>{% trans %}evaluation.delete.message{% endtrans %}</p>
                                            <b>{% trans %}basics.activity{% endtrans %}:</b> {{ notation.activity.name }}</br>
                                            <b>{% trans %}basics.nature{% endtrans %}:</b> {{ notation.nature.name }}</br>
                                            {% if notation.target %}<b>{% trans %}basics.target{% endtrans %}:</b> {{ notation.target.name }}</br>{% endif %}
                                            <b>{% trans %}basics.sensitivity{% endtrans %}:</b> {{ notation.sensitivity }}%</br>
                                        </div>
                                        <div class="modal-footer justify-content-between">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">{% trans %}basics.no{% endtrans %}</button>
                                            <a href="{{ path('app_notation_delete', { 'id': notation.id }) }}" class="btn btn-danger">{% trans %}basics.yes{% endtrans %}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            <a href="{{ path('app_notation_duplicate', { 'id': notation.id }) }}" class="btn btn-sm btn-default">{% trans %}basics.duplicate{% endtrans %}</a>
                        {% endif %}
                    </td>
                    {% endif %}
                </tr>
                {% endfor %}
                </table>
            {% endblock %}
        {% endembed %}

        {% else %}
        <div class="alert alert-info" role="alert">
            {% trans %}Veuillez sélectionner une action  pour voir ces activités{% endtrans %}
        </div>
        {% endif %}
              
    {{ form_end(form) }}

{% endblock %}

{% block javascripts %}
    <script src="{{ asset('plugins/datatables/French.json') }}"></script>
    <script>
        
        $(document).on('change', '#evaluation_type, #evaluation_entite, #evaluation_programm', function () {
            let $type = $('#evaluation_type')
            let $entite = $('#evaluation_entite')
            let $form = $(this).closest('form')

            let data = {}
            data[$type.attr('name')] = $type.val()
            data[$entite.attr('name')] = $entite.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_type') {
                        $('#evaluation_entite').replaceWith(
                            $(html).find('#evaluation_entite')
                        )
                        $('#evaluation_programm').replaceWith(
                            $(html).find('#evaluation_programm')
                        )
                        $('#evaluation_action').replaceWith(
                            $(html).find('#evaluation_action')
                        )
                    }
                    if ($field == 'evaluation_entite') { 
                        $('#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,
                "language": {
                        "url": "{{ asset('plugins/datatables/French.json') }}"
                    },
                "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>
{% endblock %}

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