@php use Carbon\Carbon; @endphp
@foreach($styles as $style)
    <link href="{!! $style !!}" rel="stylesheet" type="text/css"/>
@endforeach
@php
    $businessBlockLabels = [
           'today' => _mt($moduleId, 'ManualPayout.today'),
            'week' => _mt($moduleId, 'ManualPayout.this_week'),
            'month' => _mt($moduleId, 'ManualPayout.this_month'),
            'year' => _mt($moduleId, 'ManualPayout.this_year'),
            'all' => _mt($moduleId, 'ManualPayout.all_time'),
    ];
@endphp
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="dashboard-stat2 statInner" data-target="payouts">
        <div class="dropdown filterGroup filterGear dateFilter" data-block="payouts">
            <div class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                <i class="icon-settings"></i>
            </div>
            <ul class="dropdown-menu dropdown-menu-default pull-right">
                <li data-from="{{ Carbon::today() }}" data-filter="today" data-groupBy="hour"
                    class="{{ ($filterBy == 'today') ? 'active' : '' }}">
                    <a href="#">
                        <i class="icon-calendar"></i>{{ _mt($moduleId,'ManualPayout.today') }}</a>
                </li>
                <li data-from="{{ Carbon::now()->startOfWeek() }}" data-filter="week" data-groupBy="day"
                    class="{{ ($filterBy == 'week') ? 'active' : '' }}">
                    <a href="#">
                        <i class="icon-calendar"></i>{{ _mt($moduleId,'ManualPayout.this_week') }}</a>
                </li>
                <li data-from="{{ Carbon::now()->startOfMonth() }}" data-filter="month" data-groupBy="day"
                    class="{{ ($filterBy == 'month') ? 'active' : '' }}">
                    <a href="#">
                        <i class="icon-calendar"></i>{{ _mt($moduleId,'ManualPayout.this_month') }}
                        <span class="badge badge-danger"> 3 </span>
                    </a>
                </li>
                <li data-from="{{ Carbon::now()->startOfYear() }}" data-filter="year" data-groupBy="month"
                    class="{{ ($filterBy == 'year') ? 'active' : '' }}">
                    <a href="#">
                        <i class="icon-calendar"></i>{{ _mt($moduleId,'ManualPayout.this_year') }}
                        <span class="badge badge-success"> 7 </span>
                    </a>
                </li>
                <li data-from="" data-filter="all" data-groupBy="year"
                    class="{{ ($filterBy == 'all') ? 'active' : '' }}">
                    <a href="#">
                        <i class="icon-calendar"></i>{{ _mt($moduleId,'ManualPayout.all_time') }}
                        <span class="badge badge-success"> 7 </span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="walletFilterGroup filterGear filterGroup">
            @if($wallets)
                <div class="dropdown walletChooser" data-wallet="{{ $currentWallet->moduleId }}">
                    <div class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                        <div class="selectedWallet">
                            <span class="fa fa-google-wallet"></span>
                            <p>{{ _mt($moduleId, 'ManualPayout.'.$currentWallet->registry['name']) }}
                                {{--                                {{ $currentWallet->registry['name'] }}--}}
                            </p>
                            <i class="fa fa-angle-down"></i>
                        </div>
                    </div>
                    <ul class="dropdown-menu dropdown-menu-default pull-right">
                        @foreach($wallets as $wallet)
                            <li data-id="{{ $wallet->moduleId }}">
                                <a href="#"><i
                                        class="icon-wallet"></i>{{ _mt($moduleId, 'ManualPayout.'.$wallet->registry['name']) }}
                                    {{--                                    {{ $wallet->registry['name'] }}--}}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
        <div class="display">
            <div class="number dropdown">
                <h3 class="font-blue-sharp">
                    <span class="payoutSum" data-value="{{ $total }}">{{ currency($total) }}</span>
                </h3>
                <small class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                   <span class="payout-label" style="text-transform: none;"> {{ _mt($moduleId,'ManualPayout.Total_Payouts') }}
                       <span class="block-label"
                             style="text-transform: none;">({{ $businessBlockLabels[$filterBy] }})</span>
                      </span>
                </small>

            </div>
            <div class="icon">
                <i class="fa fa-share"></i>
            </div>
        </div>
        <div class="progress-info">
            <div class="progress">
                    <span style="width: {{ $progress }}%;" class="progress-bar progress-bar-success blue-sharp">
                        <span class="sr-only">{{ _mt($moduleId,'ManualPayout.76%_progress') }}</span>
                    </span>
            </div>
        </div>
        <canvas class="payoutGraphHolder chartjs-render-monitor" data-graph="payouts"></canvas>
        <input type="hidden" class="payoutGraphLabels" value="{{ $payoutGraph->keys() }}">
        <input type="hidden" class="payoutGraphData" value="{{ $payoutGraph->values() }}">
    </div>
</div>
<script type="text/javascript">
    function payoutGraphOptions() {
        return {
            dataSetLabel: 'Total payouts',
            element: '.payoutGraphHolder[data-graph="payouts"]',
            labels: JSON.parse($('.payoutGraphLabels').val()),
            data: JSON.parse($('.payoutGraphData').val())
        };
    }

    // Load wallets block with filters
    function loadPayout(options, me, returnOptions) {
        let block = 'payouts';
        let payoutBlock = $('.statInner[data-target="' + block + '"]');
        let defaults = {
            txnType: payoutBlock.find('.creditOrDebit').data('action'),
            walletId: payoutBlock.find('.walletChooser').data('wallet')
        };
        let postData = $.extend({}, defaults, options);

        if (returnOptions) return postData;

        loadBlock(postData, block, me, function () {
            setupBusinessBlockSummaryGraph(payoutGraphOptions());
            countupStats($('.payoutSum')[0], 0, $('.payoutSum').data('value'));
        });
    }

    $(function () {
        var formatFn = function (value) {
            return "{{ currencySymbol() }}" + value;
        };
        countupStats($('.payoutSum')[0], 0, $('.payoutSum').data('value'), formatFn, 2);
        setupBusinessBlockSummaryGraph(payoutGraphOptions());

        applyWindowCallback(function (block) {
            if (block == 'payouts') {
                setupBusinessBlockSummaryGraph(payoutGraphOptions());
                countupStats($('.payoutSum')[0], 0, $('.payoutSum').data('value'), formatFn, 2);
            }
        }, 'bizBlockChangeCallbacks');

        applyWindowCallback(function (element) {
            if (jQuerize(element).closest('.statInner').data('target') == 'payouts') {
                let options = loadPayout(null, null, true);
                delete options['filters'];
                //console.log(options);
                return options;
            }
        }, 'bizBlockParams');

        // load wallet data on wallet chooser
        $('body')
            .off('click', '.statInner[data-target="payouts"] .walletChooser ul li')
            .on('click', '.statInner[data-target="payouts"] .walletChooser ul li', function (e) {
                e.preventDefault();
                loadPayout({walletId: $(this).data('id')}, $(this));
            });
    });
</script>