@extends('layouts.app')
@section('title', 'Student Dashboard')
@section('content')
<div class="page-header">
    <div>
        <h4><i class="bi bi-speedometer2 me-2"></i>Student Dashboard</h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active">Dashboard</li></ol>
        </nav>
    </div>
    <div>
        <a href="{{ route('student.exams.index') }}" class="btn btn-primary btn-sm"><i class="bi bi-pencil-square me-1"></i>View Exams</a>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="cbt-stats-card">
            <i class="bi bi-pencil-square icon"></i>
            <div class="stat-value">{{ $stats['total_exams'] ?? 0 }}</div>
            <div class="stat-label">Total Exams</div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="cbt-stats-card green">
            <i class="bi bi-check-circle icon"></i>
            <div class="stat-value">{{ $stats['completed_exams'] ?? 0 }}</div>
            <div class="stat-label">Completed</div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="cbt-stats-card orange">
            <i class="bi bi-trophy icon"></i>
            <div class="stat-value">{{ $stats['passed_exams'] ?? 0 }}</div>
            <div class="stat-label">Passed</div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="cbt-stats-card teal">
            <i class="bi bi-award icon"></i>
            <div class="stat-value">{{ $stats['average_score'] ?? 0 }}%</div>
            <div class="stat-label">Average Score</div>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-xl-8">
        <div class="card">
            <div class="card-header"><i class="bi bi-bar-chart me-2" style="color:var(--primary);"></i>My Performance</div>
            <div class="card-body">
                <div class="chart-container" style="height:300px;">
                    <canvas id="performanceChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="card">
            <div class="card-header"><i class="bi bi-list-check me-2" style="color:var(--primary);"></i>Recent Results</div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    @forelse($stats['recent_results'] ?? [] as $result)
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <small class="fw500">{{ $result->exam->title ?? 'N/A' }}</small><br>
                            <small class="text-muted">{{ $result->subject->name ?? '' }}</small>
                        </div>
                        <span class="badge bg-{{ $result->percentage >= 50 ? 'success' : 'danger' }}">{{ number_format($result->percentage, 1) }}%</span>
                    </div>
                    @empty
                    <div class="list-group-item text-center text-muted py-4">No results yet</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mt-2">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header"><i class="bi bi-calendar-event me-2" style="color:var(--primary);"></i>Upcoming Exams</div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead><tr><th>Exam</th><th>Subject</th><th>Date</th><th>Duration</th><th>Action</th></tr></thead>
                        <tbody>
                            @forelse($stats['upcoming_exams'] ?? [] as $exam)
                            <tr>
                                <td class="fw500">{{ $exam->title }}</td>
                                <td>{{ $exam->subject->name ?? 'N/A' }}</td>
                                <td>{{ $exam->start_date ? date('M d, Y H:i', strtotime($exam->start_date)) : 'N/A' }}</td>
                                <td>{{ $exam->duration_minutes }} mins</td>
                                <td>
                                    @if($exam->isAvailable())
                                    <a href="{{ route('student.exams.start', $exam) }}" class="btn btn-sm btn-success"><i class="bi bi-play me-1"></i>Start</a>
                                    @else
                                    <span class="badge bg-secondary">Upcoming</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="5" class="text-center text-muted py-4">No upcoming exams</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var ctx = document.getElementById('performanceChart').getContext('2d');
    var results = @json($stats['recent_results'] ?? []);
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: results.map(function(r) { return r.exam ? r.exam.title.substring(0, 15) : ''; }),
            datasets: [{
                label: 'Score (%)',
                data: results.map(function(r) { return r.percentage; }),
                borderColor: '#0056D2',
                backgroundColor: '#0056D220',
                tension: 0.4,
                fill: true,
                pointBackgroundColor: '#0056D2',
                pointRadius: 5,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                y: { beginAtZero: true, max: 100, grid: { color: '#e9ecef' } },
                x: { grid: { display: false } }
            }
        }
    });
});
</script>
@endpush