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

@section('content')
    @if(! auth()->user()->canTeach())
        @php($appStatus = auth()->user()->instructorApplicationStatus())
        <div class="alert {{ $appStatus === 'rejected' ? 'alert-danger' : 'alert-warning' }} d-flex align-items-start gap-3 mb-4">
            <i class="bi {{ $appStatus === 'rejected' ? 'bi-x-octagon' : 'bi-hourglass-split' }} fs-4"></i>
            <div>
                <div class="fw-semibold">{{ $appStatus === 'rejected' ? __('Your instructor application was not approved') : __('Your instructor application is under review') }}</div>
                <div class="small">
                    @if($appStatus === 'rejected')
                        {{ __('Course creation is disabled.') }} @if(auth()->user()->instructorProfile?->review_note) {{ __('Reviewer note:') }} <em>{{ auth()->user()->instructorProfile->review_note }}</em>@endif
                    @else
                        {{ __('You can set up your profile now; course creation unlocks as soon as the academy approves you. You will be notified by e-mail.') }}
                    @endif
                </div>
            </div>
        </div>
    @endif
    <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-easel-fill me-1"></i>{{ __('Instructor studio') }}</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">{{ __('Keep creating — your students are waiting for the next lesson.') }}</p>
                <div class="d-flex flex-wrap gap-2 mt-3">
                    <a href="{{ route('instructor.courses.create') }}" class="btn btn-light btn-sm"><i class="bi bi-plus-lg me-1"></i>{{ __('New course') }}</a>
                    @if(module_enabled('liveclass'))<a href="{{ route('instructor.liveclasses.create') }}" class="btn btn-outline-light btn-sm"><i class="bi bi-camera-video me-1"></i>{{ __('Schedule live class') }}</a>@endif
                    <a href="{{ route('instructor.earnings') }}" class="btn btn-outline-light btn-sm"><i class="bi bi-wallet2 me-1"></i>{{ __('Earnings') }}</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">{{ $stats['rating'] ?: '—' }}</div><div class="small opacity-75">{{ __('Avg rating') }}</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['pending_submissions'] }}</div><div class="small opacity-75">{{ __('To grade') }}</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">{{ money($stats['pending_payouts']) }}</div><div class="small opacity-75">{{ __('Payout pending') }}</div></div></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-sm-6 col-xl-3">@include('partials.dashboard.stat-card', ['label' => __('My Courses'), 'value' => $stats['courses'], 'icon' => 'bi-easel', 'color' => 'primary', 'url' => route('instructor.courses.index')])</div>
        <div class="col-sm-6 col-xl-3">@include('partials.dashboard.stat-card', ['label' => __('Students'), 'value' => number_format($stats['students']), 'icon' => 'bi-people', 'color' => 'info', 'trend' => $stats['students_trend'], 'hint' => __('vs last month')])</div>
        <div class="col-sm-6 col-xl-3">@include('partials.dashboard.stat-card', ['label' => __('Reviews'), 'value' => $stats['reviews'], 'icon' => 'bi-star', 'color' => 'warning', 'hint' => $stats['rating'] ? $stats['rating'] . ' ★ ' . __('average') : __('No ratings yet')])</div>
        <div class="col-sm-6 col-xl-3">@include('partials.dashboard.stat-card', ['label' => __('Earnings'), 'value' => money($stats['earnings']), 'icon' => 'bi-wallet2', 'color' => 'success', 'trend' => $stats['earnings_trend'], 'hint' => __('vs last month'), 'url' => route('instructor.earnings')])</div>
    </div>

    <div class="row g-3 mb-4">
        <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 text-primary me-2"></i>{{ __('Earnings & New Students') }}</span><span class="text-muted small fw-normal">{{ __('Last 6 months') }}</span></div>
                <div class="card-body"><canvas id="lfEarnChart" class="lf-kpi-chart w-100"></canvas></div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card h-100">
                <div class="card-header"><i class="bi bi-camera-video text-primary me-2"></i>{{ __('Upcoming Live Classes') }}</div>
                <div class="list-group list-group-flush">
                    @forelse($upcomingClasses as $lc)
                        <div class="list-group-item d-flex align-items-center gap-3">
                            <div class="text-center rounded-3 lf-soft-primary px-2 py-1" style="min-width:52px"><div class="fw-bold">{{ $lc->start_time->format('d') }}</div><div style="font-size:.68rem;text-transform:uppercase">{{ $lc->start_time->format('M') }}</div></div>
                            <div class="min-w-0"><div class="fw-semibold text-truncate">{{ $lc->title }}</div><div class="small text-muted text-truncate">{{ $lc->course->title ?? '' }} · {{ $lc->start_time->format('h:i A') }}</div></div>
                        </div>
                    @empty
                        <div class="lf-empty"><i class="bi bi-camera-video-off"></i>{{ module_enabled('liveclass') ? __('No upcoming classes.') : __('Live classes module is disabled.') }}</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3">
        <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-collection-play text-primary me-2"></i>{{ __('My Courses') }}</span><a href="{{ route('instructor.courses.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>{{ __('Course') }}</th><th>{{ __('Status') }}</th><th>{{ __('Students') }}</th><th>{{ __('Price') }}</th><th></th></tr></thead>
                        <tbody>
                            @forelse($courses as $course)
                                <tr>
                                    <td><div class="lf-course-mini"><img src="{{ $course->thumbnailUrl() }}" alt=""><div class="min-w-0"><div class="fw-semibold text-truncate" style="max-width:240px">{{ $course->title }}</div><div class="small text-muted">{{ $course->updated_at->diffForHumans() }}</div></div></div></td>
                                    <td><span class="badge bg-{{ ['approved' => 'success', 'pending' => 'warning', 'rejected' => 'danger'][$course->approval_status] ?? 'secondary' }}">{{ status_label($course->approval_status) }}</span></td>
                                    <td class="fw-semibold">{{ $course->enrollments_count }}</td>
                                    <td>{{ $course->isFree() ? __('Free') : money($course->currentPrice()) }}</td>
                                    <td class="text-end"><a href="{{ route('instructor.courses.curriculum', $course) }}" class="btn btn-sm btn-light">{{ __('Curriculum') }}</a></td>
                                </tr>
                            @empty
                                <tr><td colspan="5"><div class="lf-empty"><i class="bi bi-easel"></i>{{ __("You haven't created any courses yet.") }}<div class="mt-2"><a href="{{ route('instructor.courses.create') }}" class="btn btn-primary btn-sm">{{ __('Create your first course') }}</a></div></div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-xl-5">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-star text-primary me-2"></i>{{ __('Latest Reviews') }}</div>
                <div class="list-group list-group-flush">
                    @forelse($recentReviews as $r)
                        <div class="list-group-item">
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <img src="{{ $r->student?->avatarUrl() ?? avatar_placeholder('Student') }}" class="lf-avatar-sm" alt="">
                                <div class="min-w-0 flex-grow-1"><div class="fw-semibold small text-truncate">{{ $r->student->name ?? '—' }}</div><div class="text-muted text-truncate" style="font-size:.72rem">{{ $r->course->title ?? '' }}</div></div>
                                <span class="text-warning small">@for($i = 1; $i <= 5; $i++)<i class="bi {{ $i <= $r->rating ? 'bi-star-fill' : 'bi-star' }}"></i>@endfor</span>
                            </div>
                            @if($r->review)<div class="small text-muted line-clamp-2">{{ $r->review }}</div>@endif
                        </div>
                    @empty
                        <div class="lf-empty"><i class="bi bi-star"></i>{{ __('No reviews yet.') }}</div>
                    @endforelse
                </div>
            </div>
            <div class="card">
                <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> {{ __('joined') }} <span class="fw-semibold">{{ \Illuminate\Support\Str::limit($e->course->title ?? '—', 36) }}</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 enrollments 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';
    Chart.defaults.font.family = "'Plus Jakarta Sans', system-ui, sans-serif";
    Chart.defaults.color = dark ? '#8b95ab' : '#64748b';
    var el = document.getElementById('lfEarnChart'); if (!el) return;
    var ctx = el.getContext('2d'); var g = ctx.createLinearGradient(0, 0, 0, 280); g.addColorStop(0, 'rgba(16,185,129,.35)'); g.addColorStop(1, 'rgba(16,185,129,0)');
    new Chart(ctx, { data: { labels: @json($charts['earnings']['labels']), datasets: [
        { type: 'line', label: '{{ __('Earnings') }}', data: @json($charts['earnings']['data']), borderColor: '#10b981', backgroundColor: g, fill: true, tension: .4, borderWidth: 2.5, pointBackgroundColor: '#10b981', yAxisID: 'y' },
        { type: 'bar', label: '{{ __('New students') }}', data: @json($charts['enrollments']['data']), backgroundColor: LEARNIFY.theme.alpha(.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: { grid: { color: dark ? 'rgba(255,255,255,.06)' : 'rgba(15,23,42,.06)' }, ticks: { callback: function (v) { return '{{ setting('currency_symbol', '$') }}' + v; } } }, y1: { position: 'right', grid: { display: false }, beginAtZero: true, ticks: { precision: 0 } } } } });
})();
</script>
@endpush