monthlyBilling.prg

<?php
/* File: monthlyBilling.prg
 * Purpose: To initialize grid and CRUD calls on the monthly billing page
 */
$ableToRunBilling = GetAbleToRunBilling($dbh, $Hu);
?>

<script type="text/javascript">

<?php
// Get common JS functions here.
getShowWaitFunctions();

?>

<?php
/**
 * function ShowWarnings(warnings)
 * This shows the warnings for things found in billing for example.
 *
 * @param array warnings -- Warnings to show.
 */
?>
function ShowWarnings(warnings) {
  var keys = Object.keys(warnings);
  $("#warningDiv").empty();
  if (keys.length == 0) {
    $("#warningDiv").hide();
    return;
  }
  $("#warningDiv").show();
  for(var j = 0; j != keys.length; j++) {
    var cuId = "cu_" + keys[j];
    var theseKeys = Object.keys(warnings[keys[j]]);
    $("#warningDiv").append("<div id='" + cuId + "'></div>");
    for(var i = 0; i != theseKeys.length; i++) {
      var prodId = "prod_" + theseKeys[i];
      var prodArray = warnings[keys[j]][theseKeys[i]];
      $("#" + cuId).append("<div id='" + prodId + "'>" + prodArray.join("<br>") + "</div>");
    }
  }

}

var runBillingDS = null;
var runBillingIntervalFunc = null;

<?php
/**
 * function InitDataSources()
 * This initializes all the datasources that already part of a grid.
 */
?>
function InitDataSources() {

    <?php
    /**
     * @var runBillingDS
     * This provides a place for all the calls of the run billing process.
     * Each step passes the sid and other information to the next step.
     * Steps are "gather", "check", "run", and "cleanup."
     */
    ?>
    runBillingDS = new kendo.data.DataSource({
        transport: {
            read: {
                url: "index.prg",
                dataType: "json",
                type: "POST",
                data: {
                    operation: "gatherBillingInfo"
                }
            },
            parameterMap: function(data, type) {
                showWaitWindow();
                return data;
            }
        },
        schema: {
            parse: function (data) {


                if (data.status !== "000") {
                    $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );

                    hideWaitWindow();

                    if (data.type == "check") {
                        clearInterval(runBillingIntervalFunc);
                    }
                } else {

                    switch(data.type) {
                        case "gather":
                            <?php // Now check to see if completed ?>

                            var childCall = "gatherBillingInfoChildren";
                            var childTypes = ["contracts", "estatements", "ivr", "ipay", "timetrack"];
                            var checkRunBillingInterval = <?php echo CheckRunBillingInterval(); ?>;

                            runBillingIntervalFunc = setInterval(function() { runBillingDS.read({operation: "checkBillingInfo", sid: data.sid}); },
                                checkRunBillingInterval);

                            <?php if ($SYSENV["devmode"] == 1) { ?>
                            var parameters = {sid: data.sid, reportDate: data.reportDate, cutoffDate: data.cutoffDate,
                                              cutoffTime: data.cutoffTime, operation: childCall, callMy: data.callMy};
                            <?php } else { ?>
                            var parameters = {sid: data.sid, reportDate: data.reportDate, cutoffDate: data.cutoffDate,
                                              cutoffTime: data.cutoffTime, operation: childCall};
                            <?php } ?>


                            for (var i = 0; i != childTypes.length; i++) {

                                <?php // Cannot seem to use the same DS for multiple calls at the same time. ?>
                                $.post("index.prg?childType=" + childTypes[i], parameters);
                            }
                            break;
                        case "check":
                            <?php // Logic to go run billing if completed ?>
                            if (data.ready) {
                                clearInterval(runBillingIntervalFunc);
                                runBillingDS.read({operation: "runBilling", sid: data.sid});
                            }

                            break;
                        case "run":
                            runBillingDS.read({operation: "runBillingCleanup", sid: data.sid});
                            break;
                        case "cleanup":
                            <?php // Once completed, call query to get table results ?>
                            $("#billingGrid").data("kendoGrid").dataSource.read();
                            break;
                        case "child":
                            break;
                    }
                }

                return [];

            }
        }
    });
}

