<%@ Page Title="Dashboard Page" Language="C#" MasterPageFile="~/SunMaster.Master"
    AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" Inherits="SUNWEB.Dashboard" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" TagPrefix="asp" Namespace="AjaxControlToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <%--<meta http-equiv="refresh" content="30">--%>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

       <script type="text/javascript">

           $(document).ready(function () {

               var ChkValue = localStorage.getItem("Initialbranch");
               console.log("A", ChkValue);

           });

       </script>
    <script type="text/javascript" language="JavaScript">
        function myJS(myVar) {
            window.alert(myVar);
        }
 
    </script>
    

  

    <style type="text/css">
        
        .Lablex
            {
             font-size:17px;  
             font-weight: bold;  
            }
         .Labley
            {
             font-size:15px;  
             font-weight: bold;  
            }
         .LableTime
            {
             font-size:9px;  
             font-weight: bold;  
            }
        @media only screen and (max-width: 600px)
        {
            table, th, td
            {
                font-size: 12px;
                font-weight: bold;
                
            }
            .alnright
            {
                text-align: right;
            }
            .Lablex
            {
             font-size:14px;  
             font-weight: bold;  
            }
             .Labley
            {
             font-size:13px;  
             font-weight: bold;  
            }
            
            .LableTime
            {
             font-size:9px;  
             font-weight: bold; 
             width:100%; 
            }
        
        
        }
    </style>
    <script language="javascript" type="text/javascript">
        function checkNumber(evt) {
            evt = (evt) ? evt : window.event
            var charCode = (evt.which) ? evt.which : evt.keyCode
            if (charCode > 31 && (charCode < 48 || charCode > 57)) {
                status = "This field accepts numbers only."
                return false
            }
            status = "";
            return true
        }

        function showProgress() {
            var updateProgress = $get("<%= UpdateProgress.ClientID %>");
            updateProgress.style.display = "block";
        }

        function validate() {

            if (document.getElementById("<%=txtStartDt.ClientID %>").value == "") {
                alert("Enter Start Date");
                document.getElementById("<%=txtStartDt.ClientID %>").focus();
                return false;
            }

            if (document.getElementById("<%=txtEndDt.ClientID %>").value == "") {
                alert("Enter  End Date ");
                document.getElementById("<%=txtEndDt.ClientID %>").focus();
                return false;
            }
        }
     </script>
    <style type="text/css">
        .drawVisualizationx
        {
            width: inherit;
            height: inherit;
        }
    </style>
    <style type="text/css">
        .modal
        {
            position: fixed;
            top: 0;
            left: 0;
            background-color: black;
            z-index: 99;
            opacity: 0.8;
            filter: alpha(opacity=80);
            -moz-opacity: 0.8;
            min-height: 100%;
            width: 100%;
        }
        .loading
        {
            font-family: Arial;
            font-size: 10pt;
            border: 5px solid #67CFF5;
            width: 200px;
            height: 100px;
            display: none;
            position: fixed;
            background-color: White;
            z-index: 999;
        }
    </style>
    <style type="text/css">
    @media only screen and (max-width: 600px)
     {
      div 
       {
       text-align:left;        
       }
       .Labels{font-size:10px; }
               
        .overlay
            {
            position: relative;
            z-index: 700;
            height: 100%;
            width: 100%;   
            top: 0;
        
            
            background-color: Black;
            filter: alpha(opacity=60);
            opacity: 0.6;
            -moz-opacity: 0.8;
            }
 
       
  </style>
        <style type="text/css">
        .overlay
        {
            position: fixed;
            top: 0px;
            left: 0px;
            z-index: 0;
            height: 100%;
            width: 100%;
            top: 0;
            background-color: White;
            filter: alpha(opacity=60);
            opacity: 0.9;
            -moz-opacity:1;
        }
        
        .LoadingDivCss
        {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
        }
        
        .LoadingImgCss
        {
            height: 400px;
            width: 400px;
        }
    </style>
        <script type="text/javascript">
            function showProgress() {
                var updateProgress = $get("<%= UpdateProgress.ClientID %>");
                updateProgress.style.display = "block";
            }
    
    </script>
  

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }
        $('form').live("btnGetReports", function () {
            ShowProgress();
        });
    </script>
    <%--new added funcation for chart : Resize--%>
    <script type="text/javascript">
        function resizeChart() {
            chart.draw(data, options);
        }
        if (document.addEventListener) {
            window.addEventListener('resize', resizeChart);
        }
        else if (document.attachEvent) {
            window.attachEvent('onresize', resizeChart);
        }
        else {
            window.resize = resizeChart;
        }

    </script>
    <%--End --%>




   




