@model Disco.Web.Areas.Config.Models.Organisation.IndexModel
@{
    Authorization.Require(Claims.Config.Organisation.Show);

    var canConfigAddresses = Authorization.Has(Claims.Config.Organisation.ConfigureAddresses);

    ViewBag.Title = Html.ToBreadcrumb("Configuration", MVC.Config.Config.Index(), "Organisation Details");
    Html.BundleDeferred("~/ClientScripts/Modules/Disco-PropertyChangeHelpers");
    Html.BundleDeferred("~/ClientScripts/Modules/Disco-AjaxHelperIcons");
}
<div class="form" style="width: 700px">
    <h2>Details</h2>
    <table>
        <tr>
            <th style="width: 160px">Name:
            </th>
            <td>@if (Authorization.Has(Claims.Config.Organisation.ConfigureName))
                {
                @Html.EditorFor(m => m.OrganisationName)
                @AjaxHelpers.AjaxLoader()
                <script type="text/javascript">
                    $(function () {
                        var field = $('#OrganisationName');
                        document.DiscoFunctions.PropertyChangeHelper(
                        field,
                        'Unknown',
                        '@(Url.Action(MVC.API.System.UpdateOrganisationName()))',
                        'OrganisationName'
                        );
                    });
                </script>
                }
                else
                {
                <h3>@Model.OrganisationName</h3>
                }
            </td>
        </tr>
        <tr>
            <th style="width: 160px">Logo:
                @if (Authorization.Has(Claims.Config.Organisation.ConfigureLogo))
                {
                    <br />
                    <br />
                    <a id="buttonUpdateOrganisationLogo" href="#" class="button">Update</a>
                }
            </th>
            <td>
                <div style="text-align: center;">
                    <img style="height: 256px; width: 256px;" alt="Organisation Logo" src="@(Url.OrganisationLogoUrl())" />
                </div>
            </td>
        </tr>
        <tr>
            <th style="width: 160px">Multi-Site Mode:
            </th>
            <td>@if (Authorization.Has(Claims.Config.Organisation.ConfigureMultiSiteMode))
                {
                @Html.EditorFor(m => m.MultiSiteMode) @Html.LabelFor(m => m.MultiSiteMode)
                @AjaxHelpers.AjaxLoader()
                <script type="text/javascript">
                    $(function () {
                        var field = $('#MultiSiteMode');
                        document.DiscoFunctions.PropertyChangeHelper(
                        field,
                        null,
                        '@(Url.Action(MVC.API.System.UpdateMultiSiteMode()))',
                        'MultiSiteMode'
                        );
                    });
                </script>
                }
                else
                {
                <input name="MultiSiteMode" class="check-box" id="MultiSiteMode" type="checkbox" @(Model.MultiSiteMode ? new HtmlString("checked=\"checked\" ") : new HtmlString(string.Empty))disabled="disabled">  @Html.LabelFor(m => m.MultiSiteMode)
                }
                @if (Model.OrganisationAddresses.Count > 1)
                {
                    <div id="messageMultiSiteMode" class="info-box">
                        <p class="fa-p">
                            <i class="fa fa-info-circle"></i>Multi-Site mode is recommended where multiple addresses are configured.
                        </p>
                    </div>
                }
            </td>
        </tr>
        <tr>
            <th style="width: 160px">Addresses:
                @if (canConfigAddresses)
                {
                    <br />
                    <br />
                    <a href="#" id="createAddress" class="button">Create</a>
                }
            </th>
            <td>
                @if (Model.OrganisationAddresses.Count > 0)
                { 
                    <table id="organisationAddresses">
                        <tr>
                            <th>Name
                            </th>
                            <th>Address
                            </th>
                            <th></th>
                        </tr>
                        @foreach (var item in Model.OrganisationAddresses)
                        {
                            <tr data-addressid="@item.Id">
                                <td>
                                    <span class="name">@Html.DisplayFor(modelItem => item.Name)</span> (<span class="shortName">@Html.DisplayFor(modelItem => item.ShortName)</span>)
                                </td>
                                <td>
                                    <span class="address">@Html.DisplayFor(modelItem => item.Address)</span><br />
                                    <span class="suburb">@Html.DisplayFor(modelItem => item.Suburb)</span> <span class="postcode">@Html.DisplayFor(modelItem => item.Postcode)</span><br />
                                    <span class="state">@Html.DisplayFor(modelItem => item.State)</span> <span class="country">@Html.DisplayFor(modelItem => item.Country)</span><br />
                                    <span class="smallMessage">Phone:</span> <span class="phoneNumber">@Html.DisplayFor(modelItem => item.PhoneNumber)</span><br />
                                    <span class="smallMessage">Fax:</span> <span class="faxNumber">@Html.DisplayFor(modelItem => item.FaxNumber)</span>
                                </td>
                                <td>
                                    @if (canConfigAddresses)
                                    {
                                        <i class="fa fa-edit information edit" title="Edit Address"></i> <i class="fa fa-times-circle warning delete" title="Delete Address"></i>
                                    }
                                </td>
                            </tr>
                        }
                    </table>
                }
                else
                { 
                    <span class="smallMessage">No Addresses Stored</span>
                }
            </td>
        </tr>
    </table>