<?php
/**
 * function InitMonthlyBilling()
 * This sets up the main grid for running monthly billing.
 */
?>
function InitMonthlyBilling() {
    <?php
    /**
     * @var grid
     * This is the main grid for monthly billing.  It is three levels.
     */
    ?>
    var grid = $("#billingGrid").kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: "index.prg",
                    dataType: "json",
                    type: "POST",
                    data: {
                        operation: "monthlyBillingLoad"
                    }
                },
                parameterMap: function(data, type) {
                    showWaitWindow();
                    return data;
                }
            },
            schema: {
                model: {
                    id: "month",
                    fields: {
                        month: {type: "date", editable: false, nullable: false},
                        runDate: {type: "date"},
                        completeDate: {type: "date"},
                        status: {type: "string"},
                        message: {type: "string"},
                        cus: {type: "odata"},
                        mainStatus: {type: "string"}
                    }
                },
                parse: function (data) {
                    hideWaitWindow();

                    if (data.status !== "000") {
                        $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
                        return [];
                    } else {
                        ShowWarnings(data.warnings);

                        <?php // Check if there is a process running and if so, then display running window ?>
                        <?php if ($ableToRunBilling) { ?>
                            if (!ignoreProgress && data.running.length > 0) {
                                SetupProgressBar(data.running[0].month, kendo.toString(new Date(data.running[0].month), "MMMM yyyy"));
                            }
                        <?php } ?>

                        return data.record;
                    }

                }
            }
        },
        columns: [
            {field: "status", hidden: true},
            {field: "month", title: "Month", format: "{0:MMM yyyy}", width: "15%"},
            {field: "runDate", title: "Start", format: "{0:MM/dd/yyyy}", width: "15%"},
            {field: "mainStatus", title: "Main Status", width: "15%"},
            {field: "completeDate", title: "Completed Date",
                template: "# if (completeDate == null) { # # } else { # #: kendo.toString(completeDate, 'MM/dd/yyyy') # # } #", width: "15%"}
        ],
        toolbar: [<?php if ($ableToRunBilling) { ?> {name: "startBilling", text: "Start Billing"}, <?php } ?> {name: "createReport", text: "Create Report"}],
        detailTemplate: "<div class=\"grid_12\"><div class=\"errorDiv\"></div></div><div class=\"grid_12\">"
                        + "<div class=\"detailGrid1\" style=\"width:100%\"></div></div>",
        detailInit: function (eOuter) {

            var errorMessage = "(No errors)";
            var errorDiv = eOuter.detailRow.find(".errorDiv");
            if (eOuter.data.status.trim() != "") {
                errorMessage = eOuter.data.message;
                eOuter.masterRow.css({color: "red", fontWeight: "bold"});
                errorDiv.css({color: "red", fontWeight: "bold"});
            }
            errorDiv.text(errorMessage);
            var detailGrid1 = eOuter.detailRow.find(".detailGrid1").kendoGrid({
                dataSource: {
                    transport: {
                        read: function (options) {
                            options.success(eOuter.data.cus);
                        }
                    },
                    schema: {
                        model: {
                            id: "cu",
                            fields: {
                                cu: {type: "string", editable: false, nullable: false},
                                totalAmount: {type: "number"},
                                invoices: {type: "odata"},
                                type: {type: "string"},
                                cuName: {type: "string"}
                            }
                        }
                    }
                },
                columns: [
                    {field: "cuName", title: "CU"},
                    {field: "cu", title: "CU No.", width: "15%"},
                    {field: "type", title: "Type", width: "15%"},
                    {field: "totalAmount", title: "Total", format: "{0:c}", width: "15%", attributes: {style: "text-align: right;"}}
                ],
                detailTemplate: "<div class=\"detailGrid2\"></div>",
                detailInit: function (eMiddle) {
                    var detailGrid2 = eMiddle.detailRow.find(".detailGrid2").kendoGrid({
                        dataSource: {
                            transport: {
                                read: function (options) {
                                    options.success(eMiddle.data.invoices);
                                }
                            },
                            schema: {
                                model: {
                                    id: "preInvoiceId",
                                    fields: {
                                        preInvoiceId: {type: "number", editable: false, nullable: false},
                                        featureBillingDetailId: {type: "number"},
                                        invoiceDescription: {type: "string"},
                                        quantity: {type: "number"},
                                        amount: {type: "number"},
                                        productDescription: {type: "string"},
                                        featureDescription: {type: "string"},
                                        quantityLabel: {type: "string"}
                                    }
                                }
                            }
                        },
                        columns: [
                            {field: "featureBillingDetailId", title: "Id", width: "8%", attributes: {style: "text-align: right;"}},
                            {field: "productDescription", title: "Product"},
                            {field: "featureDescription", title: "Feature"},
                            {field: "invoiceDescription", title: "Description"},
                            {field: "quantity", title: "Count", template: "#= Number(quantity) # #= quantityLabel #", width: "15%"},
                            {field: "amount", title: "Total", format: "{0:c}", width: "15%", attributes: {style: "text-align: right;"}}
                        ]
                    }).data("kendoGrid");
                }
            }).data("kendoGrid");
           },
        dataBound: function (eOuter) {
            $("#billingGrid .k-grid-content .k-master-row").each(function () {
                if ($(this).find("td:eq(1)").text().trim() != "") {
                    $(this).css({color: "red", fontWeight: "bold"});
                }
            });


        }
    }).data("kendoGrid");

}

