<style>
    ul >li{

        list-style: none;
    }
    .dynatree-partsel span.dynatree-checkbox:before,.dynatree-selected span.dynatree-checkbox:before{
        border-color: #4c0870 !important;
        background-color: #4c0870 !important;
    }
    .Hidden {
        display: none !important;

    }

</style>




<script src=" <?php echo THEME_PATH; ?>/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="<?php echo THEME_PATH; ?>/plugins/jquery-dynatree/jquery.dynatree.min.js" type="text/javascript"></script>
<link href="<?php echo THEME_PATH; ?>/plugins/jquery-dynatree/skin/ui.dynatree.css" rel="stylesheet" type="text/css" media="screen"/>




<!-- ROLE PERMISSION Modal -->
<div class="modal fade DontReset" tabindex="-1" role="dialog" aria-labelledby="create-role-modal" id="roles-permission" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel"><?php print CommonLanguage::getMessage('assign_permissions'); ?></h4>
            <div id="PermissionAlert"></div>
            </div>
            <div class="modal-body">
                <div class="panel-body">
                    <?php
                    if (empty($roles)):
                        echo Alert::display_alert('warning', CommonLanguage::getMessage('no_access_level'));
                    else:
                        ?>
                        <h4 class="no-m m-b-sm"><?php print CommonLanguage::getMessage('select_access_level'); ?></h4>
                        <select id="Role_ID" class="js-states form-control" name ="Role_ID" tabindex="-1" style="width: 100%" >
                            <option value=" "  disabled="disabled"selected = "selected"><?php print CommonLanguage::getMessage('select_access_level'); ?></option>
                            <?php foreach ($roles as $Role) : ?>
                                <option value="<?php echo $Role['Role_ID']; ?>"><?php echo $Role['Role_Name']; ?></option>
                            <?php endforeach;
                        endif; ?>
                    </select>
                    <div class="Hidden" id="DataTree">
                        <div role="tabpanel">
                            <!-- Nav tabs -->

                            <ul class="nav nav-tabs nav-tabs-simple" role="tablist">
                                <?php
                                for ($i = 0; $i < count($parentPermissions); $i++) {
                                    ?>
                                    <li role="presentation" <?php if ($i == 0) echo 'class="active"'; ?> ><a href="#tab<?php echo ($i + 1); ?>" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false"><?php echo $parentPermissions[$i]['Permission_Text']; ?></a></li>
<?php } ?>
                            </ul>      
                        </div>

                        <!-- Tab panes -->
                        <div class="tab-content">
<?php for ($j = 0; $j < count($parentPermissions); $j++) { ?>
                                <div role="tabpanel" <?php if ($j == 0) echo 'class="tab-pane active"';
    else echo 'class="tab-pane"'; ?> id="tab<?php echo ($j + 1); ?>">

                                    <div class="tree" >
                                        <?php
                                        $Parent_ID = $parentPermissions[$j]['Permission_ID'];
                                        echo $permissionObj->printArrayList($permissionObj->buildArrayList(array($permissionObj->getRootParents()[$j])));
                                        ?>
                                    </div>

                                </div>
<?php } ?>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button class="btn btn-success" id = "addPermissions" ><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
        </div>
    </div>
</div>
<!-- End of Modal -->

<script>

var Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
            Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>;
    $("#addPermissions").on("click", function () {

        var Data = {Per:[]};
        Data['Role_ID'] = $('#Role_ID').val();



        var i = 0;
        $(".tree").each(function () {
            var tree = $(this).dynatree("getTree");
            var selectedNodes = tree.getSelectedNodes(false);
            for (var j = 0; j < selectedNodes.length; i++, j++) {
                Data.Per[i] = selectedNodes[j].data.key;
            }
        });
        $.ajax({
            url: 'xhr/ajaxAssignPermissionsRequest?type=assign',
            data: Data,
            dataType:"JSON",
            method: "POST",
            complete: function (v1, v2) {
                if (v2 == 'success' && v1.responseJSON == "OK") {

                    $("#PermissionAlert").attr("class","alert alert-success").html(Submitted_Successfully).show()
                    setTimeout(function(){$("#roles-permission").modal("hide")},10000)
                } else {
                    $("#PermissionAlert").attr("class","alert alert-danger").html(Failed_Submit).show()
                }
            }
        });

    });

    $(".tree").dynatree({
        checkbox: true,
        selectMode: 2,
        keyboard: false,
        minExpandLevel: 2,
        fx: {height: "toggle", duration: 200},
        autoFocus: false,
        onSelect: function (flag, node) {
            if (flag) {
                var parent = node.getParent();
                if (parent != null) {
                    node.getParent().select(true);
                }
            } else if (!flag) {
                var children = node.getChildren();
                if (children != null) {
                    for (var i = 0; i < children.length; i++) {
                        children[i].select(false);
                    }
                }
            }
        }
    });





    $('#Role_ID').on("change", function () {
        //this jquery call unselects all nodes
        $("#DataTree").removeClass('Hidden');
        $(".tree").each(function () {
            var tree = $(this).dynatree("getTree");
            var rootNode = tree.getRoot();
            rootNode.select(false);
        });
        $.ajax({
            url: 'xhr/ajaxAssignPermissionsRequest?type=fetch&id=' + $(this).val(),
            complete: function (v1, v2) {
                var perms = $.parseJSON(v1.responseText);
                for (var i = 0; i < perms.length; i++) {
                    $(".tree").each(function () {
                        var tree = $(this).dynatree("getTree");
                        var node = tree.getNodeByKey(perms[i]);
                        if (node != null) {
                            node.select(true);
                            return;
                        }
                    });
                }
            }
        });
    });





</script>


