law-api/resources/views/admin/quizzes/questions.blade.php

@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">
                
                <!-- 🚨 Display Validation Errors Here 🚨 -->
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <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" {{ old('type') == 'multiple_choice' ? 'selected' : '' }}>چهار گزینه‌ای (تستی)</option>
                            <option value="descriptive" {{ old('type') == 'descriptive' ? 'selected' : '' }}>تشریحی</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 }}" {{ old('subject_id') == $subject->id ? 'selected' : '' }}>
                                    {{ $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="صورت سوال یا مسئله حقوقی را وارد کنید...">{{ old('question_text') }}</textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">بارم / ضریب سوال</label>
                        <input type="number" step="0.25" name="score" class="form-control" value="{{ old('score', '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">
                                    <!-- Keep the correct radio button checked -->
                                    <input class="form-check-input mt-0" type="radio" name="correct_option" value="{{ $i }}" {{ old('correct_option', 0) == $i ? 'checked' : '' }}>
                                </div>
                                <!-- Keep the typed option text -->
                                <input type="text" name="options[]" class="form-control" value="{{ old('options.'.$i) }}" 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="توضیح پاسخ، استدلال و مواد قانونی مربوطه...">{{ old('solution_explanation') }}</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>
@endsection

@section('scripts')
<script>
    // Run this immediately on page load to check if we should hide options
    // in case the page reloads with old('type') set to 'descriptive'
    document.addEventListener("DOMContentLoaded", function() {
        var typeSelect = document.getElementById('questionTypeSelect');
        toggleOptionFields(typeSelect.value);
    });

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