@*@model OPS.Models.allwastemodels*@

@{
    // ViewBag.currentDate = DateTime.Today.ToString("yyyy-MM-dd");
    ViewBag.DatePageType = "Reporting";
    ViewBag.Title = "Reports";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript">


    $(document).ready(function () {

        //set the value of the datepicker and Shift via session variables
        $('#datepicker').val('@(Session["currentDate"])');
        $('#shift').val('@(Session["currentShift"])');
        $('#shift').selectmenu('refresh');

        $('#btnChartTypeDaily').attr("data-theme", "b").addClass("ui-btn-active");
        $('#btnChartTypeWeekly').attr("data-theme", "c").removeClass("ui-btn-active");
        $('#btnChartTypeMonthly').attr("data-theme", "c").removeClass("ui-btn-active");

        $('#LabourUtilizationReportsView').hide();
        $('#LabourControlReportsView').hide();
        $('#DownTimeReportsView').hide();
        $('#ReportType').val('Daily');

        var tabstrip = $("#line-filtering-tabs").kendoTabStrip().data("kendoTabStrip");
        tabstrip.select(0);
        var tabstrip = $("#year-filtering-tabs").kendoTabStrip().data("kendoTabStrip");
        tabstrip.select(0);
    });

    window.onload = ignition;

    function ignition() {
        resizeGraph();
        UpdateCharts();
    }

    function _GetAttr() {
        
        return {
            LineName: $("#line-filtering-tabs").data("kendoTabStrip").value(),
            Shift: $("#shift").val(),
            Type: $('#ReportType').val(),
            Date: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd"),
        };
    }

    function _GetAttrTop3(catnumber) {
      
        return {
            LineName: $("#line-filtering-tabs").data("kendoTabStrip").value(),
            Shift: $("#shift").val(),
            CatNum: catnumber
        };
    }

    function UpdateCharts() {

        UpdateSessionReportType();
        
        alert($('#LineCatcher').val());
        //Waste
        if ($("#year-filtering-tabs").data("kendoTabStrip").value() == "Waste") {

            var chart1 = $("#TotalWasteChart").data("kendoChart");
            var chart2 = $("#WasteCategoriesChart").data("kendoChart");
            var chart3 = $("#WasteCategory1Chart").data("kendoChart");
            var chart4 = $("#WasteCategory2Chart").data("kendoChart");
            var chart5 = $("#WasteCategory3Chart").data("kendoChart");
            chart1.dataSource.read();
            chart2.dataSource.read();
            chart3.dataSource.read();
            chart4.dataSource.read();
            chart5.dataSource.read();

            $.ajax({
                url: "/Report/_GetWasteTitle",
                type: 'POST',
                data: "{'LineName':'" + $("#line-filtering-tabs").data("kendoTabStrip").value() +
                        "','Shift':'" + $("#shift").val() +
                        "','Type':'" + $('#ReportType').val() +
                        "','Date':'" + kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd") + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                cache: false,
                async: false,
                success: function (data) {

                    for (var i = 0, len = data.length; i < len; ++i) {

                        var report = data[i];
                        if (report.Chart == '1') {
                            var charta = $("#WasteCategory1Chart").data("kendoChart")
                            charta.options.title.text = report.Title
                            charta.refresh();
                        }
                        if (report.Chart == '2') {
                            var chartb = $("#WasteCategory2Chart").data("kendoChart")
                            chartb.options.title.text = report.Title
                            chartb.refresh();
                        }
                        if (report.Chart == '3') {
                            var chartc = $("#WasteCategory3Chart").data("kendoChart")
                            chartc.options.title.text = report.Title
                            chartc.refresh();
                        }
                    }

                }
            });

        }
        
    }

    // resizes the chart if the window size changes
    $(window).resize(function () {
        resizeGraph();
    });

    function resizeGraph() {
        //Waste
        $("#TotalWasteChart").height($(window).height() * 0.40);
        $("#TotalWasteChart").width($(window).width() * 0.53);
        $("#WasteCategoriesChart").height($(window).height() * 0.40);
        $("#WasteCategoriesChart").width($(window).width() * 0.44);

        $("#WasteCategory1Chart").height($(window).height() * 0.33);
        $("#WasteCategory1Chart").width($(window).width() * 0.323);
        $("#WasteCategory2Chart").height($(window).height() * 0.33);
        $("#WasteCategory2Chart").width($(window).width() * 0.323);
        $("#WasteCategory3Chart").height($(window).height() * 0.33);
        $("#WasteCategory3Chart").width($(window).width() * 0.323);

        $("#TotalWasteChart").data("kendoChart").redraw();
        $("#WasteCategoriesChart").data("kendoChart").redraw();
        $("#WasteCategory1Chart").data("kendoChart").redraw();
        $("#WasteCategory2Chart").data("kendoChart").redraw();
        $("#WasteCategory3Chart").data("kendoChart").redraw();

    }

    //Waste
    $("#TotalWasteChart").height($(window).height() * 0.40);
    $("#TotalWasteChart").width($(window).width() * 0.45);

    $("#WasteCategoriesChart").height($(window).height() * 0.40);
    $("#WasteCategoriesChart").width($(window).width() * 0.45);

    $("#WasteCategory1Chart").height($(window).height() * 0.33);
    $("#WasteCategory1Chart").width($(window).width() * 0.33);

    $("#WasteCategory2Chart").height($(window).height() * 0.33);
    $("#WasteCategory2Chart").width($(window).width() * 0.33);

    $("#WasteCategory3Chart").height($(window).height() * 0.33);
    $("#WasteCategory3Chart").width($(window).width() * 0.33);


    $("#line-filtering-tabs").kendoTabStrip({
        dataSource: ["All", "Main Break", "Packaging", "Ham", "Shoulder", "Loin"],
        change: function (e) {
            var line = $("#line-filtering-tabs").data("kendoTabStrip").value();
            $('#LineCatcher').val(line);
            $(UpdateCharts());
        },
    });

    $("#year-filtering-tabs").kendoTabStrip({
        dataSource: ["Waste", "Lost Time", "Labour Control", "Labour Utilization"],
        change: function (e) {
            $(SwitchChartView());
            $(UpdateCharts());
        },
    });


    function SwitchChartView() {

        var type = $("#year-filtering-tabs").data("kendoTabStrip").value();

        if (type == 'Waste') {
            $('#DownTimeReportsView').hide('slow');
            $('#LabourControlReportsView').hide('slow');
            $('#LabourUtilizationReportsView').hide('slow');
            $('#WasteReportsView').show('slow');
        }
    }


    $('#btnChartTypeDaily').bind('touchstart click', function (event) {
        //change the button themes
        $('#btnChartTypeDaily').attr("data-theme", "b").addClass("ui-btn-active");
        $('#btnChartTypeWeekly').attr("data-theme", "c").removeClass("ui-btn-active");
        $('#btnChartTypeMonthly').attr("data-theme", "c").removeClass("ui-btn-active");

        //save the type to the hidden input
        $('#ReportType').val('Daily');
        UpdateCharts();

    });


    $('#btnChartTypeWeekly').bind('touchstart click', function (event) {
        //change the button themes
        $('#btnChartTypeWeekly').attr("data-theme", "b").addClass("ui-btn-active");
        $('#btnChartTypeDaily').attr("data-theme", "c").removeClass("ui-btn-active");
        $('#btnChartTypeMonthly').attr("data-theme", "c").removeClass("ui-btn-active");

        //save the type to the hidden input
        $('#ReportType').val('Weekly');
        UpdateCharts();
    });


    $('#btnChartTypeMonthly').bind('touchstart click', function (event) {
        //change the button themes
        $('#btnChartTypeMonthly').attr("data-theme", "b").addClass("ui-btn-active");
        $('#btnChartTypeWeekly').attr("data-theme", "c").removeClass("ui-btn-active");
        $('#btnChartTypeDaily').attr("data-theme", "c").removeClass("ui-btn-active");

        //save the type to the hidden input
        $('#ReportType').val('Monthly');
        UpdateCharts();
    });

</script>

<div id="chart-type-chooser">
    <a href="#" data-role="button" data-theme="c" id="btnChartTypeDaily">D</a>
    <a href="#" data-role="button" data-theme="c" id="btnChartTypeWeekly">W</a>
    <a href="#" data-role="button" data-theme="c" id="btnChartTypeMonthly">M</a>
</div>

<input type="hidden" id="ReportType" value="" />
<input type="hidden" id="DateCatcher" value="" />


@*sets the report menu tab*@
<div id="year-filtering-tabs" class="reporting-tabs"></div>

<div id="WasteReportsView">

    <table>
        <tr>
            <td>
                <div class="chart-wrapper" data-inline="true">
                    @(Html.Kendo().Chart<OPS.Models.TotalChartModel>()
                    .Name("TotalWasteChart")
                    .Title("Total Waste")

                    .Legend(legend => legend
                        .Visible(false)
                        )

                    .DataSource(ds => ds.Read(read => read.Action("_GetTotalWaste", "Report")
                                                            .Data("_GetAttr")))
                                                                                    .AutoBind(false)

                    .Series(series =>
                    {
                        series
                            .Column(model => model.Value)
                            .Name("Waste")
                            .Color("#FF0000")
                            .Overlay(ChartBarSeriesOverlay.None)
                            .Labels(labels => labels.Format("${0:N0}").Visible(false))
                            .Gap(.3);

                        series
                            .Line(model => model.MAvg)
                            .Name("Waste")
                            .Color("#000000")
                            .Labels(labels => labels.Format("${0:N0}").Visible(false));                        
                        
                    })
                    .CategoryAxis(axis => axis
                        .Categories(model => model.Date)
                        .Line(line => line.Visible(true))
                        .MajorGridLines(lines => lines.Visible(false))
                        .MinorGridLines(lines => lines.Visible(false))
                        .Labels(labels => labels.Rotation(-45)
                                                .Padding(0, 0, 0, -35))
                    )
                    .ValueAxis(axis => axis.Numeric()
                        .Title("Annual Value")
                        .Line(line => line.Visible(true))
                        .Labels(labels => labels.Format("${0:N0}"))
                        .MajorGridLines(lines => lines.Visible(false))
                        .MinorGridLines(lines => lines.Visible(false))
                    )
                    .Tooltip(tooltip => tooltip
                        .Visible(true)
                        .Format("${0:N0}")
                    )
                    .ChartArea(chartArea => chartArea
                        .Background("Transparent")
                        .Margin(0)
                        .Border(border => border.Width(0)))
                )

                </div>
            </td>
            <td>
                <div class="chart-wrapper">
                    @(Html.Kendo().Chart<OPS.Models.CategoriesModel>()
                    .Name("WasteCategoriesChart")
                    .Title("Waste Categories")
                    .Legend(legend => legend
                        .Visible(false)
                    )
                    .DataSource(ds => ds.Read(read => read.Action("_GetTop10CatWaste", "Report")
                                                            .Data("_GetAttr")))
                                                            .AutoBind(false)
                    .Series(series =>
                    {
                        series.Column(model => model.Value)
                            .Name("Waste")
                            .Color("#FF0000")
                            .Overlay(ChartBarSeriesOverlay.None)
                            .Labels(labels => labels.Format("${0:N0}").Visible(false))
                            .Gap(.3); ;
                    })

                    .CategoryAxis(axis => axis
                        .Categories(model => model.Category)
                        .Line(line => line.Visible(true))
                        .MajorGridLines(lines => lines.Visible(false))
                        .MinorGridLines(lines => lines.Visible(false))
                        .Labels(labels => labels.Rotation(-35)
                                                .Padding(0, 0, 0, -35))
                    )

                    .ValueAxis(axis => axis.Numeric()
                        .Title("Annual Value")
                        .Labels(labels => labels.Format("${0:N0}"))
                        .MajorGridLines(lines => lines.Visible(false))
                        .MinorGridLines(lines => lines.Visible(false))
                    )
                            .Tooltip(tooltip => tooltip
                        .Visible(true)
                        .Format("${0:N0}")
                    )
                    .ChartArea(chartArea => chartArea.Background("Transparent"))
                )
                </div>

            </td>
        </tr>

    </table>

    <table>
        <tr>
            <td>

                <div class="chart-wrapper">
                    @(Html.Kendo().Chart<OPS.Models.BreakoutCategoryModel>()
        .Name("WasteCategory1Chart")
        .Title("Waste Categories")
        .Legend(legend => legend
            .Visible(false)
        )
                                                   
    .DataSource(ds => ds.Read(read => read.Action("_GetTop3CatWaste", "Report")
                                            .Data("_GetAttrTop3(1)")))
                                            .AutoBind(false)

        .Series(series =>
        {
            series.Column(model => model.Value)
                .Name("Waste")
                .Color("#FF0000")
                .Overlay(ChartBarSeriesOverlay.None)
                .Labels(labels => labels.Format("${0:N0}").Visible(false))
                .Gap(.3);
        })

        .CategoryAxis(axis => axis
            .Categories(model => model.Date)
            .Line(line => line.Visible(true))
            .MajorGridLines(lines => lines.Visible(false))
            .MinorGridLines(lines => lines.Visible(false))
            .Labels(labels => labels.Rotation(-45)
                                    .Padding(0, 0, 0, -35)
                                    .Step(2))
        )

        .ValueAxis(axis => axis.Numeric()
            .Title("Annual Value")
            .Labels(labels => labels.Format("${0:N0}"))
            .MajorGridLines(lines => lines.Visible(false))
            .MinorGridLines(lines => lines.Visible(false))
        )
                .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("${0:N0}")
        )
        .ChartArea(chartArea => chartArea.Background("Transparent"))
    )
                </div>
            </td>

            <td>

                <div class="chart-wrapper">
                    @(Html.Kendo().Chart<OPS.Models.BreakoutCategoryModel>()
        .Name("WasteCategory2Chart")
        .Title("Waste Categories")
        .Legend(legend => legend
            .Visible(false)
        )

    .DataSource(ds => ds.Read(read => read.Action("_GetTop3CatWaste", "Report")
                                            .Data("_GetAttrTop3(2)")))
                                            .AutoBind(false)

        .Series(series =>
        {
            series.Column(model => model.Value)
                .Name("Waste")
                .Color("#FF0000")
                .Overlay(ChartBarSeriesOverlay.None)
                .Labels(labels => labels.Format("${0:N0}").Visible(false))
                .Gap(.3);
        })

        .CategoryAxis(axis => axis
            .Categories(model => model.Date)
            .Line(line => line.Visible(true))
            .MajorGridLines(lines => lines.Visible(false))
            .MinorGridLines(lines => lines.Visible(false))
            .Labels(labels => labels.Rotation(-45)
                                    .Padding(0, 0, 0, -35)
            .Step(2))
        )

        .ValueAxis(axis => axis.Numeric()
            .Title("Annual Value")
            .Labels(labels => labels.Format("${0:N0}"))
            .MajorGridLines(lines => lines.Visible(false))
            .MinorGridLines(lines => lines.Visible(false))
        )
                .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("${0:N0}")
        )
        .ChartArea(chartArea => chartArea.Background("Transparent"))
    )
                </div>
            </td>
            <td>

                <div class="chart-wrapper">
                    @(Html.Kendo().Chart<OPS.Models.BreakoutCategoryModel>()
        .Name("WasteCategory3Chart")
        .Title("Waste Categories")
        .Legend(legend => legend
            .Visible(false)
        )

    .DataSource(ds => ds.Read(read => read.Action("_GetTop3CatWaste", "Report")
                                            .Data("_GetAttrTop3(3)")))
                                            .AutoBind(false)

        .Series(series =>
        {
            series.Column(model => model.Value)
                .Name("Waste")
                .Color("#FF0000")
                .Overlay(ChartBarSeriesOverlay.None)
                .Labels(labels => labels.Format("${0:N0}").Visible(false))
                .Gap(.3);
        })

        .CategoryAxis(axis => axis
            .Categories(model => model.Date)
            .Line(line => line.Visible(true))
            .MajorGridLines(lines => lines.Visible(false))
            .MinorGridLines(lines => lines.Visible(false))
            .Labels(labels => labels.Rotation(-45)
                                    .Padding(0, 0, 0, -35)
            .Step(2))
        )

        .ValueAxis(axis => axis.Numeric()
            .Title("Annual Value")
            .Labels(labels => labels.Format("${0:N0}"))
            .MajorGridLines(lines => lines.Visible(false))
            .MinorGridLines(lines => lines.Visible(false))

        )
                .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("${0:N0}")
        )
        .ChartArea(chartArea => chartArea.Background("Transparent"))
    )
                </div>

            </td>
        </tr>
    </table>

