@model Pectra.DG.Models.TreeViewModels
@{
    ViewBag.Title = Pectra.DG.App_GlobalResources.General.Documentation;
}

@section Menu {
    @Scripts.Render("~/Scripts/Documentation/menu")
}
@Styles.Render("~/AdminLTE/plugins/icheck/css")
@Styles.Render("~/Styles/Elements/General")

<div class="modal fade" id="msgProcessing" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content" style="background-color:transparent; -webkit-box-shadow: none;
                            -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none;">
            <div class="modal-body" style="text-align:center;">
                <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
                <span class="sr-only">@Pectra.DG.App_GlobalResources.General.Processing</span>
            </div>
        </div>
    </div>
</div>

@if (Model != null && Model.TreeViews.Count == 0)
{
    <div class="">
        <div class="error-content">
            <h5><i class="fa fa-warning text-yellow"></i> @Pectra.DG.App_GlobalResources.General.NoBAM</h5>
        </div>
    </div>
}

<div class="row">
    <div id="processesinbox" class="col-md-3">
        <div class="form-group has-feedback" style="margin-bottom:8px;">
            <div class="clearable-with-left-icon">
                <input id="treeViewSearchBPDoc" type="text" class="form-control" placeholder="@Pectra.DG.App_GlobalResources.General.FilterBusinessProcesses..." autocomplete="off">
                <i class="clearable__clear fa fa-close"></i>
                <i class="clearable__icon fa fa-cogs" aria-hidden="true"></i>
            </div>
            <span class="glyphicon glyphicon-search form-control-feedback" style="color: #97a0b3;"></span>
        </div>
        <div class="form-group has-feedback" style="margin-bottom:12px;">
            <div class="clearable-with-left-icon">
                <input id="treeViewSearchDoc" type="text" class="form-control" placeholder="@Pectra.DG.App_GlobalResources.General.FilterActivities..." autocomplete="off">
                <i class="clearable__clear fa fa-close"></i>
                <i class="clearable__icon fa fa-tasks" aria-hidden="true"></i>
            </div>
            <span class="glyphicon glyphicon-search form-control-feedback" style="color: #97a0b3;"></span>
        </div>
        @if (Model != null)
        {
            @helper BuildItem(Pectra.DG.Models.MenuItem menuItem, int piPngId, int piVersionId)
            {
                <li>
                    @switch (menuItem.Type)
                    {
                        case Pectra.DG.Models.MenuItemType.Initial_Activity:
                            if (menuItem.BusinessProcessProperties.Functions != null)
                            {
                                <a href="javascript:void(0)" class="searcheable" onclick='ActivateMenu(this);ShowDocumentationAct(this, "#divDocumentation", "@menuItem.Description", @piPngId, @piVersionId, @menuItem.BusinessProcessProperties.ActId);'>
                                    <i class="fa fa-play-circle"></i>
                                    <span>@menuItem.Description</span>
                                </a>
                            }
                            else
                            {
                                <a href="#" class="searcheable">
                                    <i class="fa fa-play-circle"></i>
                                    <span>@menuItem.Description</span>
                                </a>
                            }
                            break;
                        case Pectra.DG.Models.MenuItemType.Activity:
                            <a href="javascript:void(0)" class="searcheable"
                               onclick='ActivateMenu(this);ShowDocumentationAct(this, "#divDocumentation", "@menuItem.Description", @piPngId, @piVersionId, @menuItem.BusinessProcessProperties.ActId);'>
                                <i class="fa fa-inbox"></i>
                                <span>@menuItem.Description</span>
                            </a>
                            break;
                        case Pectra.DG.Models.MenuItemType.MenuItem:
                            <a href="#@string.Format("{0}{1}{2}{3}_{4}", menuItem.OrgId, menuItem.UOId, menuItem.PrfId, piPngId, menuItem.Key.Replace('|', '_'))" data-toggle="collapse">
                                <i class="fa fa-folder"></i>
                                <span>@menuItem.Description</span>
                            </a>
                            break;
                        case Pectra.DG.Models.MenuItemType.AppNet:
                            <a href="javascript:void(0)" class="searcheable"
                               onclick='ActivateMenu(this);ShowDocumentationAct(this, "#divDocumentation", "@menuItem.Description", @piPngId, @piVersionId, @menuItem.BusinessProcessProperties.ActId);'>
                                <i class="fa fa-inbox"></i>
                                <span>@menuItem.Description</span>
                            </a>
                            break;
                        case Pectra.DG.Models.MenuItemType.Unknown:
                            break;
                        default:
                            <a href="#"><span>@menuItem.Description</span></a>
                            break;
                    }
                    @if (menuItem.MenuItems != null && menuItem.MenuItems.Count > 0)
                    {
                        @BuildMenuItems(menuItem.MenuItems, string.Format("{0}{1}{2}{3}_{4}", menuItem.OrgId, menuItem.UOId, menuItem.PrfId, piPngId, menuItem.Key.Replace('|', '_')),
                           piPngId, piVersionId)
                    }
                </li>
            }

            @helper BuildMenuItems(List<Pectra.DG.Models.MenuItem> lstMenuItems, string key, int piPngId, int piVersionId)
            {
                <div id="@key" class="collapse" style="margin-left:10px;">
                    <ul class="nav nav-pills nav-stacked treemenu">
                        @foreach (var mi in lstMenuItems)
                        {
                            @BuildItem(mi, piPngId, piVersionId)
                        }
                    </ul>
                </div>
            }

            foreach (var tv in Model.TreeViews)
            {
                foreach (var bp in tv.BusinessProcesses)
                {
                    var prfid = "";
                    if (bp.MenuItems.Count > 0)
                    {
                        prfid = bp.MenuItems[0].PrfId;
                    }
                    <div class="box box-solid box-treeview">
                        <div class="box-header with-border">
                            <a href="javascript:void(0)"
                               onclick='ShowDocumentationProcess(this, "#divDocumentation", "@bp.Description", @bp.PngId, @bp.VersionId, "@prfid");'>
                                <h3 class="box-title"><span>@bp.Description</span></h3>
                            </a>
                            <div class="box-tools">
                                <button type="button" class="btn btn-box-tool" data-widget="collapse">
                                    <i class="fa fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="box-body no-padding">
                            <ul class="nav nav-pills nav-stacked treemenu">
                                @foreach (var mi in bp.MenuItems)
                                {
                                    @BuildItem(mi, bp.PngId, bp.VersionId)
                                }
                            </ul>
                        </div>
                    </div>
                }
            }
        }
    </div>
    <div class="col-md-9">
        <div id="inboxContainer" class="box box-primary" style="display:none">
            <div class="box-header with-border">
                <h3 class="box-title" id="inboxHeader"></h3>
            </div>
            <div class="box-body">
                <div class="panel-body" id="divDocumentation">
                </div>
                @Html.Hidden("hdGetActivityDocumentationUrl", Url.Action("GetActivityDocumentation", "Documentation"))
                @Html.Hidden("hdGetProceesDocumentationUrl", Url.Action("GetProcessProfileDocumentation", "Documentation"))
                @Html.Hidden("hdnMsgNoDocumentation", Pectra.DG.App_GlobalResources.General.MsgNoDocumentation)
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        $(document).ready(function () {  
            $("#treeViewSearchDoc").on("keyup", function () {
                var value = $(this).val().toLowerCase();
                $("#processesinbox a.searcheable").filter(function () {
                    $(this).parent().toggle($(this).children("span:first").text().toLowerCase().indexOf(value) > -1);
                });
                // oculta / muestra menú items según tengan a no elementos visibles.
                $("#processesinbox").find("ul a").not(".searcheable").each(function () {
                    var aSercheable = $(this).siblings("div").find("a.searcheable");
                    var cantHidden = aSercheable.filter(function () { return $(this).parent().css("display") == "none" }).length;
                    var cant = aSercheable.length;
                    if (cantHidden < cant) {
                        $(this).parent().show();
                        $(this).siblings("div").collapse('show');
                    }
                    else
                        $(this).parent().hide();
                });
                // oculta / muestra cajas de procesos de negocios según tengan o no items.
                $("#processesinbox div.box-body").each(function () {
                    var aSercheable = $(this).find("a.searcheable");
                    var cantHidden = aSercheable.filter(function () { return $(this).parent().css("display") == "none" }).length;
                    var cant = aSercheable.length;
                    $(this).parent().toggle(cantHidden < cant);
                    //Si muestra algo y está colapsado, lo expande.
                    if (cantHidden < cant) {
                        $(this).parent(".box-treeview.collapsed-box").find("button[data-widget='collapse']>i").removeClass('fa-plus').addClass('fa-minus');
                        $(this).parent('.box-treeview').removeClass('collapsed-box');
                        $(this).show();
                    }
                });
                // aplica filtro de procesos de negocio.
                var valSearchBP = $("#treeViewSearchBPDoc").val().toLowerCase();
                if (valSearchBP) FilterBPs(valSearchBP);
            });
            $("#treeViewSearchBPDoc").on("keyup", function () { FilterBPs($(this).val().toLowerCase()); });
        });

        function FilterBPs(value) {
            $("#processesinbox div.box-header").filter(function () {
                $(this).parent().toggle($(".box-title", this).text().toLowerCase().indexOf(value) > -1);
            });
        }
    </script>
    @Scripts.Render("~/AdminLTE/plugins/icheck/js")
    @Scripts.Render("~/Scripts/Mailbox/Common")
    @Scripts.Render("~/Scripts/Documentation/Documentation.js?b")
}

