{%block dashboard %}
<script>
  
    $(function(){
        $('#listadepartamentos').html('<img class="loading" width="16" src="{{asset('loadings/spin.GIF')}}" />');

        $('#listadepartamentos').load('{{path("ListadepartamentosxProyecto",{'idproyectos':idproyectos})}}',{},function(){
            $(".loading").hide();
        });        

        $("#multiDepartamentos").click(function(){

            if ($("#multiDepartamentos").prop( "checked") == true)
                $("#iddepartamentos").attr({'multiple':true, size:30});
            else{
                $("#iddepartamentos").removeAttr('multiple size');
                $("#multiDepartamentos").prop( "checked", false );
            }
        });
    });
  
    $("#incluirDepartamento").click(function(){
      var idroles = $('#iddepartamentos').val();
      
      $.ajax({
        type:"GET",
        async:true,
        url:"{{path('IncluirDepartamento',{'idproyectos':idproyectos})}}",
        data:{$iddepartamento: idroles }
      }).done(function(msj){
          $("#areas").load("{{ path('departamentos_proyectos',{'idproyectos':idproyectos})}}");
      });
})

</script> 

        <div class="col-lg-4 col-xs-12   main">
                <div class="form-group">
                        <label>Seleccione Área</label>
                        <select class="form-control" id="iddepartamentos">
                            {% for rol in departamentos %}
                            <option value="{{ rol.iddepartamento }}">
                                {{ rol.departamento }}
                            </option>
                                {% endfor %}

                        </select>
                        <input type="checkbox" id="multiDepartamentos">Múltiples Áreas
                </div>
                           
             <button class="btn btn-info" id="incluirDepartamento" >Incluir</button>
        </div>
                            
        <div class="col-lg-4 col-xs-12   main">
            <div class="form-group">
                    <label>Lista de Áreas Incluidas</label>
                    <div id="listadepartamentos"  class=" table-bordered" style="   height: 150px;  overflow-y: scroll; "></div>
             </div>
        </div>                            
    <div class=" col-xs-12 col-lg-12 col-md-12" id="confiProyectos"></div>
{% endblock %}