ClaimReview = function( options ) {
    let instance = this;
    this.rootElement = null;
}

ClaimReview.prototype.constructor = ClaimReview;

ClaimReview.prototype.element = function() {
    let instance = this;

    if( instance.rootElement ) {
        return instance.rootElement;
    }

    //Create root
    instance.rootElement = $( '<div>' );

    instance.createKPIs();

    return instance.rootElement;
};

ClaimReview.prototype._loadStats = function() {
    let instance = this;

    let statsDatasource = Fse.Data.newDataSource( { 
        object : 'TPM.claimPending', 
        key : 'claimId', 
        paginate : false
    } );

    return statsDatasource.load().done( function( data ) {
        instance.stats = data[0] || {};
    });
}

ClaimReview.prototype.createKPIs = function() {
    let instance = this;

    instance._loadStats().done( function() {
        instance.layoutBox = $( '<div>' ).dxBox({
            direction: 'col',
            height: '100%',
            items: [
                {
                    baseSize: 90,
                    box: {
                        direction: 'row',
                        items: [
                            { ratio: 1, 
                                template: function() {
                                    let pendingElement = $("<div>")
                                        .css({
                                            marginRight: "10px",
                                            padding: "12px",
                                            minHeight: "110px"
                                        })
                                        .addClass( ["fx-void-matrix-stats", "dx-theme-border-color" ] );

                                    let pendingCount = DevExpress.localization.formatNumber( instance.stats.pendingCount || 0 );
                                    instance.pendingCountElement = $("<span>").text( pendingCount );

                                    pendingElement
                                        .append( $("<div>" )
                                            .addClass( "kpiTitle")
                                            .text( "Claims Pending Review" ) )
                                        .append( $("<div>" )
                                            .addClass( "fx-void-matrix-stat-value" )
                                            .append( instance.pendingCountElement ) )

                                    return pendingElement;
                                }
                            },
                            { ratio: 1, 
                                template: function() {
                                    let agingElement = $("<div>")
                                        .css({
                                            marginRight: "10px",
                                            padding: "12px",
                                            minHeight: "110px"
                                        })
                                        .addClass( ["fx-void-matrix-stats", "dx-theme-border-color" ] );

                                    let agingCount = DevExpress.localization.formatNumber( instance.stats.agingCount || 0 );
                                    instance.agingCountElement = $("<span>").text( agingCount );
                                    
                                    agingElement
                                        .append( $("<div>" )
                                            .addClass( "kpiTitle")
                                            .text( "Aging Alerts (>5 days)" ) )
                                        .append( $("<div>" )
                                            .addClass( "fx-void-matrix-stat-value" )
                                            .append( instance.agingCountElement ) )
                                            .append( $("<span>").addClass( "kpiSub" ).text( 'Requires immediate attention' ) )

                                    return agingElement;
                                }
                            },
                            { ratio: 1, 
                                template: function() {
                                    let completionElement = $("<div>")
                                        .css({
                                            marginRight: "10px",
                                            padding: "12px",
                                            minHeight: "110px"
                                        })
                                        .addClass( ["fx-void-matrix-stats", "dx-theme-border-color" ] );

                                    let completionPct = DevExpress.localization.formatNumber( instance.stats.completionPct || 0, "percent" );
                                    instance.completionPctElement = $("<span>").text( completionPct );

                                    completionElement
                                        .append( $( "<div>" )
                                            .addClass( "kpiTitle")
                                            .text( "Review Completion %" ) )
                                        .append( $( "<div>" )
                                            .addClass( "fx-void-matrix-stat-value" )
                                            .append( instance.completionPctElement ) )
                                            .append( $( "<span>" ).addClass( "kpiSub" ).text( 'Current Period' ) )

                                    return completionElement;
                                }
                            },
                            { ratio: 1, 
                                template: function() {
                                    let recoveryElement = $("<div>")
                                        .css({
                                            marginRight: "10px",
                                            padding: "12px",
                                            minHeight: "110px"
                                        })
                                        .addClass( ["fx-void-matrix-stats", "dx-theme-border-color" ] );

                                    let potentialRecovery = DevExpress.localization.formatNumber( instance.stats.potentialRecovery || 0, 
                                    { 
                                        type: "currency", 
                                        precision: 2 
                                    } );
                                    
                                    instance.potentialRecoveryElement = $("<span>").text( potentialRecovery );

                                    recoveryElement
                                        .append( $( "<div>" )
                                            .addClass( "kpiTitle")
                                            .text( "Potential Recovery" ) )
                                        .append( $( "<div>" )
                                            .addClass( "fx-void-matrix-stat-value" )
                                            .append( instance.potentialRecoveryElement ) )
                                            //.append( $( "<span>" ).addClass( "kpiSub" ).text( '' ) )

                                    return recoveryElement;
                                }
                            },
                            { ratio: 1, 
                                template: function() {
                                    let offsetElement = $("<div>")
                                        .css({
                                            marginRight: "10px",
                                            padding: "12px",
                                            minHeight: "110px"
                                        })
                                        .addClass( ["fx-void-matrix-stats", "dx-theme-border-color" ] );
                                    
                                    let realizedOffsets = DevExpress.localization.formatNumber( instance.stats.realizedOffsets || 0, 
                                    {
                                        type: "currency",
                                        precision: 2
                                    } );
                                    let realizedOffsetsMTD = DevExpress.localization.formatNumber( instance.stats.realizedOffsetsMTD || 0, 
                                    {
                                        type: "currency",
                                        precision: 2
                                    } );
                                    let realizedOffsetsYTD = DevExpress.localization.formatNumber( instance.stats.realizedOffsetsYTD || 0, 
                                    {
                                        type: "currency",
                                        precision: 2
                                    } );

                                    instance.realizedOffsetsElement = $( "<span>" ).text( realizedOffsets );
                                    instance.realizedOffsetsSubElement = $( "<span>" )
                                        .addClass( "kpiSub" )
                                        .text( "MTD: " + realizedOffsetsMTD + " | YTD: " + realizedOffsetsYTD );

                                    offsetElement  
                                        .append( $( "<div>" )
                                            .addClass( "kpiTitle")
                                            .text( "Realized Offsets" ) )
                                        .append( $( "<div>" )
                                            .addClass( "fx-void-matrix-stat-value" )
                                            .append( instance.realizedOffsetsElement ) )
                                            .append( instance.realizedOffsetsSubElement )

                                    return offsetElement;
                                }
                            }
                        ]
                    }
                }
            ]
        }).dxBox( 'instance' );

        //instance.rootElement.append( instance.layoutBox.element() );
        $( "<div>" )
            .css({
                padding: "16px 16px 10px 16px",
                marginBottom: "12px"
            })
            .append( instance.layoutBox.element() )
            .appendTo( instance.rootElement );

        instance.createToolbar();
        instance.createDataGrid();
    });
}

