@using EnVisage.Code
@using EnVisage.Code.HtmlHelpers
@model EnVisage.Models.PeopleResourceModel
@{
    ViewBag.Title = "People Resource Details";
}
@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>
    @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">

    	var datePickerOptions = {
    		format: 'm/d/yyyy',
    		autoclose: true,
    		startDate: '@(Constants.MIN_SELECTABLE_DATE)', // SA. ENV-1235
    		endDate: '@(Constants.MAX_SELECTABLE_DATE)'    // SA. ENV-1235
    	};

    	var multik;      // SA. WTF ???
        var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
        var multik1;    // SA. WTF ???

        // SA. ENV-905
        function initPanels() {
            $('.panel').collapsiblePanel();

            $('#panelInfo').on('hidden.bs.collapse', function () {
              _viewPageState.pageState('setData', ['info-panel', false]);
              _viewPageState.pageState('saveData');
            });
            $('#panelInfo').on('shown.bs.collapse', function () {
              _viewPageState.pageState('setData', ['info-panel', true]);
              _viewPageState.pageState('saveData');
            });

            // SA. Uncomment the following, when panel be filled with data
            //$('#panelSkills').on('hidden.bs.collapse', function () {
            //  _viewPageState.pageState('setData', ['skills-panel', false]);
            //  _viewPageState.pageState('saveData');
            //});
            //$('#panelSkills').on('shown.bs.collapse', function () {
            //  _viewPageState.pageState('setData', ['skills-panel', true]);
            //  _viewPageState.pageState('saveData');
            //});

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

                if (angular.element(document.getElementById('controller1')).scope().data == null) {
                    angular.element(document.getElementById('controller1')).scope().CalendarFilterMode.SelectedItemId = '@Model.Id';
                    angular.element(document.getElementById('controller1')).scope().switchResourceFilterMode(true);
                    angular.element(document.getElementById('controller1')).scope().loadCalendarData();
                }

              _viewPageState.pageState('setData', ['time-panel', true]);
              _viewPageState.pageState('saveData');
            });

          $('#panelVacation').on('hidden.bs.collapse', function () {
            _viewPageState.pageState('setData', ['vacation-panel', false]);
            _viewPageState.pageState('saveData');
          });
          $('#panelVacation').on('shown.bs.collapse', function () {
            _viewPageState.pageState('setData', ['vacation-panel', true]);
            _viewPageState.pageState('saveData');
          });

          $('#panelTraining').on('hidden.bs.collapse', function () {
            _viewPageState.pageState('setData', ['trainings-panel', false]);
            _viewPageState.pageState('saveData');
          });
          $('#panelTraining').on('shown.bs.collapse', function () {
            _viewPageState.pageState('setData', ['trainings-panel', true]);
            _viewPageState.pageState('saveData');
          });

          $('#panelLoanOuts').on('hidden.bs.collapse', function () {
            _viewPageState.pageState('setData', ['loanouts-panel', false]);
            _viewPageState.pageState('saveData');
          });
          $('#panelLoanOuts').on('shown.bs.collapse', function () {
            _viewPageState.pageState('setData', ['loanouts-panel', true]);
            _viewPageState.pageState('saveData');
          });

          _viewPageState = $('#resourceDashboard').pageState({
            pageKey: document.location.pathname
          });

          var showPanel = _viewPageState.data('pageState').$dataset['info-panel'];
          if (showPanel == undefined || showPanel)
            $('#panelInfo').addClass('in').parent().find('[data-toggle=collapse]').removeClass('collapsed');
          else
            $('#panelInfo').removeClass('in').parent().find('[data-toggle=collapse]').addClass('collapsed');

          // SA. Uncomment the following, when panel be filled with data
          //showPanel = _viewPageState.data('pageState').$dataset['skills-panel'];
          //if (showPanel == undefined || showPanel)
          //  $('#panelSkills').addClass('in').parent().find('[data-toggle=collapse]').removeClass('collapsed');
          //else
          //  $('#panelSkills').removeClass('in').parent().find('[data-toggle=collapse]').addClass('collapsed');

          showPanel = _viewPageState.data('pageState').$dataset['time-panel'];
          if (showPanel == undefined || showPanel) {
              $('#divCalendarMenu').show();
              $('#panelTime').addClass('in').parent().find('[data-toggle=collapse]').removeClass('collapsed');
          } else {
              $('#divCalendarMenu').hide();
              $('#panelTime').removeClass('in').parent().find('[data-toggle=collapse]').addClass('collapsed');
          }

          showPanel = _viewPageState.data('pageState').$dataset['vacation-panel'];
          if (showPanel == undefined || showPanel)
            $('#panelVacation').addClass('in').parent().find('[data-toggle=collapse]').removeClass('collapsed');
          else
            $('#panelVacation').removeClass('in').parent().find('[data-toggle=collapse]').addClass('collapsed');

          showPanel = _viewPageState.data('pageState').$dataset['trainings-panel'];
          if (showPanel == undefined || showPanel)
            $('#panelTraining').addClass('in').parent().find('[data-toggle=collapse]').removeClass('collapsed');
          else
            $('#panelTraining').removeClass('in').parent().find('[data-toggle=collapse]').addClass('collapsed');

          showPanel = _viewPageState.data('pageState').$dataset['loanouts-panel'];
          if (showPanel == undefined || showPanel)
            $('#panelLoanOuts').addClass('in').parent().find('[data-toggle=collapse]').removeClass('collapsed');
          else
            $('#panelLoanOuts').removeClass('in').parent().find('[data-toggle=collapse]').addClass('collapsed');
        };

        init.push(function () {

            $('input#@Html.ClientIdFor(x => x.IsActiveEmployee)').switcher({
                on_state_content: 'Active',
                off_state_content: 'Inactive'
            });
            $('input#@Html.ClientIdFor(x => x.IsActiveEmployee)').parent().css("width", "80px");
        	$('.datepicker').datepicker(datePickerOptions);

            initTrainings();
            initPanels();
        });

        function loadTraining(trainingId, resourceId) {
            if (trainingId.length > 0)
                StartEdit('Trainings', trainingId, null, null, 'erorMsgPlaceholder');
            var url = trainingId.length > 0 ? "?Id=" + trainingId + "&resourceId=" + resourceId : "?resourceId=" + resourceId;
            $('#trainingReload').load('@Url.Action("LoadTraining", "PeopleResource")' + url, function () {
                initTrainings();
                $('#editScheduleTraining').on('hidden.bs.modal', function () {
                    if (trainingId.length > 0) {
                        StopEdit();
                        RemoveLock('Trainings', trainingId);
                    }
                }).modal('show');
            });
        }

        function editTraining(aId, trainingId) {
            if (!CheckLock(aId, 'Trainings', trainingId))
                return false;
            loadTraining(trainingId, '@Model.Id');
            return true;
        }

        function deleteTraining(aId, trainingId) {
            if (!CheckLock(aId, 'Trainings', trainingId))
                return false;
            if (trainingId.length > 0)
                StartEdit('Trainings', trainingId, null, null, 'erorMsgPlaceholder');
            $("#deleteTrainingId").val(trainingId);
            $('#modal-warning').on('hidden.bs.modal', function () {
                if (trainingId.length > 0) {
                    StopEdit();
                    RemoveLock('Trainings', trainingId);
                }
            }).modal('show');
            return true;
        }


        function toggleTeamListView(element) {
            $(element).parent().children('div.teamsList').toggle(100, function () {
                if ($(this).parent().children('div.header').children('i.icon').hasClass('fa-caret-right')) {
                    $(this).parent().children('div.header').children('i.icon').removeClass('fa-caret-right');
                    $(this).parent().children('div.header').children('i.icon').addClass('fa-caret-down');
                } else {
                    $(this).parent().children('div.header').children('i.icon').removeClass('fa-caret-down');
                    $(this).parent().children('div.header').children('i.icon').addClass('fa-caret-right');
                }
            });
        }

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

        $(document).on('hide.bs.modal', '#editScheduleTraining', function (e) {
            // skip modal hide event from datepickers
            if ($(e.target).attr('id') != 'editScheduleTraining')
                return true; // close modal form
            // check that form has been changed
            if (typeof isSTDataChanged === 'function')
                // if form has been changed
                if (isSTDataChanged()) {
                    // ask user for confirmation of form close
                    if (confirm("Training edit form contains unsaved changes, do you really want to close the form?")) {
                        // reset change indicator
                        if (typeof resetSTDataChanged === 'function') {
                            resetSTDataChanged();
                        }
                        return true; // close modal form
                    };
                    return false; // DO NOT close modal form
                }
            return true; // close modal form
        });
    </script>
}

