{% 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;
            bottom: -52px;
            left: 50%;
            transform: translateX(-50%); }
        .steps ul {
            height: 2px;
            position: absolute;
            background: #333;
            width: calc(100% /{{ loop.length }});
            bottom: 0;
            left: 0;
            transition: all 0.3s ease; }
        .steps:before {
            content: "1";
            color: #333;
            position: absolute;
            left: 0;
            bottom: 3px;
            font-size: 13px;
            font-family: "Poppins-Regular";
            transition: all 0.3s ease; }
        .steps:after {
            content: "{{loop.length}}";
            color: #333;
            position: absolute;
            right: 0;
            bottom: 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 %}
            {% for seccion in tarea[0].SeccionesTareaId %}
                {% 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">
                    <h5>{{ seccion.nombre }}</h5>
                    <a href="#" class="avartar">
                        <img height="50px" src="{{ asset('images/toolbox.png')}}" alt="">
                    </a>

                    {% 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 }}">
                                {% 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 }}">
                                        {% 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"></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">{{ 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 }}">
                            </div>
                        </div>

                    {% endif %}

                </div>
                {% set preguntasIndex= preguntasIndex+1%}

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