<style>
    .TreeItem{
        display:inline-block;
        cursor:default();
    }
    .TreeItem > .AddButton{
        position:relative;
        top:1px;
        cursor:pointer;
        margin:0 5px;
         font-size:18px;
         -webkit-transition:opacity 0.2s linear;
        -moz-transition:opacity 0.2s linear;
        transition:opacity 0.2s linear;
    }
    .TreeItem:hover > .AddButton{
        opacity:1;
        visibility:visible;
        color: #ed9421;

    }
    .dynatree-exp-cd span.dynatree-expander,.dynatree-exp-cdl span.dynatree-expander {
        background-position: 0 !important ;
        margin-top:-4px;
    }
</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"/>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"> <?php print $title; ?></div>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <?php if ($permissions->hasPermission('add_subscription_block')) { ?>
            <div class="row">
                <div class="col-md-1">
                    <button class="btn btn-primary full-width" id="add_subscription_block"><?php echo CommonLanguage::getMessage('add') ?></button>
                </div>
            </div>
            <?php } ?>
            <div class="row">
                <div id="check-tree"></div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="subscription_block_modal" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i>
                </button>
                <h5 class="add-label bold hidden h-labels"><?php echo CommonLanguage::getMessage('add_subscription_block'); ?></h5>
                <h5 class="edit-label bold hidden h-labels"><?php echo CommonLanguage::getMessage('edit_subscription_block'); ?></h5>
            </div>
            <div class="modal-body">
                <form id="subscription_block_form" method="POST" onsubmit="return false">
                    <input type='hidden' name='block_id' id='block_id'/>
                    <input type='hidden' name='parent_id' id='parent_id'/>
                    <div class="row">
                        <?php echo Forms::AlertDiv('subscription_block_alert'); ?>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-12 m-t-10">
                            <label><?php echo CommonLanguage::getMessage('block_name'); ?></label> 
                            <span class="red-star">*</span>
                            <input type="text"  placeholder="<?php print CommonLanguage::getMessage('block_name'); ?>" id="block_name" name="block_name" class="form-control " required>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button class="btn btn-primary" id="submit_subscription_block"><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
            <?php echo Forms::ModalLoader('subscription_block_loader'); ?>
        </div>
    </div>
