<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SyncronizationDevice.aspx.cs" Inherits="AutoSyncronization.SyncronizationDevice" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Css/easyTree.css" rel="stylesheet" />
    <link href="Css/ProgressBar-rtl.css" rel="stylesheet" />
    <link href="Css/ProgressBar.css" rel="stylesheet" />
    <link href="bootstrap/Css/autoCompleteNew-rtl.css" rel="stylesheet" />
    <link href="bootstrap/Css/bootstrap-rtl.min.css" rel="stylesheet" />
    <link href="bootstrap/Css/bootstrap.css" rel="stylesheet" />
    <link href="bootstrap/Css/GridView-rtl.css" rel="stylesheet" />
    <link href="bootstrap/Css/GridView.css" rel="stylesheet" />
    <link href="bootstrap/Font-awesome/Css/font-awesome-rtl.css" rel="stylesheet" />
    <link href="dist/css/AdminLTE.min-rtl.css" rel="stylesheet" />
    <link href="plugins/select2/select2.min-rtl.css" rel="stylesheet" />
    <link href="dist/css/fonts.css" rel="stylesheet" />
    <link href="dist/css/custom.css" rel="stylesheet" />
    <link href="dist/css/custom-rtl.css" rel="stylesheet" />



    <script type="text/javascript">

    function Check_Click(objRef) {
        //Get the Row based on checkbox
        var row = objRef.parentNode.parentNode;
        if (objRef.checked) {
            //If checked change color to Aqua
            //   row.style.backgroundColor = "aqua";
        }
        else {
            //If not checked change back to original color
            if (row.rowIndex % 2 == 0) {
                //Alternating Row Color
                //row.style.backgroundColor = "#C2D69B";
            }
            else {
                // row.style.backgroundColor = "white";
            }
        }

        //Get the reference of GridView
        var GridView = row.parentNode;

        //Get all input elements in Gridview
        var inputList = GridView.getElementsByTagName("input");

        for (var i = 0; i < inputList.length; i++) {
            //The First element is the Header Checkbox
            var headerCheckBox = inputList[0];

            //Based on all or none checkboxes
            //are checked check/uncheck Header Checkbox
            var checked = true;
            if (inputList[i].type == "checkbox" && inputList[i] != headerCheckBox) {
                if (!inputList[i].checked) {
                    checked = false;
                    break;
                }
            }
        }
        headerCheckBox.checked = checked;

    }
    function checkAll(objRef) {
        var GridView = objRef.parentNode.parentNode.parentNode;
        var inputList = GridView.getElementsByTagName("input");
        for (var i = 0; i < inputList.length; i++) {
            //Get the Cell To find out ColumnIndex
            var row = inputList[i].parentNode.parentNode;
            if (inputList[i].type == "checkbox" && objRef != inputList[i]) {
                if (objRef.checked) {
                    //If the header checkbox is checked
                    //check all checkboxes
                    //and highlight all rows
                    //row.style.backgroundColor = "aqua";
                    inputList[i].checked = true;
                }
                else {
                    //If the header checkbox is checked
                    //uncheck all checkboxes
                    //and change rowcolor back to original 
                    if (row.rowIndex % 2 == 0) {
                        //Alternating Row Color
                        // row.style.backgroundColor = "#C2D69B";
                    }
                    else {
                        //row.style.backgroundColor = "white";
                    }
                    inputList[i].checked = false;
                }
            }
        }
    }
    function MouseEvents(objRef, evt) {
        var checkbox = objRef.getElementsByTagName("input")[0];
        if (evt.type == "mouseover") {
            // objRef.style.backgroundColor = "orange";
        }
        else {
            if (checkbox.checked) {
                //objRef.style.backgroundColor = "aqua";
            }
            else if (evt.type == "mouseout") {
                if (objRef.rowIndex % 2 == 0) {
                    //Alternating Row Color
                    //objRef.style.backgroundColor = "#C2D69B";
                }
                else {
                    //objRef.style.backgroundColor = "white";
                }

            }
        }
    }
    
 

    </script>
