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

    var canConfig = Authorization.Has(Claims.Config.DeviceModel.Configure);

    ViewBag.Title = Html.ToBreadcrumb("Configuration", MVC.Config.Config.Index(), "Device Models", MVC.Config.DeviceModel.Index(null), Model.DeviceModel.ToString());
}
<div class="form" style="width: 530px">
    <table>
        <tr>
            <th style="width: 150px">Id:
            </th>
            <td>
                @Html.DisplayFor(model => model.DeviceModel.Id)
            </td>
        </tr>
        <tr>
            <th>Description:
            </th>
            <td>@if (canConfig)
                {
                @Html.EditorFor(model => model.DeviceModel.Description)
                @AjaxHelpers.AjaxSave()
                @AjaxHelpers.AjaxLoader()
                }
                else
                {
                @Html.DisplayFor(model => model.DeviceModel.Description)
                }
            </td>
        </tr>
        <tr>
            <th>Manufacturer:
            </th>
            <td>
                @Html.DisplayFor(model => model.DeviceModel.Manufacturer)
            </td>
        </tr>
        <tr>
            <th>Model:
            </th>
            <td>
                @Html.DisplayFor(model => model.DeviceModel.Model)
            </td>
        </tr>
        <tr>
            <th>Statistics</th>
            <td>
                <div><strong>@Model.DeviceCount.ToString("n0")</strong> @(Model.DeviceCount == 1 ? "devices is" : "devices are") of this model type.</div>
                @if (Model.DeviceDecommissionedCount > 0)
                {
                    <div class="smallMessage">@Model.DeviceDecommissionedCount.ToString("n0") @(Model.DeviceDecommissionedCount == 1 ? "device is" : "devices are") decommissioned.</div>
                }
            </td>
        </tr>
        <tr>
            <th>Default Purchase Date:
            </th>
            <td>@if (canConfig)
                {
                @Html.EditorFor(model => model.DeviceModel.DefaultPurchaseDate)
                @AjaxHelpers.AjaxLoader()
                }
                else
                {
                @CommonHelpers.FriendlyDate(Model.DeviceModel.DefaultPurchaseDate, "Unknown")
                }
            </td>
        </tr>
        <tr>
            <th>Default Warranty Provider:
            </th>
            <td>@if (canConfig)
                {
                @Html.DropDownListFor(model => model.DeviceModel.DefaultWarrantyProvider, Model.WarrantyProviders.ToSelectListItems(Model.DeviceModel.DefaultWarrantyProvider, true, "None"))
                @AjaxHelpers.AjaxLoader()
                }
                else
                {
                    if (Model.DeviceModel.DefaultWarrantyProvider == null)
                    {
                <span class="smallMessage">&lt;None Specified&gt;</span>
                    }
                    else
                    {
                        var provider = Model.WarrantyProviders.FirstOrDefault(wp => wp.Id == Model.DeviceModel.DefaultWarrantyProvider);
                        if (provider == null)
                        {
                <span class="smallMessage">&lt;None Specified&gt;</span>
                        }
                        else
                        {
                @provider.Name
                        }
                    }
                }
            </td>
        </tr>
        <tr>
            <th>Type:
            </th>
            <td>
                @Html.DisplayFor(model => model.DeviceModel.ModelType)
            </td>
        </tr>
        <tr>
            <th>Image:
            </th>
            <td>
                <img alt="Model Image" src="@Url.Action(MVC.API.DeviceModel.Image(Model.DeviceModel.Id, Model.DeviceModel.ImageHash()))" />
            </td>
        </tr>
        @if (canConfig)
        {
            <tr>
                <th>
                    <label for="DeviceModel_Image">
                        Update Image:
                    </label>
                </th>
                <td>
                    @using (Html.BeginForm(MVC.API.DeviceModel.Image(Model.DeviceModel.Id, true, null), FormMethod.Post, new { enctype = "multipart/form-data" }))
                    {
                        <input type="file" name="Image" id="Image" style="width: 250px;" />
                        <input class="button" type="submit" value="Update" />
                    }
                </td>
            </tr>
        }
    </table>
    @if (canConfig)
    {
        <script type="text/javascript">
            $(function () {
                var $Description = $('#DeviceModel_Description');
                var $DescriptionAjaxSave = $Description.next('.ajaxSave');
                $Description
                        .watermark('Model Description')
                        .focus(function () { $Description.select() })
                        .keydown(function (e) {
                            $DescriptionAjaxSave.show();
                            if (e.which == 13) {
                                $(this).blur();
                            }
                        }).blur(function () {
                            $DescriptionAjaxSave.hide();
                        })
                        .change(function () {
                            $DescriptionAjaxSave.hide();
                            var $ajaxLoading = $DescriptionAjaxSave.next('.ajaxLoading').show();
                            var data = { Description: $Description.val() };
                            $.ajax({
                                url: '@Url.Action(MVC.API.DeviceModel.UpdateDescription(Model.DeviceModel.Id))',
                                dataType: 'json',
                                data: data,
                                success: function (d) {
                                    if (d == 'OK') {
                                        $ajaxLoading.hide().next('.ajaxOk').show().delay('fast').fadeOut('slow');
                                    } else {
                                        $ajaxLoading.hide();
                                        alert('Unable to update description: ' + d);
                                    }
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    alert('Unable to update description: ' + textStatus);
                                    $ajaxLoading.hide();
                                }
                            });
                        });
            });
        </script>
        <script type="text/javascript">
            $(function () {
                var $dataField = $('#DeviceModel_DefaultPurchaseDate');
                var $ajaxLoading = $dataField.next('.ajaxLoading');
                var dateFieldValue = $dataField.val();
                var dateFieldChangeToken = null;
                $dataField
                    .watermark('None')
                    .datepicker({
                        changeYear: true,
                        changeMonth: true,
                        dateFormat: 'yy/mm/dd'
                    })
                    .change(function () {
                        var dateText = $dataField.val();
                        if (dateFieldValue.toLowerCase() != dateText.toLowerCase()) {
                            dateFieldValue = dateText;
                            if (dateFieldChangeToken)
                                window.clearTimeout(dateFieldChangeToken);
                            dateFieldChangeToken = window.setTimeout(function () {
                                $ajaxLoading.show();
                                var data = {};
                                data['DefaultPurchaseDate'] = dateFieldValue;
                                $.getJSON('@(Url.Action(MVC.API.DeviceModel.UpdateDefaultPurchaseDate(Model.DeviceModel.Id)))', data, function (response, result) {
                                    if (result != 'success' || response != 'OK') {
                                        alert('Unable to change Date:\n' + response);
                                        $ajaxLoading.hide();
                                    } else {
                                        $ajaxLoading.hide().next('.ajaxOk').show().delay('fast').fadeOut('slow');
                                    }
                                })
                                dateFieldChangeToken = null;
                            }, 500);
                        }
                    }).focus(function () {
                        $(this).select();
                    });
            });
        </script>
        <script type="text/javascript">
            $(function () {
                var $DefaultWarrantyProvider = $('#DeviceModel_DefaultWarrantyProvider');
                var $ajaxLoading = $DefaultWarrantyProvider.next('.ajaxLoading');
                $DefaultWarrantyProvider
                        .change(function () {
                            $ajaxLoading.show();
                            var data = { DefaultWarrantyProvider: $DefaultWarrantyProvider.val() };
                            $.ajax({
                                url: '@Url.Action(MVC.API.DeviceModel.UpdateDefaultWarrantyProvider(Model.DeviceModel.Id))',
                                dataType: 'json',
                                data: data,
                                success: function (d) {
                                    if (d == 'OK') {
                                        $ajaxLoading.hide().next('.ajaxOk').show().delay('fast').fadeOut('slow');
                                    } else {
                                        $ajaxLoading.hide();
                                        alert('Unable to default warranty provider: ' + d);
                                    }
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    alert('Unable to default warranty provider: ' + textStatus);
                                    $ajaxLoading.hide();
                                }
                            });
                        });
            });
        </script>
    }
</div>
<h2>Components</h2>
@Html.Partial(MVC.Config.DeviceModel.Views._DeviceComponentsTable, Model.DeviceComponentsModel)
<div class="actionBar">
    @if (Model.CanDelete)
    { 
        @Html.ActionLinkButton("Delete", MVC.API.DeviceModel.Delete(Model.DeviceModel.Id, true), "buttonDelete")
    }
    @if (Model.DeviceCount > 0)
    {
        if (Authorization.Has(Claims.Device.Actions.Export))
        {
        @Html.ActionLinkButton("Export Devices", MVC.API.DeviceModel.ExportDevices(Model.DeviceModel.Id))
        }
        if (Authorization.Has(Claims.Device.Search))
        {
        @Html.ActionLinkButton("View Devices", MVC.Search.Query(Model.DeviceModel.Id.ToString(), "DeviceModel"))
        }
    }
</div>