@extends('layouts.main') 
@section('title', 'Dashboard')
@section('content')
    @push('head')
        <link rel="stylesheet" href="{{ asset('plugins/chartist/dist/chartist.min.css') }}">
        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    @endpush

    <div class="container-fluid" style="padding: 0 28px 48px;">
        <div class="dash-header fu">
            <div class="dash-header-left">
                <div class="dash-header-icon"><i class="ik ik-grid"></i></div>
                <div>
                    <div class="dash-header-title">Admin Dashboard</div>
                    <div class="dash-header-sub">Real-time overview of all platform activity</div>
                </div>
            </div>
            <div class="dash-header-right">
                <div class="date-badge"><i class="ik ik-calendar" style="margin-right:5px;opacity:.6;"></i>{{ now()->format('M d, Y') }}</div>
                <div class="live-badge"><span class="live-dot"></span> Live</div>
            </div>
        </div>

        <div class="sec-div"><span class="sec-div-label">Coin Distribution</span></div>
        <div class="row">
            <div class="col-xl-3 col-md-6 fu d1">
                <div class="coin-card cc-blue">
                    <div class="cc-orb1"></div><div class="cc-orb2"></div>
                    <div class="cc-icon">🪙</div>
                    <div class="cc-value num">{{ number_format($today_coins ?? 0) }}</div>
                    <div class="cc-label">Today's Coins Distributed</div>
                    <div class="cc-sub">Coins awarded today</div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 fu d2">
                <div class="coin-card cc-green">
                    <div class="cc-orb1"></div><div class="cc-orb2"></div>
                    <div class="cc-icon">💰</div>
                    <div class="cc-value num">{{ number_format($total_coins ?? 0) }}</div>
                    <div class="cc-label">Total Coins Distributed</div>
                    <div class="cc-sub">All-time lifetime awards</div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 fu d3">
                <div class="coin-card cc-amber">
                    <div class="cc-orb1"></div><div class="cc-orb2"></div>
                    <div class="cc-icon">💸</div>
                    <div class="cc-value num">{{ number_format($total_payout ?? 0) }}</div>
                    <div class="cc-label">Total Payout Distributed in Coins</div>
                    <div class="cc-sub">Lifetime disbursements</div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 fu d4">
                <div class="coin-card cc-rose">
                    <div class="cc-orb1"></div><div class="cc-orb2"></div>
                    <div class="cc-icon">⏳</div>
                    <div class="cc-value num">{{ number_format($pending_payout ?? 0) }}</div>
                    <div class="cc-label">Pending Payout in Coins</div>
                    <div class="cc-sub">Awaiting disbursement</div>
                </div>
            </div>
        </div>

        <div class="sec-div"><span class="sec-div-label">Core Metrics</span></div>
        <div class="row">
            <div class="col-xl-3 col-md-6 fu d1">
                <div class="kpi-card kc-blue">
                    <div class="kpi-orb"></div>
                    <div class="kpi-top"><div class="kpi-icon"><i class="ik ik-users"></i></div><span class="kpi-badge b-up">↑ Active</span></div>
                    <div class="kpi-value num">{{ number_format($user) }}</div>
                    <div class="kpi-label">Total Users</div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 fu d2">
                <div class="kpi-card kc-rose">
                    <div class="kpi-orb"></div>
                    <div class="kpi-top"><div class="kpi-icon"><i class="ik ik-shopping-cart"></i></div><span class="kpi-badge b-neu">All time</span></div>
                    <div class="kpi-value num">{{ number_format($transaction) }}</div>
                    <div class="kpi-label">Total Transactions</div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 fu d3">
                <div class="kpi-card kc-amber">
                    <div class="kpi-orb"></div>
                    <div class="kpi-top"><div class="kpi-icon"><i class="ik ik-clock"></i></div><span class="kpi-badge b-dn">Pending</span></div>
                    <div class="kpi-value num">{{ number_format($pending) }}</div>
                    <div class="kpi-label">Pending Payments</div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 fu d4">
                <div class="kpi-card kc-green">
                    <div class="kpi-orb"></div>
                    <div class="kpi-top"><div class="kpi-icon"><i class="ik ik-check-circle"></i></div><span class="kpi-badge b-up">Paid</span></div>
                    <div class="kpi-value num">{{ number_format($complete) }}</div>
                    <div class="kpi-label">Completed Payments</div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-3 col-md-6 fu d1">
                <div class="kpi-card kc-indigo">
                    <div class="kpi-orb"></div>
                    <div class="kpi-top"><div class="kpi-icon"><i class="ik ik-trending-up"></i></div><span class="kpi-badge b-up">Earning</span></div>
                    <div class="kpi-value num">${{ $offerwall_income[0]->income }}</div>
                    <div class="kpi-label">Offerwall Earning</div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 fu d2">
                <div class="kpi-card kc-rose">
                    <div class="kpi-orb"></div>
                    <div class="kpi-top"><div class="kpi-icon"><i class="ik ik-play-circle"></i></div><span class="kpi-badge b-neu">Content</span></div>
                    <div class="kpi-value num">{{ number_format($video) }}</div>
                    <div class="kpi-label">Videos</div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 fu d3">
                <div class="kpi-card kc-cyan">
                    <div class="kpi-orb"></div>
                    <div class="kpi-top"><div class="kpi-icon"><i class="ik ik-globe"></i></div><span class="kpi-badge b-neu">Links</span></div>
                    <div class="kpi-value num">{{ number_format($weblink) }}</div>
                    <div class="kpi-label">Websites</div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 fu d4">
                <div class="kpi-card kc-violet">
                    <div class="kpi-orb"></div>
                    <div class="kpi-top"><div class="kpi-icon"><i class="ik ik-credit-card"></i></div><span class="kpi-badge b-neu">Options</span></div>
                    <div class="kpi-value num">{{ number_format($redeem) }}</div>
                    <div class="kpi-label">Rewards Options</div>
                </div>
            </div>
        </div>

        <div class="sec-div"><span class="sec-div-label">Active Users</span></div>
        <div class="row">
            <div class="col-xl-3 col-md-6 fu d1">
                <div class="wid-card">
                    <div class="wid-icon wi-blue"><i class="ik ik-activity"></i></div>
                    <div><div class="wid-label">Today Active</div><div class="wid-value num">{{ number_format($today) }}</div></div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 fu d2">
                <div class="wid-card">
                    <div class="wid-icon wi-cyan"><i class="ik ik-calendar"></i></div>
                    <div><div class="wid-label">This Week Active</div><div class="wid-value num">{{ number_format($week) }}</div></div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 fu d3">
                <div class="wid-card">
                    <div class="wid-icon wi-violet"><i class="ik ik-bar-chart-2"></i></div>
                    <div><div class="wid-label">This Month Active</div><div class="wid-value num">{{ number_format($month) }}</div></div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 fu d4">
                <div class="wid-card">
                    <div class="wid-icon wi-green"><i class="ik ik-user-check"></i></div>
                    <div><div class="wid-label">New Signups Today</div><div class="wid-value num">{{ number_format($new_today ?? 0) }}</div></div>
                </div>
            </div>
        </div>

        <div class="sec-div fu d1"><span class="sec-div-label">Today Task Completions</span></div>
        <div class="fu d2">
            <div class="task-section-wrap">
                <div class="task-section-head">
                    <div>
                        <div class="task-section-title">Task Completion Count</div>
                        <div class="task-section-sub">How many task completed today</div>
                    </div>
                    <button class="task-refresh-btn" id="refreshTaskBtn" onclick="loadTaskStats()">
                        <i class="ik ik-refresh-cw"></i> Refresh
                    </button>
                </div>

                <div class="task-grid" id="taskSkeleton">
                    @for($i = 0; $i < 7; $i++)
                        <div class="task-skeleton"></div>
                    @endfor
                </div>

                <div class="task-grid" id="taskGrid" style="display:none;"></div>
            </div>
        </div>

        <div class="sec-div fu d1"><span class="sec-div-label">Analytics</span></div>
        <div class="row">
            <div class="col-lg-8 fu d2">
                <div class="chart-card">
                    <div class="chart-head">
                        <div>
                            <div class="chart-title">Users Analysis</div>
                            <div class="chart-sub">Monthly new user registrations this year</div>
                        </div>
                        <button class="chip active">{{ now()->year }}</button>
                    </div>
                    <div id="revenueMonthly" class="chart-shadow" style="min-height:290px;"></div>
                </div>
            </div>
            <div class="col-lg-4 fu d3">
                <div class="chart-card" style="height:calc(100% - 22px);">
                    <div class="chart-head">
                        <div>
                            <div class="chart-title">Quick Summary</div>
                            <div class="chart-sub">Lifetime platform totals</div>
                        </div>
                    </div>
                    @php
                        $summary = [
                            ['label'=>'Total Users',       'val'=> number_format($user),        'color'=>'#3b7dff'],
                            ['label'=>'Transactions',      'val'=> number_format($transaction),  'color'=>'#f7295a'],
                            ['label'=>'Pending Payments',  'val'=> number_format($pending),      'color'=>'#f59e0b'],
                            ['label'=>'Completed',         'val'=> number_format($complete),     'color'=>'#10b981'],
                            ['label'=>'Videos',            'val'=> number_format($video),        'color'=>'#7c4dff'],
                            ['label'=>'Websites',          'val'=> number_format($weblink),      'color'=>'#00bfa5'],
                            ['label'=>'Rewards Options',   'val'=> number_format($redeem),       'color'=>'#f97316'],
                        ];
                    @endphp
                    @foreach($summary as $s)
                    <div class="sum-row">
                        <div style="display:flex;align-items:center;gap:10px;">
                            <span class="sum-dot" style="background:{{ $s['color'] }};box-shadow:0 0 5px {{ $s['color'] }}55;"></span>
                            <span class="sum-key">{{ $s['label'] }}</span>
                        </div>
                        <span class="sum-val num">{{ $s['val'] }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

    </div>

    @push('script')
        <script src="{{ asset('plugins/chartist/dist/chartist.min.js') }}"></script>
        <script src="{{ asset('plugins/flot-charts/jquery.flot.js') }}"></script>
        <script src="{{ asset('plugins/flot-charts/curvedLines.js') }}"></script>
        <script src="{{ asset('plugins/flot-charts/jquery.flot.tooltip.min.js') }}"></script>
        <script src="{{ asset('plugins/amcharts/amcharts.js') }}"></script>
        <script src="{{ asset('plugins/amcharts/serial.js') }}"></script>
        <script src="{{ asset('plugins/amcharts/themes/light.js') }}"></script>
        <script src="{{ asset('js/widget-statistic.js') }}"></script>
        <script src="{{ asset('js/widget-data.js') }}"></script>
        <script src="{{ asset('js/dashboard-charts.js') }}"></script>
        <script src="{{ asset('js/apexcharts.min.js') }}"></script>
        <script src="{{ asset('js/dashboardchart.js') }}"></script>

        <script>
        $(document).ready(function () {
            var user  = @json($alluser);
            var total = {{ $user }};
            users_Analysis(
                total,
                user[1]['count'],  user[2]['count'],  user[3]['count'],
                user[4]['count'],  user[5]['count'],  user[6]['count'],
                user[7]['count'],  user[8]['count'],  user[9]['count'],
                user[10]['count'], user[11]['count'], user[12]['count']
            );

            loadTaskStats();
        });

       var taskMeta = {
            spin_wheel:    { icon: 'ik ik-refresh-cw',  color: '#7c4dff', bar: 'linear-gradient(90deg,#7c4dff,#ec4899)', label: 'Spin Wheel'    },
            scratch_card:  { icon: 'ik ik-credit-card', color: '#f59e0b', bar: 'linear-gradient(90deg,#f59e0b,#f97316)', label: 'Scratch Card'  },
            math_quiz:     { icon: 'ik ik-hash',        color: '#3b7dff', bar: 'linear-gradient(90deg,#3b7dff,#6366f1)', label: 'Math Quiz'     },
            daily_check:   { icon: 'ik ik-check-square',color: '#10b981', bar: 'linear-gradient(90deg,#10b981,#00bfa5)', label: 'Daily Check-in'},
            visit_article: { icon: 'ik ik-file-text',   color: '#00bfa5', bar: 'linear-gradient(90deg,#00bfa5,#3b7dff)', label: 'Visit Article' },
            watch_video:   { icon: 'ik ik-play-circle', color: '#f7295a', bar: 'linear-gradient(90deg,#f7295a,#ec4899)', label: 'Watch Video'   },
            hotoffer:      { icon: 'ik ik-zap',         color: '#f97316', bar: 'linear-gradient(90deg,#f97316,#f59e0b)', label: 'Hot Offer'     },
            offerwall:     { icon: 'ik ik-layers',      color: '#6366f1', bar: 'linear-gradient(90deg,#6366f1,#3b7dff)', label: 'Offerwall'     },
        };

        function loadTaskStats() {
            var btn = $('#refreshTaskBtn');
            btn.addClass('spinning');

            $('#taskGrid').hide();
            $('#taskSkeleton').show();

            $.ajax({
                url:      '{{ route("admin.dashboard.taskStats") }}',
                method:   'GET',
                dataType: 'json',
                success: function (data) {
                    renderTaskCards(data);
                },
                error: function () {
                    $('#taskSkeleton').html(
                        '<div style="grid-column:1/-1;text-align:center;padding:24px;color:var(--txt-2);font-size:13px;">' +
                        '<i class="ik ik-alert-circle" style="font-size:22px;display:block;margin-bottom:8px;color:#f7295a;"></i>' +
                        'Could not load task stats. <a href="#" onclick="loadTaskStats();return false;" style="color:var(--blue);font-weight:600;">Retry</a></div>'
                    );
                    $('#taskSkeleton').show();
                    $('#taskGrid').hide();
                },
                complete: function () {
                    btn.removeClass('spinning');
                }
            });
        }

        function renderTaskCards(data) {
            var maxCount = 0;
            $.each(data, function(k, v) { if (v > maxCount) maxCount = v; });

            var html = '';
            $.each(taskMeta, function(key, meta) {
                var count = data[key] !== undefined ? data[key] : 0;
                var pct   = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0;
                var countFormatted = count.toLocaleString();

                html += `
                <div class="task-card">
                    <div class="task-card-top">
                        <div class="task-card-icon" style="background:${meta.color}18;color:${meta.color};font-size:17px;">
                            <i class="${meta.icon}"></i>
                        </div>
                        <span class="task-card-today-badge">Today</span>
                    </div>
                    <div class="task-card-count num" data-target="${count}">0</div>
                    <div class="task-card-label">${meta.label}</div>
                    <div class="task-card-bar-wrap">
                        <div class="task-card-bar" style="background:${meta.bar};" data-width="${pct}%"></div>
                    </div>
                </div>`;
            });

            var $grid = $('#taskGrid');
            $grid.html(html);

            $('#taskSkeleton').hide();
            $grid.show();

            setTimeout(function() {
                $grid.find('.task-card-bar').each(function() {
                    $(this).css('width', $(this).data('width'));
                });
            }, 60);

            $grid.find('.task-card-count').each(function() {
                var $el     = $(this);
                var target  = parseInt($el.data('target'));
                var duration = 900;
                var step    = Math.max(1, Math.floor(target / (duration / 16)));
                var current = 0;
                var timer   = setInterval(function() {
                    current += step;
                    if (current >= target) { current = target; clearInterval(timer); }
                    $el.text(current.toLocaleString());
                }, 16);
            });
        }
        </script>
    @endpush
@endsection