@extends('layouts.app')

@section('content')
<div class="container mt-4 mb-5">
    <!-- Back Button -->
    <div class="mb-4">
        <a href="{{ route('quiz.history') }}" class="btn btn-outline-secondary">
            ← Back to History
        </a>
    </div>

    <!-- Header Card -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h2 class="fw-bold mb-2">{{ $attempt->topic->title }}</h2>
                    <p class="text-muted mb-0">{{ $attempt->topic->description }}</p>
                </div>
                <div class="col-md-4 text-md-end mt-3 mt-md-0">
                    <a href="{{ route('quiz.play', $attempt->topic->id) }}" 
                       class="btn btn-primary">
                        🔄 Retake Quiz
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-3 col-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="mb-2">
                        @if($attempt->score_percentage >= 80)
                            <span style="font-size: 2rem;">🏆</span>
                        @elseif($attempt->score_percentage >= 60)
                            <span style="font-size: 2rem;">⭐</span>
                        @else
                            <span style="font-size: 2rem;">📚</span>
                        @endif
                    </div>
                    <h3 class="fw-bold 
                        @if($attempt->score_percentage >= 80) text-success
                        @elseif($attempt->score_percentage >= 60) text-primary
                        @else text-warning
                        @endif mb-1">
                        {{ number_format($attempt->score_percentage, 1) }}%
                    </h3>
                    <small class="text-muted">Final Score</small>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 col-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="mb-2">
                        <span style="font-size: 2rem;">✅</span>
                    </div>
                    <h3 class="fw-bold text-success mb-1">{{ $attempt->correct_answers }}</h3>
                    <small class="text-muted">Correct Answers</small>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 col-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="mb-2">
                        <span style="font-size: 2rem;">❌</span>
                    </div>
                    <h3 class="fw-bold text-danger mb-1">{{ $attempt->total_questions - $attempt->correct_answers }}</h3>
                    <small class="text-muted">Wrong Answers</small>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 col-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="mb-2">
                        <span style="font-size: 2rem;">⏱️</span>
                    </div>
                    <h3 class="fw-bold text-info mb-1">{{ gmdate('i:s', $attempt->total_time_seconds) }}</h3>
                    <small class="text-muted">Total Time</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Attempt Info -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <small class="text-muted d-block">Started At</small>
                    <strong>{{ $attempt->started_at->format('M d, Y - h:i A') }}</strong>
                </div>
                <div class="col-md-4">
                    <small class="text-muted d-block">Completed At</small>
                    <strong>{{ $attempt->completed_at->format('M d, Y - h:i A') }}</strong>
                </div>
                <div class="col-md-4">
                    <small class="text-muted d-block">Duration</small>
                    <strong>{{ $attempt->started_at->diffForHumans($attempt->completed_at, true) }}</strong>
                </div>
            </div>
        </div>
    </div>

    <!-- Questions Review -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom">
            <h5 class="mb-0 fw-bold">📝 Question Review</h5>
        </div>
        <div class="card-body p-0">
            @foreach($attempt->responses as $index => $response)
                <div class="border-bottom p-4 
                    @if($response->is_correct) bg-light-success
                    @else bg-light-danger
                    @endif">
                    
                    <!-- Question Number and Status -->
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <div class="d-flex align-items-center">
                            <span class="badge bg-secondary me-2">Question {{ $index + 1 }}</span>
                            @if($response->is_correct)
                                <span class="badge bg-success">✓ Correct</span>
                            @elseif($response->option_id)
                                <span class="badge bg-danger">✗ Incorrect</span>
                            @else
                                <span class="badge bg-warning text-dark">⊘ Not Answered</span>
                            @endif
                        </div>
                        <small class="text-muted">
                            Time: {{ $response->time_taken_seconds }}s
                        </small>
                    </div>

                    <!-- Question Text -->
                    <div class="mb-3">
                        <h6 class="fw-semibold">{{ $response->question->question }}</h6>
                    </div>

                    <!-- Options -->
                    <div class="options-list">
                        @foreach($response->question->options as $option)
                            <div class="option-review mb-2 p-3 rounded
                                @if($option->is_correct)
                                    border border-success bg-success bg-opacity-10
                                @elseif($response->option_id == $option->id && !$option->is_correct)
                                    border border-danger bg-danger bg-opacity-10
                                @else
                                    border bg-white
                                @endif">
                                
                                <div class="d-flex align-items-center">
                                    <!-- Icon -->
                                    <div class="me-3">
                                        @if($option->is_correct)
                                            <span class="text-success fw-bold">✓</span>
                                        @elseif($response->option_id == $option->id && !$option->is_correct)
                                            <span class="text-danger fw-bold">✗</span>
                                        @else
                                            <span class="text-muted">○</span>
                                        @endif
                                    </div>
                                    
                                    <!-- Option Text -->
                                    <div class="flex-grow-1">
                                        {{ $option->option_text }}
                                    </div>

                                    <!-- Labels -->
                                    <div>
                                        @if($option->is_correct)
                                            <span class="badge bg-success">Correct Answer</span>
                                        @endif
                                        @if($response->option_id == $option->id)
                                            <span class="badge bg-primary">Your Answer</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    @if(!$response->option_id)
                        <div class="alert alert-warning mt-3 mb-0">
                            <small>⚠️ You did not select an answer for this question</small>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="text-center mt-4">
        <a href="{{ route('quiz.play', $attempt->topic->id) }}" 
           class="btn btn-primary btn-lg px-5">
            Try Again to Improve Your Score
        </a>
    </div>
</div>

<style>
    .bg-light-success {
        background-color: rgba(25, 135, 84, 0.03);
    }
    
    .bg-light-danger {
        background-color: rgba(220, 53, 69, 0.03);
    }
    
    .option-review {
        transition: all 0.2s;
    }
    
    .option-review:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .card {
        transition: transform 0.2s;
    }
</style>
@endsection