{% extends 'base.html.twig' %}
{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('bootstrap/css/bootstrap.min.css')}}" />
    <link href="{{ asset('css/main.css')}}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{ asset('fonts/material-design-iconic-font/css/material-design-iconic-font.css')}}" />
    <link href="{{ asset('css/datepicker.min.css')}}" rel="stylesheet">
    <link href="{{ asset('css/style.css')}}" rel="stylesheet">
    <meta name="Author" content="">
    <style type="text/css">
        body {
            padding-top: 60px;
        }
        {% for seccion in tarea[0].SeccionesTareaId %}
        {% if seccion.posicion == 1 %}
        .steps {
            height: 2px;
            position: absolute;
            width: calc(100% /{{ loop.length }});
            background: #b7b2ab;
            top: -52px;
            left: 50%;
            transform: translateX(-50%); }
        .steps ul {
            height: 2px;
            position: absolute;
            background: #333;
            width: calc(100% /{{ loop.length }});
            top: 0;
            left: 0;
            transition: all 0.3s ease; }
        .steps:before {
            content: "1";
            color: #333;
            position: absolute;
            left: 0;
            top:3px;
            font-size: 13px;
            font-family: "Poppins-Regular";
            transition: all 0.3s ease; }
        .steps:after {
            content: "{{loop.length}}";
            color: #333;
            position: absolute;
            right: 0;
            top:3px;
            font-size: 13px;
            font-family: "Poppins-Regular"; }
        {% elseif seccion.posicion == loop.length %}

        .steps.step-{{seccion.posicion }} ul {
            width: 100%;
            transition: all 0.3s ease; }
        .steps.step-{{seccion.posicion}}:before {
            content: '';
            left: 100%;
            transition: all 0.1s ease; }
        {% else %}
        .steps.step-{{seccion.posicion}} ul {
            width: calc({{seccion.posicion}}*(100% /{{ loop.length }}));
            transition: all 0.3s ease; }
        .steps.step-{{seccion.posicion}}:before {
            content: '{{seccion.posicion}}';
            left: calc({{seccion.posicion}}*(100% /{{ loop.length }}));
            transition: all 0.3s ease; }
        {% endif %}
        {% endfor %}

    </style>
    <!-- Google Fonts call. Font Used Open Sans & Raleway -->
    <link href="http://fonts.googleapis.com/css?family=Raleway:400,300" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
{% endblock %}
    {% block javascripts %}
        <script type="text/javascript" src="{{ asset('js/jquery-3.3.1.min.js')}}"></script>
        <script type="text/javascript" src="{{ asset('js/jquery.steps.js')}}"></script>

        <script type="text/javascript" src="{{ asset('js/datepicker.js')}}"></script>

        <script type="text/javascript" src="{{ asset('js/datepicker.en.js')}}"></script>
        <script type="text/javascript" >
            $(document).ready(function () {
                $("#wizard").steps({
                    headerTag: "h4",
                    bodyTag: "section",
                    transitionEffect: "fade",
                    enableAllSteps: true,
                    transitionEffectSpeed: 300,
                    labels: {
                        next: "Next",
                        previous: "Back"
                    },
                    onFinished: function (event, currentIndex) {
                        $("#wizard").submit();
                    },
                    onStepChanging: function (event, currentIndex, newIndex) {
                        {% for seccion in tarea[0].SeccionesTareaId %}
                        if ( newIndex === {{seccion.posicion}} ) {
                            $('.steps').addClass('step-{{seccion.posicion + 1}}');
                        } else {
                            $('.steps').removeClass('step-{{seccion.posicion + 1}}');
                        }
                        {% endfor %}

                        return true;
                    }
                });
                // Custom Jquery Steps
                $('.forward').click(function(){
                    $("#wizard").steps('next');
                })
                $('.backward').click(function(){
                    $("#wizard").steps('previous');
                })
                // Select
                $('html').click(function() {
                    $('.select .dropdown').hide();
                });
                $('.select').click(function(event){
                    event.stopPropagation();
                });
                $('.select .select-control').click(function(){
                    $(this).parent().next().toggle().toggleClass('active');
                })
                $('.select .dropdown li').click(function(){
                    $(this).parent().toggle();
                    var text = $(this).attr('rel');
                    $(this).parent().prev().find('div').text(text);
                })
                // Payment
                $('.payment-block .payment-item').click(function(){
                    $('.payment-block .payment-item').removeClass('active');
                    $(this).addClass('active');
                })
                // Date Picker
            });
        </script>
        <![endif]-->
    {% endblock %}
{% block container %}

    <div class="container">
        <h4><strong>Cuestionario de  {{ tarea[0].nombre }}</strong></h4>
        <div class="wrapper" >
            <form action="{{ path('respuestas_tarea', {'id':tarea[0].id}) }}" id="wizard" method="post">
                {% set preguntasIndex=1%}
                {% set cambioSeccion=false %}
                {% set lastcambio=1 %}
                {% set break = false %}

                {% for seccion in tarea[0].SeccionesTareaId if not break %}
{#                    {% if (preguntas|length) == preguntasIndex  %}#}
{#                        {% break %}#}
{#                    {% endif %}#}
                    {% if (preguntasIndex - lastcambio)== seccion.numeroPreguntas %}
                        {% set cambioSeccion=true %}
                    {% endif %}
                    {% set pregunta= preguntas[preguntasIndex-1] %}
                    {% if (preguntasIndex==1) or (cambioSeccion) %}
                        {% set lastcambio=preguntasIndex %}
                        <h4></h4>
                        <section>
                    {% endif %}
                    <div class="inner">
                    {% if (preguntasIndex==1) or (cambioSeccion) %}
                        <h5>{{ seccion.nombre }}</h5>
                        <a href="#" class="avartar">
                            <img height="50px" src="{{ asset('images/toolbox.png')}}" alt="">
                        </a>
                    {% endif %}
                {% for preguntaIndex2 in 1..seccion.numeroPreguntas %}
                    {% if pregunta.TipoPreguntaId.nombre=="string" %}

                        <div class="form-row">
                            <div class="form-holder">
                                <label for="{{ pregunta.alias }}">{{ pregunta.nombre }}</label>
                                {% if respuestas is empty %}
                                    <input type="text" class="form-control" id="{{ pregunta.alias }}" name="{{ pregunta.alias }}" placeholder="{{ pregunta.nombre }} {% if not pregunta.editable %} readonly {% endif %}">
                                {% else %}
                                    {% for respuesta in respuestas %}
                                        {% if respuesta.preguntas.id == pregunta.id %}
                                            <input type="text" class="form-control" id="{{ pregunta.alias }}" name="{{ pregunta.alias }}" placeholder="{{ pregunta.nombre }}" value="{{ respuesta.valor }}"  {% if not pregunta.editable %} readonly {% endif %}>
                                        {% endif %}
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>

                    {% elseif pregunta.TipoPreguntaId.nombre== "text" %}

                        <div class="form-row">
                            <div class="form-holder">
                                <label for="{{ pregunta.alias }}">{{ pregunta.nombre }}</label>
                                {% if respuestas is empty %}
                                    <textarea class="form-control" id="{{ pregunta.alias }}" name="{{ pregunta.alias }}" placeholder="{{ pregunta.nombre }}" rows="10" {% if not pregunta.editable %} readonly {% endif %}></textarea>
                                {% else %}
                                    {% for respuesta in respuestas %}
                                        {% if respuesta.preguntas.id == pregunta.id %}
                                            <textarea class="form-control" id="{{ pregunta.alias }}" name="{{ pregunta.alias }}" placeholder="{{ pregunta.nombre }}" rows="10" {% if not pregunta.editable %} readonly {% endif %}>{{ respuesta.valor }}</textarea>

                                        {% endif %}
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>

                    {% elseif pregunta.TipoPreguntaId.nombre== "select" %}

                        <div class="form-row">
                            <div class="select">
                                <div class="form-holder">
                                    <label for="{{ pregunta.alias }}">{{ pregunta.nombre }}</label>
                                    <div class="select-control">{{ pregunta.nombre }}</div>
                                    <i class="zmdi zmdi-caret-down small"></i>
                                </div>
                                <ul class="dropdown" style="display: none;">
                                    {% for valor in pregunta.tipoPregunta.valoresPosibles|split(',') %}
                                        <li rel="{{valor}}">{{valor}}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>

                    {% else %}

                        <div class="form-row">
                            <div class="form-holder">
                                <input type="text" class="form-control" id="{{ pregunta.alias }}" name="{{ pregunta.alias }}" placeholder="{{ pregunta.nombre }}"  {% if not pregunta.editable %} readonly {% endif %}>
                            </div>
                        </div>

                    {% endif %}



                    {% if preguntasIndex < preguntas|length %}
                        {% set preguntasIndex= preguntasIndex+1%}

                        {% set pregunta= preguntas[preguntasIndex-1] %}
                        {% else %}
                            {% set break = true %}
                    {% endif %}
                {% endfor %}

                    </div>

                    {% if (preguntasIndex - lastcambio)== seccion.numeroPreguntas %}
                        </section>
                    {% endif %}
                {% endfor %}
            </form>
        </div>
    </div><!-- /container -->
{% endblock container %}