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

{% block scenario_body %}



    <h2>Page prototype saisie scénario</h2>

    <div id="page">

        <p>
        <h3>Test interfaces :</h3>
        <button id="bt-mode-colonne">En colonnes</button>
        <button id="bt-mode-ligne">En lignes</button>
        <button id="bt-mode-flexible">Nouveau style</button>
    </p>

    {# En tête pour le mode tableau #}
    <div class='itk flex-table mode-flexible'>
        <div class="section section-head">
            <div class="cell head"></div>
            <div class="cell head">Culture</div>
            <div class="cell head">Interculture</div>
            <div class="cell head">Date de labour</div>
            <div class="cell head">Date de semis</div>
            <div class="cell head">Densité de semis</div>
            <div class="cell head">Entre rangs</div>
            <div class="cell head">Variété</div>
            <div class="cell head">Désherbage mécanique</div>
            <div class="cell head">Désherbage chimique</div>
        </div>
        
        {# boucle sur 4 années fictives #}
        {% for annee in 1..4 %}
            <div class="section">

                <div class="head cell-annee">Année {{annee}}</div>

                <div class="cell cell-culture">
                    <div class="cell-title">Culture</div>
                    <div class="cell-content">
                        <select id="input-culture_{{annee}}">
                            <option value="1">Blé</option>
                            {# etc... #}
                        </select>
                    </div>
                </div>

                <div class="cell cell-interculture">
                    <div class="cell-title">Interculture</div>
                    <div class="cell-content">

                    </div>
                </div>
                <div class="cell cell-datelabour">
                    <div class="cell-title">Date de labour</div>
                    <div class="cell-content">
                        jan-3 avr-1 déc-2
                    </div>
                </div>
                <div class="cell cell-datesemis">
                    <div class="cell-title">Date de Semis</div>
                    <div class="cell-content">
                        <div id="decadesemis_{{annee}}" class="select-plugin">
                            <select>
                                {% for i in 1..36 %}
                                    <option value="{{i}}">Dec {{i}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="cell cell-densitesemis">
                    <div class="cell-title">Densité de semis</div>
                    <div class="cell-content">
                        <input type="text" value="12"/> gr/m2
                    </div>
                </div>
                <div class="cell cell-ecartinterrangs">
                    <div class="cell-title">Entre rangs</div>
                    <div class="cell-content">
                        <input type="text" value="42"/> cm
                    </div>
                </div>
                <div class="cell cell-variete">
                    <div class="cell-title">Variété</div>
                    <div class="cell-content">

                    </div>
                </div>
                <div class="cell cell-deshmece">
                    <div class="cell-title">Désherbage mécanique</div>
                    <div class="cell-content">
                        Bineuse :
                        <div id="decadesbineuse_{{annee}}" class="select-plugin">
                            <select multiple="multiple" >
                                {% for i in 1..36 %}
                                    <option value="{{i}}">Dec {{i}}</option>
                                {% endfor %}
                            </select>
                        </div>
                        Houe rotative :
                        <div id="decadeshoue_{{annee}}" class="select-plugin">
                            <select multiple="multiple" >
                                {% for i in 1..36 %}
                                    <option value="{{i}}">Dec {{i}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                </div>
                <div class="cell cell-deshchim">
                    <div class="cell-title">Désherbage chimique</div>
                    <div class="cell-content">

                    </div>
                </div>

            </div>

        {% endfor %}

    </div>




</div>
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script src="{{ asset('assets/js/agt-select.js') }}"></script>

<script type="text/javascript">

    //$(".select-plugin").agtSelect();

    /**
     * Switch entre les différents modes (test)
     * @param {type} mode
     * @returns {undefined}
     */
    function changeMode(mode) {
        $(".itk").removeClass("mode-colonne");
        $(".itk").removeClass("mode-ligne");
        $(".itk").removeClass("mode-flexible");

        $(".itk").addClass(mode);
    }



    $(document).ready(
            function ()
            {
                // test interface: switch entre les 3 modes :
                
                $("#bt-mode-colonne").click(function () {
                    changeMode('mode-colonne');
                });
                $("#bt-mode-ligne").click(function () {
                    changeMode('mode-ligne');
                });
                $("#bt-mode-flexible").click(function () {
                    changeMode('mode-flexible');
                });

                // test interface : mise en avant d'un type de champs
                $(".cell-decadelabour").click(function () {
                    $(".cell").toggleClass("soft");
                    $(".cell-decadelabour").removeClass("soft");
                });

            });
</script>


{% endblock %}