<div id="erorMsgPlaceholder"></div>
<div class="table-light table-responsive" ng-app="app" id="resourceDashboard">
    <div class="panel widget-messages-alt" id="information">
        <div class="panel-heading">
            <span class="panel-title ui-expander">
                <a data-toggle="collapse" data-target="#panelInfo" class="collapsed">
                    <i class="panel-title-icon fa fa-info"></i>People Resource Information
                </a>
            </span>
        </div>
        <div id="panelInfo" class="panel-collapse collapse in">
            <div class="panel-body padding-sm">
                <div class="messages-list">
                    <div class="form-group">
                        @Html.LabelFor(model => model.FirstName, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-10">
                            @Html.TextBoxFor(model => model.FirstName, new { @class = "form-control", @readonly = "true" })
                            @Html.ValidationMessageFor(model => model.FirstName)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.LastName, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-10">
                            @Html.TextBoxFor(model => model.LastName, new { @class = "form-control", @readonly = "true" })
                            @Html.ValidationMessageFor(model => model.LastName)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.IsActiveEmployee, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-10">
                            @Html.CheckBoxFor(model => model.IsActiveEmployee, new { @class = "switcher-disabled-default", @disabled = "disabled" })
                            @Html.ValidationMessageFor(model => model.IsActiveEmployee)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.StartDate, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-10">
                            @Html.EditorFor(model => model.StartDate, new { @class = "form-control", @Disabled = true })
                            @Html.ValidationMessageFor(model => model.StartDate)
                        </div>
                    </div>
                    <div class="form-group" style="@(Model.PermanentResource ? "display:none;" : "")">
                        @Html.LabelFor(model => model.EndDate, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-10">
                            @Html.EditorFor(model => model.EndDate, new { @class = "form-control", @Disabled = true })
                            @Html.ValidationMessageFor(model => model.EndDate)
                        </div>
                    </div>
                </div>
                <div>
                    <fieldset id="fsTeams">
                        <div class="form-group">
                            <label class="col col-sm-2 control-label">Team</label>
                            <div class="col col-sm-10 teamsList">
                                <label class="control-label">@Model.Team.Name</label>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div>
                    <fieldset id="fsExpenditures">
                        <div class="form-group">
                            @* SA. ENV-756. ENV-839 ExpName -> ExpCatName *@
                            <label class="col col-sm-2 control-label">Expenditure Category</label>
                            <div class="col col-sm-10 teamsList">
                                <span>@Model.ExpenditureCategory.GetView().ExpCategoryWithCcName</span>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>

    </div>

    <div class="panel widget-messages-alt" id="skills">
        <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-laptop"></i>Resource Skills
                </a>
            </span>
        </div>
        <div id="panelSkills" class="panel-collapse collapse">
            <div class="panel-body padding-sm">
                <div class="messages-list">

                </div>
            </div>
        </div>
    </div>

    <div class="panel widget-messages-alt" id="time" data-section="capacityManagementView">
        <div class="panel-heading">
            <span class="panel-title ui-expander">
                <a data-toggle="collapse" data-target="#panelTime" class="collapsed">
                    <i class="panel-title-icon fa fa-clock-o"></i>Resource Time
                </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"></ul>
            </div>
            @* SA. ENV-799 <div class="pull-right" style="padding-right: 20px;"><a class="noShevron" href="javascript:OpenInNewWindow()">Open in new window</a></div> *@
        </div>
        <div id="panelTime" class="ac panel-collapse collapse">
            <div class="panel-body padding-sm">
                @Html.Partial("../CapacityManagement/_capacityManagement", Model)
            </div>
        </div>
    </div>

    <div class="panel widget-messages-alt" id="vacation">
        <div class="panel-heading">
            <span class="panel-title ui-expander">
                <a data-toggle="collapse" data-target="#panelVacation" class="collapsed">
                    <i class="panel-title-icon fa fa-beer"></i>Vacation Schedule
                </a>
            </span>
        </div>
        <div id="panelVacation" class="panel-collapse collapse">
            <div class="panel-body padding-sm">
                @if (SecurityManager.CheckSecurityObjectPermission(Areas.Vacations, AccessLevel.Write))
                {
                    <a class="btn btn-primary" style="margin-bottom: 10px;" href='@(Request.QueryString["viewId"] != null ? Url.Action("EditVacation", "PeopleResource", new {peopleResourceId=Model.Id , viewId = Request.QueryString["viewId"]}) : Url.Action("EditVacation", "PeopleResource", new {peopleResourceId=Model.Id}))'>Add Vacation</a>
                }
                @if (SecurityManager.CheckSecurityObjectPermission(Areas.Vacations, AccessLevel.Read))
                {
                    <div class="messages-list table-light no-margin">
                        <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="tblVacations" style="margin-bottom: 25px;">
                            <thead>
                                <tr>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Duration</th>
                                    <th>Hours Available</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var vacation in Model.Vacations)
                                {
                                    <tr>
                                        <td>@vacation.StartDate.Value.ToShortDateString()</td>
                                        <td>@vacation.EndDate.Value.ToShortDateString()</td>
                                        <td>@(vacation.Duration) days</td>
                                        <td>@((int)(vacation.UOMValue * vacation.PeopleResourceVacations.Count - vacation.PeopleResourceVacations.Sum(t => t.HoursOff))) hours</td>
                                        <td>
                                            @if (SecurityManager.CheckSecurityObjectPermission(Areas.Vacations, AccessLevel.Write))
                                            {
                                                <a id="aEditVac_@vacation.Id" onclick="return CheckLock(this.id, 'Vacations', '@vacation.Id')" href="@(Request.QueryString["viewId"] != null ? Url.Action("EditVacation", "PeopleResource", new {id = vacation.Id, viewId = Request.QueryString["viewId"]}) :Url.Action("EditVacation", "PeopleResource", new {id = vacation.Id}))" data-placement="left" class="btn btn-primary popover-warning popover-dark"><i class="fa fa-pencil"></i> Edit</a>
                                                <a id="aDeleteVac_@vacation.Id" onclick="return CheckLock(this.id, 'Vacations', '@vacation.Id')" href="@(Request.QueryString["viewId"] != null ? Url.Action("DeleteVacation", "PeopleResource", new {id = vacation.Id, viewId = Request.QueryString["viewId"]}) :Url.Action("DeleteVacation", "PeopleResource", new {id = vacation.Id}))" data-placement="left" class="btn btn-danger popover-warning popover-dark"><i class="fa fa-trash-o"></i> Delete</a>
                                            }
                                        </td>
                                    </tr>
                                }
                            </tbody>
                            <tfoot>

                            </tfoot>
                        </table>
                    </div>
                }
            </div>
        </div>
    </div>

    <div class="panel widget-messages-alt" id="tranings">
        <div class="panel-heading">
            <span class="panel-title ui-expander">
                <a data-toggle="collapse" data-target="#panelTraining" class="collapsed">
                    <i class="panel-title-icon fa fa-rocket"></i>Training Schedule
                </a>
            </span>
        </div>
        <div id="panelTraining" class="panel-collapse collapse">
            <div class="panel-body padding-sm">
                @if (SecurityManager.CheckSecurityObjectPermission(Areas.Trainings, AccessLevel.Write))
                {
                    <a class="btn btn-primary" style="margin-bottom: 10px;" href="javascript:;" onclick="loadTraining('', '@Model.Id');">Schedule a Training</a>
                }
                @if (SecurityManager.CheckSecurityObjectPermission(Areas.Trainings, AccessLevel.Read))
                {
                    <div class="messages-list table-light no-margin">
                        <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="tblTrainings" style="margin-bottom: 25px;">
                            <thead>
                                <tr>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Duration</th>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Hours Allocated</th>
                                    <th>Cost</th>
                                    <th>Skills</th>
                                    <th></th>

                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var training in Model.Trainings)
                                {
                                    <tr>
                                        <td>@training.TrainingStartDate.ToShortDateString()</td>
                                        <td>@training.TrainingEndDate.ToShortDateString()</td>
                                        <td>@(training.TrainingDuration) days</td>
                                        <td>@(training.TrainingName)</td>
                                        <td>@(training.TrainingTypeName)</td>
                                        <td>@(training.TrainingTimeAllocated) %</td>
                                        <td>@(training.TrainingCost)</td>
                                        <td></td>
                                        <td>
                                            @if (SecurityManager.CheckSecurityObjectPermission(Areas.Trainings, AccessLevel.Write))
                                            {
                                                <a href="#" id="aEditTrain_@training.Id" onclick="return editTraining(this.id, '@training.Id')" data-placement="left" class="btn btn-primary popover-warning popover-dark"><i class="fa fa-pencil"></i> Edit</a>
                                                <a href="#" id="aDeleteTrain_@training.Id" onclick="return deleteTraining(this.id, '@training.Id')" data-placement="left" class="btn btn-danger popover-warning popover-dark"><i class="fa fa-trash-o"></i> Delete</a>
                                            }
                                        </td>
                                    </tr>
                                }
                            </tbody>
                            <tfoot>

                            </tfoot>
                        </table>
                    </div>
                }
            </div>
        </div>
    </div>

    <div class="panel widget-messages-alt" id="loan-outs">
        <div class="panel-heading">
            <span class="panel-title ui-expander">
                <a data-toggle="collapse" data-target="#panelLoanOuts" class="collapsed">
                    <i class="panel-title-icon fa fa-envelope"></i>Resource Loan-outs
                </a>
            </span>
        </div>
        <div id="panelLoanOuts" class="panel-collapse collapse">
            <div class="panel-body padding-sm">
                <div class="messages-list">

                </div>
            </div>
        </div>
    </div>

    <div class="form-group" style="margin-bottom: 0;">
        <div class="col-sm-offset-2 col-sm-10">
            <a class="btn btn-primary" href="@(Request.QueryString["viewId"]== null ? Url.Action("Board", "Team", new { teamId = Model.TeamId }) : Url.Action("Board", "View", new { viewId = Request.QueryString["viewId"].ToString() }))"><i class="fa fa-backward"></i> Back to people resources</a>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="editScheduleTraining" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content" id="trainingReload">
            @Html.Partial("_scheduleTraining", Model.Training)
        </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("DeleteTraining", "PeopleResource")
        {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(model => model.Id)
        <input type="hidden" id="deleteTrainingId" name="deleteTrainingId" />
        <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 Training</h4>
            </div>
            <div class="modal-title"></div>
            <div class="modal-body"><strong>Deleting this training will affect all resources involved. Continue?</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 -->
@*@section Scripts
    {
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
    }*@