@extends(ucfirst(getScope()).'.Layout.master')
@section('content')
    {!! defineFilter('badge', '', 'header'); !!}
    {!! defineFilter('dashboard', '', 'header'); !!}
    <div class="row systemStats unitHolder" data-unit="businessInfo" data-loader-bg="none"></div>
    {!! defineFilter('dashboardBlock', '', 'afterBusinessInfo') !!}
    {!! defineFilter('dashboardBlock', '', 'userAccountOverview') !!}
    <div class="row detailedGraphs">
        <div class="col-md-3 col-sm-3 co-xs-12 navWrapper">
            <ul class="navHolder">
                {!! defineFilter('dashboardBlock', '', 'detailedGraphsNav') !!}
{{--                <li class="graphNav" data-unit="mailDetailedGraph">--}}
{{--                    <i class="fa fa-envelope"></i>--}}
{{--                    <p>{{ _t('index.Emails') }}</p>--}}
{{--                </li>--}}
            </ul>
        </div>
        <div class="graphPaneWrapper col-md-9 col-sm-9 co-xs-12">
            <div class="innerHolder unitHolder" data-unit="commissionDetailedGraph"></div>
        </div>
    </div>
    {!! defineFilter('dashboardBlock', '', 'detailsBlock1') !!}
    {!! defineFilter('dashboardBlock', '', 'beforeSystemModules') !!}
    <div class="row linksHolder">
        {!! defineFilter('dashboardBlock', '', 'overview') !!}
    </div>
    <div class="row linksHolder">
        {!! defineFilter('dashboardBlock', '', 'afterTopJoiningAndEarnersTile') !!}
    </div>
    <div class="row lastJoiningsAndActivities">
        <div class="col-lg-5 col-xs-12 col-sm-12 activitiesHolder">
            <div class="innerHolder unitHolder" data-unit="activities"></div>
        </div>
        {!! defineFilter('dashboardBlock', '', 'detailsBlock2') !!}
    </div>
    <div class="row linksHolder">
        {!! defineFilter('dashboardBlock', '', 'newsBlock') !!}
    </div>
    {!! defineFilter('dashBoardBottom', '', 'root'); !!}
    {!! defineFilter('promotionalSection', '', 'header'); !!}
    {!! defineFilter('contractSigning', '', 'header2'); !!}
    <style>
        .page-content {
            background: #eee;
        }

        .page-bar {
            background: none !important;
        }
    </style>

    <script type="text/javascript">
        "use strict";

        $(function () {
            loadAllUnits();
        });

        function loadAllUnits() {
            $('.unitHolder').each(function (key, value) {
                var isLast = (key + 1) == $('.unitHolder').length ? true : false;
                getUnit($(this), $(this).data('unit')).done(function () {
                    //if(isLast) alert('finished');
                });
            });
        }

        function getUnit(element, unit, args, postData, partial) {
            unit = unit ? unit : jQuerize(element).data('unit');
            var options = $.extend({}, {unit: unit, args: args}, postData);
            //console.log(options);
            simulateLoading(jQuerize(element));

            return $.post('{{ route('user.dashboard.unit') }}', options, function (response) {
                jQuerize(element).html(!partial ? response : $(response).find(partial).html());
            });
        }

        function countupStats(targetElement, startVal, endVal, formattingFn, decimal = 0) {
            var options = {
                useEasing: true,
                useGrouping: true,
                separator: ',',
                decimal: '.',
                formattingFn: formattingFn ? formattingFn : function (number) {
                    return number;
                },
            };
            var countup = new CountUp(targetElement, Number(startVal), Number(endVal), decimal, 2.5, options);

            if (!countup.error) {
                countup.start();
            } else {
                console.error(countup.error);
            }
        }

        function setupBusinessBlockSummaryGraph(options) {
            if (!jQuerize(options.element).length) return false;
            var defaults = {
                dataSetLabel: 'Stats',
                labels: [
                    "{{ _t('index.january') }}", "{{ _t('index.february') }}", "{{ _t('index.march') }}", "{{ _t('index.april') }}", "{{ _t('index.may') }}", "{{ _t('index.june') }}", "{{ _t('index.july') }}", "{{ _t('index.august') }}", "{{ _t('index.september') }}", "{{ _t('index.october') }}",
                ],
                data: [],
                gradient: {
                    bg: [0, 0, 0, 240],
                    start: '#61ce70',
                    stop: '#e4ffe5'
                }
                , borderColor: '#61ce70'
            };
            options = $.extend({}, defaults, options);
            var ctx = jQuerize(options.element)[0].getContext("2d");
            var gradient = ctx.createLinearGradient.apply(ctx, options.gradient['bg']);
            gradient.addColorStop(0, Chart.helpers.color(options.gradient['start']).alpha(0.7).rgbString());
            gradient.addColorStop(1, Chart.helpers.color(options.gradient['stop']).alpha(0).rgbString());

            var config = {
                type: 'line',
                data: {
                    labels: options.labels,
                    datasets: [{
                        label: options.dataSetLabel,
                        backgroundColor: gradient, // Put the gradient here as a fill color
                        borderColor: options.borderColor,
                        pointBackgroundColor: Chart.helpers.color('#bababa').alpha(0.4).rgbString(),
                        pointBorderColor: Chart.helpers.color('#979797').alpha(0.4).rgbString(),
                        pointHoverBackgroundColor: Chart.helpers.color('#ffffff').alpha(0).rgbString(),
                        pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.2).rgbString(),
                        //fill: 'start',
                        data: options.data
                    }]
                },
                options: {
                    title: {
                        display: false
                    },
                    tooltips: {
                        intersect: false,
                        mode: 'nearest',
                        xPadding: 10,
                        yPadding: 10,
                        caretPadding: 10
                    },
                    legend: {
                        display: false
                    },
                    responsive: true,
                    hover: {
                        mode: 'index'
                    },
                    scales: {
                        xAxes: [{
                            display: false,
                            gridLines: false,
                        }],
                        yAxes: [{
                            display: false,
                            gridLines: false,
                            /*ticks: {
                                beginAtZero: true
                            }*/
                        }]
                    },
                    elements: {
                        line: {
                            tension: 0.4
                        },
                        point: {
                            radius: 2,
                            borderWidth: 8,
                        }
                    },
                    layout: {
                        padding: {
                            left: 0,
                            right: 0,
                            top: 5,
                            bottom: 0
                        }
                    }
                }
            };

            var chart = new Chart(ctx, config);
        }

        function applyWindowCallback(callback, name) {
            var callbacks = window[name];
            callbacks = $.isArray(callbacks) ? callbacks : [];
            callbacks.push(callback);
            window[name] = callbacks;
        }

        function fetchBizBlock(postData, block, triggeredElement) {
            return loadBusinessBlock(postData, null, block).done(function () {
                var callbacks = window.bizBlockChangeCallbacks;
                if (callbacks && $.isArray(callbacks))
                    callbacks.forEach(function (action, key) {
                        action(block, triggeredElement);
                    });
            });
        }

        function loadBlock(options, block, elem, callback) {
            var blockElem = $('.statInner[data-target="' + block + '"]');
            var filterElem = blockElem.find('.dateFilter li.active');
            var filters = {
                groupBy: filterElem.data('groupby'),
                filterBy: filterElem.data('filter'),
                fromDate: filterElem.data('from')
            };
            var defaults = {filters: filters};
            var postData = $.extend({}, defaults, options);

            fetchBizBlock(postData, block, elem).done(callback);
        }

        function loadBusinessBlock(postData, unit, block) {
            unit = unit ? unit : 'businessInfo';

            return getUnit('.statInner[data-target="' + block + '"]', unit, {}, postData, '.statInner[data-target="' + block + '"]');
        }

        $('.detailedGraphs .navHolder li').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            $('.graphPaneWrapper .unitHolder').attr('data-unit', $(this).data('unit'));

            return getUnit('.graphPaneWrapper .unitHolder', $(this).data('unit'));
        });
    </script>
    <style>
        .row.linksHolder {
            margin-bottom: 20px;
        }
    </style>
@endsection