

<h3>@Resources.DashboardDemo.TaskPage_Title</h3>

<script>
    $(window).resize(function () {
        relayout(window.__containerWidth, window.__containerHeight);
    });

    $(document).ready(function () {
        $("#tabs-tasks").tabs({
            activate: function (event, ui) {
                var targetGridElement = $(ui.newPanel).find(".grid").get(0);
                var targetGrid = wijmo.Control.getControl(targetGridElement);

                if (targetGrid.itemsSource.itemCount == 0) {
                    refreshAll(Math.round(rangeSelector.min), Math.round(rangeSelector.max), targetGrid);
                } else {
                    targetGrid.invalidate();
                }
            }
        });

        if (window.rangeSelector != null) {
            window.rangeSelector.rangeChanged.addHandler(function (s, e) {

                // perform related updates // e.g. modify displayed range of another chart
                refreshAll(Math.round(rangeSelector.min), Math.round(rangeSelector.max));
            });
        }
        relayout();
        refreshAll();
    });

    function refreshAll(start, end, targetGrid) {

        var items = window.rangeSelector._chart.itemsSource.items;
        if (start == null)
            start = items[0].Date;
        if (end == null)
            end = items[items.length - 1].Date;

        refreshData(start, end, '@Url.Action("GetTasks")', function (data) {

            var targetGridElement = getActiveGrid();
            var targetGrid = targetGridElement != null ? wijmo.Control.getControl(targetGridElement) : null;
            if (targetGrid == null)
                targetGrid = wijmo.Control.getControl("#gridAllTasks");
            var cv = new wijmo.collections.CollectionView(data[0].items)

            // Find the group panel and synchronize the grouped columns
            var gp = wijmo.Control.getControl($("#tabs-tasks div[aria-hidden='false'].ui-tabs-panel").find(".wj-grouppanel").get(0));
            var oldCollection = targetGrid.itemsSource;
            targetGrid.itemsSource = cv;
            if (oldCollection != null && oldCollection.groupDescriptions.length > 0) {
                // Already grouped, regroup.
                gp.refresh();
                $.each(oldCollection.groupDescriptions, function (i, v) {
                    dogrouping(targetGrid, gp, v);
                });
            } else {
                // Apply grouping
                var gd = new wijmo.collections.PropertyGroupDescription('AssignedTo');
                dogrouping(targetGrid, gp, gd);
            }
            gp.invalidate();
            relayout();
        });
    }

    function getActiveGrid() {
        var targetGridElement = $("#tabs-tasks div[aria-hidden='false'].ui-tabs-panel div.grid").get(0);
        return targetGridElement;
    }

    function getActiveTab() {
        return $("#tabs-tasks div[aria-hidden='false'].ui-tabs-panel");
    }

    /**
     * Send request to get the latest data.
     */
    function refreshData(start, end, action, callback) {

        var startDate = new Date(start);
        var endDate = new Date(end);
        $.ajax(action, {
            success: function (data) {
                callback(data);
            },
            data: {
                startDate: (startDate.getMonth() + 1) + "/" + startDate.getDate() + "/" + startDate.getFullYear(),
                endDate: (endDate.getMonth() + 1) + "/" + endDate.getDate() + "/" + endDate.getFullYear(),
                taskType: $("#tabs-tasks").tabs("option", "active")
            },
            dataType: "json",
            type: "POST"
        });
    }

    /**
     * Custom cell formatter to paint the progress bar.
     */
    function completeFormatter(panel, r, c, cell) {
        if (panel.columns[c].binding === "Complete") {
            cell.style.textAlign = "";
            if (panel.cellType === wijmo.grid.CellType.Cell) {
                $(cell).empty();
                var value = panel.getCellData(r, c);
                var span = document.createElement("SPAN");
                span.innerHTML = (value * 100) + "%";
                span.setAttribute("class", "progress-value");
                cell.appendChild(buildProgressBar(cell, value));
                cell.appendChild(span);
            }
        }
    }

    /**
     * Draw the progress bar.
     */
    function buildProgressBar(cell, value) {
        var cellWidth = $(cell).width();
        var bar = document.createElement("DIV");
        bar.setAttribute("class", "progress-bar");
        $(bar).width(cellWidth * value);
        return bar;
    }

    /**
     * Manually grouping
     */
    function dogrouping(grid, group, cv, gd) {
        var c = $.grep(grid.columns, function (col, index) {
            return col.binding == cv.propertyName;
        });
        group._addGroup(c[0]);
    }

    function relayout(containerWidth, containerHeight) {
        if (containerWidth == null)
            containerWidth = getContainerWidth();
        if (containerHeight == null)
            containerHeight = getContainerHeight();

        var MIN_HEIGHT = 250;
        var panelHeight = containerHeight - 250;
        $("#tabs-tasks").outerWidth(containerWidth * 0.98);
        var activePanel = getActiveTab();
        activePanel.outerWidth(containerWidth * 0.98);
        activePanel.outerHeight(Math.max(panelHeight, MIN_HEIGHT));

        var activeGrid = getActiveGrid();
        //$(activeGrid).outerWidth(containerWidth - 24);
        $(activeGrid).outerHeight(Math.max(panelHeight - 80, MIN_HEIGHT - 80));
        var targetViewer = wijmo.Control.getControl(activeGrid);
        targetViewer.refresh();
    }
