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

{% block page_title %}{% trans %}notation.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_evaluation', { 'id': actionId }) }}" class="btn btn-primary">
                        {% trans %}basics.appreciation{% endtrans %}  <i class="fas fa-angle-double-right"></i>
                    </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 and form.notationModels|length > 0 %}
        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_body %}
                {%
                    form_theme form.notationModels
                        'form/notation.html.twig'
                %}

                {{ form_errors(form) }}

                <table id="notationTable" class="table table-striped notation-collection">
                <thead>
                    <th class="row">
                        <div class="col-2 text-center">Nature</div>
                        <div class="col-6 text-center">ODD / Cible / Indicateur</div>
                        <div class="col-3 text-center">Localisation</div>
                        <div class="col-1 text-center">Mesure</div>
                    </th>
                </thead>
                <tbody>
                    {% set index = 0 %}
                    {% for notation in form.notationModels %}
                        {{ form_row(notation, {'activity' : activities[index]}) }}
                        {% set index = index + 1 %}
                    {% endfor %}
                </tbody>
                </table>

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

{% block javascripts %}
    <script>
        let maxRate = $('#notation_collection_model_maxRate').val()
        let minRate = $('#notation_collection_model_minRate').val()
        let weighting = $('#notation_collection_model_weighting').val()
        let grouping = '{{ grouping }}'

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

        $(document).on('change', '#notation_collection_model_type, #notation_collection_model_entite, #notation_collection_model_programm', function () {
            let $type = $('#notation_collection_model_type')
            let $entite = $('#notation_collection_model_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 == 'notation_collection_model_type') {
                        $('#notation_collection_model_entite').replaceWith(
                            $(html).find('#notation_collection_model_entite')
                        )
                        $('#notation_collection_model_programm').replaceWith(
                            $(html).find('#notation_collection_model_programm')
                        )
                        $('#notation_collection_model_action').replaceWith(
                            $(html).find('#notation_collection_model_action')
                        )
                    }
                    if ($field == 'notation_collection_model_entite') {
                        $('#notation_collection_model_programm').replaceWith(
                            $(html).find('#notation_collection_model_programm')
                        )
                        $('#notation_collection_model_action').replaceWith(
                            $(html).find('#notation_collection_model_action')
                        )
                    }
                    if ($field == 'notation_collection_model_programm') {
                        $('#notation_collection_model_action').replaceWith(
                            $(html).find('#notation_collection_model_action')
                        )
                    }
                }
            });
        });


        function goalChange(row, field) {
            let $field = $('#'+field)
            let $goal = $('#'+row+'_goal')
            let $location = $('#'+row+'_locationType')
            let $form = $($field).closest('form')
            let data = {}
            data[$goal.attr('name')] = $goal.val()
            data[$location.attr('name')] = $location.val()
            data[$($field).attr('name')] = $($field).val()
            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: data,
                success: function(html) {
                    if (field == row+'_goal') {
                        $('#'+row+'_target').replaceWith(
                            $(html).find('#'+row+'_target')
                        )
                        $('#'+row+'_indicators').replaceWith(
                            $(html).find('#'+row+'_indicators')
                        )

                        $('#'+row+'_target').attr('required', false)
                        if ($('#'+row+'_treated').is(':checked')) {
                            $('#'+row+'_target').attr('required', true)
                        }                        
                    }
                    if (field == row+'_target') {
                        $('#'+row+'_indicators').replaceWith(
                            $(html).find('#'+row+'_indicators')
                        )
                    }
                }
            });
        }

        function locationTypeChange(row) {
            if ($('#'+row+'_locationType').val() == 'arrondissement') {
                document.getElementById(row+'_arrondissements').disabled = true;
            }else if ($('#'+row+'_locationType').val() == 'poste') {
                $('#'+row+'_communes_div').hide();
                $('#'+row+'_postes_div').show();
                document.getElementById(row+'_communes').disabled = true;
                document.getElementById(row+'_postes').disabled = false;
            } else {
                $('#'+row+'_communes_div').show();
                $('#'+row+'_postes_div').hide();
                document.getElementById(row+'_communes').disabled = false;
                document.getElementById(row+'_postes').disabled = true;
            }
        }

        function treatedChange(row) {
            let $treated = $('#'+row+'_treated')
            let $nature = $('#'+row+'_nature')
            let $goal = $('#'+row+'_goal')
            let $target = $('#'+row+'_target')
            let $communes = $('#'+row+'_communes')
            let $postes = $('#'+row+'_postes')

            $nature.attr('required', false)
            $goal.attr('required', false)
            $target.attr('required', false)
            $communes.attr('required', false)
            $postes.attr('required', false)
            if ($treated.is(':checked')) {
                $nature.attr('required', true)
                $goal.attr('required', true)
                $target.attr('required', true)
                $communes.attr('required', true)
                $postes.attr('required', true)
            }
        }
        
        function getSelectedOptions(sel, fn) {
            var opts = [], opt;

            for (var i=0, len=sel ? sel.options.length : 0; i<len; i++) {
                opt = sel.options[i];

                if ( opt.selected ) {
                    opts.push(opt);
                    if (fn) {
                        fn(opt);
                    }
                }
            }
            return opts;
        }

        function getSelectedRate(nature) {
            let allRate = $('#notation_collection_model_allRate').val()
            allRate = JSON.parse(allRate);
            for (var i = 0; i < allRate.length; i++) {
                if (allRate[i].id == nature){
                    return allRate[i].rate
                }
            }
        }
        
        function calculTargetRate(row) {
            let natureRate = getSelectedRate($('#'+row+'_nature').val())
            
            let targetRate = natureRate
            //let nbTotal = 0
            let nbSelec = 0
            if (natureRate && (natureRate - minRate) != 0) {
                document.getElementById(row+'_goal').disabled = false;
                document.getElementById(row+'_target').disabled = false;
                document.getElementById(row+'_indicators').disabled = false;
                document.getElementById(row+'_locationType').disabled = false;
                if ($('#'+row+'_locationType').val() == 'arrondissement') {
                    document.getElementById(row+'_arrondissements').disabled = false;
                }else if ($('#'+row+'_locationType').val() == 'poste') {
                    document.getElementById(row+'_postes').disabled = false;
                } else {
                    document.getElementById(row+'_communes').disabled = false;
                }

                nbSelec = getSelectedOptions(document.getElementById(row+'_indicators')).length
                //nbTotal = document.getElementById(row+'_indicators').options.length
                //if (nbTotal!=0) {
                //    targetRate = ((maxRate * nbSelec) + natureRate * (nbTotal - nbSelec)) / nbTotal
                //}
                if (nbSelec>0) {
                    targetRate = maxRate
                }
            } else {
                document.getElementById(row+'_goal').disabled = true;
                document.getElementById(row+'_target').disabled = true;
                document.getElementById(row+'_indicators').disabled = true;
                document.getElementById(row+'_locationType').disabled = true;
                if ($('#'+row+'_locationType').val() == 'arrondissement') {
                    document.getElementById(row+'_arrondissements').disabled = true;
                }else if ($('#'+row+'_locationType').val() == 'poste') {
                    document.getElementById(row+'_postes').disabled = true;
                } else {
                    document.getElementById(row+'_communes').disabled = true;
                }
            }
            $('#'+row+'_targetRate').val(targetRate)

            calculSensitivity(row)
        }
        
        function calculLocationRate(row) {
            let locationRate = 0
            let nbTotal = 0
            let nbSelec = 0

            if ($('#'+row+'_locationType').val() == 'arrondissement') {
                nbSelec = getSelectedOptions(document.getElementById(row+'_arrondissements')).length
                nbTotal = document.getElementById(row+'_arrondissements') ? document.getElementById(row+'_arrondissements').options.length : 0
            }else if ($('#'+row+'_locationType').val() == 'poste') {
                nbSelec = getSelectedOptions(document.getElementById(row+'_postes')).length
                nbTotal = document.getElementById(row+'_postes').options.length
            } else {
                nbSelec = getSelectedOptions(document.getElementById(row+'_communes')).length
                nbTotal = document.getElementById(row+'_communes') ? document.getElementById(row+'_communes').options.length : 0
            }
            if (nbTotal!=0) {
                locationRate = (nbSelec / nbTotal) * 100
            }
            $('#'+row+'_locationRate').val(locationRate)

            calculSensitivity(row)
        }

        function calculSensitivity(row) {
            let natureRate = getSelectedRate($('#'+row+'_nature').val())

            let locationRate = $('#'+row+'_locationRate').val()
            let sensitivity = $('#'+row+'_targetRate').val()
            if (natureRate && (natureRate - minRate) != 0) {
                sensitivity = (sensitivity - ((100 - locationRate) / 10)) * weighting / 100
            }
            $('#'+row+'_sensitivity').val(sensitivity)
            $('#'+row+'_sensHtml').val(sensitivity)
        }
    </script>

    <script>
        $(function () {
            $("#notationTable").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 %}