@csrf
<div class="card-body">
    <input type="hidden" class="form-control" id="id" name="id" required value="{{ $object->id ?? old('id') }}">
    <input type="hidden" class="form-control" id="modules" name="modules" required value="{{ $modules ?? old('modules') }}">
    <input type="hidden" class="form-control" id="selectedModules" name="selectedModules" required value="{{ $selectedModules ?? old('selectedModules') }}">
    <div class="row">
        <div class="col-6 col-md-6">
            <div class="form-group">
                <label for="name">{{ Lang::get('messages.roles_permissions.tag1') }} </label>
                <input type="text" class="form-control" maxlength="100" name="name" required value="{{ $object->name ?? old('name') }}">
            </div>
        </div>
        <div class="col-6 col-md-6">
            <div class="form-group">
                <label for="route">{{ Lang::get('messages.roles_permissions.tag2') }} {{ Lang::get('messages.optional') }}</label>
                <input type="text" class="form-control" maxlength="100" name="route" value="{{ $object->route ?? old('route') }}">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-6 col-md-6">
            <div class="form-group">
                <label for="term_id">Selecciona un término:</label>
                <select name="term_id" id="term_id" class="form-control">
                    <option value="" disabled {{ !isset($object->role_terms) || $object->role_terms->isEmpty() ? 'selected' : '' }}>Seleccionar</option>
                    @foreach ($terms as $id => $version)
                        <option value="{{ $id }}" 
                            {{ isset($object->role_terms) && $object->role_terms->contains('term_id', $id) ? 'selected' : '' }}>
                            {{ $version }}
                        </option>
                    @endforeach
                </select>

            </div>
        </div>
    </div>    
    <div class="row">
        <div class="col-12 col-md-12">
            <div class="form-group">
                <label for="name">{{ Lang::get('messages.roles_permissions.tag3') }} </label>
                <div class="well" style="background-color: transparent !important">
                    <div id="tree"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/crud.js') . '?v=' . time() }}"></script>
<script src="{{ asset('js/roles_permissions.js') . '?v=' . time() }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/js/bootstrap-treeview.js"></script>
<script>
    let tree = $('#tree');
    let modules = $("#modules").val();
    let selectedModules = $("#selectedModules").val();
    selectedModules = selectedModules ? JSON.parse(selectedModules) : []

    function _getChildren(node) {
        if (node.nodes === undefined) return [];
        var childrenNodes = node.nodes;
        node.nodes.forEach(function(n) {
            childrenNodes = childrenNodes.concat(_getChildren(n));
        });
        return childrenNodes;
    }

    function _getParent(parentNodes, node) {
        if (node === undefined) return [];
        if (node.parentId !== undefined) {
            node = tree.treeview('getParent', node);
            parentNodes.push(node);
            return _getParent(parentNodes, node);
        }

        parentNodes.push(node);
        return parentNodes;
    }

    var selected = [];
    tree.treeview({
        selectable: true,
        multiSelect: true,
        highlightSelected: false,
        showBorder: false,
        showCheckbox: true,
        levels: 1,
        checkedIcon: 'fa fa-check-square-o',
        uncheckedIcon: 'fa fa-square-o',
        expandIcon: 'fa fa-plus',
        collapseIcon: 'fa fa-minus',
        data: JSON.parse(modules)
    }).on('nodeChecked', function(event, node) {
        selectedModules.push(node.id);

        var parentNodes = _getParent([], node);
        parentNodes = parentNodes.filter((item, index) => {
            return parentNodes.indexOf(item) === index;
        });
        $(parentNodes).each(function() {
            selectedModules.push(this.id);
            tree.treeview('checkNode', [this.nodeId, {
                silent: true
            }]);
        });

        var childrenNodes = _getChildren(node);
        childrenNodes = childrenNodes.filter((item, index) => {
            return childrenNodes.indexOf(item) === index;
        });
        $(childrenNodes).each(function() {
            selectedModules.push(this.id);
            tree.treeview('checkNode', [this.nodeId, {
                silent: true
            }]);
        });
        assignModules();
    }).on('nodeUnchecked', function(event, node) {
        selectedModules = selectedModules.filter((item) => {
            return item !== node.id;
        });

        var parentNodes = _getParent([], node);
        parentNodes = parentNodes.filter((item, index) => {
            return parentNodes.indexOf(item) === index;
        });
        $(parentNodes).each(function() {
            let childrenActiveNodes = this.nodes.reduce((acumulador, actual) => acumulador + actual.state.checked, 0);
            if (!childrenActiveNodes) {
                selectedModules = selectedModules.filter((item) => {
                    return item !== this.id;
                });
                tree.treeview('uncheckNode', [this.nodeId, {
                    silent: true
                }]);
            }
        });

        var childrenNodes = _getChildren(node);
        childrenNodes = childrenNodes.filter((item, index) => {
            return childrenNodes.indexOf(item) === index;
        });
        $(childrenNodes).each(function() {
            selectedModules = selectedModules.filter((item) => {
                return item !== this.id;
            });
            tree.treeview('uncheckNode', [this.nodeId, {
                silent: true
            }]);
        });

        assignModules();
    });

    let nodes = $('#tree').data('treeview').getCollapsed();
    selectedModules.map(function(item) {
        let node = nodes.find(function(itemNode) {
            return itemNode.id == item;
        });
        if (node) {
            tree.treeview('checkNode', [node.nodeId, {
                silent: true
            }]);
        }
    });

    // Se elimina input con data de modulos para no enviar en formulario
    var element = document.getElementById("modules");
    element.parentNode.removeChild(element);
    assignModules(false);

    // Función para asignar los modulos seleccionados al input que se va enviar en el formulario
    function assignModules(order = true) {
        if (order) {
            selectedModules = [...new Set(selectedModules)];
            let checkNodes = selectedModules.map(function(item) {
                return nodes.find(function(itemNode) {
                    return itemNode.id == item;
                });
            });
            selectedModules = checkNodes.sort(function(a, b) {
                return a.nodeId - b.nodeId;
            }).map(function(item) {
                return item && item.id;
            });
            selectedModules = selectedModules.filter((item, index) => {
                return selectedModules.indexOf(item) === index;
            });
        }
        $("#selectedModules").val(selectedModules);
    }
</script>