<%@ page language="C#" autoeventwireup="true" inherits="Forms_SparesRequest, App_Web_fmatdlct" enableeventvalidation="false" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Src="~/UserControls/New_Header.ascx" TagName="Header" TagPrefix="uc1" %>
<%@ Register Src="~/UserControls/New_Footer.ascx" TagName="Footer" TagPrefix="uc2" %>
<%@ Register Assembly="DevExpress.Web.v14.2" Namespace="DevExpress.Web" TagPrefix="dxw" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>tSense-IoT Spares Request</title>
    <link href="../css/CustomeAlert/demos.css" rel="stylesheet" type="text/css" />
    <link href="../css/CustomeAlert/themes/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <meta content="charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link id="reset" runat="server" href="../css/reset.css" rel="stylesheet" type="text/css" />
    <link id="stylesheet2" runat="server" href="../css/stylesheet2.css" rel="stylesheet" type="text/css" />
    <%--<link href="../css/Updated_css.css" rel="stylesheet" type="text/css" />--%>
    <link id="dropdown" runat="server" href="../css/dropdown.css" rel="stylesheet" type="text/css" />
    <link id="ieonly" runat="server" rel="stylesheet" type="text/css" href="" />
    <link rel="icon" href="../NewDesign/img/favicon.png" type="image/x-icon">
    <link href="../NewDesign/css/bootstrap.css" rel="stylesheet" />
    <link href="../NewDesign/css/font-awesome.css" rel="stylesheet" />
    <link href="../NewDesign/css/responsive.css" rel="stylesheet" />
    <link href="../NewDesign/css/style.css" rel="stylesheet" />
    <script src="../NewDesign/js/jquery.min.js"></script>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../NewDesign/js/bootstrap.min.js"></script>
    <script src="../NewDesign/js/jquery.js"></script>
    <script src="../NewDesign/js/script.js"></script>
    <link href="../NewDesign/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
    <%--Custom Theme for DevEx 14.2--%>
    <link id="GridView" runat="server" type="text/css" href="~/App_Themes/Office2003Blue/GridView/grid.css" rel="stylesheet" />
    <link id="Editors" runat="server" type="text/css" href="~/App_Themes/Office2003Blue/Editors/styles.css" rel="stylesheet" />
    <%--BootStrap Css--%>
    <%--<link id="BootStrapCss" href="../css/bootstrap.css" runat="server" rel="stylesheet" type="text/css" />--%>
    <link id="mainstyle" runat="server" href="../css/mainstyle.css" rel="stylesheet" type="text/css" />
    <%--End of BootStrap Css--%>
    <%--<script src="../js/bootstrap.min.js" type="text/javascript"></script>--%>
    <script src="../js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="../js/CustomAlert/jquery.min.js" type="text/javascript"></script>
    <script src="../js/CustomAlert/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script src="../js/CustomAlert/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
    <script src="../js/CustomAlert/CustomAlert.js" type="text/javascript"></script>
    <script lang="JavaScript1.2" type="text/javascript" src="../js/myformvalidations.js"></script>
    <script src="../js/InventoryMgmt.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/GridCheckBoxMaintaining.js"></script>
    <script lang="javascript" type="text/javascript">
        function HidePopUp() {
            if ($find('mpeProgressIndicator') != undefined) {
                $find('mpeProgressIndicator').hide();
            }
        }
        function ShowPopUp() {
            if ($find('mpeProgressIndicator') != undefined) {
                $find('mpeProgressIndicator').show();
            }
        }

    </script>

    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        #imgItemImage {
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }

            #imgItemImage:hover {
                opacity: 0.7;
            }
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
        }
        /* Modal Content (image) */
        .modal-content {
            margin: auto;
            display: block;
            width: 100%;
            max-width: 700px;
        }
        /* Caption of Modal Image */
        #caption {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            text-align: center;
            color: #ccc;
            padding: 10px 0;
            height: 150px;
        }
        /* Add Animation */
        .modal-content, #caption {
            -webkit-animation-name: zoom;
            -webkit-animation-duration: 0.6s;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

        @-webkit-keyframes zoom {
            from {
                -webkit-transform: scale(0);
            }

            to {
                -webkit-transform: scale(1);
            }
        }

        @keyframes zoom {
            from {
                transform: scale(0);
            }

            to {
                transform: scale(1);
            }
        }
        /* The Close Button */
        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

            .close:hover,
            .close:focus {
                color: #bbb;
                text-decoration: none;
                cursor: pointer;
            }
        /* 100% Image Width on Smaller Screens */
        @media only screen and (max-width: 700px) {
            .modal-content {
                width: 100%;
            }
        }
    </style>
    <script type="text/javascript">
        function onImageClick() {
            var modal = document.getElementById('myModal');
            var img = document.getElementById('imgItemImage');
            var modalImg = document.getElementById("img01");
            modal.style.display = "block";
            modalImg.src = img.src;
            imageZoom("img01", "myresult");
            //captionText.innerHTML = this.alt;
        }
        function ClosePop() {
            var modal = document.getElementById('myModal');
            modal.style.display = "none";
        }
    </script>
    <script src="../js/wow.min.js"></script>