</div>
@if (Authorization.Has(Claims.Config.Organisation.ConfigureLogo))
{
    <div id="dialogUpdateOrganisationLogo" title="Update Organisation Logo">
        @using (Html.BeginForm(MVC.API.System.OrganisationLogo(true, null, null), FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            <h3>Update Organisation Logo</h3>
            <div style="margin-top: 10px; padding-bottom: 5px;">
                <input id="updateOrganisationLogoResetLogo" type="radio" name="ResetLogo" value="true"
                    checked="checked" /><label for="updateOrganisationLogoResetLogo">Remove Logo</label>
            </div>
            <div style="margin-top: 5px; border-top: 1px dashed #aaa; padding-top: 5px;">
                <input id="updateOrganisationLogoUploadLogo" type="radio" name="ResetLogo" value="false" /><label
                    for="updateOrganisationLogoUploadLogo">Upload Logo</label>
                <div id="updateOrganisationLogoUploadLogoContainer" style="display: none; padding: 4px 0 0 14px;">
                    <input id="updateOrganisationLogoUploadLogoImage" type="file" name="Image" />
                    <span id="updateOrganisationLogoUploadLogoImageRequired" class="field-validation-valid field-validation-error">* Required</span>
                </div>
            </div>
        }
    </div>
    <script type="text/javascript">
        $(function () {
            var button = $('#buttonUpdateOrganisationLogo');
            var buttonDialog = $('#dialogUpdateOrganisationLogo');
            button.click(function () {
                buttonDialog.dialog('open');
                return false;
            });
            buttonDialog.find('input[type="radio"]').click(function () {
                if ($('#updateOrganisationLogoUploadLogo').is(':checked')) {
                    $('#updateOrganisationLogoUploadLogoImage').removeAttr('disabled');
                    $('#updateOrganisationLogoUploadLogoContainer').slideDown();
                }
                else {
                    $('#updateOrganisationLogoUploadLogoContainer').slideUp();
                    $('#updateOrganisationLogoUploadLogoImage').attr('disabled', 'disabled');
                }
            });
            buttonDialog.dialog({
                resizable: false,
                modal: true,
                autoOpen: false,
                buttons: {
                    "Save": function () {
                        var $this = $(this);

                        var $image = $('#updateOrganisationLogoUploadLogoImage');
                        if ($('#updateOrganisationLogoUploadLogo').is(':checked') && $image.val() == '') {
                            $image.addClass('input-validation-error');
                            $('#updateOrganisationLogoUploadLogoImageRequired').removeClass('field-validation-valid');
                        } else {
                            $image.removeClass('input-validation-error');
                            $('#updateOrganisationLogoUploadLogoImageRequired').addClass('field-validation-valid');
                            $this.dialog("disable");
                            $this.dialog("option", "buttons", null);
                            $this.find('form').submit();
                        }
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    </script>
}
@if (canConfigAddresses)
{
    <div id="dialogConfirmRemove" title="Delete this Address?">
        <p>
            <i class="fa fa-exclamation-triangle fa-lg warning"></i>
            This item will be permanently deleted and cannot be recovered.
        </p>
        <p>
            <strong>Are you sure?</strong>
        </p>
    </div>
    <div id="dialogEdit" title="Edit/Create Address">
        <table>
            <tr>
                <td>Short&nbsp;Name
                </td>
                <td>
                    <input id="editShortName" type="text" />
                </td>
            </tr>
            <tr>
                <td>Name
                </td>
                <td>
                    <input id="editName" type="text" />
                </td>
            </tr>
            <tr>
                <td>Address
                </td>
                <td>
                    <input id="editAddress" type="text" />
                </td>
            </tr>
            <tr>
                <td>Suburb
                </td>
                <td>
                    <input id="editSuburb" type="text" />
                </td>
            </tr>
            <tr>
                <td>Postcode
                </td>
                <td>
                    <input id="editPostcode" type="text" />
                </td>
            </tr>
            <tr>
                <td>State
                </td>
                <td>
                    <input id="editState" type="text" />
                </td>
            </tr>
            <tr>
                <td>Country
                </td>
                <td>
                    <input id="editCountry" type="text" />
                </td>
            </tr>
            <tr>
                <td>Phone Number
                </td>
                <td>
                    <input id="editPhoneNumber" type="text" />
                </td>
            </tr>
            <tr>
                <td>Fax Number
                </td>
                <td>
                    <input id="editFaxNumber" type="text" />
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#dialogConfirmRemove").dialog({
                resizable: false,
                modal: true,
                autoOpen: false,
                buttons: {
                    "Delete": function () {
                        return null;
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
            $('#organisationAddresses').find('i.delete').click(function () {
                var componentRow = $(this).closest('tr');
                var id = componentRow.attr('data-addressid');
                if (id) {
                    var dialog = $("#dialogConfirmRemove");
                    var buttons = dialog.dialog("option", "buttons");
                    buttons['Delete'] = function () { $(this).dialog("disable"); window.location.href = '@(Url.Action(MVC.API.System.DeleteOrganisationAddress()))' + '?redirect=true&id=' + id; };
                    var buttons = dialog.dialog("option", "buttons", buttons);
                    dialog.dialog('open');
                }
            });

            var editAddress = function (element) {
                var id = '', shortName = '', name = '', address = '', suburb = '', postcode = '', state = '', country = '', phoneNumber = '', faxNumber = '';
                var dialog = $('#dialogEdit');
                if (element) {
                    id = element.attr('data-addressid');
                    shortName = element.find('.shortName').text();
                    name = element.find('.name').text();
                    address = element.find('.address').text();
                    suburb = element.find('.suburb').text();
                    postcode = element.find('.postcode').text();
                    state = element.find('.state').text();
                    country = element.find('.country').text();
                    phoneNumber = element.find('.phoneNumber').text();
                    faxNumber = element.find('.faxNumber').text();
                    dialog.attr('data-addressid', id);
                    dialog.dialog('option', 'title', 'Edit Address: ' + name);
                } else {
                    dialog.attr('data-addressid', null);
                    dialog.dialog('option', 'title', 'Create Address');
                }

                $('#editShortName').val(shortName);
                $('#editName').val(name);
                $('#editAddress').val(address);
                $('#editSuburb').val(suburb);
                $('#editPostcode').val(postcode);
                $('#editState').val(state);
                $('#editCountry').val(country);
                $('#editPhoneNumber').val(phoneNumber);
                $('#editFaxNumber').val(faxNumber);
                dialog.dialog('open');
            }

            $('#organisationAddresses').find('i.edit').click(function () {
                var componentRow = $(this).closest('tr');
                editAddress(componentRow);
            });

            $('#createAddress').click(function () {
                editAddress();
                return false;
            });

            var submitAddress = function () {
                var dialog = $('#dialogEdit');
                var data = {
                    Id: dialog.attr('data-addressid'),
                    ShortName: $('#editShortName').val(),
                    Name: $('#editName').val(),
                    Address: $('#editAddress').val(),
                    Suburb: $('#editSuburb').val(),
                    Postcode: $('#editPostcode').val(),
                    State: $('#editState').val(),
                    Country: $('#editCountry').val(),
                    PhoneNumber: $('#editPhoneNumber').val(),
                    FaxNumber: $('#editFaxNumber').val()
                };

                $.ajax({
                    url: '@(Url.Action(MVC.API.System.UpdateOrganisationAddress()))',
                dataType: 'json',
                data: data,
                type: 'post',
                success: function (d) {
                    if (d == 'OK') {
                        window.location.href = '@(Url.Action(MVC.Config.Organisation.Index()))';
                    } else {
                        alert('Unable to update address:\n' + d);
                        dialog.dialog('enable');
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Unable to update address:\n' + textStatus);
                    dialog.dialog('enable');
                }
            });

        };
            $("#dialogEdit").dialog({
                resizable: false,
                modal: true,
                autoOpen: false,
                width: 350,
                buttons: {
                    "Save": function () {
                        submitAddress();
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });

        });
    </script>
}