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

    var canConfig = Authorization.Has(Claims.Config.JobPreferences.Configure);
}
<div id="Config_Location" class="form" style="width: 530px;">
    <h2>Job Locations</h2>
    <table>
        <tr>
            <th style="width: 140px">
                Mode:
            </th>
            <td>
                @if (canConfig)
                {
                    @Html.DropDownListFor(model => model.LocationMode, Model.LocationModeOptions().Select(o => new SelectListItem() { Value = o.Key.ToString(), Text = o.Value }))
                    @AjaxHelpers.AjaxSave()
                    @AjaxHelpers.AjaxLoader()
                    <div id="Config_Location_Unrestricted">
                        <div class="info-box">
                            <p class="fa-p">
                                <i class="fa fa-info-circle"></i>Technicians will be able to specify <em>any</em> value when entering a location. A selection of locations used historically will be offered.
                            </p>
                        </div>
                    </div>
                    <div id="Config_Location_List">
                        <a id="Config_Location_List_Button" href="#" class="button small">Update List</a> <a id="Config_Location_List_ImportButton" href="#" class="button small">Import List</a>
                        <div id="Config_Location_List_Dialog" class="dialog" title="Locations">
                            @using (Html.BeginForm(MVC.API.JobPreferences.UpdateLocationList(null, redirect: true)))
                            {
                                @Html.AntiForgeryToken()
                                <div id="Config_Location_List_Dialog_ListContainer">
                                    <span id="Config_Location_List_Dialog_None" class="smallMessage">The List is Empty</span>
                                    <ul id="Config_Location_List_Dialog_List" class="none">
                                        @foreach (var loc in Model.LocationList)
                                        {
                                            <li data-location="@loc"><input type="hidden" name="locationList" value="@loc" />@loc<i class="fa fa-times-circle remove"></i></li>
                                        }
                                    </ul>
                                </div>
                            }
                            <div id="Config_Location_List_Dialog_AddContainer">
                                <input type="text" id="Config_Location_List_Dialog_TextAdd" />
                                <button id="Config_Location_List_Dialog_Add" type="button" class="button small">Add</button>
                            </div>
                        </div>
                        <div id="Config_Location_ListImport_Dialog" class="dialog" title="Import Locations">
                            @using (Html.BeginForm(MVC.API.JobPreferences.ImportLocationList(null, redirect: true)))
                            {
                                @Html.AntiForgeryToken()
                                <input type="hidden" id="Config_Location_ListImport_Dialog_AutomaticList" name="AutomaticList" value="False" />
                                <div id="Config_Location_ListImport_Dialog_Overwrite_Container">
                                    <input type="checkbox" id="Config_Location_ListImport_Dialog_Overwrite" name="Override" value="True" /><label for="Config_Location_ListImport_Dialog_Overwrite">Override Existing List</label>
                                </div>
                                <textarea id="Config_Location_ListImport_Dialog_LocationList" name="LocationList"></textarea>
                                <div class="info-box">
                                    <p class="fa-p">
                                        <i class="fa fa-info-circle"></i>Enter multiple locations separated by <code>&lt;new line&gt;</code>, commas (<code>,</code>) or semicolons (<code>;</code>).
                                    </p>
                                </div>
                            }
                        </div>
                    </div>
                    <div id="Config_Location_Optional">
                        <div class="info-box">
                            <p class="fa-p">
                                <i class="fa fa-info-circle"></i>Technicians will be able to specify <em>any</em> value when entering a location. A defined list of location options is suggested.
                            </p>
                        </div>
                    </div>
                    <div id="Config_Location_Restricted">
                        <div class="info-box">
                            <p class="fa-p">
                                <i class="fa fa-info-circle"></i>Technicians are restricted to select a location from the defined list.
                            </p>
                        </div>
                    </div>
                    <script type="text/javascript">
                    $(function () {
                        document.DiscoFunctions.PropertyChangeHelper(
                            $('#LocationMode'),
                            null,
                            '@(Url.Action(MVC.API.JobPreferences.UpdateLocationMode()))',
                            'LocationMode');

                        var $locationMode = $('#LocationMode');

                        function update() {
                            var $Config_Location_List = $('#Config_Location_List');

                            var $Config_Location_Unrestricted = $('#Config_Location_Unrestricted');
                            var $Config_Location_Optional = $('#Config_Location_Optional');
                            var $Config_Location_Restricted = $('#Config_Location_Restricted');


                            switch ($locationMode.val()) {
                                case 'Unrestricted':
                                    $Config_Location_List.hide();
                                    $Config_Location_Optional.hide();
                                    $Config_Location_Restricted.hide();

                                    $Config_Location_Unrestricted.show();
                                    break;
                                case 'OptionalList':
                                    $Config_Location_Unrestricted.hide();
                                    $Config_Location_Restricted.hide();

                                    $Config_Location_List.show();
                                    $Config_Location_Optional.show();
                                    break;
                                case 'RestrictedList':
                                    $Config_Location_Unrestricted.hide();
                                    $Config_Location_Optional.hide();

                                    $Config_Location_List.show();
                                    $Config_Location_Restricted.show();
                                    break;
                            }
                        }
                        update();
                        $locationMode.change(update);

                        var dialog, textAdd, list, originalList, noList, form;

                        $('#Config_Location_List_Button').click(showDialog);

                        function showDialog() {
                            if (!dialog) {
                                dialog = $('#Config_Location_List_Dialog').dialog({
                                    resizable: false,
                                    modal: true,
                                    autoOpen: false,
                                    width: 350,
                                    buttons: {
                                        "Save Changes": saveChanges,
                                        Cancel: cancel
                                    }
                                });

                                dialog.on('click', '.remove', remove);

                                list = $('#Config_Location_List_Dialog_List');
                                originalList = list.html();
                                noList = $('#Config_Location_List_Dialog_None');

                                textAdd = $('#Config_Location_List_Dialog_TextAdd');

                                textAdd.watermark('Location');
                                textAdd.keydown(function (e) {
                                    if (e.keyCode == 13)
                                        add();
                                });

                                $('#Config_Location_List_Dialog_Add').click(add);
                            }

                            dialog.dialog('open');

                            updateNoList();
                            return false;
                        }

                        function cancel() {
                            $(this).dialog("close");
                            list.html(originalList);
                        }

                        function remove() {
                            $(this).closest('li').remove();

                            updateNoList();
                        }

                        function add() {

                            var value = textAdd.val();

                            // Trim
                            value = jQuery.trim(value);

                            if (!value) {
                                alert('Enter a location to be added');
                                return;
                            }

                            // Already Exists
                            var existingValues = list.find('li[data-location]').map(function () { return $(this).attr('data-location') }).get();
                            if (jQuery.inArray(value, existingValues) >= 0) {
                                alert('That item already exists in the list');
                                return;
                            }

                            // Add Item
                            var li = $('<li>')
                                .append($('<input>').attr({ type: 'hidden', name: 'locationList', value: value }))
                                .append($('<span>').text(value))
                                .append($('<i>').addClass('fa fa-times-circle remove'))
                                .attr('data-location', value)
                                .attr('data-status', 'new');

                            list.append(li);

                            textAdd.focus();

                            updateNoList();
                        }

                        function updateNoList() {
                            if (list.find('li:visible').length > 0)
                                noList.hide();
                            else
                                noList.show();
                        }

                        function saveChanges() {
                            dialog.find('form').submit();
                            dialog.dialog("option", "buttons", null);
                        }

                        // Import
                        var dialogImport, formImport;

                        $('#Config_Location_List_ImportButton').click(showDialogImport);

                        function showDialogImport() {
                            if (!dialogImport) {
                                dialogImport = $('#Config_Location_ListImport_Dialog').dialog({
                                    resizable: false,
                                    modal: true,
                                    autoOpen: false,
                                    width: 350,
                                    buttons: {
                                        "Build Automatic List": function () {
                                            $('#Config_Location_ListImport_Dialog_AutomaticList').val('True').closest('form').submit();
                                            dialogImport.dialog("disable");
                                            dialogImport.dialog("option", "buttons", null);
                                        },
                                        "Import List": function () {
                                            $('#Config_Location_ListImport_Dialog_LocationList').closest('form').submit();
                                            dialogImport.dialog("disable");
                                            dialogImport.dialog("option", "buttons", null);
                                        },
                                        Cancel: function () {
                                            dialogImport.dialog("close");
                                        }
                                    }
                                });
                            }

                            dialogImport.dialog('open');

                            return false;
                        }

                    });
                    </script>
                }
                else
                {
                    @Model.LocationModeOptions().First(o => o.Key == Model.LocationMode.ToString()).Value
                }
            </td>
        </tr>
    </table>
</div>