@extends('admin.layouts.app')

@section('title', 'Edit Lesson')
@section('page-title', 'Edit Lesson')

@section('content')
<div style="max-width: 1000px;">
    <!-- Lesson Details Card -->
    <div class="card">
        <div class="card-header">
            <h3>Edit: {{ Str::limit($lesson->title, 30) }}</h3>
            <a href="{{ route('admin.lessons.index') }}" class="btn btn-sm" style="background: var(--border); color: var(--text);">← Back to Lessons</a>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.lessons.update', $lesson) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="grid-responsive-2" style="margin-bottom: 1.5rem;">
                    <!-- Title -->
                    <div class="form-group">
                        <label for="title">Title</label>
                        <input type="text" id="title" name="title" value="{{ old('title', $lesson->title) }}" 
                            required style="width: 100%;">
                        @error('title')
                            <span style="color: var(--danger); font-size: 0.8rem;">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Course -->
                    <div class="form-group">
                        <label for="course_id">Course</label>
                        <select id="course_id" name="course_id" required style="width: 100%;">
                            @foreach($courses as $course)
                                <option value="{{ $course->id }}" {{ old('course_id', $lesson->course_id) == $course->id ? 'selected' : '' }}>
                                    {{ $course->title }}
                                </option>
                            @endforeach
                        </select>
                        @error('course_id')
                            <span style="color: var(--danger); font-size: 0.8rem;">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Order -->
                    <div class="form-group">
                        <label for="order">Order</label>
                        <input type="number" id="order" name="order" value="{{ old('order', $lesson->order) }}" 
                            min="1" required style="width: 100%;">
                        @error('order')
                            <span style="color: var(--danger); font-size: 0.8rem;">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Duration -->
                    <div class="form-group">
                        <label for="duration_minutes">Duration (minutes)</label>
                        <input type="number" id="duration_minutes" name="duration_minutes" 
                            value="{{ old('duration_minutes', $lesson->duration_minutes) }}" 
                            min="1" style="width: 100%;">
                        @error('duration_minutes')
                            <span style="color: var(--danger); font-size: 0.8rem;">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <!-- Content -->
                <div class="form-group" style="margin-bottom: 1.5rem;">
                    <label for="content">Content (HTML)</label>
                    <textarea id="content" name="content" rows="10" 
                        style="width: 100%; font-family: var(--font-main); font-size: 0.9rem;">{{ old('content', $lesson->content) }}</textarea>
                    @error('content')
                        <span style="color: var(--danger); font-size: 0.8rem;">{{ $message }}</span>
                    @enderror
                </div>

                <div style="display: flex; gap: 1rem;">
                    <button type="submit" class="btn btn-primary">
                        Save Changes
                    </button>
                    <a href="{{ route('admin.lessons.index') }}" class="btn" style="background: var(--border); color: var(--text);">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Quiz Questions Card -->
    <div class="card" style="margin-top: 1.5rem;">
        <div class="card-header">
            <h3>Quiz Questions ({{ $lesson->quizQuestions->count() }})</h3>
            <button type="button" class="btn btn-sm btn-primary" onclick="toggleAddQuestion()">
                + Add Question
            </button>
        </div>
        <div class="card-body">
            <!-- Add New Question Form (Hidden by default) -->
            <div id="addQuestionForm" style="display: none; background: var(--bg-surface); padding: 1.5rem; border-radius: 4px; border: 1px solid var(--primary); margin-bottom: 1.5rem;">
                <h4 style="color: var(--primary); margin-bottom: 1rem;">New Question</h4>
                <form action="{{ route('admin.quiz-questions.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="lesson_id" value="{{ $lesson->id }}">
                    
                    <div class="form-group" style="margin-bottom: 1rem;">
                        <label>Question</label>
                        <input type="text" name="question" required style="width: 100%;" placeholder="Enter the question...">
                    </div>
                    
                    <div class="grid-responsive-2" style="margin-bottom: 1rem;">
                        <div class="form-group">
                            <label>Option A</label>
                            <input type="text" name="option_a" required style="width: 100%;" placeholder="Option A">
                        </div>
                        <div class="form-group">
                            <label>Option B</label>
                            <input type="text" name="option_b" required style="width: 100%;" placeholder="Option B">
                        </div>
                        <div class="form-group">
                            <label>Option C</label>
                            <input type="text" name="option_c" required style="width: 100%;" placeholder="Option C">
                        </div>
                        <div class="form-group">
                            <label>Option D</label>
                            <input type="text" name="option_d" required style="width: 100%;" placeholder="Option D">
                        </div>
                    </div>

                    <div class="form-group" style="margin-bottom: 1rem;">
                        <label>Correct Answer</label>
                        <select name="correct_answer" required style="width: 100%;">
                            <option value="a">Option A</option>
                            <option value="b">Option B</option>
                            <option value="c">Option C</option>
                            <option value="d">Option D</option>
                        </select>
                    </div>

                    <div style="display: flex; gap: 1rem;">
                        <button type="submit" class="btn btn-primary btn-sm">+ Add Question</button>
                        <button type="button" class="btn btn-sm" style="background: var(--border); color: var(--text);" onclick="toggleAddQuestion()">Cancel</button>
                    </div>
                </form>
            </div>

            <!-- Existing Questions List -->
            @forelse($lesson->quizQuestions as $index => $question)
            <div class="quiz-question" style="background: var(--bg-surface); padding: 1rem; border-radius: 4px; border: 1px solid var(--border); margin-bottom: 1rem;">
                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem;">
                    <p style="color: var(--primary); font-weight: 600;">Q{{ $index + 1 }}: {{ $question->question }}</p>
                    <div style="display: flex; gap: 8px;">
                        <button type="button" class="btn btn-sm btn-primary" onclick="toggleEditQuestion({{ $question->id }})">Edit</button>
                        <form action="{{ route('admin.quiz-questions.destroy', $question) }}" method="POST" style="display: inline;">
                            @csrf
                            @method('DELETE')
                            <button type="button" class="btn btn-sm btn-danger" data-delete="Delete this quiz question?">Delete</button>
                        </form>
                    </div>
                </div>
                
                <!-- Options Display -->
                <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
                    <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>

                <!-- Edit Form (Hidden) -->
                <div id="editQuestion{{ $question->id }}" style="display: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);">
                    <form action="{{ route('admin.quiz-questions.update', $question) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <div class="form-group" style="margin-bottom: 1rem;">
                            <label>Question</label>
                            <input type="text" name="question" value="{{ $question->question }}" required style="width: 100%;">
                        </div>
                        
                        <div class="grid-responsive-2" style="margin-bottom: 1rem;">
                            <div class="form-group">
                                <label>Option A</label>
                                <input type="text" name="option_a" value="{{ $question->option_a }}" required style="width: 100%;">
                            </div>
                            <div class="form-group">
                                <label>Option B</label>
                                <input type="text" name="option_b" value="{{ $question->option_b }}" required style="width: 100%;">
                            </div>
                            <div class="form-group">
                                <label>Option C</label>
                                <input type="text" name="option_c" value="{{ $question->option_c }}" required style="width: 100%;">
                            </div>
                            <div class="form-group">
                                <label>Option D</label>
                                <input type="text" name="option_d" value="{{ $question->option_d }}" required style="width: 100%;">
                            </div>
                        </div>

                        <div class="form-group" style="margin-bottom: 1rem;">
                            <label>Correct Answer</label>
                            <select name="correct_answer" required style="width: 100%;">
                                <option value="a" {{ strtolower($question->correct_answer) == 'a' ? 'selected' : '' }}>Option A</option>
                                <option value="b" {{ strtolower($question->correct_answer) == 'b' ? 'selected' : '' }}>Option B</option>
                                <option value="c" {{ strtolower($question->correct_answer) == 'c' ? 'selected' : '' }}>Option C</option>
                                <option value="d" {{ strtolower($question->correct_answer) == 'd' ? 'selected' : '' }}>Option D</option>
                            </select>
                        </div>

                        <div style="display: flex; gap: 1rem;">
                            <button type="submit" class="btn btn-primary btn-sm">Save Question</button>
                            <button type="button" class="btn btn-sm" style="background: var(--border); color: var(--text);" onclick="toggleEditQuestion({{ $question->id }})">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
            @empty
            <p style="color: var(--text-muted); text-align: center; padding: 2rem;">No quiz questions yet. Click "+ Add Question" to create one.</p>
            @endforelse
        </div>
    </div>
</div>

<script>
function toggleAddQuestion() {
    const form = document.getElementById('addQuestionForm');
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
}

function toggleEditQuestion(id) {
    const form = document.getElementById('editQuestion' + id);
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
}
</script>

@section('styles')
<style>
    .form-group {
        margin-bottom: 0;
    }
    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--primary);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    textarea {
        resize: vertical;
        min-height: 150px;
    }
</style>
@endsection
@endsection