<?php
/**
 * function SetupReport()
 * This function sets up the report.
 * Report is by month and has all the information that the grid has.
 */
?>
function SetupReport() {
    // Initialize window
    var reportWindow = $("#reportWindow").kendoWindow({
        content: {
            template: kendo.template($("#reportTemplate").html())
        },
        modal: true,
        title: "Get Report For...",
        visible: false,
        actions: [],
        draggable: false,
        resizable: false,
        width: 400
    }).data("kendoWindow");

    var previousMonth = new Date();
    previousMonth.setMonth(previousMonth.getMonth() - 1);
    previousMonth.setDate(1);
    previousMonth.setHours(0,0,0,0);

    // Initialize controls
    var reportMonthPicker = $("#reportMonthPicker").kendoDatePicker({
        depth: "year",
        start: "year",
        format: "MMM yyyy"
    }).data("kendoDatePicker");

    // Initialize click events
    $("#billingGrid").on("click", ".k-grid-createReport", function () {
        reportMonthPicker.value(previousMonth);
        reportWindow.open();
        reportWindow.center();
        return false;
    });

    $("#reportWindow .reportOkayBtn").click(function () {
        showWaitWindow();
        reportWindow.close();

        var simpleReportMonth = '<input name="reportDate" value="' + kendo.toString(reportMonthPicker.value(), "yyyy-MM-dd") + '">';
        var send = "";

        if ($("#asCSV").prop("checked")) {
            send = '<form id="sendForm" style="display:none;" action="index.prg?operation=monthReportCSV" method="POST">';
            send += simpleReportMonth;
            send += '</form>';
        } else {
            send = '<form id="sendForm" style="display:none;" action="index.prg?page=monthReport" method="POST">';
            send += simpleReportMonth;
            send += '</form>';
        }

        $("#reportWindow").append(send);
        $("#sendForm").submit();
        $("#sendForm").remove();
        hideWaitWindow();
        $("#asCSV").prop("checked", false);
        return false;
    });

    $("#reportWindow .reportCancelBtn").click(function () {
        reportWindow.close();
        return false;
    });
}