ClaimReview.prototype.createToolbar = function() {
    let instance = this;

    let claimPendingStatusDataSource = Fse.Data.newDataSource({
        object: 'TPM.claimPendingStatuses',
        paginate: false
    });

    let operatorDataSource = Fse.Data.newDataSource({
        object: 'TPM.claimPendingOperators',
        paginate: false
    });

    instance.toolbar = $( '<div>' ).dxToolbar({
        //dataSource: claimStatusDataSource
        items: [
            {
                location: 'before',
                template: function() {
                    return $( '<span>' )
                    .css( { 'margin-right': '6px', 'font-weight': '500' } )
                    .text( 'Claim Status:' );
                }
            },
            {
                widget: 'dxSelectBox',
                location: 'before',
                options: {
                    dataSource: claimPendingStatusDataSource,
                    searchEnabled : true, 
                    searchMode : "contains", 
                    showClearButton : true,
                    width: 200,
                    displayExpr: 'claimPendingStatus',
                    valueExpr: 'claimPendingStatus',
                    placeholder: 'All Statuses',
                    onInitialized: function( e ) {
                        instance.claimStatusSelectBox = e.component;
                    }
                }
            },
            {
                location: 'before',
                template: function() {
                    return $( '<span>' )
                    .css( { 'margin-right': '6px', 'font-weight': '500' } )
                    .text( 'Operator:' );
                }
            },
            {
                widget: 'dxSelectBox',
                location: 'before',
                options: {
                    dataSource: operatorDataSource,
                    searchEnabled : true, 
                    searchMode : "contains", 
                    showClearButton : true,
                    width: 200,
                    displayExpr: 'operatorName',
                    valueExpr: 'operatorId',
                    placeholder: 'All Operators',
                    onInitialized: function( e ) {
                        instance.operatorSelectBox = e.component;
                    }
                }
            },
            {
                location: 'before',
                template: function() {
                    return $( '<span>' )
                    .css( { 'margin-right': '6px', 'font-weight': '500' } )
                    .text( 'Start Date:' );
                }
            },
            {
                widget: 'dxDateBox',
                location: 'before',
                options: {
                    type: 'date',
                    width: 200,
                    displayFormat: 'MM/dd/yyyy',
                    placeholder: 'Select',
                    showClearButton: true,
                    onInitialized: function( e ) {
                        instance.claimStartDateBox = e.component;
                    }
                }
            },
            {
                location: 'before',
                template: function() {
                    return $( '<span>' )
                    .css( { 'margin-right': '6px', 'font-weight': '500' } )
                    .text( 'End Date:' );
                }
            },
            {
                widget: "dxDateBox",
                location: 'before',
                options: {
                    type: 'date',
                    width: 200,
                    displayFormat: 'MM/dd/yyyy',
                    placeholder: 'Select',
                    showClearButton: true,
                    onInitialized: function( e ) {
                        instance.claimEndDateBox = e.component;
                    }
                }
            },
            {
                widget: 'dxButton',
                location: 'before',
                options: {
                    text: 'Apply Filters',
                    type: 'default',
                    onClick: function( e ) {
                        let claimPendingListDataSource = Fse.Data.newDataSource({
                            object: 'TPM.claimPendingList',
                            paginate: true,
                            pageSize: 50,
                            objectParams: instance.getObjectParams()
                        });

                        instance.dataGrid.option( 'dataSource', claimPendingListDataSource );
                    }
                },
            },
            {
                widget: 'dxButton',
                location: 'before',
                options: {
                    text: 'Clear',
                },
                onClick: function( e ) {
                    instance.claimStatusSelectBox.reset();
                    instance.operatorSelectBox.reset();
                    instance.claimStartDateBox.reset();
                    instance.claimEndDateBox.reset();

                    let claimPendingListDataSource = Fse.Data.newDataSource({
                        object: 'TPM.claimPendingList',
                        paginate: true,
                        pageSize: 50,
                        objectParams: instance.getObjectParams()
                    });

                    instance.dataGrid.option( 'dataSource', claimPendingListDataSource );
                }
            },
        ]
    }).dxToolbar( 'instance' );

    //instance.rootElement.append( instance.toolbar.element() );

    $("<div>")
        .css({
            padding: "10px 16px"
        })
        .append( instance.toolbar.element() )
        .appendTo( instance.rootElement );
}

