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


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="<%=Common.GenerateUrl("../css/tabcontrol.css") %>" rel="stylesheet" />
    <link href="<%=Common.GenerateUrl("../Inspection/css/sections.css") %>" rel="stylesheet" />
    <style type="text/css">
        ::-ms-clear, ::-ms-reveal {
            display: none;
        }

        .tab-header {
            float: left;
            padding: 2px 6px;
            cursor: pointer;
            border: 1px solid #fff;
            border-bottom: none;
        }

            .tab-header:hover {
                background: #eee;
            }

            .tab-header.selected {
                border-color: #d8d8d8;
                cursor: default;
            }

                .tab-header.selected:hover {
                    background: #fff;
                }

        .label { /*cover tab.css*/
            display: table-cell;
        }

        .login_lable {
            height: 24px;
            line-height: 24px;
            vertical-align: top;
        }

        .sbutton {
            font-weight: 200;
        }

        .msgdiv {
            border: solid 1px lightgray;
            margin-top: 5px;
            padding-left: 5px;
            padding-right: 10px;
            padding-top: 3px;
            padding-bottom: 3px;
            line-height: 24px;
            white-space: normal;
            word-break: break-word;
            overflow: hidden;
        }

        .msgtime {
            text-align: right;
        }

        .dialog, .data-column-header-filter-panel, .data-column-header-filter-bg {
            z-index: 700;
        }

        .subtitle {
            margin: 20px 40px 5px 0px;
            font-size: 16px;
            color: gray;
        }

            .subtitle span {
                margin-left: 10px;
            }

            .subtitle hr {
                background-color: #d8d8d8;
                border: none;
                height: 1px;
            }

        .dialog-content table td.label {
            width: 120px;
        }
    </style>

    <script src="<%=GetFileUrlWithVersion("../js/controls.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("../js/utility.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("../js/language.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("../js/modulelang.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("js/addsurveytemplate.js")%>" type="text/javascript"></script>
    <script type="text/javascript">
        var surveyid = "";
        var assetid = 0;
        var surveydata;
        var wosurveyCtrl;
        var surveytempreadonly = true;

        function worequest(method, param, callback, error) {
            _network.request("Maintenance/AddSurveyTemplate.aspx", -1, method, param, callback, error || function (e) {
                console.log(e);
                showmaskbg(false, true);
                showAlert(GetTextByKey('P_WOS_PAGEERROR', 'An unknown error occurred.  Please refresh page.'), GetTextByKey('P_WOS_QUERY', 'Query'));
            });
        }

        function showcontatcmask(flag) {
            if (flag) {
                $('#contatcmask').fadeIn(100);
            } else {
                $('#contatcmask').fadeOut(100);
            }
        }

        function OnAdd() {
            surveytempreadonly = false;
            setDisabled();
            $('#dialog_name').val("");
            $('#dialog_active').prop('checked', true);
            if (surveyid) {
                getSurveyTemplateInfo(true);
            } else {
                $('#dialog_notes').val("");
                $('#questionlist').empty();
                wosurveyCtrl = undefined;
            }
        }

        function getSurveyTemplateInfo(copy) {
            showLoading();
            $('#questionlist').empty();
            wosurveyCtrl = undefined;
            worequest("GetSurveyTemplateInfo", surveyid, function (data) {
                hideLoading();
                if (typeof (data) === "string") {
                    showAlert(data, GetTextByKey("P_WOS_ERROR", 'Error'));
                    return;
                }
                if (copy) {
                    surveyid = void 0;
                    if (data.Questions && data.Questions.length > 0) {
                        for (var q of data.Questions) {
                            delete q.Id;
                        }
                    }
                } else {
                    $('#dialog_name').val(data.Name);
                    $('#dialog_active').prop('checked', data.Active);
                }
                surveydata = data;
                $('#dialog_notes').val(surveydata.Notes);
                if (surveydata.Questions && surveydata.Questions.length > 0) {
                    wosurveyCtrl = new $wosurvey($('#questionlist'));
                    wosurveyCtrl.updateQuestions(surveydata.Questions);
                }

            }, function (err) {
                hideLoading();
            });
        }

        function OnEdit() {
            setDisabled();
            getSurveyTemplateInfo();
        }

        function OnSave(exit) {
            if (surveytempreadonly) {
                surveydata.Active = $('#dialog_active').prop('checked');
                param = htmlencode(JSON.stringify(surveydata));
            } else {
                var item = {
                    'Name': $.trim($('#dialog_name').val()),
                    'Active': $('#dialog_active').prop('checked'),
                    'Notes': $.trim($('#dialog_notes').val())
                };

                var alerttitle;
                if (surveyid) {
                    item.Id = surveyid;
                    alerttitle = GetTextByKey("P_WOS_EDITSURVEYTEMPLATE", "Edit Survey Template");
                } else {
                    item.Id = -1;
                    alerttitle = GetTextByKey("P_WOS_ADDSURVEYTEMPLATE", "Add Survey Template");
                }

                if (!item.Name || item.Name.length == 0) {
                    showAlert(GetTextByKey("P_WOS_TEMPLATENAMECANNOTBEEMPTY", 'Template Name cannot be empty.'), alerttitle, undefined, function () { $('#dialog_name').focus(); });
                    return;
                }

                if (wosurveyCtrl) {
                    item.Questions = wosurveyCtrl.getQuestionInputs();
                    if (!item.Questions)
                        return;
                }
                param = htmlencode(JSON.stringify(item));
            }

            showmaskbg(true);
            worequest("SaveSurveyTemplate", param, function (data) {
                showmaskbg(false);
                if (typeof (data) === "string") {
                    showAlert(data, alerttitle);
                } else {
                    surveyid = data;
                    if (exit == 0) {
                        if (surveyid > 0)
                            showAlert(GetTextByKey("P_WOS_SAVSUCCESSFULLY", "Saved successfully."), alerttitle);
                    }
                    else if (exit == 1)
                        OnExit(exit);
                }
            }, function (err) {
                showAlert(GetTextByKey("P_WOS_FAILEDTOSAVESURVEYTEMPLATE", 'Failed to save survey template.'), alerttitle);
            });
        }

        function OnExit(type) {
            if (window.parent && typeof window.parent.CloseCustomerDialog == 'function')
                window.parent.CloseCustomerDialog(type);
            else
                window.parent.CloseDialog(type);
        }

        function init(sid, readonly, copy) {
            surveyid = sid;
            $('#tab_header_info').click();
            $('.comments').hide();
            if (surveyid && !copy) {
                surveytempreadonly = readonly;
                OnEdit();
            }
            else {
                OnAdd();
            }
        }

        function setDisabled() {
            if (surveytempreadonly) {
                //$('.iconsave').hide();
                //$('.iconadd').hide();
                $('#dialog_name').attr('disabled', true);
                //$('#dialog_active').attr('disabled', true);
                $('#dialog_notes').attr('disabled', true);
            }
            else {
                //$('.iconsave').show();
                //$('.iconadd').show();
                $('#dialog_name').attr('disabled', false);
                //$('#dialog_active').attr('disabled', false);
                $('#dialog_notes').attr('disabled', false);
            }
        }

        function showLoading() {
            $("#dialogmask").show();
        }

        function hideLoading() {
            $("#dialogmask").hide();
        }

        $(function () {
            init();

            function resizeContent() {
                $('#divcontent').css('height', $(window).height() - $('#divcontent').offset().top - 4);
            }

            window.onresize = resizeContent;
            resizeContent();
        });

    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="mask_bg" style="display: none; z-index: 500"><div class="loading c-spin"></div></div>
    <div>
        <div id="dialogmask" class="maskbg" style="display: none; z-index: 500;">
            <div class="loading_icon icon c-spin"></div>
        </div>
        <div class="function_title">
            <span class="sbutton iconsave" onclick="OnSave(0);" data-lgid="P_UM_SAVE">Save</span>
            <span class="sbutton iconsave" onclick="OnSave(1);" data-lgid="P_UM_SAVE1">Save and Exit</span>
            <span class="sbutton iconexit" onclick="OnExit(0);" data-lgid="P_UM_SAVE2">Exit Without Saving</span>
        </div>
        <div class="clear"></div>
        <div class="content_main" id="divcontent" style="overflow: auto;">
            <div class="edit-content" style="min-width: 1500px;">
                <table style="line-height: 30px; table-layout: fixed; width: 600px;">
                    <tr>
                        <td class="label"><span data-lgid="P_WOS_NAME_COLON">Name:</span><span class="redasterisk">*</span></td>
                        <td>
                            <input type="text" id="dialog_name" tabindex="1" maxlength="50" autocomplete="off" /></td>
                    </tr>
                    <tr>
                        <td class="label" data-lgid="P_UM_ACTIVE_COLON">Active:</td>
                        <td>
                            <input type="checkbox" id="dialog_active" tabindex="2"/></td>
                    </tr>
                    <tr>
                        <td class="label" data-lgid="P_WOS_NOTES_COLON">Notes:</td>
                        <td>
                            <textarea id="dialog_notes" tabindex="13" style="width: 840px; height: 100px; margin-top: 6px;" maxlength="500"></textarea></td>
                    </tr>
                </table>
                <div class="subtitle">
                    <span data-lgid="P_WOS_QUESTIONINFORMATION">Question Information</span>
                    <span class="sbutton iconadd" style="display: inline;" onclick="onAddQuestion()">Add</span>
                    <hr />
                </div>
                <div class="question-holder no-hover" style="font-weight: bold; font-size: 14px; background-color: #f0f0f0;">
                    <div style="width: 30px; flex-shrink: 0"></div>
                    <div class="question-cell" style="width: 160px"><span data-lgid="P_WOS_NAME" style="padding-left: 15px;">Name</span></div>
                    <div class="question-cell" style="width: 300px"><span data-lgid="P_WOS_TITLE" style="padding-left: 15px;">Title</span></div>
                    <div class="question-cell" style="width: 300px"><span data-lgid="P_WOS_TITLETIPS">Title Tips</span></div>
                    <div class="question-cell" style="width: 240px"><span data-lgid="P_WOS_TYPES">Types</span></div>
                    <div class="question-cell" style="width: 100px"><span data-lgid="P_WOS_REQUIRED">Required</span></div>
                    <div style="flex-grow: 1">Notes</div>
                    <div class="question-cell" style="width: 40px; padding-right: 20px;"></div>
                </div>
                <div id="questionlist"></div>
            </div>
        </div>
    </div>
</asp:Content>