@model Neo.LegitimateLicences.Admin.VehicleMakesModel
@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,")
{
        VehicleMakes: ko.observable(@Html.Raw(Model.VehicleMakes.ToJson(JsonSerializerOptions.FormatDateTime | JsonSerializerOptions.EscapeBackSlash))),
        VehicleMake: ko.mapping.fromJSON(@Html.Raw(Model.VehicleMake.ToJson(JsonSerializerOptions.FormatDateTime | JsonSerializerOptions.EscapeBackSlash))),
        lookups: @Html.Raw(Model.Lookups.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime)),
        VehicleMakeID: ko.observable(null),
        Description: ko.observable(null),
        IsCancelled : ko.observable(false),
        Searched: ko.observable(false),
        Saved: ko.observable(false),
        upsertVisible: ko.observable(false),
        reason: ko.observable(null),




});
</script>

<script type="text/javascript">
@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
    {
        StartVehicleMakeInsert: function () {
            var s = this;
            $("#vehicleMakesList").addClass("is-loading");
            
            s.VehicleMakeID(-1);
            s.Description(null);
            s.IsCancelled(false);
            viewModel.upsertVisible(true);

            $("#vehicleMakesList").removeClass("is-loading");
        },

        LoadVehicleMake: function (data) {
            var s = viewModel;
            
            s.VehicleMakeID(-1);
            s.Description(null);
            s.IsCancelled(false);


            s.VehicleMakeID(data.VehicleMakeID);
            s.Description(data.Description);
            s.IsCancelled(data.IsCancelled);

            s.VehicleMake.VehicleMakeID = data.VehicleMakeID;
            s.VehicleMake.Description = data.Description;
            s.VehicleMake.IsCancelled = data.IsCancelled;
            viewModel.upsertVisible(true);
          
        },

        UpsertVehicleMake: function () {
            
            var s = viewModel;
            var _v = app.utils.validator;

            if (!s.Validate()) {
                return;
            }

            $("#upsertButton").addClass("is-loading");
            
            s.VehicleMake.VehicleMakeID = s.VehicleMakeID();
            s.VehicleMake.Description = s.Description();
            s.VehicleMake.IsCancelled = s.IsCancelled();

            var pushData = {
                vehicleMakeID : s.VehicleMake.VehicleMakeID,
                description: s.VehicleMake.Description,
                isCancelled : s.VehicleMake.IsCancelled
            };
            s.Searched(false);
            app.dataManager.post("Admin", 'UpsertVehicleMake', pushData,
                function (result) {
                    if (result != null) {
                        viewModel.upsertVisible(false);
                        $("#upsertButton").removeClass("is-loading");
                        if (result.success == true) {
                            $("#searchButton").addClass("is-loading");
                            s.VehicleMakes(result.data);
                            $('#vehicleMakesList').dxDataGrid('instance').option('dataSource', viewModel.VehicleMakes());
                            app.dialogs.showInfo.fire({ title: 'Request success', html: "Request Submitted Successfully" });

                        } else {
                            s.VehicleMakes([]);
                            app.dialogs.showError.fire({ title: 'Request error', html: result.errorMessage });
                        }
                    }
                }, null);
        },

        CancelLicencingBoard: function (VehicleMakeID, makeName) {
            
            var s = viewModel;
            var _v = app.utils.validator;
            app.dialogs.showConfirm.fire({
                title: "Are you sure you want to delete vehicle make " + makeName + "?",
                input:'text',
                showCancelButton: true,
                inputValidator: function (value) {
                    if (value) {
                        return value.length < 10 && 'Please enter at least 10 characters'
                    }
                    else {
                        return !value /*&& 'Please enter a description of what happened to the page'*/
                    }
                }
            }).then(
                function (dialogResult) {
                    if (dialogResult.value) {
                        s.reason(dialogResult.value);
                        var data = {
                            vehicleMakeID: VehicleMakeID,
                            reason: s.reason
                        };
                        
                        app.dataManager.post("Admin", 'CancelVehicleMake', data,
                            function (result) {
                                if (result != null) {
                                    viewModel.upsertVisible(false);
                                    //$("#cancelButton").removeClass("is-loading");
                                    if (result.success == true) {
                                        
                                        s.VehicleMakes(result.data);
                                        $('#vehicleMakesList').dxDataGrid('instance').option('dataSource', viewModel.VehicleMakes());
                                        app.dialogs.showInfo.fire({ title: 'Request success', html: "Request Submitted Successfully" });

                                    } else {
                                        s.VehicleMakes([]);
                                        alert(result.errorMessage);
                                    }
                                }
                            }, null);
                    };
                }
            );

        },

        CancelUpsertVehicleMake: function () {
            var s = viewModel;
            s.VehicleMake.VehicleMakeID =-1;
            s.VehicleMake.Description =null;
            s.VehicleMake.IsCancelled= false;
            viewModel.upsertVisible(false);
        },



        GetLookupValues: function (listName) {
            
            var s = this;
            var lookups = s.lookups;

            for (var l = 0; l < lookups.length; l++) {
                if (lookups[l].ListName == listName) {
                    return app.utils.cleanIntegrationLookup(lookups[l].List);
                }
            }
        },
        Validate: function () {
            var valid = true;
            var s = viewModel;
            var e = [];
            var _v = app.utils.validator;

            if (!s.ValidateField(s.Description())
            ) {
                valid = false;
            }

            _v.isModelFieldEmpty("viewModel.Description", "Vehicle Make Description", e);
            _v.isModelFieldLengthValid("viewModel.Description", 100, "Vehicle Make Description", e);

            if (e.length > 0) {
                valid = false;
            }

            if (!valid) {
                app.dialogs.showError.fire({
                    title: 'Validation Errors', html: "<div class='form-validation-msg'>" + e.join("\r-\n") + "</div>"
                });
            }
            return valid;
        },

        ValidateField: function (field) {
            return (field != undefined && field != null && field != '');
        }   

 });
