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

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

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

            if ($("#multiCargos").prop( "checked") == true)
                $("#idcargos").attr({'multiple':true, size:30});
            else{
                $("#idcargos").removeAttr('multiple size');
                $("#multiCargos").prop( "checked", false );
            }
        });
    });
  
    $("#incluirCargo").click(function(){
      var idroles = $('#idcargos').val();
      
      $.ajax({
        type:"GET",
        async:true,
        url:"{{path('IncluirCargo',{'idproyectos':idproyectos})}}",
        data:{$idcargo: idroles }
      }).done(function(msj){
          $("#cargos").load("{{ path('cargos_proyectos',{'idproyectos':idproyectos})}}");
      });
})

</script> 

        <div class="col-lg-4 col-xs-12   main">
                <div class="form-group">
                        <label>Seleccione Cargo</label>
                        <select class="form-control" id="idcargos">
                            {% for rol in cargos %}
                            <option value="{{ rol.idcargo }}">
                                {{ rol.cargo }}
                            </option>
                                {% endfor %}

                        </select>
                        <input type="checkbox" id="multiCargos">Múltiples Cargos
                </div>
                           
             <button class="btn btn-info" id="incluirCargo" >Incluir</button>
        </div>
                            
        <div class="col-lg-4 col-xs-12   main">
            <div class="form-group">
                    <label>Lista de Cargos Incluidos</label>
                    <div id="listacargos"  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 %}