<%@ Page Title="" Language="C#" MasterPageFile="~/IronIntelMasterPage.master" AutoEventWireup="true" CodeFile="JobsiteLimitManagement.aspx.cs" Inherits="JobsiteLimitManagement" %>

<asp:Content ID="Content1" ContentPlaceHolderID="holder_head" runat="Server">
    <style type="text/css">
        .selectinput {
            width: 150px;
            margin-right: 10px;
        }

        .no_wrap th {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .max160 {
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .dialog-content table {
            border-collapse: collapse;
            width: 100%;
            line-height: 32px;
        }

            .dialog-content table td.label {
                width: 124px;
                text-align: right;
                padding-right: 10px;
                line-height: 24px;
                height: 24px;
                vertical-align: top;
            }

            .dialog-content table td input,
            .dialog-content table td textarea {
                border: 1px solid #a9a9a9;
                width: 250px;
                height: 18px;
                padding: 1px;
            }

            .dialog-content table td select {
                width: 254px;
                height: 24px;
            }

            .dialog-content table td input[type="checkbox"] {
                border: none;
            }

            .dialog-content table td textarea {
                height: 100px;
                max-width: 200px;
            }

        #dialog_user_randompass {
            width: auto;
            height: 16px;
            margin: 3px 4px 0 4px;
        }

        .ctl_button {
            font-family: 'CalciteWebCoreIcons';
            display: block;
            margin: 6px auto;
            width: 60px;
            height: 22px;
            line-height: 21px;
            padding: 0;
        }

        #dialog_machinegroup {
            z-index: 500;
            width: 870px;
            top: 60px;
            left: 150px;
        }

        .inputbox {
            width: 500px;
            padding: 1px;
        }

        .group_table .main_table {
            table-layout: fixed;
        }

            .group_table .main_table thead tr {
                display: block;
            }

            .group_table .main_table tbody {
                height: 280px;
                display: block;
                overflow-y: auto;
            }

            .group_table .main_table th {
                width: 165px;
            }

            .group_table .main_table td {
                width: 165px;
                white-space: nowrap;
                word-break: keep-all;
            }

                .group_table .main_table td div {
                    width: 165px;
                    overflow: hidden;
                    white-space: nowrap;
                    word-break: keep-all;
                    text-overflow: ellipsis;
                }


        .table_holder {
            border-collapse: collapse;
            height: 400px;
        }

            .table_holder thead th {
                text-align: left;
            }

            .table_holder tbody tr {
                line-height: 28px;
                height: 28px;
            }

            .table_holder td {
                vertical-align: top;
            }

            .table_holder .td_controller {
                vertical-align: middle;
                padding: 40px 8px;
            }

            .table_holder .scroller {
                height: 400px;
                overflow-y: auto;
                width: 410px;
            }

        .ctl_button {
            font-family: 'CalciteWebCoreIcons';
            display: block;
            margin: 6px auto;
            width: 60px;
            height: 22px;
            line-height: 21px;
            padding: 0;
        }

        .machine_filter {
            height: 32px;
            line-height: 32px;
        }

            .machine_filter select {
                height: 23px;
                min-width: 100px;
                max-width: 300px;
            }

            .machine_filter span {
                margin-left: 8px;
            }

        .ybutton {
            width: auto;
            line-height: normal;
            margin-left: 6px;
            border: none;
            background: rgb(249, 189, 117);
            padding: 5px 14px;
            cursor: pointer;
        }

            .ybutton:hover {
                background: #d7690E;
            }

        .machines {
            /*table-layout: fixed;*/
            word-break: keep-all;
        }

            .machines td {
                padding-right: 5px;
                white-space: nowrap;
            }

        .middlechk {
            width: auto;
            height: 13px;
            margin-top: 0px;
            margin-bottom: 1px;
            vertical-align: middle;
        }
    </style>
    <script>
        var IsDealer = <%=IsDealer ?"true":"false"%>;
        var IsAdmin =<%=IsAdmin ?"true":"false"%>;
        jobsitelimitquery = function (method, param, callback, error, nolog) {
            _network.request("JobSite/JobsiteLimitManagement.aspx", -1, method, param, callback, error || function (e) {
                showAlert(GetTextByKey("P_M3_FAILEDTOLOADDATA", 'Failed to load data: {0}').replace('{0}', e.statusText), GetTextByKey("P_M3_SCHEDULEASSETS", 'Schedule Assets'));
            });
        }

        function getText(s, flag) {
            return (s == null)
                ? (flag ? '<i>null</i>' : '')
                : htmlencode(s, $('#span_text_holder')).replace(/ /g, '&nbsp;');
        }

        function trim_str(s) {
            if (s == null)
                return "";
            else
                return s.replace(/(^\s*)|(\s*$)/g, "");
        }


        /***************************jobsite limit***************************/

        function OnDelete(jl) {
            if (!jl) {
                return;
            }
            var contractorid = htmlencode($.trim($('#sel_contractor').val()));
            showConfirm(GetTextByKey("P_M3_DOYOUWANTTODELETETHEJOBSITELIMIT", 'Do you want to delete the Jobsite limit?'), GetTextByKey("P_M3_DELETEJOBSITELIMITCONFIGURATION", 'Delete jobsite limit configuration'), function () {
                jobsitelimitquery("DeleteJobsiteLimit", contractorid + String.fromCharCode(170) + jl.ID, function (data) {
                    OnRefresh();
                }, function (err) {
                    showAlert(GetTextByKey("P_M3_FAILEDTODELETETHISJOBSITELIMIT", 'Failed to delete this jobsite limit.'), GetTextByKey("P_M3_DELETEJOBSITELIMITCONFIGURATION", 'Delete jobsite limit configuration'));
                });
            });
        }

        function ShowDialog(type) {
            $('#mask_bg').show();
            $('#dialog_jobsitelimit')
                .attr('act', type)
                .showDialogRight1(450);
        }

        //执行iframe中函数
        var doIFrameFunc = function (v_mymethod, v_params, v_frmName) {
            if (document.getElementById(v_frmName)) {

                var fn = document.getElementById(v_frmName).contentWindow[v_mymethod];

                if (fn) {
                    if (v_params == null)
                        return fn();
                    else {
                        return fn.apply(this, v_params);
                    }
                }
                return null;
            }
        }

        function CloseDialog(type) {
            $('#dialog_jobsitelimit').hideDialog();
            OnRefresh();
        }

        function OnAdd() {
            var contractorid = htmlencode($.trim($('#sel_contractor').val()));
            doIFrameFunc("init", [contractorid], "iframejobsitelimit");
            ShowDialog("add");
        }

        var jlid;
        function OnEdit() {
            var jl = grid_dt.source[grid_dt.selectedIndex].Values;
            if (!jl) {
                jlid = undefined;
                return;
            }

            jlid = jl.ID;

            var contractorid = htmlencode($.trim($('#sel_contractor').val()));
            doIFrameFunc("init", [contractorid, jl], "iframejobsitelimit");
            ShowDialog("edit");
        }

        function OnDblClick(e) {
            OnEdit();
        }

        function OnRefresh() {
            showloading(true);

            var contractorid = htmlencode($.trim($('#sel_contractor').val()));
            var searchtxt = "";
            searchtxt = htmlencode($.trim($('#searchinputtxt').val()));

            jobsitelimitquery("GetJobsiteLimits", contractorid + String.fromCharCode(170) + searchtxt, function (data) {
                showloading(false);
                if (typeof (data) === "string") {
                    showAlert(data, GetTextByKey("P_M3_ERROR", 'Error'));
                    return;
                }

                showJobsiteLimitList(data);
            }, function (err) {
                showloading(false);
            });
        }

        //admin用户 获取所有contractor     
        function getContractors() {
            devicerequest('GetContractors', '', function (data) {
                if (typeof (data) === "string") {
                    showAlert(data, GetTextByKey("P_M3_ERROR", 'Error'));
                    return;
                }
                if (data && data.length > 0) {
                    var sel_search = $('#sel_contractor').empty();
                    for (var i = 0; i < data.length; i++) {
                        var kv = data[i];
                        var op_search = $('<option></option>').val(kv.Key).text(kv.Value);
                        sel_search.append(op_search);
                    }
                }
                OnRefresh();

            });
        }

        //普通用户 获取可操作的contractor     
        function GetContractorsByUser() {
            devicerequest('GetContractorsByUser', '', function (data) {
                if (typeof (data) === "string") {
                    showAlert(data, GetTextByKey("P_M3_ERROR", 'Error'));
                    return;
                }
                if (data && data.length > 0) {
                    var sel_search = $('#sel_contractor').empty();
                    for (var i = 0; i < data.length; i++) {
                        var kv = data[i];
                        var op_search = $('<option></option>').val(kv.Key).text(kv.Value);
                        sel_search.append(op_search);
                    }
                }

                OnRefresh();
            });
        }

        function showJobsiteLimitList(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                for (var j in r) {
                    if (j === "Active") {
                        r[j] = { DisplayValue: r.Active ? "Yes" : "No", Value: r[j] };
                    }
                }
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dt.setData(rows);
        }
        var grid_dt;
        function InitGridData() {
            grid_dt = new GridView('#jobsitelimitlist');
            grid_dt.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'ID', caption: GetTextByKey("P_M3_ID", "ID"), valueIndex: 'ID', css: { 'width': 40, 'text-align': 'left' } },
                { name: 'JobSiteName', caption: GetTextByKey("P_M3_JOBSITENAME", "Jobsite Name"), valueIndex: 'JobSiteName', css: { 'width': 200, 'text-align': 'left' } },
                { name: 'Active', caption: GetTextByKey("P_M3_ACTIVE", "Active"), valueIndex: 'Active', allowFilter: true, css: { 'width': 70, 'text-align': 'left' } },
                { name: 'StartTime', caption: GetTextByKey("P_M3_STARTTIME", "Start Time"), valueIndex: 'StartTime', css: { 'width': 70, 'text-align': 'left' } },
                { name: 'EndTime', caption: GetTextByKey("P_M3_ENDTIME", "End Time"), valueIndex: 'EndTime', css: { 'width': 70, 'text-align': 'left' } },
                { name: 'MinTrucks', caption: GetTextByKey("P_M3_ACCEPTABLEMINIMUMTRUCKS", "Acceptable Minimum Trucks"), valueIndex: 'MinTrucks', css: { 'width': 170, 'text-align': 'left' } },
                { name: 'MaxTrucks', caption: GetTextByKey("P_M3_ACCEPTABLEMAXIMUMTRUCKS", "Acceptable Maximum Trucks"), valueIndex: 'MaxTrucks', css: { 'width': 170, 'text-align': 'left' } },
                { name: 'AssetTypeNames', caption: GetTextByKey("P_M3_ACCEPTABLEASSETTYPES", "Acceptable Asset Types"), valueIndex: 'AssetTypeNames', css: { 'width': 200, 'text-align': 'left' } },
                { name: 'Notes', caption: GetTextByKey("P_M3_NOTES", "Notes"), valueIndex: 'Notes', css: { 'width': 200, 'text-align': 'left' } },
                { name: 'Subscribe', caption: "", css: { 'width': 30, 'text-align': 'center' } },
                { name: 'Edit', caption: "", css: { 'width': 30, 'text-align': 'center' } },
                { name: 'Delete', caption: "", css: { 'width': 30, 'text-align': 'center' } }
            ];
            var columns = [];
            // head
            for (var hd in list_columns) {
                var col = {};
                col.name = list_columns[hd].name;
                col.caption = list_columns[hd].caption;
                col.visible = true;
                col.sortable = true;
                col.width = list_columns[hd].css.width;
                col.align = list_columns[hd].css["text-align"]
                col.allowFilter = list_columns[hd].allowFilter;
                col.key = list_columns[hd].valueIndex;
                if (col.name === "Active") {
                    col.filterSource = [{ Value: true, DisplayValue: 'Yes' }, { Value: false, DisplayValue: 'No' }];
                }
                else if (col.name === "Edit") {
                    col.isurl = true;
                    col.text = "\uf044";
                    col.events = {
                        onclick: function () {
                            OnEdit()
                        }
                    };
                    col.classFilter = function (e) {
                        return "icon-col";
                    }
                    col.attrs = { 'title': GetTextByKey("P_M3_EDIT", 'Edit') };
                }
                else if (col.name === "Delete") {
                    col.isurl = true;
                    col.text = "\uf00d";
                    col.events = {
                        onclick: function () {
                            OnDelete(this);
                        }
                    };
                    col.classFilter = function (e) {
                        return "icon-col";
                    };
                    col.attrs = { 'title': GetTextByKey("P_M3_DELETE", 'Delete') };
                }
                else if (col.name === "Subscribe") {
                    col.isurl = true;
                    col.text = "\uf0e0";
                    col.events = {
                        onclick: function () {
                            OnSubscribe(this);
                        }
                    };
                    col.classFilter = function (e) {
                        return "icon-col";
                    };
                    col.attrs = { 'title': GetTextByKey("P_M3_SUBSCRIBECONTACTS", 'Subscribe Contacts') };
                }
                columns.push(col);
            }
            grid_dt.canMultiSelect = false;
            grid_dt.columns = columns;
            grid_dt.init();
            grid_dt.rowdblclick = OnEdit;

            grid_dt.selectedrowchanged = function (rowindex) {
                var rowdata = grid_dt.source[rowindex];
                if (rowdata) {
                    curfewid = rowdata.Values.CurfewID;
                }
            }
        }


        $(function () {
            setPageTitle(GetTextByKey("P_OVERUNDERTRUCKINGALERTSCONFIGURATION", "Over/Under Trucking Alerts Configuration"), true);
            setFavoriteDisplay(true, 550);

            InitGridData();
            InitGridAvailableContacts();
            InitGridSelectedContacts();

            if (IsDealer == true) {
                $('#span_contractor').css('display', '');
                if (IsAdmin)
                    getContractors();
                else {
                    GetContractorsByUser();
                }
            }
            else
                OnRefresh();

            $("#sel_contractor").change(function () {
                OnRefresh();
            });

            $('#dialog_subscribecontacts').dialog(function () {
                $('#mask_bg').hide();
            });
            $('#btnsubscribefilter').click(getMatchAvailableContacts);
            $('#chk_showallassignedcontacts').click(getMatchSelectedContacts);

            $('#searchinputtxt').keydown(searchEnter);
            $(window).resize(function () {
                $("#jobsitelimitlist").css("height", $(window).height() - $("#jobsitelimitlist").offset().top - 4);
                grid_dt && grid_dt.resize();
            }).resize();

        });

        function searchEnter(e) {
            if (e.keyCode == 13 || e.keyCode == 9) {
                OnRefresh();
            }
        }

        /************************** Subscribe Contacts********************************/
        /*************************************************************************/

        var allContacts;
        var _availableContacts = [];
        var _selectedContacts = [];
        var _showSelectedContacts = [];
        function OnSubscribe(jl) {
            if (!jl) return;

            $('#chk_showallassignedcontacts').prop('checked', false);
            $('#txt_contact_key').val('');
            jlid = jl.ID;

            var title = GetTextByKey("P_M3_SUBSCRIBECONTACTS", "Subscribe Contacts");
            $('#dialog_subscribecontacts .dialog-title span.title').html(title);
            $('#mask_bg').show();
            $('#dialog_subscribecontacts')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_subscribecontacts').height()) / 5,
                    'left': (document.documentElement.clientWidth - $('#dialog_subscribecontacts').width()) / 2
                }).showDialog();

            GetSelectedContacts();
        }

        // 获取已选中的Contacts
        function GetSelectedContacts() {
            _selectedContacts = [];
            $("#subscribedialogmask").show();
            jobsitelimitquery('GetSelectedContacts', jlid, function (data) {
                if (typeof data === "string") {
                    showAlert(data, GetTextByKey("P_M3_SUBSCRIBECONTACTS", "Subscribe Contacts"));
                    return;
                }
                _selectedContacts = data;
                queryContacts();
            }, function (e) {
                $("#subscribedialogmask").hide();
            });
        }

        function queryContacts() {
            $('#btnsubscribefilter').prop('disabled', true);
            setTimeout(function () {
                $('#btnsubscribefilter').prop('disabled', false);
            }, 1000);

            _availableContacts = [];
            $("#subscribedialogmask").show();
            jobsitelimitquery('GetContactList', '', function (data) {
                if (typeof data === "string") {
                    showAlert(data, GetTextByKey("P_M3_SUBSCRIBECONTACTS", "Subscribe Contacts"));
                    return;
                }
                allContacts = data;
                getMatchAvailableContacts();
                $("#subscribedialogmask").hide();
            }, function (e) {
                $("#subscribedialogmask").hide();
            });
        }

        function getMatchAvailableContacts() {
            getMatchSelectedContacts();

            var selected = [];
            for (var i = 0; i < _showSelectedContacts.length; i++) {
                var c = _showSelectedContacts[i];
                selected.push(c.IID);
            }
            var filter = $('#txt_contact_key').val().toLowerCase();

            _availableContacts = [];
            for (var i = 0; i < allContacts.length; i++) {
                var c = allContacts[i];
                if ((filter == "" || c.DisplayName.toLowerCase().indexOf(filter) >= 0)
                    && $.inArray(c.IID, selected) < 0) {
                    _availableContacts.push(c);
                }
            }
            showAvailableContact(_availableContacts);
        }

        function getMatchSelectedContacts() {
            var filter = $('#txt_contact_key').val().toLowerCase();
            var showallassigned = $('#chk_showallassignedcontacts').prop('checked');

            _showSelectedContacts = [];
            var unMatched = [];
            for (var i = 0; i < _selectedContacts.length; i++) {
                var c = _selectedContacts[i];
                c.Highlight = false;
                if (filter == "" || c.DisplayName.toLowerCase().indexOf(filter) >= 0) {
                    matched = true;
                    c.Highlight = showallassigned && filter !== "";
                    _showSelectedContacts.push(c);
                }
                else if (showallassigned)
                    unMatched.push(c);
            }

            for (var i in unMatched)
                _showSelectedContacts.push(unMatched[i]);

            showSelectedContact(_showSelectedContacts);
        }

        function showContacts() {
            showAvailableContact(_availableContacts);
            showSelectedContact(_showSelectedContacts);
        }

        function showAvailableContact(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dtac.setData(rows);
        }

        function showSelectedContact(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dtsc.setData(rows);
        }


        var grid_dtac;
        function InitGridAvailableContacts() {
            grid_dtac = new GridView('#availablecontacts');
            grid_dtac.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'DisplayName', caption: GetTextByKey("P_M3_CONTACTNAME", "Contact Name"), valueIndex: 'DisplayName', css: { 'width': 240, 'text-align': 'left' } },
                { name: 'ContactTypeName', caption: GetTextByKey("P_M3_CONTACTTYPE", "Contact Type"), valueIndex: 'ContactTypeName', css: { 'width': 150, 'text-align': 'left' } },
            ];
            var columns = [];
            // head
            for (var hd in list_columns) {
                var col = {};
                col.name = list_columns[hd].name;
                col.caption = list_columns[hd].caption;
                col.visible = true;
                col.sortable = true;
                col.width = list_columns[hd].css.width;
                col.align = list_columns[hd].css["text-align"]
                col.key = list_columns[hd].valueIndex;
                columns.push(col);
            }
            grid_dtac.canMultiSelect = true;
            grid_dtac.columns = columns;
            grid_dtac.init();
            grid_dtac.rowdblclick = function (rowindex) {
                var rowdata = grid_dtac.source[rowindex];
                if (rowdata) {
                    var contact = rowdata.Values;
                    _availableContacts.splice(_availableContacts.indexOf(contact), 1);
                    _selectedContacts.push(contact);
                    _showSelectedContacts.push(contact);

                    showContacts();
                }
            };

            grid_dtac.selectedrowchanged = function (rowindex) {
                var rowdata = grid_dtac.source[rowindex];
                if (rowdata) {
                }
            }
        }


        var grid_dtsc;
        function InitGridSelectedContacts() {
            grid_dtsc = new GridView('#selectedcontacts');
            grid_dtsc.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'DisplayName', caption: GetTextByKey("P_M3_CONTACTNAME", "Contact Name"), valueIndex: 'DisplayName', css: { 'width': 240, 'text-align': 'left' } },
                { name: 'ContactTypeName', caption: GetTextByKey("P_M3_CONTACTTYPE", "Contact Type"), valueIndex: 'ContactTypeName', css: { 'width': 150, 'text-align': 'left' } },
            ];
            var columns = [];
            // head
            for (var hd in list_columns) {
                var col = {};
                col.name = list_columns[hd].name;
                col.caption = list_columns[hd].caption;
                col.visible = true;
                col.sortable = true;
                col.width = list_columns[hd].css.width;
                col.align = list_columns[hd].css["text-align"]
                col.key = list_columns[hd].valueIndex;
                col.styleFilter = function (item) {
                    if (item.Highlight)
                        return { 'background-color': 'yellow' };
                }
                columns.push(col);
            }
            grid_dtsc.canMultiSelect = true;
            grid_dtsc.columns = columns;
            grid_dtsc.init();
            grid_dtsc.rowdblclick = function (rowindex) {
                var rowdata = grid_dtsc.source[rowindex];
                if (rowdata) {
                    var contact = rowdata.Values;
                    _selectedContacts.splice(_selectedContacts.indexOf(contact), 1);
                    _showSelectedContacts.splice(_showSelectedContacts.indexOf(contact), 1);
                    _availableContacts.push(contact);

                    showContacts();
                }
            };

            grid_dtsc.selectedrowchanged = function (rowindex) {
                var rowdata = grid_dtsc.source[rowindex];
                if (rowdata) {
                }
            }
        }

        function OnContactEditorAdd() {
            var indexs = grid_dtac.selectedIndexes;
            if (indexs.length <= 0)
                return;
            for (var i = 0; i < indexs.length; i++) {
                var index = indexs[i];
                var c = grid_dtac.source[index].Values;
                _availableContacts.splice(_availableContacts.indexOf(c), 1);
                _selectedContacts.push(c);
                _showSelectedContacts.push(c);
            }
            showContacts();
        }
        function OnContactEditorAddAll() {
            for (var i = 0; i < _availableContacts.length; i++) {
                var c = _availableContacts[i];
                _selectedContacts.push(c);
                _showSelectedContacts.push(c);
            }
            _availableContacts = [];
            showContacts();
        }
        function OnContactEditorRemove() {
            var indexs = grid_dtsc.selectedIndexes;
            if (indexs.length <= 0)
                return;
            for (var i = 0; i < indexs.length; i++) {
                var index = indexs[i];
                var c = grid_dtsc.source[index].Values;
                _selectedContacts.splice(_selectedContacts.indexOf(c), 1);
                _showSelectedContacts.splice(_showSelectedContacts.indexOf(c), 1);
                _availableContacts.push(c);
            }
            showContacts();
        }
        function OnContactEditorRemoveAll() {
            for (var i = 0; i < _showSelectedContacts.length; i++) {
                var c = _showSelectedContacts[i];
                _selectedContacts.splice(_selectedContacts.indexOf(c), 1);
                _availableContacts.push(c);
            }
            _showSelectedContacts = [];
            showContacts();
        }

        function OnSaveSubscribeContacts() {
            var uids = [];
            for (var i = 0; i < _selectedContacts.length; i++) {
                var j = _selectedContacts[i];
                uids.push(j.IID);
            }

            showloading(true);
            jobsitelimitquery("SaveSubscribeContacts", jlid + String.fromCharCode(170) + JSON.stringify(uids), function (data) {
                showloading(false);
                if (data !== 'OK') {
                    showAlert(data, GetTextByKey("P_M3_SUBSCRIBECONTACTS", "Subscribe Contacts"));
                } else {
                    $('#dialog_subscribecontacts').hideDialog();
                    OnRefresh();
                }
            }, function (err) {
                console.log(err);
                showloading(false);
                showAlert(GetTextByKey("P_M3_FAILEDTOSAVESUBSCRIBECONTACTS", 'Failed to save subscribe contacts.'), GetTextByKey("P_M3_SUBSCRIBECONTACTS", "Subscribe Contacts"));
            });
        }

        /**************************End Subscribe Contacts********************************/
        /*****************************************************************************/

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="holder_content" runat="Server">
    <div style="min-width: 400px;">
        <div class="page_title" data-lgid="P_OVERUNDERTRUCKINGALERTSCONFIGURATION">Over/Under Trucking Alerts Configuration</div>
        <div class="search_bar">
            <input type="password" autocomplete="new-password" style="display: none" />
            <span id="span_contractor" style="display: none;">
                <span data-lgid="P_M3_CONTRACTOR_COLON">Contractor:</span>
                <select id="sel_contractor"></select></span>
            <input type="text" id="searchinputtxt" autocomplete="off" />
            <input class="search" type="button" onclick="OnRefresh();" value="Search" data-lgid="P_M3_SEARCH" style="margin-left: 5px;" />
        </div>
        <div class="function_title">
            <span class="sbutton iconadd" onclick="OnAdd();" data-lgid="P_M3_ADD">Add</span>
            <span class="sbutton iconrefresh" onclick="OnRefresh();" data-lgid="P_M3_REFRESH">Refresh</span>
        </div>
        <div class="clear"></div>
        <div id="jobsitelimitlist"></div>
        <div id="mask_bg" style="display: none;">
            <div class="loading c-spin"></div>
        </div>
        <div class="dialog" id="dialog_jobsitelimit" style="display: none; height: 100%; border-bottom: 0; border-top: 0;">
            <iframe id="iframejobsitelimit" src="AddJobsiteLimit.aspx" style="width: 100%; height: 100%; display: block; border: none;"></iframe>
            <div class="maskbg" style="display: none;"></div>
        </div>

        <div class="dialog" id="dialog_subscribecontacts" style="display: none;">
            <div id="subscribedialogmask" class="maskbg" style="display: none; z-index: 1;">
                <div class="loading_icon icon c-spin"></div>
            </div>
            <div class="dialog-title"><span class="title" data-lgid="P_M3_SUBSCRIBECONTACTS">Subscribe Contacts</span><em class="dialog-close"></em></div>

            <div class="machine_filter">
                <input type="text" id="txt_contact_key" style="margin-left: 8px; width: 280px;" tabindex="40" />
                <input type="button" class="ybutton" id="btnsubscribefilter" value="Filter" data-lgid="P_M3_FILTER" tabindex="42" />
            </div>

            <div class="div_machines">
                <table class="table_holder">
                    <thead>
                        <tr>
                            <td data-lgid="P_M3_AVAILABLECONTACTS">Available Contacts</td>
                            <td></td>
                            <td data-lgid="P_M3_ASSIGNEDCONTACTS">Assigned Contacts     
                               <input type="checkbox" id="chk_showallassignedcontacts" title="When checked, all associated or linked items will display regardless of filter. " data-title-lgid="P_M3_SHOWALLASSIGNEDCONTACTSTITLE" /><label for="chk_showallassignedcontacts" data-lgid="P_M3_SHOWALLASSIGNED">Show All Assigned</label>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div id="availablecontacts" style="height: 400px; width: 410px;"></div>
                            </td>
                            <td class="td_controller">
                                <input class="ctl_button" type="button" value="&#xe62b;" onclick="OnContactEditorAdd();" tabindex="42" />
                                <input class="ctl_button" type="button" value="&#xe632;" onclick="OnContactEditorAddAll();" tabindex="43" />
                                <input class="ctl_button" type="button" value="&#xe62a;" onclick="OnContactEditorRemove();" tabindex="44" />
                                <input class="ctl_button" type="button" value="&#xe631;" onclick="OnContactEditorRemoveAll();" tabindex="45" />
                            </td>
                            <td>
                                <div id="selectedcontacts" style="height: 400px; width: 410px;"></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="dialog-func">
                <input type="button" value="Cancel" data-lgid="P_M3_CANCEL" class="dialog-close" tabindex="47" />
                <input type="button" onclick="OnSaveSubscribeContacts();" value="OK" data-lgid="P_M3_OK" tabindex="46" />
                <div class="clear"></div>
            </div>
        </div>
    </div>
</asp:Content>