@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 --}}
            <section class="dashboard-section">
                @include('dashboard.new.resellerWiseReport')
            </section>

            <section class="dashboard-section">
                @include('dashboard.new.popWiseReport')
            </section>

            {{-- 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() {

            setTimeout(function() {
                $.ajax({
                    url: "{{ route('getOnlineUser') }}",
                    type: "GET",
                    success: function(data) {
                        // console.log(data);
                        $('#onlineUser').text(data.online);
                    }
                });
            }, 1000);




            setInterval(function() {
                $.ajax({
                    url: "{{ route('getOnlineUser') }}",
                    type: "GET",
                    success: function(data) {
                        $('#onlineUser').text(data.online);
                    }
                });
            }, 30000);


            // 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