@using EnVisage.Code;
@using EnVisage.Code.HtmlHelpers
@model EnVisage.Models.PeopleResourceExpenditureChangeModel
@{
    ViewBag.Title = "Change Resource's Expenditure Category";

    var ajaxOptions = new AjaxOptions
    {
        HttpMethod = "POST",
        OnSuccess = "onResourceChangeExpCatSuccess",
        OnFailure = "onResourceChangeExpCatFail",
        OnComplete = "unblockUI"
    };
}

<script>
    var expCatChangeFrmModal = $("#frmChangeExpCat-peopleresource");
    var currentResourceExpCatId = "@(Model.ExpenditureCategoryId)";

    function initPeopleResourceChangeExpCatForm() {
        expCatChangeFrmModal.find('select').select2({
            allowClear: false,
            placeholder: 'Select target Expenditure Category',
            minimumResultsForSearch: 5,
        }).on('change', function (event) {
            if (event && event.val) {
                var initialValueChanged = event.val != currentResourceExpCatId;
                expCatChangeFrmModal.find('#btnsave-resourcechangeexpcat').prop('disabled', !initialValueChanged);
            }
        });

        $('#PeopleResourceChangeExpCatModal').on('hidden.bs.modal', function () {
            StopEdit();
            RemoveLock("PeopleResource", "@Model.ResourceId");
        });

        StartEdit('PeopleResource', '@Model.ResourceId', null, "#btnsave-resourcechangeexpcat", "errorMsgPlaceholder-resourcechexpcat");

        expCatChangeFrmModal.find('#btnsave-resourcechangeexpcat').click(function () {
            saveExpCatChanges();
        });
    }

    // fix modal force focus
    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        var that = this;
        $(document).on('focusin.modal', function (e) {
            if ($(e.target).hasClass('select2-input')) {
                return true;
            }

            if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
                that.$element.focus();
            }
        });
    };

    function saveExpCatChanges()
    {
        if ($("#frmChangeExpCat-peopleresource").valid()) {
            blockUI();
            $("#frmChangeExpCat-peopleresource").submit();
        }
    }

    function onResourceChangeExpCatSuccess(data, status, xhr) {
        var isJson = xhr.responseJSON != null;
        var isValid = $.isFunction(data.indexOf) && data.indexOf("field-validation-error") < 0;
        if (!isJson && !isValid) {
            $("#peopleResourceChangeExpCatForm").html(data);
            $.validator.unobtrusive.parseDynamicContent('#peopleResourceChangeExpCatForm form');
            initPeopleResourceChangeExpCatForm();
            return;
        }

        $("#PeopleResourceChangeExpCatModal").modal("hide");

        if (!status || !status == "success") {
            showErrorModal("Resource's Expenditute Category change", 'We are sorry but there was an error, please try again later.');
        }

        if (typeof loadTeamResourcesData === "function") {
            setTimeout(loadTeamResourcesData, 0);
        }
        if (typeof loadActivityCalendar === "function") {
            console.log("4");
            setTimeout(loadActivityCalendar, 0, 'resourceEdited', data);
        }
        if(typeof loadCapacityPlanner === "function") {
            setTimeout(loadCapacityPlanner, 0);
        }
        if(typeof refreshPeopleResourceInfo === "function") {
            refreshPeopleResourceInfo();
        }
    }

    function onResourceChangeExpCatFail(data, status, xhr) {
        $("#PeopleResourceChangeExpCatModal").modal("hide");
        showErrorModal("Resource's Expenditute Category change", 'We are sorry but there was an error, please try again later.');
    };
</script>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title">@ViewBag.Title</h4>
</div>

@using (Ajax.BeginForm("ChangeResourceExpenditure", "PeopleResource", null, ajaxOptions, new { @class = "form-horizontal", id = "frmChangeExpCat-peopleresource" }))
{
    <div class="modal-body">
        @Html.AntiForgeryToken()
        @Html.HiddenFor(model => model.ResourceId)
        @Html.HiddenFor(model => model.CurrentExpenditureCategoryId)
        @Html.HiddenFor(model => model.CurrentExpenditureCategoryName)
        <div class="panel-body">
			<div id="errorMsgPlaceholder-resourcechexpcat"></div>
            <div class="form-group">
                <label class="col-sm-4 control-label" for="Number">Current Expenditure Category</label>
                <div class="col-sm-8">
                    <div class="form-control" style="border: none;">@(!String.IsNullOrEmpty(Model.CurrentExpenditureCategoryName) ? Model.CurrentExpenditureCategoryName : String.Empty)</div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label" for="Number">New Expenditure Category</label>
                <div class="col-sm-8">
                    @Html.DropDownListFor(model => model.ExpenditureCategoryId, (IEnumerable<SelectListItem>)ViewBag.ExpendituresList, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.ExpenditureCategoryId)
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">Change planned capacity</label>
                <div class="col-sm-8">
                    <div class="checkbox">
                        @Html.CheckBoxFor(model => model.ChangePlannedCapacity)
                        <i>(allows to keep planned capacity up to date after changes; when category or team changed, changes planned capacity for both categories/teams)</i>
                    </div>
                </div>
            </div>
            @Html.ValidationSummary(false, "The Expenditure Category for People Resource could not be chnaged due to the following errors:")
        </div>
    </div>
    <div class="modal-footer" style="margin-bottom: 0;">
        <div class="col-sm-offset-3 col-sm-9">
            <button type="button" class="btn btn-success" id="btnsave-resourcechangeexpcat" disabled><i class="fa fa-save"></i> Save</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
}