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

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

<script type="text/javascript">
    function ViewModelLicenceAreaOfOperation() { }

    $.extend(ViewModelLicenceAreaOfOperation.prototype,
    {
        itemID: ko.observable(@Model.ItemID),
        applicationLicenceRouteDetail: ko.mapping.fromJSON('@Html.Raw(Model.ApplicationLicenceRouteDetail.ToJson(JsonSerializerOptions.None))'),
        existingApplicationLicenceRouteDetail: ko.mapping.fromJSON('@Html.Raw(Model.ExistingApplicationLicenceRouteDetail.ToJson(JsonSerializerOptions.None))'),
        membersApplicationLicenceRouteDetail: ko.mapping.fromJSON('@Html.Raw(Model.MembersApplicationLicenceRouteDetail.ToJson(JsonSerializerOptions.None))'),
        lookups: @Html.Raw(Model.Lookups.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime)),
        comments: ko.observable(''),
        selectedPlaces: ko.observableArray(),
        showValidationMessage: ko.observable(false),
        showRouteDescription: ko.observable(false),     
    });
</script>
<script>
    var javaPlace = {
        ApplicationLicenceRouteDetailPlaceID: 0,
        ApplicationLicenceRouteDetailID: -1,
        PlaceID: -1
    };
    function UpsertApplicationLicenceRoute() {
        //if (!this.ValidateUser()) {
        //    alert("Please capture all field values");
        //    return;
        //}
        
        if (!dialogViewModel.applicationLicenceRouteDetail.IsOriginSameAsPhysicalAddress() && !dialogViewModel.applicationLicenceRouteDetail.RouteOrigin())
        {
            alert("Please capture all field values");
            return;
        }

        if (!dialogViewModel.applicationLicenceRouteDetail.IsDestinationArea() && !dialogViewModel.applicationLicenceRouteDetail.RouteDestination()) {
            alert("Please capture all field values");
            return;
        }

        if (dialogViewModel.applicationLicenceRouteDetail.IsDestinationArea() && dialogViewModel.selectedPlaces().length == 0) {
            alert("Please capture all field values");
            return;
        }

        dialogViewModel.applicationLicenceRouteDetail.ApplicationLicenceRouteDetailPlaces([]);

        //Combine Places Ids
        $.each(dialogViewModel.selectedPlaces(), function (index, item) {           
            var place = ko.mapping.fromJS(javaPlace);
            place.ApplicationLicenceRouteDetailID(dialogViewModel.applicationLicenceRouteDetail.ApplicationLicenceRouteDetailID());
            place.PlaceID(item);
            dialogViewModel.applicationLicenceRouteDetail.ApplicationLicenceRouteDetailPlaces.push(place);
        });

        $('#Save').addClass("is-loading");
        $('#Save').prop('disabled', true);

        app.dataManager.post("ApplicationRequest",
            'SaveApplicationLicenceRoute', dialogViewModel.applicationLicenceRouteDetail,
            function (result) {
                if (result != null) {
                    if (result.Error == "") {
                        $('#Save').removeClass("is-loading");
                        $('#Save').prop('disabled', false);
                        dialogViewModel.applicationLicenceRouteDetail.ExistingApplicationLicenceRouteDetailPlaces([]);
                        if (dialogViewModel.applicationLicenceRouteDetail.ApplicationLicenceRouteDetailID() < 1) {
                            alert("Save Successful");
                            location.reload();
                        }
                        else {
                            alert("Save Successful");
                            location.reload();
                        }
                    }
                    else {
                        $('#Save').removeClass("is-loading");
                        $('#Save').prop('disabled', false);
                        alert(result.Error);
                    }
                }
            }, null);
    }

    function UpsertApplicationLicenceRouteAndPreview() {
        //if (!this.ValidateUser()) {
        //    alert("Please capture all field values");
        //    return;
        //}

        if (!dialogViewModel.applicationLicenceRouteDetail.IsOriginSameAsPhysicalAddress() && !dialogViewModel.applicationLicenceRouteDetail.RouteOrigin()) {
            alert("Please capture all field values");
            return;
        }

        if (!dialogViewModel.applicationLicenceRouteDetail.IsDestinationArea() && !dialogViewModel.applicationLicenceRouteDetail.RouteDestination()) {
            alert("Please capture all field values");
            return;
        }

        if (dialogViewModel.applicationLicenceRouteDetail.IsDestinationArea() && dialogViewModel.selectedPlaces().length == 0) {
            alert("Please capture all field values");
            return;
        }

        dialogViewModel.applicationLicenceRouteDetail.ApplicationLicenceRouteDetailPlaces([]);

        //Combine Places Ids
        $.each(dialogViewModel.selectedPlaces(), function (index, item) {
            var place = ko.mapping.fromJS(javaPlace);
            place.ApplicationLicenceRouteDetailID(dialogViewModel.applicationLicenceRouteDetail.ApplicationLicenceRouteDetailID());
            place.PlaceID(item);
            dialogViewModel.applicationLicenceRouteDetail.ApplicationLicenceRouteDetailPlaces.push(place);
        });

        $('#Save').addClass("is-loading");
        $('#Save').prop('disabled', true);

        app.dataManager.post("ApplicationRequest",
            'SaveApplicationLicenceRoute', dialogViewModel.applicationLicenceRouteDetail,
            function (result) {
                if (result != null) {
                    if (result.Error == "") {
                        $('#Save').removeClass("is-loading");
                        $('#Save').prop('disabled', false);
                        dialogViewModel.applicationLicenceRouteDetail.ExistingApplicationLicenceRouteDetailPlaces([]);
                        dialogViewModel.applicationLicenceRouteDetail.RouteDescription(result.Result.RouteDescription);
                        dialogViewModel.applicationLicenceRouteDetail.ApplicationLicenceRouteDetailID(result.Result.ApplicationLicenceRouteDetailID);

                        $.each(result.Result.ApplicationLicenceRouteDetailPlaces, function (index, item) {
                            var place = ko.mapping.fromJS(javaPlace);
                            place.ApplicationLicenceRouteDetailPlaceID(item.ApplicationLicenceRouteDetailPlaceID);
                            place.ApplicationLicenceRouteDetailID(item.ApplicationLicenceRouteDetailID);
                            place.PlaceID(item.PlaceID);
                            dialogViewModel.applicationLicenceRouteDetail.ExistingApplicationLicenceRouteDetailPlaces.push(place);
                        });

                        dialogViewModel.showRouteDescription(true);
                    }
                    else {
                        $('#Save').removeClass("is-loading");
                        $('#Save').prop('disabled', false);
                        alert(result.Error);
                    }
                }
            }, null);
    }

    function LinkApplicationLicenceRoute(data) {
        data.RelatedApplicationLicenceRouteDetailID(data.ApplicationLicenceRouteDetailID());
        data.ApplicationLicenceRouteDetailID(@Model.ApplicationLicenceRouteDetail.ApplicationLicenceRouteDetailID);
        data.ApplicationLicenceID(@Model.ApplicationLicenceRouteDetail.ApplicationLicenceID);
        var places = data.ApplicationLicenceRouteDetailPlaces();
        data.ApplicationLicenceRouteDetailPlaces([]);
        $.each(places, function (index, item) {
            var place = ko.mapping.fromJS(javaPlace);
            place.ApplicationLicenceRouteDetailID(@Model.ApplicationLicenceRouteDetail.ApplicationLicenceRouteDetailID);
            place.PlaceID(item.PlaceID);
            data.ApplicationLicenceRouteDetailPlaces.push(place);
        });
        data.ExistingApplicationLicenceRouteDetailPlaces = dialogViewModel.applicationLicenceRouteDetail.ExistingApplicationLicenceRouteDetailPlaces;

        app.dataManager.post("ApplicationRequest",
            'LinkApplicationLicenceRoute', data,
            function (result) {
                if (result != null) {
                    if (result.Error == "") {     
                        location.reload();
                    }
                    else {
                        alert(result.Error);
                    }
                }
            }, null);
    }

    function LinkApplicationLicenceRouteToMemberRoute(data) {        
        data.ApplicationLicenceRouteDetailID(@Model.ApplicationLicenceRouteDetail.ApplicationLicenceRouteDetailID);
        data.ApplicationLicenceID(@Model.ApplicationLicenceRouteDetail.ApplicationLicenceID);
        data.ApplicationLicenceRouteDetailPlaces([]);
        data.ExistingApplicationLicenceRouteDetailPlaces = dialogViewModel.applicationLicenceRouteDetail.ExistingApplicationLicenceRouteDetailPlaces;

        app.dataManager.post("ApplicationRequest",
            'LinkApplicationLicenceRouteToMemberRoute', data,
            function (result) {
                if (result != null) {
                    if (result.Error == "") {    
                        location.reload();
                    }
                    else {
                        alert(result.Error);
                    }
                }
            }, null);
    }