</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">
        <ContentTemplate>
            <caption>
                <div class="section-block">
                    <h7 class="section-title">
                        RETAIL DASHBOARD
                    </h7>
                </div>
                <table style="margin-left: 1%; width: 98%;">
                    <tr>
                        <%-- <td style="font-size: large; width: 100%; font-family: 'Open Sans', sans-serif; font-weight: bolder;">
                            RETAIL DASHBOARD
                        </td>--%>
                        <td align="right" style="font-family: 'Open Sans',Sans-Serif; font-size: small;">
                            <asp:Label ID="lblBranchAliasName" ForeColor="Blue" runat="server"></asp:Label><asp:DropDownList
                                ID="cmbBranches" CssClass="custom-select" Width="200px" runat="server" Height="40px">
                            </asp:DropDownList>
                        </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 
                                        </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
                                    </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>
                                </div>
                                  <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                    <label for="validationCustom03">
                                    </label>
                                    </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 showProgress() " />
                                </div>


                                    <%--<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                        <table style="margin-left: 1%; width: 250px; height: 2px;">
                                            <tr>
                                                <td>
                                                    <asp:TextBox ID="txtStartDt" runat="server" class="form-control form-control-lg"
                                                        Width="100%" Font-Size="Small" Height="40px"></asp:TextBox>
                                                    <asp:CalendarExtender ID="calFirstDueDate" Format="yyyy-MM-dd" runat="server" TargetControlID="txtStartDt"
                                                        PopupPosition="BottomLeft" FirstDayOfWeek="Sunday"></asp:CalendarExtender>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtEndDt" runat="server" class="form-control form-control-lg" Width="100%"
                                                        Font-Size="Small" Height="40px"></asp:TextBox>
                                                    <asp:CalendarExtender ID="CalendarExtender1" Format="yyyy-MM-dd" runat="server" TargetControlID="txtEndDt"
                                                        PopupPosition="BottomLeft" FirstDayOfWeek="Sunday"></asp:CalendarExtender>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <asp:Button ID="btnGetReports" runat="server" Text="Apply" Class="btn btn-primary"
                                                        OnClick="btnGetReports_Click" OnClientClick="return showProgress() " />
                                                </td>
                                                <td align="left" height="40px">
                                                </td>
                                            </tr>
                                        </table>
                                    </div>--%>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br />
                <div id="chart_div">
                </div>
                <%--<asp:Literal ID="FCLiteral2" runat="server" Visible="false"></asp:Literal>   This chart is No longer used --%>
                <asp:Literal ID="lt" runat="server"></asp:Literal> 
                <br />
                <div>
                    <asp:Label ID="lblMsgTotalSelection" runat="server"></asp:Label>
                    <table class="table" width="150%" border="0">
                        <thead class="bg-light">
                            <tr>
                                <td>
                                    <asp:DataList ID="dtDashboardList" BorderColor="White" Width="96%" runat="server"
                                        RepeatColumns="1" CellPadding="0" CellSpacing="0" ShowFooter="False" ShowHeader="False">
                                        <HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                                            Font-Underline="False" Wrap="False" BackColor="#FFCC66" Font-Names="Calibri" />
                                        <ItemStyle ForeColor="Black" />
                                        <ItemTemplate>
                                            <%--        <div id="pricePlans">
                                                                        <ul id="plans">
                                                                            <li class="plan">
                                                                                <ul class="planContainer">
                                                                                    <li>--%>
                                                <table width="100%" border="0">
                                                    <tr bgcolor="white">
                                                        <td style="width: 50%">
                                                            <asp:Label ID="Label5" runat="server" Font-Bold="true" ForeColor="Black" CssClass="Labley"
                                                                Text='<%# Bind("cd_BranchName") %>'></asp:Label>
                                                                <br />
                                                                <small class="LableTime"><asp:Label ID="Label1" runat="server" Font-Bold="true" ForeColor="Black"
                                                                Text='<%#Bind("LastUpdatedTM","{0:d/M/yyyy hh:mm:ss tt}")  %>'></asp:Label>
                                                                </small>
                                                                

                                                        </td>
                                                        <td class="alnright">
                                                            <%-- <asp:Button ID="btnDetails" runat="server" class="btn btn-primary" Text="Details" PostBackUrl='<%# "SummaryReport.aspx?QBranchNam=" + Eval("Branch") %>'  />--%>
                                                            <a href='SummaryReport.aspx?QBranchNam=<%# Eval("Branch") %>' style="text-decoration: underline;
                                                                color: Black;">Details</a>
                                                        </td>
                                                    </tr>
                                                    <tr bgcolor="white">
                                                        <td>
                                                            Daily :
                                                            <asp:Label ID="Label2" Font-Bold="true" CssClass="Lablex" runat="server" Text='<%#string.Format("{0:n2}" ,Eval("TotalCurrentSale","{0:$#,##0.00}")) %>'></asp:Label>
                                                        </td>
                                                        <td>
                                                            Monthly :
                                                            <asp:Label ID="Label3" Font-Bold="true" runat="server"  CssClass="Lablex" Text='<%#string.Format("{0:n2}", Eval("TotalMonthlySale","{0:$#,##0.00}")) %>'></asp:Label>
                                                        </td>
                                                    </tr>
                                                </table>
                                            <%--</li>
                                                </ul>
                                               </li>
                                               </ul>--%>
                                        </ItemTemplate>
                                    </asp:DataList>
                                </td>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div>
               <br />
        </ContentTemplate>
        <Triggers>
            <asp:PostBackTrigger ControlID="btnGetReports" />
        </Triggers>
    </asp:UpdatePanel>
   <%-- <asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="updatepanel1">
        <ProgressTemplate>
            <div class="overlay">
                <div style="z-index: 1000; margin-left: 350px; margin-top: 300px; opacity: 1; -moz-opacity: 1;">
                    <img alt="" src="IMG/MarriedMarvelousHawaiianmonkseal-small.gif" width="90px" height="75px" />
                </div>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>--%>

     <asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="updatepanel1">
        <ProgressTemplate>
            <div class="overlay">
                <%--<div style="z-index: 1000; margin-left: 450px; margin-top: 0; opacity: 1; -moz-opacity: 1;">--%>
                <div class="LoadingDivCss">
                    <img alt="" src="IMG/Spinner.gif" class="LoadingImgCss" />
                </div>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>



</asp:Content>
