{% block scripts %}
<link rel="stylesheet" href="{{ asset('bundles/hirukodynamicsurveys/css/custom-survey.css') }}"/>
<script type="text/javascript" src="{{ asset('bundles/hirukodynamicsurveys/js/functionSurvey.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/hirukodynamicsurveys/js/canvasSurvey.js') }}"></script>
{% endblock scripts %}

{% block content %}
<div id="dynamicSurvey" name="dynamicSurvey">
    <h3>{{survey.form_name}}</h3>
    <input type="hidden" name="form_id" value="{{survey.id}}">
    <input type="hidden" name="saveSurvey" id="saveSurvey" value="0">
        {% for field in survey.fields %}
            {% set viewRequired = '' %}
                {% set required = '' %}
                {% set requiredOptions = '' %}
                {% if field.field_required  == 1 %}
                    {% set required = "required" %}
                    {% set requiredOptions = "requiredOptions" %}
                    {% set viewRequired = '*' %}
                {% endif %}
            <div class="row" style="margin-top:10px;">
                <div class="col-md-3">
                    <h5>{{field.field_label}} {{viewRequired}}</h5>
                    <h6>{{field.field_description}}</h6>
                </div>
                {% set tamDiv = '3' %}
                {% if field.field_type  == "image" %}
                    {% set tamDiv = '9' %}
                {% endif %}
                <div class="col-md-{{tamDiv}}">
                    {% if field.field_type == "text" or field.field_type == "date" %}
                        <input
                                type      = "text"
                                value     = "{{field.field_value}}"
                                name      = "{{field.id}}"
                                {% if field.field_type != "date" %}
                                    {% set fieldDate = '' %}
                                    id        = "{{field.id}}"
                                    maxlength = "{{field.field_max}}"
                                {% else %}
                                    id          = "date_{{field.id}}"
                                    placeholder = "dd-mm-yyyy"
                                {% endif %}
                                class = "form-control {{required}}"
                        />
                    {% elseif field.field_type  == "image" %}
                        <div class="col-md-2">
                            <div class="contGenColor">
                                <label class="labelColor">
                                    <div class="checkColor form-control" 
                                        id ="checkColor{{field.id}}"
                                        style = "background-color:{{field.list_colors.0.value}}"
                                    ></div>
                                    {{ 'dynamicSurvey.structSurvey.currentColor'|trans([], 'LocalizationBundle')}}
                                </label>
                                <br>
                                <label class="labelColor">
                                    {{ 'dynamicSurvey.structSurvey.colors'|trans([], 'LocalizationBundle')}}
                                </label>
                                <div class="contColor" id="contColor{{field.id}}">
                                    {% set checkColor = 'checked' %}
                                    {% for color in field.list_colors %}
                                        <input 
                                            type  = "radio" 
                                            name  = "listColor{{field.id}}" 
                                            id    = "liscolor{{field.id}}_color{{color.id}}"
                                            value = "{{color.value}}"
                                            {{checkColor}}
                                        />
                                        <label 
                                            for   = "liscolor{{field.id}}_color{{color.id}}" 
                                            class = "form-control"
                                            style = "background-color:{{color.value}}"
                                        ></label>
                                        {% set checkColor = '' %}
                                    {% endfor %}
                                </div>
                                <a 
                                    class="btn btn-primary clearCanvas" 
                                    id="{{field.id}}" 
                                >
                                    <span class="glyphicon glyphicon-trash">
                                        {{ 'dynamicSurvey.structSurvey.clean'|trans([], 'LocalizationBundle')}}
                                    </span> 
                                </a>
                                <a 
                                    class="btn btn-primary eraseCanvas" 
                                    id="{{field.id}}" 
                                >
                                    <span class="glyphicon glyphicon-unchecked">
                                        {{ 'dynamicSurvey.structSurvey.delete'|trans([], 'LocalizationBundle')}}
                                    </span> 
                                </a>
                                <a 
                                    class="btn btn-primary drawCanvas" 
                                    id="{{field.id}}" 
                                >
                                    <span class="glyphicon glyphicon-pencil">
                                        {{ 'dynamicSurvey.structSurvey.draw'|trans([], 'LocalizationBundle')}}
                                    </span> 
                                </a>
                            </div>
                        </div>
                        <div class="col-md-10">
                            <canvas class="canvasImage" id="{{field.id}}"></canvas>
                            <img src="{{field.field_image}}" class="backgroundImage">
                            <img src="{{field.field_value}}" class="answerImage">
                        </div>
                        <input
                            name  = '{{field.id}}[]'
                            value = '{{field.field_image_id}}'
                            type  = 'hidden'
                        />
                        <input 
                            name  = '{{field.id}}[]'
                            value = '{{field.field_type}}'
                            type  = 'hidden'
                        />
                        <input
                            name  = '{{field.id}}[]'
                            id    = 'answerImg{{field.id}}'
                            value = ''
                            type  = 'hidden'
                        />
                    {% elseif field.field_type  == "number" %}
                        <input
                                type  = "{{field.field_type}}"
                                value = "{{field.field_value}}"
                                id    = "{{field.id}}"
                                lang  = "en-150"
                                name  = "{{field.id}}"
                                min   = "{{field.field_min}}"
                                {% if field.field_max > field.field_min %}
                                    max   = "{{field.field_max}}"
                                {% endif %}
                                step = "0.00001"    
                                class = "form-control {{required}}"
                        />
                    {% elseif field.field_type  == "radio" or field.field_type  == "checkbox"%}
                        {% set nameOption = field.id %}
                        {% if field.field_type  == "checkbox"  %}
                            {% set nameOption = "#{field.id}[]" %}
                        {% endif %}
                        {% for answer in field.list_answers %}
                            {% set checked = '' %}
                            {% if field.field_value is iterable %}
                                {% if answer.id  in field.field_value %}
                                    {% set checked = "checked" %}
                                {% endif %}
                            {% else %}
                                {% if answer.id  == field.field_value %}
                                    {% set checked = "checked" %}
                                {% endif %}
                            {% endif %}
                            <label>
                            <input
                                type  = "{{field.field_type}}"
                                value = "{{answer.id}}"
                                id    = "{{answer.id}}"
                                name  = "{{nameOption}}"
                                class = "{{required}} {{requiredOptions}}"
                                {{checked}}
                            /> {{answer.value}}</label> <br>
                        {% endfor %}
                    {% elseif field.field_type  == "select" %}
                        <select name="{{field.id}}" class = "form-control {{required}}">
                            <option value="">{{ 'dynamicSurvey.structSurvey.select'|trans([], 'LocalizationBundle')}}</option>
                            {% for answer in field.list_answers %}
                                {% set selected = '' %}
                                {% if answer.id  == field.field_value %}
                                    {% set selected = "selected" %}
                                {% endif %}
                                <option value="{{answer.id}}" {{selected}}>{{answer.value}}</option>
                            {% endfor %}
                        </select>
                    {% elseif field.field_type  == "textarea" %}
                        <textarea class = "form-control {{required}}" name="{{field.id}}" id="{{field.id}}">{{field.field_value}}</textarea>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
</div>
{% endblock %}