@model EnVisage.Models.ViewBoardModel
@using EnVisage.Code.HtmlHelpers
@using Microsoft.AspNet.Identity
@using EnVisage.Code
@{
    ViewBag.Title = Model.SelectedViewName;
}
@section stylesheets
{
    <link href="~/Content/stylesheets/xeditable.css" rel="stylesheet" type="text/css">
}
@section scripts
{
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
    <script src="@Url.Content("~/Scripts/CustomValidation.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/sliders.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/calendarMethods.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Plugins/ScenarioDetailsGrid.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Plugins/PageState.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/forecastDashboardScripts.js")" type="text/javascript"></script>
    @Scripts.Render("~/bundles/angular-app-modules")
    <script src="@Url.Content("~/Scripts/Angular/app.js")"></script>
    <script src="@Url.Content("~/Scripts/Angular/Controllers/scenarioDetailController.js")"></script>
    <script src="@Url.Content("~/Scripts/Angular/Controllers/costSavingController.js")"></script>
    <script src="@Url.Content("~/Scripts/Angular/Controllers/slidersGroupController.js")"></script>
    <script src="@Url.Content("~/Scripts/URIjs.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Angular/Controllers/activityCalendarController.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.collapsiblepanel.js")"></script>
    <script type="text/javascript">
        //last replace in emulateNavUrl needed for main menu nav predicate match hack
        if (URI().query(true).viewId) {
            emulateNavUrl = "/" + "javascript:void('@Url.Action("Board", "View", new {@viewId = "_rplcmnt_"})');".replace(/_rplcmnt_/g, URI().query(true).viewId).replace(/^(?:\/\/|[^\/]+)*\//, "");
        } else if (URI().query(true).mode) {
            emulateNavUrl = "/" + "javascript:void('@Url.Action("Board", "View", new {@mode = "new"}, Request.Url.Scheme)');".replace(/^(?:\/\/|[^\/]+)*\//, "");
        } else {
            emulateNavUrl = "/" + "javascript:void('@Url.Action("Board", "View", new {@viewId = Model.SelectedViewId})');".replace(/^(?:\/\/|[^\/]+)*\//, "");
        }
        var _viewPageState = null;


        function getSelectedViewId() {
            var viewId = $('#SelectedViewId').val();
            if (!viewId || viewId.trim().length <= 0)
                return null;

            return viewId;
        }


        init.push(function () {
            if (URI().query(true).viewId) {
                $('#list').val(URI().query(true).viewId);
                selectView(URI().query(true).viewId);

            } else {
                $('#list').val('@(Model.SelectedViewId)');
                selectView('@(Model.SelectedViewId)', '@(Model.SelectedViewName)');

            }
            if (URI().query(true).mode) {
                if (URI().query(true).mode == "edit")
                    editView(null, getSelectedViewId());
                if (URI().query(true).mode == "delete")
                    deleteView(null, getSelectedViewId());
                if (URI().query(true).mode == "new")
                    editView(null, null)
            }
            
            window.onresize = function(event) {
                $('.dataTables_empty').width($(window).width() - 336);
            };

            $(document).on('finishedDrawing', function () {
                var showPanel = _viewPageState.data('pageState').$dataset['graph-panel'];
                if (showPanel == undefined || showPanel) {
                    $('#graph-container').addClass('in').parent().find('[data-toggle=collapse]').removeClass('collapsed');
                } else {
                    $('#graph-container').removeClass('in').parent().find('[data-toggle=collapse]').addClass('collapsed');
                }
                $('.dataTables_empty').width($(window).width() - 336);
            });

            $('#panelTeamCalendar').on('hidden.bs.collapse', function () {
                $('#divCalendarMenu').hide();
                _viewPageState.pageState('setData', ['team-panel', false]);
                _viewPageState.pageState('saveData');
            });

            $('#panelTeamCalendar').on('shown.bs.collapse', function () {
                $('#divCalendarMenu').show();
                if (angular.element(document.getElementById('controller1')).scope().data == null) {
                    angular.element(document.getElementById('controller1')).scope().CalendarFilterMode.SelectedItemId = getSelectedViewId();
                    angular.element(document.getElementById('controller1')).scope().switchViewFilterMode(true);
                    angular.element(document.getElementById('controller1')).scope().loadCalendarData();
                }
                _viewPageState.pageState('setData', ['team-panel', true]);
                _viewPageState.pageState('saveData');
            });
            $('#panelForecast').on('hidden.bs.collapse', function () {
                console.log('saving hidden forecast');
                $('#divForecastMenu').hide();
                $('#forecastBlock').hide();
                _viewPageState.pageState('setData', ['view-panel', false]);
                _viewPageState.pageState('saveData');
            });
            $('#panelForecast').on('shown.bs.collapse', function () {
                console.log('saving shown forecast');
                $('#divForecastMenu').show();
                $('#forecastBlock').show();
                if ($('#forecastBlock').children().length == 0)
                    loadForecastPanel(getSelectedViewId());
                _viewPageState.pageState('setData', ['view-panel', true]);
                _viewPageState.pageState('saveData');
            });

            $('#graph-container').on('hidden.bs.collapse', function () {
                console.log('saving hidden graph');
                _viewPageState.pageState('setData', ['graph-panel', false]);
                _viewPageState.pageState('saveData');
            });
            $('#graph-container').on('shown.bs.collapse', function () {
                console.log('saving shown graph');
                _viewPageState.pageState('setData', ['graph-panel', true]);
                _viewPageState.pageState('saveData');
            });
            $('#panelTeams').on('hidden.bs.collapse', function () {
                console.log('saving hidden teams');
                _viewPageState.pageState('setData', ['team-panel', false]);
                _viewPageState.pageState('saveData');
            });
            $('#panelTeams').on('shown.bs.collapse', function () {
                console.log('saving shown teams');
                _viewPageState.pageState('setData', ['team-panel', true]);
                _viewPageState.pageState('saveData');
            });
            _viewPageState = $('#viewDashboard').pageState({
                pageKey: document.location.pathname
            });
            var showPanel = _viewPageState.data('pageState').$dataset['team-panel'];
            if (showPanel == undefined || showPanel) {
                $('#divCalendarMenu').show();
                $('#panelTeamCalendar').addClass('in').parent().find('[data-toggle=collapse]').removeClass('collapsed');
            } else {
                $('#divCalendarMenu').hide();
                $('#panelTeamCalendar').removeClass('in').parent().find('[data-toggle=collapse]').addClass('collapsed');
            }
            var showPanel = _viewPageState.data('pageState').$dataset['team-panel'];
            if (showPanel == undefined || showPanel) {
                $('#divCalendarMenu').show();
                $('#panelTeamCalendar').addClass('in').parent().find('[data-toggle=collapse]').removeClass('collapsed');
            } else {
                $('#divCalendarMenu').hide();
                $('#panelTeamCalendar').removeClass('in').parent().find('[data-toggle=collapse]').addClass('collapsed');
            }
            showPanel = _viewPageState.data('pageState').$dataset['view-panel'];
            if (showPanel == undefined || showPanel) {
                console.log('showing forecast');
                $('#divForecastMenu').show();
                $('#panelForecast').addClass('in').parent().find('[data-toggle=collapse]').removeClass('collapsed');
                loadForecastPanel(getSelectedViewId());
            } else {
                console.log('hiding forecast');
                $('#divForecastMenu').hide();
                $('#panelForecast').removeClass('in').parent().find('[data-toggle=collapse]').addClass('collapsed');
                $('#forecastBlock').hide();
                loadForecastPanel(getSelectedViewId());
            }
            //showPanel = _viewPageState.data('pageState').$dataset['graph-panel'];
            //if (showPanel == undefined || showPanel) {
              //  console.log('showing graph');
               // $('#graph-container').show();
               // $('#graph-container').addClass('in').parent().find('[data-toggle=collapse]').removeClass('collapsed');
            //} //else {
               // console.log('hiding graph');
               // $('#graph-container').removeClass('in').parent().find('[data-toggle=collapse]').addClass('collapsed');
               // //setTimeout(function () {
               // //    $('#graph-container').hide();
              //  //}, 5000);
                
                //$('#graphDiv').hide();
            //}
            showPanel = _viewPageState.data('pageState').$dataset['team-panel'];
            if (showPanel == undefined || showPanel) {
                //console.log('showing teams');
                $('#panelTeams').addClass('in').parent().find('[data-toggle=collapse]').removeClass('collapsed');
            } else {
                //console.log('hiding teams');
                $('#panelTeams').removeClass('in').parent().find('[data-toggle=collapse]').addClass('collapsed');
            }
            var tab = $.QueryString["ptab"];
            if (tab == "calendar") {
                $('html, body').animate({
                    scrollTop: $("#panelTeamCalendar").offset().top
                }, 1000);
            }
        });

        // SA. ENV-815. Begin
        function saveViewPreferences() {
            var prefs = collectPreferences("viewsBlock");
            saveUserPagePreferences(prefs, "viewsBlock");
        }
        // SA. ENV-815. End

        function selectView(id, name) {
            if (id != '@Guid.Empty') {

                // SA. ENV-815. Preferences
                var oldHiddenVal = $('#SelectedViewId').val();

                if (oldHiddenVal && (oldHiddenVal.length > 0) && (oldHiddenVal != id))
                    saveViewPreferences();

                $('#SelectedViewId').val(id);

                $('#indicator').show();
                //expand panels with charts and tricky tables or they will be messed up
                if ($("#panelTeamCalendar").hasClass("collapse in")) {
                    angular.element(document.getElementById('controller1')).scope().CalendarFilterMode.SelectedItemId = id;
                    angular.element(document.getElementById('controller1')).scope().switchViewFilterMode(true);
                    angular.element(document.getElementById('controller1')).scope().loadCalendarData();
                } else {
                    angular.element(document.getElementById('controller1')).scope().data = null;
                }

                $('#deleteViewCaption').text('Do you want to delete \"@(Model.Views.Count() > 0 ? Model.Views[0].Name : "")\" view?');

                $.post('/View/GetTeams', { 'viewId': id }, function (data) {
                    if (data != undefined) {
                        $('div#ViewInfo').html(data);
                        $('#indicator').hide();
                        $('#panelTeams').on('hidden.bs.collapse', function () {
                            if (!$("#panelTeams").hasClass("collapse in")) {
                                _viewPageState.pageState('setData', ['resources-panel', false]);
                                _viewPageState.pageState('saveData');
                            }
                        });

                        $('#panelTeams').on('shown.bs.collapse', function () {
                            if ($("#panelTeams").hasClass("collapse in")) {
                                _viewPageState.pageState('setData', ['resources-panel', true]);
                                _viewPageState.pageState('saveData');
                            }
                        });
                        var showPanel = _viewPageState.data('pageState').$dataset['resources-panel'];
                        if (showPanel == undefined || showPanel) {
                            $('#panelTeams').addClass("in").parent().find('[data-toggle=collapse]').removeClass('collapsed');
                        } else {
                            $('#panelTeams').removeClass('in').parent().find('[data-toggle=collapse]').addClass('collapsed');
                        }
                    }
                });

                if ($("#panelForecast").hasClass("collapse in")) {
                    loadForecastPanel(id);
                } else {
                    $('#forecastBlock').html('');
                }
            }
        }

        function loadForecastPanel(id) {
            //reset forecast block menu
            var paramsObj = {
                viewId: id,
                mode: 'view'
            };
        $('#forecastTableLoader').show();
                $("#forecastBlock").html('');


            var loadUrl = '@Url.Action("Index", "ForecastDashboard")?menuId=visibilitydropdown&pageModel=ViewBoardModel&additionalFilters=' + JSON.stringify(paramsObj);
            $("#forecastBlock")
                .load(loadUrl, function (response, status, xhr) {
                    if (status == "error") {
                        showErrorModal('Loading error', 'We are sorry but there was an error, please try again later.');
                    } else {
                        $(".fcboard-criteria-select2").select2();
                        initForecastDashboard();
                        var showPanel = _viewPageState.data('pageState').$dataset['view-panel'];
                        //Per ENV-798 - show  calendar and forecast only by default
                        if (showPanel == undefined || showPanel) {
                            $('#panelForecast').addClass('in').parent().find('[data-toggle=collapse]').removeClass('collapsed');
                        } else {
                            $('#panelForecast').removeClass('in').parent().find('[data-toggle=collapse]').addClass('collapsed');
                        }
                        $('#forecastTableLoader').hide();
                    }
                });
        }

        function loadVew(viewId) {
            blockUI();
            if (viewId != null)
                StartEdit('View', viewId, null, null, 'erorMsgPlaceholder');
            var url = viewId != null ? "?Id=" + viewId : "";
            $('#editReload').html("");
            $('#editReload').load('@Url.Action("Edit", "View")' + url, function () {

                $('#editView')
                    .on('hidden.bs.modal', function () {
                        if (viewId != null) {
                            StopEdit();
                            RemoveLock('View', viewId);
                        }
                    })
                    .on('shown.bs.modal', function () {
                        //initView();
                    })
                    .modal('show');

                initView();
                unblockUI();
            });
        }

        function editView(aId, Id) {
            if (!CheckLock(aId, 'View', Id))
                return false;
            loadVew(Id);
            return true;
        }

        function deleteView(aId, Id) {
            if (!CheckLock(aId, 'View', Id))
                return false;
            if (Id != null)
                StartEdit('View', Id, null, null, 'erorMsgPlaceholder');
            $("#deleteViewId").val(Id);
            $('#modal-warning').on('hidden.bs.modal', function () {
                if (Id != null) {
                    StopEdit();
                    RemoveLock('View', Id);
                }
            }).modal('show');
            return true;
        }

        // SA. ENV-799
        function OpenInNewWindow() {
            var url = '@Url.Action("Index", "CapacityManagement")' + '?id=' + getSelectedViewId();
            window.open(url);
        }

        init.push(function () {
            $(document).on('hide.bs.modal', '#editView', function (e) {
                // skip modal hide event from datepickers
                if ($(e.target).attr('id') != 'editView')
                    return true; // close modal form
                // check that form has been changed
                if (typeof isViewDataChanged === 'function')
                    // if form has been changed
                    if (isViewDataChanged()) {
                        // ask user for confirmation of form close
                        if (confirm("Editing View form contains unsaved changes, do you really want to close the form?")) {
                            // reset change indicator
                            if (typeof resetTeamDataChanged === 'function') {
                                resetViewDataChanged();
                            }
                            return true; // close modal form
                        };
                        return false; // DO NOT close modal form
                    }
                return true; // close modal form
            });
        });
    </script>
}
<style type="text/css">
    #capacity-table .headcol {
        left: -3px;
    }
</style>

<div class="table-light table-responsive">
    <input type="hidden" id="SelectedViewId" name="SelectedViewId" />
    <div class="panel">
        <div class="panel-body" ng-app="app" id="viewDashboard">
            <div class="row" style="padding-right:20px;">
            <div class="pull-right"><a class="noShevron" href="javascript:OpenInNewWindow()">Go to @Model.SelectedViewName Calendar</a></div></div>
            <div class="row animated">
                <div  class="col-md-12 col-lg-6" style="min-width: 436px!important;">
                    <div class="panel panel-white panel-compact otherside" id="teamWidget">
                        <div class="panel-heading">
                            <span class="panel-title ui-expander">
                                <a data-toggle="collapse" data-target="#panelTeams" class="collapsed">
                                    <i class="panel-title-icon fa fa-users"></i>Teams
                                </a>
                            </span>
                        </div>
                        <div id="panelTeams" class="panel-body table-light collapse">
                            <div class="row" style="padding-left: 10px!important;padding-right: 10px!important;" id="ViewInfo">
                                    @if (Model.Views.Count > 0)
                                    {
                                        //Resources (Grouped by Team)
                                        Html.Partial("~/Views/View/_resourcesList.cshtml", Model);
                                    }
                                    else
                                    {
                                        <label class="label">You do not have access to any view</label>
                                    }
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 col-lg-6" >
                    <div class="panel panel panel-white panel-compact" data-section="graphtView">
                        <div class="panel-heading ">
                            <span class="panel-title ui-expander">
                                <a data-toggle="collapse" data-target="#graph-container">
                                    <i class="panel-title-icon fa fa-bar-chart-o"></i>Projects by Status
                                </a>
                            </span>
                            
                        </div>
                        <div class='panel-body table-light collapse in' id="graph-container" style="padding-top: 0px!important; padding-bottom: 0px!important;">
                            <div class="row" id="graphDiv" style="padding-top: 0px!important; padding-bottom: 0px!important;padding-left: 20px!important; padding-right: 20px!important;" >
                                @{
                                    Html.RenderPartial("_chart", Model);
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>



                <div class="panel panel-white panel-compact" data-section="forecastView">
                    <div class="panel-heading">
                        <span class="panel-title ui-expander">
                            <a data-toggle="collapse" data-target="#panelForecast">
                                <i class="panel-title-icon fa fa-wrench"></i>View Forecast
                            </a>
                        </span>
                        <span class="pull-right">&nbsp;&nbsp;</span>
                            <div class="btn-group btn-group-xs pull-right" id="divForecastMenu" style="display: none;">
                                <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-bars"></i>&nbsp;<i class="fa fa-caret-down"></i></button>
                                <ul class="dropdown-menu dropdown-menu-right" id="visibilitydropdown"></ul>
                            </div>
                    </div>
                    <div class='panel-body table-light collapse' id="panelForecast"></div>
                        <div id="forecastBlock">
                            <div id="forecastTableLoader" class="loadRotator">
                                <span>
                                    <img class="valign-middle" src="@Url.Content("~/Content/images/loadFA.gif")" />&nbsp;&nbsp;loading...
                                </span>
                            </div>
                        </div>
                    </div>

            @*<div class="panel panel-white panel-compact">
                <div class="panel-heading">
                    <span class="panel-title ui-expander">
                        <a data-toggle="collapse" data-target="#panelSkills" class="collapsed">
                            <i class="panel-title-icon fa fa-wrench"></i>Skills
                        </a>
                    </span>
                </div>
                <div id="panelSkills" class="panel-collapse collapse">
                    <div class="panel-body table-light">
                        Skills info placeholder
                    </div>
                </div>
            </div>*@

            <div class="panel panel-white panel-compac" data-section="capacityManagementView">
                <div class="panel-heading">
                    <span class="panel-title ui-expander">
                        <a data-toggle="collapse" data-target="#panelTeamCalendar" class="collapsed">
                            <i class="panel-title-icon fa fa-calendar"></i>@Model.SelectedViewName Calendar
                        </a>
                    </span>
                    <span class="pull-right">&nbsp;&nbsp;</span>
                    <div class="btn-group btn-group-xs pull-right" id="divCalendarMenu" style="display: none;">
                        <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-bars"></i>&nbsp;<i class="fa fa-caret-down"></i></button>
                        <ul class="dropdown-menu-calendar dropdown-menu dropdown-menu-right" id="visibilitydropdown_calendar" role="menu" aria-labelledby="dropdownMenu"></ul>
                    </div>
                    <div class="pull-right" style="padding-right: 20px;"><a class="noShevron" href="javascript:OpenInNewWindow()">Open in new window</a></div>
                </div>

                <div id="panelTeamCalendar" class="panel-collapse collapse">
                    <div class="table-light ac" style="margin-bottom:0!important">
                        @Html.Partial("../CapacityManagement/_capacityManagement", Model)
                    </div>
                </div>
            </div>

            
        </div>
    </div>

<!-- Modal -->
<div id="editView" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content" id="editReload">

        </div> <!-- / .modal-content -->
    </div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->
<!-- / Modal -->
<!-- Warning modal alert -->
<div id="modal-warning" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
    <div class="modal-dialog">
        @Html.BeginForm("Delete", "View")
        {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(model => model.Id)
        <input type="hidden" id="deleteViewId" name="deleteViewId" />
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title">Delete View</h4>
            </div>
            <div class="modal-title"></div>
            <div class="modal-body"><strong id="deleteViewCaption"></strong></div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-danger" data-dismiss="modal" onclick="blockUI()">OK</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div> <!-- / .modal-content -->
        }
    </div> <!-- / .modal-dialog -->
</div> <!-- / .modal -->
<!-- Modal -->
<!-- Modal -->
<div id="createScenario" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" id="reloadForm">
        </div> <!-- / .modal-content -->
    </div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->
<!-- / Modal -->