<%@ page language="C#" masterpagefile="~/Pages/Common/MasterPages/MainMasterPage_new.master" autoeventwireup="true" inherits="Pages_FeeManagement_DepositSummaryDashboard, App_Web_bhdjlaqz" 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="217"
                                            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="Charge 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="icon-plus"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotalChargeLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Charge 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="icon-calendar"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TodayChargeLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Today Charge Amount</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>Charge PayType List</span>
                                                        </header>
                                                    </div>
                                                </div>
                                        </div>
                                        <div class='himsBoxContent'>
                                            <div class='table-responsive'>
                                                <table id='tblChargePayTypeList' class='table table-striped table-bordered'>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 p-0">
                                    <div class="col-xl-12 col-sm-12 col-xs-12" id="ChartLine">
                                        <canvas id="chart-line"></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 () {
            ChargePayTypeListGet();

        });

        function ChargePayTypeListGet() {
            $.ajax({
                type: "POST",
                url: "ChargeSummaryDashboard.aspx/ChargePayTypeListGet",
                // data: JSON.stringify({ "DepositId": DepositId }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {

                    var obj = (result.d);
                    var tblChargePayTypeList = "";

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

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

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

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


                    var dataPoint = [];
                    var lables = [];
                    var chartdata = [];
                    var dataPoint1 = [];
                    var lables1 = [];
                    var chartdata1 = [];
                    var lbl = [];
                    var locationlbl = [];
                    var colcnt = 0, rowcnt = 0;
                    var chartcolor = [window.chartColors.red, window.chartColors.blue, "#D35400", "#CD5C5C", "#cc65fe", "#196F3D", "#5499C7", "#E67E22",
                                  "#27AE60", "#F08080", "#996633", "#0000cc", "#FFA07A", "#16A085", "#512E5F", "#7D6608", "#1B4F72", "#008080",
                                  "#FF00FF", "#01DF01", "#ff0000", "#00ffff", "#cc6699", "#cccc00", "#993300", "#333399", "#ff99ff", "#006600", "#ffff00",
                                "#003366", "#00ccff", "#ff9900", "#cc0066", "#ccccff", "#660066", "#000000", "#36A2EB"];
                    colcnt = $('#tblChargePayTypeList tr:first').find("th").length;
                    rowcnt = $('#tblChargePayTypeList tr').length;
                    //$('#roundgraphdivDept').show();
                    //$('#round1graphdivDept').show();
                    $('#tblChargePayTypeList tbody tr').each(function (index) {
                        $(this).find('th,td').each(function (index2) {
                            if ($(this).is('th')) {
                                if (index2 != 0 && index2 != colcnt) {
                                    //alert(index2 + ' ' + colcnt)
                                    //debugger;
                                    lables.push(this.innerHTML);
                                }
                            } else if ($(this).is('td')) {
                                if (index2 != 0) {
                                    dataPoint.push(this.innerHTML);
                                } else if (index2 == 0) {
                                    locationlbl.push(this.innerText);
                                }
                            }
                        });
                        if (lables.length > 0 && dataPoint.length > 0) {
                            chartdata.push({
                                label: locationlbl,
                                fill: false,
                                // fillColor: "red",
                                // strokeColor: "blue",
                                // pointColor: "green",
                                backgroundColor: chartcolor[index],
                                borderColor: chartcolor[index],
                                data: dataPoint
                            });
                            dataPoint = [];
                            locationlbl = [];
                        }
                    });
                    var data = {
                        labels: lables,
                        datasets: chartdata
                    };
                    $('#chart-line').remove();
                    $('#ChartLine').append('<canvas id="chart-line"></canvas>');
                    var ctx = $("#chart-line").get(0).getContext('2d');
                    var opt = {
                        responsive: true,
                        title: {
                            display: true,
                            text: 'Charge PayType Graph '
                        },
                        tooltips: {
                            mode: 'index',
                            intersect: false,
                        },
                        hover: {
                            mode: 'nearest',
                            intersect: true
                        },
                        scales: {
                            xAxes: [{
                                offset: true,
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'PayType'
                                },
                                ticks: {
                                    beginAtZero: true,
                                }
                            }],
                            yAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Amount'
                                }
                            }]
                        }
                        //"hover": {
                        //    "animationDuration": 0
                        //},
                        //"animation": {
                        //    "duration": 1,
                        //    "onComplete": function () {
                        //        var chartInstance = this.chart,
                        //          ctx = chartInstance.ctx;
                        //        ctx.font = "10px Arial";
                        //        // ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        //        ctx.textAlign = 'center';
                        //        ctx.textBaseline = 'bottom';

                        //        this.data.datasets.forEach(function (dataset, i) {
                        //            var meta = chartInstance.controller.getDatasetMeta(i);
                        //            meta.data.forEach(function (bar, index) {
                        //                var data = dataset.data[index];
                        //                ctx.fillText(data, bar._model.x, bar._model.y);
                        //            });
                        //        });
                        //    },
                        //},
                    };
                    var myNewChart5 = new Chart(ctx, {
                        type: "line",
                        data: data,
                        options: opt,
                    });

                    ChargeAmountGet();
                }

            });

        }



        function ChargeAmountGet() {
            $.ajax({
                type: "POST",
                url: "ChargeSummaryDashboard.aspx/ChargeAmountGet",
                data: JSON.stringify({ "DepositId": DepositId }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    document.getElementById("TotalChargeLabel").innerHTML = obj[0][0].value;
                    document.getElementById("TodayChargeLabel").innerHTML = obj[0][1].value;
                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    console.log(err.Message);
                }
            });
        }
    </script>
</asp:Content>
