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

@section('content')
    @include('partials.how-it-works', ['key' => 'instructor.reports'])

<div class="mb-4">
    <h4 class="mb-0 fw-bold">{{ __('Reports & Analytics') }}</h4>
    <p class="text-muted small mb-0">{{ __('An overview of your teaching performance') }}</p>
</div>

<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-3">
        @include('partials.dashboard.stat-card', [
            'label' => 'Total Earnings',
            'value' => money($totalEarnings),
            'icon' => 'bi-cash-stack',
            'color' => 'success',
        ])
    </div>
    <div class="col-sm-6 col-xl-3">
        @include('partials.dashboard.stat-card', [
            'label' => 'Total Students',
            'value' => number_format($totalStudents),
            'icon' => 'bi-people',
            'color' => 'primary',
        ])
    </div>
    <div class="col-sm-6 col-xl-3">
        @include('partials.dashboard.stat-card', [
            'label' => 'Courses',
            'value' => number_format($coursesCount),
            'icon' => 'bi-journal-bookmark',
            'color' => 'info',
        ])
    </div>
    <div class="col-sm-6 col-xl-3">
        @include('partials.dashboard.stat-card', [
            'label' => 'Avg. Rating',
            'value' => number_format($avgRating, 2),
            'icon' => 'bi-star-fill',
            'color' => 'warning',
        ])
    </div>
</div>

<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white fw-semibold py-3">{{ __('Earnings (Last 12 Months)') }}</div>
    <div class="card-body">
        <canvas id="earningsChart" height="90"></canvas>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-5">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white fw-semibold py-3">{{ __('Top Courses') }}</div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr><th class="ps-4">{{ __('Course') }}</th><th class="text-end pe-4">{{ __('Enrollments') }}</th></tr>
                    </thead>
                    <tbody>
                        @forelse ($topCourses as $course)
                            <tr>
                                <td class="ps-4">{{ $course->title }}</td>
                                <td class="text-end pe-4 fw-semibold">{{ number_format($course->total_enrollments) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="2" class="text-center text-muted py-4">{{ __('No courses yet.') }}</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-7">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white fw-semibold py-3">{{ __('Recent Sales') }}</div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr><th class="ps-4">{{ __('Course') }}</th><th>{{ __('Date') }}</th><th class="text-end pe-4">{{ __('Your Earning') }}</th></tr>
                    </thead>
                    <tbody>
                        @forelse ($recentSales as $item)
                            <tr>
                                <td class="ps-4">{{ $item->course->title ?? '—' }}</td>
                                <td>{{ optional($item->order)->created_at?->format('M d, Y') ?? $item->created_at->format('M d, Y') }}</td>
                                <td class="text-end pe-4 text-success fw-semibold">{{ money($item->instructor_commission) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="text-center text-muted py-4">{{ __('No sales yet.') }}</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </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 () {
        const ctx = document.getElementById('earningsChart');
        if (!ctx) return;
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: @json($labels),
                datasets: [{
                    label: @json(__('Earnings')),
                    data: @json($data),
                    borderColor: LEARNIFY.theme.primary,
                    backgroundColor: LEARNIFY.theme.alpha(0.1),
                    fill: true,
                    tension: 0.35,
                    pointRadius: 3,
                    pointBackgroundColor: LEARNIFY.theme.primary,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    y: { beginAtZero: true, ticks: { precision: 0 } }
                }
            }
        });
    })();
</script>
@endpush