</script>

<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Area of Operation</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 id="relatedTab_container">
                <div data-options="dxTemplate : { name: 'NewAreaOfOperation' } ">
                    <div id="licenceAreaOfOperation">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group bmd-form-group">
                                    <label class="bmd-label-floating">Origion *:</label><br />
                                    <input id="IsStillToBeAcquired" name="reg" value="true" data-bind="checked: applicationLicenceRouteDetail.IsOriginSameAsPhysicalAddress, checkedValue: true" type="radio" /> Physical Address<br />
                                    <input id="VehicleRegistrationNumberExists" value="false" name="reg" data-bind="checked: applicationLicenceRouteDetail.IsOriginSameAsPhysicalAddress, checkedValue: false" type="radio" /> Other Address
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div data-bind="visible: applicationLicenceRouteDetail.IsOriginSameAsPhysicalAddress() == false" class="form-group bmd-form-group">
                                    <label class="bmd-label-floating">Enter Address *:</label>
                                    <input id="OtherAddress" type="text" data-bind="value: applicationLicenceRouteDetail.RouteOrigin" class="form-control" />
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group bmd-form-group">
                                    <label class="bmd-label-floating">Destination *:</label><br />
                                    <input id="IsDestinationArea" name="IsDestinationArea" value="true" data-bind="checked: applicationLicenceRouteDetail.IsDestinationArea, checkedValue: true" type="radio" /> Area<br />
                                    <input id="IsDestinationArea" value="false" name="IsDestinationArea" data-bind="checked: applicationLicenceRouteDetail.IsDestinationArea, checkedValue: false" type="radio" /> Specific Space(s):
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div data-bind="visible: applicationLicenceRouteDetail.IsDestinationArea() == true" class="form-group bmd-form-group">
                                    <label class="bmd-label-floating">Area(s) *:</label>
                                    <div id="areaTreeBox"></div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div data-bind="visible: applicationLicenceRouteDetail.IsDestinationArea() == false" class="form-group bmd-form-group">
                                    <label class="bmd-label-floating">Specific Place(s) *:</label>
                                    <input id="DestinationPlaces" type="text" data-bind="value: applicationLicenceRouteDetail.RouteDestination" class="form-control" />
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div data-bind="visible: applicationLicenceRouteDetail.ApplicationLicenceRouteDetailID() > 0" class="form-group bmd-form-group">
                                    <label class="bmd-label-floating">Route Description:</label><br />
                                    <label class="bmd-label-floating" data-bind="text: applicationLicenceRouteDetail.RouteDescription"></label>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div data-options="dxTemplate : { name: 'ExistingAreaOfOperation' } ">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group bmd-form-group">
                                <label class="bmd-label-floating">New Routes on this Application:</label>
                            </div>
                        </div>
                    </div>
                    @if (Model.ExistingApplicationLicenceRouteDetail.Count() > 0)
                    {
                        <text>
                        <div class="row" data-bind="visible: existingApplicationLicenceRouteDetail().length > 0">
                            <div class="col-md-12">
                                <div id="existingApplicationLicenceRouteDetail"></div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                        </text>
                    }
                    @if (Model.ExistingApplicationLicenceRouteDetail.Count() == 0)
                    {
                        <text>
                        <div class="row" data-bind="visible: existingApplicationLicenceRouteDetail().length == 0">
                            <div class="col-md-12">
                                <div class="form-group bmd-form-group">
                                    <label class="bmd-label-floating">No routes linked to application</label>
                                </div>
                            </div>
                        </div>
                        </text>
                    }
                    
                    
                </div>
                <div data-options="dxTemplate : { name: 'MembersAreaOfOperation' } ">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group bmd-form-group">
                                <label class="bmd-label-floating">New Routes on this Application:</label>
                            </div>
                        </div>
                    </div>
                    @if (Model.MembersApplicationLicenceRouteDetail.Count() > 0)
                    {
                    <text>
                    <div class="row" data-bind="visible: membersApplicationLicenceRouteDetail().length > 0">
                        <div class="col-md-12">
                            <div id="membersApplicationLicenceRouteDetail"></div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    </text>                        
                    }

                    @if (Model.MembersApplicationLicenceRouteDetail.Count() == 0)
                    {
                        <text>
                        <div class="row" data-bind="visible: membersApplicationLicenceRouteDetail().length == 0">
                            <div class="col-md-12">
                                <div class="form-group bmd-form-group">
                                    <label class="bmd-label-floating">No routes linked to member</label>
                                </div>
                            </div>
                        </div>
                    </text>
                        
                    }

                </div>
            </div>
        </div>
        
        <div class="modal-footer">
            @*<button id="SaveandPreview" onclick="UpsertApplicationLicenceRouteAndPreview()" class="btn btn-primary">Save and Preview</button>*@
            <button id="Save" onclick="UpsertApplicationLicenceRouteAndPreview()" class="btn btn-primary">Save and Preview</button>
        </div>
    </div>
