<%@ Page Title="Interactive Dashboard" Language="C#" MasterPageFile="~/SunMaster.Master" AutoEventWireup="true"  CodeBehind="InteractiveDashboard.aspx.cs" Inherits="SUNWEB.InteractiveDashboard" %>
<%@ Register Assembly="AjaxControlToolkit" TagPrefix="asp" Namespace="AjaxControlToolkit" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script language="javascript" type="text/javascript">

     

       function abcd() {

           var param1 = $("#<%= txtStartDt.ClientID %>").val();
           var param2 = $("#<%= txtEndDt.ClientID %>").val();

           $.ajax({
               type: "POST",
               async: true,
               url: "InteractiveDashboard.aspx/GetDatesvalues",
               contentType: "application/json; charset=utf-8",
               data: JSON.stringify({ startdate: param1, Enddate: param2 }),    
               dataType: "json",
               success: function (msg) {
                   if (msg.d) {
                       $("#errorDiv").html(msg.d);
                   }
               },
               error: function (req, status, error) {
                   alert("Error try again");
               }
                  

           });
           return false;
        
       }

       function callit(element)
       {           
           //alert(element.id);
           sessionStorage.setItem("CurrentChartSelection", element.id);

       }


     

   </script>
    
  
 







  </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
 <asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">
  <ContentTemplate>
       
 <div class="section-block">
 <h6 class="section-title">
  INTERACTIVE DASHBAORD
 </h6>
 </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-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 DATE
                                                   </label>
                                                   <asp:TextBox ID="txtStartDt"  class="form-control" runat="server"  ></asp:TextBox>
                                                   <asp:CalendarExtender ID="calFirstDueDate"  Format="yyyy-MM-dd" runat="server"  TargetControlID="txtStartDt"  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="txtEndDt" class="form-control" runat="server" ></asp:TextBox>
                                                <asp:CalendarExtender ID="CalendarExtender1" Format="yyyy-MM-dd" runat="server"  TargetControlID="txtEndDt"  PopupPosition="BottomLeft" FirstDayOfWeek="Sunday"></asp:CalendarExtender>                         
                                            <%--this is test --%>
                                        

                                            </div>
                                            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2" style="display:none">
                                                <label for="validationCustom03">
                                                   <asp:Label ID="lblBranchAliasName"  ForeColor="Gray" runat="server" Text="Branch Name"></asp:Label></label>
                                              <asp:DropDownList ID="cmbBranches" CssClass="custom-select"  
                                                runat="server" AutoPostBack="true" 
                                            onselectedindexchanged="cmbBranches_SelectedIndexChanged"></asp:DropDownList>
                                            </div>

                                               
                                              <%-- <input type="submit" id="btnGetReports" class="btn btn-primary"   onclick="abcd()" value ="Submit"/></td>--%>
                                                
                                        </div>

                                   <div class="form-row">
                                    <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"  OnClientClick="abcd()" PostBackUrl="~/InteractiveDashboard.aspx"
                                    CssClass="btn btn-primary" />
                                    <asp:Button ID="btnReset" runat="server"  CssClass="btn btn-primary" Text="Reset Chart" OnClick="btnReset_Click"/>
                                    </div>

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

      

 
   
   <div >
       <h4>&nbsp;<asp:Label ID="lblGreeting" runat="server"></asp:Label></h4>
        
     
  <div class="row">
   <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
   <div class="card">

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

  <br />

  <div class="row">
  <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
 <div class="card">

    <table>
        <tr>
            <td>
                <div id="chart_divbranch" style="width: 900px; height: 500px;"  onclick="callit(this)">   </div>
            </td>
            <td>
                <div id="chart_divQtyWiseCategory" style="width: 700px; height: 500px;"  onclick="callit(this)"></div>
            </td>

        </tr>
    </table>
  </div>
 </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">
           <table>
               <tr>

                 <td>
                 <div id="chartInventoryListByCategory" style="width: 900px; height: 500px;" >   </div>
                 </td>
                 <td>
                 <div id="CommonchartFourthLevel" style="width: 700px; height: 500px;" ></div>
                 </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">
    <table>
        <tr>
            <td>
             <div id="chart_InventoryAmount" style="width: 900px; height: 500px;" onclick="callit(this)"> </div>
             </td>
             <td>
             <div id="chart_InventoryQty" style="width: 700px; height: 500px;" onclick="callit(this)"></div>
             </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">
 <br />
     <div class="card-body">
     <div style="height:350px;overflow-y:scroll">


       <table id="tablex" class="table" style="width: 100%; border-collapse: collapse;" > 
     
        <tr> 
            <th>Branch</th> 
            <th>Barcode</th> 
            <th>Name</th> 
            <th>InventoryDesc</th> 
            <th>CategoryName</th> 
            <th>Amount</th> 
            <th>Qty</th> 
        </tr> 
         
        </table>



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

 

  <%--This is test chart --%>
  <br />
  <div id="chart_divbranchCat"></div>
 



    
         
  </ContentTemplate>
  </asp:UpdatePanel>

 <style type="text/css">

     th {
  background: white;
  position: sticky;
  top: 0;
}
 </style>


 <!--Headers included in  bottom -->
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script src="Charts/main.js" type="text/javascript"></script>


<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css?v=1.1" rel="stylesheet" />
 <!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Optional Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />


</asp:Content>
