{% extends 'HirukoDynamicSurveysBundle:Default:baseCRUD.html.twig' %}
{% block scripts %}
    <link rel="stylesheet" href="{{ asset('bundles/hirukodynamicsurveys/css/datatable/dataTables.bootstrap.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/hirukodynamicsurveys/css/jqueryUi/jquery-ui.css') }}"/>

    <script type="text/javascript" src="{{ asset('bundles/hirukodynamicsurveys/js/jqueryUi/jquery-ui.js')}}"></script>
    <script type="text/javascript">
        var urlReview    = "{{ path('hiruko_review_surveys') }}";
    </script>
{% endblock %}
{% block content %}
<div class="container">
    <div class="panel panel-default">
        <div class="panel-body">
            <div id="generalContent">
                <div class="col-md-12">
                    <h2>{{ 'dynamicSurvey.structSurvey.surveyCreate'|trans([], 'LocalizationBundle')}}</h2><hr>
                </div>
                {% set form_id   = 0 %}
                {% set modality  = '' %}
                {% set form_name = '' %}
                {% if elementSurvey.surveyStructure is not empty %}
                    {% set form_id   = elementSurvey.surveyStructure.id %}
                    {% set modality  = elementSurvey.surveyStructure.modality_id %}
                    {% set form_name = elementSurvey.surveyStructure.form_name %}
                {% endif %}

                {# Datos basicos para la encuesta #}
                <div class="form-group">
                    <div class="col-xs-12 form-group">
                        <label>{{ 'dynamicSurvey.descriptionChange.surveyName'|trans([], 'LocalizationBundle')}} *</label>
                        <input
                                type  = "text"
                                name  = "form_name"
                                id    = "form_name"
                                value = "{{form_name}}"
                                class = "form-control required"
                        />
                        <input
                                type  = "hidden"
                                name  = "form_name"
                                id    = "form_id"
                                value = "{{form_id }}"
                        />
                    </div>

                    <div class="col-xs-12 form-group">
                        <label>{{ 'dynamicSurvey.descriptionChange.modality'|trans([], 'LocalizationBundle')}} *</label>
                        <select name="modality" id="modality" class="form-control required" required>
                            <option value="">{{ 'dynamicSurvey.structSurvey.select'|trans([], 'LocalizationBundle')}}</option>
                            {% for modalities in elementSurvey.listModalities %}
                                {% set selected = '' %}
                                {% if modalities.varMod  == modality %}
                                    {% set selected = "selected" %}
                                {% endif %}
                                <option
                                    value="{{modalities.varMod}}"
                                    {{selected}}
                                >
                                   {{ modalities.varMod }} - {{modalities.modalityName}}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                {# Menu Campos #}
                <div class="form-group col-xs-12">
                    {% for typeField in elementSurvey.listFieldType %}
                        <button class="btn btn-large" type="button" id="field_{{typeField}}">
                            {{typeField}}
                        </button>
                    {% endfor %}
                </div>

                {#Estructura de la encuesta #}
                {% if elementSurvey.surveyStructure is not empty %}
                    <div id="structureSurvey">
                        {% for field in elementSurvey.surveyStructure.fields %}
                            <div class="type_{{field.field_type}}" id="{{field.id}}">
                                <div class="col-xs-12">
                                    <legend>
                                        <h3>{{ 'dynamicSurvey.structSurvey.field'|trans([], 'LocalizationBundle')}} {{field.field_type}}</h3>
                                    </legend>
                                </div>
                                <div class="col-xs-12">
                                    <div class="col-xs-6 form-group">
                                        <label>{{ 'dynamicSurvey.structSurvey.nameField'|trans([], 'LocalizationBundle')}} *</label>
                                        <input
                                            class = "form-control fieldName required"
                                            value = "{{field.field_label}}"
                                            maxlength = "500"
                                        >
                                    </div>
                                </div>
                                <div class="col-xs-12">
                                    <div class="col-xs-6 form-group">
                                        <label>{{ 'dynamicSurvey.structSurvey.descriptionField'|trans([], 'LocalizationBundle')}}</label>
                                        <textarea class="form-control fieldDescription">{{field.field_description}}</textarea>
                                    </div>
                                </div>
                                
                                {% if field.field_type == "image" %}
                                    {# Imagen del estudio #}
                                    <div class="col-xs-12">
                                        <div class="col-xs-6 form-group">
                                            <label>
                                                {{ 'dynamicSurvey.structSurvey.imageStudy'|trans([], 'LocalizationBundle')}} *
                                            </label>
                                            <input type="file" class="form-control-file fieldImage">
                                            <img class="dataImage" src="{{field.field_image}}">
                                            <label></label>
                                        </div>
                                    </div>

                                    {# Lista colores #}
                                    <div class="col-xs-12">
                                        <legend>
                                            <h4>{{ 'dynamicSurvey.structSurvey.colorList'|trans([], 'LocalizationBundle')}} *</h4>
                                        </legend>
                                    </div>
                                    {% for colors in field.list_colors %}
                                        <div class="col-xs-12">
                                            <div class="col-xs-6 form-group">
                                                <input 
                                                    type  = "color" 
                                                    id    = "{{colors.id}}" 
                                                    class = "form-control listColor required"
                                                    value = "{{colors.value}}"
                                                >
                                                <input 
                                                    type  = "button" 
                                                    class = "btn btn-danger deleteColor" 
                                                    value = "{{ 'dynamicSurvey.structSurvey.delete'|trans([], 'LocalizationBundle')}}"
                                                >
                                            </div>
                                        </div>
                                    {% endfor %}
                                {% endif %}
                                
                                {% if field.field_type == "select" or field.field_type == "radio" or field.field_type == "checkbox"%}
                                    <div class="col-xs-12">
                                        <legend>
                                            <h4>{{ 'dynamicSurvey.structSurvey.options'|trans([], 'LocalizationBundle')}} *</h4>
                                        </legend>
                                    </div>
                                    {% for answers in field.list_answers %}
                                        <div class="col-xs-12">
                                            <div class="col-xs-6 form-group">
                                                <input
                                                    type  = "text"
                                                    class = "form-control listOptions required"
                                                    id    = "{{answers.id}}"
                                                    value = "{{answers.value}}"
                                                >
                                                <input 
                                                    type  = "button" 
                                                    class = "btn btn-danger deleteOption" 
                                                    value = "{{ 'dynamicSurvey.structSurvey.delete'|trans([], 'LocalizationBundle')}}"
                                                >
                                            </div>
                                        </div>
                                    {% endfor %}
                                    <div class="col-xs-12">
                                        <div class="col-xs-6 form-group">
                                            <input 
                                                type  = "button" 
                                                class = "btn btn-default moreOption" 
                                                value = "{{ 'dynamicSurvey.structSurvey.newOption'|trans([], 'LocalizationBundle')}}"
                                            >
                                        </div>
                                    </div>
                                {% endif %}

                                {% if field.field_type == "number" %}
                                    <div class="col-xs-12">
                                        <div class="col-xs-6 form-group">
                                            <label>{{ 'dynamicSurvey.structSurvey.minimum'|trans([], 'LocalizationBundle')}}</label>
                                            <input
                                                class = "form-control fieldMin"
                                                type  = "number"
                                                lang  = "en-150"
                                                min   = "0"
                                                max   = ""
                                                value = "{{field.field_min}}"
                                            >
                                        </div>
                                    </div>
                                    <div class="col-xs-12">
                                        <div class="col-xs-6 form-group">
                                            <label>{{ 'dynamicSurvey.structSurvey.maximum'|trans([], 'LocalizationBundle')}}</label>
                                            <input
                                                class = "form-control fieldMax"
                                                type  = "number"
                                                lang  = "en-150"
                                                min   = "0"
                                                max   = ""
                                                value = "{{field.field_max}}"
                                            >
                                        </div>
                                    </div>
                                {% endif %}

                                {% if field.field_type == "text" %}
                                    <div class="col-xs-12">
                                        <div class="col-xs-6 form-group">
                                            <label>{{ 'dynamicSurvey.structSurvey.maxText'|trans([], 'LocalizationBundle')}}</label>
                                            <input
                                                class = "form-control fieldMax"
                                                type  = "number"
                                                min   = "0"
                                                max   = "2000"
                                                value = "{{field.field_max}}"
                                            >
                                        </div>
                                    </div>
                                {% endif %}
                                <div class="col-xs-12">
                                    <legend>
                                        <h4>{{ 'dynamicSurvey.structSurvey.fieldType'|trans([], 'LocalizationBundle')}}</h4>
                                    </legend>
                                </div>
                                {% if field.field_type != "image" %}
                                    <div class="col-xs-12">
                                        <div class="col-xs-6 form-group">
                                            {% set checked = '' %}
                                            {% if field.field_required == 1 %}
                                                {% set checked = 'checked' %}
                                            {% endif %}
                                            <input type="checkbox" class="fieldRequired" {{checked}}>
                                            <label class="ml-10">
                                                {{ 'dynamicSurvey.structSurvey.required'|trans([], 'LocalizationBundle')}}
                                            </label>
                                        </div>
                                    </div>
                                {% endif %}
                                <div class="col-xs-12">
                                    <div class="col-xs-6 form-group">
                                        {% set checked = '' %}
                                        {% if field.field_recurrent == 1 %}
                                            {% set checked = 'checked' %}
                                        {% endif %}
                                        <input type="checkbox" class="fieldRecurrent" {{checked}}>
                                        <label class="ml-10">
                                            {{ 'dynamicSurvey.structSurvey.recurrent'|trans([], 'LocalizationBundle')}}
                                        </label>
                                    </div>
                                </div>
                                <div class="col-xs-12">
                                    <input 
                                        type="button" 
                                        class="btn btn-danger deleteField mr-10" 
                                        value="{{ 'dynamicSurvey.structSurvey.delete'|trans([], 'LocalizationBundle')}}"
                                    >
                                    <input 
                                        type="button" 
                                        class="btn btn-default upField mr-10" 
                                        value="{{ 'dynamicSurvey.structSurvey.up'|trans([], 'LocalizationBundle')}}"
                                    >
                                    <input 
                                        type="button" 
                                        class="btn btn-default downField" 
                                        value="{{ 'dynamicSurvey.structSurvey.down'|trans([], 'LocalizationBundle')}}"
                                    >
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div id="structureSurvey"></div>
                {% endif %}
            </div>
            
            {# Elementos de configuracion #}
            <div class="col-xs-12 form-group"></div>
            <div class="row">
                <div class="col-md-12"><hr></div>
            </div>
            <div class="col-xs-12 form-group">
                <input 
                    type  = "button" 
                    class = "btn btn-primary" 
                    id    = "saveSurvey" 
                    value = "{{ 'dynamicSurvey.structSurvey.save'|trans([], 'LocalizationBundle')}}"
                />
                <input 
                    type  = "button" 
                    class = "btn btn-large" 
                    id    = "reviewSurvey" 
                    value = "{{ 'dynamicSurvey.structSurvey.view'|trans([], 'LocalizationBundle')}}"
                />
                <a href="{{ path('hiruko_list_surveys')}}" class="btn btn-default" >
                    {{ 'dynamicSurvey.structSurvey.cancel'|trans([], 'LocalizationBundle')}}
                </a>
            </div>
        </div>
    </div>
</div>
                
{# Visualizar Encuesta Dinamica #}            
<div id="viewDynamicSurvey"></div>

{# Visualizar Mensaje #} 
<div id="messageDynamicSurvey"></div>
{% endblock %}