{% extends "base.html.twig" %}
{% block main %}
    <div class="row">
        <div class="col-md-8">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Pregunta <small></small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <form id="terminales" method="POST" action="{{action}}">
                        <div class="form-group">
                            <label class="control-label required" for="enunciado">Enunciado</label>
                            <input type="text" id="enunciado" name="enunciado" required="required" placeholder="Enunciado" class="form-control" value="{{ pregunta.enunciado }}">
                        </div>
                        <div class="form-group">
                            <label class="control-label required" for="descripcion">Descripcion</label>
                            <textarea id="descripcion" name="descripcion" required="required" placeholder="Descripción" class="form-control">{{ pregunta.descripcion }}</textarea>
                        </div>
                        {% if pregunta.options is defined %}
                            <div class="form-group">
                                <label class="control-label required">Options</label>
                                <div  class="">
                                    <ul id="options" class="list-group">
                                        {% for option in pregunta.options %}
                                            <li id="option_{{loop.index}}" class="list-group-item justify-content-between" data-index="{{loop.index}}">
                                                {{ option }}
                                                <input type="hidden" name="options[]" value="{{ option }}" />
                                                <span class="badge badge-error badge-pill"><a href="#" onclick="eliminarOption({{loop.index}})"><i class="fa fa-trash-o"></i></a></span>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                            <div class="form-horizontal">
                                <div class="col-sm-2">
                                    <label class="control-label required" for="enunciado">Nueva Opción</label>
                                </div>
                                <div class="col-sm-8">
                                    <input type="text" id="opt_inp" placeholder="Nombre" class="form-control">
                                </div>
                                <div class="col-sm-2">
                                    <a href="#" class="btn btn-default form-control" onclick="addOption()"><i class="fa fa-plus"></i> Añadir</a>
                                </div>
                            </div>
                            <div class="clearfix"></div>

                        {% endif %}
                        <a href="{{ path("gestion_proyectos_show",{'proyecto':proyecto.id}) }}" class="btn btn-danger"> Cancelar</a>
                        <input type="submit" value="Guardar" class="btn btn-success"/>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock main %}

{% block stylesheets %}
    <link href="/vendors/select2/dist/css/select2.min.css" rel="stylesheet" />
{% endblock stylesheets %}

{% block javascripts %}
    <script src="/vendors/select2/dist/js/select2.min.js"></script>
    <script>
                                        function addOption() {
                                            nindex = $("#options .list-group-item:last").attr('data-index') + 1;
                                            nindex = (nindex == NaN) ? 0 : nindex;
                                            value = $("#opt_inp").val();
                                            $("#opt_inp").val("");
                                            $("#options").append('<li id="option_' + nindex + '" class="list-group-item justify-content-between" data-index="' + nindex + '">' + value + '</li>');
                                            $("#option_" + nindex).append('<input type="hidden" name="options[]" value="' + value + '" />');
                                            $("#option_" + nindex).append('<span class="badge badge-error badge-pill"><a href="#" onclick="eliminarOption(' + nindex + ')"><i class="fa fa-trash-o"></i></a></span>')
                                        }
                                        function eliminarOption(index) {
                                            $("#option_" + index).remove();
                                        }
                                        $(document).ready(function () {
                                            $(".select2").select2({
                                                tags: true
                                            });

                                            $("#btn-add-state").on("click", function () {
                                                var newStateVal = $("#new-state").val();
                                                // Set the value, creating a new option if necessary
                                                if ($(".select2").find("option[value=" + newStateVal + "]").length) {
                                                    $(".select2").val(newStateVal).trigger("change");
                                                } else {
                                                    // Create the DOM option that is pre-selected by default
                                                    var newState = new Option(newStateVal, newStateVal, true, true);
                                                    // Append it to the select
                                                    $(".select2").append(newState).trigger('change');
        {#                    newState.hide();#}

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