{% extends "::base.html.twig"%}
 {% block menuTop %}
     <div class="col-lg-12 col-xs-12" >
         <div>

             {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}

         </div>


     </div>
           {%endblock %}
            {% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/templateOneBlock.css')}}">
        {% endblock %}

{%block dashboard %}
<style>
.kv-avatar .file-preview-frame,.kv-avatar .file-preview-frame:hover {
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    text-align: center;
}
.kv-avatar .file-input {
    display: table-cell;
    max-width: 220px;
}
</style>
    <script>

$(function() {
     $(".muestra_alert_username").hide();

    $('.datepicker').datetimepicker();
    $("#File").click(function () {
        $("#tipoImagen").val('blob');
        $("#avatar").trigger('click');
        $("#archivo").css("display", "");
        $("#camara").css("display", "none");
    });
    $("#borrarImagen").click(function () {
        $("#tipoImagen").val('');
        $("#photo").attr('src', '{{asset("images/default_avatar_male.jpg")}}');
        $("#photo").css('display', 'none');
        $("#video").css('display', '');
        video.play();
    });

    var WebCam = '<button type="button" id="activeWeb" class="btn btn-default"  >' +
            '<i class="glyphicon glyphicon-facetime-video"></i>' +
            '</button>';
    var TakePhoto = '<img src="{{asset("images/default_avatar_male.jpg")}}" alt="Your Avatar" style="width:160px">';
    $("#avatar").change(function () {
        imagen1 = document.querySelector('input[type=file]').files[0];
        var reader = new window.FileReader();
        reader.readAsDataURL(imagen1);
        reader.onloadend = function () {
            imagen = reader.result;
            $("#imagenPreview").attr('src', imagen);
        }
    });
    {% set imagen = asset("images/default_avatar_male.jpg") %}
    {% if usuarios == true %}
    {% if usuarios.foto == true  %}
    {% set imagen =   asset(usuarios.foto) %}

    {% endif %}
    {% endif %}
    $("#avatar").fileinput({
        overwriteInitial: true,
        maxFileSize: 1500,
        showClose: false,
        showCaption: false,
        browseLabel: '',
        removeLabel: '',
        browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>',
        removeIcon: '<i class="glyphicon glyphicon-remove"></i>',
        removeTitle: 'Cancel or reset changes',
        elErrorContainer: '#kv-avatar-errors',
        msgErrorClass: 'alert alert-block alert-danger',
        defaultPreviewContent: '<img src="{{ imagen }}" alt="Your Avatar" style="width:160px">',
        layoutTemplates: {main2: '{preview}' + WebCam + ' {remove} {browse}'},
        allowedFileExtensions: ["jpg", "png", "gif"]
    });
    var streaming = false,
            videoStreaming = null,
            video = document.querySelector('#video'),
            canvas = document.querySelector('#canvas'),
            photo = document.querySelector('#photo'),
            startbutton = document.querySelector('#startbutton'),
            width = 160,
            height = 160;

    navigator.getMedia = ( navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia);


    video.addEventListener('canplay', function (ev) {
        if (!streaming) {
            height = video.videoHeight / (video.videoWidth / width);
            video.setAttribute('width', width);
            video.setAttribute('height', height);
            canvas.setAttribute('width', width);
            canvas.setAttribute('height', height);
            streaming = true;
        }
    }, false);

    $("#activeWeb").click(function () {
        $("#tipoImagen").val('base64');
        $("#archivo").css("display", "none");
        $("#camara").css("display", "");
        var
                video = document.querySelector('#video'),
                photo = document.querySelector('#photo');
        video.addEventListener('canplay', function (ev) {
            if (!streaming) {
                height = video.videoHeight / (video.videoWidth / width);
                video.setAttribute('width', width);
                video.setAttribute('height', height);
                canvas.setAttribute('width', width);
                canvas.setAttribute('height', height);
                streaming = true;
            }
        }, false);
        $("#photo").css("display", "none");
        navigator.getMedia(
                {
                    video: true,
                    audio: false
                },
                function (stream) {
                    videoStreaming = stream;
                    if (navigator.mozGetUserMedia) {
                        video.mozSrcObject = stream;
                    } else {
                        var vendorURL = window.URL || window.webkitURL;
                        video.src = vendorURL.createObjectURL(stream);
                    }
                    video.play();
                },
                function (err) {
                    console.log("An error occured! " + err);
                }
        );
        $("#video").css('display', '');

    })
    function takepicture() {
        var photo = document.querySelector('#photo');
        canvas.width = width;
        canvas.height = height;
        canvas.getContext('2d').drawImage(video, 0, 0, width, height);
        var data = canvas.toDataURL('image/png');
        $("#photo").css('display', '');
        $("#video").css('display', 'none');
        photo.setAttribute('src', data);

    }

    startbutton.addEventListener('click', function (ev) {
        takepicture();
        ev.preventDefault();
    }, false);
    $('#cargar').css('display', 'none');
    {% if usuarios == true %}
    $("#idregion option[value='{{usuarios.idregion}}']").attr('selected', 'selected');
    $('#idestado').load('{{path('cargaIdEstado',{'idproyectos':idproyectos})}}', {
                $idregion: $('#idregion').val(),
                $tipoSitio: null
            },
            function () {
                $("#idestado option[value='{{usuarios.idestado}}']").attr('selected', 'selected');
                $("#idlocalidad").load('{{path('cargaIdLocalidad',{'idproyectos':idproyectos})}}', {
                            $idestado: $('#idestado').val(),
                            $tipoSitio: null
                        },
                        function () {
                            $("#idlocalidad option[value='{{usuarios.idlocalidad}}']").attr('selected', 'selected');

                        });
            });
    {%else%}
    $('#idestado').load('{{path('cargaIdEstado',{'idproyectos':idproyectos})}}', {
                $idregion: $('#idregion').val(),
                $tipoSitio: null
            },
            function () {
                $("#idlocalidad").load('{{path('cargaIdLocalidad',{'idproyectos':idproyectos})}}', {
                    $idestado: $('#idestado').val(),
                    $tipoSitio: null
                });
            });

    {% endif %}


    $('#idregion').change(function () {
        $('#idestado').load('{{path('cargaIdEstado',{'idproyectos':idproyectos})}}', {
                    $idregion: $('#idregion').val(),
                    $tipoSitio: null
                },
                function () {

                    $("#idlocalidad").load('{{path('cargaIdLocalidad',{'idproyectos':idproyectos})}}', {
                        $idestado: $('#idestado').val(),
                        $tipoSitio: null
                    });
                });
    });
    $('#idestado').change(function () {
        $("#idlocalidad").load('{{path('cargaIdLocalidad',{'idproyectos':idproyectos})}}', {
            $idestado: $('#idestado').val(),
            $tipoSitio: null
        });
    });

    $('#username').keypress(function (e) {
        if (e.keyCode == 32) {
            return false;
        }
    });

    $('#password').keypress(function (e) {
        if (e.keyCode == 32) {
            return false;
        }
    });
});
                function nextUno() {
                    $("#clave_crear").val($("#password").val());
                    //alert($('#fechaNacimiento').val());
                    //alert($('#tlf').val());
                    var fechaN = $('#fechaNacimiento').val();
                    var telefonoN = $('#tlf').val()
                    if (fechaN === undefined) {
                       var fechaN = 0;
                    }
                    if (telefonoN === undefined) {
                       var telefonoN = 0;
                    }
                    var campo = new Object();
                    campo.user = $('#username').val();
                    campo.name = $('#name').val();
                    campo.password = $('#password').val();
                    campo.tlf = telefonoN; //$('#tlf').val();
                    campo.direccion = $('#direccion').val();
                    campo.email = $('#email').val();
                    campo.direccion = $('#direccion').val();
                    campo.fechaNacimiento = fechaN; //$('#fechaNacimiento').val();
                    campo.opc = $("#opc").val();
                    campo.idUser = $("#idUser").val();
                    campo.cedula = $("#cedula").val();
                    campo.idregion = $("#idregion").val();
                    campo.idestado = $("#idestado").val();
                    campo.idlocalidad = $("#idlocalidad").val();
                    {% for proyectosEtiqueta in proyectosEtiquetas %}
                    campo.{{ proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas }} = $("#{{  proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas  }}").val();
                    {% endfor  %}
                    imagen = '';
                    tipoImagen = $("#tipoImagen").val();
                    if ($("#photo").attr('src') != '/site/web/images/default_avatar_male.jpg' && tipoImagen == 'base64') {
                        imagen = $("#photo").attr('src');
                    } else if ($(".file-preview-image").attr('src') != '/site/web/images/default_avatar_male.jpg') {
                        tipoImagen = 'blob';
                        imagen = $("#imagenPreview").attr('src');
                    }
                    if (typeof imagen === 'undefined') {
                        tipoImagen = "";
                        imagen = '';
                    }
                    campo.photo = imagen;
                    campo.phototype = tipoImagen;

                    if ($('#username').val().trim() != "" &&  $('#name').val().trim() != "" && $('#password').val().trim() != "") {
                        $('#cargar').css('display', '');

                        $.ajax({
                            type: "POST",
                            async: true,
                            url: "{{path('addUser',{'idproyectos':idproyectos})}}",
                            data: {user: campo}
                        }).done(function (msj) {
                            if (msj=='duplicado'){
                                $('#username').val('');
                                swal("Error. Username !", "Username Already Registered", "error");
                                return false;
                            }else{
                                $("#datosPersonales").text('');
                                $("#datosPersonales").load("{{path('addDptoCargo',{'idproyectos':idproyectos })}}", {$iduser: msj});
                                $('#cargar').css('display', 'none');
                            }
                        });
                        return true;
                    } else {
                        swal("Error. Falta Información!", "Debe completar los campos marcados en rojo", "error");

                        if ($('#username').val().trim() == "") {
                            $('#username').val("");
                            $('#username').attr("style", "border: 1px solid red !important");
                        } else {
                            $('#username').removeAttr("style");
                        }
                        if ($('#name').val().trim() == "") {
                            $('#name').val("");
                            $('#name').attr("style", "border: 1px solid red !important");
                        } else {
                            $('#name').removeAttr("style");
                        }
                        if ($('#password').val().trim() == "") {
                            $('#password').val("");
                            $('#password').attr("style", "border: 1px solid red !important");
                        } else {
                            $('#password').removeAttr("style");
                        }
                    }
                };

                function nextDos(){
                   var campo = new Object();
                   campo.idUser =$('#idUser').val();
                   campo.idcargo =$('#idcargo').val();
                   campo.opc = 1;
                   campo.idUser = $("#idUser").val();
                   campo.idDpto = $('#idDpto').val();

                   campo.idsupervisor = $('#idsupervisor').val();
                            $('#cargar').css('display','');

                            $.ajax({
                                type:"POST",
                                async:true,
                                url:"{{path('addDptoCargo',{'idproyectos':idproyectos})}}",
                                data: { $iduser:$("#idUser").val(), campos: campo  }
                            }).done(function(msj){
                                $("#datosPersonales").text('');
                                $("#datosPersonales").load("{{path('addRoles',{'idproyectos':idproyectos})}}",{$iduser:msj,$idmodule:'{{idmodule}}'});
                          $('#cargar').css('display','none');
                            });
                 return true;
                };


                function nextTres(){
                   var campo = new Object();
                   campo.idUser =$('#idUser').val();
                   campo.idcargo =$('#idcargo').val();
                   campo.opc = 1;
                   campo.idUser = $("#idUser").val();
                   campo.idDpto = $('#idDpto').val();
                            $('#cargar').css('display','');

                            $.ajax({
                                type:"POST",
                                async:true,
                                url:"{{path('addDptoCargo',{'idproyectos':idproyectos})}}",
                                data: { $iduser:$("#idUser").val(), campos: campo  }
                            }).done(function(msj){
                                $("#datosPersonales").text('');
                             $("#datosPersonales").load("{{path('addRoles',{'idproyectos':idproyectos,'iduser':0 })}}",{$iduser:msj,$idmodule:'{{idmodule}}'});
                            });
                 return true;
                };


                function backDos(iduser) {
                    $('#cargar').css('display', '');
                    $("#datosPersonales").text('');
                    $("#datosPersonales").load('{{path('datosPersonales',{'idproyectos':idproyectos,'iduser':0,'idmodule':idmodule})}}', {$email: $('#email').val()});

                    return true;
                };

                function backTres(iduser){
                $('#cargar').css('display','');
                                $("#datosPersonales").text('');
                $("#datosPersonales").load('{{path('addDptoCargo',{'idproyectos':idproyectos})}}',{$iduser:iduser});
                 return true;
                };

                function eliminarRol(iduser, idroles) {
                    $("#dialog-alert p").text("¿Esta Seguro de Eliminar el Rol?")
                    $("#dialog-alert").dialog({
                        autoOpen: true,
                        modal: true,
                        buttons: {
                            Guardar: function () {

                                $.ajax({
                                    type: "POST",
                                    async: true,
                                    url: "{{path('rmRol',{'idproyectos':idproyectos})}}",
                                    data: {$iduser: iduser, $idroles: idroles}
                                }).done(function (msj) {
                                    $("#UserRoles").load("{{path('UserRoles',{'idproyectos': idproyectos})}}", {$iduser: iduser});
                                    $('#dialog-alert').dialog('close');
                                });
                                $(this).dialog('close');

                            },
                            Cancelar: function () {
                                $(this).dialog('close');
                            },
                        }
                    });
                };

                function addRol(iduser, idroles) {
                    if (idroles==null){
                        swal("Error!", "You Must Add The Role", "error");
                        return false;
                    }
                    $("#dialog-alert p").text("¿Esta Seguro de Agregar el (los) Rol (es)?")
                    $("#dialog-alert").dialog({
                        autoOpen: true,
                        modal: true,
                        buttons: {
                            Guardar: function () {

                                $.ajax({
                                    type: "POST",
                                    async: true,
                                    url: "{{path('addRol',{'idproyectos':idproyectos})}}",
                                    data: {$iduser: iduser, $idroles: idroles}
                                }).done(function (msj) {
                                    $("#UserRoles").load("{{path('UserRoles',{'idproyectos': idproyectos})}}", {$iduser: iduser});
                                    swal("Information!", "Successfully Registered Role", "success");
                                    $('#dialog-alert').dialog('close');
                                });
                                $(this).dialog('close');

                            },
                            Cancelar: function () {
                                $(this).dialog('close');
                            },
                        }
                    });
                };



</script>
<!-- some CSS styling changes and overrides -->
<input type="hidden" id="usuario_crear" name="usuario_crear" value="{{usuarios?usuarios.iduser:'null'}}">
<input type="hidden" id="clave_crear" name="clave_crear" value="">
                {% if usuarios == true %}
                {% set imagen =   asset(usuarios.foto) %}
                {% else  %}
                {% set imagen =   asset("images/default_avatar_male.jpg") %}
                {% endif   %}
    <div id="datosPersonales" class="col-xs-12 col-md-12 col-lg-12 table-bordered ">

        <div class="col-xs-12 col-md-12 col-lg-3 table-bordered ">
        <input type="hidden" id="tipoImagen" value="">
        <img src="" style="display: none" id="imagenPreview">

            <div id="kv-avatar-errors" class="center-block" style="display:none"></div>
            <div class="kv-avatar center-block" style="width:320px" id="archivo">
                <input id="avatar" name="avatar" type="file" class="file-loading">
            </div>

            <div class="kv-avatar center-block" style="width:320px; display: none" id="camara">
                <div class="file-input"><div class="file-preview ">
                        <div class="file-drop-disabled">
                            <div class="file-preview-thumbnails"><div class="file-default-preview"><video id="video" style=" width: 160px; height: 160px; display:none"></video>
                                    <img src="{{imagen}}" alt="Your Avatar" style="width:160px" id="photo">
                                    <canvas id="canvas" style=" display:none; width: 320px; height: 240px;"></canvas></div></div>
                            <div class="clearfix"></div>    <div class="file-preview-status text-center text-success"></div>
                            <div class="kv-fileinput-error"></div>
                        </div>
                    </div>
                    <button type="button" id="startbutton" class="btn btn-default"><i class="glyphicon glyphicon-camera"></i></button>
                    <button type="button" tabindex="500" title="Cancel or reset changes" class="btn btn-default fileinput-remove fileinput-remove-button" id="borrarImagen"><i class="glyphicon glyphicon-remove"></i></button>
                    <button tabindex="500" class="btn btn-primary btn-file" id="File"><i class="glyphicon glyphicon-folder-open" data-target="#avatar"></i></button>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-12 col-lg-6 table-bordered ">
            <h1>{{ 'user.personalinformation' | trans }} </h1>
            <form  action=""  method="POST" autocomplete="off">
                {% if usuarios == true %}

                <div class="row">
                    <input type="hidden" id="opc" name="opc" value="1">
                    <input type="hidden" id="idUser" name="idUser" value="{{usuarios.iduser}}">
                    {% set disabled = 'disabled'%}
                    <div class="form-group required col-xs-12 col-md-12 col-lg-4">
                        <label for="emailIN">{{ 'user.email' | trans }}</label>
                        <input type="text" class="form-control  " required="required"  disabled="true"  name="user[emailIN]" autocomplete="off" id="emailIN" placeholder="Enter Email" value="{{email}}">
                    </div>
                    <div class="form-group required col-xs-12 col-md-12 col-lg-4">
                        <label for="username" class="control-label">{{ 'user.usernanme' | trans }} *</label>
                        <input type="text" class="form-control" id="username" name="user[user]" {{disabled}} autocomplete="off" placeholder="Enter Username" value="{{usuarios.username}}"/> <!--value="{{usuarios.username}}"-->
                    </div>
                    <div class="form-group required col-xs-12 col-md-12 col-lg-4">
                        <label for="exampleInputPassword1"  class="control-label">{{ 'user.password' | trans }}</label>
                        <input type="password" class="form-control" id="password"  name="user[password]" {{disabled}} autocomplete="off" id="exampleInputPassword1" placeholder="Password" value="{{usuarios.password}}"> <!--value="{{usuarios.password}}"-->
                    </div>
                    </div>

                <div class="row">
                    <div class="form-group required col-xs-12 col-md-12 col-lg-3">
                        <label for="nombre"  class="control-label">{{ 'user.name' | trans | upper}} *</label>
						{#
                        {% if idproyectos == 36 and usuarios.name != null %}
                            <input type="text" class="form-control" name="user[name]" id="name" placeholder="Enter Nombres" value="{{ 'SV-F ' ~ usuarios.name | trim }}" >
                        {% elseif idproyectos == 39  and usuarios.name != null %}
                            <input type="text" class="form-control" name="user[name]" id="name" placeholder="Enter Nombres" value="{{ 'NI-F ' ~ usuarios.name | trim }}" >
                        {% elseif idproyectos == 31  and usuarios.name != null %}
                            <input type="text" class="form-control" name="user[name]" id="name" placeholder="Enter Nombres" value="{{ 'GU-F ' ~ usuarios.name | trim }}" >
                        {% else %}
						#}

                            <input type="text" class="form-control" name="user[name]" id="name" placeholder="Enter Nombres" value="{{usuarios.name}}" >
                        {# {% endif %} #}
                    </div>
                    <div class="form-group required col-xs-12 col-md-12 col-lg-3">
                        <label for="cedula">{{ 'user.id' | trans }} *</label>
                        <input type="text" class="form-control " required="required" id="cedula" name="user[cedula]" placeholder="Inserte Documento de Identidad" value="{{usuarios.cedula}}" >
                    </div>
                    {%if is_granted("ROLE_USER_ADMIN")%}

                    {%else%}
                    <div class="form-group col-xs-12 col-md-12 col-lg-3">
                        <label for="fechaNacimiento">{{ 'user.datebirth' | trans}}</label>
                        <div class="input-group form-group date datepicker">
                                <input id="fechaNacimiento" disable name="user[fechaNacimiento]" type='text'  class="form-control" value="" data-date-format="YYYY-MM-DD" value="{{usuarios.fechaNacimiento|date('Y-m-d')}}" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                        </div>

                    </div>
                     <div class="form-group required col-xs-12 col-md-12 col-lg-3">
                        <label for="nombre">{{ 'user.phone' | trans | upper}}</label>
                        <input type="text" id="tlf" class="form-control" name="user[tlf]" id="tlf" placeholder="Enter Telefono" value="{{usuarios.telefono}}" >
                    </div>
                    {% endif %}
                    </div>

                <div class="row">
                    <div class="form-group  col-xs-12 col-md-12 col-lg-4">
                        <label for="idregion">{{ 'ticketDetail.regionCU' | trans }}</label>
                        <select id="idregion" name="user[idregion]">
                            {% for region in regiones%}
                                <option value="{{region.idregion}}">{{region.region}}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group  col-xs-12 col-md-12 col-lg-4">
                        <label for="idestado">{{ 'user.dpto.edo' | trans}}</label>
                        <select id="idestado" name="user[idestado]">
                            <option value=""></option>
                        </select>
                    </div>
                    <div class="form-group  col-xs-12 col-md-12 col-lg-4">
                        <label for="idlocalidad">{{ 'user.loca.project' | trans}}</label>
                        <select id="idlocalidad" name="user[idlocalidad]">
                            <option value=""></option>
                        </select>
                    </div>
                    </div>

                <div class="row">
                    <div class="form-group">
                        <label for="nombre">{{ 'ticketDetail.addressAsp' | trans }}</label>
                        <textarea type="text" class="form-control" name="user[direccion]" id="direccion" placeholder="{{ 'ticketDetail.address' | trans }}" >{{usuarios.direccion}}</textarea>
                    </div>
                    </div>

                {% else %}

                <div class="row">
                    <input type="hidden" id="opc" name="opc" value="0">
                    <input type="hidden" id="idUser" name="idUser" value="">
                    {% set disabled = ''%}
                    <div class="form-group required col-xs-12 col-md-12 col-lg-3">
                        <label for="emailIN">{{ 'user.email' | trans }}</label>
                        <input type="text" class="form-control  " required="required"  disabled="true"  name="user[emailIN]" autocomplete="off" id="emailIN" placeholder="Enter Email" value="{{email}}">
                    </div>
                    <div class="form-group required col-xs-12 col-md-12 col-lg-3">
                        <label for="username" class="control-label">{{ 'user.usernanme' | trans }} *</label>
                        <input type="text" class="form-control " id="username" name="user[user]" {{disabled}} autocomplete="off" placeholder="Enter Username" value="" autocorrect="off" onkeydown="">
                    </div>
                    <div class="form-group required col-xs-12 col-md-12 col-lg-3">
                        <label for="exampleInputPassword1"  class="control-label">{{ 'user.password' | trans }}</label>
                        <input type="password" class="form-control" id="password" disabled="true" name="user[password]" {{disabled}} autocomplete="off" id="exampleInputPassword1" placeholder="Password" value="{{pass}}">
                    </div>
                    </div>

                <div class="row">
                    <div class="form-group required col-xs-12 col-md-12 col-lg-3">
                        <label for="nombre"  class="control-label">{{ 'user.name' | trans }} *</label>
                        <input type="text" class="form-control" name="user[name]" id="name" placeholder="Enter Nombres" value="" >
                    </div>
                    <div class="form-group required col-xs-12 col-md-12 col-lg-3">
                        <label for="cedula">{{ 'user.id' | trans }} *</label>
                        <input type="text" class="form-control " required="required" id="cedula" name="user[cedula]" placeholder="Inserte Documento de Identidad" value="" >
                    </div>
                    {%if is_granted("ROLE_USER_ADMIN")%}

                    {%else%}
                    <div class="form-group col-xs-12 col-md-12 col-lg-3">
                        <label for="fechaNacimiento">{{ 'user.datebirth' | trans}}</label>
                        <div class="input-group form-group date datepicker">
                                <input id="fechaNacimiento" disable name="user[fechaNacimiento]" type='text'  class="form-control" value="" data-date-format="YYYY-MM-DD" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                        </div>

                    </div>
                    <div class="form-group col-xs-12 col-md-12 col-lg-3">
                        <label for="nombre">{{ 'user.phone' | trans}}</label>
                        <input type="text" id="tlf" class="form-control" name="user[tlf]" id="tlf" placeholder="Enter Telefono" value="" >
                    </div>
                    {% endif %}
                    </div>

                <div class="row">
                    <div class="form-group  col-xs-12 col-md-12 col-lg-3">
                        <label for="idregion">REGION/CU</label>
                        <select id="idregion" name="user[idregion]">
                            {% for region in regiones%}
                                <option value="{{region.idregion}}">{{region.region}}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group  col-xs-12 col-md-12 col-lg-3">
                        <label for="idestado">{{ 'user.dpto.edo' | trans}}</label>
                        <select id="idestado" name="user[idestado]">
                            <option value=""></option>
                        </select>
                    </div>
                    <div class="form-group  col-xs-12 col-md-12 col-lg-3">
                        <label for="idlocalidad">{{ 'user.loca.project' | trans}}</label>
                        <select id="idlocalidad" name="user[idlocalidad]">
                            <option value=""></option>
                        </select>
                    </div>
                    </div>

                <div class="row">
                    <div class="form-group">
                        <label for="nombre">{{ 'ticketDetail.addressAsp' | trans}}</label>
                        <textarea type="text" class="form-control" name="user[direccion]" id="direccion" placeholder="{{ 'ticketDetail.address' | trans }}" ></textarea>
                    </div>
                    </div>
                {%endif%}
                 <input type="hidden" name="user[email]" id="email" value="{{email}}">
                 <button type="button" id="next1" onclick="nextUno()" class="btn btn-default center-block btn-warning">{{ 'user.nextdept' | trans}}</button>

            </form>

        </div>

        {% if  proyectosEtiquetas == true %}
        <div class="col-xs-12 col-md-12 col-lg-3 table-bordered ">
            <div class="row">
                <h1>Datos Usuario:</h1>
            </div>
            {% for proyectosEtiqueta in proyectosEtiquetas %}
                <div class="row">
                    <div class="form-group required col-xs-12 col-md-12 col-lg-12">

                            <label>{{ proyectosEtiqueta.etiqueta }}</label>
                            {% if proyectosEtiqueta.type == "selectData" %}
                                <script>
                                    $(function () {
                                        $("#div{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}").load("{{path('cargaSelectDatos',{"idproyectos":idproyectos}) }}", {$idTipoSelectDatos: "{{proyectosEtiqueta.idTipoSelectDatos}}", $idetiquetas: "{{proyectosEtiqueta.idetiquetas}}"},function(){
                                            $("#{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}} option[value='{{proyectosEtiqueta.valor}}']").attr('selected','selected');
                                        });
                                    });
                                </script>
                                <div id="div{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}">
                                    <select class="form-control"  style=" width: 95%;" id="{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}"></select>
                                </div>
                            {% elseif proyectosEtiqueta.type == "text" %}
                                <div id="div{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}">
                                    <input   class="form-control"  type="text" id="{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}" value="{{proyectosEtiqueta.valor}}">
                                </div>
                            {% elseif proyectosEtiqueta.type == "select" %}
                                <script>
                                    $(function () {
                                        $("#div2{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}").load("{{path('cargaEtiquetaSelect',{"idproyectos":idproyectos}) }}", {$idTipoSelectDatos: "{{proyectosEtiqueta.idTipoSelectDatos}}", $idetiquetas: "{{proyectosEtiqueta.idetiquetas}}"},function(){
                                            $("#{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}} option[value='{{proyectosEtiqueta.valor}}']").attr('selected','selected');
                                        });
                                    });
                                </script>
                                <div id="div2{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}">
                                    <select class="form-control" style="width: 95%;" id="{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}"></select>
                                </div>
                            {% elseif proyectosEtiqueta.type == "selectMultiple" %}
                                <script>
                                    $(function () {
                                        $("#div2{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}").load("{{path('cargaEtiquetaSelectMultiple',{"idproyectos":idproyectos}) }}", {$idTipoSelectDatos: "{{proyectosEtiqueta.idTipoSelectDatos}}", $idetiquetas: "{{proyectosEtiqueta.idetiquetas}}"});
                                            $("#{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}} option[value='{{proyectosEtiqueta.valor}}']").attr('selected','selected');
                                    });
                                </script>
                                <div id="div2{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}">
                                    <select class="form-control" style="     width: 95%;" id="{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}" name="div2[]"></select>
                                </div>
                            {% elseif proyectosEtiqueta.type == "datetime" %}
                                <script>
                                    $(function () {
                                        $("#{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}").datetimepicker();
                                    });
                                </script>
                                <div id="div{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}">
                                    <input  class="form-control"  type="text" id="{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}" class="form-control" placeholder="Select end date" value="{{proyectosEtiqueta.valor}}" data-date-format="YYYY-MM-DD HH:mm" >
                                </div>
                            {% elseif proyectosEtiqueta.type == "textarea" %}
                                <td id="div{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}">
                                <textarea style=" width: 90%;" id="{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}"></textarea>
                            {% elseif proyectosEtiqueta.type == "date" %}
                                <script>
                                    $(function () {
                                        $("#{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}").datepicker();
                                    });
                                </script>
                                <div id="div{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}">
                                    <input  class="form-control"  type="text" id="{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}" class="form-control" placeholder="Select end date" value="{{proyectosEtiqueta.valor}}" data-date-format="YYYY-MM-DD HH:mm" >
                                </div>
                            {% elseif proyectosEtiqueta.type == "number" %}
                                <div id="div{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}">
                                    <input type="text"  class="form-control" onkeypress="return permite(event,'num', this.value)" id="{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}"{% if proyectosEtiqueta.valor == false %}value="0"{% else %} value="{{ proyectosEtiqueta.valor }}" {% endif %}>
                                </div>
                            {% elseif proyectosEtiqueta.type == "time" %}
                                <script>
                                    $(function () {
                                        $("#{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}").datetimepicker({
                                            format: 'LT'
                                        });
                                    });
                                </script>
                                <div id="div{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}">
                                    <div class="form-group">
                                        <div class='input-group date'   >
                                            <input  type='text'  id="{{proyectosEtiqueta.type~proyectosEtiqueta.idetiquetas}}" onkeypress= "return noDatos(event, this.value)"  class="form-control"  data-date-format="HH:mm" {% if proyectosEtiqueta.valor == false %}value="00:00"{% else %} value="{{ proyectosEtiqueta.valor }}" {% endif %} />
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

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