@using System.Web.Mvc.Html
@using Worx24Ticketing;
@using System.Text.RegularExpressions;
@using System.Web.Helpers;
@model Ticket
@{
    ViewBag.Title = "New Ticket";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2 style="float: left;">
    <a href="@Url.Action("index", "ticketing")">
        <img style="width: 80px; padding-right: 20px;"
            src="../../Content/Images/icon_ticket.png" /></a>Modify Ticket
</h2>

<div id="savingWrapper" style="line-height: 8em; float: left; padding-left: 50px;">
    <span style="display: none; font-size: 17px;" id="saving">
        <img src="~/Content/Images/loading.gif" />
        Saving ...</span>
</div>
<div class="clear"></div>
<span id="priorityContainer" style="padding-left: 15px; font-size: 12px; font-weight: bold;">Priority</span>
<span id="updateDetails" style="padding-left: 15px;"> </span>
<br />
<br />
<div class="clear"></div>
<div id="scheduleService">
    <a href="#myModal" role="button" style="float: left; margin-bottom: 15px; color: white; margin-left: 15px; text-decoration: none;" class="btn btn-danger" data-toggle="modal">Schedule Service</a>
    <a onclick="return confirm('This action is irreversible, are you sure you want to close this ticket?')" style="margin-bottom: 15px; color: white; margin-left: 15px; text-decoration: none;" href="@Url.Action("closeticket", "ticketing", new { id = Model.TicketId })" class="btn btn-danger">Close Ticket</a>
</div>
<div class="buttonContainer">
    <div class="btn-group" style="float: left; text-decoration: none;">
        <a class="btn btn-danger dropdown-toggle" style="text-decoration: none; color: #ffffff" data-toggle="dropdown" href="#">Priority
        <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#" id="highPriority" onclick="setTicketPriority(3)" style="font-weight: bold; color: red">High</a></li>
            <li><a href="#" id="mediumPriority" onclick="setTicketPriority(2)" style="font-weight: bold; color: orange">Medium</a></li>
            <li><a href="#" id="lowPriority" onclick="setTicketPriority(1)" style="font-weight: bold; color: green">Low</a></li>
            <li class="divider"></li>
            <li><a href="#" id="noPriority" onclick="setTicketPriority(0)" style="font-weight: bold; color: black">None</a></li>
        </ul>
    </div>
</div>
<div class="buttonContainer">
    <div class="btn-group" style="float: left;">
        <a class="btn btn-danger dropdown-toggle" style="text-decoration: none; color: #ffffff" data-toggle="dropdown" href="#">E-Mail Customer
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            @{
                var pattern = @"([a-zA-Z0-9_\-])([a-zA-Z0-9_\-\.]*)@(\[((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])\.){3}|((([a-zA-Z0-9\-]+)\.)+))([a-zA-Z]{2,}|(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])\])";
                var PrimaryContactEmail = Regex.Match(@Model.PrimaryContact, pattern);
                var mailtoFormatter = String.Empty;

                var multipleContacts = Regex.Matches(Model.PrimaryContact, pattern);

                if (multipleContacts != null)
                {
                    var mailtoString = String.Empty;
                    foreach (var match in multipleContacts)
                    {
                        mailtoString += match + ";";
                    }

                    mailtoFormatter = String.Format("mailto:{0}?subject={1}&body={2}", mailtoString, "Test", "Test");
                }


            }
            <li><a href="@mailtoFormatter">Service Scheduled</a></li>
            <li><a href="@mailtoFormatter">Ticket Assigned</a></li>
            <li><a href="@mailtoFormatter">Ticket Complete</a></li>
        </ul>
    </div>
</div>

<div class="clear"></div>
@using (Html.BeginForm("modifyticket", "ticketing", FormMethod.Post, new { id = "modifyTicket" }))
{
    @Html.HiddenFor(model => model.TicketId)
    @Html.HiddenFor(model => model.CreatedDate)
    @Html.HiddenFor(model => model.CreatedBy)
    @Html.HiddenFor(model => model.SalesEmpId)
    @Html.HiddenFor(model => model.LocationId)
    @Html.HiddenFor(model => model.IsComplete)
    @Html.HiddenFor(model => model.LastUpdate)
    @Html.HiddenFor(model => model.LastUpdate)
    @Html.HiddenFor(model => model.CompletedDate)
    @Html.HiddenFor(model => model.Priority)
    <div id="newTicketWrapper">
        <table class="newTicket">
            <tbody>
                <tr>
                    <td class="newticketHeading">
                        @Html.Label("Ticket Type:")
                    </td>
                    <td class="newticketInputs">
                        @Html.DropDownListFor(model => model.TicketTypeId, (IEnumerable<SelectListItem>)ViewBag.TicketTypes)
                        @Html.ValidationMessageFor(model => model.TicketTypeId)
                    </td>
                </tr>
                <tr>
                    <td class="newticketHeading">
                        @Html.Label("Company:")
                    </td>
                    <td class="newticketInputs">
                        @Html.TextBox("ClientName", null, new { placeholder = "Select a company..." })
                        @Html.HiddenFor(model => model.ClientId)
                        <br />
                        @Html.ValidationMessage("ClientName", "Please specify a company for this ticket.")
                    </td>
                </tr>
                <tr>
                    <td class="newticketHeading">
                        @Html.Label("Location(s):")
                        <label for="AllLocations" style="font-size: 9px; display: block;">
                            Type "all" for all locations</label>
                    </td>
                    <td class="newticketInputs">
                        @Html.HiddenFor(model => model.LocationId, new { placeholder = "Select a location from the dropdown." })
                        @Html.TextBox("LocationName", "", new { @class = "LocationName required" })

                        <button href="#newAffected" role="button" style="float: right; height: 38px; text-decoration: none;" class="btn" data-toggle="modal">+</button>
                        <div id="affectedLocWrapper"></div>
                        <br />
                        @Html.ValidationMessageFor(model => model.LocationId)
                    </td>
                </tr>
                <tr>
                    <td class="newticketHeading">
                        @Html.Label("Service / Unit Type:")
                    </td>
                    <td class="newticketInputs">
                        @Html.DropDownListFor(model => model.UnitTypeId, (IEnumerable<SelectListItem>)ViewBag.UnitTypes)
                        <br />
                        @Html.ValidationMessageFor(model => model.UnitTypeId)
                    </td>
                </tr>
                <tr>
                    <td class="newticketHeading">
                        @Html.Label("Summary:")
                    </td>
                    <td class="newticketInputs">
                        @Html.TextBoxFor(model => model.Title, new { placeholder = "Short summary of the problem..." })
                        <br />
                        @Html.ValidationMessageFor(model => model.Title)
                    </td>
                </tr>
                <tr>
                    <td class="newticketHeading">
                        @Html.Label("Client Contact:")
                    </td>
                    <td class="newticketInputs">
                        @Html.TextAreaFor(model => model.PrimaryContact)
                        @* I think its something like this, because remember these objects will be injected into the dom upon a click.*@
                        <br />
                        @Html.ValidationMessageFor(model => model.PrimaryContact)
                    </td>
                </tr>
                <tr>
                    <td class="newticketHeading">
                        @Html.Label("CSR:")
                    </td>
                    <td class="newticketInputs">
                        @Html.TextBox("CSR", "", new { disabled = "true", placeholder = "Name of CSR" })
                        @Html.HiddenFor(model => model.CsrEmpId)
                        <br />
                        @Html.ValidationMessageFor(model => model.CsrEmpId)
                    </td>
                </tr>
                <tr>
                    <td class="newticketHeading">
                        @Html.Label("Assigned To:")
                    </td>
                    <td class="newticketInputs">
                        @Html.DropDownListFor(model => model.AssignedTo, Util.TicketAssignees(), "Unassigned - Queue")
                    </td>
                </tr>
                <tr>
                    <td class="newticketHeading">
                        @Html.Label("Ticket Status:")
                    </td>
                    <td class="newticketInputs">
                        @Html.DropDownListFor(model => model.TicketStateId, (IEnumerable<SelectListItem>)ViewBag.TicketStates)
                        <br />
                        @Html.ValidationMessageFor(model => model.TicketStateId)
                    </td>
                </tr>
                <tr>
                    <td class="newticketHeading">@Html.Label("Ticket Attachements:")</td>
                    <td class="newticketInputs">
                        <div id="file-uploader" style="float: left; clear: both;">
                            <noscript>
                                <p>
                                    Please enable JavaScript to use file uploader.
                                </p>
                                <!-- or put a simple form for upload here -->
                            </noscript>
                        </div>
                        <a id="viewAttachments" href="#ticketAttachments" role="button" style="float: left; margin-bottom: 15px; color: white; margin-left: 15px; text-decoration: none;" class="btn btn-danger" data-toggle="modal">View All</a>
                        <div id="uploader1Preview" style="margin-top: 10px; width: 300px;">
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="rightContainer">
        <table class="newTicketAdditional">
            <tbody>
                <tr>
                    <td class="newticketHeadingAlt">
                        @Html.Label("Description:")
                    </td>
                    <td class="newticketInputs">
                        @Html.TextAreaFor(model => model.Description, new { placeholder = "Description of the problem...", @style = "height: 275px;" })
                        <br />
                        @Html.ValidationMessageFor(model => model.Description)
                    </td>
                </tr>
            </tbody>
        </table>
        <h4>Notifications</h4>
        <p>Send email notifications to the below recipients on ticket creation, updates or changes. <span style="color: red;">NOTE: Notification of new tickets will automatically be sent to Support.</span></p>
        <table class="newTicketAdditional">
            <tbody>
                <tr>
                    <td class="newticketHeadingAlt">
                        @Html.Label("Recipients:")
                    </td>
                    <td class="newticketInputs">
                        @Html.TextBoxFor(model => model.NotifyList, new { @class = "tags", value = "Email Address", style = "" })

                        <br />
                        @Html.ValidationMessageFor(model => model.NotifyList)
                    </td>
                </tr>
            </tbody>
        </table>
        <br />
        <div id="ccSales">
            <label class="checkbox">
                <input id="ccSalesmen" name="ccSalesmen" type="checkbox">
                Notify Salesmen? If so, which?
            </label>
            <br />
            @Html.DropDownList("salesmenDd", Util.SalesmenOfClient(Model.ClientId), "-- Select --")
        </div>
    </div>
}


<div class="clear"></div>
<br />
<div id="serviceDates">
    <h2>Scheduled Service Details</h2>

    <div id="ajaxUpdateWrapper-services">
    </div>
</div>

<div id="notesWrapper">
    <h2>Comments</h2>
</div>

@using (Html.BeginForm(string.Empty, string.Empty, FormMethod.Post, new { id = "newServiceFrm" }))
{
    <div style="display: none; width: 675px;" class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Schedule Service</h3>
        </div>
        <div class="modal-body">
            <table class="newTicketAdditional" style="width: auto;">
                <tbody>
                    <tr>
                        @Html.HiddenFor(model => model.TicketId)
                        <td class="newticketHeadingAlt" style="width: 150px; text-align: left;">
                            @Html.Label("Service Date:")
                        </td>
                        <td class="newticketInputs">
                            @Html.TextBoxFor(model => model.TicketAppointment.InstallDate, new { @class = "datepicker required", style = "width: 250px;" })
                            @Html.ValidationMessageFor(model => model.TicketAppointment.InstallDate)
                        </td>
                    </tr>
                    <tr>
                        <td class="newticketHeadingAlt" style="width: 150px; text-align: left;">
                            @Html.Label("Company:")
                        </td>
                        <td class="newticketInputs">
                            @Html.TextBoxFor(model => model.TicketAppointment.Installer, new { @style = "width: 250px;", @class = "required" })
                            @Html.ValidationMessageFor(model => model.TicketAppointment.Installer)
                        </td>
                    </tr>
                    <tr>
                        <td class="newticketHeadingAlt" style="width: 150px; text-align: left;">
                            @Html.Label("Installer Contact:")
                        </td>
                        <td class="newticketInputs">
                            @Html.TextBoxFor(model => model.TicketAppointment.InstallerContactInfo, new { @style = "width: 450px;", @class = "required" })
                            @Html.ValidationMessageFor(model => model.TicketAppointment.InstallerContactInfo)
                        </td>
                    </tr>
                    <tr>
                        <td class="newticketHeadingAlt" style="width: 150px; text-align: left;">
                            @Html.Label("Notes:")
                        </td>
                        <td class="newticketInputs">
                            @Html.TextAreaFor(model => model.TicketAppointment.InstallNotes, new { @style = "width: 450px;", @class = "required" })
                            @Html.ValidationMessageFor(model => model.TicketAppointment.InstallNotes)
                        </td>
                    </tr>
                    <tr id="inventoryWrapper">
                        <td class="newticketHeadingAlt" style="width: 150px; text-align: left;">
                            @Html.Label("Units Required:")
                            <br />
                            @Html.Label("Units Shipped:")
                        </td>
                        <td class="newticketInputs">
                            @Html.TextBoxFor(model => model.TicketAppointment.UnitsRequired, new { @style = "width: 60px;", placeholder = "amount", @class = "required" })@Html.ValidationMessageFor(model => model.TicketAppointment.UnitsRequired)
                            <br />
                            @Html.TextBoxFor(model => model.TicketAppointment.UnitsShipped, new { @style = "width: 60px;", placeholder = "amount", @class = "required" })@Html.ValidationMessageFor(model => model.TicketAppointment.UnitsShipped)
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <input type="submit" id="newServiceDate" class="btn btn-primary" aria-hidden="true" value="Create" />
            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
    </div>
}

@using (Html.BeginForm(string.Empty, string.Empty, FormMethod.Post, new { id = "newAffectedLocationFrm" }))
{
    <div style="display: none; width: 675px;" class="modal fade in" id="newAffected" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel3">Schedule Service</h3>
        </div>
        <div class="modal-body">
            <table class="newTicketAdditional" style="width: auto;">
                <tbody>
                    <tr>
                        @Html.HiddenFor(model => model.TicketId)
                        <td class="newticketHeadingAlt" style="width: 150px; text-align: left;">
                            @Html.Label("Location Name:")
                        </td>
                        <td class="newticketInputs">
                            @Html.TextBoxFor(model => model.AffectedLocation.Name, new { @class = "LocationName1 required", style = "width: 250px;" })
                            @Html.HiddenFor(model => model.AffectedLocation.LocationId)
                            @Html.ValidationMessageFor(model => model.AffectedLocation.Name)
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <input type="submit" id="newAffectedSubmit" class="btn btn-primary" aria-hidden="true" value="Create" />
            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
    </div>



    <div style="display: none; width: 675px;" class="modal fade in" id="ticketAttachments" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel1">Ticket Attachments</h3>
        </div>
        <div id="ticketAttachmentContainer" class="modal-body">
            @Html.Action("getticketattachments", "ticketing", new { id = @Model.TicketId })
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
    </div>

    @section Scripts
    {

        @Scripts.Render("~/bundles/jqueryval")
        <script src="~/Scripts/moment.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // Client AutoComplete based on entered text.
                $("#ClientName").autocomplete({
                    source: function(request, response) {
                        $.ajax({
                            url: "/AutoComplete/ClientName",
                            type: "POST",
                            dataType: "json",
                            data: "{ 'data': '" + request.term + "' }",
                            contentType: "application/json; charset=utf-8",
                            success: function(data) {
                                response($.map(data, function(item) {

                                    return {
                                        value: item.ClientId,
                                        label: item.Name
                                    };
                                }));
                            }
                        });
                    },
                    minLength: 3,
                    delay: 5,
                    select: function(event, ui) {
                        displayItem("ClientId", "ClientName", ui.item);
                        // Populate CSR for Client when a clientId is in our "ClientID" Hidden Field -
                        // This implies that a company has been selected and would be valid for us to
                        // grab CSR at this point. Will be a jQuery onChange event.
                        $.ajax({
                            url: "/AutoComplete/ClientsCSR",
                            type: "GET",
                            data: { clientId: ui.item.value },
                            contentType: "application/json; charset=utf-8",
                            success: function(data) {
                                if (data != null) {
                                    $("#CSR").attr({ value: data[1] });
                                    $("#CsrEmpId").attr({ value: data[0] });

                                } else {
                                    alert('There is no CSR for this company!');
                                }
                            }
                        });
                        return false;
                    }
                });

                // When user focuses on location name we need to ensure that there is a
                // clientId to validate against so we can pull locations on that Id.
                $(".LocationName").focus(function() {
                    if ($("#ClientId").val() == '') {
                        alert('Please select a company!');
                        $("#ClientName").focus();
                    }
                });

                // Setup autocomplete options for easy rebinding.
                var autocomp_opt = {
                    source: function(request, response) {
                        $.ajax({
                            url: "/AutoComplete/ClientLocations",
                            type: "POST",
                            dataType: "json",
                            data: "{ 'data': '" + request.term + "','clientId': '" + $("#ClientId").val() + "'}",
                            contentType: "application/json; charset=utf-8",
                            success: function(data) {
                                response($.map(data, function(item) {
                                    return {
                                        value: item.LocationId,
                                        label: item.Name
                                    };
                                }));
                            }
                        });
                    },
                    minLength: 1,
                    delay: 5,
                    select: function(event, ui) {
                        var id = this.id;

                        displayItem("LocationId", id, ui.item);

                        return false;
                    }
                };

                // Autocomplete settings for our AffectedLocations.
                var autocomp_opt_alt = {
                    source: function(request, response) {
                        $.ajax({
                            url: "/AutoComplete/ClientLocations",
                            type: "POST",
                            dataType: "json",
                            data: "{ 'data': '" + request.term + "','clientId': '" + $("#ClientId").val() + "'}",
                            contentType: "application/json; charset=utf-8",
                            success: function(data) {
                                response($.map(data, function(item) {
                                    return {
                                        value: item.LocationId,
                                        label: item.Name
                                    };
                                }));
                            }
                        });
                    },
                    minLength: 1,
                    delay: 5,
                    select: function(event, ui) {
                        //console.log(this.id);
                        //console.log(ui);

                        var id = this.id;

                        displayItem("AffectedLocation_LocationId", id, ui.item);

                        return false;
                    }
                };
                // Location AutoComplete based on ClientId.
                $(".LocationName").autocomplete(autocomp_opt);
                $(".LocationName1").autocomplete(autocomp_opt_alt);

                //Function to write the entries into the text box

                function displayItem(hidden, target, dataObject) {
                    console.log($('#' + hidden.toString() + ''));
                    if (target != "") {
                        $("#" + target).attr({ value: dataObject.label });
                    }
                    if (hidden != null) {
                        //console.log(hidden);
                        $("#" + hidden).attr({ value: dataObject.value });
                    }
                }

                // Hardcoding a value of '0' to our default "Unassigned - Queue" option.
                $("#AssignedTo").find("option:contains('Unassigned - Queue')").attr('value', '0');
                $('#NotifyList').tagsInput({ width: 'auto' });
                $("#AssignedTo").change(function() {
                    if ($(this).val() > 0) {
                        $("#TicketStateId").val('2');
                    } else {
                        $("#TicketStateId").val('0');
                    }
                });

                // Using jQuery to redisplay the location name and client name in the autocomplete fields as these are not model binded to elements.
                if ($("#LocationId").val() > 0) {
                    var location = "@ViewBag.Location";
                    $("#LocationName").attr({ value: location });
                } else if ($("#LocationId").val() === "-1") {
                    $("#LocationName").attr({ value: "All" });
                }

                // Populate CSR Name from hidden input value.
                if ($("#CsrEmpId").val() > 0) {
                    $("#CSR").attr({ value: "@ViewBag.Csr" });
                }

                // Populate Priority of ticket.
                var priorityHidden = $("#Priority");

                var currentPriority = priorityHidden.val();
                setTicketPriority(currentPriority);

                // Autocheck "Send to Salesmen" when a salesmen is selected.
                $("#salesmenDd").change(function() {
                    if ($("#salesmenDd option:selected").val() === "") {
                        $("#ccSalesmen").removeAttr('checked');
                    } else {
                        $("#ccSalesmen").attr('checked', 'checked');
                    }
                });

                // Observe this form for changes as it will be posted to the server for modification
                // This Observe will change the class of any changed element and append "changed" to it.
                // This will then change the background of the box indicating a changed field for agents.

                // Remvoved formObserve as our ticket Enviornment is updated on blur(focus out) of elements.
                // $('#modifyTicket').FormObserve();

                $("#TicketTypeId").change(function() {
                    if ($(this).val() == 1 || $(this).val() == 2 || $(this).val() == 3 || $(this).val() == 4 || $(this).val() == 5 || $(this).val() == 6 || $(this).val() == 7 || $(this).val() == 8) {
                        $("#scheduleService").slideDown('slow');
                        if ($(this).val() == 2 || $(this).val() == 6) {
                            $("#inventoryWrapper").slideDown('slow');
                        } else {
                            $("#inventoryWrapper").slideUp('slow');
                        }
                    } else {
                        $("#scheduleService").slideUp('slow');
                    }
                });

                // Display the Schedule Service feature as well as Inventory control for VXP
                // based on what the ticket type selected is.
                if ($("#TicketTypeId").val() == 1 || $("#TicketTypeId").val() == 2 || $("#TicketTypeId").val() == 3 || $("#TicketTypeId").val() == 4 || $("#TicketTypeId").val() == 5 || $("#TicketTypeId").val() == 6 || $("#TicketTypeId").val() == 7 || $("#TicketTypeId").val() == 8) {
                    $("#scheduleService").slideDown('slow');
                    if ($("#TicketTypeId").val() == 2 || $("#TicketTypeId").val() == 6) {
                        $("#inventoryWrapper").slideDown('slow');
                    } else {
                        $("#inventoryWrapper").slideUp('slow');
                    }
                } else {
                    $("#scheduleService").slideUp('slow');
                }

                // Initiallize datepicker
                $('.datepicker').datepicker({ dateFormat: "yy-mm-dd" });

                //$("#formSubmit").click(function() {
                //    $("#modifyTicket").FormObserve_save();
                //});

                // Get all service dates and populate our ajaxWrapper-services
                $.ajax({
                    url: "/ticketing/ticketservicedates",
                    type: "GET",
                    data: { ticketId: @Model.TicketId, cache: Math.random() },
                    success: function(result) {
                        $("#ajaxUpdateWrapper-services").html('');
                        $("#ajaxUpdateWrapper-services").append(result);
                    }
                });

                // When user clicks create in 'Schedule Service (button)' -- Insert new record and then repopulate the data on the page.
                $('#newServiceFrm').submit(function(e) {
                    e.preventDefault();
                    var $form = $(this);

                    // check if the input is valid
                    if (!$form.valid()) return false;

                    $.ajax({
                        type: 'POST',
                        url: "/ticketing/scheduleservice",
                        data: $form.serialize(),
                        success: function(response) {
                            $.ajax({
                                url: "/ticketing/ticketservicedates",
                                type: "GET",
                                data: { ticketId: @Model.TicketId, cache: Math.random() },
                                success: function(result) {
                                    $("#ajaxUpdateWrapper-services").html('');
                                    $("#ajaxUpdateWrapper-services").append(result);
                                }
                            });
                            $("#newServiceFrm :input[type=text]").val('');
                            $("#TicketAppointment_InstallNotes").val('');
                        }
                    });
                });
                // Load up affected locations on DOM Ready.
                $.ajax({
                    url: "/ticketing/GetAffectedLocations",
                    type: "GET",
                    data: { ticketId: @Model.TicketId, cache: Math.random() },
                    success: function(result) {
                        $("#affectedLocWrapper").html('');
                        $("#affectedLocWrapper").append(result);
                    }
                });

                // When a new location is added via modal we will insert it and then refresh the div
                // that holds each location.
                $('#newAffectedLocationFrm').submit(function(e) {
                    e.preventDefault();
                    var $form = $(this);

                    // check if the input is valid
                    if (!$form.valid()) return false;

                    $.ajax({
                        type: 'POST',
                        url: "/ticketing/NewAffectedLocation",
                        data: $form.serialize(),
                        success: function(response) {
                            $.ajax({
                                url: "/ticketing/GetAffectedLocations",
                                type: "GET",
                                data: { ticketId: @Model.TicketId, cache: Math.random() },
                                success: function(result) {
                                    $("#affectedLocWrapper").html('');
                                    $("#affectedLocWrapper").append(result);
                                }
                            });
                            $("#newServiceFrm :input[type=text]").val('');
                            $("#TicketAppointment_InstallNotes").val('');
                        }
                    });
                });

                // This will create autocomplete on our partial box for adding affected locations.
                $('.LocationName').live('keyup.autocomplete', function() {
                    $(".LocationName").autocomplete(autocomp_opt);
                });

                setInterval(function() {
                    $.ajax({
                        type: 'POST',
                        url: "/ticketing/TicketUpdateTicks",
                        data: { ticketId: @Model.TicketId },
                        success: function(response) {
                            console.log(response);
                            var formattedEditDate = new Date(parseInt(response.LastUpdate.substring(6, response.LastUpdate.length - 2), 10));
                            var momentTime = moment(formattedEditDate);
                            var timeAgoFromCurrent = moment(momentTime, "YYYYMMDD").fromNow();

                            $("#updateDetails").html(
                                '<strong>Last update by:</strong> ' + response.LastEditedBy + ' <strong>' + timeAgoFromCurrent + '</strong>');
                        }
                    });
                }, 3000);

                // Going to use the jquery blur event to save the form on blur of an element.
                $("#modifyTicket").on("blur", "input, textarea, select", function () {
                    var $form = $("#modifyTicket");
                    $("#saving").fadeIn('fast');
                    $.ajax({
                        type: 'POST',
                        url: "/ticketing/ModifyTicket",
                        data: $form.serialize(),
                        success: function(response) {
                            //console.log(response);
                            $("#saving").fadeOut('slow');
                            $("#updateDetails").html('');

                            var formattedEditDate = new Date(parseInt(response.LastUpdate.substring(6, response.LastUpdate.length - 2), 10));
                            var momentTime = moment(formattedEditDate);
                            var timeAgoFromCurrent = moment(momentTime, "YYYYMMDD").fromNow();

                            $("#updateDetails").html(
                                '<strong>Last update by:</strong> ' + response.LastEditedBy + ' <strong>' + timeAgoFromCurrent + '</strong>');
                        }
                    });
                });
            });
        </script>

    }

    <script src="~/Scripts/fileuploader.js"></script>
