@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.add_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($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.store', $quiz->id) }}" id="qForm">
            @csrf

            <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','mcq')==='mcq')>{{ __('admin.mcq') }}</option>
                        <option value="true_false" @selected(old('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',1) }}" 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',0) }}">
                </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','1')==='1')>{{ __('admin.true') }}</option>
                        <option value="0" @selected(old('correct_true_false')==='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') }}</textarea>
                </div>

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

            {{-- ✅ MCQ OPTION MANAGER --}}
            <div id="mcqWrap" class="mt-4" style="display:none;">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                    <div>
                        <h5 class="mb-0">{{ __('admin.option_manager') }}</h5>
                        <small class="text-muted">{{ __('admin.add_options_and_select_the_correct_one') }}</small>
                    </div>
                    <button type="button" class="btn btn-success btn-sm" id="addOptionBtn">
                        <i class="fas fa-plus me-1"></i> {{ __('admin.add_option') }}
                    </button>
                </div>

                <div class="alert alert-light border small mb-3">
                    <i class="fas fa-circle-info text-primary me-1"></i>
                    {{ __('admin.you_must_add_at_least') }} <b>2</b> {{ __('admin.options_for_mcq_and_select') }} <b>{{ __('admin.one') }}</b> {{ __('admin.as_correct') }}
                </div>

                <div class="table-responsive">
                    <table class="table table-hover align-middle" id="optTable">
                        <thead class="table-light">
                            <tr>
                                <th style="width:80px;">{{ __('admin.correct_2') }}</th>
                                <th>{{ __('admin.option_text') }}</th>
                                <th style="width:110px;">{{ __('admin.remove') }}</th>
                            </tr>
                        </thead>
                        <tbody id="optBody">
                            {{-- initial 2 rows --}}
                        </tbody>
                    </table>
                </div>

                {{-- hidden input for correct index --}}
                <input type="hidden" name="correct_index" id="correctIndex" value="{{ old('correct_index', 0) }}">
            </div>

            <div class="mt-3 d-flex gap-2">
                <button class="btn btn-primary">
                    <i class="fas fa-save me-2"></i> {{ __('admin.save_question') }}
                </button>
                <a href="{{ route('quizzes.questions.index', $quiz->id) }}" class="btn btn-light border">
                    {{ __('admin.cancel') }}
                </a>
            </div>
        </form>

    </div>
</div>

<script>
(function(){
    const qType = document.getElementById('qType');
    const tfWrap = document.getElementById('tfWrap');
    const mcqWrap = document.getElementById('mcqWrap');
    const optBody = document.getElementById('optBody');
    const addBtn = document.getElementById('addOptionBtn');
    const correctIndex = document.getElementById('correctIndex');

    function rowTemplate(idx, value = '') {
        return `
        <tr data-index="${idx}">
            <td class="text-center">
                <input type="radio" name="correct_radio" ${idx==Number(correctIndex.value) ? 'checked':''}
                       onclick="document.getElementById('correctIndex').value='${idx}'">
            </td>
            <td>
                <input type="text" class="form-control" name="options[${idx}]" value="${value.replace(/"/g,'&quot;')}"
                       placeholder="{{ __('admin.option_text_2') }}" required>
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeRow(${idx})">
                    <i class="far fa-trash-alt"></i>
                </button>
            </td>
        </tr>`;
    }

    window.removeRow = function(idx){
        const row = optBody.querySelector(`tr[data-index="${idx}"]`);
        if(row) row.remove();

        // if removed was correct, set first one as correct
        const radios = optBody.querySelectorAll('input[type="radio"]');
        if(radios.length){
            radios[0].checked = true;
            correctIndex.value = optBody.querySelector('tr')?.getAttribute('data-index') || 0;
        }
    }

    function initDefaultOptions(){
        if(optBody.children.length) return;
        optBody.insertAdjacentHTML('beforeend', rowTemplate(0, @json(old('options.0','')) ));
        optBody.insertAdjacentHTML('beforeend', rowTemplate(1, @json(old('options.1','')) ));
        correctIndex.value = "{{ old('correct_index',0) }}";
    }

    addBtn.addEventListener('click', function(){
        // generate next index
        let max = -1;
        optBody.querySelectorAll('tr').forEach(tr => {
            max = Math.max(max, Number(tr.getAttribute('data-index')));
        });
        const next = max + 1;
        optBody.insertAdjacentHTML('beforeend', rowTemplate(next, ''));
    });

    function togglePanels(){
        const isTF = qType.value === 'true_false';
        tfWrap.style.display = isTF ? 'block' : 'none';
        mcqWrap.style.display = isTF ? 'none' : 'block';

        if(!isTF){
            initDefaultOptions();
        }
    }

    qType.addEventListener('change', togglePanels);
    togglePanels();
})();
</script>
@endsection