ClaimReview.prototype.createDataGrid = function() {
    var instance = this;

    let claimPendingListDataSource = Fse.Data.newDataSource({
        object: 'TPM.claimPendingList',
        paginate: true,
        pageSize: 50,
    });

    instance.dataGrid = $( '<div>' ).dxDataGrid({
        dataSource: claimPendingListDataSource,
        showBorders: false,
        filterRow : { visible : true },
        headerFilter : { visible : true },
        scrolling : { mode : 'virtual' },
        hoverStateEnabled: true,
        allowColumnResizing: true,
        columns: [
            { dataField: 'operatorName', caption: 'Operator' },
            { dataField: 'claimInvoice', caption: 'Claim Invoice #' },
            { dataField: 'claimPeriodStart', caption: 'Claim Start Date', dataType: 'date', allowFiltering: false },
            { dataField: 'claimPeriodEnd', caption: 'Claim End Date', dataType: 'date', allowFiltering: false },
            { dataField: 'externalAgreementNumber', caption: 'Agreement Number', visible: false },
            { dataField: 'pendingDate', caption: 'Submitted for Review', dataType: 'date', allowFiltering: false },
            { dataField: 'totalExceptionCount', caption: 'Exception Count', format: "#,##0" },
            { dataField: 'totalItemQty', caption: 'Total Qty', format: "#,##0.00" },
            { dataField: 'totalAmount', caption: 'Total Dollars', format: { type: 'currency', precision: 2 } },
            { dataField: 'doubleDipQtyAllowed', caption: 'Double Dip Qty Allowed', format: "#,##0.00", visible: false },
            { dataField: 'doubleDipQtyDenied', caption: 'Double Dip Qty Denied', format: "#,##0.00", visible: false },
            { dataField: 'doubleDipAmountAllowed', caption: 'Double Dip Amount Allowed', format: "$#,##0.00", visible: false },
            { dataField: 'doubleDipAmountDenied', caption: 'Double Dip Amount Denied', format: "$#,##0.00", visible: false },
            { dataField: 'claimPendingStatus', caption: 'Status' },
        ],
        onRowClick: function( e ) {
            if( e.rowType !== 'data' ) return;
            instance.openClaimDetailPopup( e.data );
        },
        onToolbarPreparing : function( e ) {
            if( ! e.toolbarOptions.items ) e.toolbarOptions.items = [];
            let items = e.toolbarOptions.items;
            
            items.push({ location : "after", widget : "dxButton", options : { 
                    hint : "Choose Columns", 
                    icon : "columnchooser", 
                    onClick : function( ) { 
                        let columnChooser = new CustomDataGridColumnChooser( e.component, function() {  }, true );
                        columnChooser.show();
                    } 
                } 
            });

            items.push( { location: "after", widget : "dxButton", options : { 
                    hint : "Excel Export", 
                    icon : "export",
                    onClick : function( e ) {
                        Fse.UI.DataGridHelper.exportDataGrid( { dataGrid : instance.dataGrid, fileName : "ClaimReview_Summary.xlsx" } );
                    }
                }
            });
            
            items.push( { widget: "dxButton", location: "after", options : {
                    type : "normal",
                    icon :"help",
                    hint : "View Help",
                    onClick : function( e ) {
                        Fse.Portal.showQuickHelp( "DoubleDipModule" );
                    }
                }
            });
        },  
    }).dxDataGrid( 'instance' );

    //instance.rootElement.append( instance.dataGrid.element() );

    $("<div>")
        .css({
            padding: "10px 16px 16px 16px"
        })
        .append( instance.dataGrid.element() )
        .appendTo( instance.rootElement );
}

