<div class="col-md-5">
    <div class="box box-info">
        <div class="box-header with-border bg-aqua">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                <input type="text" id="filtroArbol" class="form-control" placeholder="Buscar..">
              </div>
        </div>
        <div class="box-body">
            <div  id="arbolDelPlan" style="text-transform:uppercase;">
                <ul>
                    <li>{{Plan.planCODIGO}} - $ {{ Plan.Total.TOTAL|number_format}}
                        <ul>
                            {% for tipoPlan in Plan.PlanesTipos %}
                                <li  tipoPlanID="{{tipoPlan.tipoPlanID}}" codigo="tipoPlanID" value="{{tipoPlan.tipoPlanID}}" >{{tipoPlan.tipoPlanTITULO}} - $ {{tipoPlan.Total.TOTAL|number_format}}
                                    <ul>
                                        {% for programa in tipoPlan.Programas %}
                                            <li value="{{programa.programaID}}" codigo="programaID" tipoPlanID="{{tipoPlan.tipoPlanID}}">{{programa.programaTITULO}} - $ {{programa.Total.TOTAL|number_format}}
                                                <ul>
                                                    {% for accion in programa.Acciones %}
                                                        <li value="{{accion.accionID}}" codigo="accionID" tipoPlanID="{{tipoPlan.tipoPlanID}}">{{accion.accionTITULO}} - $ {{accion.Total.TOTAL|number_format}}
                                                            <ul>
                                                                {% for actividad in accion.Actividades %}
                                                                    <li value="{{actividad.actividadID}}" codigo="actividadID" tipoPlanID="{{tipoPlan.tipoPlanID}}">{{actividad.actividadTITULO}} - $ {{actividad.Total.TOTAL|number_format}}</li>
                                                                {% endfor %}
                                                            </ul>
                                                        </li>
                                                    {% endfor %}
                                                    <li>Personal Asignado
                                                        <ul>
                                                            <li>xxxxx</li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </li>
                            {% endfor %}
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="col-md-7">
    <div class="box box-info">
        <div class="box-header with-border bg-aqua">
            <h3 class="box-title" id="tituloDetalles">Detalles:</h3>
        </div>
        <div class="box-body">
            <div id="div-descripcionSeleccion-{{hash_vista}}"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        
        /*$('#arbolDelPlan').treeview({
            data: generarArbol(),
            selectedBackColor: '#00c0ef'
        });
        
        $('#arbolDelPlan').on('nodeSelected', function(event, data) {
            var codigo = data.codigo;
            var valor = data.value;
            var tipoPlanID = data.tipoPlanID;
            verificarSeleccion(codigo,valor,tipoPlanID);
        });
        
        $('#filtroArbol').keyup(function () {
            $('#arbolDelPlan').treeview('collapseAll', { silent: true });
            var palabra = $('#filtroArbol').val();
            $('#arbolDelPlan').treeview('search', [ palabra, {
              ignoreCase: true,     // case insensitive
              exactMatch: false,    // like or equals
              revealResults: true,  // reveal matching nodes
            }]);
        });*/
        
        $('#arbolDelPlan').jstree({
            "plugins" : [ "wholerow", "search" ],
            "core" : { 
                "multiple" : false
            }
        });
        
        $('#filtroArbol').keyup(function () {
            var palabra = $('#filtroArbol').val();
            $('#arbolDelPlan').jstree(true).search(palabra);
        });
    
        $('#arbolDelPlan').on('changed.jstree', function (e, data) {
            var i, j;
            for(i = 0, j = data.selected.length; i < j; i++) {
                seleccion = data.instance.get_node(data.selected[i]);
            }
            var codigo = seleccion.li_attr.codigo;
            var valor = seleccion.li_attr.value;
            var tipoPlanID = seleccion.li_attr.tipoplanid;
            verificarSeleccion(codigo,valor,tipoPlanID);
        }).jstree();   
        
    });
        
    function verificarSeleccion(codigo,valor,tipoPlanID){
        switch (codigo) {
            case "programaID":
                cargarDescripcionPrograma_{{hash_vista}}(valor,tipoPlanID); 
                break;
            case "accionID":
                cargarDescripcionAcccion_{{hash_vista}}(valor,tipoPlanID);  
                break;
            case "actividadID":
                cargarDescripcionActividad_{{hash_vista}}(valor,tipoPlanID); 
                break;
            default:
                alert("NO HAY VISTA PARA LA OPCION SELECCIONADA");
        }
        
    }    
    
    function generarArbol() {
      var arbol = [
                  {
                    codigo: "{{Plan.planID}}",
                    text: "{{Plan.planCODIGO}} - $ {{Plan.Total.TOTAL|number_format}}",
                    nodes: [
                      {% for tipoPlan in Plan.PlanesTipos %}
                      {
                        tipoPlanID: "{{tipoPlan.tipoPlanID}}",
                        codigo: "tipoPlanID",
                        value: "{{tipoPlan.tipoPlanID}}",
                        text: "{{tipoPlan.tipoPlanTITULO}} - $ {{tipoPlan.Total.TOTAL|number_format}}",
                        nodes: [
                        {% for programa in tipoPlan.Programas %}
                          {
                            tipoPlanID: "{{tipoPlan.tipoPlanID}}",
                            codigo: "programaID",
                            value: "{{programa.programaID}}",
                            text: "{{programa.programaTITULO}} - $ {{programa.Total.TOTAL|number_format}}",
                            nodes: [
                                    {% for accion in programa.Acciones %}
                                      {
                                        tipoPlanID: "{{tipoPlan.tipoPlanID}}",
                                        codigo: "accionID",
                                        value: "{{accion.accionID}}",
                                        text: "{{accion.accionTITULO}} - $ {{accion.Total.TOTAL|number_format}}",
                                        nodes: [
                                                {% for actividad in accion.Actividades %}
                                                  {
                                                    tipoPlanID: "{{tipoPlan.tipoPlanID}}",
                                                    codigo: "actividadID",
                                                    value: "{{actividad.actividadID}}",
                                                    text: "{{actividad.actividadTITULO}} - $ {{actividad.Total.TOTAL|number_format}}",
                                                  }
                                                  {% if not loop.last %} ,{% endif%}
                                               {% endfor %}
                                                ]
                                      },
                                      {% endfor %}
                                      {
                                          text: "Personal Asignado",
                                          nodes: [
                                                  {
                                                    text: "xxxxxx"
                                                  }
                                                ]}
                                    ]
                          }
                          {% if not loop.last %} ,{% endif%}
                          {% endfor %}
                        ]
                      }
                      {% if not loop.last %} ,{% endif%}
                      {% endfor %}
                    ]
                  }
                ];
      return arbol;
    }

    function cargarDescripcionAcccion_{{hash_vista}}(accionID,tipoPlanID) {
        cargarDivisionSicam("div-descripcionSeleccion-{{hash_vista}}", "planeador", "Acciones", "detallesAccion","accionID="+accionID+"&tipoPlanID="+tipoPlanID+"&hash_padre={{hash_vista}}");
        $("#tituloDetalles").text("Detalles Programa / Acción:");
    }
    
    function cargarDescripcionActividad_{{hash_vista}}(actividadID,tipoPlanID) {
        cargarDivisionSicam("div-descripcionSeleccion-{{hash_vista}}", "planeador", "Actividades", "detallesActividad","actividadID="+actividadID+"&tipoPlanID="+tipoPlanID+"&hash_padre={{hash_vista}}");
        $("#tituloDetalles").text("Detalles Programa / Acción / Actividad:");
    }
    
    function cargarDescripcionPrograma_{{hash_vista}}(programaID,tipoPlanID) {
        cargarDivisionSicam("div-descripcionSeleccion-{{hash_vista}}", "planeador", "PlanesProgramas", "detallesPrograma","programaID="+programaID+"&tipoPlanID="+tipoPlanID+"&hash_padre={{hash_vista}}");
        $("#tituloDetalles").text("Detalles Programa:");
    }

    function registrarAvance_{{hash_vista}}(planOperacionID,tipoPlanID,actividadID) {
        cargarDivisionSicam("div-descripcionSeleccion-{{hash_vista}}", "planeador", "PlanesOperaciones", "mostrarFormularioAvance","planOperacionID="+planOperacionID+"&tipoPlanID="+tipoPlanID+"&hash_padre={{hash_vista}}");
        $("#tituloDetalles").text("Avance Operación:");
    }
    
    /*function registrarAvance_{{hash_vista}}(planOperacionID,tipoPlanID,actividadID) {
         ejecutarOperacion(
                    "planeador",
                    "PlanesOperaciones",
                    "verificarAvance",
                    "actividadID="+actividadID+"&tipoPlanID="+tipoPlanID+"&planOperacionID="+planOperacionID, function(){
                        cargarDivisionSicam("div-descripcionSeleccion-{{hash_vista}}", "planeador", "PlanesOperaciones", "mostrarFormularioAvance","planOperacionID="+planOperacionID+"&tipoPlanID="+tipoPlanID+"&hash_padre={{hash_vista}}");
                        $("#tituloDetalles").text("Avance Operación:");
                    }
            );
    }*/
    
</script>