</div>

<script type="text/javascript">
    var dialogViewModel = new ViewModelLicenceAreaOfOperation();
    var ownerPublicBodyTreeView; 

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

        for (var l = 0; l < lookups.length; l++) {
            if (lookups[l].ListName == listName) {
                return app.utils.cleanIntegrationLookup(lookups[l].List);
            }
        }
    }

    function GetPlacesHierarchy() {
        var newList = [];       

        $.each(GetLookupValues('Places'), function (index, item) {

            if (item.Title == 'South Africa') { //
                newList.push(
                    {
                        Key: parseInt(item.Key),
                        Title: item.Title,
                        ParentKey: null //Route must have a parent of null
                    });
            }
            else
            {
                var parentKey = parseInt(item.Properties.parentplaceid);
                newList.push(
                    {
                        Key: parseInt(item.Key),
                        Title: item.Title,
                        ParentKey: parentKey
                    });
            }

           
        });

        return newList;
    }

    function syncTreeViewSelection(treeView, value) {
        if (!value) {
            treeView.unselectAll();
        } else {
            treeView.selectItem(value);
        }
    };

    function getSelectedItemsKeys(items) {
        var result = [];
        items.forEach(function (item) {
            if (item.selected) {
                result.push(item.key);
            }
            if (item.items.length) {
                result = result.concat(getSelectedItemsKeys(item.items));
            }
        });
        return result;
    };



    $().ready(function () {
        $.each(dialogViewModel.applicationLicenceRouteDetail.ExistingApplicationLicenceRouteDetailPlaces(), function (index, item) {            
            dialogViewModel.selectedPlaces.push(item.PlaceID());
        });

        $('#relatedTab_container').dxTabPanel({
            dataSource: [
                { title: 'New Area Of Operation', template: 'NewAreaOfOperation' },
                { title: 'New Area Of Operation(s) on Application', template: 'ExistingAreaOfOperation' },
                { title: 'Existing Area Of Operation linked to Member', template: 'MembersAreaOfOperation' },
            ],
            deferRendering: false
        });                      

        var mainDiv = $("#licenceAreaOfOperation");
        ko.cleanNode(mainDiv[0]);
        ko.applyBindings(dialogViewModel, mainDiv[0]);

        $("#areaTreeBox").dxDropDownBox({
            value: dialogViewModel.selectedPlaces,
            valueExpr: "Key",
            displayExpr: "Title",
            placeholder: "Select a value...",
            showClearButton: false,
            dataSource: GetPlacesHierarchy(),
            contentTemplate: function (e) {
                var value = e.component.option("value");
                $ownerPublicBodyTreeView = $("<div>").dxTreeView({
                    dataSource: e.component.option("dataSource"),
                    dataStructure: "plain",
                    keyExpr: "Key",
                    parentIdExpr: "ParentKey",
                    selectionMode: "multiple",
                    displayExpr: "Title",
                    selectByClick: true,
                    onContentReady: function (args) {
                        syncTreeViewSelection(args.component, value);
                    },
                    selectNodesRecursive: false,
                    onItemSelectionChanged: function (args) {
                        var nodes = args.component.getNodes(),
                            value = getSelectedItemsKeys(nodes);

                        e.component.option("value", value);

                    }
                });

                ownerPublicBodyTreeView = $ownerPublicBodyTreeView.dxTreeView("instance");
                e.component.on("valueChanged", function (args) {
                    if (dialogViewModel != null) {
                        if (args.value.length < 1) {
                            dialogViewModel.selectedPlaces(null);
                        }
                        else {
                            dialogViewModel.selectedPlaces(args.value);
                        }
                    };
                    syncTreeViewSelection(ownerPublicBodyTreeView, args.value);

                    //if (args.value != "") {
                    //    $("#areaTreeBox").dxDropDownBox("instance").close();
                    //}
                });

                return $ownerPublicBodyTreeView;
            }
        });
        
        @if (Model.ExistingApplicationLicenceRouteDetail.Count() > 0)
        {
        <text>
        $("#existingApplicationLicenceRouteDetail").dxDataGrid(
            {
                dataSource: dialogViewModel.existingApplicationLicenceRouteDetail,
                showColumnLines: false,
                showRowLines: true,
                rowAlternationEnabled: true,
                showBorders: true,
                allowColumnReordering: false,
                allowColumnResizing: true,
                wordWrapEnabled: true,
                columns: [
                    { dataField: "RouteDescription", caption: "Route", width: '80%', wordWrapEnabled: true },
                    {
                        dataField: "", caption: " ", width: '20%',
                        cellTemplate: function (container, options) {
                            var dataItem = options.row.data;
                            if (dataItem.DateCompleted == null) {
                                $('<a style="color: #1572E8 !important;cursor:pointer !importmant;">Select Route</a>').addClass('dx-datagrid-title-column').on('click', function (event) {
                                    var $elem = $(event.currentTarget);
                                    LinkApplicationLicenceRoute(dataItem)
                                }).appendTo(container);
                            }
                            else {
                                $('<span style="cursor:default !important;text-decoration: none !important;">-</span>').addClass('dx-datagrid-title-column').appendTo(container);
                            }

                        }
                    }
                ],
                paging: {
                    enabled: false
                },
                selection: {
                    mode: "single"
                },
                onSelectionChanged: function (selectedItems) {
                    var data = selectedItems.selectedRowsData[0];
                    if (data) {
                        var event = { ctrlKey: false };
                        $("#searchResults").addClass("is-loading");
                        //viewModel.OpenOperatingLicenceConsole(data);
                    }
                }
            });
        </text>
        }

        @if (Model.MembersApplicationLicenceRouteDetail.Count() > 0)
        {
        <text>
        $("#membersApplicationLicenceRouteDetail").dxDataGrid(
            {
                dataSource: dialogViewModel.membersApplicationLicenceRouteDetail,
                showColumnLines: false,
                showRowLines: true,
                rowAlternationEnabled: true,
                showBorders: true,
                allowColumnReordering: false,
                allowColumnResizing: true,
                wordWrapEnabled: true,
                columns: [
                    { dataField: "RouteDescription", caption: "Route", width: '80%', wordWrapEnabled: true },
                    {
                        dataField: "", caption: " ", width: '20%',
                        cellTemplate: function (container, options) {
                            var dataItem = options.row.data;
                            if (dataItem.DateCompleted == null) {
                                $('<a style="color: #1572E8 !important;cursor:pointer !importmant;">Select Route</a>').addClass('dx-datagrid-title-column').on('click', function (event) {
                                    var $elem = $(event.currentTarget);
                                    LinkApplicationLicenceRouteToMemberRoute(dataItem)
                                }).appendTo(container);
                            }
                            else {
                                $('<span style="cursor:default !important;text-decoration: none !important;">-</span>').addClass('dx-datagrid-title-column').appendTo(container);
                            }

                        }
                    }
                ],
                paging: {
                    enabled: false
                },
                selection: {
                    mode: "single"
                },
                onSelectionChanged: function (selectedItems) {
                    var data = selectedItems.selectedRowsData[0];
                    if (data) {
                        var event = { ctrlKey: false };
                        $("#searchResults").addClass("is-loading");
                        //viewModel.OpenOperatingLicenceConsole(data);
                    }
                }
            });
        </text>
        }

        
        
    });
</script>