<?php
/**
 * function SetupProgressBar(selectedMonth, selectedMonthDisplay)
 * This function sets up the progress bar.
 * The progress bar shows up when the page is access when the QWBC is running.
 *
 * @param selectedMonth -- the month to see progress.
 * @param selectedMonthDisplay -- the display of the month.
 */
?>
function SetupProgressBar(selectedMonth, selectedMonthDisplay) {
    var progressWindow = $("#progressWindow").data("kendoWindow");
    if (progressWindow == null) {
        progressWindow = $("#progressWindow").kendoWindow({
            content: {
                template: kendo.template($("#progressTemplate").html())
            },
            modal: true,
            title: "QWBC is running",
            visible: false,
            actions: [],
            draggable: false,
            resizable: false,
            width: 400
        }).data("kendoWindow");
    }

    showWaitWindow();
    $.post("index.prg?operation=monthlyProgressLoad", {reportDate: selectedMonth}, function (data) {
        hideWaitWindow();
        if (data.status !== "000") {
            $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
        } else {
            var progressBar = $("#progressBar").kendoProgressBar({
                min: 0,
                max: 1,
                type: "percent"
            }).data("kendoProgressBar");

            var title = "Running for " + selectedMonthDisplay;
            if (data.record.length > 0) {
                var record = data.record[0];
                progressBar.value(record.progress);

                if (record.type == "QWBC") {
                    title += " (QWBC)";
                }
            } else {
               progressBar.value(0);
            }
            progressWindow.title(title);

            progressWindow.open().center();

            intervalFunc = setInterval(ProgressIntervalFunction(selectedMonth), 100);
        }
    });
}

var intervalFunc;
var previousValue1 = -1;
var previousValue2 = -1;
var previousValue3 = -1;
var ignoreProgress = false;
<?php
/**
 * function ProgressIntervalFunction(selectedMonth)
 * This function is run continually until the process completes or it returns the same values three times.
 * @param selectedMonth -- month found to have an uncompleted process running
 */
?>
function ProgressIntervalFunction(selectedMonth) {
    var progressBar = $("#progressBar").data("kendoProgressBar");
    var progressWindow = $("#progressWindow").data("kendoWindow");
    showWaitWindow();
    $.post("index.prg?operation=monthlyProgressLoad", {reportDate: selectedMonth}, function (data) {
        hideWaitWindow();
        if (data.status !== "000") {
            $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
        } else {
            var progress = data.record[0].progress;
            progressBar.value(progress);

            var threeValuesSame = previousValue1 == previousValue2 && previousValue2 == previousValue3 && previousValue1 != -1;
            ignoreProgress = threeValuesSame;
            previousValue3 = previousValue2;
            previousValue2 = previousValue1;
            previousValue1 = progress;

            if (progress >= 1 || threeValuesSame) {
                clearInterval(intervalFunc);
                progressWindow.close();

                // Don't bother refreshing if no new processes have finished.
                if (!threeValuesSame) {
                    $("#billingGrid").data("kendoGrid").dataSource.read();
                }
            }
        }
    });
}

