@model Neo.LegitimateLicences.ApplicationRequest.ApplicationRequestFormModel
@using Neo.Afx.ComponentModel
@using Neo.Afx.Security
@using Neo.Afx.Mvc
@using Neo.LegitimateLicences.Common;

@{
    var entityID = ((Neo.Afx.Services.Workflows.Entities.Vw_WorkflowInstance)Model.WorkflowInstance).EntityID;
    var itemID = ((Neo.Afx.Services.Workflows.Entities.Vw_WorkflowInstance)Model.WorkflowInstance).ItemID;
}

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

@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
{
    data:  ko.mapping.fromJSON('@Html.Raw(Model.Data.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime))'),
    relatedApplication:  ko.mapping.fromJSON('@Html.Raw(Model.RelatedTATApplicationDetails.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime))'),
    wf: @Html.Raw(Model.WorkflowInstance.ToJson(JsonSerializerOptions.None)),
    lookups: @Html.Raw(Model.Lookups.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime)),
    cis: ko.observable(1),
    cts: ko.observable(1),
    documentStoreLocationID: ko.observable(3),
    entityID: ko.observable(@entityID),
    itemID: ko.observable(@itemID),
    tradeNameAndBusinessTypeVisible : ko.observable(false)
});
</script>

<script type="text/javascript">
    app.utils.validator.autoColorElement(true);
</script>

<script type="text/javascript">
@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
{
        AppTypeID: function() {
            return viewModel.data.ApplicationRequestTypeID();
        },

        MakeTradeNameAndBusinessTypeVisible: function () {
            if (viewModel.data.Applicant.IDTypeID() == @((short)IdTypeEnum.FoundingStatement) || viewModel.data.Applicant.IDTypeID() == @((short)IdTypeEnum.CertificateofIncorporation)) {
                viewModel.tradeNameAndBusinessTypeVisible(true);
            }
        },

        Save: function(callBack)
        {
            var self = this;
            app.dataManager.saveItem(
                'ApplicationRequest',
                self.data,
                function (result) {
                    if (callBack != null) {
                        callBack(result);
                    }
                }, function (errorObj, errorStatus, errorText) {
                    app.dialogs.showError.fire({title: 'Workflow Save Action', html: 'Save Failed with error: ' + errorText });
                    if (errorStatus == "CONFLICT") {
                        app.reload();
                    }
                });
        },

        SaveButtonClick: function () {
            var self = this;

            $("#MainCard").addClass("is-loading");
            self.Save(function (result) {
                ko.mapping.fromJS(result.data, viewModel.data);
                $("#MainCard").removeClass("is-loading");
            });
        }
});
</script>

<div id="@(new HtmlString("koContainer" + Model.AjaxRequestTicket))">
    @Html.Partial("Console.PageHeader")

    <div class="row">
        <div class="col">
            <div id="MainCard" class="card">
                <div class="card-header navbar">
                    <h4 class="card-title" data-bind="text:wf.Description"></h4>
                </div>
                <div id="Form-Sections" class="accordion accordion-secondary">
                    @if (Model.CanViewTATDetails)
                    {
                        @Html.Partial("Form.TATDetails")//View to display TAT specific details
                    }

                    @if (Model.CanViewRelatedTATRequest)
                    {
                        @Html.Partial("Form.RelatedTATDetails") //View to display details from corresponding TAT request
                    }

                    @if (Model.CanViewApplicantDetails)
                    {
                        @Html.Partial("Form.ApplicantDetails") //View to display Applicant Details
                    }

                    @if (Model.CanViewProxyDetails)
                    {
                        @Html.Partial("Form.ProxyDetails") //View to display Proxy Details
                    }

                    @if (Model.CanViewPreviousLicenceHolderDetails)
                    {
                        @Html.Partial("Form.PreviousLicenceHolder") //View to display Previous Licence Holder
                    }

                    @if (Model.CanViewNptrVehicleSummaryDetails)
                    {
                        @Html.Partial("Form.NPTRVehicleSummary") //View to display NPTR Vehicle Summary
                    }

                    @if (Model.CanViewNptrVehicleMaintenanceDetails)
                    {
                        @Html.Partial("Form.NPTRVehicleMaintenance") //View to display NPTR Vehicle Maintenance
                    }

                    @if (Model.CanViewNptrLiveryDetails)
                    {
                        @Html.Partial("Form.NPTRLiveryDetails") //View to display NPTR Livery Details
                    }
                </div>
                    
                    <div class="card-footer">
                        @if (Model.Ui.canSave)
                        {
                            <button class="btn btn-primary btn-round float-right" data-bind="click: function() { viewModel.SaveButtonClick(); }">
                                <i class="fa fa-save"></i>&nbsp;Save
                            </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]);

        $("#idnumber").focus();

        widgets.applyFileUploaderBindings();

        @*Keep only one accordion open on the form*@        
        var $mainCard = $('#MainCard');
        $mainCard.on('show.bs.collapse', '.collapse', function () {
            $(".collapse").removeClass("show");
            $(".accordion-head").addClass("collapsed");
        });

        SetActiveMenu("#Form");
    });
</script>