</script>

<div id="@(new HtmlString("koContainer" + Model.AjaxRequestTicket))">
    <div class="page-header flex-lock">
        <h4 class="page-title">Master Data</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">
                Vehicle Makes
            </li>
        </ul>
    </div>

    <div class="row" data-bind="visible:upsertVisible">
        <div class="col">
            <div id="TabbedCard" class="card">
                <div class="card-header navbar">
                    <h4 class="card-title">Vehicle Make</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12 col-lg-4 col-xl-3">
                            <div class="form-group bmd-form-group">
                                <label class="bmd-label-floating">Description:</label>
                                <input id ="description" type="text" data-bind="value: viewModel.Description" maxlength="100" class="form-control" />
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="card-footer" style="float:right;">
                    <button id="cancelButton" class="btn btn-primary pull-right"  style="margin-right:10px;" data-bind="click: function(){viewModel.CancelUpsertVehicleMake()};">Cancel</button>
                    <button id="upsertButton" class="btn btn-primary pull-right" style="margin-right:10px;" data-bind="click: function(){viewModel.UpsertVehicleMake()};">Save</button>
                </div>

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

        <div class="row">
            <div class="col">
                <div id="TabbedCard" class="card">
                    @*<div class="card-header navbar">
                        <h4 class="card-title">@Model.ViewName</h4>
                    </div>*@
                    <div class="card-body">
                        <div id="vehicleMakesList"></div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="card-footer">
                        <button id="addVehicleMake" href="#description" class="btn btn-primary pull-right" data-bind="click: function(){viewModel.StartVehicleMakeInsert()};">New Vehicle Make</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]);
     

        $("#vehicleMakesList").dxDataGrid(
            {
                dataSource: viewModel.VehicleMakes,
                showColumnLines: false,
                showRowLines: true,
                rowAlternationEnabled: true,
                showBorders: true,
                allowColumnReordering: false,
                allowColumnResizing: true,
                columns: [
                    
                    { dataField: "Description", caption: "Make" },
                    { dataField: "WorkflowReference", caption: "In progress approval request" },
                    {
                        caption: "",
                        minWidth: 125,
                        cellTemplate: function (container, options) {
                            var linkText = "";
                            var rowData = options.row.data;
                            $('<a id="upsertButton" style="cursor:pointer;color:#0000EE;" onclick="viewModel.CancelLicencingBoard(' + rowData.VehicleMakeID + ',\'' + rowData.Description + '\')">Delete</a>').appendTo(container);
                        }
                    }
                
                ],
                paging: {
                    enabled: true,
                    pageSize: 10
                },
                filterRow: { visible: true },
                selection: {
                    mode: "single"
                }
                ,
                onSelectionChanged: function (selectedItems) {
                    var data = selectedItems.selectedRowsData[0];
                    if (data) {
                        var event = { ctrlKey: false };
                        viewModel.LoadVehicleMake(data);
                    }
                }
            });
    });

    </script>