ClaimReview.prototype.openClaimDetailPopup = function( claimData ) {
    let instance = this;

    instance.currentClaimData = claimData;
    instance.podUpdates = {};

    if( ! instance.claimDetailPopupElement ) {
        instance.claimDetailPopupElement = $( '<div>' ).appendTo( 'body' );

        instance.loadingPanel = $( '<div>' ).appendTo( 'body' ).dxLoadPanel({
            message: 'Processing Acknowledgement...',
            visible: false,
            showIndicator: true,
            showPane: true,
            shading: true,
            shadingColor: 'rgba(0,0,0,0.4)',
            position: { of: window }
        }).dxLoadPanel( 'instance' );

        instance.cancelButton = $( '<div>' ).dxButton({
            text: 'Cancel',
            type: 'normal',
            onClick: function( e ) {
                if( confirm( 'Are you sure you want to cancel?' ) ) {
                    instance.claimDetailPopup.hide();
                }
            }
        }).dxButton( 'instance' );

        instance.saveDraftButton = $( '<div>' ).dxButton({
            text: 'Save Draft',
            type: 'normal',
            onClick: function( e ) {
                let currentClaim = instance.currentClaimData;
                var sSaveDraftURL = $("link#PortalDocRootURL").attr("href") + "/apps/TPM/index.cfm?do=saveClaimPendingDetails";
                
                if( confirm( 'Save Draft?' ) ) {
                    let selectedRows = Object.values( instance.podUpdates );

                    //console.log( selectedRows );

                    $.ajax({
                        url: sSaveDraftURL,
                        method: 'POST',
                            data: { 
                                claimId: currentClaim.claimId,
                                podUpdates: JSON.stringify( selectedRows )
                            },
                    }).done( function( e ) {
                        instance.claimDetailPopupContent.empty();
                        instance.claimDetailPopup.hide();
                        instance.dataGrid.refresh();
                        instance.refreshKPIs();
                    }).fail( function() {
                        console.log( 'Save draft failed' );
                        alert( 'Unable to save draft. Please try again.' );
                    })
                }
            },
        }).dxButton( 'instance' );

        instance.submitAcknowledgementButton = $( '<div>' ).dxButton({
            text: 'Submit Acknowledgement',
            type: 'default',
            disabled: ( Fse.Portal.checkPermission( "DoubleDipViewOnly" ) && !Fse.Portal.checkPermission( "DoubleDipAdmin" ) ) || claimData.claimPendingStatus == "Closed",
            onClick: function( e ) {
                let currentClaim = instance.currentClaimData;
                var sAcknowledgeURL = $("link#PortalDocRootURL").attr("href") + "/apps/TPM/index.cfm?do=acknowledgeClaim";
                
                if( confirm( 'Acknowledge Claim?' ) ) {
                    let selectedRows = Object.values( instance.podUpdates );
                    
                    instance.loadingPanel.show();

                    $.ajax({
                        url: sAcknowledgeURL,
                        method: 'POST',
                        data: { 
                            claimId: currentClaim.claimId, 
                            podUpdates: JSON.stringify( selectedRows ) 
                        },
                    }).done( function( e ) {
                         instance.loadingPanel.hide();

                        instance.claimDetailPopupContent.empty();
                        instance.claimDetailPopup.hide();
                        instance.dataGrid.refresh();
                        instance.refreshKPIs();

                        DevExpress.ui.notify( {
                            message: 'Acknowledgement received. Your billback file is now processing. You will receive an email notification with the file attached once it is complete.',
                            type: 'success',
                            displayTime: 4000,
                            position: {
                                my: 'center top',
                                at: 'center top'
                            }
                        });
                    }).fail( function( xhr ) {
                        instance.loadingPanel.hide();

                        let message =  'Unable to acknowledge claim. Please try again.';

                        if( xhr.responseJSON && xhr.responseJSON.message ) {
                            message = xhr.responseJSON.message;
                        }

                        DevExpress.ui.notify( {
                            message: message,
                            type: 'error',
                            displayTime: 4000,
                            position: {
                                my: 'center top',
                                at: 'center top'
                            }
                        });
                    })
                }
            },
        }).dxButton( 'instance' );

        let claimDetailPopupToolbarItems = [{
            toolbar: 'bottom', 
            location: 'after', 
            template: function( e ) {
                return instance.cancelButton.element();
            },
        },{
            toolbar: 'bottom',
            location: 'after',
            template: function( e ) {
                return instance.saveDraftButton.element();
            }
        },{
            toolbar: 'bottom',
            location: 'after',
            template: function( e ) {
                return instance.submitAcknowledgementButton.element();
            }
        }];

        instance.claimDetailPopup = instance.claimDetailPopupElement.dxPopup({
            //title: claimData.operatorName + " | " + claimData.claimInvoice,
            width: "80%",
            height: 650,
            dragEnabled: true,
            resizeEnabled: true,
            toolbarItems: claimDetailPopupToolbarItems,
            contentTemplate: function( contentElement ) {
                instance.claimDetailPopupContent = $( '<div>' ).addClass("claim-detail-popup-content").css({
                    width: '100%',
                    height: '100%',
                    boxSizing: 'border-box',
                    padding: '12px'
                });

                contentElement.append( instance.claimDetailPopupContent );
            },
            onHidden: function() {
                if ( instance.claimDetailPopupContent ) {
                    instance.claimDetailPopupContent.empty();
                }
            }
        }).dxPopup( 'instance' );

    }

    let formattedClaimPeriodStart = DevExpress.localization.formatDate( new Date( claimData.claimPeriodStart ), "MM/dd/yyyy" );
    let formattedClaimPeriodEnd = DevExpress.localization.formatDate( new Date( claimData.claimPeriodEnd ), "MM/dd/yyyy" );

    instance.claimDetailPopup.option(
        "title",
        claimData.operatorName + " | " + claimData.claimInvoice + " | " + formattedClaimPeriodStart + " to " + formattedClaimPeriodEnd
    );

    let isClosed = instance.currentClaimData.claimPendingStatus == "Closed";
    let isViewOnly = Fse.Portal.checkPermission( "DoubleDipViewOnly" ) && !Fse.Portal.checkPermission( "DoubleDipAdmin" );

    instance.saveDraftButton.option( 'disabled', isViewOnly || isClosed );
    instance.submitAcknowledgementButton.option( 'disabled', isViewOnly || isClosed );

    instance.claimDetailPopup.show();
    instance.renderClaimDetailPopupContent( claimData );
}

