@model EnVisage.Models.WhatIfCalendarModel
@using EnVisage.Code;
@using EnVisage.Code.HtmlHelpers;
@using EnVisage.Models;
@{
    ViewBag.Title = "What-If Calendar";
    var isUOMHoursChecked = "checked";
    if (ViewBag.IsUOMHours != null)
    {
        isUOMHoursChecked = ViewBag.IsUOMHours ? "checked" : string.Empty;
    }
}

@section scripts
{
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    <script>
        
        init.push(function () {
        	var options = {
        		format: 'm/d/yyyy',
        		startDate: '@Constants.MIN_SELECTABLE_DATE', // SA. ENV-1235. Disable incorrect dates input
                endDate: '@Constants.MAX_SELECTABLE_DATE'    // SA. ENV-1235. Disable incorrect dates input
            };

        	$(".datepicker").datepicker(options)
                .change(function (ev) {
                updateHidden(ev.target.id, $(ev.target).val());
            });
                      
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                InitGraph(e.target.hash);
            });

            var options2 = {
                orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto',
                startDate: '@Constants.MIN_SELECTABLE_DATE', // SA. ENV-1235. Disable incorrect dates input
                endDate: '@Constants.MAX_SELECTABLE_DATE'    // SA. ENV-1235. Disable incorrect dates input
            };
            $('#bs-datepicker-range').datepicker(options2);
            $('#filterStartDate').addClass('form-control');
            $('#filterEndDate').addClass('form-control');
            $('#filterStartDate').removeClass('text-box');
            $('#filterEndDate').removeClass('text-box');
            $('#filterStartDate').removeClass('single-line');
            $('#filterEndDate').removeClass('single-line');
            $('#uomMode').switcher({
                on_state_content: '# Hours',
                off_state_content: '# Resources'
            });
            $('#uomMode').parent().css("width", "100px");

            InitGraph($("ul#tabs li.active a").attr('href'));
        });

        function InitGraph(hash) {
            var __siteRoot = '@HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority)@Url.Content("~/")';
            var url = __siteRoot + "WhatIfCalendar/GetGraphData";
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: url,
                data: JSON.stringify({
                    startDate: $("#@Html.ClientIdFor(x=>x.StartDate)").datepicker('getDate').val(),
                    endDate: $("#@Html.ClientIdFor(x=>x.EndDate)").datepicker('getDate').val(),
                    cost: $("#@Html.ClientIdFor(x=>x.SeatsCosts)").val() == "1" || $("#@Html.ClientIdFor(x=>x.SeatsCosts)").val() == "Costs",
                    selectedScenarios: JSON.parse($("#@Html.ClientIdFor(x=>x.SelectedScenarios)").val()),
                    graphType: ($("ul#tabs li.active a").attr('href') == '#general' ? "0" : "1"),
                    type: $("#@Html.ClientIdFor(x=>x.SelectedScenarioType)").val(),
                    groupId: $("#@Html.ClientIdFor(x=>x.GroupId)").val(),
                    isUOMHours: $('#uomMode').prop('checked')
                }),
                dataType: "json",
                success: function (data) {
                    var maxValue = 0;
                    var graphData = new Array();
                    for (var i = 0; i < data.WhatIfCalendar.length; i++) {
                        var expCatData = new Array();
                        for (var colIndex = 0; colIndex < data.FiscalCalendarRecordHeaders.length; colIndex++) {
                            expCatData[colIndex] = [data.FiscalCalendarRecordMilliseconds[colIndex],
                                data.WhatIfCalendar[i].QuantityValues[colIndex]];
                            //if (true !== data.IsTableModeQuantity) {
                            //    expCatData[colIndex][1] = data.ScenarioCalendar[i].CostValues[colIndex];
                            //}
                            if (expCatData[colIndex][1] > maxValue)
                                maxValue = expCatData[colIndex][1];
                            //expCatData[colIndex][1] = expCatData[colIndex][1].toFixed(2);
                        }
                        if ("Capacity" == data.WhatIfCalendar[i].ScenarioType) {                        	
                        	graphData[i] = {
                        	    label: data.WhatIfCalendar[i].ScenarioName,
                        		data: expCatData,
                        		lines: { show: true, fill: false, steps: false },
                        		filledPoints: true,
                        		stack: false
                        	};
                        }
                        else {
                        	graphData[i] = {
                        		label: data.WhatIfCalendar[i].ScenarioName,
                        		data: expCatData,
                        		lines: { show: true, fill: true, steps: false },
                        		filledPoints: true,
                        		stack: true
                        	};
                        }
                    }
                    draw(hash, graphData, maxValue);
                },
                error: function (msg) {
                    alert( msg.responseText);
                }
            });
        }

        function draw(hash, graphData, maxValue) {
            // Init Chart
            var checkedData = new Array();
            for (var i = 0; i < graphData.length; i++) {
                //var chk = document.getElementById('expCatCheckedId_' + (i + 1));
                //if (chk.checked)
                    checkedData[checkedData.length] = graphData[i];
            }
            $('#div' + (hash == '#general' ? 'WhatIfGraph' : 'WhatIfGraphProbability') + "Container").
                html("<div id='div" + (hash == '#general' ? 'WhatIfGraph' : 'WhatIfGraphProbability') + "'></div>");

            var div = $('#div' + (hash == '#general' ? 'WhatIfGraph' : 'WhatIfGraphProbability'));
            div.pixelPlot(checkedData, {
                series: {
                    points: {
                        show: false
                    },
                    lines: {
                    	show: true,
                    	fill: true,
						steps: false
                    }
                },
                xaxis: {
                    mode: "time",
                    tickSize: [1, "month"],
                    tickLength: 0
                }
            }, {
                height: 405,
                tooltipText: ($("#@Html.ClientIdFor(x=>x.SeatsCosts)").val() == "0" || $("#@Html.ClientIdFor(x=>x.SeatsCosts)").val() == "Seats" ?
                    "y + ' seats at '" :
                    "'$'+ y + ' at '")
                    + " + (new Date(x)).toString()"
            });
        }

        function updateHidden(name, val)
        {
            $("input[name='" + name + "']").val(val);
        }

        function saveSelectedScenarios()
        {
            var selectedScenarioList = $("#@Html.ClientIdFor(x=>x.SelectedScenarios)");
            var res = "";
            $.each($("input[type='checkbox']"), function (i, o)
            {
            	if (o.checked && $(o).attr('scenario') != null)
                {
                    res += ",\"" + $(o).attr('scenario') + "\"";
                    $(o).parent().parent().removeClass('unchecked');
                } else {
                    $(o).parent().parent().addClass('unchecked');
                }
            });
            if (res.length > 0)
                selectedScenarioList.val("[" + res.substr(1, res.length - 1) + "]");
            else
                selectedScenarioList.val("");

            return true;
        }

        function refreshGraph()
        {
            saveSelectedScenarios();
            //$("form").submit();
            InitGraph($("ul#tabs li.active a").attr('href'));
        }

