@extends('layouts.app')

@section('content')
<div class="container mt-4">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="fw-bold">📊 My Quiz History</h2>
            <p class="text-muted">Track your progress and review past attempts</p>
        </div>
    </div>

    @if($attempts->isEmpty())
        <div class="card text-center py-5">
            <div class="card-body">
                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-clipboard-data text-muted mb-3" viewBox="0 0 16 16">
                    <path d="M4 11a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0zm6-4a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0zM7 9a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0z"/>
                    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/>
                    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/>
                </svg>
                <h4 class="text-muted">No Quiz History Yet</h4>
                <p class="text-muted">Start taking quizzes to see your progress here!</p>
                <a href="{{ route('student.topics.index') }}" class="btn btn-primary mt-3">
                    Browse Topics
                </a>
            </div>
        </div>
    @else
        <!-- Summary Stats -->
        <div class="row mb-4">
            <div class="col-md-3 col-6 mb-3">
                <div class="card border-0 shadow-sm">
                    <div class="card-body text-center">
                        <h3 class="fw-bold text-primary mb-0">{{ $attempts->total() }}</h3>
                        <small class="text-muted">Total Attempts</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6 mb-3">
                <div class="card border-0 shadow-sm">
                    <div class="card-body text-center">
                        <h3 class="fw-bold text-success mb-0">{{ number_format($attempts->avg('score_percentage'), 1) }}%</h3>
                        <small class="text-muted">Average Score</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6 mb-3">
                <div class="card border-0 shadow-sm">
                    <div class="card-body text-center">
                        <h3 class="fw-bold text-info mb-0">{{ $attempts->sum('total_questions') }}</h3>
                        <small class="text-muted">Questions Answered</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6 mb-3">
                <div class="card border-0 shadow-sm">
                    <div class="card-body text-center">
                        <h3 class="fw-bold text-warning mb-0">{{ gmdate('H:i:s', $attempts->sum('total_time_seconds')) }}</h3>
                        <small class="text-muted">Total Time</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quiz Attempts List -->
        <div class="card border-0 shadow-sm">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="px-4 py-3">Topic</th>
                                <th class="px-4 py-3">Score</th>
                                <th class="px-4 py-3">Questions</th>
                                <th class="px-4 py-3">Time Spent</th>
                                <th class="px-4 py-3">Date</th>
                                <th class="px-4 py-3 text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($attempts as $attempt)
                                <tr>
                                    <td class="px-4 py-3">
                                        <div class="d-flex align-items-center">
                                            <div class="me-3">
                                                @if($attempt->score_percentage >= 80)
                                                    <span class="badge bg-success">🏆</span>
                                                @elseif($attempt->score_percentage >= 60)
                                                    <span class="badge bg-primary">⭐</span>
                                                @else
                                                    <span class="badge bg-secondary">📚</span>
                                                @endif
                                            </div>
                                            <div>
                                                <div class="fw-semibold">{{ $attempt->topic->title }}</div>
                                                <small class="text-muted">{{ $attempt->topic->description }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="d-flex align-items-center">
                                            <div class="progress flex-grow-1 me-2" style="height: 8px; width: 80px;">
                                                <div class="progress-bar 
                                                    @if($attempt->score_percentage >= 80) bg-success
                                                    @elseif($attempt->score_percentage >= 60) bg-primary
                                                    @elseif($attempt->score_percentage >= 40) bg-warning
                                                    @else bg-danger
                                                    @endif" 
                                                    role="progressbar" 
                                                    style="width: {{ $attempt->score_percentage }}%"
                                                    aria-valuenow="{{ $attempt->score_percentage }}" 
                                                    aria-valuemin="0" 
                                                    aria-valuemax="100">
                                                </div>
                                            </div>
                                            <span class="fw-bold">{{ number_format($attempt->score_percentage, 1) }}%</span>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="text-success fw-semibold">{{ $attempt->correct_answers }}</span>
                                        <span class="text-muted">/</span>
                                        <span class="text-muted">{{ $attempt->total_questions }}</span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <small class="text-muted">
                                            {{ gmdate('i:s', $attempt->total_time_seconds) }}
                                        </small>
                                    </td>
                                    <td class="px-4 py-3">
                                        <small class="text-muted">
                                            {{ $attempt->completed_at->format('M d, Y') }}<br>
                                            {{ $attempt->completed_at->format('h:i A') }}
                                        </small>
                                    </td>
                                    <td class="px-4 py-3 text-end">
                                        <a href="{{ route('quiz.view-attempt', $attempt->id) }}" 
                                           class="btn btn-sm btn-outline-primary">
                                            View Details
                                        </a>
                                        <a href="{{ route('quiz.play', $attempt->topic->id) }}" 
                                           class="btn btn-sm btn-outline-secondary">
                                            Retake
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Pagination -->
        <div class="mt-4 d-flex justify-content-center">
            {{ $attempts->links() }}
        </div>
    @endif
</div>

<style>
    .card {
        transition: transform 0.2s;
    }
    
    .card:hover {
        transform: translateY(-2px);
    }
    
    .table tbody tr {
        transition: background-color 0.2s;
    }
    
    .table tbody tr:hover {
        background-color: rgba(0, 0, 0, 0.02);
    }
    
    .progress {
        border-radius: 10px;
        background-color: #e9ecef;
    }
    
    .progress-bar {
        border-radius: 10px;
    }
    
    .btn-sm {
        padding: 0.25rem 0.75rem;
        font-size: 0.875rem;
    }
</style>
@endsection