<?php if ($ableToRunBilling) { ?>
var availableMonths = [];
<?php
/**
 * function InitRunBilling()
 * This function initializes the windows, controls, and click events for running billing.
 */
?>
function InitRunBilling() {
    var window = $("#startBillingWindow").data("kendoWindow");

    var monthMap = GetMonthMap();

    // Initialize windows
    var window = $("#startBillingWindow").kendoWindow({
        content: {
                template: kendo.template($("#startBillingTemplate").html())
        },
        modal: true,
        title: "Start Billing",
        visible: false,
        actions: [],
        draggable: false,
        resizable: false,
        width: 400
    }).data("kendoWindow");

    var startBillingBtn = $("#billingGrid .k-grid-startBilling").kendoButton({
        click: function () {
            $.homecuValidator.setup({formValidate: "billingForm", formStatusField: "formValidateBillingDiv"});

                var billingMonthPicker = $("#billingMonthPicker").data("kendoDatePicker");
                var cutoffPicker = $("#cutoffPicker").data("kendoDateTimePicker");
                if (billingMonthPicker == null) {
                    // Initialize controls
                    cutoffPicker = $("#cutoffPicker").kendoDateTimePicker({
                        format: "yyyy-MM-dd HH:mm:ss",
                        parseFormats: ["yyyy-MM-dd HH:mm:ss"],
                        change: function () {
                            var value = this.value();
                            if (value == null || $("#cutoffPicker").val().trim() == "") {
                                this.value(null);
                            }
                        }
                    }).data("kendoDateTimePicker");

                    billingMonthPicker = $("#billingMonthPicker").kendoDatePicker({
                        depth: "year",
                        start: "year",
                        format: "MMM yyyy",
                        change: function () {
                            var value = this.value();
                            if (value == null || $("#billingMonthPicker").val().trim() == "") {
                                this.value(null);
                            } else {
                                value.setDate(1);
                                value.setHours(0,0,0,0);
                                cutoffPicker.value(GetMonthCutoff(value, monthMap));
                            }
                        }
                    }).data("kendoDatePicker");

                    <?php if ($SYSENV["devmode"] == 1) { ?>
                        var debugDDL = $("#debugDDL").kendoDropDownList({
                            dataSource: ["localhost", "my.homecu.net"],
                            value: "Localhost"
                        }).data("kendoDropDownList");
                    <?php } ?>
                }
                billingMonthPicker.value(null);
                cutoffPicker.value(null);

            window.open();
            window.center();
            return false;
        }
    }).data("kendoButton");

    <?php // Initialize click events ?>
    $("#startBillingWindow").on("click", ".startBillingBtn", function () {
        if ($.homecuValidator.validate()) {
            window.close();

            <?php // Reset the validator so any errors show up in the main screen yet again. ?>
            $.homecuValidator.setup({formValidate:'formMain', formStatusField: 'formValidateMainDiv'});

            var billingMonthPicker = $("#billingMonthPicker").data("kendoDatePicker");
            var cutoffPicker = $("#cutoffPicker").data("kendoDateTimePicker");
            var selectedMonth = kendo.toString(new Date(billingMonthPicker.value()), "yyyy-MM-dd");
            var selectedMonthDisplay = kendo.toString(new Date(billingMonthPicker.value()), "MMMM yyyy");
            var cutoffDate = kendo.toString(cutoffPicker.value(), "yyyy-MM-dd");
            var cutoffTime = kendo.toString(cutoffPicker.value(), "HH:mm:ss");

            var parameters = {reportDate: selectedMonth, cutoffDate: cutoffDate, cutoffTime: cutoffTime};

            <?php if ($SYSENV["devmode"] == 1) { ?>

                var debugValue = $("#debugDDL").data("kendoDropDownList").value();
                switch(debugValue) {
                    case "my.homecu.net":
                        parameters.operation = "gatherBillingInfoOdyssey";
                        break;
                    default:
                        parameters.operation = "gatherBillingInfo";
                        break;

                }
            <?php } else { ?>
                parameters.operation = "gatherBillingInfo";
            <?php } ?>
            runBillingDS.read(parameters);
        }
        return false;
    });

    $("#startBillingWindow").on("click", ".cancelBillingBtn", function() {
        window.close();
        return false;
    })
}

<?php
/* This function gets a list of available months.  It first goes through the grid and if there is a month that is incompletely run, that will be in the array.
And then it will get months that aren't in the grid.
 * Parameters: getAllIn6months-- Boolean if true, then the last 6 months will be returned regardless if month hasn't been run, was run successfully,
 or was run unsuccessfully;
 *      if false, then if there is any incomplete months they will be returned ONLY.  If there are no incomplete months, then months in the past 6 months
 that haven't been run will be returned.
 * Returns: list of availableMonths in the criteria above
 */ ?>
<?php
/**
 * function GetMonthCutoff(monthDate, monthMap)
 * This function gets a list of available months.
 * It first goes through the grid and if there is a month that is incompletely run,
 * that will be in the array.
 * And then it will get months that aren't in the grid.
 *
 * @param monthDate -- the date of the month.
 * @param monthMap -- a list of months with start dates and times.
 */
?>
function GetMonthCutoff(monthDate, monthMap) {
    var monthString = kendo.toString(monthDate, "yyyy-MM-dd");
    var cutoff = monthMap.map[monthString];
    var firstOfMonth = new Date(monthDate);
    var month = firstOfMonth.getMonth() + 1;
    var year = firstOfMonth.getFullYear();
    var actualMonth = month - 1;
    var actualYear = year;

    if (cutoff == null) {
        if (monthMap.first == null) { <?php // There isn't anything in the map. ?>
            if (month == 1) {
                month = 12;
                year--;
            } else {
                month--;
            }
            cutoff = new Date("" + month + "/1/" + year)
        } else if (firstOfMonth.getTime() >= monthMap.last.getTime()) {
            monthString = kendo.toString(monthMap.last, "yyyy-MM-dd");
            cutoff = new Date(monthMap.map[monthString]);
        } else if (firstOfMonth.getTime() == monthMap.first.getTime()) {
            monthString = kendo.toString(monthMap.first, "yyyy-MM-dd");
            cutoff = new Date(monthMap.map[monthString]);
        } else if (firstOfMonth.getTime() < monthMap.first.getTime()) {
            cutoff = new Date(monthDate);
        } else {
            while (cutoff == null) {
                month--;
                if (month == 0) {
                    month = 12;
                    year--;
                } else if (month == 13) {
                    month = 1;
                    year++;
                }

                firstOfMonth = new Date("" + month + "/1/" + year);
                monthString = kendo.toString(firstOfMonth, "yyyy-MM-dd");
                cutoff = monthMap.map[monthString] == null ? null : new Date(monthMap.map[monthString]);
            }
        }
    } else {
        cutoff = new Date(cutoff);
    }

    <?php // Set the cutoff to the previous month now that it is found. ?>
    actualMonth--;
    if (actualMonth == -1) {
        actualMonth = 11;
        actualYear--;
    } else if (actualMonth == 12) {
        actualMonth = 0;
        actualYear++;
    }
    cutoff.setFullYear(actualYear, actualMonth, 1);
    return cutoff;
}

<?php
/**
 * function GetMonthMap()
 * This gets the month map.
 */
?>
function GetMonthMap() {
    var gridData = $("#billingGrid").data("kendoGrid").dataSource.data();
    var monthMap = {first: null, last: null, map: {}};
    for(var i = 0; i != gridData.length; i++) {
        var record = gridData[i];
        var monthLabel = kendo.toString(record.month, "MMM yyyy");
        var monthString = kendo.toString(record.month, "yyyy-MM-dd");
        var cutoff = new Date(record.runDate);
        monthMap.map[monthString] = cutoff;
        if (monthMap.first == null || record.month.getTime() < monthMap.first.getTime()) {
            monthMap.first = new Date(record.month); <?php // So it doesn't point to the same object. ?>
        }
        if (monthMap.last == null || record.month.getTime() > monthMap.last.getTime()) {
            monthMap.last = new Date(record.month);
        }
    }
    return monthMap;
}
<?php } // End check if user has edit powers ?>

