{% extends "@Core/layout.html.twig" %}

{% block core_body %}
    <div class="page">
        <h2>Courbes de levée</h2>
        <h2></h2>
        Sélectionner une adventice :
        <p class="info-menu">
            <select class="choix-adventice" id="choix">
                {% for adv in adv_noms %}
                    <option name="{{ adv['id'] }}" value="{{ adv['id'] }}" id="{{ adv['id'] }}">{{ adv['nom'] }}</option>
                {% endfor %}
            </select>
        </p>


        <div>
            {% for fiche_adventice in adv_sorted %}
                <div class="fiche_adventice" id="fiche_adventice_{{ fiche_adventice.id }}">
                    <h3>{{ fiche_adventice.nom }}</h3>
                    Taux Annuel de Décroissance* (TAD) : <span class="tad">{{fiche_adventice.tad * 100}}</span>% 
                    <br><br>    

                    {% if fiche_adventice.lienHyppa != "" %}
                        Accès à la <a id="hyppa" href="{{fiche_adventice.lienHyppa}}">fiche</a> dans la base HYPPA (INRA)<br>  
                    {% endif %}
                    {% if fiche_adventice.lienInfloWeb != "" %}
                        Accès à la <a id="infloweb" href ="{{fiche_adventice.lienInfloWeb}}">fiche</a> dans la base InfloWeb<br>
                    {% endif %}
                </div>
            {% endfor %}
            <p>
            *<i>Le Taux Annuel de Décroissance correspond à la proportion de graines qui disparaît d’une année sur l’autre. Il donne une indication sur l’évolution potentielle de la viabilité des graines d’adventices dans le sol. Chaque année, le nombre de semences viables diminue proportionnellement à la valeur du TAD.</i></p>
        </div>

        <div id="chart"></div>
    </div>
    {#
        {% for dec in decades[0:36] %}
            <td>{{ dec['nom'] }}</td>
        {% endfor %}
    #}



    <link href="{{ asset('assets/lib/c3js/c3.min.css')}}" rel="stylesheet">

    <script src="{{ asset('assets/js/d3.min.js') }}"></script>
    <script src="{{ asset('assets/lib/c3js/c3.min.js')}}"></script>

    <script>
        var adventicesById
        =  {{ adv_sorted | json_encode | raw }} ;
                //var data = {{ adv_sorted[8][5:40] |json_encode |raw }};
                var data = getDataAdventice($('#choix').val());
        var tabadv = [];

        tabadv.push(data.nom);
        var current = data.nom;
        for (decade = 0; decade < 36; ++decade)
        {
            tabadv.push(data[decade].propLevee);
        }

        var chart = c3.generate({
            bindto: '#chart',
            data: {
                x: 'x',
                columns: [['x', 'jan-d1', 'jan-d2', 'jan-d3', 'fev-d1', 'fev-d2', 'fev-d3',
                        'mar-d1', 'mar-d2', 'mar-d3', 'avr-d1', 'avr-d2', 'avr-d3',
                        'mai-d1', 'mai-d2', 'mai-d3', 'jun-d1', 'jun-d2', 'jun-d3',
                        'jui-d1', 'jui-d2', 'jui-d3', 'aou-d1', 'aou-d2', 'aou-d3',
                        'sep-d1', 'sep-d2', 'sep-d3', 'oct-d1', 'oct-d2', 'oct-d3',
                        'nov-d1', 'nov-d2', 'nov-d3', 'dec-d1', 'dec-d2', 'dec-d3'],
                    tabadv

                ],
                type: "spline"
            },
            axis: {
                x: {
                    type: 'category',
                    tick: {
                        count: 36,
                        rotate: 90,
                        multiline: false
                    },
                    height: 150
                },
                y: {
                    label:
                            {
                                text: '% de levée par décade',
                                position: 'outer-middle'
                            }
                }
            }

        });

        updateFicheAdventice();

        $('#choix').on('change', function () {
            loadAdventice();
        });


        function loadAdventice() {
            var id_adventice = $('#choix').val();
            //console.log("select modifié "+id_adventice);
            var data = getDataAdventice($('#choix').val());

            updateFicheAdventice();

            //console.log(data);
            //console.log("on affiche l'adventice : "+data['id']);
            var tabadv = [];

            tabadv.push(data.nom);
            for (decade = 0; decade < 36; ++decade)
            {
                tabadv.push(data[decade].propLevee);
            }

            chart.load({
                columns: [tabadv]
            });

            chart.unload(current);
            current = data['nom'];
        }

        function updateFicheAdventice() {
            var id_adventice = $('#choix').val();

            $('.fiche_adventice').hide();
            $('#fiche_adventice_' + id_adventice).show();
        }

        function getDataAdventice(id) {
            return adventicesById[id - 1];
        }

        jQuery(document).ready(function ()
        {
            updateFicheAdventice();
        });

    </script>


{% endblock %}