</div>
<script>
    var ExpandAfterReloading = "",
        add_block_perm = <?php  echo json_encode($permissions->hasPermission('add_subscription_block'));?>,
        edit_block_perm = <?php  echo json_encode($permissions->hasPermission('edit_subscription_block'));?>;
        delete_block_perm = <?php  echo json_encode($permissions->hasPermission('delete_subscription_block'));?>;
        $(function () {
            //        check_block_used(parent_id,function(data){
            //            if(data == 0){
            //                toastr.error('< ?php echo CommonLanguage::getMessage('unable_add_child_job');?>')
            //                return;
            //            }
            //        });
            $("#check-tree").dynatree({
                title: "",
                checkbox: false,
                selectMode: 3,
                keyboard: false,
                fx: {height: "toggle", duration: 200},
                autoFocus: false,
                initAjax: {
                    url: "InventoryAjax/get_subscription_block_tree?cmd=fetch&id=0",
                },
                onPostInit: function (isReloading, isError) {
                },
                onActivate: function (node) {
                },
                onCreate: function (dtnode, nodeSpan) {
                    if (dtnode.data.DontShow == "yes")
                        dtnode.li.style.display = "none";
                },
                onCustomRender: function (node) {
                    return "<div class='TreeItem'   MyId='" + node.data.block_id + "' MyParent='" + node.data.parent_id + "'  MyName='" + node.data.block_name + "'>"+ node.data.block_name +(add_block_perm ? 
                    "<span onclick='AddNewItem(this)' data-id = '" + node.data.block_id + "' class='AddButton fa fa-plus-circle'></span>" : "")+(edit_block_perm ? "<span onclick='EditItem(this)' class='AddButton fa fa-pencil-square-o'></span>" : "")+(delete_block_perm ? "<span onclick='RemoveNewItem(this)' data-id = '" + node.data.block_id + "' class='AddButton fa fa-minus-circle' style='margin:0'></span>" : "")+"</div>";
                },
                onRender: function (node, nodeSpan) {
                    //                if (node.data.Account_Status == 1) {
                    //                    node.select()
                    //                    $(nodeSpan).find(".TreeItem").addClass("OriginallyChecked")
                    //                } else {
                    //                    if (node.data.Account_Status == 2) {
                    //                        setTimeout(function () {
                    //                            $(nodeSpan).addClass("dynatree-partsel")
                    //                        }, 100)
                    //                    } else {
                    //                        $(nodeSpan).find(".TreeItem").addClass("OriginallyUnChecked")
                    //                    }
                    //                }
                },
                onLazyRead: function (node) {
                    node.appendAjax({
                        url: "InventoryAjax/get_subscription_block_tree?cmd=fetch&id=" + node.data.block_id,
                        debugLazyDelay: 750
                    });
                }
            });
            window.PageTreeObject = $("#check-tree").dynatree("getTree");
            $("#add_subscription_block").on("click", function () {
                AddNewItem();
            });
            $("#submit_subscription_block").on("click", function () {
                if (!$("#subscription_block_form").valid())
                    return;
                $("#subscription_block_loader").removeClass('hidden');
                var Data = new FormData(document.getElementById("subscription_block_form"));
                $.ajax({
                    url: "InventoryAjax/submit_subscription_block",
                    method: "POST",
                    data: Data,
                    processData: false,
                    contentType: false,
                    dataType: "JSON",
                    complete: function (jqXHR, status) {
                        if (status == 'success') {
                            if (jqXHR.responseJSON[1] == "success") {
                                if ($("#parent_id").val() == 0) {
                                    window.PageTreeObject.reload();
                                } else {
                                    refresh_node($("#parent_id").val());
                                }
                                hideModalAlert('subscription_block_modal', 'subscription_block_alert');
                            }
                            AddAlert("#subscription_block_alert", jqXHR.responseJSON[0], jqXHR.responseJSON[1]);
                        }
                        $("#subscription_block_loader").addClass('hidden');
                    }
                });
            });
        });
    function AddNewItem(node) {
        var parent_id = node == undefined ? 0 : $(node).attr("data-id");
        $("#parent_id").val(parent_id)
        $("#block_id").val(0);
        $('#subscription_block_modal .add-label').removeClass('hidden');
        $("#subscription_block_modal").modal("show")
    }
    function RemoveNewItem(div){
        var block_id = $(div).attr('data-id');
        IncludeDeleteModal(common_delete_modal, {entry_value: block_id}, function () {
            $(div).closest('li').remove();

        }, "InventoryAjax/delete_subscription_block");
    }
    function refresh_node(node_id) {
        ExpandAfterReloading = node_id;
        var Completed = function () {
            if (ExpandAfterReloading != "") {
                PageTreeObject.getNodeByKey(ExpandAfterReloading).expand()
                ExpandAfterReloading = "";
                $("#ModalDisabler").hide();
            }
        }
        PageTreeObject.getNodeByKey(ExpandAfterReloading).appendAjax({
            url: "InventoryAjax/get_subscription_block_tree?cmd=fetch&id=" + node_id,
            debugLazyDelay: 750,
            success: function () {
                Completed();
            },
            error: function () {
                Completed();
            }
        });
    }
    function EditItem(node) {
        var current_name = $(node).parent().attr("myname"),
            current_id = $(node).parent().attr("myid"),
            parent_id = $(node).parent().attr("myparent");
        $('#subscription_block_modal .edit-label').removeClass('hidden');
        $("#block_id").val(current_id);
        $("#parent_id").val(parent_id);
        $("#block_name").val(current_name);
        $("#subscription_block_modal").modal("show")
    }
</script>
