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

@section('content')
    <div class="lf-welcome mb-4">
        <div class="row align-items-center g-3">
            <div class="col-lg-8">
                <span class="lf-pill"><i class="bi bi-mortarboard-fill me-1"></i>{{ __('Learner hub') }}</span>
                <h2 class="fw-bold mt-3 mb-1" style="letter-spacing:-.03em">{{ __('Hi :name, ready to learn?', ['name' => explode(' ', auth()->user()->name)[0]]) }} 🚀</h2>
                <p class="mb-0 opacity-75">
                    @if($stats['in_progress'])
                        {{ trans_choice('You have :count course in progress.|You have :count courses in progress.', $stats['in_progress'], ['count' => $stats['in_progress']]) }} {{ __('Pick up where you left off.') }}
                    @else
                        {{ __('Explore new courses and start your learning journey today.') }}
                    @endif
                </p>
                <div class="d-flex flex-wrap gap-2 mt-3">
                    @if($continueLearning->isNotEmpty())
                        <a href="{{ route('student.learn', $continueLearning->first()->course) }}" class="btn btn-light btn-sm"><i class="bi bi-play-fill me-1"></i>{{ __('Continue learning') }}</a>
                    @endif
                    <a href="{{ route('courses.index') }}" class="btn btn-outline-light btn-sm"><i class="bi bi-compass me-1"></i>{{ __('Browse courses') }}</a>
                    <a href="{{ route('student.certificates') }}" class="btn btn-outline-light btn-sm"><i class="bi bi-award me-1"></i>{{ __('Certificates') }}</a>
                </div>
            </div>
            <div class="col-lg-4 d-flex justify-content-lg-end justify-content-start align-items-center gap-3">
                <div class="lf-ring" style="--p: {{ $stats['avg_progress'] }}"><span>{{ $stats['avg_progress'] }}%</span></div>
                <div>
                    <div class="fw-bold">{{ __('Overall progress') }}</div>
                    <div class="small opacity-75">{{ $stats['completed'] }}/{{ $stats['enrolled'] }} {{ __('courses completed') }}</div>
                    @if(!is_null($stats['points']))<div class="small mt-1"><i class="bi bi-stars me-1"></i>{{ number_format($stats['points']) }} {{ __('points') }}</div>@endif
                </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' => __('Enrolled'), 'value' => $stats['enrolled'], 'icon' => 'bi-journal-bookmark', 'color' => 'primary', 'url' => route('student.courses')])</div>
        <div class="col-sm-6 col-xl-3">@include('partials.dashboard.stat-card', ['label' => __('In Progress'), 'value' => $stats['in_progress'], 'icon' => 'bi-hourglass-split', 'color' => 'warning'])</div>
        <div class="col-sm-6 col-xl-3">@include('partials.dashboard.stat-card', ['label' => __('Completed'), 'value' => $stats['completed'], 'icon' => 'bi-check2-circle', 'color' => 'success'])</div>
        <div class="col-sm-6 col-xl-3">@include('partials.dashboard.stat-card', ['label' => __('Certificates'), 'value' => $stats['certificates'], 'icon' => 'bi-award', 'color' => 'info', 'url' => route('student.certificates')])</div>
    </div>

    <div class="lf-toolbar mb-3"><h6 class="lf-section-title"><i class="bi bi-play-circle text-primary"></i>{{ __('Continue Learning') }}</h6><a href="{{ route('student.courses') }}" class="small fw-semibold">{{ __('My learning') }}</a></div>
    <div class="row g-3 mb-4">
        @forelse($continueLearning as $enrollment)
            @php($course = $enrollment->course)
            @continue(! $course)
            <div class="col-md-6 col-xl-3">
                <div class="lf-course-progress-card">
                    <a href="{{ route('student.learn', $course) }}"><img src="{{ $course->thumbnailUrl() }}" alt=""></a>
                    <div class="p-3 d-flex flex-column flex-grow-1">
                        <div class="small text-muted mb-1">{{ $course->instructor->name ?? '' }}</div>
                        <a href="{{ route('student.learn', $course) }}" class="fw-bold line-clamp-2 text-reset mb-2">{{ $course->title }}</a>
                        <div class="progress mt-auto mb-2"><div class="progress-bar" style="width: {{ $enrollment->progress_percentage }}%"></div></div>
                        <div class="d-flex justify-content-between align-items-center">
                            <small class="text-muted fw-semibold">{{ (int) $enrollment->progress_percentage }}% {{ __('complete') }}</small>
                            <a href="{{ route('student.learn', $course) }}" class="btn btn-sm btn-primary"><i class="bi bi-play-fill"></i> {{ __('Resume') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12"><div class="card"><div class="lf-empty"><i class="bi bi-journal-bookmark"></i>{{ __("You're not enrolled in any course yet.") }}<div class="mt-2"><a href="{{ route('courses.index') }}" class="btn btn-primary btn-sm">{{ __('Browse courses') }}</a></div></div></div></div>
        @endforelse
    </div>

    <div class="row g-3 mb-4">
        <div class="col-xl-5">
            <div class="card h-100">
                <div class="card-header"><i class="bi bi-bar-chart text-primary me-2"></i>{{ __('This Week') }} <span class="text-muted small fw-normal ms-1">{{ __('lessons completed') }}</span></div>
                <div class="card-body"><canvas id="lfWeekChart" style="max-height:200px"></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 flex-grow-1"><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>
                            @if(\Illuminate\Support\Facades\Route::has('student.liveclasses.join'))<a href="{{ route('student.liveclasses.join', $lc) }}" class="btn btn-sm btn-light">{{ __('Join') }}</a>@endif
                        </div>
                    @empty
                        <div class="lf-empty"><i class="bi bi-camera-video-off"></i>{{ __('No upcoming live classes.') }}</div>
                    @endforelse
                </div>
            </div>
        </div>
        <div class="col-xl-3">
            <div class="card h-100">
                <div class="card-header"><i class="bi bi-trophy text-primary me-2"></i>{{ __('Achievements') }}</div>
                <div class="card-body">
                    @if(module_enabled('gamification'))
                        @if($badges->isNotEmpty())
                            <div class="d-flex flex-wrap gap-2 mb-2">
                                @foreach($badges as $ub)
                                    <span class="lf-ico-tile lf-soft-warning" title="{{ $ub->badge->name ?? '' }}" style="width:46px;height:46px;font-size:1.3rem"><i class="bi {{ $ub->badge->icon ?? 'bi-award-fill' }}"></i></span>
                                @endforeach
                            </div>
                            <a href="{{ route('gamification.achievements') }}" class="small fw-semibold">{{ __('View all achievements') }}</a>
                        @else
                            <div class="lf-empty py-2"><i class="bi bi-trophy"></i>{{ __('Complete lessons to earn badges.') }}</div>
                        @endif
                    @else
                        @forelse($recentCertificates as $c)
                            <div class="d-flex align-items-center gap-2 mb-2"><span class="lf-ico-tile lf-soft-success"><i class="bi bi-award"></i></span><div class="small min-w-0"><div class="fw-semibold text-truncate">{{ $c->course->title ?? '' }}</div><div class="text-muted">{{ optional($c->issued_at)->format('M d, Y') }}</div></div></div>
                        @empty
                            <div class="lf-empty py-2"><i class="bi bi-award"></i>{{ __('Complete a course to earn a certificate.') }}</div>
                        @endforelse
                    @endif
                </div>
            </div>
        </div>
    </div>

    @if($recommended->isNotEmpty())
        <div class="lf-toolbar mb-3"><h6 class="lf-section-title"><i class="bi bi-lightbulb text-primary"></i>{{ __('Recommended for you') }}</h6><a href="{{ route('courses.index') }}" class="small fw-semibold">{{ __('See all') }}</a></div>
        <div class="row g-3 mb-4">
            @foreach($recommended as $course)
                <div class="col-md-6 col-xl-3">@if(!empty($course->recommend_reason))<div class="small text-muted mb-1"><i class="bi bi-stars me-1"></i>{{ $course->recommend_reason }}</div>@endif @include('partials.course-card', ['course' => $course])</div>
            @endforeach
        </div>
    @endif

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center"><span><i class="bi bi-journal-bookmark text-primary me-2"></i>{{ __('All My Courses') }}</span><span class="badge text-bg-light">{{ $enrollments->count() }}</span></div>
        <div class="list-group list-group-flush">
            @forelse($enrollments as $enrollment)
                @continue(! $enrollment->course)
                <div class="list-group-item lf-enrollment-row d-flex justify-content-between align-items-center gap-3">
                    <div class="lf-course-mini min-w-0 flex-grow-1">
                        <img src="{{ $enrollment->course->thumbnailUrl() }}" alt="">
                        <div class="min-w-0"><div class="fw-semibold text-truncate">{{ $enrollment->course->title }}</div><small class="text-muted">{{ __('by') }} {{ $enrollment->course->instructor->name ?? '—' }}</small></div>
                    </div>
                    {{-- Percentage sits on the same line as the bar, right-aligned in a
                         fixed column so the bars line up down the list. --}}
                    <div class="d-none d-md-flex align-items-center gap-2" style="width:200px">
                        <small class="text-muted fw-semibold text-end" style="width:38px">{{ (int) $enrollment->progress_percentage }}%</small>
                        <div class="progress flex-grow-1" role="progressbar"
                             aria-label="{{ __('Course progress') }}"
                             aria-valuenow="{{ (int) $enrollment->progress_percentage }}" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar {{ $enrollment->status === 'completed' ? 'bg-success' : '' }}" style="width: {{ (int) $enrollment->progress_percentage }}%"></div>
                        </div>
                    </div>
                    <span class="badge text-bg-{{ $enrollment->status === 'completed' ? 'success' : 'primary' }}">{{ status_label($enrollment->status) }}</span>
                    <a href="{{ route('student.learn', $enrollment->course) }}" class="btn btn-sm btn-light">{{ __('Open') }}</a>
                </div>
            @empty
                <div class="lf-empty"><i class="bi bi-journal-x"></i>{{ __('No enrollments.') }}</div>
            @endforelse
        </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('lfWeekChart'); if (!el) return;
    new Chart(el, { type: 'bar', data: { labels: @json($week['labels']), datasets: [{ data: @json($week['data']), backgroundColor: function (c) { var i = c.dataIndex; return i === 6 ? LEARNIFY.theme.primary : LEARNIFY.theme.alpha(.35); }, borderRadius: 8, borderSkipped: false, barPercentage: .6 }] },
        options: { plugins: { legend: { display: false } }, scales: { x: { grid: { display: false } }, y: { beginAtZero: true, ticks: { precision: 0 }, grid: { color: dark ? 'rgba(255,255,255,.06)' : 'rgba(15,23,42,.06)' } } } } });
})();
</script>
@endpush