@extends('layouts.app')
@section('title', 'Manage Questions')
@section('page-title', 'Questions — ' . $exam->title)
@section('content')

<div style="max-width:900px;">

    <!-- Exam summary bar -->
    <div class="card" style="margin-bottom:24px;background:linear-gradient(135deg,rgba(79,124,255,.08),rgba(124,92,252,.06));">
        <div class="card-body" style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;">
            <div>
                <h3 style="margin-bottom:4px;">{{ $exam->title }}</h3>
                <div class="text-muted text-sm">{{ $questions->count() }} question(s) · {{ $exam->total_marks }} total marks · {{ $exam->duration_minutes }} min</div>
            </div>
            <div class="flex gap-2">
                @if($exam->status === 'draft' && $questions->count() > 0)
                <form method="POST" action="{{ route('tester.exams.publish', $exam) }}" style="display:contents;">
                    @csrf
                    <button class="btn btn-success"><i class="bi bi-cloud-upload"></i> Publish</button>
                </form>
                @endif
                @if($exam->status === 'published')
                <form method="POST" action="{{ route('tester.exams.activate', $exam) }}" style="display:contents;">
                    @csrf
                    <button class="btn btn-primary"><i class="bi bi-lightning"></i> Activate</button>
                </form>
                @endif
                <a href="{{ route('tester.exams.registrations', $exam) }}" class="btn btn-outline">
                    <i class="bi bi-people"></i> Candidates
                </a>
            </div>
        </div>
    </div>

    <!-- Add Question Form -->
    <div class="card" style="margin-bottom:24px;">
        <div class="card-header"><h5><i class="bi bi-plus-circle"></i> Add Question</h5></div>
        <div class="card-body">
            <form method="POST" action="{{ route('tester.exams.questions.store', $exam) }}" id="questionForm">
                @csrf

                <div class="grid-2" style="margin-bottom:0;">
                    <div class="form-group">
                        <label class="form-label">Question Type *</label>
                        <select name="type" class="form-control" id="questionType" onchange="handleTypeChange()">
                            @foreach(\App\Models\Question::TYPES as $val => $label)
                            <option value="{{ $val }}" {{ old('type') === $val ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Marks *</label>
                        <input type="number" name="marks" class="form-control" value="{{ old('marks', 1) }}" min="1" max="100" required>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Question Text *</label>
                    <textarea name="question_text" class="form-control" rows="3" required placeholder="Enter your question here...">{{ old('question_text') }}</textarea>
                </div>

                <!-- MCQ Options -->
                <div id="mcqSection">
                    <label class="form-label">Answer Options</label>
                    <div id="optionsList">
                        @for($i = 0; $i < 4; $i++)
                        <div class="option-row flex items-center gap-2" style="margin-bottom:10px;" data-index="{{ $i }}">
                            <input type="radio" name="correct_option" value="{{ $i }}" {{ old('correct_option')==$i?'checked':'' }}
                                   style="width:18px;height:18px;accent-color:var(--green);flex-shrink:0;" title="Mark as correct">
                            <input type="text" name="options[{{ $i }}][text]" class="form-control"
                                   value="{{ old("options.$i.text") }}"
                                   placeholder="Option {{ chr(65+$i) }}">
                            @if($i >= 2)
                            <button type="button" onclick="removeOption(this)" class="btn btn-danger btn-sm" style="flex-shrink:0;padding:8px 10px;">
                                <i class="bi bi-trash"></i>
                            </button>
                            @endif
                        </div>
                        @endfor
                    </div>
                    <button type="button" onclick="addOption()" class="btn btn-outline btn-sm">
                        <i class="bi bi-plus"></i> Add Option
                    </button>
                    <p class="text-xs text-muted" style="margin-top:6px;">Select the radio button next to the correct answer.</p>
                </div>

                <!-- True / False -->
                <div id="tfSection" style="display:none;">
                    <label class="form-label">Correct Answer</label>
                    <div style="display:flex;gap:16px;">
                        <label class="form-check">
                            <input type="radio" name="correct_option" value="0"> True
                        </label>
                        <label class="form-check">
                            <input type="radio" name="correct_option" value="1"> False
                        </label>
                    </div>
                </div>

                <!-- Fill in the blank -->
                <div id="fillSection" style="display:none;">
                    <div class="form-group">
                        <label class="form-label">Correct Answer *</label>
                        <input type="text" name="correct_option" class="form-control" placeholder="The exact answer (case-insensitive)">
                    </div>
                </div>

                <div class="form-group" style="margin-top:16px;">
                    <label class="form-label">Explanation (shown after submission)</label>
                    <textarea name="explanation" class="form-control" rows="2" placeholder="Optional explanation of the correct answer...">{{ old('explanation') }}</textarea>
                </div>

                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> Add Question
                </button>
            </form>
        </div>
    </div>

    <!-- Questions List -->
    <div class="card">
        <div class="card-header">
            <h5>Questions ({{ $questions->count() }})</h5>
            <span class="text-muted text-sm">Total: {{ $exam->total_marks }} marks</span>
        </div>
        @forelse($questions as $i => $question)
        <div style="padding:20px 24px;border-bottom:1px solid var(--border);">
            <div class="flex justify-between items-center" style="margin-bottom:8px;">
                <div class="flex items-center gap-3">
                    <span style="width:28px;height:28px;border-radius:8px;background:rgba(79,124,255,.15);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0;">{{ $i+1 }}</span>
                    <div>
                        <span class="badge badge-muted" style="margin-right:6px;">{{ \App\Models\Question::TYPES[$question->type] }}</span>
                        <span class="badge badge-info">{{ $question->marks }} mark{{ $question->marks > 1 ? 's' : '' }}</span>
                    </div>
                </div>
                <form method="POST" action="{{ route('tester.exams.questions.destroy', [$exam, $question]) }}" onsubmit="return confirm('Remove this question?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>
                </form>
            </div>
            <p style="margin-bottom:{{ $question->options->count() ? '12px' : '0' }};">{{ $question->question_text }}</p>

            @if($question->options->count())
            <div style="display:flex;flex-wrap:wrap;gap:8px;">
                @foreach($question->options as $opt)
                <span class="badge {{ $opt->is_correct ? 'badge-success' : 'badge-muted' }}" style="font-size:.8rem;padding:4px 12px;">
                    {{ $opt->is_correct ? '✓' : '○' }} {{ $opt->option_text }}
                </span>
                @endforeach
            </div>
            @endif

            @if($question->explanation)
            <p class="text-xs text-muted" style="margin-top:8px;font-style:italic;">
                <i class="bi bi-info-circle"></i> {{ $question->explanation }}
            </p>
            @endif
        </div>
        @empty
        <div style="padding:60px;text-align:center;color:var(--muted);">
            <i class="bi bi-journal-x" style="font-size:2.5rem;display:block;margin-bottom:12px;"></i>
            No questions yet. Use the form above to add your first question.
        </div>
        @endforelse
    </div>
</div>

@push('scripts')
<script>
let optionCount = 4;

function handleTypeChange() {
    const type = document.getElementById('questionType').value;
    document.getElementById('mcqSection').style.display = ['multiple_choice'].includes(type) ? 'block' : 'none';
    document.getElementById('tfSection').style.display  = type === 'true_false' ? 'block' : 'none';
    document.getElementById('fillSection').style.display = type === 'fill_blank' ? 'block' : 'none';

    if (type === 'true_false') {
        const opts = document.getElementById('optionsList');
        opts.innerHTML = `
            <div class="option-row flex items-center gap-2" style="margin-bottom:10px;">
                <input type="radio" name="correct_option" value="0" style="width:18px;height:18px;accent-color:var(--green);flex-shrink:0;">
                <input type="hidden" name="options[0][text]" value="True">
                <span style="font-weight:600;">True</span>
            </div>
            <div class="option-row flex items-center gap-2" style="margin-bottom:10px;">
                <input type="radio" name="correct_option" value="1" style="width:18px;height:18px;accent-color:var(--green);flex-shrink:0;">
                <input type="hidden" name="options[1][text]" value="False">
                <span style="font-weight:600;">False</span>
            </div>`;
        document.getElementById('mcqSection').style.display = 'block';
        document.querySelector('#mcqSection > button').style.display = 'none';
        document.querySelector('#mcqSection > p').style.display = 'none';
    } else {
        document.querySelector('#mcqSection > button').style.display = '';
        document.querySelector('#mcqSection > p').style.display = '';
    }
}

function addOption() {
    const list = document.getElementById('optionsList');
    const idx  = optionCount++;
    const div  = document.createElement('div');
    div.className = 'option-row flex items-center gap-2';
    div.style.marginBottom = '10px';
    div.dataset.index = idx;
    div.innerHTML = `
        <input type="radio" name="correct_option" value="${idx}" style="width:18px;height:18px;accent-color:var(--green);flex-shrink:0;">
        <input type="text" name="options[${idx}][text]" class="form-control" placeholder="Option ${String.fromCharCode(65+idx)}">
        <button type="button" onclick="removeOption(this)" class="btn btn-danger btn-sm" style="flex-shrink:0;padding:8px 10px;">
            <i class="bi bi-trash"></i>
        </button>`;
    list.appendChild(div);
}

function removeOption(btn) {
    btn.closest('.option-row').remove();
}

// Init
handleTypeChange();
</script>
@endpush
@endsection