</div>

<div id="line-filtering-tabs" class="filtering-tabs"></div>


<style scoped>

        .filtering-tabs {
            border: 0;
            background: none;
        }

        .filtering-tabs .k-tabstrip-items {
            padding: 0;
        }

        .filtering-tabs .k-item {
            width: 16.4%;
            border: 0;
            margin: 0 .2% 0 0;
            padding: 0 0 4px;
            text-align: center;
            cursor: pointer;
            background: none;
            border-bottom: 4px solid #b3bbc5;
            font: 16px/2em Arial,sans-serif;
            color: #727f8e;
        }

        .filtering-tabs .k-state-hover {
            color: #2e2e2e;
            background: none;
        }

        .filtering-tabs .k-state-active {
            padding: 0;
            color: #2b8abe;
            border-bottom: 8px solid #2b8abe;
        }

        .filtering-tabs .k-link {
            padding: 0;
        }

        .reporting-tabs {
            border: 0;
            background: none;
        }

        .reporting-tabs .k-tabstrip-items {
            padding: 0;
        }

        .reporting-tabs .k-item {
            width: 24%;
            border: 0;
            margin: 0 .2% 0 0;
            padding: 0 0 4px;
            text-align: center;
            cursor: pointer;
            background: none;
            border-bottom: 4px solid #b3bbc5;
            font: 16px/2em Arial,sans-serif;
            color: #727f8e;
        }

        .reporting-tabs .k-state-hover {
            color: #2e2e2e;
            background: none;
        }

        .reporting-tabs .k-state-active {
            padding: 0;
            color: #2b8abe;
            border-bottom: 8px solid #2b8abe;
        }

        .reporting-tabs .k-link {
            padding: 0;
        }

        #chart-type-chooser {
            position: absolute;
            right: 1%;
            top: 7%;
        }
</style>