</head>
<body>

    <form id="form1" runat="server">

        <div class="content">
            <div class="row">
                <div class="row bg-blue">
                        <h4 class="text-center">Device Syncronization</h4>
                </div>
                <div class="col-md-12">
                    <div style="overflow: auto; padding-top: 15px;">
                        <div class="col-md-12 padding-left-7">
                            <asp:GridView ID="gvTerminal" Width="100%" Visible="True" runat="server" AllowPaging="True"
                                CssClass="table das-table1" AutoGenerateColumns="False" PageSize="5" OnPageIndexChanging="OnPaging"
                                OnRowDataBound="RowDataBound" DataKeyNames="Terminal_ReaderID" >
                                <Columns>
                                    <asp:TemplateField HeaderStyle-HorizontalAlign="Center">
                                        <HeaderTemplate>
                                            <asp:CheckBox ID="chkAll" runat="server" onclick="checkAll(this);" />
                                        </HeaderTemplate>
                                        <ItemStyle VerticalAlign="Middle" HorizontalAlign="Center" />
                                        <ItemTemplate>
                                            <asp:CheckBox ID="CheckBox1" runat="server" onclick="Check_Click(this)"></asp:CheckBox>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField ItemStyle-Width="150px" DataField="Terminal_ReaderID" HeaderText="CustomerID" />
                                    <asp:TemplateField HeaderText="Device Name">
                                        <ItemTemplate>
                                            <asp:Label ID="lblTerminalName" runat="server" Text='<%# Eval("Terminal_Name") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField ItemStyle-Width="150px" DataField="Terminal_Description" HeaderText="Description" />
                                    <asp:BoundField ItemStyle-Width="150px" DataField="Raw_Data_Format" HeaderText="Data Types" />
                                </Columns>
                                
                                <HeaderStyle CssClass="empheader" />
                                <RowStyle Height="30px" CssClass="table-bg" BorderColor="#C5DFFC" />
                                <PagerStyle Font-Overline="False" HorizontalAlign="Right" CssClass="GridPager" />
                                <PagerSettings FirstPageText="<<" LastPageText=">>" Mode="NumericFirstLast" NextPageText=">"
                                    PreviousPageText="<" />
                                <AlternatingRowStyle BackColor="white" />
                            </asp:GridView>

                        </div>

                    </div>
                </div>
                <div class="row">

                    <div class="col-md-12" style="padding-top: 15px; text-align:right;">
                    <%--    <div class="pull-right-button" style="padding-top: 10px; text-align:right;">--%>
                            <asp:Button ID="btnSelectDevice" runat="server" CssClass="btn save-btn fa-angle-right" Text="Select Device" OnClick="btnSelectDevice_Click" />
                         
                            <asp:Button ID="btn_Clear" runat="server" CssClass="btn save-btn fa-angle-left" Text="Clear" OnClick="btn_Clear_Click" />
                        <%--</div>--%>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="row">
                <div class="row bg-light-blue">
                    <h5 class="text-center">Selected Device</h5>
                </div>
                <div class="col-md-12 ">
                    <div style="padding-top: 15px; ">
                         <div class="col-md-12" style="text-align:center;">
                        <asp:GridView ID="gvSelected" Width="100%" Visible="True" runat="server" AllowPaging="True" CssClass="table das-table1"
                            AutoGenerateColumns="False" PageSize="5" OnPageIndexChanging="OnPaging_Selected" ShowHeaderWhenEmpty="true"
                            DataKeyNames="Terminal_ReaderID">
                            <Columns>
                                <asp:BoundField DataField="Terminal_ReaderID" HeaderText="Device ID" ItemStyle-Width="150">
                                    <ItemStyle Width="150px"></ItemStyle>
                                </asp:BoundField>
                                <asp:TemplateField HeaderText="Device Name">
                                    <ItemTemplate>
                                        <asp:Label ID="lblTerminalName" runat="server" Text='<%# Eval("Terminal_Name") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField ItemStyle-Width="150px" DataField="Terminal_Description" HeaderText="Description" />
                                <asp:BoundField ItemStyle-Width="150px" DataField="Raw_Data_Format" HeaderText="Data Types" />
                                
                            </Columns>
                            <EmptyDataTemplate>No Record Available</EmptyDataTemplate>
                            <HeaderStyle CssClass="empheader" />
                            <RowStyle Height="30px" CssClass="table-bg" BorderColor="#C5DFFC" />
                            <PagerStyle Font-Overline="False" HorizontalAlign="Right" CssClass="GridPager" />
                            <PagerSettings FirstPageText="<<" LastPageText=">>" Mode="NumericFirstLast" NextPageText=">"
                                PreviousPageText="<" />
                            <AlternatingRowStyle BackColor="white" />
                            
                        </asp:GridView>
                        </div>
                    </div>
                
                </div>

            </div>
            <div class="row text-center" style="padding-top:15px;">
               <asp:Button ID="btnSyncDevice" runat="server" CssClass="btn save-btn fa-angle-right" Text="Sync" OnClick="btnSyncDevice_onclick" />
               <asp:Button ID="btnSelectClear" runat="server" CssClass="btn save-btn fa-angle-left" Text ="Cancel" OnClick="btnSelectClear_Click" />
            </div>
        </div>
    </form>
</body>
</html>