ClaimReview.prototype.renderClaimDetailPopupContent = function( claimData ) {
    let instance = this;

    let isClosed = claimData.claimPendingStatus == "Closed";
    let isViewOnly = Fse.Portal.checkPermission( "DoubleDipViewOnly" ) && !Fse.Portal.checkPermission( "DoubleDipAdmin" );
                
    if( instance.claimDetailPopupContent ) {
        instance.claimDetailPopupContent.empty();
    }

    let headerRow = $( '<div>' ).css({
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: '12px'
    });

    const totalRecords = claimData.totalExceptionCount || 0;
    const acceptedExclusions = claimData.totalSuppressedCount || 0;
    const deniedExclusions = totalRecords - acceptedExclusions;

    let statsContainer = $('<div>').css({
        display: 'flex',
        'flex-direction': 'column',
        gap: '6px'
    });

    let statsRow = $('<div>').css({
        display: 'flex',
        gap: '24px',
        padding: '8px 0',
        'font-weight': '500'
    });

    $( '<span>' ).html( '<b>Total Records:</b> ' + totalRecords ).appendTo( statsRow );
    $( '<span>' ).html( '<b>Allowed as Double Dip:</b> ' + acceptedExclusions ).appendTo( statsRow );
    $( '<span>' ).html( '<b>Denied as Double Dip:</b> ' + deniedExclusions ).appendTo( statsRow );

    statsRow.appendTo( statsContainer );

    if( claimData.acknowledgedDate && claimData.acknowledgedDate != "" ) {
        let date = new Date(claimData.acknowledgedDate);
        let formattedDate = DevExpress.localization.formatDate( date, "MMM dd, yyyy" );

        $( '<div>' ).html( '<b>Closed:</b> ' + formattedDate + ' by ' + claimData.acknowledgedByName )
            .appendTo( statsContainer );
    }

    statsContainer.appendTo( headerRow );

    let hasBatchFile = typeof claimData.generatedBatchFileName === "string" && claimData.generatedBatchFileName.trim() !== "";

    if( hasBatchFile ) {
        let fileName = claimData.generatedBatchFileName.split(/[\\/]/).pop();
        let sDownloadURL = $( "link#PortalDocRootURL" ).attr( "href" ) + "/apps/TPM/index.cfm?mode=direct&ajax=downloadBillback&bId=" + claimData.generatedBatchId + "&bType=I";

        $('<div>').dxButton({
            text: 'Download Billback File',
            title: fileName,
            icon: 'download',
            stylingMode: 'text',
            onClick: function () {
                window.location.href = sDownloadURL;
            }
        }).appendTo( headerRow );
    }

    instance.claimDetailPopupContent.append( headerRow );

    let claimPendingDetailDataSource = Fse.Data.newDataSource({
        object: 'TPM.claimPendingDetail',
        objectParams: {
            claimId: claimData.claimId
        },
        paginate: true,
        pageSize: 50,
    });

    instance.claimDetailRows = claimPendingDetailDataSource.items();

    let gridElement = $( '<div>' ).css({
        width: '100%',
        height: '100%'
    });

    instance.claimDetailPopupContent.append( gridElement );

    instance.claimDetailGrid = gridElement.dxDataGrid({
        dataSource: claimPendingDetailDataSource,
        width: '100%',
        showBorders: false,
        filterRow : { visible : true },
        headerFilter : { visible : true },
        scrolling : { mode : 'virtual' },
        hoverStateEnabled: true,
        columnAutoWidth: false,
        allowColumnResizing: true,
        onToolbarPreparing : function( e ) {
            if( ! e.toolbarOptions.items ) e.toolbarOptions.items = [];
            let items = e.toolbarOptions.items;
            items.push({ location : "after", widget : "dxButton", options : { 
                    hint : "Choose Columns", 
                    icon : "columnchooser", 
                    onClick : function( ) { 
                        let columnChooser = new CustomDataGridColumnChooser( e.component, function() {  }, true );
                        columnChooser.show();
                    } 
                } 
            });

            items.push( { location: "after", widget : "dxButton", options : { 
                    hint : "Excel Export", 
                    icon : "export",
                    onClick : function( e ) {
                        Fse.UI.DataGridHelper.exportDataGrid( { dataGrid : instance.claimDetailGrid, fileName : "ClaimReview_Detail.xlsx" } );
                    }
                }
            });		
        },  
        //allowColumnResizing: true,
        remoteOperations: { filtering: true, paging: true, sorting: true, grouping: false },
        grouping: {
            autoExpandAll: false
        },
        groupPanel: {
            visible: false
        },
        onCellPrepared: function( e ) {
            if ( e.rowType === 'group' && e.column.dataField === 'acceptAsDoubleDip') {
                e.cellElement.empty();
                let grid = e.component;
                let allGroups = grid.getDataSource().items();

                let groupKey = Array.isArray( e.key ) ? e.key[ 0 ] : e.key;
                let currentGroup = allGroups.find( group => group.key === groupKey );

                let isChecked = currentGroup && currentGroup.items && currentGroup.items.every( item => item.exceptionSuppressList );

                $( '<div>' ).dxCheckBox({
                    value: isChecked,
                    disabled: isClosed || isViewOnly,
                    onValueChanged: function( args ) {
                        let items = [];

                        if ( Array.isArray( currentGroup.items ) && currentGroup.items.length > 0) {
                            items = currentGroup.items;
                        } else if ( Array.isArray( currentGroup.collapsedItems ) && currentGroup.collapsedItems.length > 0 ) {
                            items = currentGroup.collapsedItems;
                        }

                        items.forEach( function( item) {
                            item.exceptionSuppressList = args.value ? item.proofOfDeliveryId : null;

                            instance.podUpdates[ item.proofOfDeliveryId ] = {
                                claimId: item.claimId,
                                proofOfDeliveryId: item.proofOfDeliveryId,
                                flagComment: args.value ? item.flagComment : ""
                            };
                        });

                        let allChecked = items.every( item => item.exceptionSuppressList );
                        this.option( "value", allChecked );

                        currentGroup.checkedState = args.value; 

                        grid.repaint();
                    }
                }).appendTo( e.cellElement );
            }
        },
        columns: [
            {
                dataField: 'cho_name',
                caption: '1FS Company Name',
                //width: 160,
            },
            {
                dataField: 'companyName',
                caption: 'Company Name',
                //width: 160,
                allowFiltering: false,
                visible: false,
            },
            {
                dataField: 'cho_address',
                caption: '1FS Address',
                //width: 120,
                allowFiltering: false,
            },
            {
                dataField: 'address',
                caption: 'Address',
                //width: 120,
                allowFiltering: false,
                visible: false,
            },
            {
                dataField: 'cho_city',
                caption: '1FS City',
                //width: 100,
            },
            {
                dataField: 'city',
                caption: 'City',
                //width: 100,
                visible: false,
            },
            {
                dataField: 'cho_state',
                caption: '1FS State',
                //width: 50,
            },
            {
                dataField: 'state',
                caption: 'State',
                //width: 50,
                visible: false,
            },
            {
                dataField: 'conflictType',
                caption: 'Conflict Type',
                //width: 120,
                /*cellTemplate: function(container, options) {
                    let value = options.value || "";
                    let color = "#555";

                    if (value === "Direct Agreement Conflict") {
                        color = "#e83e8c";
                    } else if (value === "GPO Overlap") {
                        color = "#0d6efd";
                    }

                    $("<span>")
                        .css({
                            color: color,
                            fontWeight: "600"
                        })
                        .text(value)
                        .appendTo(container);
                }*/
            },
            {
                dataField: 'flagComment',
                caption: 'System Comment',
                //width: 300,
                wordWrapEnabled: true,
                groupIndex: 0,
                sortOrder: 'asc',
                groupCellTemplate: function( container, options ) {
                    let text = options.value || "";
                    
                    text = text.replace( /^System Comment:\s*/i, '');

                    $( "<span>" )
                        .text( text )
                        .appendTo( container );
                }
            },
            {
                caption: 'SKU + Description',
                calculateCellValue: function( rowData ) {
                    return ( rowData.itemCode || '' ) + ' - ' + ( rowData.itemDescription || '' );
                },
                allowFiltering: false,
                visible: false,
            },
            {
                dataField: 'itemQty',
                caption: 'Double Dip Qty',
                //width: 60,
                dataType: 'number',
                format: "#,##0.00",
                allowFiltering: true,
                alignment: 'right',
            },
            {
                dataField: 'totalRebate',
                caption: 'Double Dip Dollars',
                //width: 100,
                format: { type: 'currency', precision: 2 },
                allowFiltering: true,
                alignment: 'right',
            },
            {
                dataField: 'acceptAsDoubleDip',
                caption: 'Allow as Double Dip',
                //width: 25,
                alignment: 'center',
                allowFiltering: false,
                cellTemplate: function( container, options ) {

                    let acceptCheckbox = $( '<div>' ).dxCheckBox({
                        name: 'acceptAsDoubleDip',
                        hint: 'Allow as Double Dip',
                        value: !! options.data.exceptionSuppressList,
                        disabled: isClosed || isViewOnly,
                        onValueChanged: function( e ) {
                            options.data.exceptionSuppressList = e.value ? options.data.proofOfDeliveryId : null;

                            instance.podUpdates[ options.data.proofOfDeliveryId ] = {
                                claimId: options.data.claimId,
                                proofOfDeliveryId: options.data.proofOfDeliveryId,
                                flagComment: e.value ? options.data.flagComment : ""
                            };
                        }
                    });

                    acceptCheckbox.appendTo( container );
                }
            }
        ],
        summary: {
            groupItems: [
                {
                    column: 'itemQty',
                    summaryType: 'sum',
                    displayFormat: '{0}',
                    valueFormat: {
                        type: 'fixedPoint',
                        precision: 2
                    },
                    alignByColumn: true
                },
                {
                    column: 'totalRebate',
                    summaryType: 'sum',
                    valueFormat: 'currency',
                    displayFormat: '${0}',
                    valueFormat: {
                        type: 'fixedPoint',
                        precision: 2
                    },
                    alignByColumn: true
                }
            ]
        }
    }).dxDataGrid( 'instance' );

}

