@extends('layouts.admin')
@section('title','Edit Question')
@section('page-title','Edit Question')

@section('content')
<div class="row justify-content-center">
<div class="col-xl-10">

<div class="d-flex justify-content-between align-items-center mb-3">
    <a href="{{ route('admin.questions.index') }}" class="btn btn-light btn-sm">
        <i class="bi bi-arrow-left me-1"></i>Back to Questions
    </a>
    <a href="{{ route('admin.questions.show', $question) }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-eye me-1"></i>Preview
    </a>
</div>

<div class="card border-0 shadow-sm">
    <div class="card-header bg-white border-bottom py-3">
        <h6 class="mb-0 fw-bold"><i class="bi bi-pencil me-2 text-primary"></i>Edit Question #{{ $question->id }}</h6>
    </div>
    <div class="card-body p-4">
    <form method="POST" action="{{ route('admin.questions.update', $question) }}" enctype="multipart/form-data">
        @csrf @method('PUT')

        <div class="row g-3 mb-4">
            <div class="col-md-4">
                <label class="form-label fw-semibold">Subject <span class="text-danger">*</span></label>
                <select name="subject_id" id="subject_id" class="form-select" required>
                    @foreach($subjects as $subject)
                        <option value="{{ $subject->id }}" {{ old('subject_id', $question->subject_id) == $subject->id ? 'selected' : '' }}>
                            {{ $subject->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold">Topic</label>
                <select name="topic_id" id="topic_id" class="form-select">
                    <option value="">-- No topic --</option>
                    @foreach($topics as $topic)
                        <option value="{{ $topic->id }}" {{ old('topic_id', $question->topic_id) == $topic->id ? 'selected' : '' }}>
                            {{ $topic->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold">Year</label>
                <input type="number" name="year" class="form-control" value="{{ old('year', $question->year) }}" min="1990" max="{{ date('Y')+1 }}">
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold">Difficulty</label>
                <select name="difficulty" class="form-select" required>
                    @foreach(['easy','medium','hard'] as $d)
                        <option value="{{ $d }}" {{ old('difficulty', $question->difficulty) == $d ? 'selected' : '' }}>{{ ucfirst($d) }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label fw-semibold">Comprehension Passage</label>
            <select name="instruction_group_id" class="form-select">
                <option value="">-- No passage --</option>
                @foreach($instructionGroups as $group)
                    <option value="{{ $group->id }}" {{ old('instruction_group_id', $question->instruction_group_id) == $group->id ? 'selected' : '' }}>
                        [{{ $group->subject->name }}] {{ $group->title ?: 'Passage #'.$group->id }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="mb-3">
            <label class="form-label fw-semibold">Question Text <span class="text-danger">*</span></label>
            <textarea name="question_text" id="question_text" class="form-control" rows="4">{{ old('question_text', $question->question_text) }}</textarea>
        </div>

        <div class="mb-4">
            <label class="form-label fw-semibold">Question Image</label>
            @if($question->question_image)
                <div class="mb-2 d-flex align-items-center gap-3">
                    <img src="{{ asset('storage/' . $question->question_image) }}" class="img-thumbnail" style="max-height:80px">
                    <div>
                        <div class="form-check">
                            <input type="checkbox" name="remove_question_image" id="remove_image" class="form-check-input" value="1">
                            <label class="form-check-label text-danger small" for="remove_image">Remove this image</label>
                        </div>
                    </div>
                </div>
            @endif
            <input type="file" name="question_image" class="form-control" accept="image/*">
        </div>

        {{-- Options --}}
        <div class="mb-1">
            <label class="form-label fw-semibold">Answer Options</label>
            <small class="text-muted d-block mb-3">Select the radio button next to the correct answer.</small>
        </div>

        @foreach(['A','B','C','D'] as $i => $label)
        @php $option = $question->options->firstWhere('option_label', $label); @endphp
        <div class="card border mb-3 option-card {{ old('correct_option', $question->correct_option?->option_label) == $label ? 'selected' : '' }}"
             id="option-card-{{ $label }}">
            <div class="card-body p-3">
                <div class="d-flex align-items-start gap-3">
                    <input type="radio" name="correct_option" value="{{ $label }}"
                           id="correct_{{ $label }}" class="form-check-input mt-1"
                           {{ old('correct_option', $question->correct_option?->option_label) == $label ? 'checked' : '' }} required>
                    <label for="correct_{{ $label }}" class="option-label-badge">{{ $label }}</label>
                    <div class="flex-grow-1">
                        <textarea name="options[{{ $i }}][text]" id="option_{{ $label }}"
                                  class="form-control" rows="2">{{ old('options.'.$i.'.text', $option?->option_text) }}</textarea>
                        @if($option?->option_image)
                            <div class="mt-1">
                                <img src="{{ asset('storage/' . $option->option_image) }}" class="img-thumbnail" style="max-height:60px">
                            </div>
                        @endif
                        <input type="file" name="options[{{ $i }}][image]" class="form-control form-control-sm mt-2" accept="image/*">
                    </div>
                </div>
            </div>
        </div>
        @endforeach

        <div class="mb-4">
            <label class="form-label fw-semibold">Explanation</label>
            <textarea name="explanation" id="explanation" class="form-control" rows="3">{{ old('explanation', $question->explanation) }}</textarea>
        </div>

        <div class="mb-4">
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="is_active" value="1"
                       {{ old('is_active', $question->is_active) ? 'checked' : '' }}>
                <label class="form-check-label fw-semibold">Published</label>
            </div>
        </div>

        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary px-4"><i class="bi bi-check-lg me-1"></i>Update Question</button>
            <a href="{{ route('admin.questions.index') }}" class="btn btn-light px-4">Cancel</a>
        </div>
    </form>
    </div>
</div>

</div>
</div>
@endsection

@push('styles')
<style>
.option-label-badge { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:#e9ecef; font-weight:700; cursor:pointer; flex-shrink:0; margin-top:2px; }
input[type="radio"]:checked + .option-label-badge { background:#003580; color:#fff; }
.option-card.selected { border-color:#003580 !important; background:#f0f5ff; }
</style>
@endpush

@push('scripts')
<script src="https://cdn.tiny.cloud/1/4tzz0ahvwcavgl831ae12qgzavkuy2vuxlc4zakkfikf7amv/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({ selector: '#question_text, #explanation', plugins: 'lists table superscript subscript charmap image code', toolbar: 'undo redo | bold italic | superscript subscript | bullist numlist | table | charmap | code', menubar: false, height: 200, branding: false, promotion: false, statusbar: false });
tinymce.init({ selector: 'textarea[id^="option_"]', plugins: 'superscript subscript charmap', toolbar: 'bold italic | superscript subscript | charmap', menubar: false, height: 100, branding: false, promotion: false, statusbar: false });

$('#subject_id').on('change', function () {
    $.get('/admin/topics/by-subject/' + $(this).val(), function (data) {
        let opts = '<option value="">-- No topic --</option>';
        data.forEach(t => opts += `<option value="${t.id}">${t.name}</option>`);
        $('#topic_id').html(opts);
    });
});
$('input[name="correct_option"]').on('change', function () {
    $('.option-card').removeClass('selected');
    $('#option-card-' + this.value).addClass('selected');
});
</script>
@endpush