<%@ Page Title="TopSale" Language="C#" MasterPageFile="~/SunMaster.Master" AutoEventWireup="true"
    CodeBehind="TopSale.aspx.cs" Inherits="SUNWEB.TopSale" %>
<%@ Register Assembly="AjaxControlToolkit" TagPrefix="asp" Namespace="AjaxControlToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <%--<link type="text/css" rel="Stylesheet" href="css/style.css" />--%>
    <%--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>--%>
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script type="text/javascript">
        $("[src*=plus]").live("click", function () {
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
            $(this).attr("src", "IMG/minus.gif");
        });
        $("[src*=minus]").live("click", function () {
            $(this).attr("src", "IMG/plus.gif");
            $(this).closest("tr").next().remove();
        });
    </script>
    <link href="css/Gridstyle.css" rel="Stylesheet" type="text/css" />
    <style type="text/css">
        .style1
        {
            height: 23px;
        }
    </style>
    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart'] });
    </script>
     <script type="text/javascript">
         google.load('visualizationx', '1', { packages: ['corechart'] });
    </script>

   
   
   <script type="text/javascript">
        
        $(document).ready(function () {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: '../TopSale.aspx/GetData',
                data: '{}',
                success:
                    function (response) {
                    drawVisualization(response.d);

                    }

            });
        })

        function drawVisualization(dataValues) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Column Name');
            data.addColumn('number', 'Column Value');

            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
            }

            new google.visualization.PieChart(document.getElementById('visualization')).
                draw(data, { title: "TOP 10 Categories by Quantity" });
        }
        
    </script>
   
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: '../TopSale.aspx/GetData1',
                data: '{}',
                success:
                    function (response) {
                        drawVisualizationx(response.d);
                    }

            });
        })

        function drawVisualizationx(dataValues) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Column Name');
            data.addColumn('number', 'Column Value');

            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
            }

            new google.visualization.PieChart(document.getElementById('visualizationx')).
                draw(data, { title: "TOP 10 Categories by item" });
        } 
         
    </script>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
 
        <asp:UpdatePanel ID="Upanel" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <table style="margin-left: 1%; width: 98%;">
                    <tr>
                        <td style="font-size: large; width: 50%; font-family: 'Open Sans', sans-serif;
                            font-weight: bolder;">
                            <%--<h1  style="margin-left: 1.8%">--%>
                            TOP SALES REPORT
                            <%--</h1>--%>
                        </td>
                                     
                    </tr>
                </table>

                    <div class="row">
                 
                          <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="card">
                                                    
                                <div class="card-body">
                                 
                                
                                 <div class="form-row">
                                            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                                <caption>
                                                    <label for="validationCustom03">
                                                      FROM DT
                                                   </label>
                                                   <asp:TextBox ID="txtFromDt" class="form-control" runat="server" ></asp:TextBox>
                                                     <asp:CalendarExtender ID="calexdFrom" Format="yyyy-MM-dd" runat="server" 
                                                      TargetControlID="txtFromDt" PopupPosition="BottomLeft" FirstDayOfWeek="Sunday">
                                                     </asp:CalendarExtender>
                                                     
                                                </caption>
 
                                                    
                                                
                                            </div>
                                            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                                <label for="validationCustom03"> TO DATE
                                                 </label>   

                                                 <asp:TextBox ID="txtToDt" class="form-control"  runat="server" ></asp:TextBox>
                                                <asp:CalendarExtender ID="calexdTo" Format="yyyy-MM-dd" runat="server" 
                                                 TargetControlID="txtToDt" PopupPosition="BottomLeft" FirstDayOfWeek="Sunday">
                                                 </asp:CalendarExtender>
                                                  
                                            </div>
                                            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                                <label for="validationCustom03">
                                                  <asp:Label ID="lblBranchAliasName"  runat="server" Text="Branch Selector"></asp:Label></label>
                                              <asp:DropDownList ID="cmbBranches" CssClass="custom-select"  runat="server"
                                              AutoPostBack="true" OnSelectedIndexChanged="cmbBranches_SelectedIndexChanged">
                                             </asp:DropDownList>
                                            </div>

                                             <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                                  <asp:Button ID="btnGetReports" runat="server" Text="Apply" Class="btn btn-primary"
                                                       OnClick="btnGetReports_Click" OnClientClick="return CALA() " />                                

                                             
                                             </div>
                                        </div>
                                
                                 </div>
                                 
                                
                                                         
                                </div>
                            </div>
                        </div>

                   <br />


              

             

             <div id="chart_div"></div>

                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="example4" class="table table-striped table-bordered" style="width: 700px">
                                <tr>
                                    <td>
                                        <h5 class="card-header">
                                            TOP 10 Categories by Quantity
                                        </h5>
                                    </td>
                            
                                </tr>
                                <tr>
                                    <td>
                                          <%-- // Palce Here Chart --%>

                                           <div id="visualization" style="width: 900px; height: 500px;" >

                                            
                                    </td>
                                   
                                </tr>

                          

                            </table>
                        </div>
                    </div>
                </div>



                


                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="Table2" class="table table-striped table-bordered" style="width: 700px">
                                <tr>
                                
                                    <td>
                                        <h5 class="card-header">
                                            TOP 10 Item by Quantity
                                        </h5>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                          <%--Place Chart Here--%> 
                                          <div id="visualizationx" style="width: 900px; height: 500px;">
                                        
                                    </td>
                 
                                </tr>

                       

                            </table>
                        </div>
                    </div>
                </div>


                <div class="row">
                       <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="card">
                        <div class="card-header">
                  <h4> <asp:Label ID="lblSearchResult" runat="server">&nbsp;&nbsp;&nbsp; </asp:Label><asp:Label ID="lblMsgTotalSelection" runat="server"></asp:Label>  </h4>
                         
                        
                 
               </div>
              <div class="card-body">
             <div class="table-responsive">
             <table id="Table1" class="table table-striped table-bordered second" style="width:100%">
                            
            <tbody>

            <caption>
            <div align="center">
           <asp:GridView ID="grdTaxAnalysis" runat="server" CellPadding="4"
                                    GridLines="None" AutoGenerateColumns="False" OnSelectedIndexChanged="grdTaxAnalysis_SelectedIndexChanged"
                                    OnRowDataBound="grdTaxAnalysis_RowDataBound" DataKeyNames="barcode" Height="115px"   >
                                 
                                    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                                    <Columns>
                                        <%-- <asp:TemplateField HeaderText="Name"> <ItemTemplate> <asp:Label ID="lblSales"
                runat="server" Text='<%#Eval("Name") %>'></asp:Label> </ItemTemplate> <ControlStyle
                BorderWidth="0px" /> <HeaderStyle BorderWidth="1px" HorizontalAlign="Center" />
                <ItemStyle Width="250px" BorderWidth="1px" /> </asp:TemplateField>--%>
                                        <asp:TemplateField HeaderText="NAME">
                                            <ItemTemplate>
                                                <asp:Label ID="lblSales" runat="server" Text='<%#Eval("InventoryDesc") %>'></asp:Label>
                                            </ItemTemplate>
                                            <ControlStyle BorderWidth="0px" />
                                            <HeaderStyle BorderWidth="1px" HorizontalAlign="Center" />
                                            <ItemStyle Width="250px" BorderWidth="1px" />
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="QTY" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                            <ItemTemplate>
                                                <asp:Label ID="lblSales" runat="server" Text='<%#Eval("QTY") %>'></asp:Label>
                                            </ItemTemplate>
                                         
                                         
                                          
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="PRICE" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right">
                                            <ItemTemplate>
                                                <asp:Label ID="lblSales" runat="server" Text='<%#Eval("TPrice","{0:F2}")%>'></asp:Label>
                
                                            </ItemTemplate>
                                            
                                           
                                          
                                        </asp:TemplateField>
                                    </Columns>
                                    <EditRowStyle BackColor="#999999" />
                                    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                               
                                    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                                    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                                    <SortedAscendingCellStyle BackColor="#E9E7E2" />
                                    <SortedAscendingHeaderStyle BackColor="#506C8C" />
                                    <SortedDescendingCellStyle BackColor="#FFFDF8" />
                                    <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
                                </asp:GridView>
                               </div>
                               </caption>
                               </tbody>
                                 </table>
                                 </div>
                                 </div>
                          </div>
 
                     </div>
                     </div>

     
            </ContentTemplate>

            <Triggers>
            <asp:PostBackTrigger ControlID="btnGetReports" /> 
           </Triggers>
        </asp:UpdatePanel>
    
</asp:Content>