$(document).ready(function () {
    $.homecuValidator.setup({formValidate:'formMain', formStatusField: 'formValidateMainDiv'});
    InitMonthlyBilling();
    SetupReport();
    InitDataSources();

    <?php if ($ableToRunBilling) { ?>
    InitRunBilling();
    <?php } ?>
})
</script>

<?php if ($ableToRunBilling) { ?>
<script id="startBillingTemplate" type="text/x-kendo-template">
    <div class="k-edit-form-container">
       <div id="formValidateBillingDiv" class="homecu-formStatus k-block k-error-colored" style="display:none;"></div>
       <form id="billingForm" data-role="validator" novalidate>
            <div class="container_12">
                <div class="grid_12">
                    <div class="grid_4 alpha">
                        <label>Month:</label>
                     </div>
                     <div class="grid_7">
                         <input id="billingMonthPicker" name="billingMonth" required data-required-msg="Billing month is required" style="width:100%">
                     </div>
                     <div class="grid_1 omega">
                         <span data-for='billingMonth' class='k-invalid-msg'></span>
                     </div>
                </div>
                <div class="grid_12">
                    <div class="grid_4 alpha">
                        <label>Cutoff:</label>
                     </div>
                     <div class="grid_7">
                         <input id="cutoffPicker" name="cutoff" required data-required-msg="Cutoff time is required" style="width:100%">
                     </div>
                     <div class="grid_1 omega">
                         <span data-for='cutoff' class='k-invalid-msg'></span>
                     </div>
                </div>
                <?php if ($SYSENV["devmode"] == 1) { ?>
                <div class="grid_12">
                    <div class="grid_4 alpha">
                        <label>Contract Source:</label>
                     </div>
                     <div class="grid_7">
                         <div id="debugDDL"></div>
                     </div>
                     <div class="grid_1 omega">
                         &nbsp;
                     </div>
                </div>
                <?php } ?>
            </div>
        </form>
        <div class="k-edit-buttons k-state-default">
            <a class="k-button k-button-icontext k-primary startBillingBtn" href="\#">
                <span class="k-icon k-update"></span>Start
            </a>
            <a class="k-button k-button-icontext cancelBillingBtn" href="\#">
                <span class="k-icon k-cancel"></span>Cancel
            </a>
        </div>
    </div>
</script>
<script id="progressTemplate" type="text/x-kendo-template">
    <div class="k-edit-form-container">
        <div class="container_12">
            <div class="grid_12">
                <div id="progressBar" style="width:100%"></div>
            </div>
        </div>
    </div>
</script>
<?php } ?>
<script id="reportTemplate" type="text/x-kendo-template">
    <div class="k-edit-form-container">
       <div id="formValidateReportDiv" class="homecu-formStatus k-block k-error-colored" style="display:none;"></div>
       <form id="reportForm" data-role="validator" novalidate>
            <div class="container_12">
                <div class="grid_12">
                    <div class="grid_4 alpha">
                        <label>Month:</label>
                     </div>
                     <div class="grid_7">
                         <input id="reportMonthPicker" name="reportMonth" required data-required-msg="Report month is required" style="width:100%">
                     </div>
                     <div class="grid_1 omega">
                         <span data-for='reportMonth' class='k-invalid-msg'></span>
                     </div>
                </div>
                <div class="grid_12">
                    <div class="grid_4 alpha">
                        <label>As CSV:</label>
                     </div>
                     <div class="grid_7">
                         <input id="asCSV" name="asCSV" type="checkbox">
                     </div>
                     <div class="grid_1 omega">
                         <span data-for='asCSV' class='k-invalid-msg'></span>
                     </div>
                </div>
            </div>
        </form>
        <div class="k-edit-buttons k-state-default">
            <a class="k-button k-button-icontext k-primary reportOkayBtn" href="\#">
                <span class="k-icon k-update"></span>Okay
            </a>
            <a class="k-button k-button-icontext reportCancelBtn" href="\#">
                <span class="k-icon k-cancel"></span>Cancel
            </a>
        </div>
    </div>
</script>
<div id="startBillingWindow"></div>
<div id="progressWindow"></div>
<div id="reportWindow"></div>
<div id="runningWindow"></div>
<div class="container_12">
    <div id="formMain"></div>
    <div id="formValidateMainDiv" style="display:none;"></div>
    <div class="grid_12">
        <div id="warningDiv" class="k-block" style="display:none;"></div>
    </div>
    <div class="grid_12">
        <div id="billingGrid"></div>
    </div>
</div>