@extends('admin.layout.app')

@section('body')
<div class="card shadow-sm">
    <div class="card-body">

        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
            <div>
                <h4 class="mb-1">{{ __('admin.edit_question') }}</h4>
                <small class="text-muted">{{ __('admin.quiz') }}: {{ $quiz->title }}</small>
            </div>
            <a href="{{ route('quizzes.questions.index', $quiz->id) }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-arrow-left me-1"></i> {{ __('admin.back') }}
            </a>
        </div>

        @if(session('msg'))
            <div class="alert alert-info">{{ session('msg') }}</div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('quizzes.questions.update', [$quiz->id, $question->id]) }}">
            @csrf
            @method('PUT')

            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">{{ __('admin.type_2') }}</label>
                    <select name="type" id="qType" class="form-select" required>
                        <option value="mcq" @selected(old('type',$question->type)==='mcq')>{{ __('admin.mcq') }}</option>
                        <option value="true_false" @selected(old('type',$question->type)==='true_false')>{{ __('admin.true_false') }}</option>
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="form-label">{{ __('admin.points_2') }}</label>
                    <input type="number" min="1" name="points" class="form-control"
                           value="{{ old('points',$question->points) }}" required>
                </div>

                <div class="col-md-3">
                    <label class="form-label">{{ __('admin.sort_order') }}</label>
                    <input type="number" min="0" name="sort_order" class="form-control"
                           value="{{ old('sort_order',$question->sort_order) }}">
                </div>

                <div class="col-md-3" id="tfWrap" style="display:none;">
                    <label class="form-label">{{ __('admin.correct_answer') }}</label>
                    <select name="correct_true_false" class="form-select">
                        <option value="1" @selected(old('correct_true_false', $question->correct_true_false ? '1':'0')==='1')>{{ __('admin.true') }}</option>
                        <option value="0" @selected(old('correct_true_false', $question->correct_true_false ? '1':'0')==='0')>{{ __('admin.false') }}</option>
                    </select>
                </div>

                <div class="col-12">
                    <label class="form-label">{{ __('admin.question_text') }}</label>
                    <textarea name="question_text" class="form-control" rows="3" required>{{ old('question_text',$question->question_text) }}</textarea>
                </div>

                <div class="col-12">
                    <label class="form-label">{{ __('admin.explanation_optional') }}</label>
                    <textarea name="explanation" class="form-control" rows="2">{{ old('explanation',$question->explanation) }}</textarea>
                </div>

                <div class="col-12 d-flex gap-2">
                    <button class="btn btn-primary">
                        <i class="fas fa-save me-2"></i> {{ __('admin.update_question') }}
                    </button>
                    <a href="{{ route('quizzes.questions.show', [$quiz->id, $question->id]) }}" class="btn btn-light border">
                        {{ __('admin.view') }}
                    </a>
                </div>
            </div>
        </form>

        {{-- OPTIONS MANAGER --}}
        <hr class="my-4">

        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
            <div>
                <h5 class="mb-0">{{ __('admin.options_manager') }}</h5>
                <small class="text-muted">{{ __('admin.only_for_mcq_add_options_then_mark_one_as_correct') }}</small>
            </div>
        </div>

        @if($question->type !== 'mcq')
            <div class="alert alert-warning mb-0">
                {{ __('admin.this_question_is') }} <b>{{ strtoupper($question->type) }}</b>{{ __('admin.options_are_only_available_for') }} <b>{{ __('admin.mcq') }}</b>.
            </div>
        @else

            <form method="POST" action="{{ route('quizzes.questions.options.store', [$quiz->id, $question->id]) }}" class="row g-2 mb-3">
                @csrf
                <div class="col-md-8">
                    <input name="option_text" class="form-control" placeholder="{{ __('admin.option_text_2') }}" required>
                </div>
                <div class="col-md-2">
                    <input name="sort_order" type="number" min="0" class="form-control" value="0">
                </div>
                <div class="col-md-2 d-grid">
                    <button class="btn btn-success">
                        <i class="fas fa-plus me-1"></i> {{ __('admin.add') }}
                    </button>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>{{ __('admin.option') }}</th>
                            <th style="width:150px;">{{ __('admin.correct_2') }}</th>
                            <th style="width:120px;">{{ __('admin.order_2') }}</th>
                            <th style="width:190px;">{{ __('admin.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($question->options as $op)
                            <tr>
                                <td class="fw-semibold">{{ $op->option_text }}</td>
                                <td>
                                    @if($op->is_correct)
                                        <span class="badge bg-success">{{ __('admin.correct_3') }}</span>
                                    @else
                                        <span class="badge bg-light text-dark border">—</span>
                                    @endif
                                </td>
                                <td>{{ $op->sort_order }}</td>
                                <td class="d-flex gap-2">
                                    <form method="POST" action="{{ route('quizzes.questions.options.correct', [$quiz->id, $question->id, $op->id]) }}">
                                        @csrf
                                        <button class="btn btn-outline-success btn-sm" type="submit" title="{{ __('admin.make_correct') }}">
                                            <i class="fas fa-check"></i>
                                        </button>
                                    </form>

                                    <form method="POST" action="{{ route('quizzes.questions.options.destroy', [$quiz->id, $question->id, $op->id]) }}"
                                          onsubmit="return confirm('{{ __('admin.delete_this_option') }}');">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-outline-danger btn-sm" type="submit" title="{{ __('admin.delete') }}">
                                            <i class="far fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center p-4 text-muted">{{ __('admin.no_options_yet') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

        @endif

    </div>
</div>

<script>
(function(){
    const qType = document.getElementById('qType');
    const tfWrap = document.getElementById('tfWrap');
    function toggleTF(){
        tfWrap.style.display = (qType.value === 'true_false') ? 'block' : 'none';
    }
    qType.addEventListener('change', toggleTF);
    toggleTF();
})();
</script>
@endsection