@model Disco.Web.Models.Job.ShowModel
@using Disco.Models.Services.Jobs;
@using Disco.Services.Users.UserFlags;
@using Disco.Services.Devices.DeviceFlags;
@{
    Authorization.Require(Claims.Job.Show);
}
<table id="Job_Show_Subjects">
    <tr>
        <td id="Job_Show_Job">
            <div>
                <div id="Job_Show_Job_Dates">
                    <table class="none">
                        <tr>
                            <td>
                                Opened:
                            </td>
                            <td><span id="Job_Show_Job_Dates_Opened">@CommonHelpers.FriendlyDateAndTitleUser(Model.Job.OpenedDate, Model.Job.OpenedTechUser)</span></td>
                        </tr>
                        @if (!Model.Job.ClosedDate.HasValue || Model.Job.ExpectedClosedDate.HasValue)
                        {
                            <tr>
                                <td>
                                    <span title="Expected to Close">Expected:</span>
                                </td>
                                <td>
                                    @if (Authorization.Has(Claims.Job.Properties.ExpectedClosedDate))
                                    {
                                        @Html.TextBoxFor(m => m.Job.ExpectedClosedDate, "{0:yyyy/MM/dd HH:mm}", new { @class = "small discreet" }) @AjaxHelpers.AjaxSave() @AjaxHelpers.AjaxLoader()
                                        <script type="text/javascript">
                                            $(function () {
                                                var dateField = $('#Job_ExpectedClosedDate');
                                                document.DiscoFunctions.DateChangeHelper(
                                                dateField,
                                                'Unknown',
                                                '@(Url.Action(MVC.API.Job.UpdateExpectedClosedDate(Model.Job.Id, null)))',
                                                'ExpectedClosedDate',
                                                '@(Model.Job.OpenedDate.ToString("o"))'
                                                );
                                            });
                                        </script>
                                    }
                                    else
                                    {
                                        @CommonHelpers.FriendlyDate(Model.Job.ExpectedClosedDate)
                                    }
                                </td>
                            </tr>
                        }
                        @if (Model.Job.ClosedDate.HasValue)
                        {
                            <tr>
                                <td>
                                    Closed:
                                </td>
                                <td><span id="Job_Show_Job_Dates_Closed">@CommonHelpers.FriendlyDateAndTitleUser(Model.Job.ClosedDate, Model.Job.ClosedTechUser)</span></td>
                            </tr>
                        }
                    </table>
                </div>
                <div id="Job_Show_Job_Type" class="status">
                    <h2 title="@Model.Job.JobType.Id">@Model.Job.JobType.Description</h2>
                    <table class="none">
                        <tr>
                            @{
                                var jobSubTypeFirst = (int)Math.Ceiling((double)(Model.Job.JobSubTypes.Count + 1) / 2);
                            }
                            <td>
                                <ul id="Job_Show_Job_SubTypes_1">
                                    @foreach (var jobSubType in Model.Job.JobSubTypes.Take(jobSubTypeFirst))
                                    {
                                        <li title="@jobSubType.Id">@jobSubType.Description</li>
                                    }
                                </ul>
                            </td>
                            <td>
                                <ul id="Job_Show_Job_SubTypes_2">
                                    @foreach (var jobSubType in Model.Job.JobSubTypes.Skip(jobSubTypeFirst))
                                    {
                                        <li title="@jobSubType.Id">@jobSubType.Description</li>
                                    }
                                </ul>
                                @if (Authorization.Has(Claims.Job.Actions.UpdateSubTypes) && !Model.Job.ClosedDate.HasValue)
                                {
                                    <a href="#" id="Job_Show_Job_SubTypes_Update">Update Sub Types</a>
                                }
                            </td>
                        </tr>
                    </table>
                    @if (Authorization.Has(Claims.Job.Actions.UpdateSubTypes))
                    {
                        <div id="Job_Show_Job_SubTypes_Update_Dialog" class="dialog" title="Update Job Types">
                            <div>
                                <h2>
                                    @Model.Job.JobType.Description
                                </h2>
                                @using (Html.BeginForm(MVC.API.Job.UpdateSubTypes(Model.Job.Id, redirect: true), FormMethod.Post, new { id = "formUpdateJobTypes" }))
                                {
                                    @Html.AntiForgeryToken()
                                    @CommonHelpers.CheckBoxList("SubTypes", Model.UpdatableJobSubTypes.ToSelectListItems(Model.Job.JobSubTypes.ToList()), 3)
                                    <hr />
                                    <div>
                                        <input type="checkbox" value="true" id="UpdateJobTypesAddComponents" name="AddComponents"
                                               checked="checked" /><label for="UpdateJobTypesAddComponents">Add Components for newly added Sub Types</label>
                                    </div>
                                }
                            </div>
                        </div>
                        <script>
                            $(function () {
                                var $Job_Show_Job_SubTypes_Update_Dialog = null;

                                $('#Job_Show_Job_SubTypes_Update').click(function () {
                                    if (!$Job_Show_Job_SubTypes_Update_Dialog) {
                                        $Job_Show_Job_SubTypes_Update_Dialog = $('#Job_Show_Job_SubTypes_Update_Dialog');
                                        $Job_Show_Job_SubTypes_Update_Dialog.dialog({
                                            resizable: false,
                                            modal: true,
                                            autoOpen: false,
                                            width: 700,
                                            buttons: {
                                                "Save": function () {
                                                    $('#formUpdateJobTypes').submit();
                                                    $Job_Show_Job_SubTypes_Update_Dialog.dialog("disable");
                                                },
                                                Cancel: function () {
                                                    $(this).dialog("close");
                                                }
                                            }
                                        });
                                    }

                                    $Job_Show_Job_SubTypes_Update_Dialog.dialog('open');
                                    return false;
                                });
                            });
                        </script>
                    }
                </div>
                @if (Authorization.Has(Claims.Job.Actions.GenerateDocuments))
                {
                    <div id="Job_Show_GenerateDocument_Container" class="status">
                        @Html.Partial(MVC.Shared.Views._GenerateDocumentControl, Model.GenerateDocumentControlModel)
                    </div>
                }
            </div>
        </td>
        @if (Model.Job.Device != null)
        {
            <td id="Job_Show_Device">
                <div>
                    <h2 id="Job_Show_Device_SerialNumber" title="Serial Number">
                        <span data-clipboard>
                            @if (Authorization.Has(Claims.Device.Show))
                            {@Html.ActionLink(Model.Job.DeviceSerialNumber, MVC.Device.Show(Model.Job.DeviceSerialNumber))}
                        else
                        {@Model.Job.DeviceSerialNumber}
                        </span>
                    </h2>
                    <div class="clearfix">
                        <div id="Job_Show_Device_Details">
                            <img id="Job_Show_Device_Model_Image" alt="Model Image" src="@Url.Action(MVC.API.DeviceModel.Image(Model.Job.Device.DeviceModelId, Model.Job.Device.DeviceModel.ImageHash()))" />
                            <div id="Job_Show_Device_ComputerName" title="Computer Name"><span data-clipboard>@Model.Job.Device.ComputerName</span></div>
                            <div id="Job_Show_Device_Model" title="Model">@Html.ActionLink(Model.Job.Device.DeviceModel.ToString(), MVC.Config.DeviceModel.Index(Model.Job.Device.DeviceModelId))</div>
                            @if (Model.Job.Device.DeviceBatch != null)
                            {
                                <div id="Job_Show_Device_Batch" title="Batch">@Html.ActionLink(Model.Job.Device.DeviceBatch.Name, MVC.Config.DeviceBatch.Index(Model.Job.Device.DeviceBatchId))</div>
                            }
                            @if (Model.Job.Device.DeviceBatch != null)
                            {
                                if (Model.Job.JobTypeId == JobType.JobTypeIds.HWar)
                                {
                                    <div id="Job_Show_Device_Details_HWar">
                                        <div>DEVICE WARRANTY</div>
                                        <div>Until: <span id="Job_Show_Device_Details_HWar_ValidUntil" data-livestamp="@Model.Job.Device.DeviceBatch.WarrantyValidUntil.ToUnixEpoc()">@Model.Job.Device.DeviceBatch.WarrantyValidUntil.ToFullDateTime("Unknown")</span></div>
                                        @if (!string.IsNullOrWhiteSpace(Model.Job.Device.DeviceBatch.WarrantyDetails))
                                        {
                                            <a id="Job_Show_Device_Details_HWar_Details_Button" href="#">Show Details</a>
                                            <div id="Job_Show_Device_Details_HWar_Details_Dialog" class="dialog" title="Warranty Details for @(Model.Job.Device.DeviceBatch.Name)">
                                                <div>@(new HtmlString(Model.Job.Device.DeviceBatch.WarrantyDetails))</div>
                                            </div>
                                            <script type="text/javascript">
                                                $(function () {
                                                    var d;
                                                    $('#Job_Show_Device_Details_HWar_Details_Button').click(function () {
                                                        if (!d)
                                                            d = $('#Job_Show_Device_Details_HWar_Details_Dialog').dialog({
                                                                width: 570,
                                                                modal: true
                                                            });
                                                        else
                                                            d.dialog('open');
                                                        return false;
                                                    });
                                                });
                                            </script>
                                        }
                                    </div>
                                }
                                if (Model.Job.JobTypeId == JobType.JobTypeIds.HNWar)
                                {
                                    <div id="Job_Show_Device_Details_HNWar">
                                        <div>INSURANCE</div>
                                        <div id="Job_Show_Device_Details_HNWar_InsuranceSupplier">@Model.Job.Device.DeviceBatch.InsuranceSupplier</div>
                                        <div>Until: <span id="Job_Show_Device_Details_HNWar_ValidUntil" data-livestamp="@Model.Job.Device.DeviceBatch.InsuredUntil.ToUnixEpoc()">@Model.Job.Device.DeviceBatch.InsuredUntil.ToFullDateTime("Unknown")</span></div>
                                        @if (!string.IsNullOrWhiteSpace(Model.Job.Device.DeviceBatch.InsuranceDetails))
                                        {
                                            <a id="Job_Show_Device_Details_HNWar_Details_Button" href="#">Show Details</a>
                                            <div id="Job_Show_Device_Details_HNWar_Details_Dialog" class="dialog" title="Insurance Details for @(Model.Job.Device.DeviceBatch.Name)">
                                                <div>@(new HtmlString(Model.Job.Device.DeviceBatch.InsuranceDetails))</div>
                                            </div>
                                            <script type="text/javascript">
                                                $(function () {
                                                    var d;
                                                    $('#Job_Show_Device_Details_HNWar_Details_Button').click(function () {
                                                        if (!d)
                                                            d = $('#Job_Show_Device_Details_HNWar_Details_Dialog').dialog({
                                                                width: 570,
                                                                modal: true
                                                            });
                                                        else
                                                            d.dialog('open');
                                                        return false;
                                                    });
                                                });
                                            </script>
                                        }
                                    </div>
                                }
                            }
                            @if (Model.Job.Device.DeviceFlagAssignments.CanShowAny())
                            {
                                <div id="Job_Show_Device_Flags">
                                    @foreach (var flag in Model.Job.Device.DeviceFlagAssignments.Where(f => !f.RemovedDate.HasValue).Select(f => Tuple.Create(f, DeviceFlagService.GetDeviceFlag(f.DeviceFlagId))))
                                    {
                                        if (flag.Item2.permission.CanShow())
                                        {
                                            <i class="flag fa fa-@(flag.Item2.flag.Icon) fa-fw d-@(flag.Item2.flag.IconColour)">
                                                <span class="details">
                                                    <span class="name">@flag.Item2.flag.Name</span>
                                                    @if (flag.Item1.Comments != null) {<span class="comments">@flag.Item1.Comments.ToHtmlComment()</span>}
                                                    <span class="added">@CommonHelpers.FriendlyDateAndUser(flag.Item1.AddedDate, flag.Item1.AddedUserId)</span>
                                                </span>
                                            </i>
                                        }
                                    }
                                    <script type="text/javascript">
                                        $(function () {
                                            $('#Job_Show_Device_Flags')
                                                .tooltip({
                                                    items: 'i.flag',
                                                    content: function () {
                                                        var $this = $(this);
                                                        return $this.children('.details').html();
                                                    },
                                                    tooltipClass: 'FlagAssignment_Tooltip',
                                                    position: {
                                                        my: "right top",
                                                        at: "right bottom",
                                                        collision: "flipfit flip"
                                                    },
                                                    hade: {
                                                        effect: ''
                                                    },
                                                    close: function (e, ui) {
                                                        ui.tooltip.hover(
                                                            function () {
                                                                $(this).stop(true).fadeTo(100, 1);
                                                            },
                                                            function () {
                                                                $(this).fadeOut(100, function () { $(this).remove(); });
                                                            });
                                                    }
                                                });
                                        });
                                    </script>
                                </div>
                            }
                        </div>
                    </div>
                    @if (Model.Job.DeviceHeld.HasValue)
                    {
                        var canEditLocation = Authorization.Has(Claims.Job.Properties.DeviceHeldLocation);
                        <div id="Job_Show_Device_DeviceHeld" class="status">
                            <table class="none">
                                <tr>
                                    <td>Location:</td>
                                    <td>
                                        <span id="Job_Show_Device_DeviceHeld_Location" data-locationsurl="@Url.Action(MVC.API.Job.DeviceHeldLocations())" data-updateurl="@Url.Action(MVC.API.Job.UpdateDeviceHeldLocation(Model.Job.Id, null))">
                                            @if (canEditLocation)
                                            {
                                                switch (Model.LocationMode)
                                                {
                                                    case LocationModes.Unrestricted:
                                                    case LocationModes.OptionalList:
                                                        @Html.TextBoxFor(m => m.Job.DeviceHeldLocation, new { @class = "small discreet" })
                                                        break;
                                                    case LocationModes.RestrictedList:
                                                        List<SelectListItem> listOptions = new List<SelectListItem>() { new SelectListItem() { Value = "", Text = "<Unknown>" } };
                                                        if (!string.IsNullOrWhiteSpace(Model.Job.DeviceHeldLocation) && !Model.LocationOptions.Any(l => l.Location.Equals(Model.Job.DeviceHeldLocation)))
                                                        {
                                                            listOptions.Add(new SelectListItem() { Value = Model.Job.DeviceHeldLocation, Text = string.Format("Custom: {0}", Model.Job.DeviceHeldLocation) });
                                                        }
                                                        listOptions.AddRange(Model.LocationOptions.Select(l => new SelectListItem() { Value = l.Location, Text = (l.References.Count == 0 ? l.Location : (l.References.Count == 1 ? string.Format("{0} [Job {1}]", l.Location, l.References[0].JobId) : string.Format("{0} [{1} jobs]", l.Location, l.References.Count))) }));
                                                        @Html.DropDownListFor(m => m.Job.DeviceHeldLocation, listOptions, new { @class = "small discreet" });
                                                        break;
                                                }
                                                @AjaxHelpers.AjaxSave() @AjaxHelpers.AjaxLoader()
                                            }
                                            else if (string.IsNullOrEmpty(Model.Job.DeviceHeldLocation))
                                            {
                                                <span class="smallMessage">&lt;None/Unknown&gt;</span>
                                            }
                                            else
                                            {
                                                @Model.Job.DeviceHeldLocation
                                            }
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Held Since:</td>
                                    <td><span id="Job_Show_Device_DeviceHeld_DeviceHeld">@CommonHelpers.FriendlyDateAndTitleUser(Model.Job.DeviceHeld, Model.Job.DeviceHeldTechUser)</span></td>
                                </tr>
                                @if (Model.Job.DeviceReadyForReturn.HasValue)
                                {
                                    <tr>
                                        <td>Ready:</td>
                                        <td><span id="Job_Show_Device_DeviceHeld_DeviceReadyForReturn">@CommonHelpers.FriendlyDateAndTitleUser(Model.Job.DeviceReadyForReturn, Model.Job.DeviceReadyForReturnTechUser)</span></td>
                                    </tr>
                                }
                                @if (Model.Job.DeviceReturnedDate.HasValue)
                                {
                                    <tr>
                                        <td>Returned:</td>
                                        <td><span id="Job_Show_Device_DeviceHeld_DeviceReturnedDate">@CommonHelpers.FriendlyDateAndTitleUser(Model.Job.DeviceReturnedDate, Model.Job.DeviceReturnedTechUser)</span></td>
                                    </tr>
                                }
                            </table>
                            @if (canEditLocation)
                            {
                                <script type="text/javascript">
                                    $(function () {
                                        @switch (Model.LocationMode)
                                        {
                                            case LocationModes.Unrestricted:
                                            case LocationModes.OptionalList:
                                                <text>
                                        const $deviceHeldLocationContainer = $('#Job_Show_Device_DeviceHeld_Location');
                                        const $deviceHeldLocation = $('#Job_DeviceHeldLocation');
                                        const $ajaxSave = $deviceHeldLocation.next('.ajaxSave');
                                        let autocompleteLoaded = false;

                                        $deviceHeldLocation
                                            .watermark('Unknown')
                                            .focus(function () {
                                                $deviceHeldLocation.select();

                                                // Load AutoComplete
                                                if (!autocompleteLoaded) {

                                                    const body = new FormData();
                                                    body.append('__RequestVerificationToken', document.body.dataset.antiforgery);
                                                    fetch($deviceHeldLocationContainer.attr('data-locationsurl'), {
                                                        method: 'POST',
                                                        body: body
                                                    }).then(r => {
                                                        if (r.ok) {
                                                            r.json().then(d => {
                                                                $.each(d, function () {
                                                                    this.value = this.Location;
                                                                    this.label = this.Location;
                                                                });

                                                                $deviceHeldLocation.autocomplete({
                                                                    source: d,
                                                                    minLength: 0,
                                                                    focus: function (e, ui) {
                                                                        return false;
                                                                    },
                                                                    select: function (e, ui) {
                                                                        $deviceHeldLocation.val(ui.item.Location).blur().change();
                                                                        return false;
                                                                    }
                                                                }).data('ui-autocomplete')._renderItem = function (ul, item) {
                                                                    var anchor = $('<a>').append($('<strong>').text(item.Location));
                                                                    if (item.References) {
                                                                        anchor.append(document.createTextNode(' [' + item.References + ']'));
                                                                    }
                                                                    var item = $("<li></li>")
                                                                        .data("item.autocomplete", item)
                                                                        .append(anchor);
                                                                    return item.appendTo(ul);
                                                                };

                                                                $deviceHeldLocation.autocomplete('search', '');
                                                            })
                                                        }
                                                    })
                                                    autocompleteLoaded = true;
                                                }else{
                                                    $deviceHeldLocation.autocomplete('search', '');
                                                }
                                            })
                                            .keydown(function (e) {
                                                $ajaxSave.show();
                                                if (e.which == 13) {
                                                    $(this).blur();
                                                }
                                            }).blur(function () {
                                                $ajaxSave.hide();
                                            })
                                            .change(function () {
                                                $ajaxSave.hide();
                                                $ajaxLoading = $ajaxSave.next('.ajaxLoading').show();

                                                const body = new FormData();
                                                body.append('__RequestVerificationToken', document.body.dataset.antiforgery);
                                                body.append('DeviceHeldLocation', $deviceHeldLocation.val());
                                                fetch($deviceHeldLocationContainer.attr('data-updateurl'), {
                                                    method: 'POST',
                                                    body: body
                                                }).then(r => {
                                                    if (r.ok) {
                                                        $ajaxLoading.hide().next('.ajaxOk').show().delay('fast').fadeOut('slow');
                                                    } else {
                                                        $ajaxLoading.hide();
                                                        alert('Unable to update device held location: ' + r.statusText);
                                                    }
                                                }).catch(e => {
                                                    alert('Unable to update device held location: ' + e.textStatus);
                                                    $ajaxLoading.hide();
                                                });
                                            });
                                        </text>
                                                break;
                                            case LocationModes.RestrictedList:
                                                        <text>
                                        document.DiscoFunctions.PropertyChangeHelper(
                                            $('#Job_DeviceHeldLocation'),
                                            null,
                                            '@Url.Action(MVC.API.Job.UpdateDeviceHeldLocation(Model.Job.Id, null))',
                                            'DeviceHeldLocation');
                                        </text>
                                                break;
                                        }


                                    });
                                </script>
                            }
                        </div>
                    }
                </div>
            </td>
        }
        @if (Model.Job.User != null)
        {
            <td id="Job_Show_User">
                <div>
                    @if (Model.HasUserPhoto)
                    {
                        <div id="Job_Show_User_Photo_Container">
                            <img id="Job_Show_User_Photo" src="@Url.Action(MVC.API.User.Photo(Model.Job.UserId))" />
                        </div>
                    }
                    <h2 id="Job_Show_User_DisplayName" title="Display Name">
                        <span data-clipboard>
                            @if (Authorization.Has(Claims.User.Show))
                            {@Html.ActionLink(Model.Job.User.DisplayName, MVC.User.Show(Model.Job.UserId))}
                        else
                        {@Model.Job.User.DisplayName}
                        </span>
                    </h2>
                    <div id="Job_Show_User_Id" title="Id"><span data-clipboard>@Model.Job.User.FriendlyId()</span></div>
                    @if (Authorization.Has(Claims.User.ShowDetails))
                    {
                        if (!string.IsNullOrWhiteSpace(Model.Job.User.PhoneNumber))
                        {<div id="Job_Show_User_PhoneNumber" title="Phone Number">Phone: <a href="tel:@Model.Job.User.PhoneNumber" data-clipboard>@Model.Job.User.PhoneNumber</a></div>}
                    if (!string.IsNullOrWhiteSpace(Model.Job.User.EmailAddress))
                    {<div id="Job_Show_User_EmailAddress" title="Email Address">Email: <a href="mailto:@(Model.Job.User.EmailAddress)" data-clipboard="@Model.Job.User.DisplayName &lt;@Model.Job.User.EmailAddress&gt;">@Model.Job.User.EmailAddress</a></div>}
            }
                    @if (Model.Job.User.UserFlagAssignments.CanShowAny())
                    {
                        <div id="Job_Show_User_Flags">
                            @foreach (var flag in Model.Job.User.UserFlagAssignments.Where(f => !f.RemovedDate.HasValue).Select(f => Tuple.Create(f, UserFlagService.GetUserFlag(f.UserFlagId))))
                            {
                                if (flag.Item2.permission.CanShow())
                                {
                                    <i class="flag fa fa-@(flag.Item2.flag.Icon) fa-fw d-@(flag.Item2.flag.IconColour)">
                                        <span class="details">
                                            <span class="name">@flag.Item2.flag.Name</span>
                                            @if (flag.Item1.Comments != null) {<span class="comments">@flag.Item1.Comments.ToHtmlComment()</span>}
                                            <span class="added">@CommonHelpers.FriendlyDateAndUser(flag.Item1.AddedDate, flag.Item1.AddedUserId)</span>
                                        </span>
                                    </i>
                                }
                            }
                            <script type="text/javascript">
                                $(function () {
                                    $('#Job_Show_User_Flags')
                                        .tooltip({
                                            items: 'i.flag',
                                            content: function () {
                                                var $this = $(this);
                                                return $this.children('.details').html();
                                            },
                                            tooltipClass: 'FlagAssignment_Tooltip',
                                            position: {
                                                my: "right top",
                                                at: "right bottom",
                                                collision: "flipfit flip"
                                            },
                                            hade: {
                                                effect: ''
                                            },
                                            close: function (e, ui) {
                                                ui.tooltip.hover(
                                                    function () {
                                                        $(this).stop(true).fadeTo(100, 1);
                                                    },
                                                    function () {
                                                        $(this).fadeOut(100, function () { $(this).remove(); });
                                                    });
                                            }
                                        });
                                });
                            </script>
                        </div>
                    }
                    @if (Model.Job.WaitingForUserAction.HasValue)
                    {
                        <div id="Job_Show_User_WaitingForUserAction" class="status">
                            <h4>Awaiting Action</h4>
                            Since: <span data-livestamp="@Model.Job.WaitingForUserAction.ToUnixEpoc()">@Model.Job.WaitingForUserAction.ToFullDateTime()</span>
                        </div>
                    }
                    @if (Model.UserDetails != null && Model.UserDetails.Count(d => !d.Key.EndsWith("&")) > 0)
                    {
                        <div id="Job_Show_User_CustomDetails" class="status clearfix">
                            @foreach (var detail in Model.UserDetails.Where(d => !d.Key.EndsWith("&")))
                            {
                                <div>
                                    <strong>@detail.Key.TrimEnd('*'):</strong>
                                    @if (detail.Key.EndsWith("*"))
                                    {
                                        <a href="" class="reveal smallMessage">[reveal]</a>
                                        <span class="reveal hidden">@Html.Partial(MVC.Shared.Views._CustomDetailValueRender, detail)</span>
                                    }
                                    else
                                    {
                                        @Html.Partial(MVC.Shared.Views._CustomDetailValueRender, detail)
                                    }
                                </div>
                            }
                            <script type="text/javascript">
                                $(() => {
                                    $('#Job_Show_User_CustomDetails').on('click', 'a.reveal', e => {
                                        e.preventDefault();
                                        const t = $(e.currentTarget);
                                        t.next('span.reveal').removeClass('hidden');
                                        t.remove();
                                        return false;
                                    })
                                });
                            </script>
                        </div>
                    }
                </div>
            </td>
        }
    </tr>
    <tr id="Job_Show_Subjects_Actions">
        <td id="Job_Show_Job_Actions">
            @{
                List<string> CanCloseForcedReasons;
                if (Model.Job.CanCloseForced(out CanCloseForcedReasons))
                {
                    <button id="Job_Show_Job_Actions_ForceClose_Button" class="button small">Forcibly Close</button>
                    <div id="Job_Show_Job_Actions_ForceClose_Dialog" class="dialog" title="Forcibly Close this Job?">
                        <div class="info-box error">
                            <p class="fa-p">
                                <i class="fa fa-exclamation-circle"></i><strong>Are you sure?</strong>
                            </p>
                            <ul>
                                @foreach (var reason in CanCloseForcedReasons)
                                {
                                    <li>@reason</li>
                                }
                            </ul>
                        </div>
                        @using (Html.BeginForm(MVC.API.Job.ForceClose(Model.Job.Id, null, true)))
                        {
                            @Html.AntiForgeryToken()
                            <h3>Reason:</h3>
                            <p>
                                <textarea name="Reason" class="block"></textarea>
                            </p>
                        }
                    </div>
                    <script type="text/javascript">
                        $(function () {
                            var button = $('#Job_Show_Job_Actions_ForceClose_Button');
                            var buttonDialog = null;

                            button.click(function () {
                                if (!buttonDialog) {
                                    buttonDialog = $('#Job_Show_Job_Actions_ForceClose_Dialog');
                                    buttonDialog.dialog({
                                        resizable: false,
                                        modal: true,
                                        autoOpen: false,
                                        buttons: {
                                            "Forcibly Close Job": function () {
                                                var $this = $(this);
                                                $this.dialog("disable");
                                                $this.dialog("option", "buttons", null);
                                                $this.find('form').submit();
                                            },
                                            Cancel: function () {
                                                $(this).dialog("close");
                                            }
                                        }
                                    });
                                }

                                buttonDialog.dialog('open');
                                return false;
                            });
                        });
                    </script>
                }
            }

            @if (Model.Job.CanCloseNormally())
            {
                <button type="button" id="Job_Show_Job_Actions_Close_Button" class="button small">Close</button>
                <div id="Job_Show_Job_Actions_Close_Dialog" class="dialog" title="Close this Job?">
                    @using (Html.BeginForm(MVC.API.Job.Close(Model.Job.Id, true)))
                    {
                        @Html.AntiForgeryToken()
                    }
                    <p>
                        <i class="fa fa-exclamation-triangle fa-lg"></i>&nbsp;Are you sure?
                    </p>
                </div>
                <script type="text/javascript">
                    $(function () {
                        const button = $('#Job_Show_Job_Actions_Close_Button');
                        let buttonDialog = null;
                        button.on('click', function () {
                            if (!buttonDialog) {
                                buttonDialog = $('#Job_Show_Job_Actions_Close_Dialog');
                                buttonDialog.dialog({
                                    resizable: false,
                                    modal: true,
                                    autoOpen: false,
                                    buttons: {
                                        "Close Job": function () {
                                            $(this)
                                                .dialog("option", "buttons", null)
                                                .find('form').trigger('submit');
                                        },
                                        Cancel: function () {
                                            $(this).dialog("close");
                                        }
                                    }
                                });
                            }

                            buttonDialog.dialog('open');
                            return false;
                        });
                    });
                </script>
            }
            @if (Model.Job.CanReopen())
            {
                <button id="Job_Show_Job_Actions_Reopen_Button" type="button" class="button small">Reopen Job</button>
                <div id="Job_Show_Job_Actions_Reopen_Dialog" class="dialog" title="Reopen this Job?">
                    @using (Html.BeginForm(MVC.API.Job.Reopen(Model.Job.Id, true)))
                    {
                        @Html.AntiForgeryToken()
                    }
                    <p>
                        <i class="fa fa-exclamation-triangle fa-lg"></i>&nbsp;Are you sure?
                    </p>
                </div>
                <script type="text/javascript">
                    $(function () {
                        const button = $('#Job_Show_Job_Actions_Reopen_Button');
                        let buttonDialog = null;
                        button.click(function () {
                            if (!buttonDialog) {
                                buttonDialog = $('#Job_Show_Job_Actions_Reopen_Dialog');
                                buttonDialog.dialog({
                                    resizable: false,
                                    modal: true,
                                    autoOpen: false,
                                    buttons: {
                                        "Reopen": function () {
                                            $(this)
                                                .dialog("option", "buttons", null)
                                                .find('form').trigger('submit');
                                        },
                                        Cancel: function () {
                                            $(this).dialog("close");
                                        }
                                    }
                                });
                            }

                            buttonDialog.dialog('open');
                            return false;
                        });
                    });
                </script>
            }
            @if (Model.Job.CanDelete())
            {
                <button id="Job_Show_Job_Actions_Delete_Button" type="button" class="button small">Delete</button>
                <div id="Job_Show_Job_Actions_Delete_Dialog" class="dialog" title="Delete this Job?">
                    @using (Html.BeginForm(MVC.API.Job.Delete(Model.Job.Id, true)))
                    {
                        @Html.AntiForgeryToken()
                    }
                    <p>
                        <i class="fa fa-exclamation-triangle fa-lg"></i>&nbsp;This item will be permanently deleted and cannot be recovered. Are you sure?
                    </p>
                </div>
                <script type="text/javascript">
                    $(function () {
                        const button = $('#Job_Show_Job_Actions_Delete_Button');
                        let buttonDialog = null;
                        button.click(function () {
                            if (!buttonDialog) {
                                buttonDialog = $('#Job_Show_Job_Actions_Delete_Dialog');
                                buttonDialog.dialog({
                                    resizable: false,
                                    modal: true,
                                    autoOpen: false,
                                    buttons: {
                                        "Delete": function () {
                                            $(this)
                                                .dialog("option", "buttons", null)
                                                .find('form').trigger('submit');
                                        },
                                        Cancel: function () {
                                            $(this).dialog("close");
                                        }
                                    }
                                });
                            }

                            buttonDialog.dialog('open');
                            return false;
                        });
                    });
                </script>
            }
            @if (Model.Job.CanAddQueues() && Model.AvailableQueues != null && Model.AvailableQueues.Count > 0)
            {

                var priorityValue = JobQueuePriority.Normal.ToString();
                var priorityItems = Enum.GetNames(typeof(JobQueuePriority)).Select(i => new SelectListItem() { Text = i, Value = i, Selected = (i == priorityValue) }).ToList();

                var slaOptions = Disco.Services.Jobs.JobQueues.JobQueueService.SlaOptions.Select(o => new SelectListItem() { Text = o.Value, Value = o.Key.ToString() }).ToList();

                <button id="Job_Show_Job_Actions_AddQueue_Button" class="button small">Add to Queue</button>
                <div id="Job_Show_Job_Actions_AddQueue_Dialog" class="dialog" title="Add Job to Queue">
                    @using (Html.BeginForm(MVC.API.JobQueueJob.AddJob()))
                    {
                        @Html.AntiForgeryToken()
                        <input id="Job_Show_Job_Actions_AddQueue_Dialog_Id" type="hidden" name="id" />
                        <input id="Job_Show_Job_Actions_AddQueue_Dialog_JobId" type="hidden" name="JobId" value="@Model.Job.Id" />
                        <div class="queuePicker">
                            @foreach (var jobQueue in Model.AvailableQueues.OrderBy(jq => jq.Name))
                            {
                                <div class="queue" data-queueid="@(jobQueue.Id)" data-queuesla="@(jobQueue.DefaultSLAExpiry.HasValue ? jobQueue.DefaultSLAExpiry.Value.ToString() : null)" data-queuepriority="@(jobQueue.Priority.ToString())">
                                    <i class="fa fa-@(jobQueue.Icon) fa-fw fa-lg d-@(jobQueue.IconColour)"></i>@jobQueue.Name
                                </div>
                            }
                        </div>
                        <div class="details">
                            <div>
                                <h4>Job Priority</h4>
                                @Html.DropDownList("Priority", priorityItems, new { id = "Job_Show_Job_Actions_AddQueue_Priority" }) <i class="fa d-priority-@(priorityValue.ToLower())" title="@(priorityValue) Priority"></i>
                            </div>
                            <div>
                                <h4>SLA Target</h4>
                                @Html.DropDownList("SLAExpiresMinutes", slaOptions, new { id = "Job_Show_Job_Actions_AddQueue_SLAExpiresMinutes" })
                            </div>
                            <div>
                                <h4>Tasks/Comment</h4>
                                <textarea name="Comment" id="Job_Show_Job_Actions_AddQueue_Comment"></textarea>
                            </div>
                        </div>
                    }
                </div>
                <script type="text/javascript">
                    $(function () {
                        var button = $('#Job_Show_Job_Actions_AddQueue_Button');
                        var buttonDialog = null;
                        var buttonLink = button.attr('href');

                        var queuePicker = null;
                        var queueId = null;
                        var details = null;

                        function queueSelected() {
                            var queue = $(this);

                            queuePicker.children().removeClass('selected');
                            queue.addClass('selected');

                            queueId.val(queue.attr('data-queueid'));

                            var queueSLA = queue.attr('data-queuesla');
                            if (!queueSLA)
                                queueSLA = 0;

                            $('#Job_Show_Job_Actions_AddQueue_Priority').val('Normal');
                            $('#Job_Show_Job_Actions_AddQueue_SLAExpiresMinutes').val(queueSLA);

                            details.show();

                            $('#Job_Show_Job_Actions_AddQueue_Comment').focus().select();
                        }

                        button.click(function (e) {
                            if (!buttonDialog) {
                                buttonDialog = $('#Job_Show_Job_Actions_AddQueue_Dialog');
                                buttonDialog.dialog({
                                    width: 600,
                                    height: 410,
                                    resizable: false,
                                    modal: true,
                                    autoOpen: false,
                                    buttons: {
                                        Cancel: function () {
                                            $(this).dialog("close");
                                        },
                                        "Add to Queue": function () {
                                            if (!!queueId.val()) {
                                                $(this)
                                                    .dialog("option", "buttons", null)
                                                    .find('form').trigger('submit');
                                            } else {
                                                alert('Select a Job Queue');
                                            }
                                        }
                                    }
                                });

                                queuePicker = buttonDialog.find('.queuePicker');
                                queueId = $('#Job_Show_Job_Actions_AddQueue_Dialog_Id');
                                details = buttonDialog.find('.details');

                                var priorityList = $('#Job_Show_Job_Actions_AddQueue_Priority');
                                priorityList.change(function () {
                                    var icon = priorityList.closest('div').find('i').first();
                                    icon[0].className = '';
                                    icon.addClass('fa d-priority-' + priorityList.val().toLowerCase()).attr('title', priorityList.val() + ' Priority');
                                });

                                queuePicker.on('click', 'div.queue', queueSelected);
                            }

                            buttonDialog.dialog('open');
                        });
                    });
                </script>
            }
            @if (Model.Job.CanLogWarranty())
            {
                @Html.ActionLinkSmallButton("Lodge Warranty", MVC.Job.LogWarranty(Model.Job.Id, null, null), "Job_Show_Job_Actions_LogWarranty_Button")
            }
            @if (Model.Job.CanWarrantyCompleted())
            {
                using (Html.BeginForm(MVC.API.Job.UpdateWarrantyExternalCompletedDate(Model.Job.Id, "Now", true)))
                {
                    @Html.AntiForgeryToken()
                    <button id="Job_Show_Job_Actions_WarrantyComplete_Button" class="button small alert" type="submit">Warranty Complete</button>
                }
            }
            @if (Model.Job.CanLogInsurance())
            {
                @Html.ActionLinkSmallButton("Lodge Insurance", MVC.Job.LogInsurance(Model.Job.Id, null, null), "Job_Show_Job_Actions_LogInsurance_Button", "alert")
            }
            @if (Model.Job.CanLogRepair())
            {
                @Html.ActionLinkSmallButton("Lodge Repair", MVC.Job.LogRepair(Model.Job.Id, null, null), "Job_Show_Job_Actions_LogRepair_Button")
            }
            @if (Model.Job.CanRepairComplete())
            {
                using (Html.BeginForm(MVC.API.Job.UpdateNonWarrantyRepairerCompletedDate(Model.Job.Id, "Now", true)))
                {
                    @Html.AntiForgeryToken()
                    <button id="Job_Show_Job_Actions_RepairComplete_Button" class="button small alert" type="submit">Repairs Complete</button>
                }
            }
            @if (Model.Job.CanConvertHWarToHNWar())
            {
                <button id="Job_Show_Job_Actions_ConvertToHNWar_Button" type="button" class="button small">Convert to Non-Warranty</button>
                <div id="Job_Show_Job_Actions_ConvertToHNWar_Dialog" class="dialog" title="Convert this Job?">
                    @using (Html.BeginForm(MVC.API.Job.ConvertHWarToHNWar(Model.Job.Id, true)))
                    {
                        @Html.AntiForgeryToken()
                    }
                    <p>
                        <i class="fa fa-exclamation-triangle fa-lg"></i>&nbsp;This process is not reversible.<br />
                        Are you sure?
                    </p>
                </div>
                <script type="text/javascript">
                    $(function () {
                        const button = $('#Job_Show_Job_Actions_ConvertToHNWar_Button');
                        let buttonDialog = null;
                        button.click(function () {
                            if (!buttonDialog) {
                                buttonDialog = $('#Job_Show_Job_Actions_ConvertToHNWar_Dialog');
                                buttonDialog.dialog({
                                    resizable: false,
                                    modal: true,
                                    autoOpen: false,
                                    buttons: {
                                        "Convert": function () {
                                            $(this)
                                                .dialog("option", "buttons", null)
                                                .find('form').trigger('submit');
                                        },
                                        Cancel: function () {
                                            $(this).dialog("close");
                                        }
                                    }
                                });
                            }

                            buttonDialog.dialog('open');
                            return false;
                        });

                    });
                </script>
            }
        </td>
        @if (Model.Job.Device != null)
        {
            <td id="Job_Show_Device_Actions">
                @if (Model.Job.CanDeviceHeld())
                {
                    using (Html.BeginForm(MVC.API.Job.DeviceHeld(Model.Job.Id, true)))
                    {
                        @Html.AntiForgeryToken()
                        <button id="Job_Show_Device_Actions_Held_Button" type="submit" class="button small">Device Held</button>
                    }
                }
                @if (Model.Job.CanDeviceReadyForReturn())
                {
                    using (Html.BeginForm(MVC.API.Job.DeviceReadyForReturn(Model.Job.Id, true)))
                    {
                        @Html.AntiForgeryToken()
                        <button id="Job_Show_Device_Actions_DeviceReadyForReturn_Button" type="submit" class="button small alert">Device Ready For Return</button>
                    }
                }
                @if (Model.Job.CanDeviceReturned())
                {
                    using (Html.BeginForm(MVC.API.Job.DeviceReturned(Model.Job.Id, true)))
                    {
                        @Html.AntiForgeryToken()
                        <button id="Job_Show_Device_Actions_DeviceReturned_Button" type="submit" class="button small @(Model.Job.CanDeviceReadyForReturn() ? null : "alert")">Device Returned</button>
                    }
                }
            </td>
        }
        @if (Model.Job.User != null)
        {
            <td id="Job_Show_User_Actions">


                @if (Model.Job.CanWaitingForUserAction())
                {
                    <a id="Job_Show_User_Actions_WaitingForUserAction_Button" href="#" class="button small">Awaiting User Action</a>
                    <div id="Job_Show_User_Actions_WaitingForUserAction_Dialog" class="dialog" title="Waiting for User Action">
                        @using (Html.BeginForm(MVC.API.Job.WaitingForUserAction(Model.Job.Id, null, true)))
                        {
                            @Html.AntiForgeryToken()
                            <h3>Reason:</h3>
                            <p>
                                <textarea name="Reason" class="block"></textarea>
                            </p>
                        }
                    </div>
                    <script type="text/javascript">
                        $(function () {
                            var button = $('#Job_Show_User_Actions_WaitingForUserAction_Button');
                            var buttonDialog = null;

                            button.click(function () {
                                if (!buttonDialog) {
                                    buttonDialog = $('#Job_Show_User_Actions_WaitingForUserAction_Dialog');
                                    buttonDialog.dialog({
                                        resizable: false,
                                        modal: true,
                                        autoOpen: false,
                                        buttons: {
                                            "Waiting for User Action": function () {
                                                var $this = $(this);
                                                $this.dialog("disable");
                                                $this.dialog("option", "buttons", null);
                                                $this.find('form').submit();
                                            },
                                            Cancel: function () {
                                                $(this).dialog("close");
                                            }
                                        }
                                    });
                                }

                                buttonDialog.dialog('open');
                                return false;
                            });
                        });
                    </script>
                }
                @if (Model.Job.CanNotWaitingForUserAction())
                {
                    <a id="Job_Show_User_Actions_NotWaitingForUserAction_Button" href="#" class="button alert small">User Action Resolved</a>
                    <div id="Job_Show_User_Actions_NotWaitingForUserAction_Dialog" class="dialog" title="Not Waiting for User Action">
                        @using (Html.BeginForm(MVC.API.Job.NotWaitingForUserAction(Model.Job.Id, null, true)))
                        {
                            @Html.AntiForgeryToken()
                            <h3>Resolution:</h3>
                            <p>
                                <textarea name="Resolution" class="block"></textarea>
                            </p>
                        }
                    </div>
                    <script type="text/javascript">
                        $(function () {
                            var button = $('#Job_Show_User_Actions_NotWaitingForUserAction_Button');
                            var buttonDialog = null;

                            button.click(function () {
                                if (!buttonDialog) {
                                    buttonDialog = $('#Job_Show_User_Actions_NotWaitingForUserAction_Dialog');
                                    buttonDialog.dialog({
                                        resizable: false,
                                        height: 240,
                                        modal: true,
                                        autoOpen: false,
                                        buttons: {
                                            "Not Waiting for User Action": function () {
                                                var $this = $(this);
                                                $this.dialog("disable");
                                                $this.dialog("option", "buttons", null);
                                                $this.find('form').submit();
                                            },
                                            Cancel: function () {
                                                $(this).dialog("close");
                                            }
                                        }
                                    });
                                }

                                buttonDialog.dialog('open');
                                return false;
                            });
                        });
                    </script>
                }

            </td>
        }
    </tr>
</table>