@extends('layouts.app')

@section('content')

@include('user_learning.partials.styles')

<div id="main-content">
    <input type="hidden" id="currentUserEmail" value="{{ $currentEmail ?? '' }}">
    <input type="hidden" name="tenant_connection" value="{{ $tenantConnection ?? '' }}">
    <div class="container-fluid">
        <div class="row">
            <div id="region-main" class="content-col col-md-12">
                <div id="page-content">
                    <span class="notifications" id="user-notifications"></span>
                    <div role="main">
                        <span id="maincontent"></span>
                        
                        <!-- Student Profile Header -->
                        <div class="student-profile-header">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="d-flex align-items-center">
                                        <!-- <div class="student-avatar">
                                            <img src="{{ $user->avatar }}" alt="Student Avatar" class="rounded-circle">
                                        </div> -->
                                        <div class="student-info ml-3">
                                            <h2>{{ $user->name }}</h2>
                                            <!-- <p class="text-muted mb-0">ID: ST12345 | Lớp: IELTS 7.0</p>
                                            <p class="text-muted">Ngày tham gia: 01/01/2023</p> -->
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 text-md-right">
                                    <!-- <button class="btn btn-primary" data-toggle="modal" data-target="#exportModal">
                                        <i class="fas fa-download"></i> Xuất báo cáo
                                    </button> -->
                                </div>
                            </div>
                        </div>
                        
                        @include('user_learning.partials.messages')
                        
                        <!-- Dashboard Stats -->
                        <div class="row stats-cards">
                            <div class="col-xl-3 col-md-6">
                                <div class="card stats-card stats-card-primary">
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                                    Khóa học đã tham gia
                                                </div>
                                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ count($coursesIds) }}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fas fa-graduation-cap stats-icon"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-xl-3 col-md-6">
                                <div class="card stats-card stats-card-success">
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                                    Bài kiểm tra đã làm
                                                </div>
                                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $quizzesDone }}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fas fa-clipboard-list stats-icon"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-xl-3 col-md-6">
                                <div class="card stats-card stats-card-info">
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                                    Tổng số lần làm bài
                                                </div>
                                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalAttempts }}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fas fa-tasks stats-icon"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-xl-3 col-md-6">
                                <div class="card stats-card stats-card-warning">
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                                    Điểm trung bình
                                                </div>
                                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $averageScore }}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fas fa-chart-line stats-icon"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Student Progress Overview -->
                        <div class="card mb-4">
                            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                                <h6 class="m-0 font-weight-bold text-primary">Tiến độ học tập</h6>
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="progressTimeRange" data-toggle="dropdown" aria-expanded="false">
                                        6 tháng gần nhất
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="progressTimeRange">
                                        <a class="dropdown-item" href="#">3 tháng gần nhất</a>
                                        <a class="dropdown-item active" href="#">6 tháng gần nhất</a>
                                        <a class="dropdown-item" href="#">1 năm gần nhất</a>
                                        <a class="dropdown-item" href="#">Tất cả</a>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="chart-container" style="position: relative; height:250px;">
                                    <canvas id="studentProgressChart"></canvas>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Skills Overview -->
                        <div class="card mb-4">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">Phân tích kỹ năng</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="chart-container" style="position: relative; height:250px;">
                                            <canvas id="skillsRadarChart"></canvas>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="skill-progress-container">
                                            <div class="skill-progress mb-4">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span class="skill-name">
                                                        <i class="fas fa-headphones text-primary"></i> Listening
                                                    </span>
                                                    <span class="skill-score">7.5</span>
                                                </div>
                                                <div class="progress" style="height: 10px;">
                                                    <div class="progress-bar bg-primary" role="progressbar" style="width: 83%;" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                            </div>
                                            
                                            <div class="skill-progress mb-4">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span class="skill-name">
                                                        <i class="fas fa-book-open text-success"></i> Reading
                                                    </span>
                                                    <span class="skill-score">6.5</span>
                                                </div>
                                                <div class="progress" style="height: 10px;">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 72%;" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                            </div>
                                            
                                            <div class="skill-progress mb-4">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span class="skill-name">
                                                        <i class="fas fa-pen text-warning"></i> Writing
                                                    </span>
                                                    <span class="skill-score">6.0</span>
                                                </div>
                                                <div class="progress" style="height: 10px;">
                                                    <div class="progress-bar bg-warning" role="progressbar" style="width: 67%;" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                            </div>
                                            
                                            <div class="skill-progress">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span class="skill-name">
                                                        <i class="fas fa-microphone text-danger"></i> Speaking
                                                    </span>
                                                    <span class="skill-score">7.0</span>
                                                </div>
                                                <div class="progress" style="height: 10px;">
                                                    <div class="progress-bar bg-danger" role="progressbar" style="width: 78%;" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        @include('user_learning.partials.filter')
                        @include('user_learning.partials.table')
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="notification" class="notification"></div>

@include('user_learning.partials.modals')

@include('user_learning.partials.scripts')

<!-- Add Font Awesome if not already included -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

@endsection