</script>
}
@section pagemenu
{
<ul class="nav navbar-nav navbar-right">
	<li class="dropdown">
		<a href="#" class="dropdown-toggle user-menu" data-toggle="dropdown">
			<i class="fa fa-bars"></i><span>Page Options</span>&nbsp;<i class="fa fa-caret-down"></i>
		</a>
		<ul class="dropdown-menu dropdown-menu-right" id="visibilitydropdown">
			<li><a onclick="_printDoc();$(this).parent().parent().parent().removeClass('open');"><i class="dropdown-icon fa fa-print"></i> Print Page</a></li>
			<li class="divider"></li>
			<li class="padding-xs-hr"><label><span class="switcherLbl">Quantity as</span><input type="checkbox" @isUOMHoursChecked name="uomMode" id="uomMode" class="switcher px" onclick="refreshGraph()"/></label></li>
		</ul>
	</li>
</ul>
}

<div id="whatifBody">
    @using (Html.BeginForm("Index", "WhatIfCalendar", FormMethod.Post, new { @class = "panel form-horizontal", @style = "border:0;", @onsubmit = "saveSelectedScenarios();" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
        @Html.HiddenFor(x => x.LaborMaterials);
        @Html.HiddenFor(x => x.SeatsCosts);
        @Html.HiddenFor(x => x.IncludeActuals);
        @Html.HiddenFor(x => x.StartDate);
        @Html.HiddenFor(x => x.EndDate);
        @Html.HiddenFor(x => x.SelectedScenarios);
       
            <div class="panel">
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-3">
                        @Html.LabelFor(model => model.GroupName, new { @class = "control-label" })
                        <div class="form-group  no-margin-hr">
                            @Html.DropDownListFor(model => model.GroupId, Utils.GetScenarioGroup(), new { @class = "form-control disabled" })
                            @Html.ValidationMessageFor(model => model.GroupId)
                        </div>
                    </div>
                    <div class="col-sm-3">
                        @Html.LabelFor(model => model.SelectedScenarioType, new { @class = "control-label" })
                        <div class="form-group  no-margin-hr">
                            @Html.DropDownListFor(model => model.SelectedScenarioType, EnVisage.Code.Utils.GetScenarioTypesPortfAndSched(), new { @class = "form-control disabled" })
                            @Html.ValidationMessageFor(model => model.SelectedScenarioType)
                        </div>
                    </div>
                </div>

            </div>

            <div class="panel-footer text-right">
                <button type="submit" class="btn btn-primary">Filter</button>
            </div>
         </div>
    }

<div class="table-light table-responsive">
    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="RollUp">
        <thead>
            <tr>
                <th></th>
                <th>
                    Scnario Name
                </th>
                <th>
                    Poject Name
                </th>

                <th>
                    Start Date
                </th>
                <th>
                    End Date
                </th>
                <th>
                    Labor Split
                </th>
                <th>
                    Materials
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Scenarios)
            {
                var isChecked = (Model.SelectedScenarios != null && Model.SelectedScenarios.IndexOf(item.Id.ToString(), System.StringComparison.Ordinal) != -1);
                <tr @(!isChecked ? "class=unchecked" : string.Empty)>
                    <td>
                        @Html.CheckBox("select", isChecked, new { @class = "control-label", @scenario = item.Id}) 
                    </td>
                    <td>
                        @item.Name
                    </td>
                    <td>
                        @item.ProjectName
                    </td>
                    <td>
                        @(item.StartDate.HasValue ? item.StartDate.Value.ToShortDateString():string.Empty)
                    </td>
                    <td>
                        @(item.EndDate.HasValue ? item.EndDate.Value.ToShortDateString():string.Empty)
                    </td>
                    <td>
                        @string.Format("{0:0.##} %",item.EFXSplit * 100)
                    </td>
                    <td>
                        @string.Format("{0:0.##} %",item.CGSplit * 100)
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

        <div class="panel">
            <div class="panel-body">

                <div class="row">
                    <div class="col-sm-3">
                        @Html.LabelFor(model => model.LaborMaterials, new { @class = "control-label" })
                        <div class="form-group  no-margin-hr">

                            @Html.DropDownListFor(model => model.LaborMaterials, Utils.GetListboxItems<LaborMaterialsType>(), new { @class = "form-control disabled", @onchange="updateHidden(this.name, $(this).val());" })

                        </div>
                    </div>
                    <div class="col-sm-2">
                        @Html.LabelFor(model => model.SeatsCosts, new { @class = "control-label" })
                        <div class="form-group  no-margin-hr">

                            @Html.DropDownListFor(model => model.SeatsCosts, Utils.GetListboxItems<SeatsCostsType>(), new { @class = "form-control disabled", @onchange="updateHidden(this.name, $(this).val());" })

                        </div>
                    </div>
                    <div class="col-sm-2">
                        @Html.LabelFor(model => model.IncludeActuals, new { @class = "control-label" })
                        <div class="form-group  no-margin-hr">
                            @Html.DropDownListFor(model => model.IncludeActuals, Utils.GetListboxItems<YesNoType>(), new { @class = "form-control disabled", @onchange="updateHidden(this.name, $(this).val());" })

                        </div>
                    </div>
                    <div class="col-sm-2">
                        @Html.LabelFor(model => model.StartDate, new { @class = "control-label" })
                        @Html.EditorFor(model => model.StartDate)
                        @Html.ValidationMessageFor(model => model.StartDate)
                    </div>
                    <div class="col-sm-2">
                        @Html.LabelFor(model => model.EndDate, new { @class = "control-label" })
                        @Html.EditorFor(model => model.EndDate)
                        @Html.ValidationMessageFor(model => model.EndDate)
                    </div>
                </div>
            </div>

            <div class="panel-footer text-right">
                <button type="button" class="btn btn-primary" onclick="refreshGraph()">Refresh</button>
            </div>
         </div>

<ul id="tabs" class="nav nav-tabs">
    <li class="active">
        <a href="#general" data-toggle="tab">What-If Calendar (100%)<span class="badge badge-primary"></span></a>
    </li>
    <li>
        <a href="#probability" data-toggle="tab">What-If Calendar (Use Probability)<span class="badge badge-primary"></span></a>
    </li>
</ul>
    
<div class="tab-content tab-content-bordered">
    <div class="tab-pane fade in active" id="general">
    <div class="panel">
        <div class="panel-body">
            <div class="graph-container" id="divWhatIfGraphContainer">
                <div id="divWhatIfGraph"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="probability">
    <div class="panel">
        <div class="panel-body">
            <div class="graph-container" id="divWhatIfGraphProbabilityContainer">
                <div id="divWhatIfGraphProbability"></div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>