@extends('layouts.dashboard')
@section('title', $bank->name)
@section('page_title', $bank->name)

@section('content')
    @include('partials.how-it-works', ['key' => 'instructor.question-banks'])

    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card shadow-sm mb-3">
                <div class="card-header bg-white d-flex flex-wrap gap-2 align-items-center">
                    <span class="fw-semibold">{{ __('Questions') }}</span>
                    <span class="badge bg-light text-dark">{{ $questions->total() }}</span>
                    @foreach(['easy' => 'success', 'medium' => 'warning', 'hard' => 'danger'] as $level => $colour)
                        <span class="badge bg-{{ $colour }}-subtle text-{{ $colour }}-emphasis">{{ status_label($level) }}: {{ $counts[$level] ?? 0 }}</span>
                    @endforeach
                    <form class="ms-auto d-flex gap-2" method="GET">
                        <select name="difficulty" class="form-select form-select-sm" onchange="this.form.submit()" style="width:auto">
                            <option value="">{{ __('All levels') }}</option>
                            @foreach(['easy', 'medium', 'hard'] as $level)
                                <option value="{{ $level }}" @selected(request('difficulty') === $level)>{{ status_label($level) }}</option>
                            @endforeach
                        </select>
                        <span class="position-relative d-inline-flex align-items-center">
                            <input type="search" name="q" value="{{ request('q') }}" class="form-control form-control-sm" placeholder="{{ __('Search…') }}" style="width:180px;padding-right:1.75rem" aria-label="{{ __('Search questions') }}">
                            @if(request('q'))
                                <a href="{{ request()->url() }}{{ count(request()->except('q', 'page')) ? '?'.http_build_query(request()->except('q', 'page')) : '' }}" class="position-absolute text-muted" style="right:.5rem" title="{{ __('Clear search') }}" aria-label="{{ __('Clear search') }}"><i class="bi bi-x-lg"></i></a>
                            @endif
                        </span>
                    </form>
                </div>
                <ul class="list-group list-group-flush">
                    @forelse($questions as $q)
                        <li class="list-group-item">
                            <div class="d-flex gap-2">
                                <div class="flex-grow-1">
                                    <div class="fw-semibold small">{{ $q->question }}</div>
                                    <div class="d-flex flex-wrap gap-1 mt-1">
                                        <span class="badge bg-secondary-subtle text-secondary-emphasis">{{ status_label($q->question_type) }}</span>
                                        <span class="badge bg-light text-dark border">{{ status_label($q->difficulty) }}</span>
                                        @if($q->subject)<span class="badge bg-info-subtle text-info-emphasis">{{ $q->subject }}</span>@endif
                                        <span class="badge bg-light text-dark border">{{ (float) $q->marks }} {{ __('marks') }}</span>
                                        @if((float) $q->negative_marks > 0)
                                            <span class="badge bg-danger-subtle text-danger-emphasis">-{{ (float) $q->negative_marks }}</span>
                                        @endif
                                    </div>
                                    @if($q->options->count())
                                        <ul class="small text-muted mt-2 mb-0">
                                            @foreach($q->options as $opt)
                                                <li class="{{ $opt->is_correct ? 'text-success fw-semibold' : '' }}">{{ $opt->option_text }}</li>
                                            @endforeach
                                        </ul>
                                    @endif
                                </div>
                                <form method="POST" action="{{ route('instructor.question-banks.questions.destroy', $q) }}" data-confirm="{{ __('Remove this question?') }}">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                </form>
                            </div>
                        </li>
                    @empty
                        @if(request('q') || request('difficulty'))
                            <li class="list-group-item text-muted text-center py-4">
                                {{ __('No questions match your search.') }}
                                <a href="{{ route('instructor.question-banks.edit', $bank) }}">{{ __('Clear search') }}</a>
                            </li>
                        @else
                            <li class="list-group-item text-muted text-center py-4">{{ __('This bank is empty. Add questions or import a CSV.') }}</li>
                        @endif
                    @endforelse
                </ul>
                @if($questions->hasPages())
                    <div class="card-footer bg-white">{{ $questions->links() }}</div>
                @endif
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card shadow-sm mb-3">
                <div class="card-header bg-white fw-semibold">{{ __('Add a question') }}</div>
                <form method="POST" action="{{ route('instructor.question-banks.questions.store', $bank) }}" class="card-body">
                    @csrf
                    <div class="mb-2">
                        <textarea name="question" rows="2" class="form-control form-control-sm" placeholder="{{ __('Question text') }}" required></textarea>
                    </div>
                    <div class="row g-2 mb-2">
                        <div class="col-6">
                            <select name="question_type" class="form-select form-select-sm" id="bankQType">
                                @foreach(\App\Support\QuestionTypes::LABELS as $typeKey => $typeLabel)
                                    <option value="{{ $typeKey }}">{{ __($typeLabel) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6">
                            <select name="difficulty" class="form-select form-select-sm">
                                <option value="easy">{{ __('Easy') }}</option>
                                <option value="medium" selected>{{ __('Medium') }}</option>
                                <option value="hard">{{ __('Hard') }}</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <input type="number" step="0.25" min="0" name="marks" value="1" class="form-control form-control-sm" placeholder="{{ __('Marks') }}" required>
                        </div>
                        <div class="col-6">
                            <input type="number" step="0.25" min="0" name="negative_marks" value="0" class="form-control form-control-sm" placeholder="{{ __('Negative') }}">
                        </div>
                    </div>

                    <div id="bankOptions">
                        @for($i = 0; $i < 4; $i++)
                            <div class="input-group input-group-sm mb-1 bank-option-row">
                                <span class="input-group-text bank-correct-cell">
                                    <input type="radio" name="correct" value="{{ $i }}" @checked($i === 0) aria-label="{{ __('Correct answer') }}" class="bank-correct">
                                </span>
                                <span class="input-group-text bank-order-cell d-none">{{ $i + 1 }}</span>
                                <input type="text" name="options[{{ $i }}]" class="form-control bank-option" placeholder="{{ __('Option') }} {{ chr(65 + $i) }}">
                                <input type="text" name="matches[{{ $i }}]" class="form-control bank-match d-none" placeholder="{{ __('Matches with…') }}">
                            </div>
                        @endfor
                        <div class="form-text mb-2" id="bankCorrectHint">{{ __('Select the radio next to the correct option.') }}</div>
                    </div>

                    <input type="text" name="subject" maxlength="100" class="form-control form-control-sm mb-2" placeholder="{{ __('Subject (optional, defaults to the bank subject)') }}">
                    <input type="text" name="tags" class="form-control form-control-sm mb-2" placeholder="{{ __('Tags (comma separated)') }}">
                    <textarea name="explanation" rows="2" class="form-control form-control-sm mb-2" placeholder="{{ __('Explanation shown after grading (optional)') }}"></textarea>
                    <button class="btn btn-primary btn-sm w-100">{{ __('Add to bank') }}</button>
                </form>
            </div>

            @if(module_enabled('ai') && setting('ai_generator_enabled', '1') === '1')
                <div class="card shadow-sm mb-3 border-primary-subtle">
                    <div class="card-header bg-white fw-semibold"><i class="bi bi-stars text-primary me-1"></i>{{ __('Generate with AI') }}</div>
                    <form method="POST" action="{{ route('instructor.ai.bank.generate', $bank) }}" enctype="multipart/form-data" class="card-body">
                        @csrf
                        <div class="row g-2 mb-2">
                            <div class="col-6">
                                <label class="form-label small mb-1">{{ __('How many') }}</label>
                                <input type="number" name="count" value="20" min="3" max="50" class="form-control form-control-sm">
                            </div>
                            <div class="col-6">
                                <label class="form-label small mb-1">{{ __('Difficulty') }}</label>
                                <select name="difficulty" class="form-select form-select-sm">
                                    <option value="easy">{{ __('Easy') }}</option>
                                    <option value="medium" selected>{{ __('Medium') }}</option>
                                    <option value="hard">{{ __('Hard') }}</option>
                                </select>
                            </div>
                        </div>
                        <input type="text" name="topic" class="form-control form-control-sm mb-2" placeholder="{{ __('Topic (optional)') }}">
                        <label class="form-label small mb-1">{{ __('Source material (optional)') }}</label>
                        <input type="file" name="source_file" class="form-control form-control-sm mb-2" accept=".txt,.md,.markdown,.vtt,.srt,.docx,.pdf">
                        <button class="btn btn-primary btn-sm w-100">{{ __('Generate questions') }}</button>
                        <div class="form-text">{{ __('Generated questions are drafts — read them before a real exam uses them.') }}</div>
                    </form>
                </div>
            @endif

            <div class="card shadow-sm mb-3">
                <div class="card-header bg-white fw-semibold">{{ __('Bulk import (CSV)') }}</div>
                <form method="POST" action="{{ route('instructor.question-banks.import', $bank) }}" enctype="multipart/form-data" class="card-body">
                    @csrf
                    <div class="alert alert-info small mb-3">
                        <div class="fw-semibold mb-1"><i class="bi bi-filetype-csv me-1"></i>{{ __('New to CSV files? Start with our template.') }}</div>
                        <ol class="mb-2 ps-3">
                            <li>{{ __('Download the template and open it in Excel or Google Sheets.') }}</li>
                            <li>{{ __('Replace the example questions with your own; keep the first row and columns unchanged.') }}</li>
                            <li>{{ __('Save or download it as a CSV file, then upload it here.') }}</li>
                        </ol>
                        <a href="{{ route('instructor.question-banks.csv-template') }}" class="btn btn-sm btn-primary"><i class="bi bi-download me-1"></i>{{ __('Download CSV template') }}</a>
                    </div>
                    <input type="file" name="file" accept=".csv,text/csv" class="form-control form-control-sm mb-2" required>
                    <p class="small text-muted mb-2">
                        {{ __('Column order:') }}<br>
                        <code>question, type, difficulty, marks, negative, A, B, C, D, correct, explanation, subject</code><br>
                        {{ __('“correct” accepts 1-4, A-D or the option text; for type “multiple” list several separated by | (e.g. A|C). A header row is skipped.') }}<br>
                        {{ __('Types: mcq, multiple, true_false, fill_blank (A-D = accepted answers), ordering (A-D in the right order), matching (A-D as left=right), short_answer, essay.') }}
                    </p>
                    <button class="btn btn-outline-primary btn-sm w-100">{{ __('Import questions') }}</button>
                </form>
            </div>

            <div class="card shadow-sm">
                <div class="card-header bg-white fw-semibold">{{ __('Bank settings') }}</div>
                <form method="POST" action="{{ route('instructor.question-banks.update', $bank) }}" class="card-body">
                    @csrf @method('PUT')
                    <input type="text" name="name" value="{{ $bank->name }}" class="form-control form-control-sm mb-2" required>
                    <input type="text" name="subject" value="{{ $bank->subject }}" class="form-control form-control-sm mb-2" placeholder="{{ __('Subject') }}">
                    <select name="course_id" class="form-select form-select-sm mb-2">
                        <option value="">{{ __('Any course') }}</option>
                        @foreach($courses as $course)
                            <option value="{{ $course->id }}" @selected($bank->course_id == $course->id)>{{ $course->title }}</option>
                        @endforeach
                    </select>
                    <textarea name="description" rows="2" class="form-control form-control-sm mb-2" placeholder="{{ __('Description') }}">{{ $bank->description }}</textarea>
                    <div class="form-check mb-2">
                        <input type="hidden" name="status" value="0">
                        <input class="form-check-input" type="checkbox" name="status" value="1" id="bankStatus" @checked($bank->status)>
                        <label class="form-check-label small" for="bankStatus">{{ __('Active') }}</label>
                    </div>
                    <button class="btn btn-outline-secondary btn-sm w-100">{{ __('Save settings') }}</button>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Options only make sense for choice questions.
        (function () {
            var type = document.getElementById('bankQType'), box = document.getElementById('bankOptions');
            if (!type || !box) return;
            var hints = {
                mcq: @json(__('Select the radio next to the correct option.')),
                multiple: @json(__('Tick every correct option.')),
                true_false: @json(__('Select the radio next to the correct option.')),
                fill_blank: @json(__('Write the question with ___ for the blank. Each box is an accepted answer (case-insensitive).')),
                ordering: @json(__('Enter the items in the correct order; learners see them shuffled.')),
                matching: @json(__('Left item and its correct partner; the right column is shuffled for learners.'))
            };
            function sync() {
                var t = type.value, choice = (t === 'mcq' || t === 'multiple' || t === 'true_false');
                box.style.display = hints[t] ? '' : 'none';
                box.querySelectorAll('.bank-correct-cell').forEach(function (el) { el.classList.toggle('d-none', !choice); });
                box.querySelectorAll('.bank-order-cell').forEach(function (el) { el.classList.toggle('d-none', t !== 'ordering'); });
                box.querySelectorAll('.bank-match').forEach(function (el) { el.classList.toggle('d-none', t !== 'matching'); });
                box.querySelectorAll('.bank-option').forEach(function (el, i) {
                    el.placeholder = t === 'fill_blank' ? @json(__('Accepted answer')) + ' ' + (i + 1) : (t === 'matching' ? @json(__('Left item')) + ' ' + (i + 1) : @json(__('Option')) + ' ' + String.fromCharCode(65 + i));
                    el.readOnly = t === 'true_false'; if (t === 'true_false') el.value = i === 0 ? 'True' : (i === 1 ? 'False' : ''); else if (el.readOnly === false && (el.value === 'True' || el.value === 'False')) el.value = '';
                });
                var multi = t === 'multiple';
                box.querySelectorAll('.bank-correct').forEach(function (el) { el.type = multi ? 'checkbox' : 'radio'; el.name = multi ? 'correct[]' : 'correct'; });
                var hint = document.getElementById('bankCorrectHint');
                if (hint) hint.textContent = hints[t] || '';
            }
            type.addEventListener('change', sync); sync();
        })();
    </script>
@endpush