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

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


{% block page_content %}
    <div class="card card-primary">
        {{ form_start(form) }}
            <div class="card-body">    
              
                <table 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>

                    <tr class="notation">
                        <td>
                            <div class="row mt-2">
                                {{ form_widget(form.targetRate) }}
                                {{ form_widget(form.locationRate) }}
                                <div class="col-2">{{ form_widget(form.nature, {'attr': {'onchange': 'calculTargetRate()'} }) }}</div>
                                <div class="col-6 p-0">
                                    <div class="col-6 float-left">{{ form_widget(form.goal, {'attr': {'onchange': 'goalChange(this.id)'} }) }}</div>
                                    <div class="col-6 float-right">{{ form_widget(form.target, {'attr': {'onchange': 'goalChange(this.id)'} }) }}</div>
                                </div>
                                <div class="col-3">{{ form_widget(form.locationType, {'attr': {'onchange': 'locationTypeChange()'} }) }}</div>
                                <div class="col-1">
                                    {{ form_widget(form.sensHtml) }}
                                    {{ form_widget(form.sensitivity) }}
                                </div>
                            </div>
                
                            <div class="row mt-2 mb-2">
                                <div class="col-2">{{ notation.activity.code }} - {{ notation.activity.name }}</div>
                                <div class="col-6">{{ form_widget(form.indicators, {'attr': {'onchange': 'calculTargetRate(this.id)'} }) }}</div>
                                {% if grouping=='arrondissement' %}
                                    <div class="col-3">
                                        <div id="notation_arrondissements_div">{{ form_widget(form.arrondissements, {'attr': {'onchange': 'calculLocationRate()'} }) }}</div>
                                    </div>
                                {%else %}
                                    <div class="col-3">
                                    <div id="notation_communes_div">{{ form_widget(form.communes, {'attr': {'onchange': 'calculLocationRate()'} }) }}</div>
                                    <div id="notation_postes_div">{{ form_widget(form.postes, {'attr': {'onchange': 'calculLocationRate()'} }) }}</div>
                                </div>
                                {% endif %}
                                <div class="col-1 text-center">
                                    {{ form_widget(form.treated, {'attr': {'onchange': 'treatedChange()'} }) }}
                                    <br/>
                                    <button type="submit" class="btn btn-block btn-primary"><i class="fas fa-share-square"></i></button>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>
        {{ form_end(form) }}
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        let maxRate = $('#notation_maxRate').val()
        let minRate = $('#notation_minRate').val()
        let grouping = '{{ grouping }}'

        window.onload = function(){
            if(grouping == 'arrondissement'){
                $('#notation_locationType').val('arrondissement');
            } else {
                $('#notation_locationType').val('department');
            }
            locationTypeChange()
            calculTargetRate()
            calculLocationRate()
        };

        function goalChange(field) {
            let $field = $('#'+field)
            let $goal = $('#notation_goal')
            let $form = $($field).closest('form')
            let data = {}
            data[$goal.attr('name')] = $goal.val()
            data[$($field).attr('name')] = $($field).val()
            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: data,
                success: function(html) {
                    if (field == 'notation_goal') {
                        $('#notation_target').replaceWith(
                            $(html).find('#notation_target')
                        )
                        $('#notation_indicators').replaceWith(
                            $(html).find('#notation_indicators')
                        )

                        /*$('#notation_target').attr('required', false)
                        if ($('#notation_treated').is(':checked')) {
                            $('#notation_target').attr('required', true)
                        } */                       
                    }
                    if (field == 'notation_target') {
                        $('#notation_indicators').replaceWith(
                            $(html).find('#notation_indicators')
                        )
                    }
                }
            });
        }

        function locationTypeChange() {
            if ($('#notation_locationType').val() == 'arrondissement') {
                document.getElementById('notation_arrondissements').disabled = true;
            } else if ($('#notation_locationType').val() == 'poste') {
                $('#notation_communes_div').hide();
                $('#notation_postes_div').show();
                document.getElementById('notation_communes').disabled = true;
                document.getElementById('notation_postes').disabled = false;
            } else {
                $('#notation_communes_div').show();
                $('#notation_postes_div').hide();
                document.getElementById('notation_communes').disabled = false;
                document.getElementById('notation_postes').disabled = true;
            }
        }

        function treatedChange() {
            let $treated = $('#notation_treated')
            let $nature = $('#notation_nature')
            let $goal = $('#notation_goal')
            let $target = $('#notation_target')
            let $communes = $('#notation_communes')
            let $postes = $('#notation_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.options.length; 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_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() {
            let natureRate = getSelectedRate($('#notation_nature').val())

            let targetRate = natureRate
            //let nbTotal = 0
            let nbSelec = 0
            
            if (natureRate && (natureRate - minRate) != 0) {
                document.getElementById('notation_goal').disabled = false;
                document.getElementById('notation_target').disabled = false;
                document.getElementById('notation_indicators').disabled = false;
                document.getElementById('notation_locationType').disabled = false;
                if ($('#notation_locationType').val() == 'arrondissement') {
                    document.getElementById('notation_arrondissements').disabled = false;
                } else if ($('#notation_locationType').val() == 'poste') {
                    document.getElementById('notation_postes').disabled = false;
                } else {
                    document.getElementById('notation_communes').disabled = false;
                }
                
                nbSelec = getSelectedOptions(document.getElementById('notation_indicators')).length
                //nbTotal = document.getElementById('notation_indicators').options.length
                //if (nbTotal!=0) {
                //    targetRate = (maxRate * nbSelec + natureRate * (nbTotal - nbSelec)) / nbTotal
                //}
                if (nbSelec>0) {
                    targetRate = maxRate
                }
            } else {
                document.getElementById('notation_goal').disabled = true;
                document.getElementById('notation_target').disabled = true;
                document.getElementById('notation_indicators').disabled = true;
                document.getElementById('notation_locationType').disabled = true;
                if ($('#notation_locationType').val() == 'arrondissement') {
                    document.getElementById('notation_arrondissements').disabled = true;
                }else if ($('#notation_locationType').val() == 'poste') {
                    document.getElementById('notation_postes').disabled = true;
                } else {
                    document.getElementById('notation_communes').disabled = true;
                }
            }
            $('#notation_targetRate').val(targetRate)

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

            if ($('#notation_locationType').val() == 'arrondissement') {
                nbSelec = getSelectedOptions(document.getElementById('notation_arrondissements')).length
                nbTotal = document.getElementById('notation_arrondissements').options.length
            } else if ($('#notation_locationType').val() == 'poste') {
                nbSelec = getSelectedOptions(document.getElementById('notation_postes')).length
                nbTotal = document.getElementById('notation_postes').options.length
            } else {
                nbSelec = getSelectedOptions(document.getElementById('notation_communes')).length
                nbTotal = document.getElementById('notation_communes').options.length
            }
            if (nbTotal!=0) {
                locationRate = (nbSelec / nbTotal) * 100
            }
            $('#notation_locationRate').val(locationRate)

            calculSensitivity()
        }

        function calculSensitivity() {
            let natureRate = getSelectedRate($('#notation_nature').val())

            let locationRate = $('#notation_locationRate').val()
            let sensitivity = $('#notation_targetRate').val()
            if (natureRate && (natureRate - minRate) != 0) {
                sensitivity = sensitivity - ((100 - locationRate) / 10)
            }
            $('#notation_sensitivity').val(sensitivity)
            $('#notation_sensHtml').val(sensitivity)
            //console.log(natureRate, minRate, locationRate, sensitivity)
        }
    </script>

{% endblock %}