@extends('layouts.app')
@section('title','Mi aprendizaje — '.config('app.name'))
@section('content')
<div class="dashboard-page"><div class="container-shell dashboard-shell"><x-dashboard-sidebar/><section class="dashboard-main">
    <div class="dashboard-title"><div><span class="dashboard-kicker">Mi aprendizaje</span><h1>Hola, {{ Str::before(auth()->user()->name,' ') }}</h1><p>Continúa donde te quedaste o descubre tu siguiente habilidad.</p></div><a class="btn btn-primary" href="{{ route('catalog') }}">Explorar cursos</a></div>
    <div class="metrics">
        <div class="metric"><span class="metric-icon">▶</span><div><span>Cursos activos</span><strong>{{ $enrollments->where('status','active')->count() }}</strong></div></div>
        <div class="metric"><span class="metric-icon">✓</span><div><span>Completados</span><strong>{{ $enrollments->whereNotNull('completed_at')->count() }}</strong></div></div>
        <div class="metric"><span class="metric-icon">◇</span><div><span>Certificados</span><strong>{{ $certificates->count() }}</strong></div></div>
        <div class="metric"><span class="metric-icon">↗</span><div><span>Avance promedio</span><strong>{{ number_format($enrollments->avg('progress_percent') ?? 0,0) }}%</strong></div></div>
    </div>
    <div class="panel learning-panel"><div class="panel-head"><div><span class="dashboard-kicker">En progreso</span><h2>Mis cursos</h2></div><a class="text-link" href="{{ route('catalog') }}">Ver catálogo →</a></div>
        @if($enrollments->isEmpty())<div class="empty-state"><strong>Aún no tienes cursos activos</strong><span>Tu primera ruta puede comenzar hoy.</span><a class="btn btn-primary" href="{{ route('catalog') }}">Encontrar un curso</a></div>
        @else<div class="dashboard-course-list">@foreach($enrollments as $enrollment)<article class="dashboard-course"><div class="dashboard-course-cover">@if($enrollment->course->coverUrl())<img src="{{ $enrollment->course->coverUrl() }}" alt="">@else<span>{{ mb_substr($enrollment->course->title,0,1) }}</span>@endif</div><div class="dashboard-course-info"><small>{{ $enrollment->course->category?->name ?? 'Curso profesional' }}</small><h3>{{ $enrollment->course->title }}</h3><div class="progress-label"><span>Progreso del curso</span><strong>{{ number_format($enrollment->progress_percent,0) }}%</strong></div><div class="progress-track"><div class="progress-fill" style="width:{{ $enrollment->progress_percent }}%"></div></div></div><a class="btn btn-secondary" href="{{ route('learn',$enrollment->course) }}">Continuar <span>→</span></a></article>@endforeach</div>@endif
    </div>
    @if ($certificates->isNotEmpty())
        <div class="panel certificate-panel">
            <div class="panel-head"><h2>Certificados recientes</h2></div>
            <div class="table-wrap">
                <table class="data-table">
                    <thead><tr><th>Curso</th><th>Emisión</th><th>Acciones</th></tr></thead>
                    <tbody>
                        @foreach ($certificates as $certificate)
                            <tr>
                                <td><strong>{{ $certificate->enrollment->course->title }}</strong></td>
                                <td>{{ $certificate->issued_at->translatedFormat('d M Y') }}</td>
                                <td>
                                    <div class="certificate-actions">
                                        <a class="btn btn-secondary btn-small" href="{{ route('certificates.verify', $certificate) }}" target="_blank" rel="noopener noreferrer">Ver</a>
                                        <a class="btn btn-primary btn-small" href="{{ route('certificates.download', $certificate) }}">Descargar</a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
</section></div></div>
@endsection