{% extends "base.html.twig" %}
{% block main %}
    <div class="page-title">
        <div class="title_left">
            <h3>Proyecto: {{ proyecto.nombre|default("Nuevo") }}</h3>

        </div>
    </div>
    <div class="clearfix"></div>
    <div class="row">
        <div class="col-md-4">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Detalles <small></small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    {{ form_start(form) }}
                    {{ form_row(form) }}
                    {{ form_end(form) }}
                </div>
            </div>
        </div>

        {% if preguntas is defined %}
            <div class="col-md-4">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>Preguntas <small></small></h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <ul id="sortable">
                            {% for pregunta in preguntas %}
                                <li class="ui-state-default" id="pregunta_{{pregunta.id}}">
                                    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                                    {{pregunta.tipo}} | {{ pregunta.enunciado }}
                                    <a href="{{ path("gestion_preguntas_delete", {'proyecto':proyecto.id,'pregunta':pregunta.id}) }}" style="float:right; color:red"><i class="fa fa-trash"></i></a>
                                    &nbsp;|&nbsp;
                                    <a href="{{ path("gestion_preguntas_show", {'proyecto':proyecto.id,'pregunta':pregunta.id}) }}" style="float:right "><i class="fa fa-edit"></i></a>

                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="x_footer">
                        <div class="form-horizontal">
                            <div class="col-sm-9">
                                <select id="sel_preg_new" class="form-control">
                                    <option value="sino">Pregunta Si o No</option>
                                    <option value="choices">Pregunta con Opciones</option>
                                    <option value="terminales">Opciones asociada a terminales</option>
                                </select>
                            </div>
                            <div class="col-sm-3">
                                <a href="{{ path("gestion_pregunta_new",{'proyecto':proyecto.id}) }}" class="btn btn-default" onclick="agregarPregunta(event, this)" style="float: right;">Agrergar</a>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
{% endblock main %}
{% block stylesheets %}
    <link href="{{ asset("/vendors/select2/dist/css/select2.min.css") }}" rel="stylesheet" />
    <style>
        #sortable { list-style-type: none; margin: 0; padding: 0; }
        #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em;}
    </style>

{% endblock stylesheets %}
{% block javascripts %}
    <script src="{{ asset("/vendors/select2/dist/js/select2.min.js") }}"></script>
    <script>
                                    $(".select2").select2();
        {% if preguntas is defined %}
                                        function agregarPregunta(e, btn) {
                                            e.preventDefault();
                                            var attr = $(btn).attr('href');
                                            var op = $("#sel_preg_new").val();
                                            window.location.href = attr + "/" + op;
                                        }
                                        $(function () {
                                            $("#sortable").sortable({
                                                placeholder: "ui-state-highlight",
                                                beforeStop: function (event, ui) {
                                                    var sorted = $("#sortable").sortable("serialize");
                                                    $.ajax({type: 'POST', url: '{{ path("gestion_preguntas_ordenar",{'proyecto':proyecto.id}) }}', data: sorted});
                                                }
                                            });
                                            $("#sortable").disableSelection();
                                        });
                                        function GuardarOrden() {
                                            var sorted = $("#sortable").sortable("serialize", {key: "sort"});
                                            console.log(sorted);
                                        }
        {% endif %}

    </script>
{% endblock javascripts %}