@model Neo.LegitimateLicences.BusinessRuleBypassRequest.BusinessRuleBypassRequestModel
@using Neo.Afx.ComponentModel
@using Neo.Afx.Security
@using Neo.Afx.Mvc
@using Neo.LegitimateLicences.Common;

<script type="text/javascript">
@Html.Raw("function ViewModel" + Model.AjaxRequestTicket + "() { }")

@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
{
    lookups: @Html.Raw(Model.Lookups.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime)),
    wizardState: ko.observable('RequestStart'),
    referenceNumber: ko.observable(null),
    businessRuleBypassRequestTypeID: ko.observable(null),
    reason: ko.observable(null),   
    relatedEntityID: ko.observable(null),
    relatedItemID: ko.observable(null),
    isNextButtonVisible: ko.observable(true),
    isCreateApplicationButtonVisible: ko.observable(false)
});
</script>

<script type="text/javascript">
@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
{
        NextClick: function(data) {
            var self = this;

            if (self.wizardState() == "RequestStart") {
                var e = [];

                app.utils.validator.autoColorElement(true);

                app.utils.validator.isModelFieldEmpty('viewModel.businessRuleBypassRequestTypeID', 'Please select a request type.', e);
                app.utils.validator.isModelFieldEmpty('viewModel.referenceNumber', 'Please enter the reference number.', e);
                app.utils.validator.isModelFieldEmpty('viewModel.reason', 'Please enter the reason for the change.', e);

                if (e.length == 0) {
                    $("#newWizard").addClass("is-loading");

                    app.dataManager.post("BusinessRuleBypassRequest", 'ValidateBusinessRuleBypassRequest',
                        {
                            referenceNumber: self.referenceNumber(),
                            businessRuleBypassRequestTypeID: self.businessRuleBypassRequestTypeID()
                        },
                        function (response) {
                            if (response.Success) {
                                if (response.Result) {
                                    self.relatedEntityID(response.Result.EntityID);
                                    self.relatedItemID(response.Result.ItemID);
                                    self.isNextButtonVisible(false);
                                    self.wizardState('CheckExisting');
                                    viewModel.CreateBusinessRuleBypassRequest();
                                }
                                else
                                {
                                    app.dialogs.showError.fire({ title: 'Error', html: response.Error });
                                    $("#newWizard").removeClass("is-loading");
                                }
                            }
                            else {
                                app.dialogs.showError.fire({ title: 'Error', html: response.Error });
                                $("#newWizard").removeClass("is-loading");
                            }
                        });
                }
            }
            else {
                console.log('unknown state:' + self.wizardState());
                console.log(data);
            }
        },

        CreateBusinessRuleBypassRequest: function() {
            var self = this;
            $("#newWizard").addClass("is-loading");

            app.dataManager.post("BusinessRuleBypassRequest", 'CreateBusinessRuleBypassRequest',
                {
                    businessRuleBypassRequestTypeID: self.businessRuleBypassRequestTypeID(),
                    referenceNumber: self.referenceNumber(),
                    reason: self.reason(),
                    relatedEntityID: self.relatedEntityID(),
                    relatedItemID: self.relatedItemID()
                },
                function (response) {
                    if (response.Success) {
                        document.location.href = '/BusinessRuleBypassRequest/Console?EntityID=1032&ItemID=' + response.Result.BusinessRuleBypassRequestDetailID + '#Form';
                        self.isCreateApplicationButtonVisible(false);
                    }
                    else {
                        alert(response.Error);
                    }
                });
        }
});
</script>

<div id="@(new HtmlString("koContainer" + Model.AjaxRequestTicket))">
    <div class="page-header flex-lock">
        <h4 class="page-title">Home</h4>
        <ul class="breadcrumbs">
            <li class="nav-home">
                <a href="#Dashboards/Default">
                    <i class="flaticon-home"></i>
                </a>
            </li>
            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>
            <li class="nav-item">
                <a href="#">Business Rule Bypass Request</a>
            </li>
            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>
            <li class="nav-item">
                <a href="#">Start a new business rule bypass request</a>
            </li>
        </ul>
    </div>

    <div class="row">
        <div class="col">

            <div id="newWizard" class="card">
                <div class="card-header navbar flex-lock">
                    <h4 class="card-title">Start a new business rule bypass request</h4>
                </div>

                <div class="card-body">

                    <div class="form-group" data-bind="visible:wizardState()=='RequestStart'">
                        <label for="idType">Workflow Reference Number:</label>
                        <input type="text" class="form-control form-control-lg" id="referenceNumber" data-bind="value: referenceNumber">
                        <div class="invalid-feedback">
                            Capture the reference number for an inprogress workflow request
                        </div>
                    </div>

                    <div class="form-group" data-bind="visible:wizardState()=='RequestStart'">
                        <label for="idType">Business Rule Bypass Request Type:</label>
                        <select id="idType" class="form-control form-control-lg" data-bind="options: app.lookups.GetLookupValues($root, 'BusinessRuleBypassRequestTypes'), optionsCaption: 'Please select the request type', optionsText: 'Title', optionsValue: 'Key', value: businessRuleBypassRequestTypeID"></select>
                        <div class="invalid-feedback">
                            Please select the request type
                        </div>
                    </div>

                    <div class="form-group" data-bind="visible:wizardState()=='RequestStart'">
                        <label for="idType">Reason for the change:</label>
                        <textarea id="idType" class="form-control form-control-lg" data-bind="value: reason"></textarea>
                        <div class="invalid-feedback">
                            Please enter the reason for the change
                        </div>
                    </div>


                    <div data-bind="visible:wizardState()=='CheckingRequest'">
                        <div class="is-loading"></div>
                        <p class="pt-3 text-center">Checking request...</p>
                    </div>              

                    <button class="btn btn-primary float-right" data-bind="click:NextClick, visible:isNextButtonVisible">Next</button>
                    <button class="btn btn-success float-right" data-bind="click:CreateBusinessRuleBypassRequest, visible:isCreateApplicationButtonVisible">Create Request</button>
                </div>
            </div>

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

<script type="text/javascript">
    @Html.Raw("var viewModel = new ViewModel" + Model.AjaxRequestTicket + "();")

    $().ready(function () {
        var mainDiv = $("#@(new HtmlString("koContainer" + Model.AjaxRequestTicket))");
        ko.cleanNode(mainDiv[0]);
        ko.applyBindings(viewModel, mainDiv[0]);

        $("#referenceNumber input").focus();
    });
</script>