@extends('layouts.examiner')
@section('title', 'Edit Question')

@section('content')
<h1 class="h3 mb-4 text-gray-800">Edit Question</h1>

<div class="row">

    {{-- ── Edit form ──────────────────────────────────────────── --}}
    <div class="col-lg-7">
        <div class="card shadow mb-4">
            <div class="card-body">
                <form method="POST" action="{{ route('examiner.questions.update', $question) }}" id="editForm">
                    @csrf @method('PUT')
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label>Session <span class="text-danger">*</span></label>
                            <select name="session_id" class="form-control @error('session_id') is-invalid @enderror" required>
                                <option value="">-- Select Session --</option>
                                @foreach($sessions as $s)
                                <option value="{{ $s->id }}" {{ old('session_id', $question->session_id) == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
                                @endforeach
                            </select>
                            @error('session_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6 form-group">
                            <label>Subject <span class="text-danger">*</span></label>
                            <select name="subject_id" class="form-control @error('subject_id') is-invalid @enderror" required>
                                <option value="">-- Select Subject --</option>
                                @foreach($subjects as $s)
                                <option value="{{ $s->id }}" {{ old('subject_id', $question->subject_id) == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
                                @endforeach
                            </select>
                            @error('subject_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Question <span class="text-danger">*</span></label>
                        <textarea name="question" id="questionText" rows="4"
                                  class="form-control @error('question') is-invalid @enderror"
                                  required>{{ old('question', $question->question) }}</textarea>
                        @error('question')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group">
                        <label>Options &mdash; <small class="text-muted">Select the radio button for the correct answer</small></label>
                        @php $optionLetters = ['A', 'B', 'C', 'D']; @endphp
                        @foreach($question->options as $i => $opt)
                        <div class="input-group mb-2">
                            <div class="input-group-prepend">
                                <div class="input-group-text">
                                    <input type="radio" name="correct" value="{{ $opt->id }}"
                                           {{ old('correct', $opt->is_right ? $opt->id : null) == $opt->id ? 'checked' : '' }}>
                                </div>
                                <span class="input-group-text">{{ $optionLetters[$i] ?? ($i+1) }}</span>
                            </div>
                            <input type="text" name="options[{{ $opt->id }}]"
                                   class="form-control option-input"
                                   data-letter="{{ $optionLetters[$i] ?? ($i+1) }}"
                                   data-correct="{{ $opt->is_right ? 'true' : 'false' }}"
                                   data-id="{{ $opt->id }}"
                                   value="{{ old('options.'.$opt->id, $opt->name) }}"
                                   placeholder="Option" required>
                        </div>
                        @endforeach
                    </div>

                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save mr-1"></i> Update Question
                    </button>
                    <a href="{{ route('examiner.questions.index') }}" class="btn btn-secondary">Cancel</a>
                </form>
            </div>
        </div>
    </div>

    {{-- ── Live preview ────────────────────────────────────────── --}}
    <div class="col-lg-5">
        <div class="card shadow mb-4" style="position:sticky;top:1rem;">
            <div class="card-header py-3 d-flex align-items-center">
                <i class="fas fa-eye text-primary mr-2"></i>
                <h6 class="m-0 font-weight-bold text-primary">Preview</h6>
                <span class="ml-auto badge badge-light text-muted small">Updates as you type</span>
            </div>
            <div class="card-body" style="font-family: Georgia, 'Times New Roman', serif;">

                {{-- Question text --}}
                <div id="previewQuestion"
                     style="font-size:1rem;line-height:1.75;color:#1e293b;margin-bottom:1.2rem;min-height:2rem;">
                </div>

                {{-- Options --}}
                <div id="previewOptions" style="display:flex;flex-direction:column;gap:.45rem;">
                </div>

            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
(function () {
    var letters = ['A', 'B', 'C', 'D'];

    // Collect initial option data from the form inputs
    function getOptions() {
        return Array.from(document.querySelectorAll('.option-input')).map(function (inp, i) {
            var radio = inp.closest('.input-group').querySelector('input[type="radio"]');
            return {
                letter:  inp.dataset.letter || letters[i] || String.fromCharCode(65 + i),
                text:    inp.value,
                correct: radio ? radio.checked : false,
                id:      inp.dataset.id,
            };
        });
    }

    function renderPreview() {
        // Question
        var qText = document.getElementById('questionText').value;
        document.getElementById('previewQuestion').innerHTML =
            qText ? qText : '<span style="color:#94a3b8;font-style:italic;font-family:sans-serif;">Question text will appear here…</span>';

        // Trigger MathJax re-render if available
        if (window.MathJax && MathJax.typesetPromise) {
            MathJax.typesetPromise([document.getElementById('previewQuestion')]).catch(function(){});
        }

        // Options
        var opts = getOptions();
        var html = opts.map(function (o) {
            var isCorrect = o.correct;
            var border    = isCorrect ? '2px solid #1d4ed8' : '2px solid #e2e8f0';
            var bg        = isCorrect ? '#eff6ff' : '#fff';
            var letterBg  = isCorrect ? '#1d4ed8' : '#f1f5f9';
            var letterCol = isCorrect ? '#fff'    : '#64748b';
            var textCol   = isCorrect ? '#1d4ed8' : '#1e293b';
            var textWt    = isCorrect ? '600'     : '400';
            return '<div style="display:flex;align-items:center;gap:.7rem;border:' + border + ';border-radius:10px;padding:.62rem 1rem;background:' + bg + ';">' +
                '<span style="display:inline-flex;align-items:center;justify-content:center;min-width:27px;height:27px;border-radius:6px;background:' + letterBg + ';border:1px solid #e2e8f0;font-size:.78rem;font-weight:700;font-family:Inter,sans-serif;color:' + letterCol + ';flex-shrink:0;">' + o.letter + '</span>' +
                '<span style="color:' + textCol + ';font-weight:' + textWt + ';font-size:.95rem;">' + (o.text || '<span style="color:#94a3b8;font-style:italic;">Option ' + o.letter + '</span>') + '</span>' +
                '</div>';
        }).join('');
        document.getElementById('previewOptions').innerHTML = html;

        // Re-render MathJax in options too
        if (window.MathJax && MathJax.typesetPromise) {
            MathJax.typesetPromise([document.getElementById('previewOptions')]).catch(function(){});
        }
    }

    // Wire up live updates
    document.getElementById('questionText').addEventListener('input', renderPreview);

    document.querySelectorAll('.option-input').forEach(function (inp) {
        inp.addEventListener('input', renderPreview);
    });

    // Radio changes affect which option is highlighted
    document.querySelectorAll('input[name="correct"]').forEach(function (radio) {
        radio.addEventListener('change', renderPreview);
    });

    // Initial render on load
    renderPreview();
})();
</script>
@endpush