@*// File uploader javascript *@
    <script type="text/javascript">
        function getUrl(action, controller) {
            var protocol = window.location.protocol;
            var host = window.location.host;

            var url = (protocol + '//' + host + '/');

            if ((controller != null && controller != 'undefined') && (action != null && action != 'undefined'))
                url += controller + '/' + action;

            return url;
        }

        function createUploader() {
            var uploader = new qq.FileUploader({
                element: document.getElementById('file-uploader'),
                allowedExtensions: ['png', 'jpeg', 'jpg', 'gif', 'bmp'], // File Type restrictions
                action: '@Url.Action("uploadattachment", "ticketing")',
                params: { ticketId: @Model.TicketId },
                debug: true,
                onComplete: function (id, fileName, responseJSON) {
                    if (responseJSON.success == true) {
                        $("span.qq-upload-failed-text").html("<span style='color: green'>Success!</span>");

                        $.ajax({
                            url: "/ticketing/getticketattachments",
                            type: "GET",
                            data: { id: @Model.TicketId, cache: Math.random() },
                            success: function (result) {
                                $("#ticketAttachmentContainer").html('');
                                $("#ticketAttachmentContainer").append(result);
                            }
                        });
                    }
                    else {
                        $("span.qq-upload-failed-text").html("<span style='color: white'>Failed!</span>");                    }
                    // Get the preview container
                    var $previewContainer = jQuery('#uploader1Preview');
                    // Create the preview img element
                    var $preview = jQuery('<img />');

                    // Hide the preview and set it's size
                    $preview.css({ display: 'none', width: '90%', height: '200px' });
                    // Make sure the preview's container is empty
                    $previewContainer.html('');
                    // Append the preview to the container
                    $previewContainer.append($preview);

                    setInterval(function () {
                        clearPreviewContainer();
                    }, 2000);

                    function clearPreviewContainer()
                    {
                        $(".qq-upload-list").html('');
                    }

                }
            });
        }

        // create uploader as soon as the DOM is ready
        window.onload = createUploader;

        // Setting ticket priority level and changing background color to indicate current priority.
        function setTicketPriority(level) {
            var priorityHidden = $("#Priority");

            priorityHidden.attr({ value: level });

            var currentPriority = priorityHidden.val();

            switch(currentPriority) {
                case "3":
                    $("#highPriority").css("background-color", "rgba(223, 223 , 223, 0.9)").css('border-left', '5px solid red');
                    $("#mediumPriority").css("background-color", "").css('border-left', '');
                    $("#lowPriority").css("background-color", "").css('border-left', '');
                    $("#noPriority").css("background-color", "").css('border-left', '');
                    $("#priorityContainer").html('Priority: <span class="label label-important">High</span>');
                    break;
                case "2":
                    $("#mediumPriority").css("background-color", "rgba(223, 223 , 223, 0.9)").css('border-left', '5px solid orange');
                    $("#highPriority").css("background-color", "").css('border-left', '');
                    $("#lowPriority").css("background-color", "").css('border-left', '');
                    $("#noPriority").css("background-color", "").css('border-left', '');
                    $("#priorityContainer").html('Priority: <span class="label label-warning">Medium</span>');
                    break;
                case "1":
                    $("#lowPriority").css("background-color", "rgba(223, 223 , 223, 0.9)").css('border-left', '5px solid green');
                    $("#highPriority").css("background-color", "").css('border-left', '');
                    $("#mediumPriority").css("background-color", "").css('border-left', '');
                    $("#noPriority").css("background-color", "").css('border-left', '');
                    $("#priorityContainer").html('Priority: <span class="label label-success">Low</span>');
                    break;
                case "0":
                    $("#noPriority").css("background-color", "rgba(223, 223 , 223, 0.9)").css('border-left', '5px solid black');
                    $("#highPriority").css("background-color", "").css('border-left', '');
                    $("#mediumPriority").css("background-color", "").css('border-left', '');
                    $("#lowPriority").css("background-color", "").css('border-left', '');
                    $("#priorityContainer").html('Priority: <span class="label label-inverse">None</span>');
                    break;
            }
        }


    </script>
}