</head>
<body class="white">
    <div class="page-wrapper" style="min-height: 770px;">
        <div class="preloader"></div>
        <form runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <!-- Header Starts Here -->
            <uc1:Header ID="ucHeader" runat="server" />
            <!-- Nav Ends Here -->
            <!-- Content Starts Here -->
            <asp:UpdatePanel ID="updGrid" runat="server">
                <ContentTemplate>
                    <div class="vlive-reports-section maintenance">
                        <div class="container-fluid">
                            <div class="row clearfix">
                                <div class="col-ks-16">
                                    <div class="col-ks-6 HeaderTest">
                                        <div class="col-ks-16">
                                            <h2 class="pull-left">
                                                <asp:Literal ID="lblConfigurationCaption" Text="Configuration" runat="server"></asp:Literal>
                                            </h2>
                                        </div>
                                        <div class="col-ks-16">
                                            <asp:SiteMapPath ID="site" runat="server" CssClass="breadcrumb">
                                                <NodeStyle CssClass="active" />
                                            </asp:SiteMapPath>
                                        </div>
                                    </div>
                                    <div class="col-ks-10 HeaderTopButton">

                                        <asp:LinkButton ID="btnSparesRequest" runat="server" CssClass="btn-fa-wrench btn btn-primary" OnClick="btnSparesRequest_Click" OnClientClick="ShowPopUp();" Text="&nbsp;&nbsp;Spare Request">
                                        </asp:LinkButton>


                                        <asp:LinkButton ID="lbtUserMgt" runat="server" CssClass="btn-fa-file-text-o btn btn-primary" PostBackUrl="~/Forms/ItemMaster.aspx" Text="&nbsp;&nbsp;Manage Items">
                                        </asp:LinkButton>


                                        <asp:LinkButton ID="ibtManageUserGroup" runat="server" CssClass="btn btn-primary btn-fa-microchip"
                                            PostBackUrl="~/Forms/ItemTypeMaster.aspx" Text="&nbsp;&nbsp;Equipment Master">
                                        </asp:LinkButton>


                                        <asp:LinkButton ID="ibtBackToConfig" runat="server" CssClass="fa-arrow-left btn btn-primary" PostBackUrl="~/Forms/ConfigurationSetup.aspx" Text="&nbsp;&nbsp;Back to Configuration" Visible="false">
                                        </asp:LinkButton>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <asp:Panel ID="pnlSparesInfo" runat="server" Visible="false">
                        <div class="vlive-filter">
                            <div class="container-fluid">
                                <div class="vlive-centrifugal-fan maintenance-plan">
                                    <div class="col-ks-16 vlive-header_VXL">
                                        <div class="col-ks-16">
                                            <asp:Label ID="lblSpares" runat="server" Text="Spares Request" CssClass="pnlhearder"></asp:Label>
                                        </div>
                                    </div>
                                    <div class="row ftop">
                                        <div class="col-md-6" id="divAddSpares" runat="server">
                                            <div class="col-ks-16" runat="server" id="divCustomer" style="padding-top: 10px;">
                                                <div class="col-ks-3">
                                                    <asp:Label ID="Label2" CssClass="labelAlign" runat="server" Text="Customer Name"></asp:Label>
                                                    <%--<span style="color: red">*</span>--%>
                                                </div>
                                                <div class="col-ks-5">
                                                    <asp:DropDownList ID="ddlCustomerID" ClientIDMode="AutoID" runat="server" CssClass="form-control man-dat FontAlign" AutoPostBack="true" TabIndex="1"
                                                        AppendDataBoundItems="true" OnSelectedIndexChanged="ddlCustomerID_SelectedIndexChanged">
                                                    </asp:DropDownList>
                                                </div>
                                            </div>
                                            <div class="col-ks-16" style="padding-top: 10px;">
                                                <div class="col-ks-3">
                                                    <asp:Label ID="lblItemtypeName" runat="server" Text="Device Name" CssClass="label"></asp:Label>
                                                </div>
                                                <div class="col-ks-5">
                                                    <asp:DropDownList ID="ddlDevice" runat="server" CssClass="form-control man-dat FontAlign" AutoPostBack="true" TabIndex="2"
                                                        AppendDataBoundItems="true" OnChange="ShowPopUp();" OnSelectedIndexChanged="ddlDevice_SelectedIndexChanged">
                                                        <asp:ListItem Text="- Select -" Value="- Select -"></asp:ListItem>
                                                    </asp:DropDownList>
                                                </div>
                                                <div class="col-ks-3">
                                                    <asp:Label ID="Label1" runat="server" Text="Equipment Name" CssClass="label"></asp:Label>
                                                </div>
                                                <div class="col-ks-5">
                                                    <asp:DropDownList ID="ddlEquipment" runat="server" CssClass="form-control man-dat FontAlign" AutoPostBack="true" TabIndex="3"
                                                        AppendDataBoundItems="true" OnChange="ShowPopUp();" OnSelectedIndexChanged="ddlEquipment_SelectedIndexChanged">
                                                    </asp:DropDownList>
                                                </div>
                                            </div>
                                            <div class="col-ks-16" id="diveqImage" runat="server" style="display: none; padding-top: 10px;">
                                                <div class="col-ks-16" align="right">
                                                    <img id="imgItemImage" runat="server" style="height: 50px !important; width: 50px !important; margin-top: 10px; margin-bottom: 10px; border-style: groove; border-color: gray; cursor: zoom-in;" onclick="onImageClick();" />
                                                    <asp:HiddenField ID="hdfImage" runat="server" />
                                                    <asp:HiddenField ID="hdfItemTypeID" runat="server" />
                                                    <!-- The Modal -->
                                                    <div id="myModal" class="modal">
                                                        <span class="close" onclick="ClosePop();">&times;</span>
                                                        <div class="col-md-8">
                                                            <img class="modal-content" id="img01">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div id="myresult" class="img-zoom-result"></div>
                                                        </div>
                                                        <div id="caption"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-ks-16" style="padding-top: 10px;">
                                                <asp:HiddenField ID="hdnItemToBeUnassinged" runat="server" />
                                                <asp:HiddenField ID="hdnAssignedEquipment" runat="server" />
                                                <asp:HiddenField ID="hdnAddItem" runat="server" />
                                                <div class="clear clearfix"></div>
                                                <div class="table-responsive">

                                                    <dxw:ASPxGridView ID="gvAssignedEquipment" ClientInstanceName="gvAssignedEquipment" runat="server" Width="100%" KeyFieldName="ItemSNo"
                                                        CssFilePath="~/App_Themes/office2003Blue/GridView/styles.css" CssPostfix="Office2003_Blue" EnableViewState="false"
                                                        EnableTheming="true" Theme="Office2003Blue" TabIndex="4">
                                                        <Styles CssFilePath="~/App_Themes/office2003Blue/GridView/grid.css" AlternatingRow-Enabled="True"
                                                            CssPostfix="Office2003_Blue">
                                                            <Header ImageSpacing="5px" SortingImageSpacing="5px">
                                                            </Header>
                                                            <LoadingPanel ImageSpacing="10px">
                                                            </LoadingPanel>
                                                            <PagerBottomPanel CssClass="PageFooter">
                                                            </PagerBottomPanel>
                                                            <PagerTopPanel CssClass="PageFooter">
                                                            </PagerTopPanel>
                                                        </Styles>
                                                        <SettingsPager PrevPageButton-Image-Url="../App_Themes/office2003Blue/GridView/pPrev.gif"
                                                            PrevPageButton-Image-UrlDisabled="../App_Themes/office2003Blue/GridView/pPrevDisabled.gif"
                                                            NextPageButton-Image-UrlDisabled="../App_Themes/office2003Blue/GridView/pNextDisabled.gif"
                                                            NextPageButton-Image-Url="../App_Themes/office2003Blue/GridView/pNext.gif" AlwaysShowPager="true">
                                                        </SettingsPager>
                                                        <Columns>
                                                            <dxw:GridViewDataColumn FieldName="ItemSNo" Caption="ItemSNo" VisibleIndex="0" Visible="false">
                                                            </dxw:GridViewDataColumn>
                                                            <dxw:GridViewCommandColumn ShowSelectCheckbox="True" VisibleIndex="1" Width="5%" Name="Checkbox">
                                                                <HeaderTemplate>
                                                                    <input type="checkbox" id="chkSelectAll" runat="server" onclick="gvAssignedEquipment.SelectAllRowsOnPage(this.checked);"
                                                                        style="vertical-align: middle;"
                                                                        tabindex="5"></input>
                                                                </HeaderTemplate>
                                                                <HeaderStyle Paddings-PaddingTop="1" Paddings-PaddingBottom="1" HorizontalAlign="Center" />
                                                            </dxw:GridViewCommandColumn>
                                                            <dxw:GridViewDataColumn FieldName="SlNo" Caption="SlNo" VisibleIndex="2"
                                                                Width="20%" HeaderStyle-Wrap="True">
                                                                <HeaderCaptionTemplate>
                                                                    <asp:Label ID="lblISlNo" runat="server" Text="Item no [position number]"></asp:Label>
                                                                </HeaderCaptionTemplate>
                                                                <DataItemTemplate>
                                                                    <asp:Label ID="lblSno" runat="server" Text='<%# Eval("SlNo") %>' ForeColor='<%# Convert.ToString(Eval("isAvail"))=="1"? System.Drawing.Color.Red :System.Drawing.Color.Green   %>' />
                                                                    <asp:HiddenField ID="hdnServiceId" runat="server" Value='<%# Eval("ItemSNo") %>' />
                                                                </DataItemTemplate>
                                                                <Settings AllowAutoFilter="False" />
                                                            </dxw:GridViewDataColumn>
                                                            <dxw:GridViewDataColumn FieldName="ItemCategoryName" Caption="Item Category Name" VisibleIndex="3" Width="22%" HeaderStyle-Wrap="True">
                                                                <HeaderCaptionTemplate>
                                                                    <asp:Label ID="lblItemCategoryName" runat="server" Text="Item Category Name"></asp:Label>
                                                                </HeaderCaptionTemplate>
                                                                <DataItemTemplate>
                                                                    <asp:Label ID="lblItemCategoryDetails" runat="server" Text='<%# Eval("ItemCategoryName") %>' ForeColor='<%# Convert.ToString(Eval("isAvail"))=="1"? System.Drawing.Color.Red :System.Drawing.Color.Green   %>' />
                                                                </DataItemTemplate>
                                                                <Settings AllowAutoFilter="True" />
                                                            </dxw:GridViewDataColumn>
                                                            <dxw:GridViewDataColumn FieldName="Itemcode" Caption="Item code" VisibleIndex="4"
                                                                Width="22%">
                                                                <HeaderCaptionTemplate>
                                                                    <asp:Label ID="lblItemcode" runat="server" Text="Item code"></asp:Label>
                                                                </HeaderCaptionTemplate>
                                                                <DataItemTemplate>
                                                                    <asp:Label ID="lblItemcodeDetails" runat="server" Text='<%# Eval("Itemcode") %>' ForeColor='<%# Convert.ToString(Eval("isAvail"))=="1"? System.Drawing.Color.Red :System.Drawing.Color.Green   %>'  />
                                                                </DataItemTemplate>
                                                                <Settings AllowAutoFilter="True" />
                                                            </dxw:GridViewDataColumn>
                                                            <dxw:GridViewDataColumn FieldName="ItemName" Caption="Item Name" VisibleIndex="5"
                                                                Width="22%">
                                                                <HeaderCaptionTemplate>
                                                                    <asp:Label ID="lblItemName" runat="server" Text="Item Name"></asp:Label>
                                                                </HeaderCaptionTemplate>
                                                                <DataItemTemplate>
                                                                    <asp:Label ID="lblItemNameDetails" runat="server" Text='<%# Eval("ItemName") %>' ForeColor='<%# Convert.ToString(Eval("isAvail"))=="1"? System.Drawing.Color.Red :System.Drawing.Color.Green   %>' />
                                                                </DataItemTemplate>
                                                                <Settings AllowAutoFilter="True" />
                                                            </dxw:GridViewDataColumn>
                                                            <dxw:GridViewDataColumn FieldName="ItemImage" VisibleIndex="6"
                                                                Width="22%">
                                                                <HeaderCaptionTemplate>
                                                                    <asp:Label ID="lblItemName" runat="server" Text=""></asp:Label>
                                                                </HeaderCaptionTemplate>
                                                                <DataItemTemplate>
                                                                    <img runat="server" id="imgItem" src='<%# "data:image/png;base64," +  Eval("ItemImage") %>' width="100" height="100" />
                                                                </DataItemTemplate>
                                                                <Settings AllowAutoFilter="False" />
                                                            </dxw:GridViewDataColumn>
                                                            <%-- <dxw:GridViewDataColumn VisibleIndex="7" Width="22%">
                                                                <HeaderCaptionTemplate>
                                                                    <asp:Label ID="lblItemName" runat="server" Text=""></asp:Label>
                                                                </HeaderCaptionTemplate>
                                                                <DataItemTemplate>
                                                                    <asp:TextBox ID="txtQuantity" runat="server" CssClass="form-control" Text='<%# Eval("TotalQty") %>'></asp:TextBox>
                                                                </DataItemTemplate>
                                                                <Settings AllowAutoFilter="False" />
                                                            </dxw:GridViewDataColumn>--%>

                                                            <dxw:GridViewDataTextColumn Caption="Quantity" FieldName="TotalQty" Name="TotalQty"
                                                                ShowInCustomizationForm="true" VisibleIndex="7" Width="10%">
                                                                <DataItemTemplate>
                                                                    <dxw:ASPxTextBox ID="txtQty" runat="server" MaxLength="7" Text='<%# Convert.ToString(Eval("TotalQty"))=="" ? "1": Convert.ToString(Eval("TotalQty")) %>' CssClass="form-control">
                                                                    </dxw:ASPxTextBox>
                                                                </DataItemTemplate>
                                                                <Settings AllowAutoFilter="False" />
                                                            </dxw:GridViewDataTextColumn>

                                                        </Columns>
                                                        <Settings ShowVerticalScrollBar="true" VerticalScrollableHeight="453" />
                                                        <Settings ShowFilterRow="true" ShowFilterRowMenu="True" />
                                                        <SettingsText EmptyDataRow=" No item(s) found" />
                                                    </dxw:ASPxGridView>
                                                </div>
                                            </div>
                                            <div class="col-ks-16" align="right" style="padding-top: 10px;">
                                                <asp:LinkButton ID="btnAddRequest" runat="server" CssClass="btn-fa-plus btn btn-primary" OnClick="btnAddRequest_Click" TabIndex="5" OnClientClick="return ValidateSparesRequest();" Text="&nbsp;&nbsp;Add Item">
                                                </asp:LinkButton>
                                            </div>
                                        </div>
                                        <div class="col-md-6" id="divSparesGrid" runat="server">
                                            <div class="vlive-filter">
                                                <div class="container-fluid">
                                                    <div class="vlive-centrifugal-fan maintenance-plan">
                                                        <div class="col-ks-16 vlive-header_VXL">
                                                            <div class="col-ks-16">
                                                                <asp:Label ID="Label3" runat="server" Text="Selected spare item(s) list" CssClass="pnlhearder"></asp:Label>
                                                            </div>
                                                        </div>
                                                        <div class="ftop">
                                                            <div class="col-ks-16" style="padding-top: 10px;">
                                                                <div class="clear clearfix"></div>
                                                                <div class="table-responsive">
                                                                    <dxw:ASPxGridView ID="gvSparesRequest" runat="server" Width="100%" KeyFieldName="EquipmentID"
                                                                        CssFilePath="~/App_Themes/office2003Blue/GridView/styles.css" CssPostfix="Office2003_Blue"
                                                                        EnableTheming="true" Theme="Office2003Blue" OnHtmlRowCreated="gvSparesRequest_HtmlRowCreated"
                                                                        OnAfterPerformCallback="gvSparesRequest_AfterPerformCallback" TabIndex="6">
                                                                        <Styles CssFilePath="~/App_Themes/office2003Blue/GridView/grid.css" AlternatingRow-Enabled="True"
                                                                            CssPostfix="Office2003_Blue">
                                                                            <Header ImageSpacing="5px" SortingImageSpacing="5px">
                                                                            </Header>
                                                                            <LoadingPanel ImageSpacing="10px">
                                                                            </LoadingPanel>
                                                                            <PagerBottomPanel CssClass="PageFooter">
                                                                            </PagerBottomPanel>
                                                                            <PagerTopPanel CssClass="PageFooter">
                                                                            </PagerTopPanel>
                                                                        </Styles>
                                                                        <SettingsPager PrevPageButton-Image-Url="../App_Themes/office2003Blue/GridView/pPrev.gif"
                                                                            PrevPageButton-Image-UrlDisabled="../App_Themes/office2003Blue/GridView/pPrevDisabled.gif"
                                                                            NextPageButton-Image-UrlDisabled="../App_Themes/office2003Blue/GridView/pNextDisabled.gif"
                                                                            NextPageButton-Image-Url="../App_Themes/office2003Blue/GridView/pNext.gif" AlwaysShowPager="true">
                                                                        </SettingsPager>
                                                                        <Columns>
                                                                            <dxw:GridViewDataColumn FieldName="CustomerID" Caption="CustomerID" VisibleIndex="0" Visible="false">
                                                                            </dxw:GridViewDataColumn>
                                                                            <dxw:GridViewDataColumn FieldName="DeviceID" Caption="DeviceID" VisibleIndex="0" Visible="false">
                                                                            </dxw:GridViewDataColumn>
                                                                            <dxw:GridViewDataColumn FieldName="EquipmentID" Caption="EquipmentID" VisibleIndex="0" Visible="false">
                                                                            </dxw:GridViewDataColumn>
                                                                            <dxw:GridViewDataColumn FieldName="ItemsID" Caption="ItemsID" VisibleIndex="0" Visible="false">
                                                                            </dxw:GridViewDataColumn>
                                                                            <dxw:GridViewDataColumn FieldName="CustomerName" Caption="CustomerName" VisibleIndex="2"
                                                                                Width="20%" Visible="false">
                                                                                <HeaderCaptionTemplate>
                                                                                    <asp:Label ID="lblCustomerName" runat="server" Text="Customer Name"></asp:Label>
                                                                                </HeaderCaptionTemplate>
                                                                                <Settings AllowAutoFilter="False" />
                                                                            </dxw:GridViewDataColumn>
                                                                            <dxw:GridViewDataColumn FieldName="DeviceName" Caption="Device Name" VisibleIndex="3" Width="18%">
                                                                                <HeaderCaptionTemplate>
                                                                                    <asp:Label ID="lblDeviceName" runat="server" Text="Device Name"></asp:Label>
                                                                                </HeaderCaptionTemplate>
                                                                                <Settings AllowAutoFilter="False" />
                                                                            </dxw:GridViewDataColumn>
                                                                            <dxw:GridViewDataColumn FieldName="EquipmentName" Caption="Equipment Name" VisibleIndex="4"
                                                                                Width="18%">
                                                                                <HeaderCaptionTemplate>
                                                                                    <asp:Label ID="lblEquipmentName" runat="server" Text="Equipment Name"></asp:Label>
                                                                                </HeaderCaptionTemplate>
                                                                                <Settings AllowAutoFilter="False" />
                                                                            </dxw:GridViewDataColumn>
                                                                            <dxw:GridViewDataColumn FieldName="ItemNames" Caption="Item Name(s)" VisibleIndex="4"
                                                                                Width="30%">
                                                                                <HeaderCaptionTemplate>
                                                                                    <asp:Label ID="lblItemNames" runat="server" Text="Item Name(s)"></asp:Label>
                                                                                </HeaderCaptionTemplate>
                                                                                <DataItemTemplate>
                                                                                    <div>
                                                                                        <%# Eval("ItemNames") %>
                                                                                    </div>
                                                                                </DataItemTemplate>
                                                                                <Settings AllowAutoFilter="False" />
                                                                            </dxw:GridViewDataColumn>
                                                                            <dxw:GridViewDataColumn VisibleIndex="5" Width="5%" Name="Delete">
                                                                                <DataItemTemplate>
                                                                                    <asp:LinkButton ID="btnGriddelete" runat="server" CssClass="Grid-btn-fa-trash-o" CommandArgument='<%# Eval("CustomerID").ToString() +","+ Eval("DeviceID").ToString() +","+ Eval("EquipmentID").ToString() %>' OnClick="btnGriddelete_Click"></asp:LinkButton>
                                                                                    <%--<img runat="server" id="imgItem" src='<%# "data:image/png;base64," +  Eval("ItemImage") %>' width="100" height="100" />--%>
                                                                                </DataItemTemplate>
                                                                                <Settings AllowAutoFilter="False" />
                                                                            </dxw:GridViewDataColumn>
                                                                        </Columns>
                                                                        <Settings ShowVerticalScrollBar="true" VerticalScrollableHeight="565" />
                                                                        <Settings ShowFilterRow="true" ShowFilterRowMenu="True" />
                                                                        <SettingsText EmptyDataRow=" No item(s) found" />
                                                                    </dxw:ASPxGridView>
                                                                </div>
                                                            </div>
                                                            <div class="col-ks-16" align="right" style="padding-top: 10px;">
                                                                <asp:LinkButton ID="btnSendMail" runat="server" CssClass="btn-fa-send btn btn-primary" TabIndex="7" OnClick="btnSendMail_Click" Text="&nbsp;&nbsp;Send Request" OnClientClick="return ValidateSpeareRequest();">
                                                                </asp:LinkButton>
                                                                <asp:LinkButton ID="btnCancel" runat="server" CssClass="btn btn-primary btn-fa-ban" OnClick="btnCancel_Click"
                                                                    CausesValidation="false" TabIndex="8" OnClientClick="ShowPopUp();" Text="&nbsp;&nbsp;Cancel">
                                                                </asp:LinkButton>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </asp:Panel>
                    <div class="clear clearfix"></div>
                    <asp:Panel ID="pnlSparesList" runat="server">
                        <div class="vlive-filter">
                            <div class="container-fluid">
                                <div class="vlive-centrifugal-fan maintenance-plan">
                                    <div class="col-ks-16 vlive-header_VXL">
                                        <div class="col-ks-13">
                                            <asp:Label ID="lblSpareRqst" runat="server" Text="Spares Request" CssClass="pnlhearder"></asp:Label>
                                        </div>
                                        <div class="col-ks-1">
                                            <dxw:ASPxComboBox ID="ASPxCboExport" runat="server" ValueType="System.String" CssClass="form-control exportddl"
                                                ShowImageInEditBox="false" ItemImage-Height="12px" ClientInstanceName="ASPxCboExport" SelectedIndex="0"
                                                CssFilePath="~/App_Themes/Office2003Blue/Editors/styles.css" CssPostfix="Office2003_Blue"
                                                EnableTheming="true" Theme="Office2003Blue">
                                                <Items>
                                                    <dxw:ListEditItem ImageUrl="../images/icn-pdf.jpg" Text="pdf" Value="pdf" />
                                                    <dxw:ListEditItem ImageUrl="../images/icn-excel.jpg" Text="xls" Value="xls" />
                                                    <dxw:ListEditItem ImageUrl="../images/icn-excel-xlsx.png" Text="xlsx" Value="xlsx" />
                                                    <dxw:ListEditItem ImageUrl="../images/icn-word.jpg" Text="rtf" Value="rtf" />
                                                </Items>
                                            </dxw:ASPxComboBox>
                                        </div>
                                        <div class="col-ks-2">
                                            <asp:ImageButton ID="btnExport1" runat="server" ImageUrl="~/images/btn-export.jpg"
                                                OnClick="btnExport_Click" Visible="false" />
                                            <asp:LinkButton ID="btnExport" runat="server" CssClass="fa-file-excel-o btn btn-primary" Text="&nbsp;&nbsp;Export" OnClick="btnExport_Click">
                                            </asp:LinkButton>
                                        </div>
                                    </div>
                                    <div class="row ftop">
                                        <div class="col-md-12">
                                            <dxw:ASPxGridView ID="gvSpares" runat="server" Width="100%" EnableViewState="true" KeyFieldName="RequestID"
                                                EnableTheming="true" Theme="Office2003Blue" OnHtmlRowCreated="gvSpares_HtmlRowCreated" OnDataBinding="gvSpares_DataBinding">
                                                <Styles CssFilePath="~/App_Themes/Office2003Blue/GridView/grid.css" AlternatingRow-Enabled="True"
                                                    CssPostfix="Office2003_Blue">
                                                    <Header ImageSpacing="5px" SortingImageSpacing="5px">
                                                    </Header>
                                                    <LoadingPanel ImageSpacing="10px">
                                                    </LoadingPanel>
                                                    <PagerBottomPanel CssClass="PageFooter">
                                                    </PagerBottomPanel>
                                                    <PagerTopPanel CssClass="PageFooter">
                                                    </PagerTopPanel>
                                                </Styles>
                                                <SettingsPager PageSize="15" PrevPageButton-Image-Url="../App_Themes/Office2003Blue/GridView/pPrev.gif"
                                                    PrevPageButton-Image-UrlDisabled="../App_Themes/Office2003Blue/GridView/pPrevDisabled.gif"
                                                    NextPageButton-Image-UrlDisabled="../App_Themes/Office2003Blue/GridView/pNextDisabled.gif"
                                                    NextPageButton-Image-Url="../App_Themes/Office2003Blue/GridView/pNext.gif" AlwaysShowPager="true">
                                                </SettingsPager>
                                                <Columns>
                                                    <dxw:GridViewDataColumn FieldName="RequestID" Caption="RequestID" VisibleIndex="0" Visible="false">
                                                    </dxw:GridViewDataColumn>

                                                    <%--<dxw:GridViewDataColumn FieldName="DisplayName" Caption="Spare Request By" VisibleIndex="0"
                                                        Width="8%" HeaderStyle-HorizontalAlign="Center" CellStyle-HorizontalAlign="Left">
                                                        <HeaderCaptionTemplate>
                                                            <span class="label">
                                                                <asp:Label ID="lblDisplayName" runat="server" Text="Spare Request By"></asp:Label></span>
                                                        </HeaderCaptionTemplate>
                                                        <Settings AllowAutoFilter="True" />
                                                    </dxw:GridViewDataColumn>--%>
                                                    <%--<dxw:GridViewDataColumn FieldName="BoxId" Caption="Device ID" VisibleIndex="1"
                                                        Width="6%">
                                                        <HeaderCaptionTemplate>
                                                            <span class="label">
                                                                <asp:Label ID="lblBoxId" runat="server" Text="Device ID"></asp:Label></span>
                                                        </HeaderCaptionTemplate>
                                                    </dxw:GridViewDataColumn>--%>
                                                    <%--<dxw:GridViewDataColumn FieldName="DeviceName" Caption="Device Name" VisibleIndex="1"
                                                        Width="6%">
                                                        <HeaderCaptionTemplate>
                                                            <span class="label">
                                                                <asp:Label ID="lblDeviceName" runat="server" Text="Device Name"></asp:Label></span>
                                                        </HeaderCaptionTemplate>
                                                    </dxw:GridViewDataColumn>--%>
                                                    <%--<dxw:GridViewDataColumn FieldName="EquipmentName" Caption="Equipment Name" VisibleIndex="2"
                                                        CellStyle-Wrap="True" Width="8%" CellStyle-HorizontalAlign="Left">
                                                        <HeaderCaptionTemplate>
                                                            <span class="label">
                                                                <asp:Label ID="lblEquipmentName" runat="server" Text="Equipment Name"></asp:Label></span>
                                                        </HeaderCaptionTemplate>
                                                    </dxw:GridViewDataColumn>--%>
                                                    <dxw:GridViewDataColumn FieldName="RequestDate" Caption="Request Date" VisibleIndex="1"
                                                        CellStyle-Wrap="True" Width="8%" HeaderStyle-HorizontalAlign="Center" CellStyle-HorizontalAlign="Left">
                                                        <HeaderCaptionTemplate>
                                                            <span class="label">
                                                                <asp:Label ID="lblRequestDate" runat="server" Text="Request Date"></asp:Label></span>
                                                        </HeaderCaptionTemplate>
                                                        <Settings AllowAutoFilter="True" AllowSort="True" ShowFilterRowMenu="True" />
                                                    </dxw:GridViewDataColumn>
                                                    <dxw:GridViewDataColumn FieldName="CustomerName" Caption="Customer Name" VisibleIndex="2"
                                                        Width="8%" HeaderStyle-HorizontalAlign="Center" CellStyle-HorizontalAlign="Left">
                                                        <HeaderCaptionTemplate>
                                                            <span class="label">
                                                                <asp:Label ID="lblDisplayName" runat="server" Text="Customer Name"></asp:Label></span>
                                                        </HeaderCaptionTemplate>
                                                        <Settings AllowAutoFilter="True" />
                                                    </dxw:GridViewDataColumn>
                                                    <dxw:GridViewDataColumn FieldName="ItemList" Caption="Item List" VisibleIndex="3"
                                                        Width="20%" HeaderStyle-HorizontalAlign="Center" CellStyle-HorizontalAlign="Left" CellStyle-Wrap="True">
                                                        <HeaderCaptionTemplate>
                                                            <span class="label">
                                                                <asp:Label ID="lblItemList" runat="server" Text="Item List"></asp:Label></span>
                                                        </HeaderCaptionTemplate>
                                                        <DataItemTemplate>
                                                            <%--<label runat="server"><%# Eval("ItemList") %></label>--%>
                                                            <asp:Label runat="server" ID="itedet" Text='<%# Eval("ItemList").ToString().Replace("~","<br>") %>'></asp:Label>
                                                        </DataItemTemplate>
                                                        <Settings AllowAutoFilter="False" />
                                                    </dxw:GridViewDataColumn>

                                                    <dxw:GridViewDataColumn FieldName="ItemDetails" Caption="Item List" VisibleIndex="3" Width="20%" HeaderStyle-HorizontalAlign="Center" CellStyle-HorizontalAlign="Left" CellStyle-Wrap="True" Visible="false">
                                                        <HeaderCaptionTemplate>
                                                            <span class="label">
                                                                <asp:Label ID="lblItemList" runat="server" Text="Item List"></asp:Label></span>
                                                        </HeaderCaptionTemplate>
                                                        <DataItemTemplate>
                                                            <div>
                                                                <%# Eval("ItemDetails") %>
                                                            </div>
                                                        </DataItemTemplate>
                                                    </dxw:GridViewDataColumn>


                                                    <dxw:GridViewDataTextColumn Caption="View" Width="3%" Name="View" VisibleIndex="6"
                                                        CellStyle-HorizontalAlign="Center">
                                                        <HeaderTemplate>
                                                        </HeaderTemplate>
                                                        <DataItemTemplate>
                                                            <asp:LinkButton ID="ibView" runat="server" OnClick="ibView_Click" CommandArgument='<%# Eval("RequestID") %>'
                                                                Style="text-decoration: none;" OnClientClick="ShowPopUp();" CssClass="Grid-btn-fa-binoculars"></asp:LinkButton>
                                                        </DataItemTemplate>
                                                    </dxw:GridViewDataTextColumn>
                                                </Columns>
                                                <Settings ShowVerticalScrollBar="true" VerticalScrollableHeight="370" />
                                                <Settings ShowFilterRow="true" ShowFilterRowMenu="True" />
                                                <SettingsText EmptyDataRow="No Items details found" />
                                                <SettingsBehavior AllowFocusedRow="false" />
                                            </dxw:ASPxGridView>
                                            <dxw:ASPxGridViewExporter ID="ASPxGridViewExporter1" runat="server" GridViewID="gvSpares"
                                                ReportHeader="{\rtf1\ansi\ansicpg1252\deff0\deflang1033{\fonttbl{\f0\fnil\fcharset0 Times New Roman;}
                                                    {\f1\fnil\fcharset0 Arial;}}\viewkind4\uc1\pard\f0\fs20\b\f1\fs28 Item Details\par\par\par}"
                                                DetailHorizontalOffset="1" DetailVerticalOffset="1" MaxColumnWidth="120" OnRenderBrick="ASPxGridViewExporter1_RenderBrick">
                                                <Styles>
                                                    <Default VerticalAlign="Middle">
                                                    </Default>
                                                    <Header BackColor="#D1D1D1" Font-Bold="True" Font-Names="Arial" Font-Size="10pt"
                                                        ForeColor="Black" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="false">
                                                    </Header>
                                                    <Cell VerticalAlign="Middle" Wrap="True" Font-Size="8pt" Font-Names="Arial" HorizontalAlign="Left"
                                                        ForeColor="Black">
                                                    </Cell>
                                                </Styles>
                                                <PageHeader Center="Spares Request" VerticalAlignment="Far">
                                                    <Font Bold="True" Names="Arial" Size="10pt" Underline="True"></Font>
                                                </PageHeader>
                                                <PageFooter Right="[Page # of Pages #]">
                                                </PageFooter>
                                            </dxw:ASPxGridViewExporter>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </asp:Panel>
                    <cc1:ModalPopupExtender ID="mpeProgressIndicator" runat="server" PopupControlID="pnlProgress"
                        TargetControlID="Button1" BackgroundCssClass="modalBackground">
                    </cc1:ModalPopupExtender>
                    <asp:Button ID="Button1" Style="display: none;" runat="server" />
                    <asp:Panel ID="pnlProgress" runat="server" CssClass="processMessage" Style="z-index: 1000;">
                        <center>
                    <br />
                    <img id="imgLoad" runat="server" alt="Please Wait ..." src="../images/47.gif" /><br />
                    <br />
                    <asp:Label ID="lbl_msg12" Text="Processing... Please Wait..." runat="server" CssClass="specialdisplay"></asp:Label>
                    <br />
                    <br />
                </center>
                    </asp:Panel>
                </ContentTemplate>
                <Triggers>
                    <asp:PostBackTrigger ControlID="btnExport" />
                </Triggers>
            </asp:UpdatePanel>

            <script>
                $(document).ready(function () {
                    var countryVal = "0";
                    $("#ddlCustomerID").change(function () {
                        var newVal = $(this).val();
                        if (countryVal != "0") {
                            if (document.getElementById("hdnAddItem").value == "1") {
                                if (!confirm("You have selected a different customer. Selections done to the previous customer will be cleared.Are you sure you want to change the customer?")) {
                                    $(this).val(countryVal);
                                    return;
                                }
                            }
                        }
                        countryVal = newVal;
                    });
                });
                var countryVal = "0";
                var prm2 = Sys.WebForms.PageRequestManager.getInstance();
                prm2.add_endRequest(function (s, e) {
                    $("#ddlCustomerID").change(function () {
                        var newVal = $(this).val();
                        if (countryVal != "0") {
                            if (document.getElementById("hdnAddItem").value == "1") {
                                if (!confirm("You have selected a different customer. Selections done to the previous customer will be cleared.Are you sure you want to change the customer?")) {
                                    $(this).val(countryVal);
                                    return;
                                }
                            }
                        }
                        countryVal = newVal;
                    });
                });
            </script>

            <%--Zoom--%>
            <script>
                function imageZoom(imgID, resultID) {
                    var img, lens, result, cx, cy;
                    img = document.getElementById(imgID);
                    result = document.getElementById(resultID);
                    /* Create lens: */
                    lens = document.createElement("DIV");
                    lens.setAttribute("class", "img-zoom-lens");
                    /* Insert lens: */
                    img.parentElement.insertBefore(lens, img);
                    /* Calculate the ratio between result DIV and lens: */
                    cx = result.offsetWidth / lens.offsetWidth;
                    cy = result.offsetHeight / lens.offsetHeight;
                    /* Set background properties for the result DIV */
                    result.style.backgroundImage = "url('" + img.src + "')";
                    result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
                    /* Execute a function when someone moves the cursor over the image, or the lens: */
                    lens.addEventListener("mousemove", moveLens);
                    img.addEventListener("mousemove", moveLens);
                    /* And also for touch screens: */
                    lens.addEventListener("touchmove", moveLens);
                    img.addEventListener("touchmove", moveLens);
                    function moveLens(e) {
                        var pos, x, y;
                        /* Prevent any other actions that may occur when moving over the image */
                        e.preventDefault();
                        /* Get the cursor's x and y positions: */
                        pos = getCursorPos(e);
                        /* Calculate the position of the lens: */
                        x = pos.x - (lens.offsetWidth / 2);
                        y = pos.y - (lens.offsetHeight / 2);
                        /* Prevent the lens from being positioned outside the image: */
                        if (x > img.width - lens.offsetWidth) { x = img.width - lens.offsetWidth; }
                        if (x < 0) { x = 0; }
                        if (y > img.height - lens.offsetHeight) { y = img.height - lens.offsetHeight; }
                        if (y < 0) { y = 0; }
                        /* Set the position of the lens: */
                        lens.style.left = x + "px";
                        lens.style.top = y + "px";
                        /* Display what the lens "sees": */
                        result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
                    }
                    function getCursorPos(e) {
                        var a, x = 0, y = 0;
                        e = e || window.event;
                        /* Get the x and y positions of the image: */
                        a = img.getBoundingClientRect();
                        /* Calculate the cursor's x and y coordinates, relative to the image: */
                        x = e.pageX - a.left;
                        y = e.pageY - a.top;
                        /* Consider any page scrolling: */
                        x = x - window.pageXOffset;
                        y = y - window.pageYOffset;
                        return { x: x, y: y };
                    }
                }
            </script>
            <style>
                * {
                    box-sizing: border-box;
                }

                .img-zoom-container {
                    position: relative;
                }

                .img-zoom-lens {
                    position: absolute;
                    /*border: 1px solid #d4d4d4;*/
                    /*set the size of the lens:*/
                    width: 40px;
                    height: 40px;
                }

                .img-zoom-result {
                    border: 1px solid #d4d4d4;
                    /*set the size of the result div:*/
                    width: 400px;
                    height: 400px;
                    position: absolute;
                }
            </style>
        </form>
    </div>
    <uc2:Footer ID="ucFooter" runat="server" />
</body>
</html>