ClaimReview.prototype.refreshKPIs = function() {
    let instance = this;

    instance._loadStats().done(function() {

        instance.pendingCountElement.text(
            DevExpress.localization.formatNumber( instance.stats.pendingCount || 0 )
        );

        instance.agingCountElement.text(
            DevExpress.localization.formatNumber( instance.stats.agingCount || 0 )
        );

        instance.completionPctElement.text(
            DevExpress.localization.formatNumber( instance.stats.completionPct || 0, "percent" )
        );

        instance.potentialRecoveryElement.text(
            DevExpress.localization.formatNumber( instance.stats.potentialRecovery || 0, "currency" )
        );

        instance.realizedOffsetsElement.text(
            DevExpress.localization.formatNumber( instance.stats.realizedOffsets || 0, "currency" )
        );

        instance.realizedOffsetsSubElement.text(
            "MTD: " +
            DevExpress.localization.formatNumber( instance.stats.realizedOffsetsMTD || 0, "currency" ) +
            " | YTD: " +
            DevExpress.localization.formatNumber( instance.stats.realizedOffsetsYTD || 0, "currency" )
        );

    });
}

ClaimReview.prototype.getObjectParams = function() {
    let instance = this;
    let parameters = {};

    let claimPendingStatus = instance.claimStatusSelectBox.option( 'value' );
    let claimPendingOperator = instance.operatorSelectBox.option( 'value' );
    let claimStartDate = instance.claimStartDateBox.option( 'value' );
    let claimEndDate = instance.claimEndDateBox.option( 'value' );

    if( claimPendingStatus ) {
        parameters.claimPendingStatus = claimPendingStatus;
    }

    if( claimPendingOperator ) {
        parameters.claimPendingOperator = claimPendingOperator;
    }

    if( claimStartDate ) {
        parameters.claimStartDate = claimStartDate;
    }

    if( claimEndDate ) {
        parameters.claimEndDate = claimEndDate;
    }

    return parameters;
}