@model Neo.LegitimateLicences.NewRouteRequest.NewRouteRequestModel
@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('RequestOrigin'),
    originPlaceID: ko.observable(),
    destinationPlaceID: ko.observable(),
    existingRoutes: ko.observableArray(),
    existingRequests: ko.observableArray(),
    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() == "RequestOrigin") {
                var e = [];

                app.utils.validator.autoColorElement(true);

                app.utils.validator.isModelFieldEmpty('viewModel.originPlaceID', 'Please select the origin.', e);
                app.utils.validator.isModelFieldEmpty('viewModel.destinationPlaceID', 'Please select the destination.', e);

                if (e.length == 0) {
                    self.wizardState('LoadingRouteDetails');

                    app.dataManager.post("NewRouteRequest", 'ExistingRequestAndRouteSearch',
                        {
                            originPlaceID: self.originPlaceID(),
                            destinationPlaceID: self.destinationPlaceID()
                        },
                        function (response) {
                            if (response.Success) {                                                                
                                if (response.Result.ExistingRoutesFound || response.Result.ExistingRequestsFound) {
                                    self.existingRoutes([]);
                                    if (response.Result.ExistingRoutesFound) {
                                        self.existingRoutes(response.Result.ExistingRoutes);
                                        $('#existingRoutes').dxDataGrid('instance').option('dataSource', viewModel.existingRoutes());
                                        $('#existingRoutes').show();
                                    }

                                    self.ExistingRequests([]);
                                    if (response.Result.ExistingRequestsFound) {
                                        self.existingRoutes(response.Result.ExistingRequests);
                                        $('#existingRequests').dxDataGrid('instance').option('dataSource', viewModel.ExistingRequests());
                                        $('#existingRequests').show();
                                    }

                                    self.isNextButtonVisible(false);
                                    self.isCreateApplicationButtonVisible(true);
                                    self.wizardState('CheckExisting');
                                }
                                else 
                                {
                                    self.CreateRouteRequest();
                                }
                            }
                            else {
                                alert(response);
                            }
                        });
                }
            }
            else {
                console.log('unknown state:' + self.wizardState());
                console.log(data);
            }
        },

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

            app.dataManager.post("NewRouteRequest", 'CreateNewRouteRequest',
                {
                    originPlaceID: self.originPlaceID(),
                    destinationPlaceID: self.destinationPlaceID()                                        
                },
                function (response) {
                    if (response.Success) {
                        document.location.href = '/NewRouteRequest/Console?EntityID=1002&ItemID=' + response.Result.NewRouteRequest.NewRouteRequestDetailID + '#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="#">Routes</a>
            </li>
            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>
            <li class="nav-item">
                <a href="#">Start a new route 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 route request</h4>
                </div>

                <div class="card-body">

                    <div class="form-group" data-bind="visible:wizardState()=='RequestOrigin'">
                        <label for="idType">Select the route origin:</label>
                        <span id="originPlaceID" data-picker-bind="modelID: originPlaceID, template: RoutePlacePicker"></span>
                        <div class="invalid-feedback">
                            Please select the route origin
                        </div>
                    </div>

                    <div class="form-group" data-bind="visible:wizardState()=='RequestOrigin'">
                        <label for="idType">Select the route destination:</label>
                        <span id="destinationPlaceID" data-picker-bind="modelID: destinationPlaceID, template: RoutePlacePicker"></span>
                        <div class="invalid-feedback">
                            Please select the destination
                        </div>
                    </div>

                    <div data-bind="visible:wizardState()=='LoadingRouteDetails'">
                        <div class="is-loading"></div>
                        <p class="pt-3 text-center">Checking if there are any requests in progress for this origin or destination...</p>
                    </div>

                    <span data-bind="visible:wizardState()=='CheckExisting'">
                            @Html.Partial("New.CheckExisting")
                    </span>

                    <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:CreateRouteRequest, visible:isCreateApplicationButtonVisible">Create Request</button>
                </div>
            </div>

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

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

    var pickerTemplates =
    {
        RoutePlacePicker:
        {
            source: 'VerifiedPlaces',
            primaryKey: 'PlaceID',
            param: 'SearchText'
        }
    };

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

        widgets.applyPickerBindingsElement($('#originPlaceID'), pickerTemplates);
        widgets.applyPickerBindingsElement($('#destinationPlaceID'), pickerTemplates);

        $("#originPlaceID input").focus();

        $("#existingRoutes").dxDataGrid(
            {                
                dataSource: viewModel.existingRoutes,
                showColumnLines: false,
                showRowLines: true,                
                showBorders: true,
                allowColumnReordering: false,
                allowColumnResizing: true,                                                
                columns: [
                    {
                        caption: "National Route Number",
                        dataField: "NationalRouteNumber"
                    }],
                paging: {
                    enabled: false
                }                
            });
        
        $("#existingRequests").dxDataGrid(
            {
                dataSource: viewModel.existingRequests,
                showColumnLines: false,
                showRowLines: true,
                showBorders: true,
                allowColumnReordering: false,
                allowColumnResizing: true,
                columns: [
                    {
                        caption: "Reference Number",
                        dataField: "ReferenceNumber"
                    }],
                paging: {
                    enabled: false
                }
            });
    });
</script>