<form id="formgestionActividadesPredefinidas" name="formgestionActividadesPredefinidas" >
<div class="row">
    <!-- left column -->
    <div class="col-md-12">
        <!-- general form elements -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">Actividades Predefinidas</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
                <div class="box-body">
                        <div class="row">  
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="codigo">Código</label>
                                    <input value="{{objActividadPred.tipoActividadID}}"  type="hidden"  id="actividadPreconfiguradaID" name="actividadPreconfiguradaID" >
                                    <input value="{{objActividadPred.tipoActividadCODIGO}}" readonly type="text" class="form-control" id="codigo" name="codigo" placeholder="Código Automático">
                                </div>
                                <div class="form-group">
                                    <label for="titulo">Título</label>
                                    <input value="{{objActividadPred.tipoActividadTITULO}}" type="text" required class="form-control" id="titulo" name="titulo" placeholder="Título">
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="form-group">
                                    <label for="descripcion">Descripción</label>
                                    <textarea  required id="descripcion" name="descripcion" class="form-control" rows="3" placeholder="Descripción ...">{{objActividadPred.tipoActividadDESCRIPCION}}</textarea>                  
                                </div>
                            </div>
                        </div>         
        
                        <div class="row">  
                            <div class="col-md-4">
                                 <div class="form-group">
                                    <label>Operaciones Predefinidas</label>
        <select multiple class="form-control" name="operacionP" id="operacionP">
                {% for operacionP in operacionesPredefinidas  %}
                                        <option value="{{ operacionP.operacionPredefinidaID }}">{{ operacionP.operacionPredefinidaTITULO }}</option>
                                        {% endfor %}                  
        </select>    
        </div>
                            </div>
                            <div class="col-md-8">
 <div class="box">
            <div class="box-header">
              <h3 class="box-title">Operaciones de la Actividad Preconfigurada</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body no-padding">
              <table class="table table-striped">
                <thead><tr>
                  <th>Operación</th>
                  <th>Quitar</th>
                  </thead>
                <tbody id="tblcc">
                    {% if objOperacionesAct %}
            {% for operacion in objOperacionesAct %}            
                <tr> <input value="{{operacion.operacionPredefinidaID}}" type="hidden"  id="checkb~{{operacion.operacionPredefinidaID}} +'" name="checkb[]"> <td>{{operacion.operacionPredefinidaTITULO}}</td><td><button type="button" class="borrar btn btn-danger btn-xs">X</button></td></tr>    
            {% endfor %}
             {% endif %}
              </tbody></table>
            </div>
            <!-- /.box-body -->
          </div>
 </div>
                            </div>
                        </div>         
                </div>
                <div class="box-footer">
                    <button type="submit" class="btn btn-primary" id="btn_registro" name="btn_registro">Aceptar</button>
                    <button type="reset" class="btn btn-warning">Cancelar</button>
                </div>
        </div>
    </div>
</div>
</form>
<script type="text/javascript">

    $(document).ready(function () {
         //$('.js-example-basic-single').select2();
    
        $("#operacionP option").click(function () {
            var valor = $(this).attr("value");
            var texto = $( "#operacionP option:selected").text();
            var lista ='<tr> <input value="' + valor + '" type="hidden"  id="checkb'+valor +'" name="checkb[]"> <td>'+ texto +'</td><td><button type="button" class="borrar btn btn-danger btn-xs">X</button></td></tr>';
            $( "#tblcc").append(lista);
        });

$(document).on('click', '.borrar', function (event) {
    event.preventDefault();
    $(this).closest('tr').remove();
});
   
    $("#formgestionActividadesPredefinidas").submit(function(event){
      //event.preventDefault();
      //alert($("#formgestionActividadesPredefinidas").serialize());
      registrarOperacion();
      //event.preventDefault();
    });

    function registrarOperacion() {
        
        ejecutarOperacion(
                "planeador",
                "ActividadesPreconfiguradas",
                "registrar",
                $("#formgestionActividadesPredefinidas").serialize(),
                function (response) {
                   // console.log(response);
                   // alert(response + "   -  Operación creada con Exito!");
                        $("#formgestionActividadesPredefinidas")[0].reset();

                }
        );
    }
   
    });

   
</script>