{% extends 'base.html.twig' %}

{% block body %}
    <div class="container margin-top-30">
        <div class="row">
            <div class="col">
                <h3>Question {{ questionNumber }}</h3>
            </div>
        </div>
        <div class="question">
            <div class="row">
                <div class="col">
                    <p>
                        <legend class="col-form-label">
                            What is the general added value of a partnership with a non-governmental organization or external partner?
                        </legend>
                    </p>
                    <p>Please move each box in order of preference from 1 to 8</p>
                </div>
            </div>
            <div class="row sortable-table">
                <div class="col-1">
                    <div class="demo">
                        <ul class="list-group" >
                            <li class="list-group-item">#1</li>
                            <li class="list-group-item">#2</li>
                            <li class="list-group-item">#3</li>
                            <li class="list-group-item">#4</li>
                            <li class="list-group-item">#5</li>
                            <li class="list-group-item">#6</li>
                            <li class="list-group-item">#7</li>
                            <li class="list-group-item">#8</li>
                        </ul>
                    </div>
                </div>
                {% if form.vars.value.response is empty %}
                    <div class="col-11">
                        <div class="demo">
                            <ul class="list-group" id="sortable">
                                <li class="ui-state-default list-group-item" value="Positive communication">Positive communication</li>
                                <li class="ui-state-default list-group-item" value="Independent verification (e.g. certification)">Independent verification (e.g. certification)</li>
                                <li class="ui-state-default list-group-item" value="Increased network and networking potentials">Increased network and networking potentials</li>
                                <li class="ui-state-default list-group-item" value="Transformation work on specific topics (e.g. supply chains)">Transformation work on specific topics (e.g. supply chains)</li>
                                <li class="ui-state-default list-group-item" value="Protection of natural resources, humans and the environment">Protection of natural resources, humans and the environment</li>
                                <li class="ui-state-default list-group-item" value="Meet a consumers' demand">Meet a consumers' demand</li>
                                <li class="ui-state-default list-group-item" value="Meet a customers' demand">Meet a customers' demand</li>
                                <li class="ui-state-default list-group-item" value="No added value">No added value</li>

                            </ul>
                        </div>
                    </div>
                {% else %}
                    <div class="col-11">
                        <div class="demo">
                            <ul class="list-group" id="sortable">
                                <li class="ui-state-default list-group-item" value="{{ form.vars.value.response[0] }}">{{ form.vars.value.response[0] }}</li>
                                <li class="ui-state-default list-group-item" value="{{ form.vars.value.response[1] }}">{{ form.vars.value.response[1] }}</li>
                                <li class="ui-state-default list-group-item" value="{{ form.vars.value.response[2] }}">{{ form.vars.value.response[2] }}</li>
                                <li class="ui-state-default list-group-item" value="{{ form.vars.value.response[3] }}">{{ form.vars.value.response[3] }}</li>
                                <li class="ui-state-default list-group-item" value="{{ form.vars.value.response[4] }}">{{ form.vars.value.response[4] }}r</li>
                                <li class="ui-state-default list-group-item" value="{{ form.vars.value.response[5] }}">{{ form.vars.value.response[5] }}</li>
                                <li class="ui-state-default list-group-item" value="{{ form.vars.value.response[6] }}">{{ form.vars.value.response[6] }}</li>
                                <li class="ui-state-default list-group-item" value="{{ form.vars.value.response[7] }}">{{ form.vars.value.response[7] }}</li>
                            </ul>
                        </div>
                    </div>
                {% endif %}
            </div>
            <div class="row">
                {{ form_start(form) }}
                <div class="col-12">
                    <a class="btn btn-success"
                            {% set previousRoute = 'q'~previousResponseId %}
                       href="{{ path(previousRoute ,{ 'cryptId' : survey.cryptId , 'questionId' : previousResponseId}) }}"
                    >Previous </a>
                    {{ form_widget(form.next) }}
                </div>
                {{ form_end(form) }}
            </div>
        </div>


    </div>

{% endblock %}
{% block progressBar %}
    <div class="fixedElement">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated"
                             role="progressbar"
                             aria-valuenow="{{ questionNumber }}"
                             aria-valuemin="0"
                             aria-valuemax="60"
                             style="width: {{ percentage }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block customjavascript %}
    <script type="text/javascript" src="{{ asset('src/js/fixed-bar.js') }}"></script>
    <script src="{{asset('src/js/jquery-ui.min.js')}}" type="text/javascript"></script>
    <script>
        $(function() {
            //Récupère la position des éléments
            function getLiPosition(){
                var liElements = $('.ui-state-default');
                $.each(liElements, function (index,li) {
                    let value = $(li).attr('value');
                    let position = $(li).index();
                    let input = $('#q48_response_'+position);
                    input.val(value)
                })
            }
            getLiPosition();

            //Rends les éléments sortable
            $("#sortable").sortable({
                cursor: "move",
                update: function () {
                    getLiPosition();
                }
            });
            $("#sortable").disableSelection();

        });
    </script>
{% endblock %}