@extends('admin.layouts.app')

@section('title', 'View Lesson')
@section('page-title', 'Lesson Details')

@section('content')
<div style="max-width: 900px;">
    <div class="card">
        <div class="card-header">
            <h3>{{ $lesson->title }}</h3>
            <div style="display: flex; gap: 8px;">
                <a href="{{ route('admin.lessons.edit', $lesson) }}" class="btn btn-sm btn-primary">Edit</a>
                <a href="{{ route('admin.lessons.index') }}" class="btn btn-sm" style="background: var(--border); color: var(--text);">← Back to Lessons</a>
            </div>
        </div>
        <div class="card-body">
            <!-- Lesson Info Grid -->
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
                <div style="background: var(--bg-surface); padding: 1rem; border-radius: 4px; border: 1px solid var(--border);">
                    <span style="color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;">Course</span>
                    <p style="color: var(--primary); font-weight: 600; margin-top: 0.5rem;">{{ $lesson->course->title ?? 'N/A' }}</p>
                </div>
                <div style="background: var(--bg-surface); padding: 1rem; border-radius: 4px; border: 1px solid var(--border);">
                    <span style="color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;">Order</span>
                    <p style="color: var(--primary); font-weight: 600; margin-top: 0.5rem;">#{{ $lesson->order }}</p>
                </div>
                <div style="background: var(--bg-surface); padding: 1rem; border-radius: 4px; border: 1px solid var(--border);">
                    <span style="color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;">Duration</span>
                    <p style="color: var(--primary); font-weight: 600; margin-top: 0.5rem;">{{ $lesson->duration_minutes ?? 0 }} min</p>
                </div>
                <div style="background: var(--bg-surface); padding: 1rem; border-radius: 4px; border: 1px solid var(--border);">
                    <span style="color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;">Quiz Questions</span>
                    <p style="color: var(--primary); font-weight: 600; margin-top: 0.5rem;">{{ $lesson->quizQuestions->count() }}</p>
                </div>
            </div>

            <!-- Lesson Content -->
            <div style="margin-bottom: 2rem;">
                <h4 style="color: var(--primary); margin-bottom: 1rem; font-family: var(--font-title); text-transform: uppercase; letter-spacing: 2px;">Lesson Content</h4>
                <div style="background: var(--bg-surface); padding: 1.5rem; border-radius: 4px; border: 1px solid var(--border); max-height: 400px; overflow-y: auto;">
                    @if($lesson->content)
                        <div style="color: var(--text); line-height: 1.8;">{!! $lesson->content !!}</div>
                    @else
                        <p style="color: var(--text-muted); text-align: center;">No content available</p>
                    @endif
                </div>
            </div>

            <!-- Quiz Questions -->
            @if($lesson->quizQuestions->count() > 0)
            <div>
                <h4 style="color: var(--primary); margin-bottom: 1rem; font-family: var(--font-title); text-transform: uppercase; letter-spacing: 2px;">Quiz Questions ({{ $lesson->quizQuestions->count() }})</h4>
                <div style="display: flex; flex-direction: column; gap: 1rem;">
                    @foreach($lesson->quizQuestions as $index => $question)
                    <div style="background: var(--bg-surface); padding: 1rem; border-radius: 4px; border: 1px solid var(--border);">
                        <p style="color: var(--primary); font-weight: 600; margin-bottom: 0.5rem;">Q{{ $index + 1 }}: {{ $question->question }}</p>
                        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem;">
                            <span style="padding: 4px 10px; border-radius: 4px; font-size: 0.85rem; {{ strtolower($question->correct_answer) == 'a' ? 'background: rgba(0, 255, 65, 0.2); color: var(--primary); border: 1px solid var(--primary);' : 'background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border);' }}">
                                A. {{ $question->option_a }}
                            </span>
                            <span style="padding: 4px 10px; border-radius: 4px; font-size: 0.85rem; {{ strtolower($question->correct_answer) == 'b' ? 'background: rgba(0, 255, 65, 0.2); color: var(--primary); border: 1px solid var(--primary);' : 'background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border);' }}">
                                B. {{ $question->option_b }}
                            </span>
                            <span style="padding: 4px 10px; border-radius: 4px; font-size: 0.85rem; {{ strtolower($question->correct_answer) == 'c' ? 'background: rgba(0, 255, 65, 0.2); color: var(--primary); border: 1px solid var(--primary);' : 'background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border);' }}">
                                C. {{ $question->option_c }}
                            </span>
                            <span style="padding: 4px 10px; border-radius: 4px; font-size: 0.85rem; {{ strtolower($question->correct_answer) == 'd' ? 'background: rgba(0, 255, 65, 0.2); color: var(--primary); border: 1px solid var(--primary);' : 'background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border);' }}">
                                D. {{ $question->option_d }}
                            </span>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection