!function ($) {
    "use strict";

    var Dashboard = function () { };

    Dashboard.prototype.initCharts = function () {
        setTimeout(function () {
            LoadChartData();
        }, 10);
    },

        //initializing
        Dashboard.prototype.init = function () {
            // date picker
            $('#dash-daterange').flatpickr({
                mode: "range",
                defaultDate: [moment().subtract(1, 'months').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
            });

            // calendar
            $('#calendar-widget').flatpickr({
                inline: true,
                shorthandCurrentMonth: true
            });

            // charts
            this.initCharts();
        },


        $.Dashboard = new Dashboard, $.Dashboard.Constructor = Dashboard

}(window.jQuery),
    //initializing main application module
    function ($) {
        "use strict";
        $.Dashboard.init();
    }(window.jQuery);

function iframeRefresh(e) {
    var c = $(e);
    c.attr("src", c.attr("src"));
}

function LoadChartData() {
    $("#loading-div").removeAttr('style');
    window.Apex = {
        chart: {
            parentHeightOffset: 0,
            toolbar: {
                show: false
            }
        },
        grid: {
            padding: {
                left: 20,
                right: 0
            }
        },
        colors: ["#5369f8", "#43d39e", "#f77e53", "#ffbe0b"],
        tooltip: {
            theme: 'dark',
            x: { show: false }
        }
    };

    var AgentWiseTxn;
    var Response;
    //get data for chart from db
    var dataToSend = { MethodName: 'GetDashboardData', DateRange: $('#dash-daterange').val() };
    var options = {
        url: 'Dashboard2.aspx?',
        data: dataToSend,
        dataType: 'JSON',
        type: 'POST',
        async: false,
        success:
            function (response) {
               /* debugger;*/
                $('#todaysSent').text(response.TodaysSent);
                $('#todaysPaid').text(response.TodaysPaid);
                $('#mobileSent').text(response.MobileSent);
                $('#todaysRegistration').text(response.TodaysRegistration);
                $('#todaysMobileRegistration').text(response.TodaysMobileRegistration);
                $('#todaysMobileActivation').text(response.TodaysMobileActivation);
                AgentWiseTxn = response.AgentWiseTxn;
                Response = response;
            },
        error: function (result) {
            debugger;
            console.log(Message);
            if (result.Message) {
                alert(result.Message);

                /// iframeRefresh('#mainFrame');
            }
            else
                alert("Due to unexpected errors we were unable to load data");
        }
    };
    $.ajax(options);

    var loadDate = true;

    console.log(Response);
    if (Response.Message != null && Response.Message != '') {
        alert(Response.Message);
        loadDate = false;
      //  location.reload();

      //  return;
    }

    if (loadDate) {
        //Compliance/OFAC Hold Transactions
       // $('#complianceHoldCountMobileKycNow').text(Response.ComplianceData.OFACComplianceMobileTxnsKycNow);

        //Customer Count data
        $('#totalCustomerCount').text(Response.CustomerData.TotalCustomers);
        $('#mobileCustomerCount').text(Response.CustomerData.MobileCustomers);
        $('#mobileCustomerCount').text(Response.CustomerData.MobileCustomers);

        $('#kycProcessingCust').text(Response.KycStatus.KycProcessing);
        $('#kycNotCompletedCust').text(Response.KycStatus.KycNotCompleted);
        $('#kycCompletedCust').text(Response.KycStatus.KycCompleted);
        //Agent wise transaction show
        //let html = '';
        //if (AgentWiseTxn.length > 0) {
        //    $('#tableAgentWise tbody').empty();
        //    $('#tableAgentWisePopup tbody').empty();
        //}
        //for (var i = 0; i < 4; i++) {
        //    html += '<tr>';
        //    html += '<td>' + (i + 1).toString() + '</td>';
        //    //html += '<td>' + AgentWiseTxn[i].BranchName + '</td>';
        //    html += '<td>' + AgentWiseTxn[i].CurrentMonth + '</td>';
        //    html += '<td>' + AgentWiseTxn[i].PreviousMonth + '</td>';
        //    html += '</tr>';
        //}

        //$('#tableAgentWise tbody').append(html);

        //populate popup for all agent list
        //html = '';
        //for (var j = 0; j < AgentWiseTxn.length; j++) {
        //    html += '<tr>';
        //    html += '<td>' + (j + 1).toString() + '</td>';
        //   // html += '<td>' + AgentWiseTxn[j].BranchName + '</td>';
        //    html += '<td>' + AgentWiseTxn[j].CurrentMonth + '</td>';
        //    html += '<td>' + AgentWiseTxn[j].PreviousMonth + '</td>';
        //    html += '</tr>';
        //}
        //$('#tableAgentWisePopup tbody').append(html);

        //user wise txn
        html = '';
        if (Response.UserWiseTxn.length > 0) {
            $('#tableUserWise tbody').empty();
            $('#tableUserWisePopup tbody').empty();

            var count = 4
            if (Response.UserWiseTxn.length < count)
                count = Response.UserWiseTxn.length;

            for (i = 0; i < count; i++) {
                html += '<tr>';
                html += '<td>' + (i + 1).toString() + '</td>';
                html += '<td>' + Response.UserWiseTxn[i].UserName + '</td>';
                html += '<td>' + Response.UserWiseTxn[i].TxnCount + '</td>';
                html += '</tr>';
            }

            $('#tableUserWise tbody').append(html);
        }


        //populate popup for all agent list
        html = '';
        for (j = 0; j < Response.UserWiseTxn.length; j++) {
            html += '<tr>';
            html += '<td>' + (j + 1).toString() + '</td>';
            html += '<td>' + Response.UserWiseTxn[j].UserName + '</td>';
            html += '<td>' + Response.UserWiseTxn[j].TxnCount + '</td>';
            html += '</tr>';
        }
        $('#tableUserWisePopup tbody').append(html);

        //lawson card
        html = '';
        if (Response.LawsonSummary.length > 0) {
            $('#tableLawsonSummary tbody').empty();
        }
        for (i = 0; i < Response.LawsonSummary.length; i++) {
            html += '<tr>';
            html += '<td>' + (i + 1).toString() + '</td>';
            html += '<td>' + Response.LawsonSummary[i].lDescription + '</td>';
            html += '<td>' + Response.LawsonSummary[i].lCount + '</td>';
            html += '</tr>';
        }

        $('#tableLawsonSummary tbody').append(html);
    }
    //day wise transaction charts
    var options2 = {
        chart: {
            type: 'area',
            height: 45,
            width: 90,
            sparkline: {
                enabled: true
            }
        },
        series: [{
            data: [25, 66, 41, 85, 63, 25, 44, 12, 36, 9, 54]
        }],
        stroke: {
            width: 2,
            curve: 'smooth'
        },
        markers: {
            size: 0
        },
        colors: ["#727cf5"],
        tooltip: {
            fixed: {
                enabled: false
            },
            x: {
                show: false
            },
            y: {
                title: {
                    formatter: function (seriesName) {
                        return ''
                    }
                }
            },
            marker: {
                show: false
            }
        },
        fill: {
            type: 'gradient',
            gradient: {
                type: "vertical",
                shadeIntensity: 1,
                inverseColors: false,
                opacityFrom: 0.45,
                opacityTo: 0.05,
                stops: [45, 100]
            },
        }
    }

    new ApexCharts(document.querySelector("#today-sent"), $.extend({}, options2, {
        series: [{
            data: $.map(Response.SevenDaysSent, function (v) {
                return v.TxnCount;
            })
        }]
    })).render();
    new ApexCharts(document.querySelector("#today-paid"), $.extend({}, options2, {
        series: [{
            data: $.map(Response.SevenDaysPaid, function (v) {
                return v.TxnCount;
            })
        }], colors: ['#f77e53']
    })).render();
    //new ApexCharts(document.querySelector("#today-cancel"), $.extend({}, options2, {
    //    series: [{
    //        data: $.map(Response.SevenDaysCancel, function (v) {
    //            return v.TxnCount;
    //        })
    //    }], colors: ['#43d39e']
    //})).render();
    new ApexCharts(document.querySelector("#today-mobile-sent"), $.extend({}, options2, {
        series: [{
            data: $.map(Response.SevenDaysMobileSent, function (v) {
                return v.TxnCount;
            })
        }], colors: ['#ffbe0b']
    })).render();


    new ApexCharts(document.querySelector("#today-registration"), $.extend({}, options2, {
        series: [{
            data: $.map(Response.SevenDaysRegistration, function (v) {
                return v.RegCount;
            })
        }], colors: ['#00A800']
    })).render();

    new ApexCharts(document.querySelector("#today-mobile-registration"), $.extend({}, options2, {
        series: [{
            data: $.map(Response.SevenDaysMobileRegistration, function (v) {
                return v.RegCount;
            })
        }], colors: ['#0bc6ff']
    })).render();

    new ApexCharts(document.querySelector("#today-mobile-activation"), $.extend({}, options2, {
        series: [{
            data: $.map(Response.SevenDaysMobileActivation, function (v) {
                return v.RegCount;
            })
        }], colors: ['#8f7a0d']
    })).render();

    function getDaysInMonth(month, year) {
        var date = new Date(year, month, 1);
        var days = [];
        var idx = 0;
        while (date.getMonth() === month && idx < 15) {
            var d = new Date(date);
            days.push(d.getDate() + " " + d.toLocaleString('en-us', { month: 'short' }));
            date.setDate(date.getDate() + 1);
            idx += 1;
        }
        return days;
    }

    var labels = Response.Months;

    //Counter/mobile transaction
    var optionsCounterMobileTxn = {
        plotOptions: {
            pie: {
                donut: {
                    size: '70%',
                },
                expandOnClick: false
            }
        },
        chart: {
            height: 300,
            type: 'donut'
        },
        legend: {
            show: true,
            position: 'right',
            horizontalAlign: 'left',
            itemMargin: {
                horizontal: 6,
                vertical: 3
            }
        },
        series: $.map(Response.BranchTxn, function (v) {
            return v.TxnCount;
        }),
        labels: $.map(Response.BranchTxn, function (v) {
            return v.BranchName;
        }),
        responsive: [{
            breakpoint: 480,
            options: {
                legend: {
                    position: 'bottom'
                }
            }
        }],
        tooltip: {
            y: {
                formatter: function (value) { return value }
            },
        }
    }

    var chart = new ApexCharts(
        document.querySelector("#counter-mobile-transaction"),
        optionsCounterMobileTxn
    );

    chart.render();



    //transaction statics
    var optionstransaction = {
        chart: {
            height: 329,
            type: 'line'
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'smooth',
            width: 4
        },
        series: [{
            name:'Txn Count',
            data: Response.MonthsValues
        }],
        zoom: {
            enabled: false
        },
        legend: {
            show: false
        },

        distributed: true,
        xaxis: {
            type: 'string',
            categories: labels,
            tooltip: {
                enabled: false
            },
            axisBorder: {
                show: false
            },
            labels: {

            }
        },
        yaxis: {
            labels: {
                formatter: function (val) {
                    return val
                }
            }
        },
        fill: {
            type: 'gradient',
            gradient: {
                type: "vertical",
                shadeIntensity: 1,
                inverseColors: false,
                opacityFrom: 0.7,
                opacityTo: 0.05,
                stops: [45, 100]
            },
        },
    }

       
    var charttransaction = new ApexCharts(
        document.querySelector("#revenue-chart"),
        optionstransaction
    );

    charttransaction.render();
    $('#loading-div').hide();
}