@extends('admin.layouts.app')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4>مدیریت سوالات: {{ $quiz->title }}</h4>
        <a href="{{ route('quizzes.index') }}" class="btn btn-outline-secondary">بازگشت به لیست آزمون‌ها</a>
    </div>

    <div class="row">
        <!-- Form to Add Question -->
        <div class="col-lg-5">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0 text-white">افزودن سوال جدید</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('quizzes.questions.store', $quiz->id) }}" method="POST">
                        @csrf

                        <div class="mb-3">
                            <label class="form-label">نوع سوال</label>
                            <select name="type" id="questionTypeSelect" class="form-select" onchange="toggleOptionFields(this.value)">
                                <option value="multiple_choice">چهار گزینه‌ای (تستی)</option>
                                <option value="descriptive">تشریحی</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">درس مربوطه</label>
                            <select name="subject_id" class="form-select">
                                <option value="">انتخاب درس (مثلاً: حقوق مدنی)</option>
                                @foreach($subjects as $subject)
                                    <option value="{{ $subject->id }}">{{ $subject->title }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">متن سوال / مسئله حقوقی <span class="text-danger">*</span></label>
                            <textarea name="question_text" class="form-control" rows="4" required placeholder="صورت سوال یا مسئله حقوقی را وارد کنید..."></textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">بارم / ضریب سوال</label>
                            <input type="number" step="0.25" name="score" class="form-control" value="1.00" required>
                        </div>

                        <!-- Multiple Choice Options Box -->
                        <div id="optionsContainer">
                            <h6 class="border-bottom pb-2 mb-3">گزینه‌ها و انتخاب پاسخ صحیح:</h6>
                            @for($i = 0; $i < 4; $i++)
                                <div class="input-group mb-2">
                                    <div class="input-group-text">
                                        <input class="form-check-input mt-0" type="radio" name="correct_option" value="{{ $i }}" {{ $i == 0 ? 'checked' : '' }}>
                                    </div>
                                    <input type="text" name="options[]" class="form-control" placeholder="متن گزینه {{ $i + 1 }}">
                                </div>
                            @endfor
                            <small class="text-muted d-block mb-3">دکمه رادیویی کنار هر گزینه نشان‌دهنده گزینه صحیح است.</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">پاسخ تشریحی و مستندات مواد قانونی</label>
                            <textarea name="solution_explanation" class="form-control" rows="3" placeholder="توضیح پاسخ، استدلال و مواد قانونی مربوطه..."></textarea>
                        </div>

                        <button type="submit" class="btn btn-success w-100">افزودن سوال</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Questions List -->
        <div class="col-lg-7">
            <div class="card">
                <div class="card-header bg-dark text-white">
                    <h6 class="mb-0 text-white">سوالات ثبت شده ({{ $quiz->questions->count() }})</h6>
                </div>
                <div class="card-body">
                    @forelse($quiz->questions as $index => $question)
                        <div class="border rounded p-3 mb-3 bg-light">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="badge bg-secondary">سوال شماره {{ $index + 1 }}</span>
                                <div>
                                    @if($question->subject)
                                        <span class="badge bg-info me-1">{{ $question->subject->title }}</span>
                                    @endif
                                    <span class="badge bg-{{ $question->type === 'multiple_choice' ? 'primary' : 'warning' }}">
                                    {{ $question->type === 'multiple_choice' ? 'تستی' : 'تشریحی' }}
                                </span>
                                </div>
                            </div>

                            <p class="fw-bold mb-2">{{ $question->question_text }}</p>

                            @if($question->type === 'multiple_choice')
                                <div class="row g-2 mb-2">
                                    @foreach($question->options as $optIndex => $option)
                                        <div class="col-6">
                                            <div class="p-2 border rounded {{ $option->is_correct ? 'bg-success text-white fw-bold' : 'bg-white' }}">
                                                {{ $optIndex + 1 }}) {{ $option->option_text }}
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                            @if($question->solution_explanation)
                                <div class="alert alert-secondary py-2 px-3 mt-2 mb-0 font-size-13">
                                    <strong>پاسخ تشریحی / مستند قانون:</strong> {{ $question->solution_explanation }}
                                </div>
                            @endif

                            <div class="text-end mt-2">
                                <form action="{{ route('questions.destroy', $question->id) }}" method="POST" class="d-inline" onsubmit="return confirm('آیا این سوال حذف شود؟')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger">حذف سوال</button>
                                </form>
                            </div>
                        </div>
                    @empty
                        <p class="text-center text-muted py-4">هنوز سوالی برای این آزمون ثبت نشده است.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <script>
        function toggleOptionFields(type) {
            const container = document.getElementById('optionsContainer');
            if (type === 'descriptive') {
                container.style.display = 'none';
            } else {
                container.style.display = 'block';
            }
        }
    </script>
@endsection