@{
    Html.BundleDeferred("~/ClientScripts/Modules/jQueryUI-TimePicker");
}
<div id="Config_LinkedGroup_Dialog" title="Linked Group" class="dialog">
    <h3 id="Config_LinkedGroup_Title"></h3>
    <form action="#" method="post">
        @Html.AntiForgeryToken()
        <table class="input">
            <tbody>
                <tr>
                    <th>
                        <label for="Config_LinkedGroup_Id">Linked Group:</label>
                    </th>
                    <td>
                        <input id="Config_LinkedGroup_Id" type="text" name="groupId" data-sourceurl="@(Url.Action(MVC.API.System.SearchGroupSubjects()))" />
                    </td>
                </tr>
                <tr>
                    <th>
                        <label for="Config_LinkedGroup_FilterDate">Filter Date: </label>
                    </th>
                    <td>
                        <input id="Config_LinkedGroup_FilterDate" type="text" name="filterBeginDate" placeholder="No Filter" autocomplete="off" />
                    </td>
                </tr>
                <tr>
                    <th>&nbsp;</th>
                    <td>
                        <input id="Config_LinkedGroup_UpdateDescriptionOff" type="hidden" name="updateDescription" value="False" disabled />
                        <input id="Config_LinkedGroup_UpdateDescription" type="checkbox" name="updateDescription" value="True" checked />
                        <label for="Config_LinkedGroup_UpdateDescription">Update Group Description</label>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    <div class="info-box error">
        <p class="fa-p">
            <i class="fa fa-exclamation-circle"></i><strong>Warning:</strong> This group will be managed by Disco ICT.<br />
            Any <strong>existing members will be removed from the group</strong>, and it will be automatically synchronized with related members.
            If the 'Update Group Description' option is selected, the group's description will also be updated to reflect its managed status.
        </p>
    </div>
</div>
<script>
    $(function () {
        let dialog;
        let dialogGroupId;
        let dialogFilterDate;
        let dialogUpdateDescription;
        let dialogTitle;

        function showDialog(groupId, filterDateOption, filterDateValue, updateUrl, title, updateDescription) {
            if (dialog == null) {
                dialog = $('#Config_LinkedGroup_Dialog').dialog({
                    width: 450,
                    resizable: false,
                    modal: true,
                    autoOpen: false
                });

                dialogFilterDate = $('#Config_LinkedGroup_FilterDate');
                dialogFilterDate.datetimepicker({
                    ampm: true,
                    changeYear: true,
                    changeMonth: true,
                    dateFormat: 'yy/mm/dd'
                });

                dialogUpdateDescription = $('#Config_LinkedGroup_UpdateDescription').on('change', function () {
                    $('#Config_LinkedGroup_UpdateDescriptionOff').prop('disabled', $(this).prop('checked'));
                });

                dialogGroupId = $('#Config_LinkedGroup_Id');
                dialogGroupId.focus(function () { $(this).select(); });
                dialogGroupId.autocomplete({
                    source: dialogGroupId.attr('data-sourceurl'),
                    minLength: 2,
                    select: function (e, ui) {
                        dialogGroupId.val(ui.item.Id);
                        return false;
                    }
                }).data('ui-autocomplete')._renderItem = function (ul, item) {
                    return $("<li>")
                        .data("item.autocomplete", item)
                        .append("<a><strong>" + item.Name + "</strong><br>" + item.Id + " (" + item.Type + ")</a>")
                        .appendTo(ul);
                };

                dialogTitle = $('#Config_LinkedGroup_Title');
            }

            var dialogButtons = {};
            if (!!groupId) {
                dialogButtons['Remove Link'] = function () {
                    $(this).dialog('disable');
                    dialogGroupId.val('');
                    dialogGroupId.closest('form').attr('action', updateUrl).submit();
                }
            }
            dialogButtons[(!!groupId ? 'Save Changes' : 'Link Group')] = function () {
                if (!dialogGroupId.val()) {
                    alert('A Linked Group must be specified');
                    return;
                }
                $(this).dialog('disable');
                dialogGroupId.closest('form').attr('action', updateUrl).submit();
            }
            dialogButtons['Cancel'] = function () {
                $(this).dialog('close');
            };

            dialogGroupId.val(groupId);

            if (!!filterDateOption) {
                if (!!filterDateValue) {
                    dialogFilterDate.datetimepicker('setDate', moment(filterDateValue).toDate());
                } else {
                    dialogFilterDate.val('');
                }
                dialogFilterDate.closest('tr').show();
            } else {
                dialogFilterDate.closest('tr').hide();
            }

            dialogUpdateDescription.prop('checked', updateDescription);

            dialogTitle.text(title);
            dialog.dialog('option', 'buttons', dialogButtons);
            dialog.dialog('option', 'title', 'Linked Group: ' + title);
            dialog.dialog('open');
        }

        $(document).on('click', '.Config_LinkedGroup_LinkButton', function () {
            $this = $(this);

            var configuredGroupId = $this.attr('data-linkedgroupid');
            var configuredFilterBeginDate = $this.attr('data-linkedgroupfilterdate');
            var filterDateOption = $this.attr('data-linkedgroupfilterdateoption') === 'True';
            var description = $this.attr('data-linkedgroupdescription');
            var updateUrl = $this.attr('data-linkedgroupupdateurl');
            var updateDescription = $this.attr('data-linkedgroupupdatedescription') === 'True';

            showDialog(configuredGroupId, filterDateOption, configuredFilterBeginDate, updateUrl, description, updateDescription);

            return false;
        });
    });
</script>