@extends('layouts-v2.app')

@section('content')
<div class="flex-1 space-y-6">
    <!-- Header -->
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <a href="{{ route('student.index') }}" class="hover:text-blue-600 cursor-pointer">Danh sách học sinh</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Khóa học & Bài kiểm tra</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6">Khóa học & Bài kiểm tra</h1>

    <!-- Message Notification V2 -->
    <div class="message-class hidden fixed top-4 right-4 z-50 max-w-md w-full">
        <div class="notification-v2 bg-white rounded-lg shadow-xl border-l-4 p-4 flex items-start gap-3 animate-slide-in">
            <div class="notification-icon flex-shrink-0 mt-0.5">
                <i data-lucide="check-circle" class="w-6 h-6 text-green-500 notification-icon-success hidden"></i>
                <i data-lucide="x-circle" class="w-6 h-6 text-red-500 notification-icon-error hidden"></i>
            </div>
            <div class="flex-1 min-w-0">
                <div id="content_message" class="text-sm font-medium text-slate-800"></div>
            </div>
            <button type="button" class="notification-close flex-shrink-0 text-slate-400 hover:text-slate-600 transition-colors" aria-label="Close">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
    </div>

    <!-- Student Profile Header -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-4">
                <div class="flex flex-col">
                    <h2 class="text-2xl font-bold text-slate-900">{{ $user->name }}</h2>
                </div>
            </div>
        </div>
    </div>

    @include('user_learning.partials-v2.messages')

    <!-- Dashboard Stats -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 border-l-4 border-l-blue-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-blue-600 uppercase tracking-wide mb-1">Khóa học đã tham gia</p>
                    <p class="text-2xl font-bold text-slate-900" id="stat-courses-count">{{ count($coursesIds) }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i data-lucide="graduation-cap" class="w-6 h-6 text-blue-600"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 border-l-4 border-l-green-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-green-600 uppercase tracking-wide mb-1">Bài kiểm tra đã làm</p>
                    <p class="text-2xl font-bold text-slate-900" id="stat-quizzes-done">
                        <span class="inline-block w-10 h-6 bg-slate-200 rounded animate-pulse"></span>
                    </p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <i data-lucide="clipboard-list" class="w-6 h-6 text-green-600"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 border-l-4 border-l-cyan-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-cyan-600 uppercase tracking-wide mb-1">Tổng số bài tập về nhà đã làm</p>
                    <p class="text-2xl font-bold text-slate-900" id="stat-total-attempts">
                        <span class="inline-block w-10 h-6 bg-slate-200 rounded animate-pulse"></span>
                    </p>
                </div>
                <div class="w-12 h-12 bg-cyan-100 rounded-lg flex items-center justify-center">
                    <i data-lucide="clipboard-list" class="w-6 h-6 text-cyan-600"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 border-l-4 border-l-yellow-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-yellow-600 uppercase tracking-wide mb-1">Điểm trung bình bài tập về nhà</p>
                    <p class="text-2xl font-bold text-slate-900" id="stat-average-score">
                        <span class="inline-block w-10 h-6 bg-slate-200 rounded animate-pulse"></span>
                    </p>
                </div>
                <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                    <i data-lucide="chart-line" class="w-6 h-6 text-yellow-600"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Student Progress Overview -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-slate-900">Tiến độ học tập</h3>
        </div>
        <div class="chart-container" style="position: relative; height:250px;">
            <canvas id="studentProgressChart"></canvas>
        </div>
    </div>

    <!-- Skills Overview -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
        <h3 class="text-lg font-semibold text-slate-900 mb-4">Phân tích kỹ năng</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="chart-container" style="position: relative; height:250px;">
                <canvas id="skillsRadarChart"></canvas>
            </div>
            <div class="space-y-4">
                <div class="skill-progress">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-medium text-slate-700 flex items-center gap-2">
                            <i data-lucide="headphones" class="w-4 h-4 text-blue-600"></i>
                            Listening
                        </span>
                        <span class="skill-score text-sm font-semibold text-slate-900">0.0</span>
                    </div>
                    <div class="w-full bg-slate-200 rounded-full h-2 progress">
                        <div class="progress-bar bg-blue-600 h-2 rounded-full" style="width: 0%"></div>
                    </div>
                </div>

                <div class="skill-progress">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-medium text-slate-700 flex items-center gap-2">
                            <i data-lucide="book-open" class="w-4 h-4 text-green-600"></i>
                            Reading
                        </span>
                        <span class="skill-score text-sm font-semibold text-slate-900">0.0</span>
                    </div>
                    <div class="w-full bg-slate-200 rounded-full h-2 progress">
                        <div class="progress-bar bg-green-600 h-2 rounded-full" style="width: 0%"></div>
                    </div>
                </div>

                <div class="skill-progress">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-medium text-slate-700 flex items-center gap-2">
                            <i data-lucide="pen" class="w-4 h-4 text-yellow-600"></i>
                            Writing
                        </span>
                        <span class="skill-score text-sm font-semibold text-slate-900">0.0</span>
                    </div>
                    <div class="w-full bg-slate-200 rounded-full h-2 progress">
                        <div class="progress-bar bg-yellow-600 h-2 rounded-full" style="width: 0%"></div>
                    </div>
                </div>

                <div class="skill-progress">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-medium text-slate-700 flex items-center gap-2">
                            <i data-lucide="mic" class="w-4 h-4 text-red-600"></i>
                            Speaking
                        </span>
                        <span class="skill-score text-sm font-semibold text-slate-900">0.0</span>
                    </div>
                    <div class="w-full bg-slate-200 rounded-full h-2 progress">
                        <div class="progress-bar bg-red-600 h-2 rounded-full" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('user_learning.partials-v2.filter')
    @include('user_learning.partials-v2.table')
</div>

<!-- Hidden inputs for tenant connection -->
<input type="hidden" id="currentUserEmail" value="{{ $currentEmail ?? '' }}">
<input type="hidden" name="tenant_connection" value="{{ $tenantConnection ?? '' }}">

@include('user_learning.partials-v2.modals')
@include('user_learning.partials-v2.scripts')
@include('user_learning.partials-v2.styles')
@endsection