{% extends "base.html.twig" %}

{% block menuTop %}
    {% if forms.tipo != 'UNICO' %}
    <div class="col-lg-12 col-xs-12" >
        <div>
            <div class="btn-group  col-lg-12" >
                <a class="btn btn-default" title="Inicio" href="{{path('allFormsStored',{ 'idproyectos':idproyectos,'idmodule':idmodule, 'f':idforms})}}">
                    <i class="glyphicon glyphicon-home"></i><span class="hidden-xs"> Inicio</span>
                </a>
                <a class="btn btn-default" title="Inicio" href="{{path('showForms',{ 'idproyectos':idproyectos,'idmodule':idmodule, 'idforms':idforms})}}">
                    <i class="glyphicon glyphicon-home"></i><span class="hidden-xs"> Crear</span>
                </a>
            </div>



        </div>


    </div>
    {% endif  %}
{%endblock %}
{% block dashboard %}
    <script>
        $(function () {
            $("#guardarForms").click(function () {
                var campo = new Object();
                campo.nombre = $("#prefijo").val();
                campo.prefijo = '{{ forms.nombre }}_'+$("#prefijo").val();
                {% for proyectosProcesoEtiqueta in proyectosProcesoEtiquetas %}
                if($('#{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}').val()==""){
                    alert("Debe Ingresar {{ proyectosProcesoEtiqueta.etiqueta  }}");
                    return false;
                }
                campo.{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}} = $('#{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}').val();

                {% endfor %}
                $.ajax({
                    type: "POST",
                    async: true,
                    url: "{{path('saveForms',{'idproyectos':idproyectos, 'idmodule':idmodule,'idforms': idforms})}}",
                    data: {$campo: campo}
                }).done(function (msj) {
                    $("#idformsDatos").val(msj);
                        $("#ediForm").css('display','');
                        $("#guardarForms").css('display','none');
                });
            });
            $("#ediForm").click(function () {
                var campo = new Object();
                campo.nombre = $("#prefijo").val();
                campo.prefijo = '{{ forms.nombre }}_'+$("#prefijo").val();
                {% for proyectosProcesoEtiqueta in proyectosProcesoEtiquetas %}
                if($('#{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}').val()==""){
                    alert("Debe Ingresar {{ proyectosProcesoEtiqueta.etiqueta  }}");
                    return false;
                }
                campo.{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}} = $('#{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}').val();

                {% endfor %}
                $.ajax({
                    type: "POST",
                    async: true,
                    url: "{{path('editForm',{'idproyectos':idproyectos, 'idmodule':idmodule,'idformsDatos': 'nuevo'})}}",
                    data: {$campo: campo, $idformsDatos: $("#idformsDatos").val() }
                }).done(function (msj) {
                    if(msj=='ok'){
                        alert('Se modifico con exito')

                    }
                });
            });
        });

    </script>
    <style>
        fieldset.scheduler-border {
            border: 1px groove #ddd !important;
            padding: 0 1.4em 1.4em 1.4em !important;
            margin: 0 0 1.5em 0 !important;
            -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
        }

        legend.scheduler-border {
            border: solid 1px #DDD !important;
            padding: 0 10px 10px 10px;
            border-bottom: none;
        }

        legend.scheduler-border {
            width: auto !important;
            border: none;
            font-size: 14px;
        }
    </style>
    <div class="col-lg-8 col-lg-offset-2">
    <fieldset class="scheduler-border">
        <legend class="scheduler-border" style="font-size: 24px; padding: 5px">Formulario: {{ forms.form }} </legend>
        <form class="form-inline" action="{{ path('editForms',{'idproyectos':idproyectos, 'idmodule':idmodule,'idforms':idforms}) }}" method="post">

        <div class="col-lg-6">
            <label class="control-label input-label" for="prefijo">{{ forms.nombre }}_</label>
            <input type="text" class="form-control" type="text" id="prefijo" name="prefijo"  />
        </div>
            <input  id="idformsDatos" type="hidden" value="">
            <button type="button" class="btn btn-primary" id="guardarForms">{{'ticketDetail.save' | trans}}</button>
            <button type="button" class="btn btn-primary" id="ediForm" style="display: none;">Editar</button>

        </form>
        <br>

        {% for proyectosProcesoEtiqueta in proyectosProcesoEtiquetas %}
                <div class="nombreCampo " >
                    <label class="control-label">{{proyectosProcesoEtiqueta.etiqueta}}</label></div>
                {% if proyectosProcesoEtiqueta.type == "selectData" %}
                <script>
                    $(function () {
                        $("#div{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}").load("{{path('cargaSelectDatos',{"idproyectos":idproyectos}) }}", {$idTipoSelectDatos: "{{proyectosProcesoEtiqueta.idTipoSelectDatos}}", $idetiquetas: "{{proyectosProcesoEtiqueta.idetiquetas}}"})
                    });
                </script>
                <div id="div{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}">
                    <select class="form-control" style="     width: 95%;" id="{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}"></select>

                    {% elseif(proyectosProcesoEtiqueta.type == "text") %}
                <div id="div{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}">
                    <input class="form-control" type="text" id="{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}">

                    {% elseif(proyectosProcesoEtiqueta.type == "textarea") %}
                <div id="div{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}">
                    <textarea class="form-control" style=" width: 90%;" id="{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}"></textarea>

                    {% elseif(proyectosProcesoEtiqueta.type == "select") %}
                    <script>
                        $(function () {
                            $("#div2{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}").load("{{path('cargaEtiquetaSelect',{"idproyectos":idproyectos}) }}", {$idTipoSelectDatos: "{{proyectosProcesoEtiqueta.idTipoSelectDatos}}", $idetiquetas: "{{proyectosProcesoEtiqueta.idetiquetas}}"});
                        });
                    </script>
                <div id="div2{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}">
                    <select class="form-control" style="     width: 95%;" id="{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}"></select>




                    {% elseif(proyectosProcesoEtiqueta.type == "longSelect") %}
                    <script>
                        $(function () {
                            $("#div2{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}").load("{{path('cargaEtiquetaLongSelect',{"idproyectos":idproyectos}) }}", {$idTipoSelectDatos: "{{proyectosProcesoEtiqueta.idTipoSelectDatos}}", $idetiquetas: "{{proyectosProcesoEtiqueta.idetiquetas}}"});

                        });
                    </script>
                <div id="div2{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}">
                    <select class="form-control" style="     width: 95%;" id="{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}"></select>




                    {% elseif(proyectosProcesoEtiqueta.type == "date") %}
                    <script>
                        $(function () {
                            $("#{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}").datepicker();
                        });
                    </script>
                <div id="div{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}">
                    <input class="form-control" type="text" id="{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}">
                    {% elseif(proyectosProcesoEtiqueta.type == "datetime") %}
                    <script>
                        $(function () {
                            {% if proyectosProcesoEtiqueta.idetiquetas == 11 %}
                            var lastDate = new Date();
                            $("#{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}").datetimepicker({
                                maxDate: lastDate});
                            {% else %}
                            $("#{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}").datetimepicker();
                            {% endif %}
                        });
                    </script>
                <div id="div{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}"> <div class="form-group">
                        <div class='input-group date ' >
                            <input id="{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}"   type='text'  class="form-control" placeholder="Select end date" data-date-format="YYYY-MM-DD HH:mm" value="{{ "now"|date("Y-m-d H-i") }}" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                    {% elseif(proyectosProcesoEtiqueta.type == "number") %}
                <div id="div{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}">
                    <input type="text"  class="form-control"  onkeypress="return permite(event,'num', this.value)" id="{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}" value="0">

                    {% elseif(proyectosProcesoEtiqueta.type == "time") %}
                    <script>
                        $(function () {
                            $("#{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}").datetimepicker({

                                format: 'LT'
                            });
                        });
                    </script>
                <div id="div{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}">
                    <div class="form-group">
                        <div class='input-group date'   >
                            <input  type='text'  id="{{proyectosProcesoEtiqueta.type~proyectosProcesoEtiqueta.idetiquetas}}" onkeypress= "return noDatos(event, this.value)"  class="form-control"  data-date-format="HH:mm" value="00:00" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                            </span>
                        </div>
                    </div>


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