@extends(ucfirst(getScope()).'.Layout.master')
@section('content')
    <div class="referralListWrapper" data-user="{{ $user->id }}">
        <div class="summaryData">
            <div class="col-md-6">
                <div class="referralSummary">
                    <div class="row list-separated profile-stat">
                        <div class="col-md-6 col-sm-6 col-xs-12 refCountFirst">
                            <div class="uppercase profile-stat-title alignCenter">
                                <b>{{ _mt($moduleId, 'ReferralList.Total') }}</b></div>
                            <div class="uppercase profile-stat-text alignCenter"> {{ $downlines->count() }} </div>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12 refCountSecond">
                            <div class="uppercase profile-stat-title alignCenter">
                                <b>{{ _mt($moduleId, 'ReferralList.Today') }}</b></div>
                            <div class="uppercase profile-stat-text alignCenter"> {{ $todayJoined }} </div>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12 refCountSecond">
                            <div class="uppercase profile-stat-title alignCenter">
                                <b>{{ _mt($moduleId, 'ReferralList.thisMonth') }}</b></div>
                            <div class="uppercase profile-stat-text alignCenter"> {{ $thisMonthJoined }} </div>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12 refCountFirst">
                            <div class="uppercase profile-stat-title alignCenter">
                                <b>{{ _mt($moduleId, 'ReferralList.thisYear') }}</b></div>
                            <div class="uppercase profile-stat-text alignCenter"> {{ $thisYearJoined }} </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div id="chartContainer" class="chartContainer"></div>
            </div>
        </div>
        <div class="referralListContainer"></div>
    </div>

    <script>

        $('body').off('click', '.paginationWrapper .pagination li a').on('click', 'click', '.paginationWrapper .pagination li a', function (e) {
            e.preventDefault();
            var route = $(this).attr('href');
            loadRefferalList(route);
        });

        $(function () {
            loadRefferralGraph();
        });

        function loadRefferralGraph() {
            simulateLoading('.chartContainer');
            var options = {id: '{{ $user->id }}'};
            $.post('{{ scopeRoute('ReferralList.graph') }}', options, function (response) {
                $('.chartContainer').html(response);
            }).done(function () {
                loadRefferalList();
            });
        }

        function loadRefferalList(route) {
            simulateLoading('.referralListContainer');
            route = route ? route : '{{ scopeRoute('ReferralList.list') }}';
            var id = '{{ $user->id }}';
            var options = {id: id};
            $.post(route, options, function (response) {
                $('.referralListContainer').html(response);
            });
        }
    </script>
@endsection