<%@ page language="C#" masterpagefile="~/Pages/Common/MasterPages/MainMasterPage_new.master" autoeventwireup="true" inherits="Pages_FeeManagement_DepositSummaryDashboard, App_Web_hs2f2311" 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="210"
                                            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="fas fa-level-up-alt"></i>
                                        <asp:Label ID="ReasonMasterDetailLabel" runat="server" Text="Deposit 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="row 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="fas fa-piggy-bank"></i>
                                                </div>
                                                <div class="count">
                                                   <h1 id="TotalDepositLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">Total Deposit Amount</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="fas fa-piggy-bank"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TodayDepositLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">Today Deposit Amount</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="fas fa-adjust"></i>
                                                </div>
                                                <div class="count">
                                                     <h1 id="TotalAdjustmentLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">Total Adjustment Amount</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-adjust"></i>
                                                </div>
                                                <div class="count">
                                                   <h1 id="TodayAdjustmentLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">Today Adjustment Amount</h6>
                                                </div>

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

                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-5  hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="fas fa-undo"></i> 
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotalRefundLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">Total Refund Amount</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                           <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-6 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="fas fa-undo"></i> 
                                                </div>
                                                <div class="count">
                                                     <h1 id="TodayRefundLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">Today Refund Amount</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                     
                                     
                                </div>
                                <div class="col-md-6 p-0">
                                      <div class="row mlr14 center-block">
                                           <div class="himsBoxHeader card-head inner" id="Div7" runat="server">
                                            <div class="himsBoxTitle">
                                                    <div class="headerText fLeft">
                                                        <header>
                                                            <span>Deposit PayType List</span>
                                                        </header>
                                                    </div>
                                                </div>
                                               </div>
                                            <div class='himsBoxContent'>
                                            <div class='table-responsive'>
                                                 <table id='tblDepositPayTypeList' class='table table-striped table-bordered'>
                                                </table>
                                            </div>
                                        </div>
                                                  <div class="col-md-12" id="ChartLine">
                                        <canvas id="chart-line"></canvas>
                                    </div>
                                        </div>
                                    </div>
                                <div class="col-md-6 p-0">
                                     <div class="row mlr14 center-block">
                                         <div class="himsBoxHeader card-head inner" id="Div1" runat="server">
                                      <div class="headerText">
                                                        <header>
                                                            <span>Refund PayType List</span>
                                                        </header>
                                                    </div>
                                                </div>
                                            <div class='himsBoxContent'>
                                            <div class='table-responsive'>
                                                 <table id='tblRefundPayTypeList' class='table table-striped table-bordered'>
                                                </table>
                                            </div>
                                        </div>
                                                  <div class="col-md-12" id="ChartBarRefund">
                                        <canvas id="chart-Bar"></canvas>
                                    </div>
                                    </div>
                                    </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 () {
               $.ajax({
                   type: "POST",
                   url: "DepositSummaryDashboard.aspx/DepositDropDownList",
                  // data: JSON.stringify({ "DepartmentId": DepartmentId }),
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (result) {
                       $("#drpDeposit").html(result.d);
                       DepositId = $("#drpDeposit").val();

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

           function DepositPayTypeListGet() {
            $.ajax({
                type: "POST",
                url: "DepositSummaryDashboard.aspx/DepositPayTypeListGet",
                data: JSON.stringify({ "DepositId": DepositId }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var tblDepositPayTypeList = "";
                    var tblRefundPayTypeList = "";
                    if (obj != "") {
                        tblDepositPayTypeList += "<tr><th>PayType</th><th>DepositAdd Count</th></tr>";
                        tblRefundPayTypeList += "<tr><th>PayType</th><th>Refund Count</th></tr>";
                        
                        $.each(obj, function (i, item) {
                            tblDepositPayTypeList += "<tr><td>" + item[0].value + "</td><td>" + item[1].value + "</td></tr>";
                            tblRefundPayTypeList += "<tr><td>" + item[0].value + "</td><td>" + item[2].value + "</td></tr>";
                        });
                    }
                    else { tblDepositPayTypeList += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblDepositPayTypeList").innerHTML = tblDepositPayTypeList;
                    document.getElementById("tblRefundPayTypeList").innerHTML = tblRefundPayTypeList;


                    var PayType = [];
                    var Series1 = [];
                    var Series2 = [];
                    $.each(obj, function (i, item) {
                        PayType.push(item[0].value);
                        Series1.push(item[1].value);
                        Series2.push(item[2].value);
                    });
                    console.log(PayType);
                    console.log(Series1);
                    console.log(Series2);
                    var config = {
                        type: 'bar',
                        data: {
                            labels: PayType,
                            datasets: [{
                                label: 'DepositAdd',
                                backgroundColor: window.chartColors.red,
                                borderColor: window.chartColors.red,
                                data: Series1,
                                fill: false,
                            }]
                        },
                        options: {
                            responsive: true,
                            title: {
                                display: true,
                                text: 'Deposit PayType Graph'
                            },
                            tooltips: {
                                mode: 'index',
                                intersect: false,
                            },
                            hover: {
                                mode: 'nearest',
                                intersect: true
                            },
                            scales: {
                                xAxes: [{
                                    display: true,
                                    barPercentage: 0.5,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'PayType'
                                    }
                                }],
                                yAxes: [{
                                    display: true,
                                    barPercentage: 0.5,
                                    ticks: {
                                        min: 0,
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Count'
                                    }
                                }]
                            }
                        }
                    };
                    $('#chart-line').remove();
                    $('#ChartLine').append('<canvas id="chart-line"></canvas>');
                    var ctx = document.getElementById('chart-line').getContext('2d');
                    window.myLine = new Chart(ctx, config);


                    var config = {
                        type: 'bar',
                        data: {
                            labels: PayType,
                            datasets: [ {
                                label: 'Refund',
                                fill: false,
                                backgroundColor: window.chartColors.blue,
                                borderColor: window.chartColors.blue,
                                data: Series2,
                            }]
                        },
                        options: {
                            responsive: true,
                            title: {
                                display: true,
                                text: 'Refund PayType Graph'
                            },
                            tooltips: {
                                mode: 'index',
                                intersect: false,
                            },
                            hover: {
                                mode: 'nearest',
                                intersect: true
                            },
                            scales: {
                                xAxes: [{
                                    display: true,
                                    barPercentage: 0.5,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'PayType'
                                    }
                                }],
                                yAxes: [{
                                    display: true,
                                    barPercentage: 0.5,
                                    ticks: {
                                        min: 0,
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Count'
                                    }
                                }]
                            }
                        }
                    };
                    $('#chart-Bar').remove();
                    $('#ChartBarRefund').append('<canvas id="chart-Bar"></canvas>');
                    var ctx = document.getElementById('chart-Bar').getContext('2d');
                    window.myLine = new Chart(ctx, config);

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

           function DepositAmountGet() {
               $.ajax({
                   type: "POST",
                   url: "DepositSummaryDashboard.aspx/DepositAmountGet",
                   data: JSON.stringify({ "DepositId": DepositId }),
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (result) {
                       var obj = (result.d);
                       document.getElementById("TotalDepositLabel").innerHTML = obj[0][0].value;
                       document.getElementById("TodayDepositLabel").innerHTML = obj[0][1].value;
                       document.getElementById("TotalAdjustmentLabel").innerHTML = obj[0][2].value;
                       document.getElementById("TodayAdjustmentLabel").innerHTML = obj[0][3].value;
                       document.getElementById("TotalRefundLabel").innerHTML = obj[0][4].value;
                       document.getElementById("TodayRefundLabel").innerHTML = obj[0][5].value;
                   },
                   error: function (xhr, status, error) {
                       var err = eval("(" + xhr.responseText + ")");
                       console.log(err.Message);
                   }
               });
           }
           function DepositHeadFunction() {
               DepositId = $("#drpDeposit").val();
               $("#drpDeposit").val(DepositId);
            DepositPayTypeListGet();
        }
    </script>
</asp:Content>
