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

<asp:Content ID="Content1" ContentPlaceHolderID="holder_head" runat="Server">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="<%=GetFileUrlWithVersion("css/sections.css")%>" rel="stylesheet" type="text/css" />
    <link href="<%=GetFileUrlWithVersion("../css/tabcontrol.css")%>" rel="stylesheet" />
    <link href="<%=GetFileUrlWithVersion("../css/jquery.datetimepicker.css")%>" rel="stylesheet" type="text/css" />
    <script src="<%=GetFileUrlWithVersion("../js/jquery.datetimepicker.full.js")%>"></script>
    <style type="text/css">
        .fa {
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .icon-settings {
            width: 20px;
            height: 20px;
        }

            .icon-settings::before {
                content: '\f0ae';
            }
    </style>
    <style>
        .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;
            }

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

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

        .section {
            /*background-color: #eaeaea;*/
            /*height: 40px;*/
            line-height: 40px;
            padding-left: 30px;
            padding-right: 10px;
            font-size: 20px;
            font-weight: 400;
            color: #222;
        }

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

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

        .media {
            width: 120px;
            height: 120px;
            margin-top: 5px;
            margin-bottom: 10px;
            margin-right: 10px;
            cursor: pointer;
            border: 1px solid #b0b0b0;
            border-radius: 2px;
            box-shadow: rgba(0, 0, 0, 0.4);
            text-align: center;
            float: left;
        }

        .video {
            line-height: 120px;
            font-size: 30px;
            margin: 0 auto;
            font-family: 'Fontawesome';
        }

            .video::before {
                content: '\f03d';
            }

        .circle {
            width: 12px;
            height: 12px;
            border-radius: 6px;
            display: inline-block;
        }

        .label_level {
            float: right;
            margin-right: 10px;
        }

        .tab_header { /*corver*/
            font-size: 18px;
            font-weight: 500;
            height: unset;
        }

            .tab_header [data-href] {
                line-height: 16px;
                height: 16px;
            }

                .tab_header [data-href].selected {
                    line-height: 20px;
                    height: 20px;
                }

        .assettrmobile {
            display: none;
        }

        #right_popup {
            left: 320px;
        }

        .inspect-asset td b {
            text-align: right;
        }

        @media screen and (orientation: portrait) {
            #right_popup {
                left: 0;
            }

            .inspect-asset td b {
                text-align: left;
            }

            .inspect-asset td span {
                display: block;
            }
        }
    </style>
    <script src="<%=GetFileUrlWithVersion("../js/controls.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("../js/vue.min.js")%>"></script>
    <script>Vue.config.productionTip = false; Vue.config.silent = true;</script>
    <script src="<%=GetFileUrlWithVersion("js/report.js")%>" type="text/javascript"></script>
    <script data-main="<%=GetFileUrlWithVersion("js/view-main.js")%>" src="<%=GetFileUrlWithVersion("../js/lib/require-2.3.6.min.js")%>"></script>
    <script type="text/javascript">
        var reportid = "<%=ReportID %>";
        var teamintelligence =<%=TeamIntelligence ?"true":"false"%>;
        var isAdmin = <%=IsAdminOrSuper ? "true" : "false"%>;

        function inspectionrequest(method, param, callback, error) {
            _network.request("Inspection/Inspection.aspx", -1, method, param, callback, error || function (e) {
                showAlert(GetTextByKey('P_IPT_PAGEERROR', 'An unknown error occurred.  Please refresh page.'), GetTextByKey('P_IPT_QUERY', 'Query'));
            });
        }

        function showRightPopup(state) {
            if (state) {
                $('#content').css('overflow', 'hidden');
                $("#mask_bg").show();
                $("#right_popup").css("left", $("#set_left").width()).show();
            }
            else {
                $('#content').css('overflow', '');
                $("#mask_bg").hide();
                $("#right_popup").hide();
            }
        }

        function OnDownLoad() {
            window.open("Inspection.aspx?rt=f&t=1&id=" + reportid + "&team=" + (teamintelligence ? 1 : 0), '_blank');
        }

        function OnPrint() {
            if (navigator.userAgent.indexOf('Firefox') >= 0 ||
                navigator.userAgent.indexOf('Opera') >= 0) {
                window.open("Inspection.aspx?rt=f&t=2&id=" + reportid + "&team=" + (teamintelligence ? 1 : 0), '_blank');
                return;
            }
            $("#ifdiv").attr('src', "Inspection.aspx?rt=f&t=2&id=" + reportid + "&team=" + (teamintelligence ? 1 : 0));
            if (!$("#ifdiv").data('inited')) {
                $("#ifdiv").on('load', function () {
                    onifload();
                }).show();
                $("#ifdiv").data('inited', 1);
            }
        }

        function onifload() {
            var iframe = document.getElementById('ifdiv');
            iframe.contentWindow.focus();
            iframe.contentWindow.print();
        }

        $(function () {
            if (!canExport) {
                $('#spPrint').hide();
                $('#spDownload').hide();
            }
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="holder_content" runat="Server">
    <div class="function_title" style="text-align: right; margin-top: 2px;">
        <% if (!ReportReadonly)
            { %>
        <span id="button-edit" class="sbutton iconedit" data-lgid="P_IPT_EDIT">Edit</span>
        <% } %>
        <span id="spDownload" id="button-dl" class="sbutton icondownload" onclick="OnDownLoad();" data-lgid="P_IPT_DOWNLOAD">Download</span>
        <span id="spPrint" id="button-print" class="sbutton iconprint" style="margin-right: 20px;" onclick="OnPrint();" data-lgid="P_IPT_PRINT">Print</span>
    </div>
    <div id="divreport" style="width: 1100px; margin: 0 auto;">
        <img id="reportlayoutlogo" style="width: 100px; margin-top: 5px; display: none;" />
        <h1 style="text-align: center;" v-show="report.Template.DisplayInspectionTitle">{{report.Template.Name}}</h1>
        <div style="text-align: center; margin-bottom: 10px;"><span v-show="report.Template.DisplayCommitTime">{{report.CommitTimeLocalStr}}</span><span v-show="report.Template.DisplayCommitBy"> by {{report.CommitedByUserName}}</span></div>
        <table class="maintable">
            <tr v-if="report.ReportLayout==null">
                <td>
                    <table class="maintable">
                        <tr class="assettr">
                            <td class="mainlabel" style="width: 80px;" data-lgid="P_IPT_ASSETNAME_COLON">Asset Name:</td>
                            <td style="width: 200px;">{{report.Asset.Name}}</td>
                            <td class="mainlabel" style="width: 130px;" data-lgid="P_IPT_ASSETNAME2_COLON">Asset Name(Custom):</td>
                            <td style="width: 720px;" colspan="5">{{report.Asset.Name2}}</td>
                        </tr>
                        <tr class="assettr">
                            <td class="mainlabel" style="width: 80px;" data-lgid="P_IPT_VINSN_COLON">VIN/SN:</td>
                            <td style="width: 200px;">{{report.Asset.VIN}}</td>
                            <td class="mainlabel" style="width: 130px;" data-lgid="P_IPT_MAKE_COLON">Make:</td>
                            <td style="width: 200px;">{{report.Asset.MakeName}}</td>
                            <td class="mainlabel" style="width: 50px;" data-lgid="P_IPT_MODEL_COLON">Model:</td>
                            <td style="width: 200px;">{{report.Asset.ModelName}}</td>
                            <td class="mainlabel" style="width: 70px;" data-lgid="P_IPT_ASSETTYPE_COLON">Asset Type:</td>
                            <td style="width: 200px;">{{report.Asset.TypeName}}</td>
                        </tr>
                        <tr class="assettr" v-if="report.WorkOrderId>0">
                            <td class="mainlabel" data-lgid="P_IPT_WORKORDER_COLON">Work Order:</td>
                            <td>{{report.WorkOrderNumber}}</td>
                            <td class="mainlabel" data-lgid="P_IPT_CUSTOMERVISIBLE_COLON">Customer Visible:</td>
                            <td colspan="5">{{report.VisibleToCustomer?"Yes":"No"}}</td>
                        </tr>
                        <tr class="assettrmobile">
                            <td class="mainlabel" style="width: 130px;" data-lgid="P_IPT_ASSETNAME_COLON">Asset Name:</td>
                            <td>{{report.Asset.Name}}</td>
                        </tr>
                        <tr class="assettrmobile">
                            <td class="mainlabel" data-lgid="P_IPT_ASSETNAME2_COLON">Asset Name (Custom):</td>
                            <td>{{report.Asset.Name2}}</td>
                        </tr>
                        <tr class="assettrmobile">
                            <td class="mainlabel" data-lgid="P_IPT_VINSN_COLON">VIN/SN:</td>
                            <td>{{report.Asset.VIN}}</td>
                        </tr>
                        <tr class="assettrmobile">
                            <td class="mainlabel" data-lgid="P_IPT_MAKE_COLON">Make:</td>
                            <td>{{report.Asset.MakeName}}</td>
                        </tr>
                        <tr class="assettrmobile">
                            <td class="mainlabel" data-lgid="P_IPT_MODEL_COLON">Model:</td>
                            <td>{{report.Asset.ModelName}}</td>
                        </tr>
                        <tr class="assettrmobile">
                            <td class="mainlabel" data-lgid="P_IPT_ASSETTYPE_COLON">Asset Type:</td>
                            <td>{{report.Asset.TypeName}}</td>
                        </tr>
                        <tr class="assettrmobile">
                            <td class="mainlabel" data-lgid="P_IPT_WORKORDER_COLON">Work Order:</td>
                            <td>{{report.WorkOrderId}}</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr v-if="report.ReportLayout!=null">
                <td>
                    <table class="maintable" style="width: 100%;">
                        <tr class="assettr" style="vertical-align: top;">
                            <td class="td_pageheaderleft" style="width: 33%; vertical-align: top;"></td>
                            <td class="td_pageheadercenter" style="width: 33%; vertical-align: top;"></td>
                            <td class="td_pageheaderright" style="vertical-align: top;"></td>
                        </tr>
                        <tr class="assettrmobile" style="vertical-align: top;">
                            <td class="td_pageheaderleft" style="text-align: left;"></td>
                        </tr>
                        <tr class="assettrmobile" style="vertical-align: top;">
                            <td class="td_pageheadercenter" style="text-align: left;"></td>
                        </tr>
                        <tr class="assettrmobile" style="vertical-align: top;">
                            <td class="td_pageheaderright" style="text-align: left;"></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td id="tdiissues" style="padding: 0;">
                    <div id="divquestions" style="margin-top: 10px;"></div>
                </td>
            </tr>
            <tr>
                <td id="tdpages" style="padding: 0;">
                    <div id="divpages" style="margin-top: 10px;"></div>
                    <div id="divsign"></div>
                </td>
            </tr>
            <tr v-if="report.ReportLayout!=null">
                <td>
                    <table class="maintable" style="width: 100%;">
                        <tr class="assettr">
                            <td class="td_pagefooterleft" style="width: 33%; vertical-align: bottom;">{{report.ReportLayout.PageFooterLeft}}</td>
                            <td class="td_pagefootercenter" style="width: 33%; vertical-align: bottom;">{{report.ReportLayout.PageFooterCenter}}</td>
                            <td class="td_pagefooterright" style="text-align: right; padding-right: 10px; vertical-align: bottom;">{{report.ReportLayout.PageFooterRight}}</td>
                        </tr>
                        <tr class="assettrmobile" style="vertical-align: bottom;">
                            <td class="td_pagefooterleft" style="text-align: left;">{{report.ReportLayout.PageFooterLeft}}</td>
                        </tr>
                        <tr class="assettrmobile" style="vertical-align: bottom;">
                            <td class="td_pagefootercenter" style="text-align: left;">{{report.ReportLayout.PageFooterCenter}}</td>
                        </tr>
                        <tr class="assettrmobile" style="vertical-align: bottom;">
                            <td class="td_pagefooterright" style="text-align: left;">{{report.ReportLayout.PageFooterRight}}</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <div id="mask_bg" style="display: none;"><div class="loading c-spin"></div></div>
    <div id="right_popup" style="display: none; position: absolute; top: 0; right: 0; bottom: 0; background-color: white; overflow: auto;">
    </div>
    <iframe id="ifdiv" style="height: 1px; width: 1px; display: none;"></iframe>
</asp:Content>