@model  Neo.LegitimateLicences.OperatingLicenceConsole.MemberModel
@using Neo.Afx.ComponentModel
@using Neo.Afx.Security
@using Neo.Afx.Mvc
@using Neo.LegitimateLicences.Common;

@{
    var userSecurables = (Profile != null && ((Neo.Afx.Security.UserProfile)Profile).Securables != null) ? ((Neo.Afx.Security.UserProfile)Profile).Securables.ToList() : null;
}

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

@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
{
        MemberDetail: ko.mapping.fromJSON('@Html.Raw(Model.Member.ToJson(JsonSerializerOptions.FormatDateTime | JsonSerializerOptions.EscapeBackSlash))'),
        entityID: ko.mapping.fromJSON('@Html.Raw(Model.entityID.ToJson(JsonSerializerOptions.None))'),
        itemID: ko.mapping.fromJSON('@Html.Raw(Model.itemID.ToJson(JsonSerializerOptions.None))'),
        documentStoreLocationID: ko.observable(@Model.DocumentStoreLocationID)
});
</script>

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

            app.dataManager.post("MemberConsole",
                'Save', data,
                function (result) {
                    if (result != null) {
                        if (result.ErrorMessage == "") {
                            alert("Member has been sucessfully updated");
                        }
                        else {
                            alert(result.ErrorMessage);
                        }
                    }
                }, null);
        }
});
</script>

<div id="@(new HtmlString("koContainer" + Model.AjaxRequestTicket))">
    <div class="page-header flex-lock">
        <h4 class="page-title">Members</h4>
        <ul class="breadcrumbs">
            <li class="nav-home">
                <a href="/#Members/Default">
                    <i class="flaticon-home"></i>
                </a>
            </li>
            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>
            <li class="nav-item" data-bind="text:MemberDetail.FullName">
            </li>
        </ul>
    </div>

    <div class="row">
        <div class="col">
            <div id="TabbedCard" class="card">
                <div class="card-header navbar">
                    <h4 class="card-title" data-bind="text:MemberDetail.FullName"></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">ID No. / Business Registration No.</label>
                                <input data-bind="value: MemberDetail.IDNumberOrBusinessRegistrationNo, enable: false" maxlength="50" class="form-control" />
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-4 col-xl-3">
                            <div class="form-group bmd-form-group">
                                <label class="bmd-label-floating">Name of Company or Surname</label>
                                <input data-bind="value: MemberDetail.SurnameOrCompanyName, enable: true" maxlength="50" class="form-control" />
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-4 col-xl-3">
                            <div class="form-group bmd-form-group">
                                <label class="bmd-label-floating">First Names (if sole proprietor)</label>
                                <input data-bind="value: MemberDetail.FirstNames, enable: true" maxlength="50" class="form-control" />
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-4 col-xl-3">
                            <div class="form-group bmd-form-group">
                                <label class="bmd-label-floating">Trade Name (if applicable)&nbsp;</label>
                                <input data-bind="value: MemberDetail.TradeName, enable: true" maxlength="50" class="form-control" />
                            </div>
                        </div>
                    </div>

                    <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">Postal Address</label>
                                <textarea id="PostalAddress" type="text" data-bind="value: MemberDetail.PostalAddress" rows="5" style="width: 95%" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-4 col-xl-3">
                            <div class="form-group bmd-form-group">
                                <label class="bmd-label-floating">Postal Address Code</label>
                                <input id="PostalAddressCode" type="text" data-bind="value: MemberDetail.PostalAddressCode" maxlength="4" class="form-control" />
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-4 col-xl-3">
                            <div class="form-group bmd-form-group">
                                <label class="bmd-label-floating">Street Address</label>
                                <textarea id="PostalAddress" type="text" data-bind="value: MemberDetail.PhysicalAddress" rows="5" style="width: 95%" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-4 col-xl-3">
                            <div class="form-group bmd-form-group">
                                <label class="bmd-label-floating">Street Address Code</label>
                                <input id="PostalAddressCode" type="text" data-bind="value: MemberDetail.PhysicalAddressCode" maxlength="4" class="form-control" />
                            </div>
                        </div>
                    </div>

                    <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">Tel Number</label>
                                <input data-bind="value: MemberDetail.TelPhone, enable: true" maxlength="50" class="form-control" />
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-4 col-xl-3">
                            <div class="form-group bmd-form-group">
                                <label class="bmd-label-floating">Cell Number</label>
                                <input data-bind="value: MemberDetail.TelCell, enable: true" maxlength="50" class="form-control" />
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-4 col-xl-3">
                            <div class="form-group bmd-form-group">
                                <label class="bmd-label-floating">Fax Number</label>
                                <input data-bind="value: MemberDetail.TelFax, enable: true" maxlength="50" class="form-control" />
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-4 col-xl-3">
                            <div class="form-group bmd-form-group">
                                <label class="bmd-label-floating">Email</label>
                                <input data-bind="value: MemberDetail.Email, enable: true" maxlength="50" class="form-control" />
                            </div>
                        </div>
                    </div>

                    <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">Tax Number</label>
                                <input data-bind="value: MemberDetail.SARSIncomeTaxNumber, enable: true" maxlength="50" class="form-control" />
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-4 col-xl-3">
                            <div class="form-group bmd-form-group">
                                <label class="bmd-label-floating">Reason If No Tax Number</label>
                                <textarea data-bind="value: MemberDetail.SARSReasonIfNoTaxNumber, enable: true" maxlength="2000" style="width: 95%" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                    @*<div class="row">
                            <div class="col-sm-12 col-lg-4 col-xl-3">
                                <div class="form-group bmd-form-group">
                                    @if (SecurityHelper.UserHasAccessToSecurable(userSecurables.ToList(), SecurableEnum.MembersModule_MemberConsole_SaveMemberContactDetails))
                                    {
                                        <button id="saveButton" data-bind="click: SaveMemberDetail">Save</button>
                                    }
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 col-lg-4 col-xl-12">
                                <div class="form-group bmd-form-group">
                                    <b>NB.</b> Any applications currently in progress, as well as licences awaiting issuing for this member will also be updated.
                                </div>
                            </div>
                        </div>*@

                    <div class="clearfix"></div>
                </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]);

    });

</script>