<%@ page language="C#" masterpagefile="~/Pages/Common/MasterPages/MainMasterPage_new.master" autoeventwireup="true" inherits="Pages_Components_Alert_AlertSummaryDashboard, App_Web_5ci25cp3" enableEventValidation="false" viewStateEncryptionMode="Never" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Src="~/UserControls/GridViewPager/GridViewPager.ascx" TagName="GridViewPager" TagPrefix="uc1" %>
<%@ Register Src="~/UserControls/Common/ScreenGroup/ScreenGroup.ascx" TagName="ScreenGroupControl" TagPrefix="ScreenGroup" %>
<%@ Register Src="~/UserControls/Common/EmployeeSearch/EmployeeSearch.ascx" TagName="EmployeeSearchControl" TagPrefix="hims" %>
<%@ Register Src="~/UserControls/DatePicker/DatePickerControl.ascx" TagName="DatePickerControl"
    TagPrefix="Date" %>
<asp:Content ID="Content1" ContentPlaceHolderID="CP" runat="Server">
       <link href="../../../App_Themes/jquery-ui.css" rel="stylesheet" />
    <link href="../../../App_Themes/newTheme/css/inner-db.css" rel="stylesheet" />
    <script src="../../../App_Themes/newTheme/js/Chart.min.js"></script>
    <script src="../../../App_Themes/newTheme/js/utils.js"></script>
    <asp:UpdatePanel ID="ResonMasterUpdatePanel" runat="server" UpdateMode="Always">
        <ContentTemplate>
            <hims:EmployeeSearchControl ID="EmployeeSearch" Visible="false" runat="server" />
            <div `id="divContentPage" class="divcontentpagemargin">

                <div class="dashBoardLeftCont">
                    <div class="himssuHeader3WireBox">
                        <table>
                            <tr>
                                <td>
                                    <div class="leftUlMenu">
                                        <ScreenGroup:ScreenGroupControl EnableViewState="true" ID="ScreenGroupControl" ScreenGroupId="124"
                                            Visible="true" runat="server" />
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="whiteboxpaddingleft row">
                    <div class="himssuHeader1WireBox card card-box" id="DetailDiv" runat="server" visible="True">
                        <div class="himsBoxHeader card-head">
                            <div class="leftdiv">
                            </div>
                            <div class="himsBoxTitle">
                                <div class="headerText">
                                    <header>
                                        <i class="icon"></i>
                                        <asp:Label ID="ReasonMasterDetailLabel" runat="server" Text="Alert Dashboard "></asp:Label>
                                    </header>
                                </div>
                            </div>
                        </div>
                        <div class="himsBoxContent card-body">
                            <div class="contentHolder">
                               <%--     <div class="row">
                                        <div class="top-btn col-md-12">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Deposit Head</label>
                                                    <select id='drpDeposit' class="form-control custom-select col-12" onchange="DepositHeadFunction()">
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>--%>
                                 <div class=" mlr14 center-block">
                                         <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-1 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-layers"></i>
                                                </div>
                                                <div class="count">
                                                   <h1 id="SMSTotalCountLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">SMS Total Count</h6>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-2  hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class=" icon-chart"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="SMSMonthCountLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">SMS Month Count</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                           <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-3 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-speech"></i>
                                                </div>
                                                <div class="count">
                                                     <h1 id="SMSTodayLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">SMS Today Count</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-4 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="fas fa-credit-card"></i>
                                                </div>
                                                <div class="count">
                                                   <h1 id="CreditSmsLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">Credit SMS</h6>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                 <div class="col-md-6 p-0">
                                       <div class="mlr14">
                                          <div class="himsBoxHeader card-head inner">
                                            <div class="himsBoxTitle">
                                                    <div class="headerText fLeft">
                                                        <header>
                                                            <span>Month Wise SMS/Mail Count</span>
                                                        </header>
                                                    </div>
                                                </div>
                                        </div>
                                        <div class='himsBoxContent'>
                                            <div class='table-responsive'>
                                                <table id='tblGraph' class='table table-striped table-bordered'>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                     </div>
                                 <div class="col-md-6 p-0">
                                      <div class="col-md-12" id="ChartBar" style="height:initial;">
                                            <canvas id="Chart-Bar"></canvas>
                                        </div>
                                     </div>
                                   
                        </div>
                    </div>
                </div>
            </div>            
        </ContentTemplate>
    </asp:UpdatePanel>
   <%-- <script data-main="../../JavaScript/rjs/encrypt/assign-organization-encrypt" src="../../JavaScript/rjs/require.js"></script>--%>
      <script data-main='<%=ResolveUrl("~/JavaScript/rjs/assign-organization")%>' src='<%=ResolveUrl("~/JavaScript/rjs/require.js")%>'></script>
       <script>
           var DepositId = 0;
           $(document).ready(function () {
               AlertListGet();
           });

           function AlertListGet() {
               $.ajax({
                   type: "POST",
                   url: "AlertSummaryDashboard.aspx/AlertListGet",
                   // data: JSON.stringify({ "DepositId": DepositId }),
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (result) {
                       var obj = (result.d);
                       if (obj != "") {
                           $.each(obj, function (i, item) {
                               document.getElementById("SMSTotalCountLabel").innerHTML = obj[0][0].value;
                               document.getElementById("SMSMonthCountLabel").innerHTML = obj[0][1].value;
                               document.getElementById("SMSTodayLabel").innerHTML = obj[0][2].value;
                           });
                       }

                   },
                   error: function (xhr, status, error) {
                       var err = eval("(" + xhr.responseText + ")");
                       console.log(err.Message);
                   }
               });
               $.ajax({
                   type: "POST",
                   url: "AlertSummaryDashboard.aspx/SMScountGet",
                   // data: JSON.stringify({ "DepositId": DepositId }),
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (result) {
                       var obj = (result.d);
                       if (obj != "") {
                           document.getElementById("CreditSmsLabel").innerHTML = obj;
                       }
                       AlertGraphtGet();
                   },
                   error: function (xhr, status, error) {
                       var err = eval("(" + xhr.responseText + ")");
                       console.log(err.Message);
                   }
               });
           }

           function AlertGraphtGet() {
               $.ajax({
                   type: "POST",
                   url: "AlertSummaryDashboard.aspx/AlertGraphtGet",
                   // data: JSON.stringify({ "AttendanceDate": AttendanceDate, "ClassId": parseInt(ClassId), "DepartmentId": parseInt(DepartmentId) }),
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (result) {
                       var obj = (result.d);
                       var tblGraph = "";

                       if (obj != "") {
                           var columnsIn = obj[0];
                           var newObj = {};
                           tblGraph += "<tr>";
                           for (var key in columnsIn) {
                               tblGraph += "<th>" + columnsIn[key].key + "</th>";
                           }
                           tblGraph += "</tr>";

                           $.each(obj, function (i, item) {

                               tblGraph += "<tr>";
                               for (var key in item) {
                                   if (item[key] !== "null" && item[key] !== undefined && item[key] !== null) {

                                       tblGraph += "<td>" + item[key].value + "</a></td>";
                                   }
                               }
                               tblGraph += "</tr>";
                           });
                       }
                       else { tblGraph += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                       document.getElementById("tblGraph").innerHTML = tblGraph;


                       var chartdata = [];
                       var Month = [];
                       var Series1 = [];
                       var Series2 = [];
                       var Series3 = [];
                       $.each(obj, function (i, item) {
                           Month.push(item[0].value);
                           Series1.push(item[1].value);
                           Series2.push(item[2].value);
                       });
                       var barChartData = {
                           labels: Month,
                           datasets: [{
                               label: 'SMS',
                               backgroundColor: 'rgb(75, 192, 192)',
                               data: Series1
                           }, {
                               label: 'Mail',
                               backgroundColor: 'rgb(54, 162, 235)',
                               data: Series2
                           }]


                       };
                       $('#Chart-Bar').remove();
                       $('#ChartBar').append('<canvas id="Chart-Bar"></canvas>');
                       var ctx = document.getElementById('Chart-Bar').getContext('2d');
                       window.myBar = new Chart(ctx, {
                           type: 'bar',
                           data: barChartData,
                           options: {
                               title: {
                                   display: true,
                                   text: 'SMS  Chart'
                               },
                               tooltips: {
                                   mode: 'index',
                                   intersect: true
                               },
                               responsive: true,
                               legend: {
                                   position: 'top',
                               },
                               scales: {
                                   xAxes: [{
                                       maxBarThickness: 50,
                                       stacked: false,
                                       display: true,
                                       scaleLabel: {
                                           display: false,
                                           labelString: 'Month'
                                       }
                                   }],
                                   yAxes: [{
                                       stacked: false,
                                       display: true,
                                       scaleLabel: {
                                           display: true,
                                           labelString: 'Count'
                                       }
                                   }]
                               }
                           }
                       });


                   },

                   error: function (xhr, status, error) {
                       var err = eval("(" + xhr.responseText + ")");
                       console.log(err.Message);
                   }
               });
           }

    </script>
</asp:Content>
