@model Neo.LegitimateLicences.ApplicationRequest.ApplicationLicenceAddRouteModel
@using Neo.Afx.ComponentModel
@using Neo.Afx.Mvc

@{
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}

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

    @Html.Raw("$.extend(dialogViewModel" + Model.AjaxRequestTicket + ".prototype,")
    {
        applicationLicenceID: @Model.ApplicationLicenceID,
        serviceTypeID: @Model.ServiceTypeID,
        applicationLicenceRouteDetailID: ko.observable(@Model.ApplicationLicenceRouteDetailID),
        routeSearchValue: ko.observable(),
        existingRoutes: ko.observableArray(),
        initiatedSearch: ko.observable(),
        completedSearch: ko.observable(),
        isLoading: ko.observable()
    });

    @Html.Raw("$.extend(dialogViewModel" + Model.AjaxRequestTicket + ".prototype,")
    {        
        SearchForRoute: function()
        {
            var s = this;
            var routeSearchValue = s.routeSearchValue();

            if (routeSearchValue.length < 3) {
                alert('Please enter at least three characters before searching');
                return;
            }

            s.isLoading(true);
            s.completedSearch(false);
            s.initiatedSearch(true);
            s.existingRoutes([]);

            var data = {
                searchText: routeSearchValue,
                associationID: @Model.AssociationID
            };

            app.dataManager.post("ApplicationRequest", "SearchVerifiedRoutes", data,
                function (response) {
                    if (response != null) {

                        if (response.Success == true) {
                            s.existingRoutes(response.Result);
                            s.isLoading(false);
                            $('#existingRoutes').dxDataGrid('instance').option('dataSource', dialogViewModel.existingRoutes());
                        } else {
                            s.existingRoutes([]);
                            s.isLoading(false);
                        }
                    }
                    s.completedSearch(true);
                }, null);
        },

        AddExistingRoute: function(routeID) {

            var data = {
                applicationLicenceID: dialogViewModel.applicationLicenceID,
                routeID : routeID,
                serviceTypeID: dialogViewModel.serviceTypeID
            };
            
            $(".modal-dialog.modal-lg").addClass("is-loading");

            app.dataManager.post(
                'ApplicationRequest',
                'AddExistingRoute',
                data,
                function (response) {
                    if (response.Success) {
                        $(".modal-dialog.modal-lg").removeClass("is-loading");
                        
                        $(".close").click();
                        $("#licenceDetails").trigger("LicenceRouteAdded", [dialogViewModel.applicationLicenceID, response.Result]);
                    }
                    else {
                        $(".modal-dialog.modal-lg").removeClass("is-loading");
                        app.dialogs.showError.fire({ title: 'Save error', html: response.Error });
                    }
                }, function (errorObj, errorStatus, errorText) {
                    $(".modal-dialog.modal-lg").removeClass("is-loading");
                    app.dialogs.showError.fire({title: 'Save error', html: errorText });
                });            
        },

        RemoveApplicationLicenceRoute: function() {
            app.dialogs.showConfirm.fire({
                title: "Are you sure you want to remove this route?"
            }).then(
                function(dialogResult) {
                    if (dialogResult.value) {
                        var data = {
                            applicationLicenceID: @Html.Raw(Model.ApplicationLicenceID),
                            applicationLicenceRouteDetailID: @Html.Raw(Model.ApplicationLicenceRouteDetailID)
                        };

                        app.dataManager.post(
                            "ApplicationRequest",
                            "RemoveLicenceRoute",
                            data,
                            function (response) {
                                if (response.Success) {
                                    $(".close").click();
                                    $("#licenceDetails").trigger("LicenceRouteDetailRemoved", [response.Result, data.applicationLicenceID, data.applicationLicenceRouteDetailID]);
                                }
                            },
                            null);
                    }
                }
            );
        }
    });
</script>

<div id="@(new HtmlString("koContainer" + Model.AjaxRequestTicket))" class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

        <div class="modal-header">
            <h4 class="modal-title" data-bind="visible:applicationLicenceRouteDetailID() != 0">Route @Html.Raw(Model.Route.NationalRouteNumber)</h4>
            <h4 class="modal-title" data-bind="visible:applicationLicenceRouteDetailID() == 0">Add an existing route</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="modal-body">
            <div class="container-fluid">

                <div data-bind="visible:applicationLicenceRouteDetailID() != 0">
                    <div class="row">
                        <div class="col-md-12">
                            <h5>@Html.Raw(Model.Route.Description)</h5>
                        </div>
                    </div>
                </div>

                <div data-bind="visible:applicationLicenceRouteDetailID() == 0">
                    <div class="row">
                        <div class="col-md-12 input-group">
                            <input id="routeSearchValue" placeholder="Enter a route number or description" type="text" maxlength="255" data-bind="value: routeSearchValue" class="form-control" />
                            <div class="input-group-append">
                                <button class="btn btn-outline-primary" type="button" data-bind="click: function() { dialogViewModel.SearchForRoute(); } ">Search</button>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div id="existingRoutes" data-bind="visible: existingRoutes().length > 0" style="margin-top:5px;" />
                            <span data-bind="visible: existingRoutes().length == 0 && completedSearch() == true && initiatedSearch() == true">No Data Currently Found.</span>
                            <span data-bind="visible: completedSearch() == false && initiatedSearch() == true">Searching...</span>
                            <span data-bind="visible: existingRoutes().length == 0 && completedSearch() == false && initiatedSearch() == false">Please enter your search criteria above and click on Search.</span>
                        </div>
                    </div>
                </div>



            </div>            
        </div>
        
        <div class="modal-footer">
            @if (Model.CanEditRouteDetails && Model.ApplicationLicenceRouteDetailID > 0)
            {
                <button id="Remove" data-bind="click: RemoveApplicationLicenceRoute" class="btn btn-primary btn-danger mr-auto">Remove Route</button>
            }
        </div>
    </div>
</div>

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

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


        $("#existingRoutes").dxDataGrid(
            {
                dataSource: dialogViewModel.existingRoutes,
                showColumnLines: false,
                showRowLines: true,
                rowAlternationEnabled: true,
                showBorders: true,
                allowColumnReordering: false,
                allowColumnResizing: true,
                columns: [
                    "RouteName",
                    {
                        caption: "National Route #",
                        dataField: "NationalRouteNumber"
                    },
                    {
                        caption: "Board Route #",
                        dataField: "BoardRouteNumber"
                    },
                    {
                        caption: "",
                        width: 100,
                        cellTemplate: function (container, options) {
                            var rowData = options.row.data;

                            $('<button class="btn btn-primary btn-sm" onclick="dialogViewModel.AddExistingRoute(' + rowData.RouteID + ')">Add Route</a>').appendTo(container);
                        }
                    }
                ],
                masterDetail: {
                    enabled: true,
                    template: function (container, options) {
                        var currentRoute = options.data;

                        $("<div style='white-space:normal'>")
                            .text(currentRoute.RouteDescription)
                            .appendTo(container);
                    }
                },
                paging: {
                    enabled: true
                }
            });



    });
</script>