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

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


{% block page_content %}
    {{ form_start(form) }}
  
        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_body %}
                {{ form_row(form.goal) }}
            {% endblock %}
        {% endembed %}
     
        {% if form.indiceModels|length > 0 %}
        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_body %}
                {%
                    form_theme form.indiceModels
                        'form/indice.html.twig'
                %}

                {{ form_errors(form) }}

                <table id="indiceTable" class="table table-striped indice-collection">
                <thead>
                    <th class="row">
                        <div class="col-2 text-center">Cible</div>
                        <div class="col-3 text-center">Indicateur</div>
                        <div class="col-6 text-center">
                            <div class="col-4 text-center float-left">Valeur</div>
                            <div class="col-4 text-center float-left">Val cible</div>
                            <div class="col-4 text-center float-left">Unité</div>
                        </div>
                        <div class="col-1 text-center"></div>
                    </th>
                </thead>
                <tbody>
                    {% set index = 0 %}
                    {% for indice in form.indiceModels %}
                        {{ form_row(indice, {'indicator' : indicators[index]}) }}
                        {% set index = index + 1 %}
                    {% endfor %}
                </tbody>
                </table>

            {% endblock %}
        {% endembed %}
        {% endif %}
              
    {{ form_end(form) }}
{% endblock %}


{% block javascripts %}
    <script>
 

        /*window.onload = function(){
            $("#notationTable tr.notation").each(function() {
                let row = this.id
                $('#'+row+'_locationType').val('department');
                locationTypeChange(row)
                calculTargetRate(row)
                calculLocationRate(row)
            });
        };*/

        function calculIndice(row) {

            let minValue = $('#'+row+'_minValue').val()
            let maxValue = $('#'+row+'_maxValue').val()
            let value = $('#'+row+'_value').val()
                
            indice = (value - minValue) / (maxValue - minValue)
            $('#'+row+'_indice').val(indice)
            $('#'+row+'_indiceHtml').val(indice)
        }
    </script>

    <script>
        $(function () {
            $("#indiceTable").DataTable({
                "pageLength": 25
            });
        });
    </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 %}