@extends('layouts.dashboard')
@section('title', __('Admin Dashboard'))
@section('page_title', __('Dashboard'))

@section('content')
    {{-- Welcome band --}}
    <div class="lf-welcome mb-4">
        <div class="row align-items-center g-3">
            <div class="col-lg-7">
                <span class="lf-pill"><i class="bi bi-lightning-charge-fill me-1"></i>{{ __('Admin overview') }}</span>
                <h2 class="fw-bold mt-3 mb-1" style="letter-spacing:-.03em">{{ __('Welcome back, :name', ['name' => explode(' ', auth()->user()->name)[0]]) }} 👋</h2>
                <p class="mb-0 opacity-75">{{ __('Here is what is happening across :site today.', ['site' => setting('site_name', 'Learnify')]) }}</p>
                <div class="d-flex flex-wrap gap-2 mt-3">
                    <a href="{{ route('admin.courses.index', ['status' => 'pending']) }}" class="btn btn-light btn-sm"><i class="bi bi-check2-square me-1"></i>{{ __('Review courses') }}</a>
                    <a href="{{ route('admin.users.create') }}" class="btn btn-outline-light btn-sm"><i class="bi bi-person-plus me-1"></i>{{ __('Add user') }}</a>
                    <a href="{{ route('admin.reports.index') }}" class="btn btn-outline-light btn-sm"><i class="bi bi-graph-up-arrow me-1"></i>{{ __('Reports') }}</a>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="row g-2 text-center">
                    <div class="col-4"><div class="rounded-4 p-3" style="background:rgba(255,255,255,.14)"><div class="h4 fw-bold mb-0">{{ money($stats['revenue_month']) }}</div><div class="small opacity-75">{{ __('This month') }}</div></div></div>
                    <div class="col-4"><div class="rounded-4 p-3" style="background:rgba(255,255,255,.14)"><div class="h4 fw-bold mb-0">{{ $stats['published'] }}</div><div class="small opacity-75">{{ __('Live courses') }}</div></div></div>
                    <div class="col-4"><div class="rounded-4 p-3" style="background:rgba(255,255,255,.14)"><div class="h4 fw-bold mb-0">{{ array_sum($todo) }}</div><div class="small opacity-75">{{ __('Action items') }}</div></div></div>
                </div>
            </div>
        </div>
    </div>

    {{-- KPIs --}}
    <div class="row g-3 mb-4">
        <div class="col-sm-6 col-xl-3">@include('partials.dashboard.stat-card', ['label' => __('Total Users'), 'value' => number_format($stats['users']), 'icon' => 'bi-people', 'color' => 'primary', 'trend' => $stats['users_trend'], 'hint' => __('vs last month'), 'url' => route('admin.users.index')])</div>
        <div class="col-sm-6 col-xl-3">@include('partials.dashboard.stat-card', ['label' => __('Courses'), 'value' => number_format($stats['courses']), 'icon' => 'bi-collection-play', 'color' => 'info', 'hint' => $stats['published'] . ' ' . __('published'), 'url' => route('admin.courses.index')])</div>
        <div class="col-sm-6 col-xl-3">@include('partials.dashboard.stat-card', ['label' => __('Enrollments'), 'value' => number_format($stats['enrollments']), 'icon' => 'bi-journal-check', 'color' => 'warning', 'trend' => $stats['enrollments_trend'], 'hint' => __('vs last month')])</div>
        <div class="col-sm-6 col-xl-3">@include('partials.dashboard.stat-card', ['label' => __('Revenue'), 'value' => money($stats['revenue']), 'icon' => 'bi-cash-stack', 'color' => 'success', 'trend' => $stats['revenue_trend'], 'hint' => __('vs last month'), 'url' => route('admin.orders.index')])</div>
    </div>

    <div class="row g-3 mb-4">
        {{-- Revenue chart --}}
        <div class="col-xl-8">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-graph-up-arrow text-primary me-2"></i>{{ __('Revenue & Enrollments') }}</span>
                    <span class="text-muted small fw-normal">{{ __('Last 12 months') }}</span>
                </div>
                <div class="card-body"><canvas id="lfRevenueChart" class="lf-kpi-chart w-100"></canvas></div>
            </div>
        </div>
        {{-- Action items --}}
        <div class="col-xl-4">
            <div class="card h-100">
                <div class="card-header"><i class="bi bi-list-check text-primary me-2"></i>{{ __('Needs your attention') }}</div>
                <div class="list-group list-group-flush">
                    @php($items = [
                        ['label' => __('Courses awaiting approval'), 'count' => $todo['pending_courses'], 'url' => route('admin.courses.index', ['status' => 'pending']), 'icon' => 'bi-collection-play', 'cls' => 'lf-soft-warning'],
                        ['label' => __('Payout requests'), 'count' => $todo['pending_payouts'], 'url' => route('admin.payouts.index'), 'icon' => 'bi-cash-stack', 'cls' => 'lf-soft-success'],
                        ['label' => __('Refund requests'), 'count' => $todo['pending_refunds'], 'url' => route('admin.refunds.index'), 'icon' => 'bi-arrow-counterclockwise', 'cls' => 'lf-soft-danger'],
                        ['label' => __('Unread messages'), 'count' => $todo['unread_messages'], 'url' => route('admin.messages.index'), 'icon' => 'bi-envelope', 'cls' => 'lf-soft-info'],
                        ['label' => __('New leads'), 'count' => $todo['new_leads'], 'url' => route('admin.leads.index'), 'icon' => 'bi-person-rolodex', 'cls' => 'lf-soft-primary'],
                    ])
                    @foreach($items as $it)
                        <a href="{{ $it['url'] }}" class="list-group-item list-group-item-action d-flex align-items-center gap-3">
                            <span class="lf-ico-tile {{ $it['cls'] }}"><i class="bi {{ $it['icon'] }}"></i></span>
                            <span class="flex-grow-1 fw-semibold small">{{ $it['label'] }}</span>
                            <span class="badge {{ $it['count'] ? 'bg-primary' : 'bg-light' }}">{{ $it['count'] }}</span>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        {{-- Recent orders --}}
        <div class="col-xl-7">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-receipt text-primary me-2"></i>{{ __('Recent Orders') }}</span>
                    <a href="{{ route('admin.orders.index') }}" class="small fw-semibold">{{ __('View all') }}</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead><tr><th>{{ __('Order') }}</th><th>{{ __('Customer') }}</th><th>{{ __('Total') }}</th><th>{{ __('Status') }}</th><th>{{ __('Date') }}</th></tr></thead>
                        <tbody>
                            @forelse($recentOrders as $order)
                                <tr>
                                    <td><a href="{{ route('admin.orders.show', $order) }}" class="fw-semibold">#{{ $order->order_no }}</a></td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            @if($order->user)<img src="{{ $order->user->avatarUrl() }}" class="lf-avatar-sm" alt="">@endif
                                            <span class="text-truncate" style="max-width:160px">{{ $order->user->name ?? '—' }}</span>
                                        </div>
                                    </td>
                                    <td class="fw-semibold">{{ money($order->total) }}</td>
                                    <td><span class="badge bg-{{ $order->payment_status === 'paid' ? 'success' : ($order->payment_status === 'failed' ? 'danger' : 'secondary') }}">{{ status_label($order->payment_status) }}</span></td>
                                    <td class="text-muted small">{{ $order->created_at->diffForHumans() }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="5"><div class="lf-empty"><i class="bi bi-receipt"></i>{{ __('No orders yet.') }}</div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {{-- Category share + top courses --}}
        <div class="col-xl-5">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-pie-chart text-primary me-2"></i>{{ __('Courses by Category') }}</div>
                <div class="card-body">
                    @if($categoryShare->isNotEmpty())
                        <div class="row align-items-center g-3">
                            <div class="col-12 col-sm-5"><canvas id="lfCategoryChart" style="max-height:170px"></canvas></div>
                            <div class="col-12 col-sm-7">
                                @foreach($categoryShare as $name => $c)
                                    <div class="d-flex justify-content-between small mb-2"><span class="text-truncate me-2"><span class="d-inline-block rounded-circle me-2" style="width:9px;height:9px;background:{{ ['var(--lf-primary)','var(--lf-primary-2)','#0ea5e9','#10b981','#f59e0b','#ef4444'][$loop->index % 6] }}"></span>{{ $name }}</span><span class="fw-semibold">{{ $c }}</span></div>
                                @endforeach
                            </div>
                        </div>
                    @else
                        <div class="lf-empty py-3"><i class="bi bi-pie-chart"></i>{{ __('No published courses yet.') }}</div>
                    @endif
                </div>
            </div>
            <div class="card">
                <div class="card-header"><i class="bi bi-fire text-primary me-2"></i>{{ __('Top Courses') }}</div>
                <div class="list-group list-group-flush">
                    @forelse($topCourses as $course)
                        <a href="{{ route('admin.courses.show', $course) }}" class="list-group-item list-group-item-action">
                            <div class="lf-course-mini">
                                <img src="{{ $course->thumbnailUrl() }}" alt="">
                                <div class="min-w-0 flex-grow-1">
                                    <div class="fw-semibold text-truncate">{{ $course->title }}</div>
                                    <div class="small text-muted">{{ $course->instructor->name ?? '—' }}</div>
                                </div>
                                <span class="badge bg-primary">{{ number_format($course->total_enrollments) }}</span>
                            </div>
                        </a>
                    @empty
                        <div class="lf-empty"><i class="bi bi-collection-play"></i>{{ __('No data.') }}</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-xl-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center"><span><i class="bi bi-hourglass-split text-primary me-2"></i>{{ __('Awaiting Approval') }}</span><a href="{{ route('admin.courses.index', ['status' => 'pending']) }}" class="small fw-semibold">{{ __('All') }}</a></div>
                <div class="list-group list-group-flush">
                    @forelse($pendingCourses as $course)
                        <div class="list-group-item d-flex justify-content-between align-items-center gap-2">
                            <div class="min-w-0"><div class="fw-semibold text-truncate">{{ $course->title }}</div><div class="small text-muted">{{ $course->instructor->name ?? '—' }} · {{ $course->created_at->diffForHumans() }}</div></div>
                            <a href="{{ route('admin.courses.show', $course) }}" class="btn btn-sm btn-primary">{{ __('Review') }}</a>
                        </div>
                    @empty
                        <div class="lf-empty"><i class="bi bi-check2-circle"></i>{{ __('Nothing pending.') }}</div>
                    @endforelse
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center"><span><i class="bi bi-person-plus text-primary me-2"></i>{{ __('New Users') }}</span><a href="{{ route('admin.users.index') }}" class="small fw-semibold">{{ __('All') }}</a></div>
                <div class="list-group list-group-flush">
                    @forelse($recentUsers as $u)
                        <div class="list-group-item d-flex align-items-center gap-3">
                            <img src="{{ $u->avatarUrl() }}" class="lf-avatar" alt="">
                            <div class="min-w-0 flex-grow-1"><div class="fw-semibold text-truncate">{{ $u->name }}</div><div class="small text-muted text-truncate">{{ $u->email }}</div></div>
                            <span class="badge bg-light">{{ status_label($u->getRoleNames()->first()) }}</span>
                        </div>
                    @empty
                        <div class="lf-empty"><i class="bi bi-people"></i>{{ __('No users yet.') }}</div>
                    @endforelse
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card h-100">
                <div class="card-header"><i class="bi bi-activity text-primary me-2"></i>{{ __('Recent Enrollments') }}</div>
                <div class="card-body">
                    <div class="lf-timeline">
                        @forelse($recentEnrollments as $e)
                            <div class="lf-timeline-item">
                                <div class="small"><span class="fw-semibold">{{ $e->student->name ?? '—' }}</span> {{ __('enrolled in') }} <span class="fw-semibold">{{ \Illuminate\Support\Str::limit($e->course->title ?? '—', 40) }}</span></div>
                                <div class="text-muted" style="font-size:.74rem">{{ $e->created_at->diffForHumans() }}</div>
                            </div>
                        @empty
                            <div class="lf-empty py-2"><i class="bi bi-activity"></i>{{ __('No activity yet.') }}</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
(function () {
    var dark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
    var grid = dark ? 'rgba(255,255,255,.06)' : 'rgba(15,23,42,.06)';
    var tick = dark ? '#8b95ab' : '#64748b';
    Chart.defaults.font.family = "'Plus Jakarta Sans', system-ui, sans-serif";
    Chart.defaults.color = tick;

    var rc = document.getElementById('lfRevenueChart');
    if (rc) {
        var ctx = rc.getContext('2d');
        var g = ctx.createLinearGradient(0, 0, 0, 280); g.addColorStop(0, LEARNIFY.theme.alpha(.35)); g.addColorStop(1, LEARNIFY.theme.alpha(0));
        new Chart(ctx, {
            data: {
                labels: @json($charts['revenue']['labels']),
                datasets: [
                    { type: 'line', label: '{{ __('Revenue') }}', data: @json($charts['revenue']['data']), borderColor: LEARNIFY.theme.primary, backgroundColor: g, fill: true, tension: .4, borderWidth: 2.5, pointRadius: 3, pointBackgroundColor: LEARNIFY.theme.primary, yAxisID: 'y' },
                    { type: 'bar', label: '{{ __('Enrollments') }}', data: @json($charts['enrollments']['data']), backgroundColor: 'rgba(14,165,233,.35)', borderRadius: 6, yAxisID: 'y1' }
                ]
            },
            options: { responsive: true, maintainAspectRatio: false, interaction: { mode: 'index', intersect: false },
                plugins: { legend: { position: 'top', align: 'end', labels: { usePointStyle: true, boxWidth: 8 } } },
                scales: { x: { grid: { display: false } }, y: { position: 'left', grid: { color: grid }, ticks: { callback: function (v) { return '{{ setting('currency_symbol', '$') }}' + v; } } }, y1: { position: 'right', grid: { display: false }, beginAtZero: true, ticks: { precision: 0 } } } }
        });
    }
    var cc = document.getElementById('lfCategoryChart');
    if (cc) {
        new Chart(cc, { type: 'doughnut', data: { labels: @json($categoryShare->keys()), datasets: [{ data: @json($categoryShare->values()), backgroundColor: [LEARNIFY.theme.primary,LEARNIFY.theme.secondary,'#0ea5e9','#10b981','#f59e0b','#ef4444'], borderWidth: 0, hoverOffset: 6 }] },
            options: { cutout: '70%', plugins: { legend: { display: false } } } });
    }
})();
</script>
@endpush