<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CatalogAvailableToPromiseReportControl.ascx.cs" Inherits="Dovetail.Ecommerce.Controls.CatalogAvailableToPromiseReportControl" %>
<script type="text/javascript">
    $(function () {
        $('#lpGeneratingReport').dxLoadPanel({
            message: 'Generating ATP Report...',
            shading: true,
            showIndicator: true,
            showPane: true,
            visible: true,
            shadingColor: 'rgba(0, 0, 0, 0.2)',
            closeOnOutsideClick: false,
            indicatorSrc: SITE_PATHS.application + '/images/preloader-dots.gif',
            });

        var Params = {};
            MakeAJAXCall("Inventory.GetATPReportData", Params, flattenData);
    });
    // global variable to hold the AJAX data as a flattend copy
    var allATPData_flat = [];

    // function to flatten out the returned data from the AJAX call
    var flattenData = function(DATA) {
        var flatData = JSON.parse(DATA);                    // parse returned data 
        flatData.forEach(function(catWithItems) {           // loop through all categories
        catWithItems.Items.forEach(function(items) {        // loop through all items in each catgory
                var catSingleStockCode = {                  // slimmed data to push into our flattened array
                    Name: catWithItems.Name,
                    StockCode: items.StockCode,
                    ItemName: items.ItemName,
                    ATP: items.ATP,
                    ATPAvailable: items.ATPAvailable,
                    NextATP: items.NextATP
                }
                var pushCopy = Object.assign({}, catSingleStockCode)    // creates a 'clone' of the object to push into the array, otherwise we would only get a reference to the obj
                allATPData_flat.push(pushCopy);
            })
        })
        BindTreeList();
                }

    function BindTreeList() {
        // setup variables to create data stamp on file name
        var today = new Date();
        var yyyy = today.getFullYear();
        var mm = String(today.getMonth() + 1).padStart(2, '0');
        var dd = String(today.getDate()).padStart(2, '0');

        var atpGrid = $("#ATPTreeList").dxDataGrid({
            dataSource: allATPData_flat,
            export: {
                enabled: true,
                allowExportSelectedData: true,
                fileName: 'FullATP_Report_' + yyyy + '_' + mm + '_'  + dd
            },
            selection: {
                allowSelectAll: true,
                mode: 'multiple',
                deferred: false,
                selectAllMode: 'allPages',
                showCheckBoxesMode: "always"
            },
            grouping: {
                autoExpandAll: false,
            },
            showBorders: true,
            columns: [ <%= CategoryDataGridJS + ItemDataGridJS %> ],
            onInitialized: function () {
                $('#lpGeneratingReport').dxLoadPanel('hide');
            },
            onRowClick: function (e) {
                if (e.isExpanded) {
                    e.component.collapseRow(e.key);
                }
                else {
                    e.component.expandRow(e.key);
                }
            },
            onExporting: function(e) {
                // adding category column for user sorting
                e.component.beginUpdate();
                e.component.addColumn({dataField: "Name", caption: 'Category'});
                e.component.endUpdate();
            }, 
            onExported: function(e) {
                //remove added column from page
                e.component.beginUpdate();
                e.component.deleteColumn('Category');
                e.component.endUpdate();
            }
        });
    }
</script>
<div id="lpGeneratingReport">

</div>
<div id="ATPTreeList">

</div>