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

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

<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-plus-circle me-2 text-primary"></i>Add New Question</h6>
    </div>
    <div class="card-body p-4">
    <form method="POST" action="{{ route('admin.questions.store') }}" enctype="multipart/form-data">
        @csrf

        {{-- Row 1: Subject, Topic, Year, Difficulty --}}
        <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 @error('subject_id') is-invalid @enderror" required>
                    <option value="">-- Select Subject --</option>
                    @foreach($subjects as $subject)
                        <option value="{{ $subject->id }}" {{ old('subject_id') == $subject->id ? 'selected' : '' }}>
                            {{ $subject->name }}
                        </option>
                    @endforeach
                </select>
                @error('subject_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </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="">-- Select subject first --</option>
                </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') }}"
                       placeholder="e.g. 2023" min="1990" max="{{ date('Y') + 1 }}">
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold">Difficulty <span class="text-danger">*</span></label>
                <select name="difficulty" class="form-select @error('difficulty') is-invalid @enderror" required>
                    <option value="easy"   {{ old('difficulty') == 'easy'   ? 'selected' : '' }}>Easy</option>
                    <option value="medium" {{ old('difficulty', 'medium') == 'medium' ? 'selected' : '' }}>Medium</option>
                    <option value="hard"   {{ old('difficulty') == 'hard'   ? 'selected' : '' }}>Hard</option>
                </select>
                @error('difficulty')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        {{-- Instruction Group (Comprehension Passage) --}}
        <div class="mb-3">
            <label class="form-label fw-semibold">
                Comprehension Passage
                <small class="text-muted fw-normal">(optional — for Use of English comprehension questions)</small>
            </label>
            <select name="instruction_group_id" id="instruction_group_id" class="form-select">
                <option value="">-- No passage / instruction --</option>
                @foreach($instructionGroups as $group)
                    <option value="{{ $group->id }}" {{ old('instruction_group_id') == $group->id ? 'selected' : '' }}>
                        [{{ $group->subject->name }}] {{ $group->title ?: 'Passage #' . $group->id }} ({{ $group->questions_count ?? 0 }} questions)
                    </option>
                @endforeach
            </select>
            <small class="text-muted">
                Don't have a passage yet?
                <a href="{{ route('admin.instruction-groups.create') }}" target="_blank">Create one here</a>
            </small>
        </div>

        {{-- Question Text (TinyMCE) --}}
        <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 @error('question_text') is-invalid @enderror"
                      rows="4">{{ old('question_text') }}</textarea>
            <small class="text-muted">
                Use the toolbar for <strong>superscript</strong> (x²), <strong>subscript</strong> (H₂O), tables, and special characters.
            </small>
            @error('question_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        {{-- Question Image --}}
        <div class="mb-4">
            <label class="form-label fw-semibold">Question Image <small class="text-muted fw-normal">(optional)</small></label>
            <input type="file" name="question_image" class="form-control @error('question_image') is-invalid @enderror"
                   accept="image/*" id="question_image_input">
            <div id="question_image_preview" class="mt-2"></div>
            @error('question_image')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        {{-- Options A, B, C, D --}}
        <div class="mb-1">
            <label class="form-label fw-semibold">Answer Options <span class="text-danger">*</span></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)
        <div class="card border mb-3 option-card" id="option-card-{{ $label }}">
            <div class="card-body p-3">
                <div class="d-flex align-items-start gap-3">
                    {{-- Correct Answer Radio --}}
                    <div class="pt-1">
                        <input type="radio" name="correct_option" value="{{ $label }}"
                               id="correct_{{ $label }}" class="form-check-input mt-1"
                               {{ old('correct_option') == $label ? 'checked' : '' }} required>
                    </div>
                    {{-- Label Badge --}}
                    <label for="correct_{{ $label }}" class="option-label-badge">{{ $label }}</label>
                    {{-- Option content --}}
                    <div class="flex-grow-1">
                        <textarea name="options[{{ $i }}][text]" id="option_{{ $label }}"
                                  class="form-control @error('options.'.$i.'.text') is-invalid @enderror"
                                  rows="2" placeholder="Option {{ $label }} text (HTML supported: <sup>, <sub>)">{{ old('options.'.$i.'.text') }}</textarea>
                        @error('options.'.$i.'.text')<div class="invalid-feedback">{{ $message }}</div>@enderror

                        {{-- Option Image --}}
                        <div class="mt-2">
                            <input type="file" name="options[{{ $i }}][image]" class="form-control form-control-sm"
                                   accept="image/*">
                            <small class="text-muted">Optional image for this option</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach

        {{-- Explanation --}}
        <div class="mb-4">
            <label class="form-label fw-semibold">
                Explanation / Solution
                <small class="text-muted fw-normal">(shown to student after exam)</small>
            </label>
            <textarea name="explanation" id="explanation" class="form-control" rows="3">{{ old('explanation') }}</textarea>
        </div>

        {{-- Status --}}
        <div class="mb-4">
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="is_active" id="is_active"
                       value="1" {{ old('is_active', 1) ? 'checked' : '' }}>
                <label class="form-check-label fw-semibold" for="is_active">Publish immediately</label>
                <small class="d-block text-muted">Uncheck to save as draft</small>
            </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>Save 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-card { transition: border-color 0.2s; }
.option-label-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e9ecef;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}
input[type="radio"]:checked + .option-label-badge {
    background: #003580;
    color: #fff;
}
/* Highlight correct option card when radio selected */
.option-card.selected { border-color: #003580 !important; background: #f0f5ff; }
</style>
@endpush

@push('scripts')
{{-- TinyMCE CDN --}}
<script src="https://cdn.tiny.cloud/1/4tzz0ahvwcavgl831ae12qgzavkuy2vuxlc4zakkfikf7amv/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
// ── TinyMCE Init ──────────────────────────────────────────────────────────────
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 | image | code',
    menubar: false,
    height: 200,
    branding: false,
    promotion: false,
    statusbar: false,
    content_style: 'body { font-family: Arial, sans-serif; font-size: 14px; }',
});

// Option text areas also get TinyMCE (smaller)
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,
    content_style: 'body { font-family: Arial, sans-serif; font-size: 13px; }',
});

// ── Topic loader via AJAX ─────────────────────────────────────────────────────
$('#subject_id').on('change', function () {
    const subjectId = $(this).val();
    const topicSelect = $('#topic_id');

    topicSelect.html('<option value="">Loading...</option>');

    if (!subjectId) {
        topicSelect.html('<option value="">-- Select subject first --</option>');
        return;
    }

    $.get('/admin/topics/by-subject/' + subjectId, function (data) {
        let options = '<option value="">-- No topic --</option>';
        data.forEach(function (topic) {
            options += `<option value="${topic.id}">${topic.name}</option>`;
        });
        topicSelect.html(options);
    }).fail(function () {
        topicSelect.html('<option value="">-- No topics found --</option>');
    });
});

// ── Image preview ─────────────────────────────────────────────────────────────
$('#question_image_input').on('change', function () {
    const file = this.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = e => {
            $('#question_image_preview').html(
                `<img src="${e.target.result}" class="img-thumbnail mt-1" style="max-height:150px">`
            );
        };
        reader.readAsDataURL(file);
    }
});

// ── Highlight selected option card ────────────────────────────────────────────
$('input[name="correct_option"]').on('change', function () {
    $('.option-card').removeClass('selected');
    $('#option-card-' + this.value).addClass('selected');
});
// Init on page load for old() values
const checked = $('input[name="correct_option"]:checked').val();
if (checked) $('#option-card-' + checked).addClass('selected');
</script>
@endpush