</script>

<div id="tabs-tasks">
    <ul>
        <li><a href="#tabs-1">@Resources.DashboardDemo.AllTasks_Header</a></li>
        <li><a href="#tabs-2">@Resources.DashboardDemo.InProgress_Header</a></li>
        <li><a href="#tabs-3">@Resources.DashboardDemo.Completed_Header</a></li>
        <li><a href="#tabs-4">@Resources.DashboardDemo.Deferred_Header</a></li>
        <li><a href="#tabs-5">@Resources.DashboardDemo.Urgent_Header</a></li>
    </ul>
    <div id="tabs-1">

        @(Html.C1().FlexGrid()
            .Id("gridAllTasks")
            .AllowSorting(true)
            .AutoGenerateColumns(false)
            .CssClass("grid")
            .IsReadOnly(true)
            .ShowGroups(true)
            .ItemFormatter("completeFormatter")
            .ShowGroupPanel(pnl =>
            {
                pnl.MaxGroups(4);
                pnl.Placeholder("Please add columns for grouping here");
            })
            .Columns(bl =>
            {
                bl.Add(cb => cb.Binding("AssignedTo").Width("*"));
                bl.Add(cb => cb.Binding("Subject").Width("*"));
                bl.Add(cb => cb.Binding("ItemName").Width("*"));
                bl.Add(cb => cb.Binding("DueDate").Width("*"));
                bl.Add(cb => cb.Binding("Complete").Width("*"));
            }))
    </div>
    <div id="tabs-2">


        @(Html.C1().FlexGrid()
            .Id("gridInProgress")
            .AllowSorting(true)
            .AutoGenerateColumns(false)
            .CssClass("grid")
            .IsReadOnly(true)
            .ShowGroups(true)
            .ItemFormatter("completeFormatter")
            .ShowGroupPanel(pnl =>
            {
                pnl.MaxGroups(4);
                pnl.Placeholder("Please add columns for grouping here");
            })
            .Columns(bl =>
            {
                bl.Add(cb => cb.Binding("AssignedTo").Width("*"));
                bl.Add(cb => cb.Binding("Subject").Width("*"));
                bl.Add(cb => cb.Binding("ItemName").Width("*"));
                bl.Add(cb => cb.Binding("DueDate").Width("*"));
                bl.Add(cb => cb.Binding("Complete").Width("*"));
            })
        )
    </div>
    <div id="tabs-3">
        @(Html.C1().FlexGrid()
            .Id("gridCompleted")
            .AllowSorting(true)
            .AutoGenerateColumns(false)
            .CssClass("grid")
            .IsReadOnly(true)
            .ShowGroups(true)
            .ItemFormatter("completeFormatter")
            .ShowGroupPanel(pnl =>
            {
                pnl.MaxGroups(4);
                pnl.Placeholder("Please add columns for grouping here");
            })
            .Columns(bl =>
            {
                bl.Add(cb => cb.Binding("AssignedTo").Width("*"));
                bl.Add(cb => cb.Binding("Subject").Width("*"));
                bl.Add(cb => cb.Binding("ItemName").Width("*"));
                bl.Add(cb => cb.Binding("DueDate").Width("*"));
                bl.Add(cb => cb.Binding("Complete").Width("*"));
            })
        )
    </div>

    <div id="tabs-4">
        @(Html.C1().FlexGrid()
            .Id("gridDeferred")
            .AllowSorting(true)
            .AutoGenerateColumns(false)
            .CssClass("grid")
            .IsReadOnly(true)
            .ShowGroups(true)
            .ItemFormatter("completeFormatter")
            .ShowGroupPanel(pnl =>
            {
                pnl.MaxGroups(4);
                pnl.Placeholder("Please add columns for grouping here");
            })
            .Columns(bl =>
            {
                bl.Add(cb => cb.Binding("AssignedTo").Width("*"));
                bl.Add(cb => cb.Binding("Subject").Width("*"));
                bl.Add(cb => cb.Binding("ItemName").Width("*"));
                bl.Add(cb => cb.Binding("DueDate").Width("*"));
                bl.Add(cb => cb.Binding("Complete").Width("*"));
            })
        )
    </div>
    <div id="tabs-5">
        @(Html.C1().FlexGrid()
            .Id("gridUrgent")
            .AllowSorting(true)
            .AutoGenerateColumns(false)
            .CssClass("grid")
            .IsReadOnly(true)
            .ShowGroups(true)
            .ItemFormatter("completeFormatter")
            .ShowGroupPanel(pnl =>
            {
                pnl.MaxGroups(4);
                pnl.Placeholder("Please add columns for grouping here");
            })
            .Columns(bl =>
            {
                bl.Add(cb => cb.Binding("AssignedTo").Width("*"));
                bl.Add(cb => cb.Binding("Subject").Width("*"));
                bl.Add(cb => cb.Binding("ItemName").Width("*"));
                bl.Add(cb => cb.Binding("DueDate").Width("*"));
                bl.Add(cb => cb.Binding("Complete").Width("*"));
            })
        )
    </div>
</div>

<div id="rangeSelectorContainer">
    @Html.Partial("RangeSelector", ViewBag.DateSaleList as List<SaleItem>)
</div>