{% 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 %}
    <script>
        $(function(){
            $('#dialog-alert').dialog('close');
            
        });


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

            return true;
        };

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

        function eliminarRol(iduser, idroles){
        $("#dialog-alert p").text("Are You Sure to Delete the Role?")
        $("#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){
        $("#dialog-alert p").text("Are You Sure to Add the Role?")
        $("#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 });
                        $('#dialog-alert').dialog('close');
                    });
                    $(this).dialog('close');

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


        function cargarCluster(valor){
            if (valor){    
                var data = {};
                data['region'] = valor;  
                $.getJSON('{{path('userllenarSelectCluster',{'idproyectos':idproyectos,'idmodule':idmodule})}}', data, function (data){
                    var registros = data.registros;
                    $("#cluster option").remove(); 
                    $("#country option").remove(); 
                    $("#project option").remove();
                    $("#country").append('<option value="">ALL</option>');
                    $("#project").append('<option value="">ALL</option>');
                    $("#cluster").append('<option value="">ALL</option>');   
                    for (var i = 0; i < registros.length; i++){
                        $("#cluster").append('<option value="' + registros[i]['valor'] + '">' + registros[i]['nombre'] + '</option>');
                    }                           
                });
           }
        }

        function cargarCountry(valor){
            if (valor){    
                var data = {};
                data['region'] = $("#region").val(); 
                data['cluster'] = valor;  
                $.getJSON('{{path('userllenarSelectCountry',{'idproyectos':idproyectos,'idmodule':idmodule})}}', data, function (data){
                    var registros = data.registros;
                    $("#country option").remove(); 
                    $("#project option").remove();
                    $("#country").append('<option value="">ALL</option>');
                    $("#project").append('<option value="">ALL</option>');   
                    for (var i = 0; i < registros.length; i++){
                        $("#country").append('<option value="' + registros[i]['valor'] + '">' + registros[i]['nombre'] + '</option>');
                    }                           
                });
           }
        }

        function cargarProject(valor){
            if (valor){    
                var data = {};
                data['region'] = $("#region").val();
                data['cluster'] = $("#cluster").val();
                data['country'] = valor;  
                $.getJSON('{{path('userllenarSelectProject',{'idproyectos':idproyectos,'idmodule':idmodule})}}', data, function (data){
                    var registros = data.registros;
                    $("#project option").remove(); 
                    $("#project").append('<option value="">ALL</option>');   
                    for (var i = 0; i < registros.length; i++){
                        $("#project").append('<option value="' + registros[i]['valor'] + '">' + registros[i]['nombre'] + '</option>');
                    }                           
                });
           }
        }

        function validateEmail(){
            var regex = /[\w-\.]{2,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/;
            if (regex.test($('#email').val().trim())) {
            }
            else {
                alert('The email address is not valid');
                $('#email').val('')
            }
        }
        </script>
<div class="container-fluid center-block" style="margin: 100px 0 40px 0">

  <div class="col-xs-8 col-md-8 col-md-offset-2 table-bordered  " >
      <br>
      <form name="form1" id="form1"  method="POST" action="{{path('datosPersonalesGeneral',{'idproyectos':idproyectos,'idmodule':idmodule,'iduser':idUser,'tipo': 0,'idproyectosPrincipal':idproyectos})}}">
    
        <div class="row">                                 
            <div class="col-md-3">
                <label>REGION: </label><br>
                <select class="form-control" id="region" name="region" required onchange="cargarCluster(this.value)">
                    <option value="">SELECT</option>
                    {%for region in regiones %}
                        <option value="{{region.valor}}">{{region.nombre}}</option>
                    {%endfor%}
                </select>
            </div>
            <div class="col-md-3">
                <label>CLUSTER: </label><br>
                <select class="form-control" id="cluster" name="cluster" required onchange="cargarCountry(this.value)">
                    <option value="">SELECT</option>                    
                </select>
            </div>
            <div class="col-md-3">
                <label>COUNTRY: </label><br>
                <select class="form-control" id="country" name="country" required onchange="cargarProject(this.value)">
                    <option value="">SELECT</option>                    
                </select>
            </div>
            <div class="col-md-3">
                <label>PROJECT: </label><br>
                <select class="form-control" id="project" name="project" required>
                    <option value="">SELECT</option>
                </select>
            </div>
        </div>
        <div class="row" style="margin-top: 16px;">                                 
            <div class="col-md-12">
                <input type="text" name="email" id="email" class="form-control" placeholder="{{ 'user.email' | trans }}" required value="{{user.email}}" readonly>
            </div>
        </div>
        <div class="row" style="margin-top: 16px;">    
            <button type="submit" class="btn btn-info col-md-offset-6">{{ 'Validar' | trans }}</button>
        </div>
      <br>
      <br>
      </form>
  </div>
    <br>
  <div id="datosPersonales"></div>
  </div>
{%endblock%}