@extends('layout.app')

@push('styles')
    <link href="{{ asset('css/dashboard.css') }}" rel="stylesheet">
@endpush



@section('content')
    <div class="dashboard-page">
        <div class="dashboard-grid">
            {{-- Charts + online users / POP info (top) --}}
            <section class="dashboard-section">
                @include('dashboard.new.barchart')
            </section>

            {{-- Key metrics & counters --}}
            <section class="dashboard-section">
                @include('dashboard.new.counter')
                @include('dashboard.new.resellerCounter')
            </section>

            {{-- Latest payments for admins --}}
            {{-- @hasrole('Admin') --}}
                @can('dashboardLastPaymentReport')
                    <section class="dashboard-section">
                        <div id="paymentReport"></div>
                    </section>
                @endcan
            {{-- @endhasrole --}}

            {{-- Reseller & POP performance. Both tables group a month of bills per pop,
                 the most expensive query the dashboard runs, so they come in over ajax
                 once the page is up. --}}
            @can('dashboard-billing-info')
                <div id="popWiseReportSection" class="text-center">
                    <img src="{{ asset('/loader.gif') }}" width="80" alt="Loading manager reports">
                </div>
            @endcan

            {{-- Reseller recharge analytics --}}
            <section class="dashboard-section">
                @include('dashboard.new.resellerRchargeReportNew')
            </section>

            {{-- Token summary (async loaded) --}}
            @can('token-dashboard')
                <section class="dashboard-section">
                    <div id="tokenSection" class="token-section-placeholder text-center">
                        <h2 class="text-center d-block mb-3">Token Summary</h2>
                        <img src="{{ asset('/loader.gif') }}" width="80" alt="Loading token summary">
                    </div>
                </section>
            @endcan
        </div>
    </div>
@endsection



{{-- get online user using ajax --}}
@section('ajax')
    <style>
        .tokenLink {
            cursor: pointer;
        }
    </style>
    <script>
        $(document).ready(function() {

            // The topbar keeps its last known online/offline counts in localStorage so it
            // is never blank on load. The Online Users card is the same number, so it is
            // seeded from that same cache instead of sitting on "Loading ...." until the
            // first request comes back, and every refresh here writes the cache back so
            // the two can never show different figures.
            try {
                var cachedOnline = localStorage.getItem('topbar_online_count');
                if (cachedOnline !== null && cachedOnline !== '') {
                    $('#onlineUser').text(cachedOnline);
                }
            } catch (e) {
                // localStorage unavailable (private mode etc.) — fall back to the request
            }

            function refreshDashboardOnlineCount() {
                $.ajax({
                    url: "{{ route('getOnlineUser') }}",
                    type: "GET",
                    success: function(data) {
                        $('#onlineUser').text(data.online);
                        try {
                            localStorage.setItem('topbar_online_count', data.online);
                            localStorage.setItem('topbar_offline_count', data.total - data.online);
                        } catch (e) {
                            // ignore storage errors
                        }
                    }
                    // on error: leave the cached value in place — don't blank it
                });
            }

            setTimeout(refreshDashboardOnlineCount, 1000);
            setInterval(refreshDashboardOnlineCount, 30000);


            // Total Due / Previous Due. These used to be worked out before the page was
            // sent, and the total due sum alone took longer than everything else on the
            // dashboard combined. The boxes now render as "Loading ...." and are filled
            // in here. Skipped entirely when the user cannot see those boxes.
            if ($('#dashboard_total_due').length) {
                setTimeout(function() {
                    $.ajax({
                        url: "{{ route('getTotalDueInfo') }}",
                        type: "GET",
                        success: function(data) {
                            $('#dashboard_total_due').text(data.total_due);
                            $('#dashboard_previous_due').text(data.previous_due);
                        },
                        error: function() {
                            // Say nothing rather than leave "Loading ...." sitting there
                            // for good.
                            $('#dashboard_total_due, #dashboard_previous_due').text('-');
                        }
                    });
                }, 1000);
            }

            // The two manager report tables. See the note where the placeholder is
            // declared: they group a month of bills per pop and are the slowest query
            // left, so the page does not wait on them.
            if ($('#popWiseReportSection').length) {
                setTimeout(function() {
                    $.ajax({
                        url: "{{ route('getPopWiseReport') }}",
                        type: "GET",
                        success: function(data) {
                            $('#popWiseReportSection').removeClass('text-center').html(data);
                        },
                        error: function() {
                            // Drop the spinner rather than leave it turning for good.
                            $('#popWiseReportSection').html('');
                        }
                    });
                }, 1000);
            }

            // get token report after 2 second
            setTimeout(function() {
                $.ajax({
                    url: "{{ route('getTokenReport') }}",
                    type: "GET",
                    success: function(data) {
                        $('#tokenSection').html(data);
                    }
                });
            }, 1000);

            $(document).on('click', '.tokenLink', function() {
                window.location.href = "{{ route('searchToken') }}";
            });
            $(document).on('click', '#tokenSummary', function() {
                window.location.href = "{{ route('token-report-summary') }}";
            });
            setTimeout(function() {
                $.ajax({
                    url: "{{ route('getPaymentReport') }}",
                    type: "GET",
                    success: function(data) {
                        console.log(data);
                        $('#paymentReport').html(data);
                    }
                });
            }, 1000);


        });
    </script>
@endsection