@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="card">
            <div class="card-header">{{ __('إضافة سؤال') }}</div>

            <div class="card-body">
                @if (session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif

                @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 method="POST" action="{{ route('questions.store') }}" id="questionForm">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label">{{ __('نص السؤال') }}</label>
                        <textarea class="form-control" rows="3" name="question_text" required>{{ old('question_text') }}</textarea>
                    </div>

                    @if (\Illuminate\Support\Facades\Schema::hasColumn('questions', 'sort'))
                        <div class="mb-3">
                            <label class="form-label">{{ __('الترتيب (sort)') }}</label>
                            <input class="form-control" type="number" name="sort" min="1" step="1" value="{{ old('sort') }}">
                            <div class="form-text">{{ __('اتركه فارغاً ليُضاف تلقائياً في آخر الترتيب.') }}</div>
                        </div>
                    @endif

                    <div class="mb-3">
                        <label class="form-label">{{ __('نوع السؤال') }}</label>
                        <select class="form-select" name="question_type_id" id="question_type_id" required>
                            <option value="" selected disabled>{{ __('اختر...') }}</option>
                            @foreach ($questionTypes as $type)
                                <option value="{{ $type->id }}"
                                    data-slug="{{ $type->slug }}"
                                    @selected(old('question_type_id') == $type->id)>
                                    {{ $type->name }} ({{ $type->slug }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3" id="expectedSafeWrap">
                        <label class="form-label">{{ __('الإجابة الآمنة المتوقعة') }}</label>

                        <div class="d-flex gap-3">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="expected_safe_answer" id="safe_yes" value="1"
                                    @checked(old('expected_safe_answer') === '1')>
                                <label class="form-check-label" for="safe_yes">{{ __('نعم (1)') }}</label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="expected_safe_answer" id="safe_no" value="0"
                                    @checked(old('expected_safe_answer') === '0')>
                                <label class="form-check-label" for="safe_no">{{ __('لا (0)') }}</label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="expected_safe_answer" id="safe_none" value=""
                                    @checked(old('expected_safe_answer') === null || old('expected_safe_answer') === '')>
                                <label class="form-check-label" for="safe_none">{{ __('بدون') }}</label>
                            </div>
                        </div>

                        <div class="form-text">{{ __('قيمته تُحفظ كـ 1 أو 0 (اختياري).') }}</div>
                    </div>

                    <button class="btn btn-primary" type="submit">{{ __('حفظ') }}</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        (function () {
            const select = document.getElementById('question_type_id');
            // حقل الإجابة الآمنة أصبح دائماً ظاهر، لا يلزم أي تهيئة إضافية.
        })();
    </script>
@endsection

