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


<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;
        }

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

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

        .sbutton {
            font-weight: 200;
        }

        .catelog {
            color: #444;
            height: 30px;
            line-height: 30px;
            margin-top: 8px;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 20px;
            font-style: italic;
        }

        .page {
            line-height: 52px;
            margin-top: 8px;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 26px;
            font-weight: 700;
            color: #333;
        }

        .question {
            min-height: 30px;
            line-height: 30px;
            padding-left: 30px;
            padding-right: 10px;
            font-size: 14px;
            font-weight: bold;
            color: #111;
            /*display: flex;*/
        }

        .answer {
            min-height: 30px;
            padding-left: 50px;
            padding-right: 10px;
        }

        .maintable {
            border-collapse: collapse;
            width: 98%;
            page-break-inside: avoid;
            margin-left: 1%;
            line-height: 24px;
            table-layout: fixed;
        }

            .maintable td {
                /*border: 1px solid #a9a9a9;*/
                padding-left: 3px;
                padding-right: 3px;
            }

            .maintable .mainlabel {
                font-weight: bold;
                text-align: right;
            }

        .question-tips {
            font-weight: normal;
            font-size: .8rem;
            margin-left: 8px;
            color: gray;
            display: inline-block;
        }

        .noneanswer {
            min-height: 30px;
            padding-left: 50px;
            padding-right: 10px;
            font-weight: normal;
            font-size: .8rem;
            margin-left: 8px;
            color: gray;
            display: inline-block;
            font-style: italic;
        }
    </style>

    <script src="<%=GetFileUrlWithVersion("../js/controls.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("../js/vue.min.js")%>" type="text/javascript"></script>
    <script>Vue.config.productionTip = false; Vue.config.silent = true;</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/surveydetail.js")%>" type="text/javascript"></script>
    <script type="text/javascript">
        var surveyid = "";
        var vm;
        var surveydata;

        function worequest(method, param, callback, error) {
            _network.request("Maintenance/SurveyDetail.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 OnExit(type) {
            if (window.parent && typeof window.parent.CloseCustomerDialog == 'function')
                window.parent.CloseCustomerDialog(type);
            else
                window.parent.CloseDialog(type);
        }

        function init(sid) {
            surveyid = sid;
            if (!surveyid || surveyid === '')
                return;

            GetWorkOrderSurveyResult();
        }

        $(function () {
            vm = new Vue({
                el: '#divresult',
                data: {
                    result: {
                        SurveyData: {
                            Question: {
                                Questions: {}
                            }
                        }
                    }
                },
                methods: {
                    reload: function (data) {
                        this.result = data;
                    }
                }
            });

            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>
        <div class="function_title">
            <span class="sbutton icondelete" onclick="OnExit(0);" style="margin-left: 756px; font-size: 16px;"></span>
        </div>
        <div class="clear"></div>
        <div class="content_main" id="divcontent" style="overflow: auto;">
            <div id="divresult" style="margin: 0 auto;">
                <h1 style="text-align: center;">{{result.SurveyData.Question.Questions.Name}}</h1>
                <div style="text-align: center; margin-bottom: 10px;"><span style="font-weight: bold;" data-lgid="P_WOS_REPLYTIME_COLON">Reply Time: </span> {{result.SubmitTimeStr}}</div>
                <table class="maintable">
                    <tr style="text-align: center;">
                        <td><span class="mainlabel" data-lgid="P_WOS_WORKORDERNUMBER_COLON">Work Order Number:</span> {{result.SurveyData.Question.WorkOrderNumber}}</td>
                    </tr>
                    <tr style="text-align: center;">
                        <td><span class="mainlabel" data-lgid="P_WOS_ASSET_COLON">Asset:</span> {{result.SurveyData.Question.AssetVIN}}/{{result.SurveyData.Question.AssetMake}}/{{result.SurveyData.Question.AssetModel}}</td>
                    </tr>
                    <tr style="text-align: center;">
                        <td><span class="mainlabel" data-lgid="P_WOS_CONTACT_COLON">Contact:</span> {{result.SurveyData.Question.CustomerName}}/{{result.SurveyData.Question.CustomerPhone}}</td>
                    </tr>
                    <tr>
                        <td style="padding: 0;">
                            <div id="divtemplate" style="margin-top: 10px;"></div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="mask_bg" style="display: none;"><div class="loading c-spin"></div></div>
</asp:Content>